From a4267f52dbbc048b7028d16fd923e06439e4587c Mon Sep 17 00:00:00 2001
From: Nick O'Leary <nick.oleary@gmail.com>
Date: Thu, 22 Oct 2020 00:11:20 +0100
Subject: [PATCH] [webcam] Add show image timeout and hide button options

---
 node-red-node-ui-webcam/package.json   |  2 +-
 node-red-node-ui-webcam/ui_webcam.html | 76 ++++++++++++++++++++++++--
 node-red-node-ui-webcam/ui_webcam.js   | 48 ++++++++++++++--
 3 files changed, 114 insertions(+), 12 deletions(-)

diff --git a/node-red-node-ui-webcam/package.json b/node-red-node-ui-webcam/package.json
index 7c7104d..90db2f0 100644
--- a/node-red-node-ui-webcam/package.json
+++ b/node-red-node-ui-webcam/package.json
@@ -1,6 +1,6 @@
 {
     "name": "node-red-node-ui-webcam",
-    "version": "0.1.1",
+    "version": "0.2.0",
     "description": "A Node-RED ui node to capture images from a webcam.",
     "author": "Nick O'Leary",
     "license": "Apache-2.0",
diff --git a/node-red-node-ui-webcam/ui_webcam.html b/node-red-node-ui-webcam/ui_webcam.html
index d53c911..324ee8b 100644
--- a/node-red-node-ui-webcam/ui_webcam.html
+++ b/node-red-node-ui-webcam/ui_webcam.html
@@ -33,6 +33,8 @@
             name: {value: ''},
             countdown: { value: false },
             autoStart: { value: false },
+            hideCaptureButton: { value: false },
+            showImage: { value: 2 },
             format: { value:"png" }
         },
         inputs:1,
@@ -51,17 +53,60 @@
                 height: "#node-input-height",
                 group: "#node-input-group"
             });
+
+            var showImage = this.showImage === undefined ? 2 : this.showImage;
+            if (showImage === 0) {
+                // Show image without clearing
+                $("#node-input-showImage-enable").attr("checked",true)
+                $("#node-input-showImage-timeout").attr("checked",false)
+                $("#node-input-showImage-time").val("2")
+            } else if (showImage === -1) {
+                // Don't show image
+                $("#node-input-showImage-enable").attr("checked",false)
+                $("#node-input-showImage-timeout").attr("checked",false)
+                $("#node-input-showImage-time").val("2")
+            } else {
+                // Show image with clear
+                $("#node-input-showImage-enable").attr("checked",true)
+                $("#node-input-showImage-timeout").attr("checked",true)
+                $("#node-input-showImage-time").val(showImage)
+            }
+
+            $("#node-input-showImage-enable").on("change", function() {
+                $("#node-input-showImage-timeout").attr("disabled",!this.checked)
+                if (!this.checked) {
+                    $(".node-row-ui-webcam-showImage-timeout").css("opacity",0.6);
+                    $("#node-input-showImage-time").attr("disabled",true)
+                } else {
+                    $("#node-input-showImage-time").attr("disabled",!$("#node-input-showImage-timeout")[0].checked)
+                    $(".node-row-ui-webcam-showImage-timeout").css("opacity",1);
+                }
+            })
+            $("#node-input-showImage-timeout").on("change", function() {
+                $("#node-input-showImage-time").attr("disabled",!this.checked)
+            })
+
+            $("#node-input-showImage-enable").trigger("change");
+
         },
         oneditsave: function() {
-            // var ts = $("#node-input-select-timeslice").val();
-            // if (ts === 'once') {
-            //     $("#node-input-timeslice").val("")
-            // }
+            var showImageEnable = $("#node-input-showImage-enable")[0].checked;
+            var showImageTimeout = $("#node-input-showImage-timeout")[0].checked;
+            var showImageTime = $("#node-input-showImage-time").val();
+
+            if (!showImageEnable) {
+                this.showImage = -1;
+            } else if (!showImageTimeout) {
+                this.showImage = 0;
+            } else {
+                this.showImage = showImageTime;
+            }
+
         }
     });
 </script>
 
-<script type="text/x-red" data-template-name="ui_webcam">
+<script type="text/html" data-template-name="ui_webcam">
     <div class="form-row" id="template-row-group">
         <label for="node-input-group"><i class="fa fa-table"></i> Group</span></label>
         <input type="text" id="node-input-group">
@@ -81,6 +126,21 @@
                     <input style="width:auto; margin: 0" type="checkbox" id="node-input-autoStart"> Start webcam automatically
                 </label>
             </div>
+            <div class="form-row">
+                <label style="width: auto" for="node-input-showImage-enable">
+                    <input style="width:auto; margin: 0" type="checkbox" id="node-input-showImage-enable"> Show image after capture
+                </label>
+                <div class="node-row-ui-webcam-showImage-timeout">
+                    <label style="margin-bottom: 0; margin-left: 20px; width: auto" for="node-input-showImage-timeout">
+                        <input style="width:auto; margin: 0" type="checkbox" id="node-input-showImage-timeout"> Clear image after <input style="width:60px; margin: 0" type="text" id="node-input-showImage-time"> seconds
+                    </label>
+                </div>
+            </div>
+            <div class="form-row">
+                <label style="width: auto" for="node-input-hideCaptureButton">
+                    <input style="width:auto; margin: 0" type="checkbox" id="node-input-hideCaptureButton"> Hide capture button
+                </label>
+            </div>
             <div class="form-row">
                 <label style="width: auto" for="node-input-countdown">
                     <input style="width:auto; margin: 0" type="checkbox" id="node-input-countdown"> Use 5 second countdown when triggered
@@ -102,10 +162,14 @@
     </div>
 </script>
 
-<script type="text/x-red" data-help-name="ui_webcam">
+<script type="text/html" data-help-name="ui_webcam">
     <p>A Node Red dashboard ui node to capture images from the browser's webcam.</p>
     <h3>Inputs</h3>
     <dl class="message-properties">
+        <dt>payload<span class="property-type">Buffer | Boolean</span></dt>
+        <dd>If set to a Buffer containing an image, it will be displayed in
+            the place of the webcam view on the dashboard. If set to <code>null</code>
+            or <code>false</code>, the displayed image will be cleared.</dd>
         <dt>capture</dt>
         <dd>If set, this will trigger the webcam to capture an image. The webcam must
             have been activated on the dashboard first.</dd>
diff --git a/node-red-node-ui-webcam/ui_webcam.js b/node-red-node-ui-webcam/ui_webcam.js
index df1b806..f0e7467 100644
--- a/node-red-node-ui-webcam/ui_webcam.js
+++ b/node-red-node-ui-webcam/ui_webcam.js
@@ -151,12 +151,20 @@ module.exports = function(RED) {
                         return value;
                     },
                     beforeEmit: function(msg) {
+                        if (Buffer.isBuffer(msg.payload)) {
+                            msg.payload = msg.payload.toString('base64');
+                        }
                         return { msg: msg };
                     },
                     beforeSend: function (msg, orig) {
                         if (orig) {
+                            // if (orig.msg.status) {
+                            //     node.status(orig.msg.status);
+                            //     return null;
+                            // }
                             var urlPreamble = "data:image/"+(config.format||"png")+";base64,";
                             orig.msg.payload = Buffer.from(orig.msg.payload.substring(urlPreamble.length),'base64')
+                            delete orig.msg.capture;
                             return orig.msg;
                         }
                     },
@@ -174,6 +182,20 @@ module.exports = function(RED) {
                         $scope.init = function (config) {
                             // console.log("ui_webcam: initialised config:",config);
                             $scope.config = config;
+                            if ($scope.config.showImage === undefined) {
+                                $scope.config.showImageTimeout = 2000;
+                                $scope.config.showImage = true;
+                            } else if ($scope.config.showImage === -1) {
+                                $scope.config.showImage = false;
+                            } else {
+                                $scope.config.showImageTimeout = parseFloat($scope.config.showImage)*1000;
+                                $scope.config.showImage = true;
+                            }
+                            if ($scope.config.hideCaptureButton) {
+                                setTimeout(function() {
+                                    $("#ui_webcam_btn_trigger_"+$scope.$id).hide();
+                                },100);
+                            }
                             if ($scope.config.autoStart) {
                                 setTimeout(function() {
                                     $scope.enableCamera();
@@ -189,6 +211,8 @@ module.exports = function(RED) {
                         var activeCamera = null;
                         var oldActiveCamera = null;
 
+
+
                         $scope.changeCamera = function(deviceId) {
                             oldActiveCamera = activeCamera;
                             activeCamera = $scope.data.cameras[deviceId].deviceId;
@@ -239,6 +263,7 @@ module.exports = function(RED) {
                                 }
 
                                 navigator.mediaDevices.getUserMedia(constraint).then(function(stream) {
+                                    // $scope.send({status:{shape:"dot",fill:"green",text:"active"}})
                                     $("#webcam_"+$scope.$id).addClass("active")
                                     var playbackEl = document.querySelector("video#ui_webcam_playback_"+$scope.$id);
                                     playbackEl.srcObject = stream;
@@ -263,7 +288,7 @@ module.exports = function(RED) {
                             stopActiveTracks();
                             var playbackEl = document.querySelector("video#ui_webcam_playback_"+$scope.$id);
                             playbackEl.srcObject = null;
-
+                            // $scope.send({status:{shape:"ring",fill:"red",text:"inactive"}})
                             active = false;
                             $("#ui_webcam_btn_enable_"+$scope.$id).show();
                             $("#ui_webcam_toolbar_"+$scope.$id).hide();
@@ -303,10 +328,14 @@ module.exports = function(RED) {
                             canvas.getContext('2d').drawImage(playbackEl, 0, 0);
                             var img = document.querySelector("img#ui_webcam_image_"+$scope.$id);
                             img.src = canvas.toDataURL('image/'+($scope.config.format||'png'));
-                            img.style.display = "block";
-                            setTimeout(function() {
-                                img.style.display = "none";
-                            },2000);
+                            if ($scope.config.showImage) {
+                                img.style.display = "block";
+                                if ($scope.config.showImageTimeout) {
+                                    activeTimeout = setTimeout(function() {
+                                        img.style.display = "none";
+                                    },$scope.config.showImageTimeout);
+                                }
+                            }
                             return img.src;
                         }
 
@@ -344,9 +373,18 @@ module.exports = function(RED) {
                             if (!active) {
                                 return;
                             }
+                            var img = document.querySelector("img#ui_webcam_image_"+$scope.$id);
                             if (msg.capture) {
                                 msg.payload = takePhoto();
                                 $scope.send(msg);
+                            } else if (typeof msg.payload === 'string') {
+                                clearTimeout(activeTimeout);
+                                if (msg.payload === "") {
+                                    img.style.display = "none";
+                                } else {
+                                    img.src = "data:image/"+($scope.config.format||"png")+";base64,"+msg.payload;
+                                    img.style.display = "block";
+                                }
                             }
                         });
                     }