Skip to content

Commit

Permalink
Merge pull request #11 from lrosemberg/taskbar
Browse files Browse the repository at this point in the history 
Added a taskbar to the UI, new polygon functionalities and some bugfixes
  • Loading branch information
@capjamesg
capjamesg authored Aug 21, 2024
2 parents d7bc89a + e8badbd commit db9a898
Show file tree
Hide file tree
Showing 4 changed files with 393 additions and 168 deletions.
2 changes: 1 addition & 1 deletion README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -74,7 +74,7 @@ To use PolygonZone, open up the [PolygonZone web application](https://roboflow.g

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

Expand Down
157 changes: 103 additions & 54 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,24 +21,78 @@
<meta property="twitter:title" content="PolygonZone by Roboflow">
<meta property="twitter:description" content="Draw polygons on an image and retrieve the coordinates for use in your computer vision projects.">
<meta property="twitter:image" content="https://camo.githubusercontent.com/ee21eb5f43b191dbfd154dfbc26f9ce731f43dc66749ca6cde23557f48136a1a/68747470733a2f2f6d656469612e726f626f666c6f772e636f6d2f6f70656e2d736f757263652f7375706572766973696f6e2f726f626f666c6f772d7375706572766973696f6e2d62616e6e65722e706e673f696b2d73646b2d76657273696f6e3d6a6176617363726970742d312e342e33267570646174656441743d31363734303632383931303838">

<!-- Fontawesome -->
<script src="https://kit.fontawesome.com/1e5ca35699.js" crossorigin="anonymous"></script>
</head>
<body>
<main>
<img class="banner" src="https://media.roboflow.com/polygonzone/polygonzone-banner.png?ik-sdk-version=javascript-1.4.3&updatedAt=1676391478845" />
<div class="flex">
<div class="left">
<h1>Draw points to create polygon coordinates</h1>
<p class="show_normalized" id="coords" style="display: none;">x: <span id="x"></span> | y: <span id="y"></span></p>
<canvas id="canvas"></canvas>
<div style="margin-top: 20px;">
<a href="" id="clear" class="widgetButton">Clear Polygons</a>
<a href="" id="saveImage" class="widgetButton">Save Image</a>
<br>
<p id="mode">Mode: Polygon (Press <kbd>L</kbd> to switch to Line drawing mode)</p>
<div class="taskbar-container">
<div class="tc-container">
<div class="taskbar">
<div class="t-icon t-mode" id="mode-polygon">
<i class="fa-solid fa-draw-polygon"></i>
<span class="ti-caption">
<span>Polygon Mode</span>
<span>(P)</span>
</span>
</div>
<div class="t-icon t-mode" id="mode-line">
<i class="fa-solid fa-arrows-left-right"></i>
<span class="ti-caption">
<span>Line Mode</span>
<span>(L)</span>
</span>
</div>
<div class="t-divider"></div>
<div class="t-icon" id="undo">
<i class="fa-solid fa-rotate-left"></i>
<span class="ti-caption">
<span>Undo</span>
<span>(Ctrl/⌘-Z)</span>
</span>
</div>
<div class="t-icon" id="discard-current">
<i class="fa-solid fa-xmark"></i>
<span class="ti-caption">
<span>Discard current</span>
<span>(Esc)</span>
</span>
</div>
<div class="t-divider"></div>
<div class="t-icon" id="clear">
<i class="fa-solid fa-trash-can"></i>
<span class="ti-caption">
<span>Clear all polygons</span>
<span>(Ctrl/⌘-E)</span>
</span>
</div>
<div class="t-icon" id="save-image">
<i class="fa-solid fa-floppy-disk"></i>
<span class="ti-caption">
<span>Save image</span>
<span>(Ctrl/⌘-S)</span>
</span>
</div>
</div>
<div class="coordinates">
<span class="cc-title">Coordinates</span>
<span>
<span class="cc-coord">x: <span class="cc-value" id="x">---</span> | </span>
<span class="cc-coord">y: <span class="cc-value" id="y">---</span></span>
</span>
</div>
</div>
</div>

<canvas id="canvas"></canvas>
</div>
<div class="right">
<div class="how-to">
<div class="how-to section">
<h2>How to use</h2>
<ol class="ta-left">
<li>Drop an image to the indicated area</li>
Expand All @@ -49,57 +103,52 @@ <h2>How to use</h2>
<li>To finish, copy the numpy points to your clipboard</li>
</ol>
</div>
<div class="shortcuts">
<h2>Keyboard shortcuts</h2>
<ul class="ta-left">
<li><kbd>L</kbd>: Switch to line drawing mode</li>
<li><kbd>P</kbd>: Swicth to polygon drawing mode</li>
<li><kbd>Enter</kbd>: If you drawing a polygon, end the polygon</li>
<li><kbd>Esc</kbd>: When drawing, clear the current polygon</li>
<li><kbd>Ctrl(Cmd)-Z</kbd>: Undo the last point</li>
</ul>
</div>
<h2>NumPy Points</h2>
<p>Copy the points below into your Python code.</p>
<a href="" id="clipboard" class="widgetButton">Copy Python to Clipboard</a>
<pre id="python">
<code>
</code>
</pre>
<div class="show_normalized mb-3">
<label for="normalize_checkbox">Show Normalized Points from 0-1</label>
<input type="checkbox" id="normalize_checkbox" name="normalize_checkbox" value="normalize_checkbox">
</div>
<details>
<summary>View JSON Points</summary>
<h2>JSON Points</h2>
<a href="" id="clipboardJSON" class="widgetButton">Copy JSON to Clipboard</a>
<pre id="json">
<div class="points-output section">
<h2>NumPy Points</h2>
<p>Copy the points below into your Python code.</p>
<a href="" id="clipboard" class="widgetButton">Copy Python to Clipboard</a>
<pre id="python">
<code>
</code>
</pre>
</details>
</div>
</div>
<h2>Learning Resources</h2>
<p>Browse our tutorials that walk through using PolygonZone and building projects with zones.</p>
<div class="grid">
<div class="card">
<a href="https://www.youtube.com/watch?v=l_kf9CfZ_8M">
<img src="https://i.ytimg.com/vi/l_kf9CfZ_8M/maxresdefault.jpg" />
<h3>Count People in Zone Using YOLOv5, YOLOv8, and Detectron2</h3>
<p>Learn how to use Roboflow supervision to count people in a zone using YOLOv5, YOLOv8, and Detectron2.</p>
</a>
</div>
<div class="card">
<a href="https://blog.roboflow.com/polygonzone">
<img src="https://media.roboflow.com/polygonzone/thumbnail.jpg?ik-sdk-version=javascript-1.4.3&updatedAt=1676366680992" />
<h3>How to Use PolygonZone</h3>
<p>Learn how to use PolygonZone to create polygons for your computer vision projects.</p>
</a>
<div class="show-normalized mb-3">
<label for="normalize-checkbox">Show Normalized Points from 0-1</label>
<input type="checkbox" id="normalize-checkbox" name="normalize-checkbox" value="normalize-checkbox">
</div>
<details>
<summary>View JSON Points</summary>
<h2>JSON Points</h2>
<a href="" id="clipboardJSON" class="widgetButton">Copy JSON to Clipboard</a>
<pre id="json">
<code>
</code>
</pre>
</details>
</div>
<div class="learning-resources section">
<h2>Learning Resources</h2>
<p>Browse our tutorials that walk through using PolygonZone and building projects with zones.</p>
<div class="grid">
<div class="card">
<a href="https://www.youtube.com/watch?v=l_kf9CfZ_8M">
<img src="https://i.ytimg.com/vi/l_kf9CfZ_8M/maxresdefault.jpg" />
<h3>Count People in Zone Using YOLOv5, YOLOv8, and Detectron2</h3>
<p>Learn how to use Roboflow supervision to count people in a zone using YOLOv5, YOLOv8, and Detectron2.</p>
</a>
</div>
<div class="card">
<a href="https://blog.roboflow.com/polygonzone">
<img src="https://media.roboflow.com/polygonzone/thumbnail.jpg?ik-sdk-version=javascript-1.4.3&updatedAt=1676366680992" />
<h3>How to Use PolygonZone</h3>
<p>Learn how to use PolygonZone to create polygons for your computer vision projects.</p>
</a>
</div>
</div>
<a href="https://blog.roboflow.com" class="widgetButton">Explore More Tutorials</a>
</div>
</div>
</div>
<a href="https://blog.roboflow.com" class="widgetButton">Explore More Tutorials</a>

<footer>
<p>Made with ❤️ by <a href="https://roboflow.com">Roboflow.</a> <a href="https://github.com/roboflow/polygonzone">View source code.</a></p>
</footer>
Expand Down
Loading

0 comments on commit db9a898

Please sign in to comment.