加入狀態畫面

PrinterDev.js

@@ -12,6 +12,8 @@ class PrinterDevice {
     this._device = null
     this._printer = null
     this._type = null // type = serial or console
+    this._count = 0
+    this._lastPrint = ''
   }
 
   encodeStr (str) {
@@ -114,6 +116,10 @@ class PrinterDevice {
     }
   }
 
+  addCount () {
+    this._count++
+  }
+
   get isOpen () {
     return !!this._isOpen
   }
@@ -122,10 +128,26 @@ class PrinterDevice {
     this._serial = str
   }
 
+  get serial () {
+    return this._serial
+  }
+
   set feed (str) {
     if (!isFinite(str)) return
     this._feed = Math.floor(parseInt(str))
   }
+
+  get feed () {
+    return this._feed
+  }
+
+  get count () {
+    return this._count
+  }
+
+  get lastPrint () {
+    return this._lastPrint || ''
+  }
 }
 
 module.exports = new PrinterDevice()

package.json

@@ -4,7 +4,7 @@
   "main": "app.js",
   "license": "MIT",
   "scripts": {
-    "check":"standard --fix --verbose"
+    "check": "standard --fix --verbose"
   },
   "dependencies": {
     "bleno": "^0.4.2",
@@ -19,7 +19,8 @@
     "koa-router": "^7.2.1",
     "koa-static": "^4.0.1",
     "top-level-await": "^1.1.0",
-    "uuid": "^3.1.0"
+    "uuid": "^3.1.0",
+    "ws": "^3.1.0"
   },
   "devDependencies": {
     "standard": "^10.0.3"

public/css/main.css

@@ -2,4 +2,8 @@ html, body{
   height: 100%;
   width: 100%;
   background-color: #eee;
+}
+
+.t-right {
+  text-align: right;
 }

route/dashboard.js

@@ -0,0 +1,40 @@
+/* eslint-disable no-throw-literal */
+/* eslint-disable */
+const KoaRouter = require('koa-router')
+const router = new KoaRouter()
+const fs = require('fs')
+const path = require('path')
+const Printer = require('../PrinterDev')
+const KoaBody = require('koa-body')
+const uuid = require('uuid')
+/* eslint-enable */
+
+router.use(async (c, n) => {
+  c.data = {
+    title: 'Printer System Dashboard'
+  }
+  let status = 1
+  try {
+    await n()
+  } catch (err) {
+    status = 0
+    if (typeof err === 'string') {
+      c.body = err
+    } else {
+      c.body = err.toString()
+    }
+  }
+
+  if (c.async) {
+    c.body = {
+      status,
+      msg: c.body
+    }
+  }
+})
+
+router.get('/', async (c, n) => {
+  await c.render('dashboard/index', c.data)
+})
+
+module.exports = router

route/install.js

@@ -65,7 +65,7 @@ router
     Printer.feed = feed
 
     let status = await Printer.printTestPage()
-  
+
     if (!status) c.body = '測試失敗'
     else c.body = '測試成功'
   })
@@ -103,7 +103,7 @@ router
 
     let wconfig = await new Promise((resolve, reject) => {
       fs.writeFile(path.resolve(process.env.PROJECT_ROOT, 'config.json'), JSON.stringify(json, null, 2), {
-        mode: 0664,
+        mode: 0o664,
         encoding: 'utf8',
         flag: 'w'
       }, err => {

server.js

@@ -1,6 +1,10 @@
 const Koa = require('koa')
 const fs = require('fs')
 const path = require('path')
+const localEvent = require('./localEvent')
+const WebSocket = require('ws')
+const exec = require('child_process').exec
+const Printer = require('./PrinterDev')
 
 // koa middleware
 const KoaLogger = require('koa-morgan')
@@ -35,6 +39,8 @@ const server = app.listen(config.port || 10230, () => {
   console.log(`Server start on port ${server.address().port}`)
 })
 
+const ws = new WebSocket.Server({ server })
+
 app.use(KoaLogger('short'))
 app.use(KoaStatic(path.resolve(__dirname, 'public')))
 KoaEjs(app, {
@@ -52,6 +58,7 @@ if (setupMode) {
   router = require('./route/install')
 } else {
   console.log(`start normal mode`)
+  router = require('./route/dashboard')
 }
 
 if (router !== null) {
@@ -60,9 +67,80 @@ if (router !== null) {
   app.use(router.allowedMethods())
 
   router.put('/reboot_sys', async (c, n) => {
-    setTimeout(function(){
+    setTimeout(function () {
       process.exit(1)
     }, 2000)
     c.body = '1'
   })
+}
+
+// listen print event
+localEvent.on('print', str => {
+
+})
+
+ws.on('connection', async (client, req) => {
+  console.log(`client conneected`)
+
+  let json = {
+    ble: {
+      enable: false,
+      mac: '',
+      service: '',
+      characteristic: ''
+    },
+    printer: {
+      connect: false,
+      serial: '',
+      feed: 0
+    },
+    pcount: 0,
+    lastprint: ''
+  }
+
+  // 第一次連上線推送系統狀態
+  json.ble.enable = config.ble.enable
+  if (config.ble.enable) {
+    json.ble.mac = await getBTAddr()
+    json.ble.service = config.ble.uuid.service
+    json.ble.characteristic = config.ble.uuid.characteristic
+  }
+  json.printer.connect = Printer.isOpen
+  json.printer.serial = Printer.serial
+  json.printer.feed = Printer.feed
+  json.pcount = Printer.count
+  json.lastprint = Printer.lastPrint
+
+  client.send(JSON.stringify({ type: 'status', data: json }))
+
+  client.on('message', msg => {
+    let m = {}
+    try {
+      m = JSON.parse(msg)
+    } catch (err) {
+      return
+    }
+
+    switch(m.type){
+      case 'status':
+        client.send(JSON.stringify({ type: 'status', data: json }))
+        break
+    }
+
+    console.log(`get msg >> ${msg}`)
+  })
+})
+
+async function getBTAddr() {
+  let address = await new Promise((resolve, reject) => {
+    exec('bt-adapter -i | grep -i address', (err, sout, serr) => {
+      if (err) return resolve('')
+      resolve(sout)
+    })
+  })
+
+  address = address.trim()
+  let arr = address.split(':')
+  if (arr.length !== 2) return ''
+  return arr[1].trim()
 }

views/dashboard/index.ejs

@@ -0,0 +1,24 @@
+<%- include ../includes/header.ejs %>
+
+<div class="ui container" style="padding-top: 20px;">
+  <div class="ui grid">
+    <div class="row">
+      <div class="three wide column">
+        <div class="ui vertical menu">
+          <a href="/" class="item">Dashboard</a>
+          <div class="item">
+            <div class="header">系統功能</div>
+            <div class="menu">
+              <a href="#" class="item">Func1</a>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="thirteen wide column">
+        <%- include statusview.ejs %>
+      </div>
+    </div>
+  </div>
+</div>
+
+<%- include ../includes/footer.ejs %>

views/dashboard/statusview.ejs

@@ -0,0 +1,98 @@
+<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>