Skip to content

Commit db9a898

Browse files
capjamesgcapjamesg
authored
Merge pull request #11 from lrosemberg/taskbar
Added a taskbar to the UI, new polygon functionalities and some bugfixes
2 parents d7bc89a + e8badbd commit db9a898

File tree

4 files changed

+393
-168
lines changed

4 files changed

+393
-168
lines changed

‎README.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -74,7 +74,7 @@ To use PolygonZone, open up the [PolygonZone web application](https://roboflow.g
7474

7575
1. Upload an image onto which you want to draw a polygon.
7676
2. Click on the points where you want to draw the polygon.
77-
3. Click "Enter" to save a polygon.
77+
3. Click on the intial point or press "Enter" to save a polygon.
7878
4. Continue to draw as many polygons as you need.
7979
5. Copy the NumPy array or JSON object that contains the coordinates of the polygons you have drawn.
8080

‎index.html

+103-54
Original file line numberDiff line numberDiff line change
@@ -21,24 +21,78 @@
2121
<meta property="twitter:title" content="PolygonZone by Roboflow">
2222
<meta property="twitter:description" content="Draw polygons on an image and retrieve the coordinates for use in your computer vision projects.">
2323
<meta property="twitter:image" content="https://camo.githubusercontent.com/ee21eb5f43b191dbfd154dfbc26f9ce731f43dc66749ca6cde23557f48136a1a/68747470733a2f2f6d656469612e726f626f666c6f772e636f6d2f6f70656e2d736f757263652f7375706572766973696f6e2f726f626f666c6f772d7375706572766973696f6e2d62616e6e65722e706e673f696b2d73646b2d76657273696f6e3d6a6176617363726970742d312e342e33267570646174656441743d31363734303632383931303838">
24+
25+
<!-- Fontawesome -->
26+
<script src="https://kit.fontawesome.com/1e5ca35699.js" crossorigin="anonymous"></script>
2427
</head>
2528
<body>
2629
<main>
2730
<img class="banner" src="https://media.roboflow.com/polygonzone/polygonzone-banner.png?ik-sdk-version=javascript-1.4.3&updatedAt=1676391478845" />
2831
<div class="flex">
2932
<div class="left">
3033
<h1>Draw points to create polygon coordinates</h1>
31-
<p class="show_normalized" id="coords" style="display: none;">x: <span id="x"></span> | y: <span id="y"></span></p>
32-
<canvas id="canvas"></canvas>
33-
<div style="margin-top: 20px;">
34-
<a href="" id="clear" class="widgetButton">Clear Polygons</a>
35-
<a href="" id="saveImage" class="widgetButton">Save Image</a>
36-
<br>
37-
<p id="mode">Mode: Polygon (Press <kbd>L</kbd> to switch to Line drawing mode)</p>
34+
<div class="taskbar-container">
35+
<div class="tc-container">
36+
<div class="taskbar">
37+
<div class="t-icon t-mode" id="mode-polygon">
38+
<i class="fa-solid fa-draw-polygon"></i>
39+
<span class="ti-caption">
40+
<span>Polygon Mode</span>
41+
<span>(P)</span>
42+
</span>
43+
</div>
44+
<div class="t-icon t-mode" id="mode-line">
45+
<i class="fa-solid fa-arrows-left-right"></i>
46+
<span class="ti-caption">
47+
<span>Line Mode</span>
48+
<span>(L)</span>
49+
</span>
50+
</div>
51+
<div class="t-divider"></div>
52+
<div class="t-icon" id="undo">
53+
<i class="fa-solid fa-rotate-left"></i>
54+
<span class="ti-caption">
55+
<span>Undo</span>
56+
<span>(Ctrl/⌘-Z)</span>
57+
</span>
58+
</div>
59+
<div class="t-icon" id="discard-current">
60+
<i class="fa-solid fa-xmark"></i>
61+
<span class="ti-caption">
62+
<span>Discard current</span>
63+
<span>(Esc)</span>
64+
</span>
65+
</div>
66+
<div class="t-divider"></div>
67+
<div class="t-icon" id="clear">
68+
<i class="fa-solid fa-trash-can"></i>
69+
<span class="ti-caption">
70+
<span>Clear all polygons</span>
71+
<span>(Ctrl/⌘-E)</span>
72+
</span>
73+
</div>
74+
<div class="t-icon" id="save-image">
75+
<i class="fa-solid fa-floppy-disk"></i>
76+
<span class="ti-caption">
77+
<span>Save image</span>
78+
<span>(Ctrl/⌘-S)</span>
79+
</span>
80+
</div>
81+
</div>
82+
<div class="coordinates">
83+
<span class="cc-title">Coordinates</span>
84+
<span>
85+
<span class="cc-coord">x: <span class="cc-value" id="x">---</span> | </span>
86+
<span class="cc-coord">y: <span class="cc-value" id="y">---</span></span>
87+
</span>
88+
</div>
89+
</div>
3890
</div>
91+
92+
<canvas id="canvas"></canvas>
3993
</div>
4094
<div class="right">
41-
<div class="how-to">
95+
<div class="how-to section">
4296
<h2>How to use</h2>
4397
<ol class="ta-left">
4498
<li>Drop an image to the indicated area</li>
@@ -49,57 +103,52 @@ <h2>How to use</h2>
49103
<li>To finish, copy the numpy points to your clipboard</li>
50104
</ol>
51105
</div>
52-
<div class="shortcuts">
53-
<h2>Keyboard shortcuts</h2>
54-
<ul class="ta-left">
55-
<li><kbd>L</kbd>: Switch to line drawing mode</li>
56-
<li><kbd>P</kbd>: Swicth to polygon drawing mode</li>
57-
<li><kbd>Enter</kbd>: If you drawing a polygon, end the polygon</li>
58-
<li><kbd>Esc</kbd>: When drawing, clear the current polygon</li>
59-
<li><kbd>Ctrl(Cmd)-Z</kbd>: Undo the last point</li>
60-
</ul>
61-
</div>
62-
<h2>NumPy Points</h2>
63-
<p>Copy the points below into your Python code.</p>
64-
<a href="" id="clipboard" class="widgetButton">Copy Python to Clipboard</a>
65-
<pre id="python">
66-
<code>
67-
</code>
68-
</pre>
69-
<div class="show_normalized mb-3">
70-
<label for="normalize_checkbox">Show Normalized Points from 0-1</label>
71-
<input type="checkbox" id="normalize_checkbox" name="normalize_checkbox" value="normalize_checkbox">
72-
</div>
73-
<details>
74-
<summary>View JSON Points</summary>
75-
<h2>JSON Points</h2>
76-
<a href="" id="clipboardJSON" class="widgetButton">Copy JSON to Clipboard</a>
77-
<pre id="json">
106+
<div class="points-output section">
107+
<h2>NumPy Points</h2>
108+
<p>Copy the points below into your Python code.</p>
109+
<a href="" id="clipboard" class="widgetButton">Copy Python to Clipboard</a>
110+
<pre id="python">
78111
<code>
79112
</code>
80113
</pre>
81-
</details>
82-
</div>
83-
</div>
84-
<h2>Learning Resources</h2>
85-
<p>Browse our tutorials that walk through using PolygonZone and building projects with zones.</p>
86-
<div class="grid">
87-
<div class="card">
88-
<a href="https://www.youtube.com/watch?v=l_kf9CfZ_8M">
89-
<img src="https://i.ytimg.com/vi/l_kf9CfZ_8M/maxresdefault.jpg" />
90-
<h3>Count People in Zone Using YOLOv5, YOLOv8, and Detectron2</h3>
91-
<p>Learn how to use Roboflow supervision to count people in a zone using YOLOv5, YOLOv8, and Detectron2.</p>
92-
</a>
93-
</div>
94-
<div class="card">
95-
<a href="https://blog.roboflow.com/polygonzone">
96-
<img src="https://media.roboflow.com/polygonzone/thumbnail.jpg?ik-sdk-version=javascript-1.4.3&updatedAt=1676366680992" />
97-
<h3>How to Use PolygonZone</h3>
98-
<p>Learn how to use PolygonZone to create polygons for your computer vision projects.</p>
99-
</a>
114+
<div class="show-normalized mb-3">
115+
<label for="normalize-checkbox">Show Normalized Points from 0-1</label>
116+
<input type="checkbox" id="normalize-checkbox" name="normalize-checkbox" value="normalize-checkbox">
117+
</div>
118+
<details>
119+
<summary>View JSON Points</summary>
120+
<h2>JSON Points</h2>
121+
<a href="" id="clipboardJSON" class="widgetButton">Copy JSON to Clipboard</a>
122+
<pre id="json">
123+
<code>
124+
</code>
125+
</pre>
126+
</details>
127+
</div>
128+
<div class="learning-resources section">
129+
<h2>Learning Resources</h2>
130+
<p>Browse our tutorials that walk through using PolygonZone and building projects with zones.</p>
131+
<div class="grid">
132+
<div class="card">
133+
<a href="https://www.youtube.com/watch?v=l_kf9CfZ_8M">
134+
<img src="https://i.ytimg.com/vi/l_kf9CfZ_8M/maxresdefault.jpg" />
135+
<h3>Count People in Zone Using YOLOv5, YOLOv8, and Detectron2</h3>
136+
<p>Learn how to use Roboflow supervision to count people in a zone using YOLOv5, YOLOv8, and Detectron2.</p>
137+
</a>
138+
</div>
139+
<div class="card">
140+
<a href="https://blog.roboflow.com/polygonzone">
141+
<img src="https://media.roboflow.com/polygonzone/thumbnail.jpg?ik-sdk-version=javascript-1.4.3&updatedAt=1676366680992" />
142+
<h3>How to Use PolygonZone</h3>
143+
<p>Learn how to use PolygonZone to create polygons for your computer vision projects.</p>
144+
</a>
145+
</div>
146+
</div>
147+
<a href="https://blog.roboflow.com" class="widgetButton">Explore More Tutorials</a>
148+
</div>
100149
</div>
101150
</div>
102-
<a href="https://blog.roboflow.com" class="widgetButton">Explore More Tutorials</a>
151+
103152
<footer>
104153
<p>Made with ❤️ by <a href="https://roboflow.com">Roboflow.</a> <a href="https://github.com/roboflow/polygonzone">View source code.</a></p>
105154
</footer>

0 commit comments

Comments
 (0)