98 lines
3.2 KiB
Plaintext
98 lines
3.2 KiB
Plaintext
|
<div class="ui container">
|
||
|
|
<div class="ui grid">
|
||
|
|
<div class="column eight wide">
|
||
|
|
<div class="segment ui">
|
||
|
|
<h4 class="ui header dividing">藍芽狀態</h4>
|
||
|
|
<div class="ui divided list">
|
||
|
|
<div class="item">
|
||
|
|
<div class="ui horizontal label basic">啟用狀態</div>
|
||
|
|
<div class="description t-right" id="en-ble">On</div>
|
||
|
|
</div>
|
||
|
|
<div class="item">
|
||
|
|
<div class="ui horizontal label basic">Mac Address</div>
|
||
|
|
<div class="description t-right" id="ble-mac">00:11:22:33:44:55:66</div>
|
||
|
|
</div>
|
||
|
|
<div class="item">
|
||
|
|
<div class="ui horizontal label basic">ServiceUUID</div>
|
||
|
|
<div class="description t-right" id="ble-service">37B2975E-1A4B-4975-9211-9D47142B8183</div>
|
||
|
|
</div>
|
||
|
|
<div class="item">
|
||
|
|
<div class="ui horizontal label basic">CharacteristicUUID</div>
|
||
|
|
<div class="description t-right" id="ble-character">37B2975E-1A4B-4975-9211-9D47142B8183</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="column eight wide">
|
||
|
|
<div class="segment ui">
|
||
|
|
<h4 class="ui header dividing">印表機狀態</h4>
|
||
|
|
<div class="ui divided list">
|
||
|
|
<div class="item">
|
||
|
|
<div class="ui horizontal label basic">連線狀態</div>
|
||
|
|
<div class="description t-right" id="prt-con">Disconnect</div>
|
||
|
|
</div>
|
||
|
|
<div class="item">
|
||
|
|
<div class="ui horizontal label basic">連接埠</div>
|
||
|
|
<div class="description t-right" id="prt-port">/dev/ttyUSB0</div>
|
||
|
|
</div>
|
||
|
|
<div class="item">
|
||
|
|
<div class="ui horizontal label basic">切紙前空行</div>
|
||
|
|
<div class="description t-right" id="prt-feed">8</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="column eight wide">
|
||
|
|
<div class="segment ui">
|
||
|
|
<h4 class="ui header dividing">列印計數器</h4>
|
||
|
|
<div class="ui divided list">
|
||
|
|
<div class="item">
|
||
|
|
<div class="ui horizontal label basic">列印次數</div>
|
||
|
|
<div class="description t-right" id="prt-count">0</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="column eight wide">
|
||
|
|
<div class="segment ui">
|
||
|
|
<h4 class="ui header dividing">最後列印內容</h4>
|
||
|
|
<div id="prt-last"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
var ws = new WebSocket('ws://' + location.host)
|
||
|
|
ws.onmessage = msg => {
|
||
|
|
// console.log(msg)
|
||
|
|
let data = {}
|
||
|
|
try {
|
||
|
|
data = JSON.parse(msg.data)
|
||
|
|
} catch (err) {
|
||
|
|
return
|
||
|
|
}
|
||
|
|
|
||
|
|
switch(data.type) {
|
||
|
|
case 'status':
|
||
|
|
console.log(data)
|
||
|
|
let d = data.data
|
||
|
|
$('#en-ble').text(d.ble.enable ? 'On' : 'Off')
|
||
|
|
$('#ble-mac').text(d.ble.mac)
|
||
|
|
$('#ble-service').text(d.ble.service)
|
||
|
|
$('#ble-character').text(d.ble.characteristic)
|
||
|
|
|
||
|
|
$('#prt-con').text(d.printer.connect ? 'Connect' : 'Disconnect')
|
||
|
|
$('#prt-port').text(d.printer.serial)
|
||
|
|
$('#prt-feed').text(d.printer.feed)
|
||
|
|
|
||
|
|
$('#prt-count').text(d.pcount)
|
||
|
|
|
||
|
|
$('#prt-last').text(d.lastprint)
|
||
|
|
break
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|