想做個調色盤版本，發現html 有一個input type 叫color。
把color加到上一篇的原始碼中，多了色盤的功能。
將事件發生時要做的事寫進去
case 'html5colorpicker':
r = hexToR(target.value);
g = hexToG(target.value);
b = hexToB(target.value);
console.log(target.value);
break;
註冊事件
pick.addEventListener('change', handler, false);
執行結果
色盤
光譜
完整程式碼
<!DOCTYPE html>
<html>
<head>
<title>RGB LED</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://webduino.io/components/webcomponentsjs/webcomponents.js"></script>
<link rel='import' href='https://webduino.io/components/webduino/web-arduino.html' />
<link rel='import' href='https://webduino.io/components/webduino/wa-rgbled.html'/>
<style>
#show{
width: 100%;
max-width: 250px;
height:100px;
border:1px solid #000;
background:#000;
margin-top: 15px;
margin-left: 5px;
}
</style>
</head>
<body>
<input type="color" id="html5colorpicker" value="#ff0000">
<div>
<label>red:</label>
<input id='redBtn' type='range' min='0' max='255' step='5' value='0'>
</div>
<div>
<label>green: </label>
<input id='greenBtn' type='range' min='0' max='255' step='5' value='0'>
</div>
<div>
<label>blue: </label>
<input id='blueBtn' type='range' min='0' max='255' step='5' value='0'>
</div>
<div id="show"></div>
<web-arduino id='board' device="your device id">
<wa-rgbled id='rgb' red='6' blue='9' green='10'></wa-rgbled>
</web-arduino>
<script lang="javascript">
function hexToR(h) {return parseInt((cutHex(h)).substring(0,2),16)}
function hexToG(h) {return parseInt((cutHex(h)).substring(2,4),16)}
function hexToB(h) {return parseInt((cutHex(h)).substring(4,6),16)}
function cutHex(h) {return (h.charAt(0)=="#") ? h.substring(1,7):h}
window.addEventListener('WebComponentsReady', function () {
var board = document.getElementById('board');
board.on('ready',function() {
var redBtn = document.getElementById('redBtn'),
greenBtn = document.getElementById('greenBtn'),
blueBtn = document.getElementById('blueBtn'),
rgb = document.getElementById('rgb'),
show = document.getElementById('show'),
pick=document.getElementById('html5colorpicker');
r = 0,
g = 0,
b = 0;
var handler = function(evt) {
var target = evt.target,
id = target.id;
switch (id) {
case 'redBtn':
r = target.value;
break;
case 'greenBtn':
g = target.value;
break;
case 'blueBtn':
b = target.value;
break;
case 'html5colorpicker':
r = hexToR(target.value);
g = hexToG(target.value);
b = hexToB(target.value);
console.log(target.value);
break;
}
show.style.backgroundColor = 'rgba(' + r + ',' + g + ',' + b + ',' + '255)';
//rgb.setColor(r, g, b);
rgb.setColor(target.value);
};
redBtn.addEventListener('change', handler, false);
greenBtn.addEventListener('change', handler, false);
blueBtn.addEventListener('change', handler, false);
pick.addEventListener('change', handler, false);
});
}, false);
</script>
</body>
</html>
沒有留言:
張貼留言