Let’s have a look at some implementation details of the upside-down calculator mentioned in this post. What we are interested in is the LED display. Remember we are using Raphaël.
Below is one digit of the 7 segment LED. Click the buttons to control the segments and the decimal point.
Because the digit is slanted, it can easily be put into a row to form a calculator display. There is space for the decimal point. How convinient.
Now let’s look at the simplified code for this LED digit. After creating the Raphaël canvas we set a black background for the LED digit.
window.onload = function ()
{
var r = Raphael("canvas", 240, 250);
var display = r.rect(0,0,185,244,0).animate({fill: "#000"},0);
The digit is stored in a set. We push on the paths for the segments and a circle for the decimal point.
led = r.set();
led.push(
r.path("M 11,0 L 35,0 35,1 32,4 12,4 8,1 z"),
r.path("M 32,4 L 36,1 37,3 33,22 31,24 29,22 z"),
r.path("M 28,27 L 30,25 31,25 32,27 29,45 28,48 25,45 z"),
r.path("M 4,45 L 24,45 27,48 25,49 2,49 1,48 z"),
r.path("M 6,25 L 7,27 4,44 0,48 0,47 3,27 z"),
r.path("M 8,1 L 11,4 8,21 6,24 4,22 7,3 z"),
r.path("M 9,22 L 28,22 30,24 28,26 8,26 6,25 6,24 z"),
r.circle(34,47,2)
);
After that the segments are filled with a dark grey.
for (var i = 0; i<8; i++)
{
led[i].animate({fill:colourledoff, "stroke-width": 0}, 1000);
}
}
We now need a function to switch the relevant segments on or off. First we create an array of on/off flags for every segment and every symbol, i.e. ’0′..’9′, ‘-’, and ‘E’. For example, to show a ’5′ all segments are on apart from segments 2 and 5. We also define the colours to use for the segments.
var colourledon = "#0F0";
var colourledoff = "#444";
var segments = [];
segments['0'] = new Array(1,1,1,1,1,1,0);
segments['1'] = new Array(0,1,1,0,0,0,0);
segments['2'] = new Array(1,1,0,1,1,0,1);
segments['3'] = new Array(1,1,1,1,0,0,1);
segments['4'] = new Array(0,1,1,0,0,1,1);
segments['5'] = new Array(1,0,1,1,0,1,1);
segments['6'] = new Array(1,0,1,1,1,1,1);
segments['7'] = new Array(1,1,1,0,0,0,0);
segments['8'] = new Array(1,1,1,1,1,1,1);
segments['9'] = new Array(1,1,1,1,0,1,1);
segments['-'] = new Array(0,0,0,0,0,0,1);
segments['E'] = new Array(1,0,0,1,1,1,1);
This array is used in the update() function, which takes one character as its argument:
function update(num)
{
var x=7;
while (x--)
{
if (segments[num][x])
{
led[x].animate({fill:colourledon}, 1000);
}
else
{
led[x].animate({fill:colourledoff}, 1000);
}
}
}
A similar function controls the decimal point.
function decimal(pChecked)
{
if (pChecked)
{
colour=colourledon;
}
else
{
colour=colourledoff;
}
led[7].animate({fill:colour}, 1000);
}
This was the simplified code for one digit. In the calculator code the digit is cloned into an array of LED digits:
/* clone single LED */
var ledrow=[];
ledrow[0] = led;
var z=10;
while (z--)
{
ledrow[10-z] = ledrow[9-z].clone();
ledrow[10-z].translate(-41,0)
}
When you flip the display and you have a really slow computer you might see the segments being dragged behind as shown in the following screenshot:
