New plugin [pimatic-css-inject]

---

@saxnpaule
That is amazing!!! I search for that about 1 year.

Well, I justed saw that the changes are not persistant

Of course, after a page reload the styles are gone. I think I need to make up my mind for a better solution.

I have an idea, but don’t know whether it will work.

@saxnpaule said in New plugin [pimatic-css-inject]:

One of the four rules

Ok, I understand “background color” and “red” but where I became the other variables???

Open Chrome, press F12, click the small arrow on the most lefthand top corner of the developer console and click the GUI element you want to change.
Then rightclick the corresponding DOM element (the blue selected line in my case) and copy the selector. Thats it.

Please keep in mind, that this is no good selector. When you change the order of your GUI elements, you change wrong elements with this rule.
The possible selector depends on the used plugin. If other plugins provide a unique identifier like the device id in the dom, then the selector would only be “#device-id”. As far as I remember, all my plugins with frontend components support this already.

I found a persistent solution that works in any cases (page reload) and also solves the 2 second problem on multiple rules that are triggered at the same time.

But because the DOM structure changes on pimatic page change, selectors like the one in the screenshot won’t work reliable.

version 0.0.2 released 2018-03-01

• provided persistent solution

@saxnpaule said in New plugin [pimatic-css-inject]:

But because the DOM structure changes on pimatic page change, selectors like the one in the screenshot won’t work reliable.

You mean my wish?

Yes, unfortunately. It could be, that a better selector could be found.
The improvement for pimatic to add the device id to every element is already known by @mwittig

version 0.1.0 released 2018-03-02

• inject changes to global css to be independent from DOM changes
• use plain javascript

@V1per Now you should be able to use these ugly selectors and get the wanted result.

@saxnpaule said in New plugin [pimatic-css-inject]:

@V1per Now you should be able to use these ugly selectors and get the wanted result.

That sounds good, I will test it this weekend. I hope you don’t write the whole night on the code.

No, just research and the change of 10 lines of code.

Hey @SaxnPaule,

I released a customcss plugin (pimatic-customcss) a year ago and have some background informations about the css handling in pimatic from that.

If you need some infos or help don’t hesitate to write me a message.

Regards

fbeek

Thanks for your offer, I’ll come back if I have specific questions.

Hi, how can I remove the slider for color change from the display?

Open Chrome, press F12, click the small arrow on the most lefthand top corner of the developer console and click the GUI element you want to change.
Then rightclick the corresponding DOM element (the blue selected line in my case) and copy the selector. Thats it.

Now create a rule:

when pimatic is starting
then set css "visibility" of "#beleuchtung-tv > div > div.light-brightness-container > div" to "hidden"

The middle part needs to be replaced by your selector.

After a restart of pimatic the slider is hidden.
You could also define a button and a corresponding rule for hiding the slider, then you don’t need to restart pimatic for displaying it again.

Now I’m getting desperate!
I installed the cssinject and did everything exactly as in the manual!
F12, the selector copies everything into the new rule and then restarts everything!
Now Pimatic seems to be unavailable, I tried to get over the IP in Pimatic, but it doesn’t work anymore!
I already tried everything, restart Raspberry, restart the router but nothing works anymore…

Please connect via SSH to your RaspberryPi and post the last lines of the pimatic-daemon.log file from ~/pimatic-app/

Ssh is currently not possible but after some restarts I was able to reconnect!
However, the Sloder is still there and if you click on the slider now when the dummy is off, the light goes on 100%?

Please provide a screenshot of the DOM (chrome developer console) and select the corresponding line like in my screenshot.
Please also provide a screenshot of the rule.

For testing purposes add a Dummy Button and modify the rule till it works.

when dummy-button is turned off
then set css "visibility" of "#beleuchtung-tv > div > div.light-brightness-container > div" to "hidden"

and

when dummy-button is turned on
then set css "visibility" of "#beleuchtung-tv > div > div.light-brightness-container > div" to "visible"