How to display a switch with 3 states in Habpanel (ON/OFF/ not available)

Apps & Services HABPanel
1

Hi,

I have some Switches like the Sonoff S20 running with MQTT (Pubsubclient).
The switch is sending its online-status via the topic /SONOFF01/STATE as ON or OFF and its relay state as /SONOFF01/RELSTATE.
I can switch them via Habpanel ON or OFF, but the status stays the same when I unplug them.
I also can switch them, even if they are offline, but I don’t see that on the panel and still think that the switch is reacting.

How can I solve this? I woul like to see the switch green for ON, red for OFF as it does today, and maybe gray for offline. Any Ideas are appreciated.

Holger

2

You need a third item wich you display instead of your switch and then just change the visibility.

Nice thing is you can use Dead_Switch for all Switches on the sitemap and dont need it multiple times.

I would prefer a way to set the toogle button to be unresponsive and grayed out. But for that we would need some CSS.

This is the fastest solution and works out off the box.

Contact Dead_Switch "Device not reachable"
Switch  ControlSwitch 
Switch  StateSwitch

Frame {
    Text   item=Dead_Switch   visibility=[ StateSwitch!=ON ] labelcolor=[ "red"] icon="Switch" 
    Switch item=ControlSwitch visibility=[ StateSwitch==ON ]
}
3

Well this may be a solution for the sitemap.
But I was looking for a solution using Habpanel.
Has anyone a proposal how to achieve this?

4

Sorry my fault.

Sound like a job for CSS mabe this thread can help a little.

A setup like followin:

Switch SwitchingItem
Contact StateItem_status
Switch StatusItem_state

But you would still need a rule which starts a timer when SwitchingItem gets an command and waits maybe 0,5 seconds if you receive a SteteItem change do nothing, if not set StatusItem to off.

Then use teh proposed sheme the you can shange the UI of the button with css.

Edit: changed the broken link.
Maybe this thread can give you more insight in the css.
I never did CSS on habpanel. I only use basic UI for now.

5

This logic can be done with a MQTT lastwill message:


Lastwill topic is as example: /SWITCHXX/STATE and the Lastwill message is OFF.
When the device connects to MQTT it send /SWITCHXX/STATE/ON and thats it.

But now I need help on the CSS stuff, this is new for me.