Simulate 7 Segment LED Display With The Studio LED Library

Preview:

Description:

Studio LED is a JavaScript library for displaying numbers on a seven-segment LED display.

How to use it:

1. Install and import the studioled.

# NPM
$ npm i studioled

import { StudioLed } from "studioled";

2. Or directly load the UMD version of the library in the document.

<script src="studioled.umd.min.js"></script>

3. Create a container element to hold the LED display.

<div class="demo"></div>

4. Initialize the studioled library.

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

5. Set the value to be displayed on the LED display.

led.setValue(1234);

6. Customize the LED display.

const led = new StudioLed({
      element: document.querySelector(".demo"),
      width: 85,
      height: 135,
      initialValue: 0,
      baseDigits: 0,
});

7. Set the colors (themes) of the digits.

led.setStatus("default");
led.setStatus("success");
led.setStatus("error");

8. Auto resize the digits on a specific screen size.

// addBreakpoint(breakPoint, width, height);
led.addBreakpoint(728, 200, 200);

9. Get the value from the LED display.

led.getValue();

10. Render the LED display.

led.render();