PLEASE NOTE: This article is obsolete or related to a discontinued product.

FoxNode Web page widgets

With the intent of making my examples nicer, I wrote a few Javascript widgets that you can find in the media folder of FoxNode.

Since they could be useful for their own sake, I will try to present them here in some detail:


The LED widget can be used as a simple state indicator, reflecting the state of a hardware line on your FoxBoard. To use it, the only requirement is that the DOM should be available - no Javascript frameworks are required: simply include

<link rel="stylesheet" href="/css/led.css" type="text/css" />
<script src="/js/led.js"></script>

in the head of your page, adjusting the paths accordingly, of course.

To instantiate a led named myLed, use

var myLed = new LED(elem,state,color);

where elem is the id of a DOM element in the page, state is one of 0 or 1, and color can be 'red' or 'green'. To modify the appearance of myLed you have a few available methods:


change the led state, while;;

do the same for led color. You can also modify both properties at once, with


(all of the other shortcuts are implemented as .set() calls, as you can imagine).

7-segment display

The LCD widget is meant for showing a counter as a 7-segment display, adding some eye-candy to your pages. As for the LED, to use it you need the DOM available, but no Javascript framework is required: simply include

<link rel="stylesheet" href="/css/lcd.css" type="text/css" />
<script src="/js/lcd.js"></script>

in the head of your page, adjusting the paths accordingly, of course.

To instantiate a LCD named myLcd, use

var myLcd = new LCD(elem,digits,padding);

where elem is the id of a DOM element in the page and digits is the number of ciphers you want to use. The parameter padding, which is optional, can be used to right-align the display: it will contain the padding character to fill the LCD with.

In order to show something on the LCD, simply use


where str should be an hexadecimal string.

Daisy5 and Daisy11

I have decided to implement a view for Daisy5 (8 push buttons) and Daisy11 (8 leds) as a jQuery plugin. Usage is extremely simple: include both jQuery and the plugin as

<link rel="stylesheet" href="/css/jquery-daisy.css" type="text/css" />
<script src="/js/jquery.min.js"></script>
<script src="/js/jquery-daisy.js"></script>

at the top of your HTML page. You can then instantiate the objects as

var daisy5  = $(elem1).Daisy5();
var daisy11 = $(elem2).Daisy11();

where elem1 and elem2 can be any valid jQuery selector. In order to set the state of a button (for Daisy5) or led (for Daisy11), the code needed is


where button is one of 'P1', ..., 'P8', led one of 'L1', ..., 'L8' and value can be 0 or 1.

Since Daisy11 are outputs, you might want the user to interact with the widget. When somebody clicks on it, it will generate a jQuery custom event named daisy11, that you can bind to with


Apart from the usual event parameter, your callback receives an array data with the keys

{ led: ..., value: ... }

where led can be any of 'L1', ..., 'L8', and value is 0 or 1.