133 lines
4.0 KiB
Plaintext
133 lines
4.0 KiB
Plaintext
<div class="ui container">
|
|
<div class="ui grid">
|
|
<div class="column sixteen wide t-right">
|
|
<div class="ui segment">
|
|
<button class="ui button mini" type="button" id="gen-qr">GenerateQR</button>
|
|
</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="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">Disconnected</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>
|
|
|
|
<div class="ui page dimmer" id="qr-dimmer">
|
|
<div class="content">
|
|
<div class="center" id="qr"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
var setting = {
|
|
mac: '',
|
|
service: '',
|
|
characteristic: ''
|
|
}
|
|
|
|
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)
|
|
|
|
setting.mac = d.ble.mac
|
|
setting.service = d.ble.service
|
|
setting.characteristic = d.ble.characteristic
|
|
|
|
$('#prt-con').text(d.printer.connect ? 'Connected' : 'Disconnected')
|
|
$('#prt-port').text(d.printer.serial)
|
|
$('#prt-feed').text(d.printer.feed)
|
|
|
|
$('#prt-count').text(d.pcount)
|
|
|
|
$('#prt-last').text(d.lastprint)
|
|
break
|
|
}
|
|
}
|
|
|
|
$('#gen-qr').click(function () {
|
|
let qrdiv = document.querySelector('div#qr')
|
|
qrdiv.innerHTML = ''
|
|
let qr = new QRCode(qrdiv, {
|
|
text: JSON.stringify(setting, null, 2),
|
|
colorDark: "#000000",
|
|
colorLight: "#ffffff",
|
|
correctLevel: QRCode.CorrectLevel.L
|
|
})
|
|
// qr.makeCode(JSON.stringify(setting, null, 2))
|
|
$('#qr-dimmer').dimmer('show')
|
|
})
|
|
|
|
</script> |