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)