UI webcam save defaults (node-red#75)

* 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 <[email protected]> * Update node-red-node-ui-webcam/ui_webcam.js Co-authored-by: Nick O'Leary <[email protected]> * Update node-red-node-ui-webcam/ui_webcam.js Co-authored-by: Nick O'Leary <[email protected]> Co-authored-by: Nick O'Leary <[email protected]>
hardillb · Jan 5, 2022 · 5a3b627 · 5a3b627
1 parent 36d3e12
commit 5a3b627
Show file tree

Hide file tree

Showing 6 changed files with 41 additions and 20 deletions.
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();