Improve visual debug mode

build.sh

@@ -13,7 +13,8 @@ npm run babel -- -o js/app.js --source-maps jssrc/lib \
     jssrc/wifi.js \
     jssrc/term_* \
     jssrc/term.js \
-    jssrc/soft_keyboard.js
+    jssrc/soft_keyboard.js \
+    jssrc/debug_screen.js
 
 echo 'Building CSS...'
 

jssrc/debug_screen.js

@@ -0,0 +1,103 @@
+if (Screen) {
+  const debugCanvas = mk('canvas')
+  const ctx = debugCanvas.getContext('2d')
+
+  debugCanvas.style.position = 'absolute'
+  // hackity hack should probably set this in CSS
+  debugCanvas.style.top = '6px'
+  debugCanvas.style.left = '6px'
+
+  let addCanvas = function () {
+    if (!debugCanvas.parentNode) qs('#screen').appendChild(debugCanvas)
+  }
+  let removeCanvas = function () {
+    if (debugCanvas.parentNode) qs('#screen').removeChild(debugCanvas)
+  }
+  let updateCanvasSize = function () {
+    let { width, height, devicePixelRatio } = Screen.window
+    let cellSize = Screen.getCellSize()
+    debugCanvas.width = width * cellSize.width * devicePixelRatio
+    debugCanvas.height = height * cellSize.height * devicePixelRatio
+    debugCanvas.style.width = `${width * cellSize.width}px`
+    debugCanvas.style.height = `${height * cellSize.height}px`
+  }
+
+  let startTime, endTime
+  let cells = new Map()
+
+  let startDrawing
+
+  Screen._debug = {
+    drawStart (reason) {
+      startTime = Date.now()
+    },
+    drawEnd () {
+      endTime = Date.now()
+      startDrawing()
+    },
+    setCell (cell, flags) {
+      cells.set(cell, [flags, Date.now()])
+    }
+  }
+
+  let isDrawing = false
+
+  let drawLoop = function () {
+    if (isDrawing) requestAnimationFrame(drawLoop)
+
+    let { devicePixelRatio, width, height } = Screen.window
+    let { width: cellWidth, height: cellHeight } = Screen.getCellSize()
+    let screenLength = width * height
+    let now = Date.now()
+
+    ctx.setTransform(devicePixelRatio, 0, 0, devicePixelRatio, 0, 0)
+    ctx.clearRect(0, 0, width * cellWidth, height * cellHeight)
+
+    let activeCells = 0
+    for (let cell = 0; cell < screenLength; cell++) {
+      if (!cells.has(cell) || cells.get(cell)[0] === 0) continue
+
+      let [flags, timestamp] = cells.get(cell)
+      let elapsedTime = (now - timestamp) / 1000
+
+      if (elapsedTime > 1) continue
+
+      activeCells++
+      ctx.globalAlpha = 0.5 * Math.max(0, 1 - elapsedTime)
+
+      let x = cell % width
+      let y = Math.floor(cell / width)
+
+      if (flags & 1) {
+        // redrawn
+        ctx.fillStyle = '#f0f'
+      }
+      if (flags & 2) {
+        // updated
+        ctx.fillStyle = '#0f0'
+      }
+
+      ctx.fillRect(x * cellWidth, y * cellHeight, cellWidth, cellHeight)
+
+      if (flags & 4) {
+        // wide cell
+        ctx.lineWidth = 2
+        ctx.strokeStyle = '#f00'
+        ctx.strokeRect(x * cellWidth, y * cellHeight, cellWidth, cellHeight)
+      }
+    }
+
+    if (activeCells === 0) {
+      isDrawing = false
+      removeCanvas()
+    }
+  }
+
+  startDrawing = function () {
+    if (isDrawing) return
+    addCanvas()
+    updateCanvasSize()
+    isDrawing = true
+    drawLoop()
+  }
+}

jssrc/term_screen.js

@@ -703,12 +703,7 @@ class TermScreen {
 
     ctx.setTransform(devicePixelRatio, 0, 0, devicePixelRatio, 0, 0)
 
-    if (this.window.debug) {
+    if (this.window.debug && this._debug) this._debug.drawStart(why)
-      // differentiate static cells from updated cells
-      ctx.fillStyle = 'rgba(255, 0, 255, 0.3)'
-      ctx.fillRect(0, 0, screenWidth, screenHeight)
-      console.log(`draw: ${why}`)
-    }
 
     ctx.font = this.getFont()
     ctx.textAlign = 'center'
@@ -859,16 +854,12 @@ class TermScreen {
           this.drawnScreenBG[cell] = bg
           this.drawnScreenAttrs[cell] = attrs
 
-          if (this.window.debug) {
+          if (this.window.debug && this._debug) {
-            // add cell data
+            // set cell flags
-            ctx.save()
+            let flags = 1 // always redrawn
-            ctx.fillStyle = '#0f0'
+            flags |= (+updateMap.get(cell)) << 1
-            ctx.font = '6px monospace'
+            flags |= (+isTextWide(text)) << 2
-            ctx.textAlign = 'left'
+            this._debug.setCell(cell, flags)
-            ctx.textBaseline = 'top'
-            ctx.fillText(+isTextWide(text), x * cellWidth, y * cellHeight)
-            ctx.fillText(+updateMap.get(cell), x * cellWidth, y * cellHeight + 6)
-            ctx.restore()
           }
         }
 
@@ -901,6 +892,8 @@ class TermScreen {
         }
       }
     }
+
+    if (this.window.debug && this._debug) this._debug.drawEnd()
   }
 
   loadContent (str) {