[Announcement] - Dashboard 2.24.1, 2

Some hopefully useful fixes for Dashboard

2.24.1: Maintenance Release

Fixes

  • Fix dropdown single pick search.
  • Changes to help optimise chart updates and reloads.
  • Fix ui_text so null msg doesn't blank text on enable and disable.
  • Add info about Icon usage to README.
  • Let button icon be settable by {{property}} .

The fix to optimise charts should help loading speed and shifting speed for charts - but it is NOT a cure - reports seem to say is 20-25% better/faster - but will still blow memory if you send too much or too fast.

I've also fixed the button so you can set the icon by using a msg property so you can now set the text, icon, colour, and background colour all from message properties - hopefully that will make dynamic buttons easier. Note however that iconify icons won't update dynamically for some reason - no doubt due to some cleverness/caching within their code.

Don't forget to flush you local browser cache after updating.

2.24.2: Maintenance Release

Fixes

  • Fix to swap switch icons to allow iconify icons to work. PR#597
  • Tweak dropdown CSS to always try to show select button.
  • Add node.type class to template so 3rd party nodes can tweak their md-card.
8 Likes

The most problematic I see is the ui_switch node.
I have sort of partial fix for that. It works for regular usage with no problems.
The partial I'd call it cos it does not let change iconify icons via msg.ui_control properly. It works if you change icons to be to fa- icons and then to different iconify icons, but you can not change them from one set of iconify icons to another set of iconify icons.

The fix itself is simple as that:
for src > components > ui-component > templates > switch.html
declare on and off icons separately and use ng-hide according to switch state

    <ui-icon icon="{{me.item.onicon}}"
        ng-style="{color: me.item.oncolor}"
        ng-class="{'center' : !me.item.label, 'ng-hide': !me.item.value}"
        ng-if="me.item.oncolor && me.item.onicon && me.item.offcolor && me.item.officon"
        style="z-index:1">
    </ui-icon>
    <ui-icon icon="{{me.item.officon}}"
        ng-style="{color:me.item.offcolor}"
        ng-class="{'center' : !me.item.label, 'ng-hide': me.item.value}"
        ng-if="me.item.oncolor && me.item.onicon && me.item.offcolor && me.item.officon"
        style="z-index:1">
    </ui-icon>

Test flow

[{"id":"2cb26f8f.16a5c","type":"ui_switch","z":"f1c3712a.51632","name":"","label":"switch default","tooltip":"","group":"61e6d4c4.e7619c","order":0,"width":"3","height":"1","passthru":true,"decouple":"false","topic":"","style":"","onvalue":"true","onvalueType":"bool","onicon":"","oncolor":"","offvalue":"false","offvalueType":"bool","officon":"","offcolor":"","x":700,"y":160,"wires":[[]]},{"id":"45d3918e.d6c64","type":"ui_switch","z":"f1c3712a.51632","name":"","label":"icoify icons","tooltip":"","group":"61e6d4c4.e7619c","order":8,"width":"3","height":"1","passthru":true,"decouple":"false","topic":"","style":"","onvalue":"true","onvalueType":"bool","onicon":"iconify-bi:door-open","oncolor":"red","offvalue":"false","offvalueType":"bool","officon":"iconify-bi:door-closed","offcolor":"green","x":690,"y":240,"wires":[[]]},{"id":"2922c891.a0b5a8","type":"ui_template","z":"f1c3712a.51632","group":"61e6d4c4.e7619c","name":"","order":2,"width":0,"height":0,"format":"<script src=\"https://code.iconify.design/1/1.0.7/iconify.min.js\"></script>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"global","x":680,"y":100,"wires":[[]]},{"id":"4889cbc1.929904","type":"ui_switch","z":"f1c3712a.51632","name":"","label":"fa icons","tooltip":"","group":"61e6d4c4.e7619c","order":8,"width":"3","height":"1","passthru":true,"decouple":"false","topic":"","style":"","onvalue":"true","onvalueType":"bool","onicon":"fa-fire ","oncolor":"red","offvalue":"false","offvalueType":"bool","officon":"fa-home","offcolor":"green","x":680,"y":340,"wires":[[]]},{"id":"38d6bfce.35387","type":"change","z":"f1c3712a.51632","name":"","rules":[{"t":"set","p":"ui_control","pt":"msg","to":"{\"onicon\":\"iconify-bi:door-open\",\"officon\":\"iconify-bi:door-closed\",\"oncolor\":\"#FFAAFF\",\"offcolor\":\"#AAFFAA\"}","tot":"json"}],"action":"","property":"","from":"","to":"","reg":false,"x":450,"y":340,"wires":[["4889cbc1.929904","45d3918e.d6c64","cca8f049.483c7"]]},{"id":"5becb54e.b18c0c","type":"ui_button","z":"f1c3712a.51632","name":"","group":"61e6d4c4.e7619c","order":4,"width":0,"height":0,"passthru":false,"label":"changet to iconify bi:doors","tooltip":"","color":"","bgcolor":"","icon":"","payload":"","payloadType":"str","topic":"","x":210,"y":340,"wires":[["38d6bfce.35387"]]},{"id":"c22b7aab.f59f68","type":"change","z":"f1c3712a.51632","name":"","rules":[{"t":"set","p":"ui_control","pt":"msg","to":"{\"onicon\":\"fa-male\",\"officon\":\"fa-female\",\"oncolor\":\"#FFAAFF\",\"offcolor\":\"#AAFFAA\"}","tot":"json"}],"action":"","property":"","from":"","to":"","reg":false,"x":450,"y":240,"wires":[["45d3918e.d6c64","4889cbc1.929904","cca8f049.483c7"]]},{"id":"dcd56a7b.59ce58","type":"ui_button","z":"f1c3712a.51632","name":"","group":"61e6d4c4.e7619c","order":4,"width":0,"height":0,"passthru":false,"label":"change to fa humans","tooltip":"","color":"","bgcolor":"","icon":"","payload":"","payloadType":"str","topic":"","x":240,"y":240,"wires":[["c22b7aab.f59f68"]]},{"id":"cca8f049.483c7","type":"ui_switch","z":"f1c3712a.51632","name":"","label":"iconify icons","tooltip":"","group":"61e6d4c4.e7619c","order":8,"width":"3","height":"1","passthru":true,"decouple":"false","topic":"","style":"","onvalue":"true","onvalueType":"bool","onicon":"iconify-bi:door-open","oncolor":"red","offvalue":"false","offvalueType":"bool","officon":"iconify-bi:door-closed","offcolor":"green","x":710,"y":400,"wires":[[]]},{"id":"c4c4a898.5b1048","type":"change","z":"f1c3712a.51632","name":"","rules":[{"t":"set","p":"ui_control","pt":"msg","to":"{\"onicon\":\"iconify-ic:baseline-alarm\",\"officon\":\"iconify-ic:baseline-alarm-off\",\"oncolor\":\"#FFAAFF\",\"offcolor\":\"#AAFFAA\"}","tot":"json"}],"action":"","property":"","from":"","to":"","reg":false,"x":470,"y":400,"wires":[["cca8f049.483c7","4889cbc1.929904","45d3918e.d6c64"]]},{"id":"4fd26490.2c9e4c","type":"ui_button","z":"f1c3712a.51632","name":"","group":"61e6d4c4.e7619c","order":4,"width":0,"height":0,"passthru":false,"label":"change icoify alarms","tooltip":"","color":"","bgcolor":"","icon":"","payload":"","payloadType":"str","topic":"","x":220,"y":400,"wires":[["c4c4a898.5b1048"]]},{"id":"61e6d4c4.e7619c","type":"ui_group","name":"Default","tab":"d1f9fcd9.d4fbc","order":1,"disp":true,"width":"6","collapse":false},{"id":"d1f9fcd9.d4fbc","type":"ui_tab","name":"Home","icon":"dashboard","disabled":false,"hidden":false}]

Edit:
The issue is reported also. Didn't notice that before ...

Indeed - hmm - yes for switch that is indeed a way to fix it - happy to take a PR to that effect as both icons are "pre-defined" as separate entities... won't work with button as there is only one icon...

PR done :slight_smile:

1 Like

Thanks for the update! The speed improvement of chart updates and reloads is great for us :heart_eyes:

2.24.2: Maintenance Release

Fixes

  • Fix to swap switch icons to allow iconify icons to work. PR#597
  • Tweak dropdown CSS to always try to show select button.
  • Add node.type class to template so 3rd party nodes can tweak their md-card.

Thank you. Is it possible for you to provide a link to the topic that was behind the last bullet so those not in the know can discover the significance of the improvement ? ******************

Sorry too many windows tabs and not enough sleep, give some a laugh though !

All this does is add a CSS class to the md-card that wraps the ui-template that every 3rd party ui widget uses... eg the card for ui_table now has a class nr-dashboard-ui_table - So now inside the node the author can target that outer wrapper with tag. Eg - by default the template card has padding: 3px 6px; so there is a small border such that any text added doesn't ram up against the sides. Using that css target it can be removed so the widget has all the space. It won't be necessary (or make sense) for all widgets - but for some it may just make them line up more nicely etc.

Thank you very much for taking the time to explain. I will try a few random things to try and understand a bit more about what it lets me do.

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.