@guillrobin/canvas-led

v0.1.3

Published

4 years ago

Virtual led drawn on a canvas intended as npm test package.

0High
0Medium
0Low

guillrobin

ui jquery-plugin

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.

Default settings (demo led states)

0 : grey (off style led)
1 : yellowgreen (on style led)
2 : gold
3 : crimson
4 : deepkyblue

Browser support

Need ES6 compliant browser.

Dependencies

jQuery

License

Copyleft