Skip to content

Commit 9f0bc34

Browse files
amitguptagwlamitguptagwl
committed
redesign
- redesign whole UI - add toolbox with buttons - handle oolbox hover and selection UI change
1 parent 5849b7d commit 9f0bc34

15 files changed

+1393
-0
lines changed

‎.gitignore

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
node_modules

‎css/tags.css

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
.selection-color{
2+
background-color: #B3B3B3;
3+
}
4+
5+
.overlay-color{
6+
background-color: #666666;
7+
color: white;
8+
}
9+
10+
.base-color{
11+
background-color: #4D4D4D;
12+
color: white;
13+
}
14+
15+
.line{
16+
height: 1px;
17+
background-color: grey;
18+
}
19+
20+
.toolbox-border-top{
21+
border-top: 1px solid grey;
22+
}
23+
.toolbox-border-botton{
24+
border-botton: 1px solid grey;
25+
}

‎img/icons/move.svg

+2
Loading

‎img/icons/point.svg

+2
Loading

‎img/icons/polygon.svg

+2
Loading

‎img/icons/rectangle.svg

+2
Loading

‎img/icons/zoomin.svg

+2
Loading

‎img/icons/zoomout.svg

+2
Loading

‎index.1.html

+86
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<!-- Global site tag (gtag.js) - Google Analytics -->
5+
<!-- <script async src="https://www.googletagmanager.com/gtag/js?id=UA-119603824-1"></script>
6+
<script>
7+
window.dataLayer = window.dataLayer || [];
8+
function gtag(){dataLayer.push(arguments);}
9+
gtag('js', new Date());
10+
11+
gtag('config', 'UA-119603824-1'); -->
12+
</script>
13+
14+
<title>ImgLab</title>
15+
16+
<link rel="stylesheet" href="css/style.css">
17+
<link rel="stylesheet" href="css/slider.css">
18+
<link rel="stylesheet" href="css/tags.css">
19+
<link rel="stylesheet" href="css/jquery-confirm.min.css">
20+
<link rel="stylesheet" href="css/bootstrap.min.css">
21+
<link rel="stylesheet" href="css/bootstrap-switch.min.css">
22+
<!-- <link rel="stylesheet" href="css/font-awesome.min.css"> -->
23+
24+
<script src="js/thirdparty/jquery.min.js" ></script>
25+
<script src="js/thirdparty/bootstrap-switch.min.js"></script>
26+
<script src="js/thirdparty/jsplumb.min.js"></script>
27+
<script src="js/thirdparty/jquery-confirm.min.js"></script>
28+
<script src="js/thirdparty/bootstrap.min.js"></script>
29+
<script src="js/thirdparty/riot.min.js"></script>
30+
<script src="js/thirdparty/Blob.js"></script>
31+
<script src="js/thirdparty/FileSaver.min.js"></script>
32+
<script src="js/thirdparty/fxp.js"></script>
33+
34+
35+
</head>
36+
<body>
37+
<div class="flex-row">
38+
<div id="menubar" class="d-flex flex-row overlay-color" style="height: 50px;">
39+
<!-- <div class="p-2">
40+
<menu></menu>
41+
</div> -->
42+
<div class="p-2 ">
43+
<actionbar></actionbar>
44+
</div>
45+
</div><!-- End of Menubar -->
46+
47+
<div class="d-flex flex-row" style="height: calc(100vh - 50px);">
48+
<div id="toolbar" class="d-flex flex-column overlay-color align-items-end" style="border: 1px solid grey;">
49+
<toolbox tools="labelling"></toolbox>
50+
<toolbox class="mt-auto toolbox-border-top" tools="canvas"></toolbox>
51+
</div>
52+
<div id="workarea" class="p-2 base-color" style="width: 100vw">
53+
<workarea></workarea>
54+
</div>
55+
<div id="sidebar" class="p-2 overlay-color" style="width: 300px; border: 1px solid grey;">
56+
<sidebar></sidebar>
57+
</div>
58+
</div>
59+
60+
<!-- <div class="d-flex flex-row">
61+
<div id="statusbar" class="p-2"></div>
62+
</div> -->
63+
</div>
64+
65+
66+
67+
68+
<script src="js/config.js"></script>
69+
<script src="js/fileOperation.js"></script>
70+
<script src="js/uiaction.js"></script>
71+
<script src="js/widget.js"></script>
72+
<script src="js/FaceBox.js"></script>
73+
<script src="js/labels.js"></script>
74+
<script src="js/labelFileLoader.js"></script>
75+
<script src="js/dataloader.js"></script>
76+
<script src="js/slider.js"></script>
77+
<script src="js/Face++DataParser.js"></script>
78+
<script src="js/dlibDataHandler.js"></script>
79+
<script src="tags/tags.js"></script>
80+
<script type="text/javascript">
81+
$(function(){
82+
riot.mount("*");
83+
});
84+
</script>
85+
</body>
86+
</html>

‎js/config.js

+43
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
var tools = {
2+
labelling : [
3+
{
4+
id : "tool-point" ,
5+
title : "Point",
6+
desp : "Create a feature point inside the concave polygon or boundary box",
7+
icon : "point.svg"
8+
},{
9+
id : "tool-rectangle" ,
10+
title : "Rectangle",
11+
desp : "Create a Boundary boxrectangle",
12+
icon : "rectangle.svg"
13+
},{
14+
id : "tool-polygon" ,
15+
title : "Polygon",
16+
desp : "Create a concave polygon",
17+
icon : "polygon.svg"
18+
}
19+
],
20+
canvas : [
21+
{
22+
id : "tool-move" ,
23+
title : "Move",
24+
desp : "Move an element or the entire workarea",
25+
icon : "move.svg"
26+
},{
27+
id : "tool-zoom-in" ,
28+
title : "Zoom In",
29+
desp : "Enlarge the workarea",
30+
icon : "zoomin.svg"
31+
},{
32+
id : "tool-zoom-out" ,
33+
title : "Zoom Out",
34+
desp : "Create a concave polygon",
35+
icon : "zoomout.svg"
36+
},{
37+
id : "tool-labels-only" ,
38+
title : "Labels only",
39+
desp : "Hide the image",
40+
icon : "lightbulb.svg"
41+
}
42+
]
43+
}

‎js/thirdparty/riot.min.js

+2
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)