For my Freeboard based dashboard for my home automation system (that’s a thing i will talk about in another post 🙂 ) i was looking for a fancy blinking LED style light. Basically i wanted it to have the following requirements:
- Possibility to turn on/turn off the light.
- Possibility to start/stop blinking
- Possibility to carry out some action when you click on the light
- It has to look cool.
During my search for something like this i came along Raphael.js and i decided to build my own blinking led with this framework, just to get it to know better. I think it is a very cool framework with very cool UI possibilities.
Put the downloaded .js files somewhere on your file system, preferably some place from which you can reference to it from your html file.
In your html file add the following script tags in the
The first line adds the Raphaël.js library, the second line adds the JQuery library, which i explain later and the third line adds the Blinkenlight library.
Raphaël.js works with a canvas or paper on which we are going to draw our light. This canvas has to be put in some DOM element on your page.
So let’s add this element to the
body section of the html page (you can use your own id here):
In a new
script tag in the
head section of the html file add the following:
We will initialize our canvas and draw our light and all other things in this function which comes with JQuery and this is the reason why we needed the JQuery library. It’s possible to use the
window.onload() or the
document.onload() functions but i didn’t test it. (according to this it’s better to use the JQuery function because of possible browser incompatibilities)
Initialization of Raphael.js
To initialize Raphael.js add the two following lines in the
var element = document.getElementById('canvas_container');
var paper = new Raphael(element, 200, 80);
We retrieve our canvas DOM element (somehow this doesn’t work with a JQuery
$("#canvas_container"), the page layout gets fucked up) and pass it to the Raphael.js constructor function. The two other parameters of this function are the
height of the canvas in pixels, in the above case, 200 px wide and 80 px high.
This function returns a canvas which we use for the initialization of the blinkenlight.
To initialize a Blinkenlight use the constructor function:
function BlinkenLight(paper, x, y, radius, colorOn, colorOff, glowColor, tooltipText, clickHandler)
Description of parameters:
The Raphael canvas where the light is to be drawn.
X-coordinate on the canvas. (0 is left)
Y-coordinate on the canvas. (0 is top)
Radius of the light in pixels
Color of the light when it is in the ‘on’ state
Color of the light when it is in the ‘off’ state
Color of the glow around the light.
(Optional) Tooltip text which is displayed when a click handler is assigned
Example 1, without click handler:
var blinker1 = new BlinkenLight(paper, 100, 40, 20, "#00DDDD", "#004444", "#00FFFF");
Example 2, with click handler and tooltip text
var blinker2 = new BlinkenLight(paper, 40, 40, 20, "#00DD00", "#004400", "#00FF00", "Click me", function ()
alert('You clicked me!')
Initially the lights will be ‘off’, so the result of the above will be look like:
Changing state of the light
To turn on the light, call the
To turn off the light, call the
First call the
setInterval() function with a parameters which sets the blinking interval in ms:
Then call the
start() function to start blinking:
To stop the blinking call the
I hope you get an idea how this thing works. The example provided with the code shows all the concepts plus an example of a click handler that shows a image in an popup.
If you have any comments, tips or tricks please leave them in the comments below.What’s next
In a following post i will use this library to make an actual widget plugin for Freeboard.
Happy coding and until next time!