Add wrap capability to numeric widget

node-red · Sep 16, 2019 · c49ded4 · c49ded4
1 parent a4128e6
commit c49ded4
Show file tree

Hide file tree

Showing 7 changed files with 22 additions and 9 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -3,6 +3,7 @@
 **Enhancements**
 
  - If template has height -1 then set it to 0 height (test).
+ - Add wrap value feature to numeric node.
 
  **Fixes**
 

diff --git a/dist/css/app.min.css b/dist/css/app.min.css
diff --git a/dist/dashboard.appcache b/dist/dashboard.appcache
@@ -24,4 +24,4 @@ fonts/weather-icons-lite.woff2
 NETWORK:
 *
 
-# hash: 730a5e4adc92a4fe60b1588cc830a87dd90f007b108dda0e2c1b03da472e5ac5
+# hash: 5b6d07f46d561606dd28f6e73a7310304484f46fdfa9effade595d2f12f242cb
diff --git a/dist/js/app.min.js b/dist/js/app.min.js
diff --git a/nodes/ui_numeric.html b/nodes/ui_numeric.html
@@ -18,6 +18,7 @@
                 }
             },
             height: {value: 0},
+            wrap: {value: false},
             passthru: {value: true},
             topic: {value: ''},
             format: {value: '{{value}}'},
@@ -66,14 +67,18 @@
         <input type="text" id="node-input-format" placeholder="{{value}}">
     </div>
     <div class="form-row">
-        <label for="node-input-min">Range</label>
+        <label for="node-input-min"><i class="fa fa-arrows-h"></i> Range</label>
         <span for="node-input-min">min</span>
         <input type="text" id="node-input-min" style="width:60px">
         <span for="not-input-max" style="margin-left:22px;">max</span>
         <input type="text" id="node-input-max" style="width:60px">
         <span for="not-input-step" style="margin-left:22px;">step</span>
         <input type="text" id="node-input-step" style="width:60px">
     </div>
+    <div class="form-row">
+        <label style="width:auto" for="node-input-wrap"><i class="fa fa-refresh"></i> Wrap value from max to min and min to max.</label>
+        <input type="checkbox" id="node-input-wrap" style="display:inline-block; width:auto; vertical-align:top;">
+    </div>
     <div class="form-row">
         <label style="width:auto" for="node-input-passthru"><i class="fa fa-arrow-right"></i> If <code>msg</code> arrives on input, pass through to output: </label>
         <input type="checkbox" checked id="node-input-passthru" style="display:inline-block; width:auto; vertical-align:top;">

diff --git a/nodes/ui_numeric.js b/nodes/ui_numeric.js
@@ -30,6 +30,7 @@ module.exports = function(RED) {
                 min: Number(config.min),
                 max: Number(config.max),
                 step: Number(config.step || 1),
+                wrap: config.wrap || false,
                 width: config.width || group.config.width || 6,
                 height: config.height || 1,
                 ed: (config.format.includes("value") ? false : true)

diff --git a/src/components/ui-component/ui-component-ctrl.js b/src/components/ui-component/ui-component-ctrl.js
@@ -66,15 +66,21 @@ angular.module('ui').controller('uiComponentController', ['$scope', 'UiEvents',
                             me.item.value = parseFloat(me.item.value);
                             if (isNaN(me.item.value)) { me.item.value = me.item.min; }
                             if (delta > 0) {
-                                if (me.item.value < me.item.max) {
+                                if ((me.item.value == me.item.max) && (me.item.wrap == true)) {
+                                     me.item.value = me.item.min;
+                                }
+                                else if (me.item.value < me.item.max) {
                                     me.item.value = Math.round(Math.min(me.item.value + delta, me.item.max)*10000)/10000;
                                 }
                                 if (me.item.value < me.item.min) {
                                     me.item.value = me.item.min;
                                 }
                             }
                             else if (delta < 0) {
-                                if (me.item.value > me.item.min) {
+                                if ((me.item.value == me.item.min) && (me.item.wrap == true)) {
+                                    me.item.value = me.item.max;
+                                }
+                                else if (me.item.value > me.item.min) {
                                     me.item.value = Math.round(Math.max(me.item.value + delta, me.item.min)*10000)/10000;
                                 }
                                 if (me.item.value > me.item.max) {