Hardware components | ||||||
 |
| × | 1 | |||
 |
| × | 1 | |||
Using the HTML5 color picker, I will try to display the selected color as it is with full color LEDs.
Materials- obniz Board
- PL9823 (Full color LED with built-in WS2811)
Hardware connection
Connect the obniz Board to the LED (PL9823).Connect the four pins of the LED (PL9823), the long one to No. 0 and 1, and the short one to No. 3 and 4.
Software
When the colorPicker color changes, the value is converted to an RGB value to change the color of the full color LED.Since colorPicker colors can be obtained in the form of #RRGGBB, they are broken down and converted to RGB values from 0 to 255.
Program<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script src="https://obniz.io/js/jquery-3.2.1.min.js"></script>
<script
src="https://unpkg.com/obniz@3.x/obniz.js"
crossorigin="anonymous"
></script>
</head>
<body>
<div id="obniz-debug"></div>
<h2>Color Picker with LED</h2>
<input type="color" value="#333300" id="colorPicker" />
<script>
var obniz = new Obniz("OBNIZ_ID_HERE");
obniz.onconnect = async function() {
var led = obniz.wired("WS2811", { din: 3, vcc: 2, gnd: 1 });
led.rgb(0x33, 0x33, 0);
$("#colorPicker").on("change", function(val) {
let colorString = $("#colorPicker").val();
let rgb = colorString2hex(colorString);
led.rgb(rgb[0], rgb[1], rgb[2]);
});
};
function colorString2hex(hex) {
if (hex.slice(0, 1) == "#") hex = hex.slice(1);
if (hex.length == 3)
hex =
hex.slice(0, 1) +
hex.slice(0, 1) +
hex.slice(1, 2) +
hex.slice(1, 2) +
hex.slice(2, 3) +
hex.slice(2, 3);
return [hex.slice(0, 2), hex.slice(2, 4), hex.slice(4, 6)].map(function(str) {
return parseInt(str, 16);
});
}
</script>
</body>
</html>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