44 lines
1.4 KiB
JavaScript
44 lines
1.4 KiB
JavaScript
const client = io.connect('ws://pi', { path: '/sensehat/socket.io', })
|
|
|
|
client.on('action', ({ action, x, y, color, pixels }) => {
|
|
var leds = document.querySelectorAll('.led')
|
|
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++) {
|
|
leds[i].style.backgroundColor = `rgb(${r}, ${g}, ${b})`
|
|
}
|
|
break
|
|
case 'setPixel':
|
|
leds[y * 8 + x].style.backgroundColor = `rgb(${r}, ${g}, ${b})`
|
|
break
|
|
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
|
|
default:
|
|
break
|
|
}
|
|
})
|
|
|
|
function setPixel(led) {
|
|
const { x, y } = led.dataset
|
|
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()
|