@guillrobin/canvas-led NPM

canvas-led

0.1.3 Added a cache to store graphics already drawn; the drawing code is still as inefficient as ever but it is only called once per led state.

0.1.1 Initial

Test package for TypeScript 3.2.1, ES6 and npm under Webstorm 2018.3.2.

This package is a test. Fell free to use it. It features a vitual led.

Warning : This is a test mockup

ES6 Module system only
Drawing code is ugly and unfinished

Demo

Please take a look at index.html with an ES6 compliant browser.

Package Managers

# NPM
npm install @guillrobin/canvas-led

Basic usage

Include index.js script, before your closing <body> tag AND before jQuery script inclusion :

<script type="text/javascript" src="node_modules/jquery/dist/jquery.min.js"></script>
<script type="module" src="node_modules/@guillrobin/canvas-led/index.js"></script>
</body>

Data Attribute Settings

You can eventually customize led states declaratively but you still need to call $(element).led() to initialize the component.

<div data-led='{
    "state": 0,
    "size": 64,
    "states":   [ {"color":"grey"},
                  {"color":"yellowgreen"},
                  {"color":"gold"},
                  {"color":"crimson"},
                  {"color":"deepskyblue"} ] }' >
</div>

Settings

Option	Type	Default	Description
size	number	64	Led canvas size in pixels (width & height).
state	number	0	Current led state.
states	LedState	Demo leds	Predefined states of the led.

Methods

Methods are called on led(s) instance(s) through the led method itself:

// Find <div>s with .example class and initializes it's content
$('.example').led();

This (maybe ?) accommodating syntax allows you to call any internal method as well:

// Change the size of your led to 32 pixels
$('#myLed').led('setsize', 32);

Method	Argument	Description
empty	empty	Initializes currently selected div(s), please see upwards.
`setsize`	size: number	Set led element size, (width & height) in pixels.
`setstate`	newState: number	Set led state.
`toggle`		Toggle between states 0 and 1 only.