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

update

Browse Source
This commit is contained in:
赵鑫 2022-09-01 13:12:29 +08:00
parent 54605403a3
commit ace13b7f6d
1 changed files with 70 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

140
public/index.html
View File

@ -48,84 +48,84 @@
<body>
<div id="matrix">
<div class="row">
<div class="led" data-y="0" data-x="0" onclick="turnon(event)"></div>
<div class="led" data-y="0" data-x="1" onclick="turnon(event)"></div>
<div class="led" data-y="0" data-x="2" onclick="turnon(event)"></div>
<div class="led" data-y="0" data-x="3" onclick="turnon(event)"></div>
<div class="led" data-y="0" data-x="4" onclick="turnon(event)"></div>
<div class="led" data-y="0" data-x="5" onclick="turnon(event)"></div>
<div class="led" data-y="0" data-x="6" onclick="turnon(event)"></div>
<div class="led" data-y="0" data-x="7" onclick="turnon(event)"></div>
<div class="led" data-y="0" data-x="0" onclick="turnon(this)"></div>
<div class="led" data-y="0" data-x="1" onclick="turnon(this)"></div>
<div class="led" data-y="0" data-x="2" onclick="turnon(this)"></div>
<div class="led" data-y="0" data-x="3" onclick="turnon(this)"></div>
<div class="led" data-y="0" data-x="4" onclick="turnon(this)"></div>
<div class="led" data-y="0" data-x="5" onclick="turnon(this)"></div>
<div class="led" data-y="0" data-x="6" onclick="turnon(this)"></div>
<div class="led" data-y="0" data-x="7" onclick="turnon(this)"></div>
</div>
<div class="row">
<div class="led" data-y="1" data-x="0" onclick="turnon(event)"></div>
<div class="led" data-y="1" data-x="1" onclick="turnon(event)"></div>
<div class="led" data-y="1" data-x="2" onclick="turnon(event)"></div>
<div class="led" data-y="1" data-x="3" onclick="turnon(event)"></div>
<div class="led" data-y="1" data-x="4" onclick="turnon(event)"></div>
<div class="led" data-y="1" data-x="5" onclick="turnon(event)"></div>
<div class="led" data-y="1" data-x="6" onclick="turnon(event)"></div>
<div class="led" data-y="1" data-x="7" onclick="turnon(event)"></div>
<div class="led" data-y="1" data-x="0" onclick="turnon(this)"></div>
<div class="led" data-y="1" data-x="1" onclick="turnon(this)"></div>
<div class="led" data-y="1" data-x="2" onclick="turnon(this)"></div>
<div class="led" data-y="1" data-x="3" onclick="turnon(this)"></div>
<div class="led" data-y="1" data-x="4" onclick="turnon(this)"></div>
<div class="led" data-y="1" data-x="5" onclick="turnon(this)"></div>
<div class="led" data-y="1" data-x="6" onclick="turnon(this)"></div>
<div class="led" data-y="1" data-x="7" onclick="turnon(this)"></div>
</div>
<div class="row">
<div class="led" data-y="2" data-x="0" onclick="turnon(event)"></div>
<div class="led" data-y="2" data-x="1" onclick="turnon(event)"></div>
<div class="led" data-y="2" data-x="2" onclick="turnon(event)"></div>
<div class="led" data-y="2" data-x="3" onclick="turnon(event)"></div>
<div class="led" data-y="2" data-x="4" onclick="turnon(event)"></div>
<div class="led" data-y="2" data-x="5" onclick="turnon(event)"></div>
<div class="led" data-y="2" data-x="6" onclick="turnon(event)"></div>
<div class="led" data-y="2" data-x="7" onclick="turnon(event)"></div>
<div class="led" data-y="2" data-x="0" onclick="turnon(this)"></div>
<div class="led" data-y="2" data-x="1" onclick="turnon(this)"></div>
<div class="led" data-y="2" data-x="2" onclick="turnon(this)"></div>
<div class="led" data-y="2" data-x="3" onclick="turnon(this)"></div>
<div class="led" data-y="2" data-x="4" onclick="turnon(this)"></div>
<div class="led" data-y="2" data-x="5" onclick="turnon(this)"></div>
<div class="led" data-y="2" data-x="6" onclick="turnon(this)"></div>
<div class="led" data-y="2" data-x="7" onclick="turnon(this)"></div>
</div>
<div class="row">
<div class="led" data-y="3" data-x="0" onclick="turnon(event)"></div>
<div class="led" data-y="3" data-x="1" onclick="turnon(event)"></div>
<div class="led" data-y="3" data-x="2" onclick="turnon(event)"></div>
<div class="led" data-y="3" data-x="3" onclick="turnon(event)"></div>
<div class="led" data-y="3" data-x="4" onclick="turnon(event)"></div>
<div class="led" data-y="3" data-x="5" onclick="turnon(event)"></div>
<div class="led" data-y="3" data-x="6" onclick="turnon(event)"></div>
<div class="led" data-y="3" data-x="7" onclick="turnon(event)"></div>
<div class="led" data-y="3" data-x="0" onclick="turnon(this)"></div>
<div class="led" data-y="3" data-x="1" onclick="turnon(this)"></div>
<div class="led" data-y="3" data-x="2" onclick="turnon(this)"></div>
<div class="led" data-y="3" data-x="3" onclick="turnon(this)"></div>
<div class="led" data-y="3" data-x="4" onclick="turnon(this)"></div>
<div class="led" data-y="3" data-x="5" onclick="turnon(this)"></div>
<div class="led" data-y="3" data-x="6" onclick="turnon(this)"></div>
<div class="led" data-y="3" data-x="7" onclick="turnon(this)"></div>
</div>
<div class="row">
<div class="led" data-y="4" data-x="0" onclick="turnon(event)"></div>
<div class="led" data-y="4" data-x="1" onclick="turnon(event)"></div>
<div class="led" data-y="4" data-x="2" onclick="turnon(event)"></div>
<div class="led" data-y="4" data-x="3" onclick="turnon(event)"></div>
<div class="led" data-y="4" data-x="4" onclick="turnon(event)"></div>
<div class="led" data-y="4" data-x="5" onclick="turnon(event)"></div>
<div class="led" data-y="4" data-x="6" onclick="turnon(event)"></div>
<div class="led" data-y="4" data-x="7" onclick="turnon(event)"></div>
<div class="led" data-y="4" data-x="0" onclick="turnon(this)"></div>
<div class="led" data-y="4" data-x="1" onclick="turnon(this)"></div>
<div class="led" data-y="4" data-x="2" onclick="turnon(this)"></div>
<div class="led" data-y="4" data-x="3" onclick="turnon(this)"></div>
<div class="led" data-y="4" data-x="4" onclick="turnon(this)"></div>
<div class="led" data-y="4" data-x="5" onclick="turnon(this)"></div>
<div class="led" data-y="4" data-x="6" onclick="turnon(this)"></div>
<div class="led" data-y="4" data-x="7" onclick="turnon(this)"></div>
</div>
<div class="row">
<div class="led" data-y="5" data-x="0" onclick="turnon(event)"></div>
<div class="led" data-y="5" data-x="1" onclick="turnon(event)"></div>
<div class="led" data-y="5" data-x="2" onclick="turnon(event)"></div>
<div class="led" data-y="5" data-x="3" onclick="turnon(event)"></div>
<div class="led" data-y="5" data-x="4" onclick="turnon(event)"></div>
<div class="led" data-y="5" data-x="5" onclick="turnon(event)"></div>
<div class="led" data-y="5" data-x="6" onclick="turnon(event)"></div>
<div class="led" data-y="5" data-x="7" onclick="turnon(event)"></div>
<div class="led" data-y="5" data-x="0" onclick="turnon(this)"></div>
<div class="led" data-y="5" data-x="1" onclick="turnon(this)"></div>
<div class="led" data-y="5" data-x="2" onclick="turnon(this)"></div>
<div class="led" data-y="5" data-x="3" onclick="turnon(this)"></div>
<div class="led" data-y="5" data-x="4" onclick="turnon(this)"></div>
<div class="led" data-y="5" data-x="5" onclick="turnon(this)"></div>
<div class="led" data-y="5" data-x="6" onclick="turnon(this)"></div>
<div class="led" data-y="5" data-x="7" onclick="turnon(this)"></div>
</div>
<div class="row">
<div class="led" data-y="6" data-x="0" onclick="turnon(event)"></div>
<div class="led" data-y="6" data-x="1" onclick="turnon(event)"></div>
<div class="led" data-y="6" data-x="2" onclick="turnon(event)"></div>
<div class="led" data-y="6" data-x="3" onclick="turnon(event)"></div>
<div class="led" data-y="6" data-x="4" onclick="turnon(event)"></div>
<div class="led" data-y="6" data-x="5" onclick="turnon(event)"></div>
<div class="led" data-y="6" data-x="6" onclick="turnon(event)"></div>
<div class="led" data-y="6" data-x="7" onclick="turnon(event)"></div>
<div class="led" data-y="6" data-x="0" onclick="turnon(this)"></div>
<div class="led" data-y="6" data-x="1" onclick="turnon(this)"></div>
<div class="led" data-y="6" data-x="2" onclick="turnon(this)"></div>
<div class="led" data-y="6" data-x="3" onclick="turnon(this)"></div>
<div class="led" data-y="6" data-x="4" onclick="turnon(this)"></div>
<div class="led" data-y="6" data-x="5" onclick="turnon(this)"></div>
<div class="led" data-y="6" data-x="6" onclick="turnon(this)"></div>
<div class="led" data-y="6" data-x="7" onclick="turnon(this)"></div>
</div>
<div class="row">
<div class="led" data-y="7" data-x="0" onclick="turnon(event)"></div>
<div class="led" data-y="7" data-x="1" onclick="turnon(event)"></div>
<div class="led" data-y="7" data-x="2" onclick="turnon(event)"></div>
<div class="led" data-y="7" data-x="3" onclick="turnon(event)"></div>
<div class="led" data-y="7" data-x="4" onclick="turnon(event)"></div>
<div class="led" data-y="7" data-x="5" onclick="turnon(event)"></div>
<div class="led" data-y="7" data-x="6" onclick="turnon(event)"></div>
<div class="led" data-y="7" data-x="7" onclick="turnon(event)"></div>
<div class="led" data-y="7" data-x="0" onclick="turnon(this)"></div>
<div class="led" data-y="7" data-x="1" onclick="turnon(this)"></div>
<div class="led" data-y="7" data-x="2" onclick="turnon(this)"></div>
<div class="led" data-y="7" data-x="3" onclick="turnon(this)"></div>
<div class="led" data-y="7" data-x="4" onclick="turnon(this)"></div>
<div class="led" data-y="7" data-x="5" onclick="turnon(this)"></div>
<div class="led" data-y="7" data-x="6" onclick="turnon(this)"></div>
<div class="led" data-y="7" data-x="7" onclick="turnon(this)"></div>
</div>
</div>
@ -142,17 +142,17 @@
const client = io()
document.addEventListener('click', (event) => {
const item = event.target
if (item.classList.contains('led')) {
item.classList.toggle('on')
const { x, y } = item.dataset
const action = item.classList.contains('on') ? 'on' : 'off'
client.emit('action', { action, x, y })
} else if (item.classList.contains('button')) {
if (item.classList.contains('button')) {
const { action } = item.dataset
document.querySelectorAll('.led').forEach((led) => led.classList.remove('on'))
client.emit('action', { action })
}
})
function turnon(led) {
const { x, y } = led.dataset
const action = led.classList.toggle('on') ? 'on' : 'off'
client.emit('action', { action, x, y })
}
</script>
</body>