Panic UX.

src/board/display.ts

@@ -30,6 +30,18 @@ export class Display {
     ];
   }
 
+  /**
+   * This is only used for panic. HAL interactions are via setPixel.
+   */
+  show(image: Array<Array<number>>) {
+    for (let y = 0; y < 5; ++y) {
+      for (let x = 0; x < 5; ++x) {
+        this.state[x][y] = clamp(image[y][x], 0, 9);
+      }
+    }
+    this.render();
+  }
+
   clear() {
     this.state = this.initialState();
     this.render();

src/board/index.ts

@@ -49,6 +49,8 @@ export class Board {
   radio: Radio;
   dataLogging: DataLogging;
 
+  private panicTimeout: any;
+
   public serialInputBuffer: number[] = [];
 
   private stoppedOverlay: HTMLDivElement;
@@ -268,6 +270,11 @@ export class Board {
   }
 
   async stop(): Promise<void> {
+    if (this.panicTimeout) {
+      clearTimeout(this.panicTimeout);
+      this.panicTimeout = null;
+      this.display.clear();
+    }
     const interrupt = () => this.serialInputBuffer.push(3, 4); // Ctrl-C, Ctrl-D.
     await this.operations.stop(interrupt);
     this.displayStoppedState();
@@ -289,6 +296,110 @@ export class Board {
     return this.start();
   }
 
+  panic(code: number): void {
+    // We should hang MicroPython here. I think ideally we'd stop it entirely so we do this without any WASM.
+    // For now we just do the display animation.
+    const sad = [
+      [9, 9, 0, 9, 9],
+      [9, 9, 0, 9, 9],
+      [0, 0, 0, 0, 0],
+      [0, 9, 9, 9, 0],
+      [9, 0, 0, 0, 9],
+    ];
+    // Extracted via display.get_pixel.
+    const digitFont = [
+      [
+        [0, 9, 9, 0, 0],
+        [9, 0, 0, 9, 0],
+        [9, 0, 0, 9, 0],
+        [9, 0, 0, 9, 0],
+        [0, 9, 9, 0, 0],
+      ],
+      [
+        [0, 0, 9, 0, 0],
+        [0, 9, 9, 0, 0],
+        [0, 0, 9, 0, 0],
+        [0, 0, 9, 0, 0],
+        [0, 9, 9, 9, 0],
+      ],
+      [
+        [9, 9, 9, 0, 0],
+        [0, 0, 0, 9, 0],
+        [0, 9, 9, 0, 0],
+        [9, 0, 0, 0, 0],
+        [9, 9, 9, 9, 0],
+      ],
+      [
+        [9, 9, 9, 9, 0],
+        [0, 0, 0, 9, 0],
+        [0, 0, 9, 0, 0],
+        [9, 0, 0, 9, 0],
+        [0, 9, 9, 0, 0],
+      ],
+      [
+        [0, 0, 9, 9, 0],
+        [0, 9, 0, 9, 0],
+        [9, 0, 0, 9, 0],
+        [9, 9, 9, 9, 9],
+        [0, 0, 0, 9, 0],
+      ],
+      [
+        [9, 9, 9, 9, 9],
+        [9, 0, 0, 0, 0],
+        [9, 9, 9, 9, 0],
+        [0, 0, 0, 0, 9],
+        [9, 9, 9, 9, 0],
+      ],
+      [
+        [0, 0, 0, 9, 0],
+        [0, 0, 9, 0, 0],
+        [0, 9, 9, 9, 0],
+        [9, 0, 0, 0, 9],
+        [0, 9, 9, 9, 0],
+      ],
+      [
+        [9, 9, 9, 9, 9],
+        [0, 0, 0, 9, 0],
+        [0, 0, 9, 0, 0],
+        [0, 9, 0, 0, 0],
+        [9, 0, 0, 0, 0],
+      ],
+      [
+        [0, 9, 9, 9, 0],
+        [9, 0, 0, 0, 9],
+        [0, 9, 9, 9, 0],
+        [9, 0, 0, 0, 9],
+        [0, 9, 9, 9, 0],
+      ],
+      [
+        [0, 9, 9, 9, 0],
+        [9, 0, 0, 0, 9],
+        [0, 9, 9, 9, 0],
+        [0, 0, 9, 0, 0],
+        [0, 9, 0, 0, 0],
+      ],
+    ];
+    // Three digit code with leading zero if required.
+    // For larger values we just display the last three digits.
+    let digits = code.toString();
+    digits = digits.slice(-3);
+    const prefix = "0".repeat(3 - digits.length);
+    digits = prefix + digits;
+    const frames = [
+      sad,
+      ...Array.from(digits).map((d) => digitFont[parseInt(d, 10)]),
+    ];
+    let nextFrameIndex = 0;
+    const showNextFrame = () => {
+      this.display.show(frames[nextFrameIndex++ % frames.length]);
+      this.panicTimeout = setTimeout(() => {
+        this.display.clear();
+        this.panicTimeout = setTimeout(showNextFrame, 60);
+      }, 600);
+    };
+    showNextFrame();
+  }
+
   mute() {
     this.audio.mute();
   }

src/jshal.h

@@ -39,6 +39,7 @@ void mp_js_hal_filesystem_remove(int idx);
 int mp_js_hal_filesystem_readbyte(int idx, size_t offset);
 int mp_js_hal_filesystem_write(int idx, const char *buf, size_t len);
 
+void mp_js_hal_panic(int code);
 void mp_js_hal_reset(void);
 
 int mp_js_hal_temperature(void);

src/jshal.js

@@ -85,6 +85,10 @@ mergeInto(LibraryManager.library, {
     return board.reset();
   },
 
+  mp_js_hal_panic: function (code) {
+    return board.panic(code);
+  },
+
   mp_js_hal_temperature: function () {
     return board.temperature.value;
   },

src/microbithal_js.c

@@ -69,7 +69,7 @@ void microbit_hal_reset(void) {
 }
 
 void microbit_hal_panic(int code) {
-    //microbit_panic(code);
+    mp_js_hal_panic(code);
 }
 
 int microbit_hal_temperature(void) {