gauge improvements, e2e tests & docs updates

cypress/fixtures/flows/dashboard-gauges.json

@@ -286,5 +286,35 @@
         "x": 100,
         "y": 180,
         "wires": []
+    },
+    {
+        "id": "dashboard-ui-gauge-thermometer",
+        "type": "ui-gauge",
+        "z": "67f535e29922da83",
+        "name": "Thermometer",
+        "group": "dashboard-ui-group",
+        "order": 2,
+        "width": 3,
+        "height": "4",
+        "gtype": "gauge-thermometer",
+        "gstyle": "needle",
+        "tooltipPosition": "right",
+        "title": "gauge thermometer",
+        "units": "°C",
+        "icon": "",
+        "prefix": "",
+        "suffix": "",
+        "segments": [],
+        "min": "-20",
+        "max": "40",
+        "sizeThickness": 16,
+        "sizeGap": 4,
+        "sizeKeyThickness": 8,
+        "styleRounded": true,
+        "styleGlow": false,
+        "className": "",
+        "x": 120,
+        "y": 220,
+        "wires": []
     }
 ]

cypress/tests/widgets/gauge.spec.js

@@ -11,5 +11,6 @@ describe('Node-RED Dashboard 2.0 - Gauges', () => {
         cy.get('#nrdb-ui-widget-dashboard-ui-gauge-dial-34').find('.nrdb-ui-gauge-dial').should('exist')
         cy.get('#nrdb-ui-widget-dashboard-ui-gauge-battery').find('.nrdb-ui-gauge-battery').should('exist')
         cy.get('#nrdb-ui-widget-dashboard-ui-gauge-tank').find('.nrdb-ui-gauge-tank').should('exist')
+        cy.get('#nrdb-ui-widget-dashboard-ui-gauge-thermometer').find('.nrdb-ui-gauge-thermometer-wrapper').should('exist')
     })
 })

docs/nodes/widgets/ui-gauge.md

@@ -4,10 +4,10 @@ props:
     Group: Defines which group of the UI Dashboard this widget will render in.
     Size: Controls the width of the dropdown with respect to the parent group. Maximum value is the width of the group.
     Type:
-        description: Defines the shape of the gauge, "Tile", "Battery", "Water Tank", "Half Gauge" or "3/4 Gauge"
+        description: Defines the shape of the gauge, "Tile", "Battery", "Water Tank", "Thermometer", "Half Gauge" or "3/4 Gauge"
         dynamic: true
     Style:
-        description: Defines the style of arc rendered, "Needle" or "Rounded". (only applicable to for 3/4 and Half gauges)
+        description: Defines the style of arc rendered, "Needle" or "Rounded". (only applicable to 3/4 and Half gauges)
         dynamic: true
     Range (min):
         description: The smallest value that can be shown on the gauge
@@ -22,16 +22,19 @@ props:
         description: Text shown above the gauge, labelling what the gauge is showing.
         dynamic: true
     Prefix:
-        description: Text to be added _before_ the value in the middle of the gauge. (only applicable to for 3/4 and Half gauges)
+        description: Text to be added _before_ the value in the middle of the gauge. (only applicable to 3/4 and Half gauges)
         dynamic: true
     Suffix:
-        description: Text to be shown _after_ the value in the middle of the gauge. (only applicable to for 3/4 and Half gauges)
+        description: Text to be shown _after_ the value in the middle of the gauge. (only applicable to 3/4 and Half gauges)
         dynamic: true
     Units:
-        description: Small text to be shown below the value in the middle of the gauge. (only applicable to for 3/4 and Half gauges)
+        description: Small text to be shown below the value in the middle of the gauge. (only applicable to 3/4 and Half gauges)
         dynamic: true
     Icon:
-        description: Icon to be shown below the value in the middle of the gauge. Uses <a href="https://pictogrammers.com/library/mdi/">Material Designs Icon</a>, no need to include the <code>mdi-</code> prefix. (only applicable to for 3/4 and Half gauges)
+        description: Icon to be shown below the value in the middle of the gauge. Uses <a href="https://pictogrammers.com/library/mdi/">Material Designs Icon</a>, no need to include the <code>mdi-</code> prefix. (only applicable to 3/4 and Half gauges)
+        dynamic: true
+    Tooltip:
+        description: Defines the tooltip position of the thermometer "Right" or "Left". (only applicable to thermometer gauges)
         dynamic: true
     Sizes (Gauge): (px) How thick the arc and backdrop of the gauge are rendered.
     Sizes (Gap): (px) How big the gap/padding is between the Gauge and the "Segments"
@@ -72,6 +75,10 @@ dynamic:
     Units:
         payload: msg.ui_update.units
         structure: ["String"]
+    Tooltip:
+        payload: msg.ui_update.tooltipPosition
+        structure: ["String"]
+        examples: ['left', 'right']
 ---
 
 
@@ -174,21 +181,15 @@ Values for the gauges can be set by sending a numerical value in `msg.payload`.
 
 When switching to a "Water Tank" type, the segments will be overridden with the following values:
 
-```js
-[{
-    color: '#A8F5FF',
-    from: 0
-}, {
-    color: '#55DBEC',
-    from: 15
-}, {
-    color: '#53B4FD',
-    from: 35
-}, {
-    color: '#2397D1',
-    from: 50
-}]
-```
+### Thermometer <AddedIn version="1.19.0" />
+
+| Type | Tooltip | Min | Max |
+| --- | --- | --- | --- |
+| Thermometer | Right | -20 | 50 |
+
+![Examples of some Thermometer gauges](/images/node-examples/ui-gauge-thermometer.png "Examples of some Thermometer gauges"){data-zoomable}
+*Examples of some Thermometer gauges*
+
 
 ## Overriding CSS
 

nodes/widgets/locales/en-US/ui_gauge.html

@@ -53,7 +53,7 @@ <h3>Dynamic Properties (Inputs)</h3>
             </ul>
         </dd>
         <dt class="optional">gstyle <span class="property-type">see detail</span></dt>
-        <dd>Modify the style of 3/4 and half Gauge rendered, with the following options: (only applicable to for 3/4 and Half gauges)
+        <dd>Modify the style of 3/4 and half Gauge rendered, with the following options: (only applicable to 3/4 and Half gauges)
             <ul>
                 <li><code>neelde</code></li>
                 <li><code>rounded</code></li>
@@ -64,13 +64,13 @@ <h3>Dynamic Properties (Inputs)</h3>
         <dt class="optional">max <span class="property-type">number</span></dt>
         <dd>Change the maximum value the gauge supports</dd>
         <dt class="optional">prefix <span class="property-type">string</span></dt>
-        <dd>Change the text rendered before the Gauge's value (only applicable to for 3/4 and Half gauges)</dd>
+        <dd>Change the text rendered before the Gauge's value (only applicable to 3/4 and Half gauges)</dd>
         <dt class="optional">suffix <span class="property-type">string</span></dt>
-        <dd>Change the text rendered after the Gauge's value (only applicable to for 3/4 and Half gauges)</dd>
+        <dd>Change the text rendered after the Gauge's value (only applicable to 3/4 and Half gauges)</dd>
         <dt class="optional">units <span class="property-type">array</span></dt>
-        <dd>Controls the "unit" display underneath the gauge's value for 3/4 and Half gauges (only applicable to for 3/4 and Half gauges)</dd>
+        <dd>Controls the "unit" display underneath the gauge's value for 3/4 and Half gauges (only applicable to 3/4 and Half gauges)</dd>
         <dt class="optional">icon <span class="property-type">string</span></dt>
-        <dd>Modify which icon is rendered within the gauge (must be a Material Design icon and only applicable to for 3/4 and Half gauges)</dd>
+        <dd>Modify which icon is rendered within the gauge (must be a Material Design icon and only applicable to 3/4 and Half gauges)</dd>
         <dt class="optional">class <span class="property-type">string</span></dt>
         <dd>Add a CSS class, or more, to the Button at runtime.</dd>
     </dl>

nodes/widgets/ui_gauge.html

@@ -92,8 +92,8 @@
                 }]
             },
             'gauge-thermometer': {
-                min: 0,
-                max: 10,
+                min: -20,
+                max: 50,
                 segments: []
             }
         }
@@ -243,17 +243,21 @@
                     }
 
                     if (type === 'gauge-thermometer') {
+                        $('#node-input-container-gstyle').hide()
                         $('#node-input-container-tooltipPosition').show()
                         $('.node-input-segments-container-row').hide()
                         $('#node-input-add-segment').hide()
                         $('#node-input-get-defaults').css({ 'margin-top': '4px', 'margin-left': '103px' })
                         $('#ui-gauge-icon').hide()
                         $('#node-input-container-sizes').hide()
+                        $('.node-prefix-suffix-container').hide()
                     } else {
+                        $('#node-input-container-gstyle').show()
                         $('#node-input-container-tooltipPosition').hide()
                         $('.node-input-segments-container-row').show()
                         $('#node-input-add-segment').show()
                         $('#node-input-get-defaults').css({ 'margin-top': '4px', 'margin-left': 0 })
+                        $('.node-prefix-suffix-container').show()
                     }
 
                     if (isInitialised && isChanging && isDefault(oldType)) {
@@ -354,6 +358,7 @@
             <option value="gauge-34" data-i18n="ui-gauge.label.gauge34"></option>
             <option value="gauge-half" data-i18n="ui-gauge.label.gaugeHalf"></option>
             <option value="gauge-battery" data-i18n="ui-gauge.label.gaugeBattery"></option>
+            <option value="gauge-tank" data-i18n="ui-gauge.label.gaugeTank"></option>
             <option value="gauge-thermometer" data-i18n="ui-gauge.label.gaugeThermometer"></option>
             <!-- <segment value="donut">Donut</segment>
             <segment value="compass">Compass</segment>
@@ -368,8 +373,8 @@
             <!-- <option value=rounded">Rounded</option> -->
         </select>
     </div>
-    <div id="node-input-container-tooltipPosition" class="form-row" style="display: flex; align-items: center;">
-        <label for="node-input-tooltipPosition"><i class="fa fa-thermometer-three-quarters"></i> <span data-i18n="ui-gauge.label.tooltipPosition"></span></label>
+    <div id="node-input-container-tooltipPosition" class="form-row">
+        <label for="node-input-tooltipPosition"><i class="fa fa-thermometer-three-quarters"></i> <span data-i18n="ui-gauge.label.tooltip"></span></label>
         <select id="node-input-tooltipPosition" style="width:150px">
             <option value="left" data-i18n="ui-gauge.label.left"></option>
             <option value="right" data-i18n="ui-gauge.label.right"></option>
@@ -413,7 +418,7 @@ <h3 data-i18n="ui-gauge.label.labelling"></h3>
             <input type="text" id="node-input-title">
         </div>
         <div id="node-input-container-label-extras">
-            <div class="form-row form-row-flex">
+            <div class="form-row form-row-flex node-prefix-suffix-container">
                 <div>
                     <label for="node-input-prefix"><i class="fa fa-tag"></i> <span data-i18n="ui-gauge.label.prefix"></span></label>
                     <input type="text" id="node-input-prefix" style="width: 75px">

ui/src/widgets/ui-gauge/types/UIGaugeThermometer.vue

@@ -1,10 +1,10 @@
 <!-- eslint-disable vue/html-self-closing -->
 <template>
-    <div id="nrdb-ui-gauge-thermometer-wrapper" ref="container">
+    <div class="nrdb-ui-gauge-thermometer-wrapper" ref="container">
         <div id="thermometer-container" ref="thermometerContainer">
             <div id="thermometer" ref="thermometer">
                 <div id="temperature" :class="`${value && 'tooltip'} tooltip-${tooltipPosition}`" :style="{ height: `${temperatureHeight}%` }" :data-value="temperatureValue"></div>
-                <div id="range">
+                <div id="range" :class="tooltipPosition">
                     <div v-if="max" id="max">{{ max }}</div>
                     <div v-if="min" id="min">{{ min }}</div>
                 </div>
@@ -107,7 +107,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-#nrdb-ui-gauge-thermometer-wrapper {
+.nrdb-ui-gauge-thermometer-wrapper {
   margin: auto;
   display: flex;
   flex-direction: column;
@@ -118,17 +118,13 @@ export default {
   height: 100%;
 }
 
-// VARIABLES (Have fun) ―――――――――――――――――――――――――
-
-$TM-mainTint: #3d3d44;
-$TM-backgroundColor: darken($TM-mainTint, 2%);
 $TM-borderSize: 4px;
-$TM-borderColor: darken($TM-mainTint, 8%);
+$TM-borderColor: rgb(var(--v-theme-on-group-background));
 $TM-width: 20px;
 $TM-height: 115px;
 $TM-bulbSize: $TM-width * 1.6;
 $TM-radius: 20px;
-$TM-graduationsStyle: 2px solid rgba(0, 0, 0, 0.5);
+$TM-graduationsStyle: 2px solid rgba(var(--v-theme-on-group-background), 0.5);
 $TM-bulbColor: #3dcadf;
 $TM-mercuryColor : linear-gradient(#f17a65, $TM-bulbColor) no-repeat bottom;
 
@@ -169,22 +165,35 @@ $TM-tooltipArrowHeight: 2.2; // Higher numbers produce smaller height
   background-color: #686868;
   #range {
     position: relative;
-    right: 1.1rem;
+    &.right {
+      right: 1.1rem;
+      #min {
+        bottom: 0;
+        right: 0;
+      }
+      #max {
+        top: 0;
+        right: 0;
+      }
+    }
+    &.left {
+      left: 1.1rem;
+      #min {
+        bottom: 0;
+        left: 0;
+      }
+      #max {
+        top: 0;
+        left: 0;
+      }
+    }
     height: 100%;
     #min, #max {
       position: absolute;
       font-size: 0.8em;
       color: rgb(var(--v-theme-on-group-background)) !important;
       font-weight: bold;
     }
-    #min {
-      bottom: 0;
-      right: 0;
-    }
-    #max {
-      top: 0;
-      right: 0;
-    }
   }
   #graduations {
     height: 59%;
@@ -271,7 +280,7 @@ $TM-tooltipArrowHeight: 2.2; // Higher numbers produce smaller height
 }
 .nrdb-ui-gauge-title {
   position: absolute;
-  bottom: 0;
+  top: 80%;
   display: block;
   text-align: center;
   font-weight: bold;