Skip to content
This repository was archived by the owner on Oct 23, 2026. It is now read-only.

Redirect polygonzone.roboflow.com to the Workflows docs page #30

Merged
Erol444 merged 1 commit into from
Oct 23, 2026
Merged

Redirect polygonzone.roboflow.com to the Workflows docs page #30

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 14 additions & 0 deletions 404.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>PolygonZone has moved to Roboflow Workflows</title>
<meta http-equiv="refresh" content="0; url=https://docs.roboflow.com/workflows/build/draw-polygon-zones">
<link rel="canonical" href="https://docs.roboflow.com/workflows/build/draw-polygon-zones">
<meta name="robots" content="noindex">
<script>location.replace("https://docs.roboflow.com/workflows/build/draw-polygon-zones");</script>
</head>
<body>
<p>PolygonZone is now part of Roboflow Workflows. If you are not redirected, go to <a href="https://docs.roboflow.com/workflows/build/draw-polygon-zones">Draw Polygon Zones and Lines</a>.</p>
</body>
</html>
89 changes: 3 additions & 86 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,88 +1,5 @@
<p>
<a align="center" href="" target="_blank">
<img
width="850"
src="https://media.roboflow.com/polygonzone/polygonzone-banner.png?ik-sdk-version=javascript-1.4.3&updatedAt=1676391478845"
>
</a>
</p>
<br>
<div align="center">
<a href="https://youtube.com/roboflow">
<img
src="https://media.roboflow.com/notebooks/template/icons/purple/youtube.png?ik-sdk-version=javascript-1.4.3&updatedAt=1672949634652"
width="3%"
/>
</a>
<img src="https://raw.githubusercontent.com/ultralytics/assets/main/social/logo-transparent.png" width="3%"/>
<a href="https://roboflow.com">
<img
src="https://media.roboflow.com/notebooks/template/icons/purple/roboflow-app.png?ik-sdk-version=javascript-1.4.3&updatedAt=1672949746649"
width="3%"
/>
</a>
<img src="https://raw.githubusercontent.com/ultralytics/assets/main/social/logo-transparent.png" width="3%"/>
<a href="https://www.linkedin.com/company/roboflow-ai/">
<img
src="https://media.roboflow.com/notebooks/template/icons/purple/linkedin.png?ik-sdk-version=javascript-1.4.3&updatedAt=1672949633691"
width="3%"
/>
</a>
<img src="https://raw.githubusercontent.com/ultralytics/assets/main/social/logo-transparent.png" width="3%"/>
<a href="https://docs.roboflow.com">
<img
src="https://media.roboflow.com/notebooks/template/icons/purple/knowledge.png?ik-sdk-version=javascript-1.4.3&updatedAt=1672949634511"
width="3%"
/>
</a>
<img src="https://raw.githubusercontent.com/ultralytics/assets/main/social/logo-transparent.png" width="3%"/>
<a href="https://disuss.roboflow.com">
<img
src="https://media.roboflow.com/notebooks/template/icons/purple/forum.png?ik-sdk-version=javascript-1.4.3&updatedAt=1672949633584"
width="3%"
/>
<img src="https://raw.githubusercontent.com/ultralytics/assets/main/social/logo-transparent.png" width="3%"/>
<a href="https://blog.roboflow.com">
<img
src="https://media.roboflow.com/notebooks/template/icons/purple/blog.png?ik-sdk-version=javascript-1.4.3&updatedAt=1672949633605"
width="3%"
/>
</a>
</a>
</div>
<br>
# PolygonZone

## About PolygonZone 📐
PolygonZone now lives in [Roboflow Workflows](https://roboflow.com/workflows). Draw polygon zones and lines and copy their coordinates in the Workflows editor: see [Draw Polygon Zones and Lines](https://docs.roboflow.com/workflows/build/draw-polygon-zones).

PolygonZone lets you draw arbitrary polygons on an image and retrieve the coordinates of the points you have drawn.

This application makes it easy to retrieve coordinates for Regions of Interest in computer vision applications.

PolygonZone accompanies [Roboflow Supervision](https://github.com/roboflow/supervision), a Python library with a range of utilities that are useful in computer vision projects.

Please note that PolygonZone is not an annotation tool. It is a tool for retrieving coordinates of polygons that you have drawn on an image.

This application is designed for desktop use.

## Demo

https://user-images.githubusercontent.com/37276661/218796838-3a66a61c-ac9d-40f5-97ff-0030a8bdc60d.mov

## Getting Started 🚀

To use PolygonZone, open up the [PolygonZone web application](https://roboflow.github.io/polygonzone/). Then:

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 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.

## Functionalities
- You can zoom in and out of an image using the mouse wheel or a laptop track pad.
- You can undo the last point pressing Ctrl/Cmd+Z
- You can discard the last unsaved polygon pressing Esc

## Contributing 🤝

We welcome contributions to the PolygonZone project. Please see the [Contributing Guidelines](CONTRIBUTING.md) for more information on how you can help to improve this project.
polygonzone.roboflow.com redirects to that page. The code for the old standalone web tool is in this repository's git history.
159 changes: 12 additions & 147 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,149 +1,14 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link href="https://assets.website-files.com/5f6bc60e665f54545a1e52a5/610d3e1407cf0329b8b8ade4_favicon-32x32.png" rel="shortcut icon" type="image/x-icon">
<link rel="stylesheet" href="styles.css">

<title>PolygonZone by Roboflow</title>
<meta name="title" content="PolygonZone by Roboflow">
<meta name="description" content="Draw polygons on an image and retrieve the coordinates for use in your computer vision projects.">

<meta property="og:type" content="website">
<meta property="og:url" content="https://roboflow.com/polygonzone">
<meta property="og:title" content="PolygonZone by Roboflow">
<meta property="og:description" content="Draw polygons on an image and retrieve the coordinates for use in your computer vision projects.">
<meta property="og:image" content="https://camo.githubusercontent.com/ee21eb5f43b191dbfd154dfbc26f9ce731f43dc66749ca6cde23557f48136a1a/68747470733a2f2f6d656469612e726f626f666c6f772e636f6d2f6f70656e2d736f757263652f7375706572766973696f6e2f726f626f666c6f772d7375706572766973696f6e2d62616e6e65722e706e673f696b2d73646b2d76657273696f6e3d6a6176617363726970742d312e342e33267570646174656441743d31363734303632383931303838">

<!-- Twitter -->
<meta property="twitter:card" content="summary_large_image">
<meta property="twitter:url" content="https://roboflow.com/polygonzone">
<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>
<nav>
<ul>
<li><img src="https://cdn.prod.website-files.com/5f6bc60e665f54545a1e52a5/669974bcd33beb1adf952037_logo-roboflow-purple.svg" /></li>
</ul>
<ul>
<li><a href="https://github.com/roboflow/polygonzone" target="_blank">View Source Code</a></li>
</ul>
</nav>
<div class="content">
<div class="left">
<div class="how-to section">
<h1>PolygonZone</h1>
<p>PolygonZone lets you calculate polygon points in an image.</p>
<h2>How to use</h2>
<ol class="ta-left">
<li>Drop an image to the indicated area</li>
<li>Select the desired mode: Press <kbd>L</kbd> to draw a line, or <kbd>P</kbd> to draw a polygon</li>
<li>Click to draw polygon points. Press enter to finish the polygon.</li>
</ol>
<h2>Coordinates</h2>
<p>Copy the points below, formatted as NumPy arrays, into your Python code.</p>
<a href="" id="copyPythonButton" class="widgetButton left">Copy Python to Clipboard</a>
<label for="normalize-checkbox">Show Normalized Points from 0-1</label>
<input type="checkbox" id="normalize-checkbox" name="normalize-checkbox" value="normalize-checkbox">
<pre id="python">
<code>
</code>
</pre>
<details>
<summary>View JSON Points</summary>
<h2>JSON Points</h2>
<a href="" id="copyJSONButton" class="widgetButton">Copy JSON to Clipboard</a>
<pre id="json">
<code>
</code>
</pre>
</details>
</div>
</div>
<div class="right">
<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-lines-leaning"></i>
<span class="ti-caption">
<span>Line Mode</span>
<span>(L)</span>
</span>
</div>
<div class="t-icon t-mode" id="mode-edit">
<i class="fa-solid fa-up-down-left-right"></i>
<span class="ti-caption">
<span>Edit Mode</span>
<span>(E)</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-icon" id="clear">
<i class="fa-solid fa-trash"></i>
<span class="ti-caption">
<span>Clear all polygons</span>
<span>(Ctrl/⌘-E)</span>
</span>
</div>
<div class="t-divider"></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 class="t-icon" id="fullscreen">
<i class="fa-solid fa-expand"></i>
<span class="ti-caption">
<span>Fullscreen</span>
<span>(F)</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>
<div class="image-container">
<canvas id="canvas"></canvas>
</div>
</div>
</div>
</main>
<script src="script.js"></script>
</body>
<html lang="en">
<head>
<meta charset="utf-8">
<title>PolygonZone has moved to Roboflow Workflows</title>
<meta http-equiv="refresh" content="0; url=https://docs.roboflow.com/workflows/build/draw-polygon-zones">
<link rel="canonical" href="https://docs.roboflow.com/workflows/build/draw-polygon-zones">
<meta name="robots" content="noindex">
<script>location.replace("https://docs.roboflow.com/workflows/build/draw-polygon-zones");</script>
</head>
<body>
<p>PolygonZone is now part of Roboflow Workflows. If you are not redirected, go to <a href="https://docs.roboflow.com/workflows/build/draw-polygon-zones">Draw Polygon Zones and Lines</a>.</p>
</body>
</html>
Loading
Loading