Hardware components | ||||||
 |
| × | 1 | |||
| × | 1 | ||||
You can change the color of the full color LED connected to the obniz with the radio button.
- Full Color LED
- resistance x3
- obniz Board
- Mobile batteries, etc.
- Smart Phone or PC
Hardware connection
Connect the LED to the obniz Board as shown in the figure, referring to the full color LED parts library.
obniz LED 0 Green 1 Blue 2 Red 3 Anode or cathode
※Please note that the order of the pins may differ depending on the full color LED.
Software
Line 10 let led = obniz.wired(‘FullColorLED’, {r:2, g:0, b:1, common:3, commonType:’cathode_common’}); In the commonType field of let led = obniz.wired(‘FullColorLED’, {r:2, g:0, b:1, common:3, commonType:’cathode_common’}); Depending on the type of LED you have, write anode_common or cathode_common.
Make a radio button as follows.The name attribute value can only be selected as one of the colors, and the value attribute value has a color for each.
<input type="radio" name="colors" value="red" >redGet the value attribute value of the button that is being checked with jQuery.
let checkedVal = $('input[name="colors"]:checked').val();<!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>Radio Button to Fullcolor LED</title>
</head>
<body>
<div class="container">
<h2 class="text-center" style="margin:40px">Control Fullcolor LED</h2>
<form id="rgb-controls" class="text-center row">
<div class="col-xs-4 col-md-3"></div>
<div id="choices" class="text-left col-xs-4 col-md-6">
<input type="radio" name="colors" value="red" />red<br />
<input type="radio" name="colors" value="green" />green<br />
<input type="radio" name="colors" value="blue" />blue<br />
<input type="radio" name="colors" value="gradation-change" />gradation
change<br />
<div class="text-center">
<button id="change" class="btn btn-warning" style="margin:20px">
change!!
</button>
</div>
</div>
<div class="col-xs-4 col-md-3"></div>
</form>
</div>
<script>
$(() => {
const COLORS = {
red: [255, 0, 0],
green: [0, 255, 0],
blue: [0, 0, 255]
};
let obniz = new Obniz("OBNIZ_ID_HERE");
obniz.onconnect = async () => {
let led = obniz.wired("FullColorLED", {
r: 2,
g: 0,
b: 1,
common: 3,
commonType: "cathode_common"
});
$("#rgb-controls").submit(async e => {
await e.preventDefault();
let checkedVal = $('input[name="colors"]:checked').val();
if (checkedVal === null || checkedVal === undefined) {
return;
} else if (checkedVal === "gradation-change") {
led.gradation(1000);
} else {
led.stopgradation();
led.rgb(
COLORS[checkedVal][0],
COLORS[checkedVal][1],
COLORS[checkedVal][2]
);
}
});
};
});
</script>
</body>
</html> Select a color and press CHANGE!!! to change the full color LED to the selected color. If you select gradation change, the color will continue to change in a gradient.
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.