control visibility via device status

---

I would like to set the visibility of devices on the dashboard depending on a device status.
E.g. Door/window sensor:
Window=closed=unvisible on dashboard
Window=open=visible on dashboard

This can be hacked. Do you have mqtt setup?

No.
I need more details

It’s pretty simple actually:

The MQTT plugin has a rule provider which allows sending a message (“show” or “hide”) on a topic when the window is opened or closed.

We can right a very small script (less than two dozen lines) that uses an mqtt client to consume the message, and make an api call to either add or remove the device to a page.

If you want to do something like that, you’re going to need to install an mqtt server (i use mosquitto), the MQTT plugin, nvm, and pm2.. I don’t mind writing the client, as it’s pretty straightforward.

BTW, you’ll find that using this pattern, you can do almost anything with not just pimatic, but a whole host of other platforms.

EDIT I wrote the above with out checking it, and after I hit submit, I wasn’t 100% sure (maybe 90%) that the front-end would auto update after making the api request. I just tested it quickly, and good news, it does dynamically update.

I like the idea but it seems to be a lot of work.
I would prefer if it would be a core feature of pimatic

@dk00000 i would be more than mildly upset if the devs spent any significant amount of time on it. they have far bigger things to worry about.

You could achieve this requirement with help of the css-inject plugin.
https://forum.pimatic.org/topic/4183/new-plugin-pimatic-css-inject

@mwittig Vote4Close

I think it would be nice feature.

But I don’t understand how to realise that with either mqtt or css-inject-plugin.

I agree it would be a nice core feature. So then I don’t have to show all my 19 contactsensors but only when its relevant (when they are open)…

use css inject plugin and define a rule like:

when bla
then set css "display" of "your css selector" to "none"

then your device is hidden in the UI.

To show it again:

when blubb
then set css "display" of "your css selector" to "initial"

EDIT: fixed typo

I have tried to play with this but with no succes.
It was possible to hide the devicename but that wasn’t usefull.
It would be nice if I can hide the complete line of a device so the line that comes after the hidden line will be right under the previous line. Like the hidden line doesn’t exist at all.
Is this possible with the css-inject plugin?

Thanks in advance

Yes of course. You can hide everything you want.

Open Chrome, press F12 to open Dev Console, select your device with the small arrow on the top left corner, right click the element in the DOM and copy the selector. Thats your css selector.

There are much better and more efficient ways, but this is the easiest to describe.

Before:

After:

Ok, thanks, now I understand that I have to use the arrow to select the part to hide.
Then I copied the selector, in my case: #item-lists > div > div > div:nth-child(1) > div > ul > li:nth-child(10)
I can see the rule to be executed but nothing happens in the gui…

Show me your rule.

Thats my:

When Lamp Voordeur is turned on then set css “visibility” of “#item-lists > div > div > div:nth-child(1) > div > ul > li:nth-child(10)” to “hidden”

Did you turn your lamp off and on again and are you sure the rule triggers? Visibility hidden doesn’t remove the device space. It only sets opacity to 100%. Better use display none in this case.

Yes I turned the lamp on and off. Then I see the rule is executed but I see no effect.
And now I changed “hidden” to “none” but still no effect.

change also visibility to display, as none is no valid attribute for visibility