The number of LEDs on the tape LED will change according to the position of the slider on the web page.
- LEDTape LED and ring LED using WS2812
- obniz Board
- Mobile batteries, etc.
- Smart Phone or PC
Hardware connection
Connect the tape LED to the obniz board as shown in the figure with reference to the parts library of WS2812.
obniz Tape LED with WS2812 0 GND 1 DIN 2 VCC
Software
To create a slider, use the input element’s range type in HTML.
<input id="slider" type="range" value="0" min="0" max="8" step="1" />Rewrite the “max=”8” part according to the number of tape LEDs you have.
In line 4 of script, rewrite the const NUM_OF_LEDS = 8; in the same way.
Program<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script
src="https://unpkg.com/obniz@3.x/obniz.js"
crossorigin="anonymous"
></script>
<script
src="https://code.jquery.com/jquery-3.4.1.js"
integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
crossorigin="anonymous"
></script>
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css"
integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4"
crossorigin="anonymous"
/>
<title>Slider to Tape LED</title>
</head>
<body>
<div class="container">
<h2 class="text-center" style="margin:40px">Slider to Tape LED</h2>
<div class="text-center">
<input id="slider" type="range" value="0" min="0" max="8" step="1" />
</div>
</div>
<script>
$(() => {
const WHITE = [255, 255, 255];
const BLACK = [0, 0, 0];
const NUM_OF_LEDS = 8;
let obniz = new Obniz("OBNIZ_ID_HERE");
obniz.onconnect = async () => {
let leds = obniz.wired("WS2812", { gnd: 0, din: 1, vcc: 2 });
$("#slider").change(async () => {
let colorsArray = [];
let numOfWhiteLeds = $("#slider").val();
if (numOfWhiteLeds === "0") {
for (let i = 0; i < NUM_OF_LEDS; i++) {
await colorsArray.push(BLACK);
}
} else {
for (let i = 0; i < numOfWhiteLeds; i++) {
await colorsArray.push(WHITE);
}
for (let j = 0; j < NUM_OF_LEDS - numOfWhiteLeds; j++) {
await colorsArray.push(BLACK);
}
}
await leds.rgbs(colorsArray);
});
};
});
</script>
</body>
</html> What is obniz?
Before we get into the project, let's look into obniz.
Here → obniz for DIY electronics
obniz is a cloud-connected IoT development board. You can program on the web browser of any smartphone or computer and the command is sent to obniz through the internet via obniz cloud. By connecting the obniz to the cloud through wifi, users can remotely control devices that are physically connected to obniz.
Thanks to this cloud based approach, you can program with Python, Javascript, or other languages you prefer and control hardware directly. You don't need to integrate firmware into the device side. Recording and analyzing data is also easy with obniz cloud service.
Want to control hardware things with your current Python or Javascript skill? Want to start IoT project but don't know where to start? Want to learn programming with languages you prefer?
obniz will help you broaden your viewpoint and develop both your SW and HW skills.
For more information, please visit our official website → Official Website
Where to get obniz board? → Amazon /Official Store
Comments
Please log in or sign up to comment.