zhaoxin/rpi_sense_hat_server
1
1
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
592b94c06d
rpi_sense_hat_server/public/index.html

171 lines
7.8 KiB
HTML
Raw Normal View History

新建
2022-08-31 23:40:14 +00:00
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="data:" type="image/x-icon">
<title>Sense Hat</title>
<style>
* {
box-sizing: border-box;
}
#matrix {
display: flex;
flex-direction: column;
gap: 2px;
}
.row {
display: flex;
width: 94px;
gap: 2px;
}
.led {
width: 10px;
height: 10px;
border: 1px solid gray;
background-color: whitesmoke;
cursor: pointer;
border-radius: 2px;
}
.led.on {
background-color: blue;
}
button {
width: 94px;
margin-top: 1rem;
}
</style>
</head>
<body>
<div id="matrix">
<div class="row">
update
2022-09-01 05:12:29 +00:00
<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>
新建
2022-08-31 23:40:14 +00:00
</div>
<div class="row">
update
2022-09-01 05:12:29 +00:00
<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>
新建
2022-08-31 23:40:14 +00:00
</div>
<div class="row">
update
2022-09-01 05:12:29 +00:00
<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>
新建
2022-08-31 23:40:14 +00:00
</div>
<div class="row">
update
2022-09-01 05:12:29 +00:00
<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>
新建
2022-08-31 23:40:14 +00:00
</div>
<div class="row">
update
2022-09-01 05:12:29 +00:00
<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>
新建
2022-08-31 23:40:14 +00:00
</div>
<div class="row">
update
2022-09-01 05:12:29 +00:00
<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>
新建
2022-08-31 23:40:14 +00:00
</div>
<div class="row">
update
2022-09-01 05:12:29 +00:00
<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>
新建
2022-08-31 23:40:14 +00:00
</div>
<div class="row">
update
2022-09-01 05:12:29 +00:00
<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>
新建
2022-08-31 23:40:14 +00:00
</div>
</div>
update
2022-09-01 05:30:16 +00:00
<button onclick="client.emit('action', {action:'clear'})">clear all</button>
新建
2022-08-31 23:40:14 +00:00
<br>
update
2022-09-01 05:30:16 +00:00
<button onclick="client.emit('action', {action:'hello'})">hello</button>
新建
2022-08-31 23:40:14 +00:00
<br>
update
2022-09-01 05:30:16 +00:00
<button onclick="client.emit('action', {action:'flash'})">flash</button>
新建
2022-08-31 23:40:14 +00:00
<br>
update
2022-09-01 05:30:16 +00:00
<button onclick="client.emit('action', {action:'temp'})">temp</button>
update
2022-09-01 15:40:23 +00:00
<div id="rpis"></div>
新建
2022-08-31 23:40:14 +00:00
<script src="socket.io/socket.io.js"></script>
<script>
const client = io()
update
2022-09-01 05:12:29 +00:00
function turnon(led) {
const { x, y } = led.dataset
const action = led.classList.toggle('on') ? 'on' : 'off'
client.emit('action', { action, x, y })
}
update
2022-09-01 06:03:56 +00:00
client.on('leds', (array) => {
const leds = document.querySelectorAll('.led')
update
2022-09-01 06:09:47 +00:00
for (let y = 0; y < 8; y++) {
for (let x = 0; x < 8; x++) {
update
2022-09-01 06:10:30 +00:00
const n = y * 8 + x
if (array[y][x] == 1) leds[n].classList.add('on')
else leds[n].classList.remove('on')
update
2022-09-01 06:09:47 +00:00
}
update
2022-09-01 06:03:56 +00:00
}
})
update
2022-09-01 15:40:23 +00:00
client.on('data', (data) => {
rpis.innerHTML = ''
data.forEach(rpi => {
const p = document.createElement('p')
p.innerHTML = `hostname: ${rpi.hostname}<br>cpu load: ${rpi.cpu.load}<br>cpu temperature: ${rpi.cpu.temperature}<br>memory total: ${rpi.memory.total}<br>memory available: ${rpi.memory.available}`
rpis.appendChild(p)
})
})
新建
2022-08-31 23:40:14 +00:00
</script>
</body>
</html>
Reference in New Issue Copy Permalink