A blinking light with Raphael.js

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. So i created a a small javascript library, which i called Blinkenlight that implements all requirements. You can find the code and an example here

Example usage

Preparation

Put the downloaded .js files somewhere on your file system, preferably some place from which you can reference to it from your html file.

HTML

In your html file add the following script tags in the head section:

1
2
3

<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.4/raphael-min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.4.js"></script>
<script type="text/javascript" src="path_to_js/blinkenlight.js"></script>

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):

1

<div id="canvas_container"></div>

Initialization function

In a new script tag in the head section of the html file add the following:

1
2
3
4

<script type="text/javascript">
$(document).ready(function ()
{
});

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 Raphaël.js

To initialize Raphael.js add the two following lines in the $(document).ready function:

1
2

var element = document.getElementById('canvas_container');<br />
var paper = new Raphael(element, 200, 80);<br />

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 width and 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.

Blinkenlight initialization

To initialize a Blinkenlight use the constructor function:

1

function BlinkenLight(paper, x, y, radius, colorOn, colorOff, glowColor, tooltipText, clickHandler)

Description of parameters:

• paper: The Raphael canvas where the light is to be drawn.
• x: X-coordinate on the canvas. (0 is left)
• y: Y-coordinate on the canvas. (0 is top)
• radius: Radius of the light in pixels
• colorOn: Color of the light when it is in the ‘on’ state
• colorOff: Color of the light when it is in the ‘off’ state
• glowColor: Color of the glow around the light.
• tooltipText: (Optional) Tooltip text which is displayed when a click handler is assigned
• clickHandler: (Optional) Javascript that is executed when you click on the light

Example 1, without click handler:

1

var blinker1 = new BlinkenLight(paper, 100, 40, 20, "#00DDDD", "#004444", "#00FFFF");

Example 2, with click handler and tooltip text

1
2
3

var blinker2 = new BlinkenLight(paper, 40, 40, 20, "#00DD00", "#004400", "#00FF00", "Click me", function () {
    alert('You clicked me!')
});

Initially the lights will be ‘off’.

Changing state of the light

To turn on the light, call the turnOn() function:

1
2

blinker1.turnOn();
blinker2.turnOn();

To turn off the light, call the turnOff() function:

1
2

blinker1.turnOff();
blinker2.turnOff();

Blinking

First call the setInterval() function with a parameter which sets the blinking interval in ms:

1

blinker1.setInterval(500);

Then call the start() function to start blinking:

1

blinker1.start();

To stop the blinking call the stop() function:

1

blinker1.stop();

Conclusion

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!