UI Gauge - Dynamic Properties Support #1238

gayanSandamal · 2024-08-26T11:44:07Z

Description

Screen.Recording.2024-08-27.at.14.19.45.mov

Related Issue(s)

#1180

Checklist

I have read the contribution guidelines
Suitable unit/system level tests have been added and they pass
Documentation has been updated
- Upgrade instructions
- Configuration details
- Concepts
Changes flowforge.yml?
- Issue/PR raised on FlowFuse/helm to update ConfigMap Template
- Issue/PR raised on FlowFuse/CloudProject to update values for Staging/Production

Labels

Includes a DB migration? -> add the area:migration label

gayanSandamal · 2024-08-27T08:26:14Z

ui/src/widgets/ui-gauge/UIGauge.vue

        icon () {
-            return this.props.icon?.replace(/^mdi-/, '')


Replaced return this.props.icon?.replace(/^mdi-/, '') from return this.getProperty('icon') as material icon maker is not being used

as material icon maker is not being used

It is. Users can pass in mdi-<icon> or <icon> directly and we should support that

it currently seems to support both formats. Stripping the 'mdi-' prefix seems to have no effect on the outcome. Tested with only a couple of icons but proved the point

@joepavitt @cstns
To be more clearer this dynamic icon only supports "Half Gauge" and "3/4 Gauge" and the functionality is already implemented in UIGaugeDialog.vue which is a child component comes under the UIGauage.vue therefore I used icon () computed property to fetch dynamic icon changes

gayanSandamal · 2024-08-27T08:39:51Z

ui/src/widgets/ui-gauge/UIGauge.vue

@@ -1,8 +1,6 @@
 <template>
-    <ui-gauge-tile v-if="props.gtype === 'gauge-tile'" :id="id" :props="props" :value="value" />


replaced conditional gauge type from dynamic component except 3/4 and half as doesn't support for dynamic component

all gauge types seem to be reacting to dynamic prop changes. What do you mean?

I took all three "ui-gauge-battery", "ui-gauge-tank" and "ui-gauge-dial" into one dynamic component Vue inbuilt element just to reduce few lines of codes and to avoid v-else-if as component element handles them naturally but couldn't include ui-gauge-dial to that as it looses reactivity and didn't get rendered properly

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

gayanSandamal · 2024-08-27T08:55:21Z

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

+            return this.props.gstyle
+        },
+        updateOn () {
+            return `${this.segments} ${this.gaugeStyle} ${this.min} ${this.max}`


check for changes in segments, gauge styles, minimum values and maximum values and watching for changes in line 100

gayanSandamal · 2024-08-27T08:55:46Z

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

            this.resize()
            this.update(val)
+        },
+        updateOn () {
+            this.update(this.value)


watching for changes as https://github.com/FlowFuse/node-red-dashboard/pull/1238/files#r1732422011 and update the gauge ui

joepavitt · 2024-08-27T09:43:43Z

I wouldn't expect the gauge to reset on each dynamic property message being sent, I suspect this is because we're storing the data into the client-side vuex store on every message received, when in actual fact, we should only store if a msg.payload is received.

bartbutenaers · 2024-08-27T10:11:16Z

@joepavitt,
I do it indeed like you describe in my developments: only store messages when they have a payload. I think it is a bit confusing for ui developers because we store messages, while in fact we only want to store payloads. Because the value of the widgets are being send via the payloads.

joepavitt · 2024-08-27T12:25:31Z

You're not saving any of this data server-side, so a refresh completely clears any dynamic properties. Just realised this is also a problem in #1224 too - please fix both ASAP

Please see:

For examples

gayanSandamal · 2024-08-28T12:00:41Z

You're not saving any of this data server-side, so a refresh completely clears any dynamic properties. Just realised this is also a problem in #1224 too - please fix both ASAP

Please see:

https://github.com/FlowFuse/node-red-dashboard/pull/1227/files

https://github.com/FlowFuse/node-red-dashboard/pull/1016/files

For examples

I will look look into this

gayanSandamal · 2024-08-29T10:02:39Z

You're not saving any of this data server-side, so a refresh completely clears any dynamic properties. Just realised this is also a problem in #1224 too - please fix both ASAP

Please see:

https://github.com/FlowFuse/node-red-dashboard/pull/1227/files

https://github.com/FlowFuse/node-red-dashboard/pull/1016/files

For examples

@joepavitt I just pushed the fixes after doing some manual testings. You can review and merge

…imprvements

…able

joepavitt · 2024-08-30T08:44:23Z

Trying to change the payload, after setting segments, and sometimes just setting segments at all does seem to break the gauge.

A refresh fixes this, which suggests something in mounted/created runs regarding the rendering of the gauge that isn't run on a ui_update being received.

In actual fact, this also happens when sending a message with just msg.ui_update.title in too. Error logged:

gayanSandamal · 2024-08-30T08:46:08Z

Trying to change the payload, _after_ setting `segments`, and sometimes just setting `segments` at all does seem to break the gauge.
A refresh fixes this, which suggests something in mounted/created runs regarding the rendering of the gauge that isn't run on a ui_update being received.

In actual fact, this also happens when sending a message with just msg.ui_update.title in too. Error logged:

Thanks for catching that. It seems there might be something subtle going on with the segments handling and the update process. I’ll take a look and see if I can improve the behaviour to avoid these glitches.

Thanks for the heads-up!

…lesser than the existing once

gayanSandamal · 2024-08-30T13:55:46Z

Trying to change the payload, _after_ setting `segments`, and sometimes just setting `segments` at all does seem to break the gauge.
A refresh fixes this, which suggests something in mounted/created runs regarding the rendering of the gauge that isn't run on a ui_update being received.

In actual fact, this also happens when sending a message with just msg.ui_update.title in too. Error logged:

Hi Joe,

I wasn’t able to recreate the exact issue you mentioned, but I did find another related issue with segment rendering. When setting fewer segments than the existing ones, the colours don’t map correctly because the previous SVG path nodes aren’t being cleared. This might be contributing to the behaviour you observed.

The applied a fix is here 28953b9

and ready for review

cstns · 2024-09-02T10:46:00Z

ui/src/widgets/ui-gauge/UIGauge.vue

        icon () {
-            return this.props.icon?.replace(/^mdi-/, '')


it currently seems to support both formats. Stripping the 'mdi-' prefix seems to have no effect on the outcome. Tested with only a couple of icons but proved the point

cstns · 2024-09-02T13:22:07Z

ui/src/widgets/ui-gauge/UIGauge.vue

@@ -1,8 +1,6 @@
 <template>
-    <ui-gauge-tile v-if="props.gtype === 'gauge-tile'" :id="id" :props="props" :value="value" />


all gauge types seem to be reacting to dynamic prop changes. What do you mean?

cstns · 2024-09-02T13:23:18Z

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

+                    .data(segments)
+                    .enter()
+                    .append('path')
+            }


force adding a gauge without any segments throws an error in the console, check line 260

Checking this

@cstns This is fixed with d035a58

Steve-Mcl · 2024-09-03T11:49:08Z

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

+        <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 after the Gauge's value</dd>


is this mean to say "before" or "above? (it is the exact same text as the suffix has

Steve-Mcl · 2024-09-03T12:09:24Z

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

+                <li><code>Array&lt;{color: String, from: Number}&gt;</code></li>
+            </ul>
+        </dd>
+        <dt class="optional">gstyle <span class="property-type">see detail</span></dt>


should this be gtype?

And what is gstyle / where is that documented?

Yes, it should be gtype and documented gstyle

Steve-Mcl · 2024-09-03T12:17:49Z

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

+        <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 after the Gauge's value</dd>


Should this state "only applicable to for 3/4 and Half gauges"?

Yes, also "gstyle", "units" and "icon". Updated them as well

Steve-Mcl · 2024-09-03T12:18:10Z

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

+        <dt class="optional">prefix <span class="property-type">string</span></dt>
+        <dd>Change the text rendered after the Gauge's value</dd>
+        <dt class="optional">suffix <span class="property-type">string</span></dt>
+        <dd>Change the text rendered after the Gauge's value</dd>


Should this state "only applicable to for 3/4 and Half gauges"?

Yes, you're correct. I've corrected it in the helper documentation

Steve-Mcl · 2024-09-03T12:18:24Z

docs/nodes/widgets/ui-gauge.md

+        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.


Should this state "only applicable to for 3/4 and Half gauges"?

Yes, you're correct and also "Style", "Units" and "Icon".

I've updated them in the markdown

Steve-Mcl · 2024-09-03T12:18:30Z

docs/nodes/widgets/ui-gauge.md

+        description: Text to be added _before_ the value in the middle of the gauge.
+        dynamic: true
+    Suffix:
+        description: Text to be shown _after_ the value in the middle of the gauge.


Should this state "only applicable to for 3/4 and Half gauges"?

Yes, updated

Steve-Mcl · 2024-09-03T12:20:14Z

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

+            </ul>
+        </dd>
+        <dt class="optional">min <span class="property-type">number</span></dt>
+        <dd>Change the minimum value the gauge supports</dd>


does this need to mention "Not used by tile gauge"?

As I understood the range is not necessary for the "Tile Gauge" if so we need to conditionally render when only for the other gauge types in NR

Steve-Mcl · 2024-09-03T12:20:22Z

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

+        <dt class="optional">min <span class="property-type">number</span></dt>
+        <dd>Change the minimum value the gauge supports</dd>
+        <dt class="optional">max <span class="property-type">number</span></dt>
+        <dd>Change the maximum value the gauge supports</dd>


does this need to mention "Not used by tile gauge"?

As I mentioned above we may need to conditionally show the range except the "Tile Gauge" type it we mention it here

Steve-Mcl · 2024-09-03T13:07:46Z

demo flow for demonstrated issues:

in here

[{"id":"a774e60fc7557ac3","type":"inject","z":"f80624abfd69b02e","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"1","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"(\t    $minimum := 1;\t    $maximum := 10;\t    $round(($random() * ($maximum-$minimum)) + $minimum, 0)\t)","payloadType":"jsonata","x":1290,"y":160,"wires":[["31ecdd62ca8e9de5","f9d9c480108b9fd1"]]},{"id":"4f5fa3becff2aa28","type":"inject","z":"f80624abfd69b02e","name":"","props":[{"p":"ui_control.label","v":"fault","vt":"str"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"fault","x":1300,"y":200,"wires":[["f9d9c480108b9fd1"]]},{"id":"1ce7443d3fd4fd67","type":"inject","z":"f80624abfd69b02e","name":"","props":[{"p":"ui_control.label","v":"normal","vt":"str"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"normal","x":1300,"y":240,"wires":[["f9d9c480108b9fd1"]]},{"id":"72038b62470fe699","type":"inject","z":"f80624abfd69b02e","name":"0","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":true,"onceDelay":0.1,"topic":"","payload":"0","payloadType":"num","x":1350,"y":460,"wires":[["8d5573fdcfbc2e19"]]},{"id":"1cec13c1121203bc","type":"inject","z":"f80624abfd69b02e","name":"10","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":true,"onceDelay":0.1,"topic":"","payload":"10","payloadType":"num","x":1350,"y":520,"wires":[["809ba7af9b89d494"]]},{"id":"05c1574c38c73f94","type":"inject","z":"f80624abfd69b02e","name":"dynamic","props":[{"p":"ui_update.suffix","v":"s","vt":"str"},{"p":"ui_update.prefix","v":"p","vt":"str"},{"p":"ui_update.gtype","v":"gauge-34","vt":"str"},{"p":"ui_update.icon","v":"cog","vt":"str"},{"p":"ui_update.units","v":"t","vt":"str"},{"p":"ui_update.gstyle","v":"needle","vt":"str"},{"p":"ui_update.title","v":"null","vt":"json"},{"p":"ui_update.min","v":"1","vt":"num"},{"p":"ui_update.max","v":"7","vt":"num"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","x":1450,"y":80,"wires":[["f9d9c480108b9fd1","809ba7af9b89d494","8d5573fdcfbc2e19","79afada40d824509"]]},{"id":"60ec1ead3443dc96","type":"ui-gauge","z":"f80624abfd69b02e","name":"","group":"5c9407416fba1d1b","order":2,"width":"2","height":"2","gtype":"gauge-battery","gstyle":"needle","title":"b1 2x2","units":"units","icon":"","prefix":"","suffix":"","segments":[{"from":"0","color":"#ea5353"},{"from":"4","color":"#ffc800"},{"from":"7","color":"#5cd65c"}],"min":0,"max":"10","sizeThickness":16,"sizeGap":4,"sizeKeyThickness":8,"styleRounded":true,"styleGlow":false,"className":"","x":1640,"y":160,"wires":[]},{"id":"5bbfaa0c7db976d7","type":"ui-gauge","z":"f80624abfd69b02e","name":"","group":"5c9407416fba1d1b","order":25,"width":"6","height":"1","gtype":"gauge-battery","gstyle":"needle","title":"b2 6x1","units":"units","icon":"","prefix":"","suffix":"","segments":[{"from":"0","color":"#ea5353"},{"from":"4","color":"#ffc800"},{"from":"7","color":"#5cd65c"}],"min":0,"max":"10","sizeThickness":16,"sizeGap":4,"sizeKeyThickness":8,"styleRounded":true,"styleGlow":false,"className":"","x":1640,"y":200,"wires":[]},{"id":"ee833568fa02539e","type":"ui-gauge","z":"f80624abfd69b02e","name":"","group":"5c9407416fba1d1b","order":23,"width":"1","height":"5","gtype":"gauge-battery","gstyle":"needle","title":"b3 1x5","units":"units","icon":"","prefix":"","suffix":"","segments":[{"from":"0","color":"#ea5353"},{"from":"1","color":"#ffc800"},{"from":"2","color":"#5cd65c"}],"min":0,"max":"3","sizeThickness":16,"sizeGap":4,"sizeKeyThickness":8,"styleRounded":true,"styleGlow":false,"className":"","x":1640,"y":240,"wires":[]},{"id":"9b16accabd941cbf","type":"ui-gauge","z":"f80624abfd69b02e","name":"","group":"5c9407416fba1d1b","order":21,"width":"3","height":"2","gtype":"gauge-battery","gstyle":"needle","title":"b4 3x2","units":"units","icon":"","prefix":"","suffix":"","segments":[{"from":"0","color":"#f89696"},{"from":"1","color":"#333333"}],"min":0,"max":10,"sizeThickness":16,"sizeGap":4,"sizeKeyThickness":8,"styleRounded":true,"styleGlow":false,"className":"","x":1640,"y":280,"wires":[]},{"id":"7e3c4c44d22d6c97","type":"ui-gauge","z":"f80624abfd69b02e","name":"","group":"5c9407416fba1d1b","order":19,"width":"2","height":"3","gtype":"gauge-battery","gstyle":"needle","title":"b5 2x3","units":"units","icon":"","prefix":"","suffix":"","segments":[{"from":"0","color":"#373434"},{"from":"10","color":"#5cd65c"}],"min":0,"max":10,"sizeThickness":16,"sizeGap":4,"sizeKeyThickness":8,"styleRounded":true,"styleGlow":false,"className":"","x":1640,"y":320,"wires":[]},{"id":"627ee70aa40f9d2e","type":"ui-gauge","z":"f80624abfd69b02e","name":"","group":"5c9407416fba1d1b","order":16,"width":"1","height":"3","gtype":"gauge-battery","gstyle":"needle","title":"b6 1x3","units":"units","icon":"","prefix":"","suffix":"","segments":[{"from":"10","color":"#5cd65c"},{"from":"0","color":"#ea5353"}],"min":0,"max":10,"sizeThickness":16,"sizeGap":4,"sizeKeyThickness":8,"styleRounded":true,"styleGlow":false,"className":"","x":1640,"y":360,"wires":[]},{"id":"151e14bd6bd71851","type":"ui-gauge","z":"f80624abfd69b02e","name":"","group":"5c9407416fba1d1b","order":14,"width":"1","height":"2","gtype":"gauge-battery","gstyle":"needle","title":"b-mt 1x2","units":"units","icon":"","prefix":"","suffix":"","segments":[{"from":"0","color":"#ea5353"},{"from":"4","color":"#ffc800"},{"from":"7","color":"#5cd65c"}],"min":0,"max":"10","sizeThickness":16,"sizeGap":4,"sizeKeyThickness":8,"styleRounded":true,"styleGlow":false,"className":"","x":1680,"y":460,"wires":[]},{"id":"fb375419af970c02","type":"ui-gauge","z":"f80624abfd69b02e","name":"","group":"5c9407416fba1d1b","order":12,"width":"1","height":"2","gtype":"gauge-battery","gstyle":"needle","title":"b-full 1x2","units":"units","icon":"","prefix":"","suffix":"","segments":[{"from":"0","color":"#ea5353"},{"from":"4","color":"#ffc800"},{"from":"7","color":"#5cd65c"}],"min":0,"max":"10","sizeThickness":16,"sizeGap":4,"sizeKeyThickness":8,"styleRounded":true,"styleGlow":false,"className":"","x":1680,"y":520,"wires":[]},{"id":"1834642199bfefc5","type":"ui-gauge","z":"f80624abfd69b02e","name":"","group":"5c9407416fba1d1b","order":17,"width":"1","height":"3","gtype":"gauge-half","gstyle":"needle","title":"hg6 1x3","units":"units","icon":"","prefix":"","suffix":"","segments":[{"from":"0","color":"#5cd65c"},{"from":"4","color":"#ffc800"},{"from":"7","color":"#ea5353"}],"min":0,"max":10,"sizeThickness":16,"sizeGap":4,"sizeKeyThickness":8,"styleRounded":true,"styleGlow":false,"className":"","x":1567,"y":401,"wires":[]},{"id":"659e3a1d476b82d3","type":"ui-gauge","z":"f80624abfd69b02e","name":"","group":"5c9407416fba1d1b","order":26,"width":"2","height":"2","gtype":"gauge-tank","gstyle":"needle","title":"wl1 2x2","units":"units","icon":"","prefix":"","suffix":"","segments":[{"from":"0","color":"#5cd65c"},{"from":"4","color":"#ffc800"},{"from":"7","color":"#ea5353"}],"min":0,"max":10,"sizeThickness":16,"sizeGap":4,"sizeKeyThickness":8,"styleRounded":true,"styleGlow":false,"className":"","x":1860,"y":160,"wires":[]},{"id":"098d86debc681e97","type":"ui-gauge","z":"f80624abfd69b02e","name":"","group":"5c9407416fba1d1b","order":24,"width":"6","height":"1","gtype":"gauge-tank","gstyle":"needle","title":"wl2 6x1","units":"units","icon":"","prefix":"","suffix":"","segments":[{"from":"0","color":"#5cd65c"},{"from":"4","color":"#ffc800"},{"from":"7","color":"#ea5353"}],"min":0,"max":10,"sizeThickness":16,"sizeGap":4,"sizeKeyThickness":8,"styleRounded":true,"styleGlow":false,"className":"","x":1860,"y":200,"wires":[]},{"id":"c49b3ac8be882616","type":"ui-gauge","z":"f80624abfd69b02e","name":"","group":"5c9407416fba1d1b","order":22,"width":"1","height":"5","gtype":"gauge-tank","gstyle":"needle","title":"wl3 1x5","units":"units","icon":"","prefix":"","suffix":"","segments":[{"from":"0","color":"#5cd65c"},{"from":"1","color":"#ffc800"},{"from":"2","color":"#ea5353"}],"min":0,"max":"3","sizeThickness":16,"sizeGap":4,"sizeKeyThickness":8,"styleRounded":true,"styleGlow":false,"className":"","x":1860,"y":240,"wires":[]},{"id":"837e0e6e57c02735","type":"ui-gauge","z":"f80624abfd69b02e","name":"","group":"5c9407416fba1d1b","order":20,"width":"3","height":"2","gtype":"gauge-tank","gstyle":"needle","title":"wl4 3x2","units":"units","icon":"","prefix":"","suffix":"","segments":[{"from":"0","color":"#5cd65c"}],"min":0,"max":10,"sizeThickness":16,"sizeGap":4,"sizeKeyThickness":8,"styleRounded":true,"styleGlow":false,"className":"","x":1860,"y":280,"wires":[]},{"id":"701c3aaf70e55668","type":"ui-gauge","z":"f80624abfd69b02e","name":"","group":"5c9407416fba1d1b","order":18,"width":"2","height":"3","gtype":"gauge-tank","gstyle":"needle","title":"wl5 2x3","units":"units","icon":"","prefix":"","suffix":"","segments":[{"from":"0","color":"#050505"},{"from":"10","color":"#11ee2a"}],"min":0,"max":10,"sizeThickness":16,"sizeGap":4,"sizeKeyThickness":8,"styleRounded":true,"styleGlow":false,"className":"","x":1860,"y":320,"wires":[]},{"id":"494753f30d793737","type":"ui-gauge","z":"f80624abfd69b02e","name":"","group":"5c9407416fba1d1b","order":15,"width":"1","height":"3","gtype":"gauge-tank","gstyle":"needle","title":"wl6 1x3","units":"units","icon":"","prefix":"","suffix":"","segments":[{"from":"7","color":"#ea5353"},{"from":"4","color":"#ffc800"},{"from":"0","color":"#5cd65c"}],"min":0,"max":10,"sizeThickness":16,"sizeGap":4,"sizeKeyThickness":8,"styleRounded":true,"styleGlow":false,"className":"","x":1860,"y":360,"wires":[]},{"id":"94ad9c4dc58005a0","type":"ui-gauge","z":"f80624abfd69b02e","name":"","group":"5c9407416fba1d1b","order":13,"width":"1","height":"2","gtype":"gauge-tank","gstyle":"needle","title":"wl-mt 1x2","units":"units","icon":"","prefix":"","suffix":"","segments":[{"from":"0","color":"#5cd65c"},{"from":"4","color":"#ffc800"},{"from":"7","color":"#ea5353"}],"min":0,"max":10,"sizeThickness":16,"sizeGap":4,"sizeKeyThickness":8,"styleRounded":true,"styleGlow":false,"className":"","x":1860,"y":460,"wires":[]},{"id":"cc36259a77a521a2","type":"ui-gauge","z":"f80624abfd69b02e","name":"","group":"5c9407416fba1d1b","order":8,"width":"1","height":"2","gtype":"gauge-tank","gstyle":"needle","title":"wl-full 1x2","units":"units","icon":"","prefix":"","suffix":"","segments":[{"from":"0","color":"#5cd65c"},{"from":"4","color":"#ffc800"},{"from":"7","color":"#ea5353"}],"min":0,"max":10,"sizeThickness":16,"sizeGap":4,"sizeKeyThickness":8,"styleRounded":true,"styleGlow":false,"className":"","x":1860,"y":520,"wires":[]},{"id":"ceeb51344e07fd15","type":"ui-gauge","z":"f80624abfd69b02e","name":"","group":"5c9407416fba1d1b","order":9,"width":"1","height":"1","gtype":"gauge-tank","gstyle":"needle","title":"wl-full 1x1","units":"units","icon":"","prefix":"","suffix":"","segments":[{"from":"0","color":"#5cd65c"},{"from":"4","color":"#ffc800"},{"from":"7","color":"#ea5353"}],"min":0,"max":10,"sizeThickness":16,"sizeGap":4,"sizeKeyThickness":8,"styleRounded":true,"styleGlow":false,"className":"","x":1840,"y":580,"wires":[]},{"id":"2f2edbfec6f4a15e","type":"ui-gauge","z":"f80624abfd69b02e","name":"","group":"5c9407416fba1d1b","order":10,"width":"1","height":"1","gtype":"gauge-tank","gstyle":"needle","title":"wl-mt 1x1","units":"units","icon":"","prefix":"","suffix":"","segments":[{"from":"0","color":"#5cd65c"},{"from":"4","color":"#ffc800"},{"from":"7","color":"#ea5353"}],"min":0,"max":10,"sizeThickness":16,"sizeGap":4,"sizeKeyThickness":8,"styleRounded":true,"styleGlow":false,"className":"","x":1860,"y":500,"wires":[]},{"id":"7888499d196aad55","type":"ui-gauge","z":"f80624abfd69b02e","name":"","group":"5c9407416fba1d1b","order":11,"width":"1","height":"1","gtype":"gauge-tank","gstyle":"needle","title":"wl 1x1","units":"units","icon":"","prefix":"","suffix":"","segments":[{"from":"0","color":"#5cd65c"},{"from":"4","color":"#ffc800"},{"from":"7","color":"#ea5353"}],"min":0,"max":10,"sizeThickness":16,"sizeGap":4,"sizeKeyThickness":8,"styleRounded":true,"styleGlow":false,"className":"","x":1850,"y":400,"wires":[]},{"id":"31ecdd62ca8e9de5","type":"junction","z":"f80624abfd69b02e","x":1410,"y":160,"wires":[["79afada40d824509"]]},{"id":"f9d9c480108b9fd1","type":"junction","z":"f80624abfd69b02e","x":1410,"y":240,"wires":[["2dd53643df28b205","1834642199bfefc5"]]},{"id":"2dd53643df28b205","type":"junction","z":"f80624abfd69b02e","x":1490,"y":240,"wires":[["60ec1ead3443dc96","5bbfaa0c7db976d7","ee833568fa02539e","9b16accabd941cbf","7e3c4c44d22d6c97","627ee70aa40f9d2e"]]},{"id":"8d5573fdcfbc2e19","type":"junction","z":"f80624abfd69b02e","x":1480,"y":460,"wires":[["151e14bd6bd71851","94ad9c4dc58005a0","2f2edbfec6f4a15e"]]},{"id":"809ba7af9b89d494","type":"junction","z":"f80624abfd69b02e","x":1480,"y":520,"wires":[["fb375419af970c02","cc36259a77a521a2","ceeb51344e07fd15"]]},{"id":"79afada40d824509","type":"junction","z":"f80624abfd69b02e","x":1730,"y":240,"wires":[["659e3a1d476b82d3","098d86debc681e97","c49b3ac8be882616","837e0e6e57c02735","701c3aaf70e55668","494753f30d793737","7888499d196aad55"]]},{"id":"5c9407416fba1d1b","type":"ui-group","name":"PR-1123","page":"868aaffa6da2e1ce","width":"6","height":"1","order":1,"showTitle":true,"className":"","visible":"true","disabled":"false"},{"id":"868aaffa6da2e1ce","type":"ui-page","name":"PR-1123","ui":"22ea43815413e748","path":"/page13","icon":"home","layout":"grid","theme":"c2ff5ba1f92a0f0e","order":1,"className":"","visible":"true","disabled":"false"},{"id":"22ea43815413e748","type":"ui-base","name":"base","path":"/dashboard","includeClientData":true,"acceptsClientConfig":["ui-notification","ui-control"],"showPathInSidebar":false,"navigationStyle":"default","titleBarStyle":"default"},{"id":"c2ff5ba1f92a0f0e","type":"ui-theme","name":"Default","colors":{"surface":"#ffffff","primary":"#0094ce","bgPage":"#eeeeee","groupBg":"#ffffff","groupOutline":"#cccccc"},"sizes":{"pagePadding":"12px","groupGap":"12px","groupBorderRadius":"4px","widgetGap":"12px"}}]

Steve-Mcl · 2024-09-03T13:09:15Z

major issues to resolve:

incorrect gtype (docs)
missing gstyle (docs)
gauge updates stop working when msg.ui_update.xxx sent
gauges passing min/max and creating full circle (sometimes in reverse)

Steve-Mcl · 2024-09-03T13:11:40Z

also, lots of errors to check / fix please

Steve-Mcl · 2024-09-03T13:16:04Z

Lastly, unable to clear dynamic values

e.g.

I send ui_update.title = "fred" and the title updates. OK
Then when I send ui_update.title = null, the title does not revert to the "Label" set inside the node.

This may not be a "this PR issue". So please assess and fix only if related to the new dynamic properties. If the issue is across all nodes and widgets, lets just raise an issue.

EDIT:

Initially, sending null does indeed revert the title back to what the user set. However, after sending dynamic updates for other things and the values stop updating I have to refresh the page - thats when sending null for the title no longer reverts to the pre-set value in the node.

Steve-Mcl · 2024-09-03T13:54:47Z

Quick gif that demonstraties:

needle going over range
min/max limits swapping place
value updates getting stuck after sending ui-update.xxx

Quick gif demonstrating 1000s of errors after update:

…ment)

gayanSandamal · 2024-09-04T04:50:57Z

major issues to resolve:

incorrect gtype (docs)

missing gstyle (docs)

gauge updates stop working when msg.ui_update.xxx sent

gauges passing min/max and creating full circle (sometimes in reverse)

Fixed the above issues

gayanSandamal · 2024-09-04T04:51:26Z

Quick gif that demonstraties:

needle going over range

min/max limits swapping place

value updates getting stuck after sending ui-update.xxx

Quick gif demonstrating 1000s of errors after update:

this is fixed

gayanSandamal · 2024-09-04T04:52:33Z

also, lots of errors to check / fix please

this is fixed

gayanSandamal linked an issue Aug 26, 2024 that may be closed by this pull request

Dynamic Properties: UI Gauge #1180

Closed

gayanSandamal marked this pull request as draft August 26, 2024 17:24

gayanSandamal commented Aug 27, 2024

View reviewed changes

ui/src/widgets/ui-gauge/types/UIGaugeDial.vue Show resolved Hide resolved

gayanSandamal commented Aug 27, 2024

View reviewed changes

gayanSandamal marked this pull request as ready for review August 27, 2024 08:56

gayanSandamal requested a review from joepavitt August 27, 2024 08:56

gayanSandamal self-assigned this Aug 27, 2024

gayanSandamal added the bug Something isn't working label Aug 27, 2024

gayanSandamal changed the title ~~DRAFT: Dynamic props support for gauge~~ Dynamic props support for gauge Aug 27, 2024

joepavitt removed the bug Something isn't working label Aug 27, 2024

gayanSandamal mentioned this pull request Aug 28, 2024

UI Gauge data not storing #1242

Closed

joepavitt changed the title ~~Dynamic props support for gauge~~ UI Gauge - Dynamic Properties Support Aug 29, 2024

gayanSandamal added 7 commits August 29, 2024 16:01

Dynamic props support for gauge

4df26fa

Dynamic props support for gauge

9771ca7

Updated chart when style, segment, min and max changed & readability …

adf6be1

…imprvements

ui-gauge docs improvements

dffec96

3/4 and half gauge rendering issue fix

cc04849

tree shaking

68e21e7

Fixed server side data storing issue

7afa023

joepavitt force-pushed the 1180-dynamic-properties-ui-gauge branch from 800bf46 to 7afa023 Compare August 29, 2024 15:01

joepavitt added 2 commits August 29, 2024 16:28

Improve Gauge documentation

460b5a7

Ensure dynamic properties docs are reflective of those actually avail…

be99891

…able

Fixed: segment color mapping issue happens when the new segments are …

28953b9

…lesser than the existing once

gayanSandamal requested review from cstns and removed request for joepavitt August 30, 2024 14:03

cstns requested changes Sep 2, 2024

View reviewed changes

gayanSandamal requested a review from Steve-Mcl September 3, 2024 07:54

Optional chaining fix

d035a58

gayanSandamal requested a review from cstns September 3, 2024 11:11

cstns approved these changes Sep 3, 2024

View reviewed changes

gayanSandamal merged commit 3db5503 into main Sep 3, 2024
1 of 2 checks passed

gayanSandamal deleted the 1180-dynamic-properties-ui-gauge branch September 3, 2024 12:36

Steve-Mcl reviewed Sep 3, 2024

View reviewed changes

gayanSandamal added a commit that referenced this pull request Sep 4, 2024

Revert to the "Label" set inside the node when passed null #1238 (com…

31aadf7

…ment)

gayanSandamal mentioned this pull request Sep 4, 2024

Gauge - Responsiveness Improvements & Bug Fixes #1264

Merged

10 tasks

		@@ -1,8 +1,6 @@
		<template>
		<ui-gauge-tile v-if="props.gtype === 'gauge-tile'" :id="id" :props="props" :value="value" />

UI Gauge - Dynamic Properties Support #1238

UI Gauge - Dynamic Properties Support #1238

Conversation

gayanSandamal commented Aug 26, 2024 • edited Loading

Description

Related Issue(s)

Checklist

Labels

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

joepavitt commented Aug 27, 2024

bartbutenaers commented Aug 27, 2024

joepavitt commented Aug 27, 2024 • edited Loading

gayanSandamal commented Aug 28, 2024

gayanSandamal commented Aug 29, 2024

joepavitt commented Aug 30, 2024

gayanSandamal commented Aug 30, 2024

gayanSandamal commented Aug 30, 2024

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Steve-Mcl commented Sep 3, 2024

Steve-Mcl commented Sep 3, 2024

Steve-Mcl commented Sep 3, 2024 • edited Loading

Steve-Mcl commented Sep 3, 2024 • edited Loading

Steve-Mcl commented Sep 3, 2024

gayanSandamal commented Sep 4, 2024

gayanSandamal commented Sep 4, 2024

gayanSandamal commented Sep 4, 2024

gayanSandamal commented Aug 26, 2024 •

edited

Loading

joepavitt commented Aug 27, 2024 •

edited

Loading

Steve-Mcl commented Sep 3, 2024 •

edited

Loading

Steve-Mcl commented Sep 3, 2024 •

edited

Loading