UI webcam save defaults (#75)

dceejay · knolleary · web-flow · commit 5a3b627afa70 · 2022-01-05T15:26:59.000Z
* one more go at ui-list spacing * Allow ui-webcam to save default camera in browser and set camera via msg.camera * Revert "one more go at ui-list spacing" This reverts commit a65f3e7. * Update node-red-node-ui-webcam/ui_webcam.js Co-authored-by: Nick O'Leary <nick.oleary@gmail.com> * Update node-red-node-ui-webcam/ui_webcam.js Co-authored-by: Nick O'Leary <nick.oleary@gmail.com> * Update node-red-node-ui-webcam/ui_webcam.js Co-authored-by: Nick O'Leary <nick.oleary@gmail.com> Co-authored-by: Nick O'Leary <nick.oleary@gmail.com>
diff --git a/node-red-node-ui-list/package.json b/node-red-node-ui-list/package.json
@@ -1,6 +1,6 @@
 {
     "name": "node-red-node-ui-list",
-    "version": "0.3.6",
+    "version": "0.3.5",
     "description": "Node-RED Dashboard UI widget node for simple list",
     "author": "Hiroyasu Nishiyama",
     "contributors": [
diff --git a/node-red-node-ui-list/ui_list.js b/node-red-node-ui-list/ui_list.js
@@ -57,7 +57,7 @@ module.exports = function(RED) {
         var desc = (allowHTML ? String.raw`<span ng-bind-html="item.description | trusted"></span>` : String.raw`{{item.description}}`);
         var icon = String.raw`
         <img src="{{item.icon}}" class="md-avatar" ng-if="(item.icon !== undefined) && (item.icon !== null)">
-        <md-icon aria-label="{{item.desc}}" style="color:`+config.tcol+String.raw`" ng-if="(item.icon === undefined) && (item.icon_name !== undefined)"><ui-icon icon="{{item.icon_name}}"></ui-icon></md-icon>
+        <md-icon aria-label="{{item.desc}}" style="height:unset; margin-top:auto; color:`+config.tcol+String.raw`" ng-if="(item.icon === undefined) && (item.icon_name !== undefined)"><ui-icon icon="{{item.icon_name}}"></ui-icon></md-icon>
         <span class="md-avatar" style="font-size:x-large; height:unset;" ng-if="(item.icon === undefined) && (item.icon_unicode !== undefined)"><h1>{{item.icon_unicode}}</h1></span>
         <md-icon class="md-avatar-icon" aria-label="{{item.desc}}" ng-if="(item.icon === null) && (item.icon_name === undefined) && (item.icon_unicode === undefined)"></md-icon>
 `;
diff --git a/node-red-node-ui-webcam/README.md b/node-red-node-ui-webcam/README.md
@@ -1,5 +1,5 @@
 node-red-node-ui-webcam
-============================
+=======================
 
 A Node-RED UI widget node that allows images to be captured from the dashboard.
 
@@ -21,6 +21,9 @@ If a message is passed to the `ui_webcam` node with the `capture` property set,
 and if the webcam has been activated on the dashboard, it will capture an image
 without the user having to click on the button.
 
+The user can select the default camera to use in the on-screen widget dropdown.
+This will be used for future sessions with that browser until changed.
+
 ## Browser Support
 
 This node will work in all modern browsers, but not IE.
diff --git 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.3.0",
+    "version": "0.4.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
@@ -36,7 +36,7 @@
             hideCaptureButton: { value: false },
             showImage: { value: 2 },
             mirror: { value: true },
-            format: { value:"png" }
+            format: { value: "png" }
         },
         inputs:1,
         outputs:1,
@@ -121,36 +121,36 @@
         <button class="editor-button" id="node-input-size"></button>
     </div>
     <br />
-    <div class="form-row" style="min-width: 470px">
-        <label style="vertical-align: top"><i class="fa fa-cog"></i> Options</label>
+    <div class="form-row" style="min-width:470px">
+        <label style="vertical-align:top"><i class="fa fa-cog"></i> Options</label>
         <div style="display:inline-block; min-width:350px; width:calc(100% - 120px);">
             <div class="form-row">
-                <label style="width: auto" for="node-input-autoStart">
+                <label style="width:auto" for="node-input-autoStart">
                     <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">
+                <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
+                        <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">
+                <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">
+                <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
                 </label>
             </div>
             <div class="form-row">
-                <label style="width: auto" for="node-input-mirror">
+                <label style="width:auto" for="node-input-mirror">
                     <input style="width:auto; margin:0" type="checkbox" id="node-input-mirror"> Mirror image from webcam
                 </label>
             </div>
@@ -181,12 +181,16 @@ <h3>Inputs</h3>
         <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>
+        <dt>camera<span class="property-type">Number</span></dt>
+        <dd>If set to a number that is the index of an available camera, the stream will switch to that camera.</dd>
     </dl>
     <h3>Outputs</h3>
     <dl class="message-properties">
         <dt>payload<span class="property-type">Buffer</span></dt>
-        <dd>The captured image as a png or jpeg.</dd>
+        <dd>The captured image as a png or jpeg. Most image recognition processes prefer jpeg.</dd>
     </dl>
     <h3>Details</h3>
+    The user may set the preferred camera from a dropdown in the on-screen widget.
+    This will be used by default for future sessions.
     <p></p>
 </script>
diff --git a/node-red-node-ui-webcam/ui_webcam.js b/node-red-node-ui-webcam/ui_webcam.js
@@ -221,6 +221,7 @@ module.exports = function(RED) {
                         $scope.changeCamera = function(deviceId) {
                             oldActiveCamera = activeCamera;
                             activeCamera = $scope.data.cameras[deviceId].deviceId;
+                            window.localStorage.setItem("node-red-node-ui-webcam-activeCam",deviceId);
                             $scope.disableCamera();
                             $scope.enableCamera();
                         }
@@ -275,7 +276,10 @@ module.exports = function(RED) {
                                     $scope.data.stream = stream;
                                     $("#ui_webcam_toolbar_"+$scope.$id).show();
                                     if (activeCamera === null) {
-                                        activeCamera = stream.getTracks()[0].getSettings().deviceId;
+                                        var cam = parseInt(window.localStorage.getItem("node-red-node-ui-webcam-activeCam") || 0);
+                                        if (cam < stream.getTracks().length) {
+                                            activeCamera = stream.getTracks()[cam].getSettings().deviceId;
+                                        }
                                     }
                                 }).catch(handleError);
                             }
@@ -377,12 +381,22 @@ module.exports = function(RED) {
                         };
 
                         $scope.$watch('msg', function(msg) {
-                            if (!msg) {
-                                return;
-                            }
-                            if (!active) {
-                                return;
+                            if (!msg) { return; }
+                            if (msg.camera !== undefined) {
+                                if (!isNaN(parseInt(msg.camera))) {
+                                    var c = parseInt(msg.camera);
+                                    if (c >= 0 || c < 16) {
+                                        oldActiveCamera = activeCamera;
+                                        $scope.disableCamera();
+                                        activeCamera = null;
+                                        window.localStorage.setItem("node-red-node-ui-webcam-activeCam",c);
+                                        if (active !== false) {
+                                            $scope.enableCamera();
+                                        }
+                                    }
+                                }
                             }
+                            if (!active) { return; }
                             var img = document.querySelector("img#ui_webcam_image_"+$scope.$id);
                             if (msg.capture) {
                                 msg.payload = takePhoto();

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "node-red-node-ui-list",`
`3`		`- "version": "0.3.6",`
	`3`	`+ "version": "0.3.5",`
`4`	`4`	`"description": "Node-RED Dashboard UI widget node for simple list",`
`5`	`5`	`"author": "Hiroyasu Nishiyama",`
`6`	`6`	`"contributors": [`
Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "node-red-node-ui-webcam",`
`3`		`- "version": "0.3.0",`
	`3`	`+ "version": "0.4.0",`
`4`	`4`	`"description": "A Node-RED ui node to capture images from a webcam.",`
`5`	`5`	`"author": "Nick O'Leary",`
`6`	`6`	`"license": "Apache-2.0",`