forked from roboflow/polygonzone
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
88 lines (85 loc) · 5.59 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
<!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">
</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>
</div>
<div class="right">
<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" style="margin-bottom: 25px;">
<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>
<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>
<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>
</main>
<script src="script.js"></script>
</body>
</html>