From ad7fd7afd12ed196e5ae33073f5cd215cfb28b55 Mon Sep 17 00:00:00 2001
From: Martin Turoci <martin.turoci@h2o.ai>
Date: Thu, 12 May 2022 15:57:42 +0200
Subject: [PATCH] docs: Add documentation, include in Tour. #1323

---
 py/examples/tour.conf                   |  1 +
 website/sidebars.js                     |  1 +
 website/widgets/form/image_annotator.md | 29 +++++++++++++++++++++++++
 3 files changed, 31 insertions(+)
 create mode 100644 website/widgets/form/image_annotator.md

diff --git a/py/examples/tour.conf b/py/examples/tour.conf
index ce207a4d76c..2454b1e94a4 100644
--- a/py/examples/tour.conf
+++ b/py/examples/tour.conf
@@ -96,6 +96,7 @@ table_pagination_download.py
 table_pagination_groups.py
 tags.py
 image.py
+image_annotator.py
 file_stream.py
 frame.py
 frame_path.py
diff --git a/website/sidebars.js b/website/sidebars.js
index 253283b8ebe..9a1373bc3ab 100644
--- a/website/sidebars.js
+++ b/website/sidebars.js
@@ -112,6 +112,7 @@ module.exports = {
           "widgets/form/file_upload",
           "widgets/form/frame",
           "widgets/form/image",
+          "widgets/form/image_annotator",
           "widgets/form/inline",
           "widgets/form/label",
           "widgets/form/link",
diff --git a/website/widgets/form/image_annotator.md b/website/widgets/form/image_annotator.md
new file mode 100644
index 00000000000..ba8b5a4e959
--- /dev/null
+++ b/website/widgets/form/image_annotator.md
@@ -0,0 +1,29 @@
+---
+title: Image Annotator
+keywords:
+  - form
+  - image_annotator
+custom_edit_url: null
+---
+
+Use image annotator when you need to draw bounding boxes over an image. Useful for computer vision.
+
+```py
+image = 'https://images.pexels.com/photos/2696064/pexels-photo-2696064.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1'
+q.page['example'] = ui.form_card(box='1 1 9 10', items=[
+    ui.image_annotator(
+        name='annotator',
+        title='Drag to annotate',
+        image=image,
+        image_height='700px',
+        tags=[
+            ui.image_annotator_tag(name='p', label='Person', color='$cyan'),
+            ui.image_annotator_tag(name='f', label='Food', color='$blue'),
+        ],
+        items=[
+            ui.image_annotator_item(shape=ui.image_annotator_rect(x1=649, y1=393, x2=383, y2=25), tag='p'),
+        ],
+    ),
+    ui.button(name='submit', label='Submit', primary=True)
+])
+```