Dashboard 2 (flowfuse) dynamic button

Dashboard
,
1

Hi all,
coming from dashboard 1 I wanted to try out jumping on 2. I am currently failing at simple dynamic button backgrounds. I use buttons to control state of several devices. All buttons toggle power by triggering mqtt messages. according to the power states "ON" and "OFF" the button should indicate with green or red background. Also the icon changes. On dashboard 1 I simply sent a background style to the button coming from a switch node. In dashboard 2 it does not work. The class I send to the new button is set in the wrapping div of the button not to the button itself. This way (at least how I see it in the dev tools) the button classes override my own css class settings in terms of background-color. See below my example with the class dynamic-background-button-active:

<div id="nrdb-ui-widget-48ac968843b6271c" class="nrdb-ui-widget nrdb-ui-button dynamic-background-button-active" style="display: grid; grid-template-rows: repeat(1, minmax(45px, auto)); grid-row-end: span 1; grid-column-end: span 3;">
<button type="button" class="v-btn v-btn--block v-theme--nrdb v-btn--density-default v-btn--size-default v-btn--variant-flat" style="grid-row-end: span 1;">
<span class="v-btn__overlay"></span>
<span class="v-btn__underlay"></span>
<span class="v-btn__prepend"><i class="mdi-radiator mdi v-icon notranslate v-theme--nrdb v-icon--size-default" aria-hidden="true"></i></span>
<span class="v-btn__content" data-no-activator="">Heizung</span><!----><!----></button></div>

Here is an example flow

[{"id":"e9877d25696d97a4","type":"ui-template","z":"55f288a0a67d825c","group":"","page":"5294d297c3ed545d","ui":"","name":"dynamic button backgrounds","order":0,"width":0,"height":0,"head":"","format":".dynamic-background-button-active {\n    background-color: greenyellow;\n}\n.dynamic-background-button-inactive {\n    background-color: red;\n}","storeOutMessages":true,"passthru":true,"resendOnRefresh":true,"templateScope":"page:style","className":"","x":990,"y":620,"wires":[[]]},{"id":"e323f6f36d499b4e","type":"inject","z":"55f288a0a67d825c","name":"class inject active","props":[{"p":"class","v":"dynamic-background-button-active","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","x":880,"y":700,"wires":[["8b4cbb03a6e415a1"]]},{"id":"8b4cbb03a6e415a1","type":"ui-button","z":"55f288a0a67d825c","group":"4ea89f51a16a52ad","name":"","label":"Heizung (sandbox flow)","order":0,"width":"3","height":"1","emulateClick":false,"tooltip":"","color":"","bgcolor":"","className":"","icon":"radiator","iconPosition":"left","payload":"TOGGLE","payloadType":"str","topic":"topic","topicType":"msg","x":1090,"y":700,"wires":[["88f6a1738b86ba81"]]},{"id":"88f6a1738b86ba81","type":"mqtt out","z":"55f288a0a67d825c","name":"Heater","topic":"cmnd/office_mirco_pow_heater/POWER","qos":"","retain":"","respTopic":"","contentType":"","userProps":"","correl":"","expiry":"","broker":"c689a17e.a806a8","x":1270,"y":700,"wires":[]},{"id":"c27a5e6d0f72de6d","type":"inject","z":"55f288a0a67d825c","name":"class inject inactive","props":[{"p":"class","v":"dynamic-background-button-inactive","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","x":870,"y":740,"wires":[["8b4cbb03a6e415a1"]]},{"id":"5294d297c3ed545d","type":"ui-page","name":"Office Mirco","ui":"7bdb78d880f39b77","path":"/officemirco","icon":"home","layout":"notebook","theme":"129e99574def90a3","order":-1,"className":"","visible":"true","disabled":"false"},{"id":"4ea89f51a16a52ad","type":"ui-group","name":"Control","page":"5294d297c3ed545d","width":"9","height":"1","order":-1,"showTitle":true,"className":"","visible":"true","disabled":"false"},{"id":"c689a17e.a806a8","type":"mqtt-broker","broker":"localhost","port":"1883","clientid":"","usetls":false,"verifyservercert":true,"compatmode":true,"keepalive":"15","cleansession":true,"birthTopic":"","birthQos":"0","birthRetain":null,"birthPayload":"","willTopic":"","willQos":"0","willRetain":null,"willPayload":""},{"id":"7bdb78d880f39b77","type":"ui-base","name":"My Dashboard","path":"/dashboard","includeClientData":true,"acceptsClientConfig":["ui-notification","ui-control"],"showPathInSidebar":false,"navigationStyle":"default"},{"id":"129e99574def90a3","type":"ui-theme","name":"Another Theme","colors":{"surface":"#000000","primary":"#ffd500","bgPage":"#a1a1a1","groupBg":"#b3b3b3","groupOutline":"#ffffff"},"sizes":{"pagePadding":"9px","groupGap":"12px","groupBorderRadius":"9px","widgetGap":"6px"}}]

Could not find anything in the docs when using ootb buttons, any help appreciated :slight_smile:

2

Could you post a simple flow showing the problem please? A couple of inject nodes and the button.

3

thank you Colin for looking at this. I edited my post so there is a flow included now.

4

Do you have anywhere that you've defined the CSS-behaviour for dynamic-background-button-inactive? I can see the class being injected, but no CSS-definition that specific what styling should be applied?

This can be done in a ui-template node with a type of CSS (Single Page) or CSS (All Pages). Your class definition can then access the relevant nested thing to override:

.dynamic-background-button-inactive .v-btn {
    background-color: green;
}
5

ja, sry, that is pretty obvious, so I did not put the template in the flow. There is of course such a definition, I modified the flow above and I see from your example that I was missing the .v-btn in my class definition. Added this and it works well. Thank you :slight_smile:

1 Like
6

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