New plugin [pimatic-css-inject]

---

Inspired by this feature request: https://forum.pimatic.org/topic/236/changing-the-colour-of-values-based-on-a-set-of-rules
I started to write a plugin but need your help @developer

The “backend” is already finished, but at the moment I have no idea how to solve the frontend part.

You could define a rule like:

if bla
then set css "color" of "body" to "#FF00FF"

color - could be any CSS attribute
body - needs to be a valid CSS selector
FF00FF - a matching value for the attribute

The three variables were resolved by the action handler, but how should I change the CSS?

There needs to be something in the css-inject-page.coffee but no idea yet.

Setting the CSS could be done with

document.querySelector("{selector}").style.{attribute} = "{value}";

Plugin could be found here:
https://github.com/saxn-paule/pimatic-css-inject

Sample:

Yehaa, I got it. First version is published to npm.
You need to define one CssInjectDevice and put it to one page. Doesn’t matter which page.

Solution is not very good because it works with a global variable and could only handle one change every 2 seconds.

Feedback welcome.

@saxnpaule Very nice Wouldn’t it be possible to capture a page reload to avoid the triggering the update every two seconds?

The update isn’t triggered multiple times. But the timer only checks the global variable every 2nd second.
When the global variable changes, triggered by a rule, the style is applied to the frontend.

If there trigger more than one rule during these two seconds, the last one will win

Is this possible with your plugin?

Yes, that should be possible. You need to define two rules per contact. One for each state. Or you combine the action with already existing rules for opening/closing your doors.

One of the four rules

@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