# FoxNode Web page widgets
With the intent of making my [examples](https://github.com/ant9000/FoxNode/tree/master/examples/) nicer, I wrote a few Javascript widgets that you can find in the [media](https://github.com/ant9000/FoxNode/tree/master/media/js) folder of FoxNode.
Since they could be useful for their own sake, I will try to present them here in some detail:
* [LED](#led)
* [7-segment display](/nodejs_widgets#lcd)
* [Daisy5 and Daisy11](/nodejs_widgets#daisy)
## LED
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:
myLed.on();
myLed.off();
myLed.toogle();
change the led state, while
myLed.red();
myLed.green();
myLed.colorcycle();
do the same for led color. You can also modify both properties at once, with
myLed.set(state,color);
(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
myLcd.display(str);
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
daisy5.Daisy5('state',button,value);
daisy11.Daisy11('state',led,value);
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
daisy11.bind('daisy11',function(event,data){
});
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*.