Web platform for sharing free image data for ML and research

Homepage: https://datasets.roundabout-host.com

By using this site, you agree to have cookies stored on your device, strictly for functional purposes, such as storing your session and preferences.

Dismiss

 picture-annotation.py

View raw Download
text/x-script.python • 25.32 kiB
Python script, ASCII text executable
        
            
1
from pyscript import document, fetch as pyfetch
2
from pyscript.ffi import create_proxy
3
import asyncio
4
import json
5
6
document.getElementById("shape-options").style.display = "flex"
7
8
image = document.getElementById("annotation-image")
9
zone = document.getElementById("annotation-zone")
10
confirm_button = document.getElementById("annotation-confirm")
11
cancel_button = document.getElementById("annotation-cancel")
12
backspace_button = document.getElementById("annotation-backspace")
13
delete_button = document.getElementById("annotation-delete")
14
previous_button = document.getElementById("annotation-previous")
15
next_button = document.getElementById("annotation-next")
16
save_button = document.getElementById("annotation-save")
17
18
object_list = document.getElementById("object-types")
19
20
confirm_button.style.display = "none"
21
cancel_button.style.display = "none"
22
backspace_button.style.display = "none"
23
delete_button.style.display = "none"
24
previous_button.style.display = "none"
25
next_button.style.display = "none"
26
shape_type = ""
27
bbox_pos = None
28
new_shape = None
29
selected_shape = None
30
31
32
def make_shape_container():
33
shape = document.createElementNS("http://www.w3.org/2000/svg", "svg")
34
shape.setAttribute("width", "100%")
35
shape.setAttribute("height", "100%")
36
shape.setAttribute("viewBox", f"0 0 {image.naturalWidth} {image.naturalHeight}")
37
shape.classList.add("shape-container")
38
39
return shape
40
41
42
async def get_all_objects():
43
response = await pyfetch("/api/object-types")
44
if response.ok:
45
return await response.json()
46
47
48
def follow_cursor(event):
49
rect = zone.getBoundingClientRect()
50
x = event.clientX - rect.left
51
y = event.clientY - rect.top
52
vertical_ruler.style.left = str(x) + "px"
53
horizontal_ruler.style.top = str(y) + "px"
54
55
56
def change_object_type(event):
57
global selected_shape
58
if selected_shape is None:
59
return
60
selected_shape.setAttribute("data-object-type", event.currentTarget.value)
61
62
63
change_object_type_proxy = create_proxy(change_object_type)
64
65
66
def list_shapes():
67
shapes = list(zone.getElementsByClassName("shape"))
68
json_shapes = []
69
for shape in shapes:
70
shape_dict = {}
71
if shape.tagName == "rect":
72
shape_dict["type"] = "bbox"
73
shape_dict["shape"] = {
74
"x": float(shape.getAttribute("x")) / image.naturalWidth,
75
"y": float(shape.getAttribute("y")) / image.naturalHeight,
76
"w": float(shape.getAttribute("width")) / image.naturalWidth,
77
"h": float(shape.getAttribute("height")) / image.naturalHeight
78
}
79
elif shape.tagName == "polygon" or shape.tagName == "polyline":
80
if shape.tagName == "polygon":
81
shape_dict["type"] = "polygon"
82
elif shape.tagName == "polyline":
83
shape_dict["type"] = "polyline"
84
85
points = shape.getAttribute("points").split(" ")
86
json_points = []
87
for point in points:
88
x, y = point.split(",")
89
x, y = float(x), float(y)
90
json_points.append({
91
"x": x / image.naturalWidth,
92
"y": y / image.naturalHeight
93
})
94
95
shape_dict["shape"] = json_points
96
elif shape.tagName == "circle" and shape.classList.contains("shape-point"):
97
shape_dict["type"] = "point"
98
shape_dict["shape"] = {
99
"x": float(shape.getAttribute("cx")) / image.naturalWidth,
100
"y": float(shape.getAttribute("cy")) / image.naturalHeight
101
}
102
else:
103
continue
104
105
shape_dict["object"] = shape.getAttribute("data-object-type")
106
json_shapes.append(shape_dict)
107
108
return json_shapes
109
110
111
def put_shapes(json_shapes):
112
for shape in json_shapes:
113
new_shape = make_shape_container()
114
zone_rect = zone.getBoundingClientRect()
115
116
if shape["type"] == "bbox":
117
rectangle = document.createElementNS("http://www.w3.org/2000/svg", "rect")
118
rectangle.setAttribute("x", str(shape["shape"]["x"] * image.naturalWidth))
119
rectangle.setAttribute("y", str(shape["shape"]["y"] * image.naturalHeight))
120
rectangle.setAttribute("width", str(shape["shape"]["w"] * image.naturalWidth))
121
rectangle.setAttribute("height", str(shape["shape"]["h"] * image.naturalHeight))
122
rectangle.setAttribute("fill", "none")
123
rectangle.setAttribute("data-object-type", shape["object"] or "")
124
rectangle.classList.add("shape-bbox")
125
rectangle.classList.add("shape")
126
new_shape.appendChild(rectangle)
127
elif shape["type"] == "polygon" or shape["type"] == "polyline":
128
polygon = document.createElementNS("http://www.w3.org/2000/svg", shape["type"])
129
points = " ".join(
130
[f"{point['x'] * image.naturalWidth},{point['y'] * image.naturalHeight}" for point in shape["shape"]])
131
polygon.setAttribute("points", points)
132
polygon.setAttribute("fill", "none")
133
polygon.setAttribute("data-object-type", shape["object"] or "")
134
polygon.classList.add(f"shape-{shape['type']}")
135
polygon.classList.add("shape")
136
new_shape.appendChild(polygon)
137
elif shape["type"] == "point":
138
point = document.createElementNS("http://www.w3.org/2000/svg", "circle")
139
point.setAttribute("cx", str(shape["shape"]["x"] * image.naturalWidth))
140
point.setAttribute("cy", str(shape["shape"]["y"] * image.naturalHeight))
141
point.setAttribute("r", "0")
142
point.classList.add("shape-point")
143
point.classList.add("shape")
144
point.setAttribute("data-object-type", shape["object"] or "")
145
new_shape.appendChild(point)
146
147
zone.appendChild(new_shape)
148
149
150
async def load_shapes():
151
resource_id = document.getElementById("resource-id").value
152
response = await pyfetch(f"/picture/{resource_id}/get-annotations")
153
if response.ok:
154
shapes = await response.json()
155
return shapes
156
157
158
async def save_shapes(event):
159
shapes = list_shapes()
160
resource_id = document.getElementById("resource-id").value
161
print("Saving shapes:", shapes)
162
response = await pyfetch(f"/picture/{resource_id}/save-annotations",
163
method="POST",
164
headers={
165
"Content-Type": "application/json"
166
},
167
body=json.dumps(shapes)
168
)
169
if response.ok:
170
return await response
171
172
173
save_shapes_proxy = create_proxy(save_shapes)
174
save_button.addEventListener("click", save_shapes_proxy)
175
delete_shape_key_proxy = create_proxy(lambda event: event.key == "Delete" and delete_shape_proxy(None))
176
next_shape_key_proxy = create_proxy(lambda event: event.key == "ArrowRight" and next_shape_proxy(None))
177
previous_shape_key_proxy = create_proxy(lambda event: event.key == "ArrowLeft" and previous_shape_proxy(None))
178
179
180
def get_centre(shape):
181
if shape.tagName == "rect":
182
x = float(shape.getAttribute("x")) + float(shape.getAttribute("width")) / 2
183
y = float(shape.getAttribute("y")) + float(shape.getAttribute("height")) / 2
184
elif shape.tagName == "polygon":
185
points = shape.getAttribute("points").split(" ")
186
# Average of the extreme points
187
sorted_x = sorted([float(point.split(",")[0]) for point in points])
188
sorted_y = sorted([float(point.split(",")[1]) for point in points])
189
top = sorted_y[0]
190
bottom = sorted_y[-1]
191
left = sorted_x[0]
192
right = sorted_x[-1]
193
194
x = (left + right) / 2
195
y = (top + bottom) / 2
196
elif shape.tagName == "polyline":
197
points = shape.getAttribute("points").split(" ")
198
# Median point
199
x = float(points[len(points) // 2].split(",")[0])
200
y = float(points[len(points) // 2].split(",")[1])
201
elif shape.tagName == "circle" and shape.classList.contains("shape-point"):
202
x = float(shape.getAttribute("cx"))
203
y = float(shape.getAttribute("cy"))
204
else:
205
return None
206
207
return x, y
208
209
210
async def focus_shape(shape):
211
global selected_shape
212
213
if shape_type != "select":
214
return
215
if selected_shape is not None:
216
selected_shape.classList.remove("selected")
217
218
selected_shape = shape
219
220
selected_shape.classList.add("selected")
221
222
objects = await get_all_objects()
223
224
delete_button.style.display = "block"
225
next_button.style.display = "block"
226
previous_button.style.display = "block"
227
document.addEventListener("keydown", delete_shape_key_proxy)
228
document.addEventListener("keydown", next_shape_key_proxy)
229
document.addEventListener("keydown", previous_shape_key_proxy)
230
231
object_list.innerHTML = ""
232
233
new_radio = document.createElement("input")
234
new_radio.setAttribute("type", "radio")
235
new_radio.setAttribute("name", "object-type")
236
new_radio.setAttribute("value", "")
237
new_label = document.createElement("label")
238
new_label.appendChild(new_radio)
239
new_label.append("Undefined")
240
object_list.appendChild(new_label)
241
new_radio.addEventListener("change", change_object_type_proxy)
242
243
selected_object = selected_shape.getAttribute("data-object-type")
244
if not selected_object:
245
new_radio.setAttribute("checked", "")
246
247
for object, description in objects.items():
248
new_radio = document.createElement("input")
249
new_radio.setAttribute("type", "radio")
250
new_radio.setAttribute("name", "object-type")
251
new_radio.setAttribute("value", object)
252
if selected_object == object:
253
new_radio.setAttribute("checked", "")
254
new_label = document.createElement("label")
255
new_label.appendChild(new_radio)
256
new_label.append(object)
257
object_list.appendChild(new_label)
258
new_radio.addEventListener("change", change_object_type_proxy)
259
260
object_list.style.display = "flex"
261
object_list.style.left = str(get_centre(shape)[0] / image.naturalWidth * 100) + "%"
262
object_list.style.top = str(get_centre(shape)[1] / image.naturalHeight * 100) + "%"
263
object_list.style.right = "auto"
264
object_list.style.bottom = "auto"
265
object_list.style.maxHeight = str(image.height - get_centre(shape)[1] / image.naturalHeight * image.height) + "px"
266
object_list.style.maxWidth = str(image.width - get_centre(shape)[0] / image.naturalWidth * image.width) + "px"
267
268
if get_centre(shape)[0] / image.naturalWidth * image.width + object_list.offsetWidth > image.width:
269
object_list.style.left = "auto"
270
object_list.style.right = str((image.naturalWidth - get_centre(shape)[0]) / image.naturalWidth * 100) + "%"
271
object_list.style.maxWidth = str(get_centre(shape)[0] / image.naturalWidth * image.width) + "px"
272
273
if get_centre(shape)[1] / image.naturalHeight * image.height + object_list.offsetHeight > image.height:
274
object_list.style.top = "auto"
275
object_list.style.bottom = str((image.naturalHeight - get_centre(shape)[1]) / image.naturalHeight * 100) + "%"
276
object_list.style.maxHeight = str(get_centre(shape)[1] / image.naturalHeight * image.height) + "px"
277
278
279
async def select_shape(event):
280
await focus_shape(event.target)
281
282
283
async def next_shape(event):
284
global selected_shape
285
if selected_shape is None:
286
return
287
288
selected_svg = selected_shape.parentNode
289
290
while selected_svg is not None:
291
next_sibling = selected_svg.nextElementSibling
292
if next_sibling and next_sibling.classList.contains("shape-container"):
293
selected_svg = next_sibling
294
break
295
elif next_sibling is None:
296
# If no more siblings, loop back to the first child
297
selected_svg = selected_svg.parentNode.firstElementChild
298
while selected_svg is not None and not selected_svg.classList.contains(
299
"shape-container"):
300
selected_svg = selected_svg.nextElementSibling
301
break
302
else:
303
selected_svg = next_sibling
304
305
if selected_svg:
306
shape = selected_svg.firstElementChild
307
await focus_shape(shape)
308
309
310
async def previous_shape(event):
311
global selected_shape
312
if selected_shape is None:
313
return
314
315
selected_svg = selected_shape.parentNode
316
317
while selected_svg is not None:
318
next_sibling = selected_svg.previousElementSibling
319
if next_sibling and next_sibling.classList.contains("shape-container"):
320
selected_svg = next_sibling
321
break
322
elif next_sibling is None:
323
# If no more siblings, loop back to the last child
324
selected_svg = selected_svg.parentNode.lastElementChild
325
while selected_svg is not None and not selected_svg.classList.contains(
326
"shape-container"):
327
selected_svg = selected_svg.previousElementSibling
328
break
329
else:
330
selected_svg = next_sibling
331
332
if selected_svg:
333
shape = selected_svg.firstElementChild
334
await focus_shape(shape)
335
336
337
def unselect_shape(event):
338
global selected_shape
339
340
if selected_shape is not None:
341
selected_shape.classList.remove("selected")
342
selected_shape = None
343
344
object_list.innerHTML = ""
345
object_list.style.display = "none"
346
delete_button.style.display = "none"
347
next_button.style.display = "none"
348
previous_button.style.display = "none"
349
document.removeEventListener("keydown", delete_shape_key_proxy)
350
document.removeEventListener("keydown", next_shape_key_proxy)
351
document.removeEventListener("keydown", previous_shape_key_proxy)
352
353
354
def delete_shape(event):
355
global selected_shape
356
if selected_shape is None:
357
return
358
# Shape is SVG shape inside SVG so we need to remove the parent SVG
359
selected_shape.parentNode.remove()
360
selected_shape = None
361
object_list.innerHTML = ""
362
object_list.style.display = "none"
363
delete_button.style.display = "none"
364
next_button.style.display = "none"
365
previous_button.style.display = "none"
366
document.removeEventListener("keydown", delete_shape_key_proxy)
367
document.removeEventListener("keydown", next_shape_key_proxy)
368
document.removeEventListener("keydown", previous_shape_key_proxy)
369
370
371
select_shape_proxy = create_proxy(select_shape)
372
unselect_shape_proxy = create_proxy(unselect_shape)
373
delete_shape_proxy = create_proxy(delete_shape)
374
next_shape_proxy = create_proxy(next_shape)
375
previous_shape_proxy = create_proxy(previous_shape)
376
377
delete_button.addEventListener("click", delete_shape_proxy)
378
next_button.addEventListener("click", next_shape_proxy)
379
previous_button.addEventListener("click", previous_shape_proxy)
380
381
# These are functions usable in JS
382
cancel_bbox_proxy = create_proxy(lambda event: cancel_bbox(event))
383
make_bbox_proxy = create_proxy(lambda event: make_bbox(event))
384
make_polygon_proxy = create_proxy(lambda event: make_polygon(event))
385
follow_cursor_proxy = create_proxy(follow_cursor)
386
387
388
def switch_shape(event):
389
global shape_type
390
object_list.innerHTML = ""
391
unselect_shape(None)
392
shape = event.currentTarget.id
393
shape_type = shape
394
if shape_type == "select":
395
# Add event listeners to existing shapes
396
print(len(list(document.getElementsByClassName("shape"))), "shapes found")
397
for shape in document.getElementsByClassName("shape"):
398
print("Adding event listener to shape:", shape)
399
shape.addEventListener("click", select_shape_proxy)
400
image.addEventListener("click", unselect_shape_proxy)
401
helper_message.innerText = "Click on a shape to select"
402
# Cancel the current shape creation
403
if shape_type == "shape-bbox":
404
cancel_bbox(None)
405
elif shape_type == "shape-polygon":
406
cancel_polygon(None)
407
elif shape_type == "shape-polyline":
408
cancel_polygon(None)
409
else:
410
# Remove event listeners for selection
411
for shape in document.getElementsByClassName("shape"):
412
print("Removing event listener from shape:", shape)
413
shape.removeEventListener("click", select_shape_proxy)
414
image.removeEventListener("click", unselect_shape_proxy)
415
helper_message.innerText = "Select a shape type then click on the image to begin defining it"
416
print("Shape is now of type:", shape)
417
418
419
def select_mode():
420
global shape_type
421
shape_type = "select"
422
document.getElementById("select").click()
423
424
425
vertical_ruler = document.getElementById("annotation-ruler-vertical")
426
horizontal_ruler = document.getElementById("annotation-ruler-horizontal")
427
vertical_ruler_2 = document.getElementById("annotation-ruler-vertical-secondary")
428
horizontal_ruler_2 = document.getElementById("annotation-ruler-horizontal-secondary")
429
helper_message = document.getElementById("annotation-helper-message")
430
431
helper_message.innerText = "Select a shape type then click on the image to begin defining it"
432
433
434
def cancel_bbox(event):
435
global bbox_pos, new_shape
436
437
# Key must be ESCAPE
438
if event is not None and hasattr(event, "key") and event.key != "Escape":
439
return
440
441
if new_shape is not None and event is not None:
442
# Require event so the shape is kept when it ends normally
443
new_shape.remove()
444
zone.removeEventListener("click", make_bbox_proxy)
445
document.removeEventListener("keydown", cancel_bbox_proxy)
446
cancel_button.removeEventListener("click", cancel_bbox_proxy)
447
448
bbox_pos = None
449
vertical_ruler.style.display = "none"
450
horizontal_ruler.style.display = "none"
451
vertical_ruler_2.style.display = "none"
452
horizontal_ruler_2.style.display = "none"
453
zone.style.cursor = "auto"
454
cancel_button.style.display = "none"
455
helper_message.innerText = "Select a shape type then click on the image to begin defining it"
456
new_shape = None
457
458
459
def make_bbox(event):
460
global new_shape, bbox_pos
461
zone_rect = zone.getBoundingClientRect()
462
463
if bbox_pos is None:
464
helper_message.innerText = "Now define the second point"
465
466
bbox_pos = [(event.clientX - zone_rect.left) / zone_rect.width,
467
(event.clientY - zone_rect.top) / zone_rect.height]
468
vertical_ruler_2.style.left = str(bbox_pos[0] * 100) + "%"
469
horizontal_ruler_2.style.top = str(bbox_pos[1] * 100) + "%"
470
vertical_ruler_2.style.display = "block"
471
horizontal_ruler_2.style.display = "block"
472
473
else:
474
x0, y0 = bbox_pos.copy()
475
x1 = (event.clientX - zone_rect.left) / zone_rect.width
476
y1 = (event.clientY - zone_rect.top) / zone_rect.height
477
478
rectangle = document.createElementNS("http://www.w3.org/2000/svg", "rect")
479
480
new_shape = make_shape_container()
481
zone_rect = zone.getBoundingClientRect()
482
483
new_shape.appendChild(rectangle)
484
zone.appendChild(new_shape)
485
486
minx = min(x0, x1)
487
miny = min(y0, y1)
488
maxx = max(x0, x1)
489
maxy = max(y0, y1)
490
491
rectangle.setAttribute("x", str(minx * image.naturalWidth))
492
rectangle.setAttribute("y", str(miny * image.naturalHeight))
493
rectangle.setAttribute("width", str((maxx - minx) * image.naturalWidth))
494
rectangle.setAttribute("height", str((maxy - miny) * image.naturalHeight))
495
rectangle.setAttribute("fill", "none")
496
rectangle.setAttribute("data-object-type", "")
497
rectangle.classList.add("shape-bbox")
498
rectangle.classList.add("shape")
499
500
# Add event listeners to the new shape
501
rectangle.addEventListener("click", select_shape_proxy)
502
503
cancel_bbox(None)
504
505
506
polygon_points = []
507
508
509
def make_polygon(event):
510
global new_shape, polygon_points
511
512
polygon = new_shape.children[0]
513
514
zone_rect = zone.getBoundingClientRect()
515
516
polygon_points.append(((event.clientX - zone_rect.left) / zone_rect.width,
517
(event.clientY - zone_rect.top) / zone_rect.height))
518
519
# Update the polygon
520
polygon.setAttribute("points", " ".join(
521
[f"{point[0] * image.naturalWidth},{point[1] * image.naturalHeight}" for point in
522
polygon_points]))
523
524
525
def reset_polygon():
526
global new_shape, polygon_points
527
528
zone.removeEventListener("click", make_polygon_proxy)
529
document.removeEventListener("keydown", close_polygon_proxy)
530
document.removeEventListener("keydown", cancel_polygon_proxy)
531
document.removeEventListener("keydown", backspace_polygon_proxy)
532
confirm_button.style.display = "none"
533
cancel_button.style.display = "none"
534
backspace_button.style.display = "none"
535
confirm_button.removeEventListener("click", close_polygon_proxy)
536
cancel_button.removeEventListener("click", cancel_polygon_proxy)
537
backspace_button.removeEventListener("click", backspace_polygon_proxy)
538
polygon_points.clear()
539
540
zone.style.cursor = "auto"
541
new_shape = None
542
543
544
def close_polygon(event):
545
if event is not None and hasattr(event, "key") and event.key != "Enter":
546
return
547
# Polygon is already there, but we need to remove the events
548
reset_polygon()
549
550
551
def cancel_polygon(event):
552
if event is not None and hasattr(event, "key") and event.key != "Escape":
553
return
554
# Delete the polygon
555
new_shape.remove()
556
reset_polygon()
557
558
559
def backspace_polygon(event):
560
if event is not None and hasattr(event, "key") and event.key != "Backspace":
561
return
562
if not polygon_points:
563
return
564
polygon_points.pop()
565
polygon = new_shape.children[0]
566
polygon.setAttribute("points", " ".join(
567
[f"{point[0] * image.naturalWidth},{point[1] * image.naturalHeight}" for point in
568
polygon_points]))
569
570
571
close_polygon_proxy = create_proxy(close_polygon)
572
cancel_polygon_proxy = create_proxy(cancel_polygon)
573
backspace_polygon_proxy = create_proxy(backspace_polygon)
574
575
576
def open_shape(event):
577
global new_shape, bbox_pos
578
if bbox_pos or shape_type == "select":
579
return
580
print("Creating a new shape of type:", shape_type)
581
582
if shape_type == "shape-bbox":
583
helper_message.innerText = ("Define the first point at the intersection of the lines "
584
"by clicking on the image, or click the cross to cancel")
585
586
cancel_button.addEventListener("click", cancel_bbox_proxy)
587
document.addEventListener("keydown", cancel_bbox_proxy)
588
cancel_button.style.display = "block"
589
bbox_pos = None
590
zone.addEventListener("click", make_bbox_proxy)
591
vertical_ruler.style.display = "block"
592
horizontal_ruler.style.display = "block"
593
zone.style.cursor = "crosshair"
594
elif shape_type == "shape-polygon" or shape_type == "shape-polyline":
595
if shape_type == "shape-polygon":
596
helper_message.innerText = ("Click on the image to define the points of the polygon, "
597
"press escape to cancel, enter to close, or backspace to "
598
"remove the last point")
599
elif shape_type == "shape-polyline":
600
helper_message.innerText = ("Click on the image to define the points of the polyline, "
601
"press escape to cancel, enter to finish, or backspace to "
602
"remove the last point")
603
604
if not polygon_points and not new_shape:
605
new_shape = make_shape_container()
606
zone_rect = zone.getBoundingClientRect()
607
608
if not polygon_points and int(new_shape.children.length) == 0:
609
zone.addEventListener("click", make_polygon_proxy)
610
document.addEventListener("keydown", close_polygon_proxy)
611
document.addEventListener("keydown", cancel_polygon_proxy)
612
document.addEventListener("keydown", backspace_polygon_proxy)
613
cancel_button.addEventListener("click", cancel_polygon_proxy)
614
cancel_button.style.display = "block"
615
confirm_button.addEventListener("click", close_polygon_proxy)
616
confirm_button.style.display = "block"
617
backspace_button.addEventListener("click", backspace_polygon_proxy)
618
backspace_button.style.display = "block"
619
if shape_type == "shape-polygon":
620
polygon = document.createElementNS("http://www.w3.org/2000/svg", "polygon")
621
polygon.classList.add("shape-polygon")
622
elif shape_type == "shape-polyline":
623
polygon = document.createElementNS("http://www.w3.org/2000/svg", "polyline")
624
polygon.classList.add("shape-polyline")
625
polygon.setAttribute("fill", "none")
626
polygon.setAttribute("data-object-type", "")
627
polygon.classList.add("shape")
628
new_shape.appendChild(polygon)
629
zone.appendChild(new_shape)
630
zone.style.cursor = "crosshair"
631
elif shape_type == "shape-point":
632
point = document.createElementNS("http://www.w3.org/2000/svg", "circle")
633
zone_rect = zone.getBoundingClientRect()
634
point.setAttribute("cx", str((event.clientX - zone_rect.left) / zone_rect.width * image.naturalWidth))
635
point.setAttribute("cy", str((event.clientY - zone_rect.top) / zone_rect.height * image.naturalHeight))
636
point.setAttribute("r", "0")
637
point.classList.add("shape-point")
638
point.classList.add("shape")
639
point.setAttribute("data-object-type", "")
640
641
new_shape = make_shape_container()
642
zone_rect = zone.getBoundingClientRect()
643
644
new_shape.appendChild(point)
645
zone.appendChild(new_shape)
646
647
new_shape = None
648
649
650
651
for button in list(document.getElementById("shape-selector").children):
652
button.addEventListener("click", create_proxy(switch_shape))
653
print("Shape", button.id, "is available")
654
655
zone.addEventListener("mousemove", follow_cursor_proxy)
656
zone.addEventListener("click", create_proxy(open_shape))
657
658
# Load existing annotations, if any
659
put_shapes(await load_shapes())
660
print("Ready!")
661