control visibility via device status

---

What is the default value of the display property of the DOM element you try to hide? After answering this question I could help you.

Please read a little bit how CSS works and try to understand the basics.

In my case it works on all smartphones and PCs.

I wish I understood what you mean with property of the Dom element .
But I’ll start reading…

You selected an element on the page that you want to hide. You right clicked and coped the selector.

This time, left click and chose “Computed” on the right hand side. Scroll to the display property and check the attribute set. This attribute has to be restored by the rule instead of initial. In the sample case its “block”

Ok, thanks. Now it works.
It was “block”, not “initial”.
I didn’t find the menu option “Computed” in Google Chrome but I did find it in the Internet Explorer.

Thanks for the support!

No problem, you’re welcome.

Maybe still a small question…
Is it possible to use a variabel in the argument?
Like:

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”

Where the number 10 is a variable?

That makes it easier to add lines before the lines that i want to hide and show later…

Thanks in advance

No, that doesn’t seem to work.

With css inject I realised the following for one window contact:

This way the contact is shown when its open or the battery is low.
Also when pimatic starts the variable $cssstart is set to 1 so all the contacts are shown as they have to when Pimatic starts.

This way I only see contacts that are relevant.

The downside is that I have 20 contactsensors so I need 60 rules to make. And now hoping that I don’t have to insert lines so I have to change all 60 rules.

So a better solution would be welcome and if not maybe this is an idea for others…

The best solution would be, that every device has its ID as identifier in the DOM. Then these awful selectors aren’t necessary any longer.
I already asked @mwittig to add this in the next pimatic release.

Hi,

Now we are a few versions further, is there anything to make this easyer in the latest versions?

Thanks…

@lschip said in control visibility via device status:

Now we are a few versions further, is there anything to make this easyer in the latest versions?

Yes, indeed. The <li> DOM node for a device view now has the id attribute set to the device id. So, the following should work for a device with device id “bridge-light”:

when bla
then set css "display" of "#bridge-light" to "none"

EDIT: There is a caveat, however. If the device is shown on multiple pages the view is only changed on the first page! The reason is that DOM ids are considered to be unique, and thus, #id only selects the first match. I will make sure the page-id will be added to one of the superior <div> nodes. This way it will be possible to hide an element on a given page, e.g. set css "display" of "#page2 #bridge-light" to "none"

Thanks, this is realy nice…
From what version does this work?

I am on 9.48 and there it seems not to work

@lschip The feature had been releases with pimatic-mobile-frontend@0.9.13 (April 2018)! Let me give it a try with css-inject as I have only tried this on the browser console

EDIT: Works for me! At least it works for me for items which are only shown on a single page. Please note you need create a CssInjectDevice and add it to one of the pages.

Hi, do you need css-inject 0.1.2 for this?
I have css-inject 0.1.1 and it doesn’t work.

No, there are no new features in 0.1.2 only some minor cosmetical fixes.

Mmmm, it works partly for me…

On the first page I have a device with an id “KlimaarDiv”. It is a VariablesDevice.
The rule set css “display” of “#KlimaarDiv” to “none” works!

I also have a device (on the same page) with an id “Voordeur”. It is a HomeDuinoContactSensor.
The rule set css “display” of “#Voordeur” to “none” does not work.

But the terrible rule set css “display” of “#item-lists > div > div > div:nth-child(1) > div > ul > li:nth-child(8)” to “none” does work for the device “Voordeur”.

What do I do wrong?

Do you have the Voordeur device on multiple pages? It could also be, that this custom device doesn’t add the ID to the frontend elements. You need to check with your browsers development tools / inspector.

Voordeur is only on one page.
The inspector shows:

Please show me the DOM inspector with this element selected like here:

You mean this?