120 lines
5.4 KiB
Plaintext
120 lines
5.4 KiB
Plaintext
extends layout.pug
|
|
|
|
block styles
|
|
style.
|
|
.led-matrix {
|
|
max-width: 384px;
|
|
min-width: 240px;
|
|
}
|
|
|
|
.led-row {}
|
|
|
|
.led {
|
|
margin: 1px;
|
|
aspect-ratio: 1;
|
|
cursor: pointer;
|
|
border-radius: 4px;
|
|
border: 1px solid gray;
|
|
background-color: #ddd;
|
|
}
|
|
|
|
block main
|
|
.container
|
|
h1.h6.text-muted Sense HAT 交互界面
|
|
.container-fluid.bg-success
|
|
.led-matrix.w-auto.mx-auto.p-3
|
|
.led-row.row
|
|
.led.col(data-y='0' data-x='0')
|
|
.led.col(data-y='0' data-x='1')
|
|
.led.col(data-y='0' data-x='2')
|
|
.led.col(data-y='0' data-x='3')
|
|
.led.col(data-y='0' data-x='4')
|
|
.led.col(data-y='0' data-x='5')
|
|
.led.col(data-y='0' data-x='6')
|
|
.led.col(data-y='0' data-x='7')
|
|
.led-row.row
|
|
.led.col(data-y='1' data-x='0')
|
|
.led.col(data-y='1' data-x='1')
|
|
.led.col(data-y='1' data-x='2')
|
|
.led.col(data-y='1' data-x='3')
|
|
.led.col(data-y='1' data-x='4')
|
|
.led.col(data-y='1' data-x='5')
|
|
.led.col(data-y='1' data-x='6')
|
|
.led.col(data-y='1' data-x='7')
|
|
.led-row.row
|
|
.led.col(data-y='2' data-x='0')
|
|
.led.col(data-y='2' data-x='1')
|
|
.led.col(data-y='2' data-x='2')
|
|
.led.col(data-y='2' data-x='3')
|
|
.led.col(data-y='2' data-x='4')
|
|
.led.col(data-y='2' data-x='5')
|
|
.led.col(data-y='2' data-x='6')
|
|
.led.col(data-y='2' data-x='7')
|
|
.led-row.row
|
|
.led.col(data-y='3' data-x='0')
|
|
.led.col(data-y='3' data-x='1')
|
|
.led.col(data-y='3' data-x='2')
|
|
.led.col(data-y='3' data-x='3')
|
|
.led.col(data-y='3' data-x='4')
|
|
.led.col(data-y='3' data-x='5')
|
|
.led.col(data-y='3' data-x='6')
|
|
.led.col(data-y='3' data-x='7')
|
|
.led-row.row
|
|
.led.col(data-y='4' data-x='0')
|
|
.led.col(data-y='4' data-x='1')
|
|
.led.col(data-y='4' data-x='2')
|
|
.led.col(data-y='4' data-x='3')
|
|
.led.col(data-y='4' data-x='4')
|
|
.led.col(data-y='4' data-x='5')
|
|
.led.col(data-y='4' data-x='6')
|
|
.led.col(data-y='4' data-x='7')
|
|
.led-row.row
|
|
.led.col(data-y='5' data-x='0')
|
|
.led.col(data-y='5' data-x='1')
|
|
.led.col(data-y='5' data-x='2')
|
|
.led.col(data-y='5' data-x='3')
|
|
.led.col(data-y='5' data-x='4')
|
|
.led.col(data-y='5' data-x='5')
|
|
.led.col(data-y='5' data-x='6')
|
|
.led.col(data-y='5' data-x='7')
|
|
.led-row.row
|
|
.led.col(data-y='6' data-x='0')
|
|
.led.col(data-y='6' data-x='1')
|
|
.led.col(data-y='6' data-x='2')
|
|
.led.col(data-y='6' data-x='3')
|
|
.led.col(data-y='6' data-x='4')
|
|
.led.col(data-y='6' data-x='5')
|
|
.led.col(data-y='6' data-x='6')
|
|
.led.col(data-y='6' data-x='7')
|
|
.led-row.row
|
|
.led.col(data-y='7' data-x='0')
|
|
.led.col(data-y='7' data-x='1')
|
|
.led.col(data-y='7' data-x='2')
|
|
.led.col(data-y='7' data-x='3')
|
|
.led.col(data-y='7' data-x='4')
|
|
.led.col(data-y='7' data-x='5')
|
|
.led.col(data-y='7' data-x='6')
|
|
.led.col(data-y='7' data-x='7')
|
|
.container-fluid.p-3.bg-light
|
|
.row.gap-1.my-3
|
|
button.col.btn.btn-sm.btn-primary(onclick="client.emit('action', {action:'clear'});") 清空
|
|
button.col.btn.btn-sm.btn-primary(onclick="client.emit('action', {action:'flash', color:current_color});") 闪光
|
|
button.col.btn.btn-sm.btn-primary(onclick="client.emit('action', {action:'loadImage', image:'heart'});") 空心
|
|
button.col.btn.btn-sm.btn-primary(onclick="client.emit('action', {action:'loadImage', image:'heart_full'});") 红心
|
|
.row.gap-1.my-3
|
|
button.col.btn.btn-sm.btn-primary(onclick="client.emit('action', {action:'flipH'});") 左右镜像
|
|
button.col.btn.btn-sm.btn-primary(onclick="client.emit('action', {action:'flipV'});") 上下镜像
|
|
button.col.btn.btn-sm.btn-primary(onclick="client.emit('action', {action:'showMessage', text:'Hello', speed:0.2})") 滚动信息
|
|
button.col.btn.btn-sm.btn-primary(onclick="client.emit('action', {action:'flashMessage', text:'Hello', speed:0.6})") 闪烁信息
|
|
.row.gap-1.my-3
|
|
button.col.btn.btn-sm.btn-dark(onclick="current_color=[0,0,0];") 黑
|
|
button.col.btn.btn-sm.btn-white(onclick="current_color=[255,255,255];") 白
|
|
button.col.btn.btn-sm.btn-danger(onclick="current_color=[255,0,0];") 红
|
|
button.col.btn.btn-sm.btn-success(onclick="current_color=[0,255,0];") 绿
|
|
button.col.btn.btn-sm.btn-primary(onclick="current_color=[0,0,255];") 蓝
|
|
button.col.btn.btn-sm.btn-warning(onclick="current_color=[255,255,0];") 黄
|
|
|
|
block scripts
|
|
script(src="http://pi/sensehat/socket.io/socket.io.js", defer)
|
|
script(src="/js/sensehat.js", defer)
|