From 42bc372d6e6e3d6fed5d3e12418cf216c8f829b6 Mon Sep 17 00:00:00 2001
From: Nicolas Mowen <nickmowen213@gmail.com>
Date: Thu, 10 Nov 2022 05:31:19 -0700
Subject: [PATCH] Update mask editor to have instructions (#4324)

---
 web/src/routes/CameraMap.jsx | 17 ++++++++++++++---
 1 file changed, 14 insertions(+), 3 deletions(-)

diff --git a/web/src/routes/CameraMap.jsx b/web/src/routes/CameraMap.jsx
index 6f7bc6fce..9ac3013c2 100644
--- a/web/src/routes/CameraMap.jsx
+++ b/web/src/routes/CameraMap.jsx
@@ -203,9 +203,20 @@ ${Object.keys(objectMaskPoints)
       <Card
         content={
           <p>
-            This tool can help you create masks & zones for your {camera} camera. When done, copy each mask
-            configuration into your <code className="font-mono">config.yml</code> file restart your Frigate instance to
-            save your changes.
+            This tool can help you create masks & zones for your {camera} camera.
+            • Click to add a point.
+            • Click and hold on an existing point to move it.
+            • Right-Click on an existing point to delete it.
+          </p>
+        }
+        header="Instructions"
+      />
+
+      <Card
+        content={
+          <p>
+            When done, copy each mask configuration into your <code className="font-mono">config.yml</code> file 
+            restart your Frigate instance to save your changes.
           </p>
         }
         header="Warning"