Studioled NPM | npm.io

Studio Led

npm (scoped) npm (downloads) license

A library to show numbers on an LED display.

screenshot_00

Installation

$ npm install studioled --save

How to use

ES6

// to import a specific method
import {StudioLed} from "studioled";

const led = new StudioLed({
	element: document.querySelector(".led"),
});

// using  method
led.setValue(42);

CommonJS

const StudioLed = require("studioled");

const led = new StudioLed({
	element: document.querySelector(".led"),
});

UMD in Browser

<!-- to import non-minified version -->
<script src="studioled.umd.js"></script>

<!-- to import minified version -->
<script src="studioled.umd.min.js"></script>

After that the library will be available to the Global as StudioLed. Follow an example:

const led = new StudioLed({
	element: document.querySelector(".led"),
});

led.setValue(42);

Constructor

You can also pass other settings to the class's constructor.

const led = new StudioLed({
	element: document.querySelector(".led"),
	width: 75,
	height: 135,
	initialValue: 42,
	baseDigits: 3,
});

Argument	Type	Default	Description
`element`	object		element where the LED display will be rendered
`width`	number	85	width of the digit
`height`	number	135	height of the digit
`initialValue`	number	0	initial value to be displayed
`baseDigits`	number	0	how many digits the LED display have to show always. If the number to be displayed is less than baseDigits, the LED display will show zeros in the other segments. eg: If baseDigits value is '3' and the number to be displayed is '42', the LED display will show '042'

screenshot_01

Methods

Follow the methods that the library provides.

setValue(value)

sets the value to be displayed on the LED display.

Arguments

Argument	Type	Description
`value`	number	'Any integer number'

Example

led.setValue(42);

getValue()

returns the value displayed on the LED display.

Example

led.getValue();

setStatus(status)

sets the status of the LED display.

Arguments

Argument	Type	Options	Description
`status`	string	default \| success \| error	change the LED display color to black ('default'), green ('success') or red ('error')

Example

led.setStatus("success");

screenshot_02

addBreakpoint(value, width, height)

sets the digit size at specific breakpoints.

Arguments

Argument	Type	Description
`value`	number	min-width of the viewport for breakpoint
`width`	number	width of the digit in the specified breakpoint
`height`	number	height of the digit in the specified breakpoint

Example