Switch node as indicator

[RedTom]

Hi,

I use the switch node as indicator e.g. for door sensors.
I can use a custom icon and can also set the color of the icon.
However, it is possible to change the switch in the ui.
Maybe one can add a checkbox to the switch "indicator mode" and disable user actions ?

Perhaps Is there another solution ?

thanks
Thomas

[jbudd]

Irrelevant, it seems.

[RedTom]

Sorry forgot to mention that I am on dashboard-2,
so I could not import your example.

but I had a look at the button node in dashboard 2,
so I can set the icon and icon color with a message

var newMsg={"ui_update":{"icon":"","iconColor":""}}
newMsg.ui_update.icon="door-closed"
newMsg.ui_update.iconColor="green"
return newMsg;

the transient effect when clicked is acceptable,
however it needs to make a subflow to get one basic control.

another solution would be an ui-template node,

but to keep it simple, a switch node with "indicator mode" would be nice

[Colin]

@RedTom

Maybe one can add a checkbox to the switch "indicator mode" and disable user actions

There is an open issue to add the ability for the switch to 'show state of input' which would do what you want. This is available in D1 but has not yet been included in D2. If you added your desire for the issue it may bump it up the priority list. Add option to differentiate input/output state on ui-switch · Issue #210 · FlowFuse/node-red-dashboard · GitHub

[E1cid]

@RedTom

Perhaps Is there another solution ?

thanks

You could use css pointer-events to make the switches definable class unclickable.
e.g

[{"id":"d71ee7313178a722","type":"inject","z":"d1395164b4eec73e","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"true","payloadType":"bool","x":230,"y":3920,"wires":[["d0238ce012ec7ef3"]]},{"id":"d0238ce012ec7ef3","type":"ui-switch","z":"d1395164b4eec73e","name":"","label":"switch","group":"9d83cd8b3d5ee33c","order":1,"width":0,"height":0,"passthru":false,"topic":"topic","topicType":"msg","style":"","className":"my_switch_click","onvalue":"true","onvalueType":"bool","onicon":"","oncolor":"","offvalue":"false","offvalueType":"bool","officon":"","offcolor":"","x":270,"y":3960,"wires":[["053239c767aae44f"]]},{"id":"cb0115eed5a9529c","type":"inject","z":"d1395164b4eec73e","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"false","payloadType":"bool","x":210,"y":4000,"wires":[["d0238ce012ec7ef3"]]},{"id":"053239c767aae44f","type":"debug","z":"d1395164b4eec73e","name":"debug 2565","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":410,"y":3960,"wires":[]},{"id":"e593fc07ae591995","type":"ui-template","z":"d1395164b4eec73e","group":"","page":"c694d0ebe0d2b702","ui":"","name":"","order":0,"width":0,"height":0,"head":"","format":".my_switch_click {\n        pointer-events: none;\n    }","storeOutMessages":true,"passthru":true,"resendOnRefresh":true,"templateScope":"page:style","className":"","x":320,"y":3880,"wires":[[]]},{"id":"9d83cd8b3d5ee33c","type":"ui-group","name":"Group1","page":"c694d0ebe0d2b702","width":"6","height":"1","order":1,"showTitle":true,"className":"","visible":"true","disabled":"false"},{"id":"c694d0ebe0d2b702","type":"ui-page","name":"Page1","ui":"1805777f90e92057","path":"/page1","icon":"home","layout":"grid","theme":"a965ccfef139317a","order":2,"className":"","visible":"true","disabled":"false"},{"id":"1805777f90e92057","type":"ui-base","name":"dashboard","path":"/dashboard","includeClientData":true,"acceptsClientConfig":["ui-notification","ui-control"],"showPathInSidebar":false},{"id":"a965ccfef139317a","type":"ui-theme","name":"HN Theme","colors":{"surface":"#5c5c5c","primary":"#00fdff","bgPage":"#383838","groupBg":"#4f4f4f","groupOutline":"#858585"},"sizes":{"pagePadding":"12px","groupGap":"12px","groupBorderRadius":"4px","widgetGap":"12px"}}]

[RedTom]

Hi,

thanks to hotNipi,Colin,E1cid

.my_switch_class_iconleft_noclick .nrdb-switch {
    justify-content: flex-start;
    gap: 1rem; /*gap between label and icon*/
    pointer-events: none;
}
.my_switch_class_iconleft_noclick .nrdb-switch label {
    flex-grow:0;
}

@Colin

thanks for the information, maybe it's also possible to add the opportunity to left align the icon,
then it's a solution for an indicator for unexperienced users like me.
with the css style above , it's a solution, no need to bump up issue #210 in the priority list.

@E1cid
thanks, this works great

[joepavitt]

Will echo Coln's point, please do comment on the GH issue too as it helps us with prioritizing issues.

I like the terminology "indicator mode only", rather than "show state of input"

[dceejay]

But isn’t “only”. won’t it pass through as well ?

[Colin]

@joepavitt

I like the terminology "indicator mode only", rather than "show state of input"

I disagree, that is not the prime purpose of the option. It is for uses such as this

Clicking the switch does not change its icon, but it sends a message off to a device in the real world, which then sends its new state back to the switch input so the switch changes state. Thus the user can be confident that the device in the real world has actually changed state. I use this mode for all my switches that control external devices. Currently I have had to surround them all in some convoluted logic to simulate this operation.

[RedTom]

Hi,

The request to show the input state is then not only related to the switch node.
As an example is here my subflow to control my lamps.
Each lamp has a switch and two sliders for brightness and white-color.
They track the status of incoming state messages. This is because the lamps can also be controlled by real hardware switches.
The sliders have a delay (250ms) in front, otherwise you get some slider jumping around if you move the slider.
(slider is normally moving smooth to new setpoint).
I don't know if it's useful to show the input state, because you loose visual feedback in case you don't get a state feedback
message in short time.
I have added a supervision of the feedback message with a trigger node. As an example you get a timeout notification.

But this needs coding a subflow, for simple usage it maybe a good idea that the ui-controls track their state from the input
and not from the user action.