search

leon-vd / freeboard-widget-rag

This is a widget plugin for http://freeboard.io that display a simple RAG status
MIT License
11 stars 5 forks source link

Request for throbbing light #1

Closed cyrus007 closed 9 years ago

cyrus007 commented 9 years ago

Would you be able to add attributes to the colors to indicate dim, throbbing or full light ? This will be helpful to indicate status conditions in home automation scenarios. Thanks.

leon-vd commented 9 years ago

Can you provide a mockup of what you mean? Don't quite understand what you're asking :)

cyrus007 commented 9 years ago

Did not find an exact one on the web but this (http://jsfiddle.net/epTnw/2/) is close. Basically it goes through light to dark shades of the single color, back and forth, whether it be red, amber or green to simulate the red alarm on a electrical panel. I will update with links if I find one.

leon-vd commented 9 years ago

I've created a fork with this functionality. Have a look and see if it suits. I haven't updated the Readme, but set the 'indicator_type' value to either 'dim' or 'flash' to make it Dim or Flash. If you want it normal, keep it blank or push any value into it. Getting the keyframes into CSS was a bit hacky through JS, which I'm not totally happy about, but see if it fits your needs anyway.

https://github.com/daleroy1/freeboard-widget-rag/tree/flashing

cyrus007 commented 9 years ago

I modified it a little bit and it looks better ... '.green-flash', "animation: green-flash 500ms infinite alternate;" @ http://development.ssboard.divshot.io/index.html#source=dashboard.json Ultimately I will need to create my own widget / use jsEditor for elements and styling to my liking and this can give me inspiration.

leon-vd commented 9 years ago

That looks a lot better, I'll update the fork. I might change it to use http://jquerykeyframes.github.io/jQuery.Keyframes/ for generating the key frames and merge it with the master. Happy for me to close this?

leon-vd commented 9 years ago

I've modified the code to use the jquery.keyframe plugin, as it makes it a bit cleaner.