Hardware components | ||||||
 |
| × | 1 | |||
| × | 1 | ||||
 |
| × | 1 | |||
I am connected to Web page to control a mood light using the color picker. There are many kinds of color pickers to control RGB LED . I found an HTML5 canvas color picker for this project. (https://www.script-tutorials.com/html5-color-picker-canvas/)
I referred to the sample source from the link above.
index.php
PHP1. Javascript library (refer to Script Turorials)
- jquery.js
Jqeury library + sizzle.js (https://sizzlejs.com/)
- colorpicker.js
Get RGB values that user picked
2. index.php
First, include Javacript libraries(jquery.js, colorpicker.js).
Then, read color palatte image(color.png)
When user select the color, that RGB color values shows at input box and select button's color changes to picked color.
After checking color, press the select button and send RGB value using POST.
That values are set at ht_pwm_setup function. Then RGB LED is on.
- jquery.js
Jqeury library + sizzle.js (https://sizzlejs.com/)
- colorpicker.js
Get RGB values that user picked
2. index.php
First, include Javacript libraries(jquery.js, colorpicker.js).
Then, read color palatte image(color.png)
When user select the color, that RGB color values shows at input box and select button's color changes to picked color.
After checking color, press the select button and send RGB value using POST.
That values are set at ht_pwm_setup function. Then RGB LED is on.
<!DOCTYPE html>
<?php
include_once "/lib/sd_340.php";
$red = (int) _POST("red");
$green = (int) _POST("green");
$blue = (int) _POST("blue");
ht_pwm_setup(0, $red, 255); //red
ht_pwm_setup(1, $green, 255); //green
ht_pwm_setup(2, $blue, 255); //blue
?>
<html>
<head>
<meta content="initial-scale=2.0, maximum-scale=1.0, minimum-scale=0.5, width=device-width, user-scalable=yes" name="viewport">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
* {
margin: 0;
padding: 0;
}
html {
background-color: #eee;
}
.container {
margin: 20px auto;
text-align: justify;
width: 400px;
}
/* colorpicker styles */
.colorpicker {
color: #000;
font-size: 12px;
width: 200px;
margin: 0 auto;
}
#picker {
cursor: crosshair;
width: 200px;
margin: 0 auto;
border: 0;
}
.controls {
width: 130px;
margin: 0 auto;
}
.controls > div {
margin-bottom: 5px;
overflow: hidden;
padding: 5px;
}
.controls label {
float: left;
}
.controls > div input {
border: 1px solid #2F2F2F;
float: right;
height: 20px;
margin-left: 6px;
text-align: center;
text-transform: uppercase;
width: 75px;
}
.preview {
cursor: pointer;
border-radius: 3px;
box-shadow: 2px 2px 2px #444444;
height: 40px;
width: 100px;
margin: 0 auto;
text-align: center;
line-height:40px;
}
</style>
<!-- add scripts -->
<script src="jquery.js"></script>
<script src="colorpicker.js"></script>
</head>
<body>
<form name="main" method="post" action="index.php">
<div class="container">
<!-- colorpicker element -->
<div class="colorpicker" style="display:none">
<canvas id="picker" width="200" height="200"></canvas>
</div>
<div class="controls">
<div><label>R</label> <input type="text" name="red" id="red" /></div>
<div><label>G</label> <input type="text" name="green" id="green" /></div>
<div><label>B</label> <input type="text" name="blue" id="blue" /></div>
</div>
<br />
<!-- preview element -->
<div class="preview" onclick="javascript:main.submit();">Select</div>
</div>
</form>
</body>
</html>
Comments