zhaoxin/zhao
1
1
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
赵鑫 2022-09-05 15:47:26 +08:00
parent 966e687300
commit 70d1f14442
1 changed files with 24 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
sensehat/index.html
View File

@ -139,6 +139,15 @@
onclick="client.emit('action', {action:'showMessage', text:'Hello', color:[50,50,255], speed: 1})">Hello</button>
<button
onclick="client.emit('action', {action:'flashMessage', text:'Hello', color:[50,50,255], speed: 1})">Hello</button>
<div style="display:flex;">
<div>
<p>红 <input type="range" name="red" id="red" min="0" , max="255" step="1" value="50"></p>
<p>绿 <input type="range" name="green" id="green" min="0" , max="255" step="1" value="50"></p>
<p>蓝 <input type="range" name="blue" id="blue" min="0" , max="255" step="1" value="255"></p>
</div>
<div id="selected_color"
style="width:100px;border:1px solid black;margin:1rem;background-color: rgb(50,50,255);"></div>
</div>
</div>
<script src="http://pi/sensehat/socket.io/socket.io.js"></script>
@ -147,8 +156,9 @@
client.on('action', ({ action, x, y, color, pixels }) => {
var leds = document.querySelectorAll('.led')
if (color == undefined) color = [0, 0, 0]
if (color == undefined || color == [0, 0, 0]) color = [255, 255, 255]
var [r, g, b] = color
if (r == 0 && g == 0 && b == 0) [r, g, b] = [255, 255, 255]
switch (action) {
case 'clear':
for (let i = 0; i < 64; i++) {
@ -161,6 +171,7 @@
case 'setPixels':
for (let i = 0; i < 64; i++) {
var [r, g, b] = pixels[i]
if (r == 0 && g == 0 && b == 0) [r, g, b] = [255, 255, 255]
leds[i].style.backgroundColor = `rgb(${r}, ${g}, ${b})`
}
break
@ -171,9 +182,19 @@
function setPixel(led) {
const { x, y } = led.dataset
const color = led.classList.toggle('on') ? [255, 255, 255] : [0, 0, 0]
client.emit('action', { action: 'setPixel', x, y, color })
const r = Number(red.value)
const g = Number(green.value)
const b = Number(blue.value)
client.emit('action', { action: 'setPixel', x, y, color: [r, g, b] })
}
red.onchange = change_color
green.onchange = change_color
blue.onchange = change_color
function change_color() {
selected_color.style.backgroundColor = `rgb(${red.value},${green.value},${blue.value})`
}
change_color()
</script>
</body>