Recognition tool

public/index.html

@@ -13,14 +13,16 @@
     />
     <script>
       if (navigator.serviceWorker) {
-        navigator.serviceWorker.register("service-worker.js").then(
-          (registration) =>
-            console.log(
-              `Service worker registered on scope ${registration.scope}`,
-            ),
-          (reason) =>
-            console.log(`Service worker failed to register ~ ${reason}`),
-        )
+        navigator.serviceWorker
+          .register("service-worker.js")
+          .then(
+            (registration) =>
+              console.log(
+                `Service worker registered on scope ${registration.scope}`,
+              ),
+            (reason) =>
+              console.log(`Service worker failed to register ~ ${reason}`),
+          )
       }
     </script>
   </head>
@@ -60,7 +62,7 @@
         <button id="room-connect">Connect <i class="fa fa-link"></i></button>
       </div>
       <div id="tools-panel">
-        <button id="pen-tool" class="selected">
+        <button id="pen-tool" class="selectable-tool selected">
           <i class="fa fa-paint-brush"></i>
         </button>
         <div id="pen-properties" class="properties">
@@ -197,7 +199,13 @@
             </div>
           </div>
         </div>
-        <button id="eraser-tool"><i class="fa fa-eraser"></i></button>
+        <button id="eraser-tool" class="selectable-tool">
+          <i class="fa fa-eraser"></i>
+        </button>
+
+        <button id="recognition-mode" class="selectable-tool">
+          <i class="fa fa-square"></i>
+        </button>
         <div id="connected-room-info">
           You are connected to a room: <span id="connected-room-id"></span>
         </div>

public/styles.css

@@ -260,7 +260,7 @@ button.selected {
   border-radius: 4px;
 }
 
-#pen-tool {
+.selectable-tool {
   background-color: #2f2f2f;
   color: white;
   padding: 10px;
@@ -268,25 +268,9 @@ button.selected {
   border: none;
   cursor: pointer;
   border-radius: 50%;
-  margin-right: 8px;
 }
 
-#pen-tool:hover {
-  background-color: #4f4f4f !important;
-  transition-duration: 0.4s;
-}
-
-#eraser-tool {
-  background-color: #2f2f2f;
-  color: white;
-  padding: 10px;
-  font-size: 16px;
-  border: none;
-  cursor: pointer;
-  border-radius: 50%;
-}
-
-#eraser-tool:hover {
+.selectable-tool:hover {
   background-color: #4f4f4f !important;
   transition-duration: 0.4s;
 }

src/app.js

@@ -130,7 +130,9 @@ const onRoomConnect = (room_) => {
 
   room.addEventListener("addOrUpdatePath", ({ detail: { id, points } }) => {
     canvas.renderPath(id, points, room.erasureIntervals)
-    drawRecognizedUpcoming(points)
+    if (toolSelection.isRecognitionModeSet()) {
+      drawRecognizedUpcoming(points)
+    }
   })
 
   room.addEventListener(
@@ -183,9 +185,9 @@ function getRecognizedShapePoints(points) {
 function drawIfRecognized(points, callback, notRecCallback) {
   const recognizedPoints = getRecognizedShapePoints(points)
   if (recognizedPoints) {
-    callback(recognizedPoints)
+    callback && callback(recognizedPoints)
   } else {
-    notRecCallback()
+    notRecCallback && notRecCallback()
   }
 }
 
@@ -336,7 +338,9 @@ canvas.input.addEventListener("strokestart", ({ detail: e }) => {
 
 canvas.input.addEventListener("strokeend", ({ detail: e }) => {
   const pathID = pathIDsByPointerID.get(e.pointerId)
-  drawRecognized(pathID, room.getPoints(pathID))
+  if (toolSelection.isRecognitionModeSet()) {
+    drawRecognized(pathID, room.getPoints(pathID))
+  }
   pathIDsByPointerID.delete(e.pointerId)
   clearRecognizedUpcoming()
 })

src/elements.js

@@ -12,6 +12,7 @@ export const overallStatusIconImage = document.getElementById(
 export const canvas = document.getElementById("canvas")
 export const penButton = document.getElementById("pen-tool")
 export const eraserButton = document.getElementById("eraser-tool")
+export const recognitionModeButton = document.getElementById("recognition-mode")
 
 export const roomIDElem = document.getElementById("room-id")
 export const roomConnectButton = document.getElementById("room-connect")

src/tool-selection.js

@@ -8,6 +8,7 @@ export const Tools = Object.freeze({
 let tool = Tools.PEN
 let strokeColour = "#0000ff"
 let strokeRadius = 5
+let recognitionEnabled = false
 // TODO: The erase radius should also be selectable.
 const ERASE_RADIUS = 20
 
@@ -15,6 +16,7 @@ export const getTool = () => tool
 export const getStrokeColour = () => strokeColour
 export const getStrokeRadius = () => strokeRadius
 export const getEraseRadius = () => ERASE_RADIUS
+export const isRecognitionModeSet = () => recognitionEnabled
 
 const showElement = (element) => {
   element.style.display = "block"
@@ -24,6 +26,15 @@ const hideElement = (element) => {
   element.style.display = "none"
 }
 
+HTML.recognitionModeButton.addEventListener("click", () => {
+  recognitionEnabled = !recognitionEnabled
+  if (recognitionEnabled) {
+    HTML.recognitionModeButton.classList.add("selected")
+  } else {
+    HTML.recognitionModeButton.classList.remove("selected")
+  }
+})
+
 HTML.penButton.addEventListener("click", () => {
   if (tool == Tools.PEN) {
     showElement(HTML.penProperties)