Add experimental OLED emulator vuejs component

oled-emulator/.gitignore

@@ -0,0 +1,30 @@
+# Dependencies
+node_modules/
+
+# Build output
+dist/
+
+# Vite cache
+.vite/
+
+# TypeScript cache
+*.tsbuildinfo
+
+# IDE
+.idea/
+.vscode/
+*.swp
+*.swo
+
+# OS
+.DS_Store
+Thumbs.db
+
+# Logs
+*.log
+npm-debug.log*
+
+# Local env files
+.env
+.env.local
+.env.*.local

oled-emulator/README.md

@@ -0,0 +1,149 @@
+# Meshtastic OLED Emulator
+
+A Vue.js component and TypeScript library for emulating SSD1306/SH1106 OLED displays used in Meshtastic devices. This allows firmware UI development and testing directly in the browser.
+
+## Features
+
+- **Same API as firmware**: Uses the same `OLEDDisplay` API as esp8266-oled-ssd1306 library
+- **Multiple display sizes**: 128x64, 128x32, 64x48, 128x128
+- **Realistic rendering**: Pixel glow, OLED color tints (blue, white, yellow/blue dual)
+- **XBM image support**: Render firmware icons and images
+- **Font rendering**: Bitmap font support with text alignment
+- **Vue 3 component**: Easy integration with Vue applications
+
+## Installation
+
+```bash
+npm install @meshtastic/oled-emulator
+```
+
+## Quick Start
+
+```vue
+<script setup lang="ts">
+import { ref, onMounted } from "vue";
+import {
+  OLEDDisplay,
+  OLEDEmulator,
+  ArialMT_Plain_10,
+} from "@meshtastic/oled-emulator";
+
+// Create display matching firmware
+const display = ref(new OLEDDisplay("128x64"));
+
+onMounted(() => {
+  display.value.setFont(ArialMT_Plain_10);
+  display.value.clear();
+  display.value.drawString(10, 10, "Hello Mesh!");
+  display.value.drawRect(5, 5, 118, 54);
+  display.value.fillCircle(64, 32, 15);
+});
+</script>
+
+<template>
+  <OLEDEmulator
+    :display="display"
+    :pixel-scale="4"
+    preset="ssd1306-blue"
+    :enable-glow="true"
+  />
+</template>
+```
+
+## OLEDDisplay API
+
+The `OLEDDisplay` class provides the same methods as the firmware's display library:
+
+```typescript
+const display = new OLEDDisplay("128x64");
+
+// Basic drawing
+display.clear();
+display.setPixel(x, y);
+display.drawLine(x0, y0, x1, y1);
+display.drawRect(x, y, width, height);
+display.fillRect(x, y, width, height);
+display.drawCircle(x, y, radius);
+display.fillCircle(x, y, radius);
+
+// Text
+display.setFont(ArialMT_Plain_10);
+display.setTextAlignment("TEXT_ALIGN_CENTER");
+display.drawString(x, y, "Hello");
+display.drawStringMaxWidth(x, y, maxWidth, "Long text...");
+const width = display.getStringWidth("text");
+
+// Images (XBM format)
+display.drawXbm(x, y, width, height, imageData);
+
+// Colors
+display.setColor("WHITE"); // or 'BLACK', 'INVERSE'
+
+// Buffer access (for custom rendering)
+const buffer = display.getBuffer(); // Uint8Array
+```
+
+## Display Presets
+
+The emulator includes several realistic display presets:
+
+| Preset                | Description                     |
+| --------------------- | ------------------------------- |
+| `ssd1306-blue`        | Classic blue OLED (default)     |
+| `ssd1306-white`       | White OLED                      |
+| `ssd1306-yellow-blue` | Dual-color (top 16 rows yellow) |
+| `sh1106`              | SH1106 style                    |
+| `sh1107`              | SH1107 128x128                  |
+| `ssd1306-64x48`       | Small 64x48 display             |
+| `ssd1306-128x32`      | Wide 128x32 display             |
+
+## Screen Renderers
+
+Pre-built screen renderers matching firmware UI:
+
+```typescript
+import { ScreenRenderers } from "@meshtastic/oled-emulator";
+
+// Boot screen
+ScreenRenderers.drawBootScreen(display, "2.5.0");
+
+// Node info screen
+ScreenRenderers.drawNodeInfoScreen(display, {
+  shortName: "MESH",
+  longName: "My Node",
+  nodeId: "!abcd1234",
+  lastHeard: "2m ago",
+  snr: 12.5,
+});
+
+// Message screen
+ScreenRenderers.drawMessageScreen(display, {
+  from: "Alice",
+  text: "Hello from the mesh!",
+  time: "14:32",
+  channel: "LongFast",
+});
+
+// And more: drawGPSScreen, drawNodeListScreen, drawSystemScreen, drawCompassScreen
+```
+
+## Development
+
+```bash
+# Install dependencies
+npm install
+
+# Run development server
+npm run dev
+
+# Build library
+npm run build
+```
+
+## Future: Protocol Bridge
+
+A future enhancement will allow connecting this emulator to a real Meshtastic firmware instance (running on native/portduino), enabling live framebuffer streaming over WebSocket for real-time display mirroring.
+
+## License
+
+GPL-3.0 - Same as Meshtastic firmware

oled-emulator/index.html

@@ -0,0 +1,22 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Meshtastic OLED Emulator</title>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      body {
+        background: #121212;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>

oled-emulator/package.json

@@ -0,0 +1,54 @@
+{
+  "name": "@meshtastic/oled-emulator",
+  "version": "0.1.0",
+  "description": "Vue.js OLED display emulator for Meshtastic firmware UI development",
+  "keywords": [
+    "meshtastic",
+    "oled",
+    "ssd1306",
+    "sh1106",
+    "display",
+    "emulator",
+    "vue",
+    "vue3"
+  ],
+  "author": "Meshtastic",
+  "license": "GPL-3.0",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/meshtastic/firmware.git",
+    "directory": "oled-emulator"
+  },
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./style.css": "./dist/style.css"
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "vue-tsc && vite build",
+    "preview": "vite preview",
+    "type-check": "vue-tsc --noEmit"
+  },
+  "peerDependencies": {
+    "vue": "^3.3.0"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^5.0.0",
+    "typescript": "^5.3.0",
+    "vite": "^5.0.0",
+    "vite-plugin-dts": "^3.7.0",
+    "vue": "^3.4.0",
+    "vue-tsc": "^2.0.0"
+  }
+}

oled-emulator/src/DisplayPresets.ts

@@ -0,0 +1,82 @@
+/**
+ * DisplayPresets.ts - OLED display presets for emulator
+ */
+
+import type { OLEDDISPLAY_GEOMETRY } from "./OLEDDisplay";
+
+// Display type presets with realistic OLED colors
+export interface DisplayPreset {
+  name: string;
+  geometry: OLEDDISPLAY_GEOMETRY;
+  pixelOn: { r: number; g: number; b: number };
+  pixelOff: { r: number; g: number; b: number };
+  glow: number;
+  contrast: number;
+}
+
+export const DISPLAY_PRESETS: Record<string, DisplayPreset> = {
+  // Classic blue OLED (SSD1306)
+  "ssd1306-blue": {
+    name: "SSD1306 Blue",
+    geometry: "128x64",
+    pixelOn: { r: 100, g: 180, b: 255 },
+    pixelOff: { r: 2, g: 3, b: 8 },
+    glow: 0.4,
+    contrast: 1.0,
+  },
+  // White OLED (SSD1306)
+  "ssd1306-white": {
+    name: "SSD1306 White",
+    geometry: "128x64",
+    pixelOn: { r: 255, g: 255, b: 245 },
+    pixelOff: { r: 5, g: 5, b: 5 },
+    glow: 0.3,
+    contrast: 1.0,
+  },
+  // Yellow-blue dual color OLED
+  "ssd1306-yellow-blue": {
+    name: "SSD1306 Yellow/Blue",
+    geometry: "128x64",
+    // Yellow section is top 16 rows, blue is rest
+    pixelOn: { r: 255, g: 220, b: 50 }, // Will be overridden per-pixel
+    pixelOff: { r: 3, g: 3, b: 5 },
+    glow: 0.35,
+    contrast: 1.0,
+  },
+  // SH1106 (slightly different characteristics)
+  sh1106: {
+    name: "SH1106",
+    geometry: "128x64",
+    pixelOn: { r: 120, g: 200, b: 255 },
+    pixelOff: { r: 2, g: 2, b: 6 },
+    glow: 0.45,
+    contrast: 0.95,
+  },
+  // SH1107 128x128
+  sh1107: {
+    name: "SH1107 128x128",
+    geometry: "128x128",
+    pixelOn: { r: 255, g: 255, b: 240 },
+    pixelOff: { r: 4, g: 4, b: 6 },
+    glow: 0.3,
+    contrast: 1.0,
+  },
+  // Small 64x48 OLED
+  "ssd1306-64x48": {
+    name: "SSD1306 64x48",
+    geometry: "64x48",
+    pixelOn: { r: 100, g: 180, b: 255 },
+    pixelOff: { r: 2, g: 3, b: 8 },
+    glow: 0.4,
+    contrast: 1.0,
+  },
+  // Mini 128x32
+  "ssd1306-128x32": {
+    name: "SSD1306 128x32",
+    geometry: "128x32",
+    pixelOn: { r: 100, g: 180, b: 255 },
+    pixelOff: { r: 2, g: 3, b: 8 },
+    glow: 0.4,
+    contrast: 1.0,
+  },
+};

oled-emulator/src/OLEDDisplay.ts

@@ -0,0 +1,557 @@
+/**
+ * OLEDDisplay.ts - TypeScript port of esp8266-oled-ssd1306 OLEDDisplay API
+ *
+ * This provides the same drawing API as the firmware uses, allowing
+ * Meshtastic screen rendering code to be ported to the web.
+ *
+ * Buffer format: Vertical byte packing (8 vertical pixels per byte)
+ * Same as SSD1306/SH1106 native format.
+ */
+
+export type OLEDDISPLAY_GEOMETRY =
+  | "128x64"
+  | "128x32"
+  | "64x48"
+  | "64x32"
+  | "128x128"
+  | "96x16";
+
+export type OLEDDISPLAY_COLOR = "WHITE" | "BLACK" | "INVERSE";
+
+export type OLEDDISPLAY_TEXT_ALIGNMENT =
+  | "TEXT_ALIGN_LEFT"
+  | "TEXT_ALIGN_CENTER"
+  | "TEXT_ALIGN_RIGHT";
+
+export interface OLEDFont {
+  height: number;
+  firstChar: number;
+  charCount: number;
+  widths: number[];
+  data: Uint8Array;
+}
+
+// Resolution info based on geometry
+const GEOMETRY_SIZES: Record<
+  OLEDDISPLAY_GEOMETRY,
+  { width: number; height: number }
+> = {
+  "128x64": { width: 128, height: 64 },
+  "128x32": { width: 128, height: 32 },
+  "64x48": { width: 64, height: 48 },
+  "64x32": { width: 64, height: 32 },
+  "128x128": { width: 128, height: 128 },
+  "96x16": { width: 96, height: 16 },
+};
+
+export class OLEDDisplay {
+  private buffer: Uint8Array;
+  private _width: number;
+  private _height: number;
+  private color: OLEDDISPLAY_COLOR = "WHITE";
+  private textAlignment: OLEDDISPLAY_TEXT_ALIGNMENT = "TEXT_ALIGN_LEFT";
+  private font: OLEDFont | null = null;
+
+  constructor(geometry: OLEDDISPLAY_GEOMETRY = "128x64") {
+    const size = GEOMETRY_SIZES[geometry];
+    this._width = size.width;
+    this._height = size.height;
+    // Buffer size: width * (height / 8) - vertical byte packing
+    this.buffer = new Uint8Array((this._width * this._height) / 8);
+  }
+
+  get width(): number {
+    return this._width;
+  }
+
+  get height(): number {
+    return this._height;
+  }
+
+  getWidth(): number {
+    return this._width;
+  }
+
+  getHeight(): number {
+    return this._height;
+  }
+
+  /**
+   * Get the raw framebuffer (vertical byte packing format)
+   */
+  getBuffer(): Uint8Array {
+    return this.buffer;
+  }
+
+  getBufferSize(): number {
+    return this.buffer.length;
+  }
+
+  /**
+   * Clear the display buffer
+   */
+  clear(): void {
+    this.buffer.fill(0);
+  }
+
+  /**
+   * Set the drawing color
+   */
+  setColor(color: OLEDDISPLAY_COLOR): void {
+    this.color = color;
+  }
+
+  /**
+   * Set text alignment for drawString
+   */
+  setTextAlignment(align: OLEDDISPLAY_TEXT_ALIGNMENT): void {
+    this.textAlignment = align;
+  }
+
+  /**
+   * Set the current font
+   */
+  setFont(font: OLEDFont): void {
+    this.font = font;
+  }
+
+  /**
+   * Set a single pixel
+   */
+  setPixel(x: number, y: number): void {
+    if (x < 0 || x >= this._width || y < 0 || y >= this._height) return;
+
+    // Vertical byte packing: each byte represents 8 vertical pixels
+    const byteIndex = x + Math.floor(y / 8) * this._width;
+    const bitMask = 1 << (y & 7);
+
+    switch (this.color) {
+      case "WHITE":
+        this.buffer[byteIndex] |= bitMask;
+        break;
+      case "BLACK":
+        this.buffer[byteIndex] &= ~bitMask;
+        break;
+      case "INVERSE":
+        this.buffer[byteIndex] ^= bitMask;
+        break;
+    }
+  }
+
+  /**
+   * Clear a single pixel (set to black)
+   */
+  clearPixel(x: number, y: number): void {
+    if (x < 0 || x >= this._width || y < 0 || y >= this._height) return;
+    const byteIndex = x + Math.floor(y / 8) * this._width;
+    const bitMask = 1 << (y & 7);
+    this.buffer[byteIndex] &= ~bitMask;
+  }
+
+  /**
+   * Get a pixel value (true = on, false = off)
+   */
+  getPixel(x: number, y: number): boolean {
+    if (x < 0 || x >= this._width || y < 0 || y >= this._height) return false;
+    const byteIndex = x + Math.floor(y / 8) * this._width;
+    const bitMask = 1 << (y & 7);
+    return (this.buffer[byteIndex] & bitMask) !== 0;
+  }
+
+  /**
+   * Draw a line using Bresenham's algorithm
+   */
+  drawLine(x0: number, y0: number, x1: number, y1: number): void {
+    const dx = Math.abs(x1 - x0);
+    const dy = Math.abs(y1 - y0);
+    const sx = x0 < x1 ? 1 : -1;
+    const sy = y0 < y1 ? 1 : -1;
+    let err = dx - dy;
+
+    while (true) {
+      this.setPixel(x0, y0);
+      if (x0 === x1 && y0 === y1) break;
+      const e2 = 2 * err;
+      if (e2 > -dy) {
+        err -= dy;
+        x0 += sx;
+      }
+      if (e2 < dx) {
+        err += dx;
+        y0 += sy;
+      }
+    }
+  }
+
+  /**
+   * Draw horizontal line (optimized)
+   */
+  drawHorizontalLine(x: number, y: number, length: number): void {
+    if (y < 0 || y >= this._height) return;
+    for (let i = 0; i < length; i++) {
+      this.setPixel(x + i, y);
+    }
+  }
+
+  /**
+   * Draw vertical line (optimized)
+   */
+  drawVerticalLine(x: number, y: number, length: number): void {
+    if (x < 0 || x >= this._width) return;
+    for (let i = 0; i < length; i++) {
+      this.setPixel(x, y + i);
+    }
+  }
+
+  /**
+   * Draw a rectangle outline
+   */
+  drawRect(x: number, y: number, width: number, height: number): void {
+    this.drawHorizontalLine(x, y, width);
+    this.drawHorizontalLine(x, y + height - 1, width);
+    this.drawVerticalLine(x, y, height);
+    this.drawVerticalLine(x + width - 1, y, height);
+  }
+
+  /**
+   * Draw a filled rectangle
+   */
+  fillRect(x: number, y: number, width: number, height: number): void {
+    for (let i = 0; i < width; i++) {
+      for (let j = 0; j < height; j++) {
+        this.setPixel(x + i, y + j);
+      }
+    }
+  }
+
+  /**
+   * Draw a circle outline using midpoint algorithm
+   */
+  drawCircle(x0: number, y0: number, radius: number): void {
+    let x = radius;
+    let y = 0;
+    let err = 0;
+
+    while (x >= y) {
+      this.setPixel(x0 + x, y0 + y);
+      this.setPixel(x0 + y, y0 + x);
+      this.setPixel(x0 - y, y0 + x);
+      this.setPixel(x0 - x, y0 + y);
+      this.setPixel(x0 - x, y0 - y);
+      this.setPixel(x0 - y, y0 - x);
+      this.setPixel(x0 + y, y0 - x);
+      this.setPixel(x0 + x, y0 - y);
+
+      y++;
+      if (err <= 0) {
+        err += 2 * y + 1;
+      }
+      if (err > 0) {
+        x--;
+        err -= 2 * x + 1;
+      }
+    }
+  }
+
+  /**
+   * Draw a filled circle
+   */
+  fillCircle(x0: number, y0: number, radius: number): void {
+    let x = radius;
+    let y = 0;
+    let err = 0;
+
+    while (x >= y) {
+      this.drawHorizontalLine(x0 - x, y0 + y, 2 * x + 1);
+      this.drawHorizontalLine(x0 - y, y0 + x, 2 * y + 1);
+      this.drawHorizontalLine(x0 - x, y0 - y, 2 * x + 1);
+      this.drawHorizontalLine(x0 - y, y0 - x, 2 * y + 1);
+
+      y++;
+      if (err <= 0) {
+        err += 2 * y + 1;
+      }
+      if (err > 0) {
+        x--;
+        err -= 2 * x + 1;
+      }
+    }
+  }
+
+  /**
+   * Draw a quarter circle (quadrant 0-3)
+   */
+  drawCircleQuads(x0: number, y0: number, radius: number, quads: number): void {
+    let x = radius;
+    let y = 0;
+    let err = 0;
+
+    while (x >= y) {
+      if (quads & 0x1) {
+        this.setPixel(x0 + x, y0 - y);
+        this.setPixel(x0 + y, y0 - x);
+      }
+      if (quads & 0x2) {
+        this.setPixel(x0 - y, y0 - x);
+        this.setPixel(x0 - x, y0 - y);
+      }
+      if (quads & 0x4) {
+        this.setPixel(x0 - x, y0 + y);
+        this.setPixel(x0 - y, y0 + x);
+      }
+      if (quads & 0x8) {
+        this.setPixel(x0 + y, y0 + x);
+        this.setPixel(x0 + x, y0 + y);
+      }
+
+      y++;
+      if (err <= 0) {
+        err += 2 * y + 1;
+      }
+      if (err > 0) {
+        x--;
+        err -= 2 * x + 1;
+      }
+    }
+  }
+
+  /**
+   * Draw an XBM image (like firmware's drawXbm)
+   * XBM format: LSB first, horizontal
+   */
+  drawXbm(
+    x: number,
+    y: number,
+    width: number,
+    height: number,
+    xbm: Uint8Array | number[],
+  ): void {
+    const widthBytes = Math.ceil(width / 8);
+    for (let j = 0; j < height; j++) {
+      for (let i = 0; i < width; i++) {
+        const byteIndex = j * widthBytes + Math.floor(i / 8);
+        const bitIndex = i % 8;
+        if (xbm[byteIndex] & (1 << bitIndex)) {
+          this.setPixel(x + i, y + j);
+        }
+      }
+    }
+  }
+
+  /**
+   * Draw a PROGMEM-style image (vertical byte format, like some firmware icons)
+   */
+  drawFastImage(
+    x: number,
+    y: number,
+    width: number,
+    height: number,
+    image: Uint8Array | number[],
+  ): void {
+    const heightInBytes = Math.ceil(height / 8);
+    for (let i = 0; i < width; i++) {
+      for (let j = 0; j < heightInBytes; j++) {
+        const imageByte = image[i + j * width];
+        for (let bit = 0; bit < 8; bit++) {
+          if (imageByte & (1 << bit)) {
+            this.setPixel(x + i, y + j * 8 + bit);
+          }
+        }
+      }
+    }
+  }
+
+  /**
+   * Get the width of a string with the current font
+   */
+  getStringWidth(text: string): number {
+    if (!this.font) return 0;
+    let width = 0;
+    for (const char of text) {
+      const charCode = char.charCodeAt(0);
+      if (
+        charCode >= this.font.firstChar &&
+        charCode < this.font.firstChar + this.font.charCount
+      ) {
+        width += this.font.widths[charCode - this.font.firstChar];
+      } else {
+        // Unknown char - use space width or default
+        width += this.font.widths[0] || 4;
+      }
+    }
+    return width;
+  }
+
+  /**
+   * Draw a string at the given position
+   */
+  drawString(x: number, y: number, text: string): void {
+    if (!this.font) return;
+
+    // Adjust x based on alignment
+    let startX = x;
+    if (this.textAlignment === "TEXT_ALIGN_CENTER") {
+      startX = x - Math.floor(this.getStringWidth(text) / 2);
+    } else if (this.textAlignment === "TEXT_ALIGN_RIGHT") {
+      startX = x - this.getStringWidth(text);
+    }
+
+    let cursorX = startX;
+    for (const char of text) {
+      const charCode = char.charCodeAt(0);
+      if (
+        charCode >= this.font.firstChar &&
+        charCode < this.font.firstChar + this.font.charCount
+      ) {
+        const charIndex = charCode - this.font.firstChar;
+        const charWidth = this.font.widths[charIndex];
+
+        // Find the offset into the font data
+        let offset = 0;
+        const bytesPerColumn = Math.ceil(this.font.height / 8);
+        for (let i = 0; i < charIndex; i++) {
+          offset += this.font.widths[i] * bytesPerColumn;
+        }
+
+        // Draw the character
+        this.drawFontChar(
+          cursorX,
+          y,
+          charWidth,
+          this.font.height,
+          this.font.data,
+          offset,
+        );
+        cursorX += charWidth;
+      } else {
+        // Unknown character - advance by space
+        cursorX += this.font.widths[0] || 4;
+      }
+    }
+  }
+
+  /**
+   * Draw a single font character
+   */
+  private drawFontChar(
+    x: number,
+    y: number,
+    width: number,
+    height: number,
+    data: Uint8Array,
+    offset: number,
+  ): void {
+    const bytesPerColumn = Math.ceil(height / 8);
+    for (let col = 0; col < width; col++) {
+      for (let byteRow = 0; byteRow < bytesPerColumn; byteRow++) {
+        const dataByte = data[offset + col * bytesPerColumn + byteRow];
+        for (let bit = 0; bit < 8; bit++) {
+          const pixelY = byteRow * 8 + bit;
+          if (pixelY < height && dataByte & (1 << bit)) {
+            this.setPixel(x + col, y + pixelY);
+          }
+        }
+      }
+    }
+  }
+
+  /**
+   * Draw a string that wraps within maxWidth
+   */
+  drawStringMaxWidth(
+    x: number,
+    y: number,
+    maxWidth: number,
+    text: string,
+  ): void {
+    if (!this.font) return;
+
+    const words = text.split(" ");
+    let line = "";
+    let lineY = y;
+
+    for (const word of words) {
+      const testLine = line + (line ? " " : "") + word;
+      const testWidth = this.getStringWidth(testLine);
+
+      if (testWidth > maxWidth && line) {
+        this.drawString(x, lineY, line);
+        line = word;
+        lineY += this.font.height;
+      } else {
+        line = testLine;
+      }
+    }
+
+    if (line) {
+      this.drawString(x, lineY, line);
+    }
+  }
+
+  /**
+   * Draw a progress bar
+   */
+  drawProgressBar(
+    x: number,
+    y: number,
+    width: number,
+    height: number,
+    progress: number,
+  ): void {
+    // Clamp progress 0-100
+    progress = Math.max(0, Math.min(100, progress));
+
+    // Draw outline
+    this.drawRect(x, y, width, height);
+
+    // Draw fill
+    const fillWidth = Math.floor(((width - 4) * progress) / 100);
+    this.fillRect(x + 2, y + 2, fillWidth, height - 4);
+  }
+
+  /**
+   * Display - no-op for emulator (would send buffer to hardware)
+   */
+  display(): void {
+    // In real hardware this sends the buffer to the display
+    // For emulator, this is a no-op - we render from getBuffer()
+  }
+
+  /**
+   * Flip the display (useful for some mounting orientations)
+   */
+  flipScreenVertically(): void {
+    // Rotate buffer 180 degrees
+    const newBuffer = new Uint8Array(this.buffer.length);
+    const heightBytes = this._height / 8;
+
+    for (let x = 0; x < this._width; x++) {
+      for (let yByte = 0; yByte < heightBytes; yByte++) {
+        let srcByte = this.buffer[x + yByte * this._width];
+        // Reverse the bits
+        let reversed = 0;
+        for (let i = 0; i < 8; i++) {
+          if (srcByte & (1 << i)) {
+            reversed |= 1 << (7 - i);
+          }
+        }
+        // Place in mirrored position
+        const newX = this._width - 1 - x;
+        const newYByte = heightBytes - 1 - yByte;
+        newBuffer[newX + newYByte * this._width] = reversed;
+      }
+    }
+
+    this.buffer = newBuffer;
+  }
+}
+
+// Color constants for compatibility with firmware code style
+export const WHITE: OLEDDISPLAY_COLOR = "WHITE";
+export const BLACK: OLEDDISPLAY_COLOR = "BLACK";
+export const INVERSE: OLEDDISPLAY_COLOR = "INVERSE";
+
+export const TEXT_ALIGN_LEFT: OLEDDISPLAY_TEXT_ALIGNMENT = "TEXT_ALIGN_LEFT";
+export const TEXT_ALIGN_CENTER: OLEDDISPLAY_TEXT_ALIGNMENT =
+  "TEXT_ALIGN_CENTER";
+export const TEXT_ALIGN_RIGHT: OLEDDISPLAY_TEXT_ALIGNMENT = "TEXT_ALIGN_RIGHT";

oled-emulator/src/OLEDEmulator.vue

@@ -0,0 +1,327 @@
+<script setup lang="ts">
+/**
+ * OLEDEmulator.vue - Vue 3 component for OLED display emulation
+ * 
+ * Renders an OLEDDisplay framebuffer with realistic OLED visual effects
+ * including pixel glow, color tinting, and various display sizes.
+ */
+
+import { ref, computed, watch, onMounted, onUnmounted, type PropType } from 'vue';
+import { OLEDDisplay } from './OLEDDisplay';
+import { DISPLAY_PRESETS, type DisplayPreset } from './DisplayPresets';
+
+const props = defineProps({
+  /**
+   * The OLEDDisplay instance to render
+   */
+  display: {
+    type: Object as PropType<OLEDDisplay>,
+    required: true,
+  },
+  /**
+   * Pixel scale factor (how many canvas pixels per OLED pixel)
+   */
+  pixelScale: {
+    type: Number,
+    default: 4,
+  },
+  /**
+   * Display preset name or custom preset object
+   */
+  preset: {
+    type: [String, Object] as PropType<string | DisplayPreset>,
+    default: 'ssd1306-blue',
+  },
+  /**
+   * Enable pixel glow effect (slight bloom around lit pixels)
+   */
+  enableGlow: {
+    type: Boolean,
+    default: true,
+  },
+  /**
+   * Enable sub-pixel rendering for more realistic look
+   */
+  enableSubPixel: {
+    type: Boolean,
+    default: false,
+  },
+  /**
+   * Show pixel grid lines
+   */
+  showGrid: {
+    type: Boolean,
+    default: false,
+  },
+  /**
+   * Auto-refresh interval in ms (0 = manual refresh only)
+   */
+  refreshInterval: {
+    type: Number,
+    default: 50,
+  },
+  /**
+   * Yellow/blue split mode for dual-color OLEDs (rows 0-15 yellow)
+   */
+  dualColor: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const emit = defineEmits<{
+  (e: 'click', x: number, y: number): void;
+  (e: 'refresh'): void;
+}>();
+
+const canvas = ref<HTMLCanvasElement | null>(null);
+const refreshTimer = ref<number | null>(null);
+
+// Get the current display preset
+const currentPreset = computed<DisplayPreset>(() => {
+  if (typeof props.preset === 'string') {
+    return DISPLAY_PRESETS[props.preset] || DISPLAY_PRESETS['ssd1306-blue'];
+  }
+  return props.preset;
+});
+
+// Canvas dimensions
+const canvasWidth = computed(() => props.display.width * props.pixelScale);
+const canvasHeight = computed(() => props.display.height * props.pixelScale);
+
+/**
+ * Render the framebuffer to canvas with OLED effects
+ */
+function render(): void {
+  const cvs = canvas.value;
+  if (!cvs) return;
+
+  const ctx = cvs.getContext('2d');
+  if (!ctx) return;
+
+  const buffer = props.display.getBuffer();
+  const width = props.display.width;
+  const height = props.display.height;
+  const scale = props.pixelScale;
+  const preset = currentPreset.value;
+
+  // Create image data
+  const imageData = ctx.createImageData(canvasWidth.value, canvasHeight.value);
+  const data = imageData.data;
+
+  // Yellow color for dual-color mode (top 16 rows)
+  const yellowOn = { r: 255, g: 220, b: 50 };
+  const blueOn = { r: 100, g: 180, b: 255 };
+
+  // Render each OLED pixel
+  for (let y = 0; y < height; y++) {
+    for (let x = 0; x < width; x++) {
+      // Get pixel from framebuffer (vertical byte packing)
+      const byteIndex = x + Math.floor(y / 8) * width;
+      const bitMask = 1 << (y & 7);
+      const isOn = (buffer[byteIndex] & bitMask) !== 0;
+
+      // Determine pixel color
+      let pixelColor: { r: number; g: number; b: number };
+      if (isOn) {
+        if (props.dualColor && y < 16) {
+          pixelColor = yellowOn;
+        } else if (props.dualColor) {
+          pixelColor = blueOn;
+        } else {
+          pixelColor = preset.pixelOn;
+        }
+      } else {
+        pixelColor = preset.pixelOff;
+      }
+
+      // Apply contrast
+      pixelColor = {
+        r: Math.min(255, pixelColor.r * preset.contrast),
+        g: Math.min(255, pixelColor.g * preset.contrast),
+        b: Math.min(255, pixelColor.b * preset.contrast),
+      };
+
+      // Scale up pixel to canvas
+      for (let sy = 0; sy < scale; sy++) {
+        for (let sx = 0; sx < scale; sx++) {
+          const px = x * scale + sx;
+          const py = y * scale + sy;
+          const idx = (py * canvasWidth.value + px) * 4;
+
+          // Apply glow effect (brighter center, dimmer edges)
+          let intensity = 1.0;
+          if (props.enableGlow && isOn) {
+            const centerX = scale / 2;
+            const centerY = scale / 2;
+            const dist = Math.sqrt(
+              Math.pow(sx - centerX, 2) + Math.pow(sy - centerY, 2)
+            );
+            const maxDist = Math.sqrt(2) * (scale / 2);
+            intensity = 1.0 - (dist / maxDist) * preset.glow;
+          }
+
+          // Apply sub-pixel rendering (RGB stripes)
+          if (props.enableSubPixel && isOn) {
+            const subPixelPos = sx % 3;
+            if (subPixelPos === 0) {
+              data[idx] = pixelColor.r * intensity * 1.2;
+              data[idx + 1] = pixelColor.g * intensity * 0.8;
+              data[idx + 2] = pixelColor.b * intensity * 0.8;
+            } else if (subPixelPos === 1) {
+              data[idx] = pixelColor.r * intensity * 0.8;
+              data[idx + 1] = pixelColor.g * intensity * 1.2;
+              data[idx + 2] = pixelColor.b * intensity * 0.8;
+            } else {
+              data[idx] = pixelColor.r * intensity * 0.8;
+              data[idx + 1] = pixelColor.g * intensity * 0.8;
+              data[idx + 2] = pixelColor.b * intensity * 1.2;
+            }
+          } else {
+            data[idx] = pixelColor.r * intensity;
+            data[idx + 1] = pixelColor.g * intensity;
+            data[idx + 2] = pixelColor.b * intensity;
+          }
+          data[idx + 3] = 255; // Alpha
+        }
+      }
+    }
+  }
+
+  // Draw grid lines if enabled
+  if (props.showGrid) {
+    for (let y = 0; y < height; y++) {
+      for (let x = 0; x < width; x++) {
+        // Draw right and bottom edge of each pixel
+        // Right edge
+        const rx = (x + 1) * scale - 1;
+        for (let sy = 0; sy < scale; sy++) {
+          const py = y * scale + sy;
+          const idx = (py * canvasWidth.value + rx) * 4;
+          data[idx] = Math.min(255, data[idx] + 20);
+          data[idx + 1] = Math.min(255, data[idx + 1] + 20);
+          data[idx + 2] = Math.min(255, data[idx + 2] + 20);
+        }
+        // Bottom edge
+        const by = (y + 1) * scale - 1;
+        for (let sx = 0; sx < scale; sx++) {
+          const px = x * scale + sx;
+          const idx = (by * canvasWidth.value + px) * 4;
+          data[idx] = Math.min(255, data[idx] + 20);
+          data[idx + 1] = Math.min(255, data[idx + 1] + 20);
+          data[idx + 2] = Math.min(255, data[idx + 2] + 20);
+        }
+      }
+    }
+  }
+
+  ctx.putImageData(imageData, 0, 0);
+  emit('refresh');
+}
+
+/**
+ * Handle canvas click
+ */
+function handleClick(event: MouseEvent): void {
+  const cvs = canvas.value;
+  if (!cvs) return;
+
+  const rect = cvs.getBoundingClientRect();
+  const scaleX = cvs.width / rect.width;
+  const scaleY = cvs.height / rect.height;
+
+  const canvasX = (event.clientX - rect.left) * scaleX;
+  const canvasY = (event.clientY - rect.top) * scaleY;
+
+  const oledX = Math.floor(canvasX / props.pixelScale);
+  const oledY = Math.floor(canvasY / props.pixelScale);
+
+  emit('click', oledX, oledY);
+}
+
+/**
+ * Start auto-refresh timer
+ */
+function startRefreshTimer(): void {
+  stopRefreshTimer();
+  if (props.refreshInterval > 0) {
+    refreshTimer.value = window.setInterval(render, props.refreshInterval);
+  }
+}
+
+/**
+ * Stop auto-refresh timer
+ */
+function stopRefreshTimer(): void {
+  if (refreshTimer.value !== null) {
+    clearInterval(refreshTimer.value);
+    refreshTimer.value = null;
+  }
+}
+
+// Lifecycle
+onMounted(() => {
+  render();
+  startRefreshTimer();
+});
+
+onUnmounted(() => {
+  stopRefreshTimer();
+});
+
+// Watch for changes
+watch(() => props.refreshInterval, startRefreshTimer);
+watch(() => props.display, render, { deep: true });
+watch(() => props.pixelScale, render);
+watch(() => props.preset, render);
+watch(() => props.enableGlow, render);
+watch(() => props.showGrid, render);
+watch(() => props.dualColor, render);
+
+// Expose render method for manual refresh
+defineExpose({ render });
+</script>
+
+<template>
+  <div class="oled-emulator-wrapper">
+    <canvas
+      ref="canvas"
+      :width="canvasWidth"
+      :height="canvasHeight"
+      class="oled-canvas"
+      @click="handleClick"
+    />
+    <div class="oled-bezel" v-if="$slots.bezel">
+      <slot name="bezel" />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.oled-emulator-wrapper {
+  display: inline-block;
+  position: relative;
+  background: #1a1a1a;
+  padding: 8px;
+  border-radius: 6px;
+  box-shadow: 
+    0 2px 8px rgba(0, 0, 0, 0.4),
+    inset 0 1px 0 rgba(255, 255, 255, 0.05);
+}
+
+.oled-canvas {
+  display: block;
+  border-radius: 2px;
+  image-rendering: pixelated;
+  image-rendering: crisp-edges;
+}
+
+.oled-bezel {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  pointer-events: none;
+}
+</style>

oled-emulator/src/OLEDFonts.ts

@@ -0,0 +1,467 @@
+/**
+ * OLEDFonts.ts - Font data for OLED display emulator
+ *
+ * These are simplified bitmap fonts matching the style used in
+ * Meshtastic firmware (based on ArialMT from esp8266-oled-ssd1306).
+ *
+ * Font format: Vertical byte packing, column-major order
+ * Each character is drawn column by column, with each byte representing
+ * 8 vertical pixels.
+ */
+
+import type { OLEDFont } from "./OLEDDisplay";
+
+/**
+ * ArialMT Plain 10 - Small font (height ~13 pixels)
+ * Covers ASCII 32-126 (space through ~)
+ */
+export const ArialMT_Plain_10: OLEDFont = {
+  height: 13,
+  firstChar: 32,
+  charCount: 95,
+  widths: [
+    3, // space
+    3, // !
+    4, // "
+    6, // #
+    6, // $
+    9, // %
+    7, // &
+    2, // '
+    4, // (
+    4, // )
+    5, // *
+    6, // +
+    3, // ,
+    4, // -
+    3, // .
+    4, // /
+    6, // 0
+    6, // 1
+    6, // 2
+    6, // 3
+    6, // 4
+    6, // 5
+    6, // 6
+    6, // 7
+    6, // 8
+    6, // 9
+    3, // :
+    3, // ;
+    6, // <
+    6, // =
+    6, // >
+    6, // ?
+    11, // @
+    8, // A
+    7, // B
+    7, // C
+    7, // D
+    6, // E
+    6, // F
+    8, // G
+    7, // H
+    3, // I
+    5, // J
+    7, // K
+    6, // L
+    9, // M
+    7, // N
+    8, // O
+    6, // P
+    8, // Q
+    7, // R
+    6, // S
+    6, // T
+    7, // U
+    7, // V
+    11, // W
+    7, // X
+    7, // Y
+    6, // Z
+    4, // [
+    4, // \
+    4, // ]
+    6, // ^
+    6, // _
+    4, // `
+    6, // a
+    6, // b
+    5, // c
+    6, // d
+    6, // e
+    4, // f
+    6, // g
+    6, // h
+    3, // i
+    3, // j
+    6, // k
+    3, // l
+    9, // m
+    6, // n
+    6, // o
+    6, // p
+    6, // q
+    4, // r
+    5, // s
+    4, // t
+    6, // u
+    6, // v
+    9, // w
+    6, // x
+    6, // y
+    5, // z
+    4, // {
+    3, // |
+    4, // }
+    6, // ~
+  ],
+  data: new Uint8Array([
+    // Space (32)
+    0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
+    // ! (33)
+    0x00, 0x00, 0xbe, 0x00, 0x00, 0x00,
+    // " (34)
+    0x00, 0x0e, 0x00, 0x0e, 0x00, 0x00, 0x00, 0x00,
+    // # (35)
+    0x00, 0x48, 0xf8, 0x4e, 0xf8, 0x4e, 0x48, 0x00, 0x00, 0x00, 0x00, 0x00,
+    // $ (36)
+    0x00, 0x9c, 0x92, 0xff, 0x92, 0x64, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
+    // % (37)
+    0x0c, 0x12, 0x12, 0x8c, 0x60, 0x18, 0xc6, 0x20, 0x20, 0x00, 0x00, 0x00,
+    0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
+    // & (38)
+    0x00, 0x60, 0x9c, 0x92, 0x6a, 0xa4, 0x40, 0x00, 0x00, 0x00, 0x00, 0x00,
+    0x00, 0x00,
+    // ' (39)
+    0x00, 0x0e, 0x00, 0x00,
+    // ( (40)
+    0x00, 0x7c, 0x82, 0x00, 0x00, 0x00, 0x00, 0x00,
+    // ) (41)
+    0x00, 0x82, 0x7c, 0x00, 0x00, 0x00, 0x00, 0x00,
+    // * (42)
+    0x14, 0x08, 0x3e, 0x08, 0x14, 0x00, 0x00, 0x00, 0x00, 0x00,
+    // + (43)
+    0x10, 0x10, 0x7c, 0x10, 0x10, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
+    // , (44)
+    0x00, 0x00, 0xc0, 0x00, 0x00, 0x00,
+    // - (45)
+    0x10, 0x10, 0x10, 0x10, 0x00, 0x00, 0x00, 0x00,
+    // . (46)
+    0x00, 0x00, 0x80, 0x00, 0x00, 0x00,
+    // / (47)
+    0x00, 0xc0, 0x38, 0x06, 0x00, 0x00, 0x00, 0x00,
+    // 0 (48)
+    0x7c, 0x82, 0x82, 0x82, 0x7c, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
+    // 1 (49)
+    0x00, 0x04, 0x02, 0xfe, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
+    // 2 (50)
+    0x84, 0xc2, 0xa2, 0x92, 0x8c, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
+    // 3 (51)
+    0x44, 0x82, 0x92, 0x92, 0x6c, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
+    // 4 (52)
+    0x30, 0x28, 0x24, 0xfe, 0x20, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
+    // 5 (53)
+    0x4e, 0x8a, 0x8a, 0x8a, 0x72, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
+    // 6 (54)
+    0x78, 0x94, 0x92, 0x92, 0x60, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
+    // 7 (55)
+    0x02, 0xc2, 0x32, 0x0a, 0x06, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
+    // 8 (56)
+    0x6c, 0x92, 0x92, 0x92, 0x6c, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
+    // 9 (57)
+    0x0c, 0x92, 0x92, 0x52, 0x3c, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
+    // : (58)
+    0x00, 0x00, 0x88, 0x00, 0x00, 0x00,
+    // ; (59)
+    0x00, 0x00, 0xc8, 0x00, 0x00, 0x00,
+    // < (60)
+    0x10, 0x28, 0x28, 0x44, 0x44, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
+    // = (61)
+    0x28, 0x28, 0x28, 0x28, 0x28, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
+    // > (62)
+    0x44, 0x44, 0x28, 0x28, 0x10, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
+    // ? (63)
+    0x04, 0x02, 0xa2, 0x12, 0x0c, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
+    // @ (64)
+    0xf0, 0x08, 0xe4, 0x12, 0x12, 0x12, 0xe2, 0x14, 0x08, 0xf0, 0x00, 0x00,
+    0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
+    // A (65)
+    0x00, 0xc0, 0x38, 0x26, 0x26, 0x38, 0xc0, 0x00, 0x00, 0x00, 0x00, 0x00,
+    0x00, 0x00, 0x00, 0x00,
+    // B (66)
+    0xfe, 0x92, 0x92, 0x92, 0x92, 0x6c, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
+    0x00, 0x00,
+    // C (67)
+    0x7c, 0x82, 0x82, 0x82, 0x82, 0x44, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
+    0x00, 0x00,
+    // D (68)
+    0xfe, 0x82, 0x82, 0x82, 0x44, 0x38, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
+    0x00, 0x00,
+    // E (69)
+    0xfe, 0x92, 0x92, 0x92, 0x82, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
+    // F (70)
+    0xfe, 0x12, 0x12, 0x12, 0x02, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
+    // G (71)
+    0x7c, 0x82, 0x82, 0x92, 0x92, 0x74, 0x10, 0x00, 0x00, 0x00, 0x00, 0x00,
+    0x00, 0x00, 0x00, 0x00,
+    // H (72)
+    0xfe, 0x10, 0x10, 0x10, 0x10, 0xfe, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
+    0x00, 0x00,
+    // I (73)
+    0x00, 0xfe, 0x00, 0x00, 0x00, 0x00,
+    // J (74)
+    0x40, 0x80, 0x80, 0x7e, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
+    // K (75)
+    0xfe, 0x10, 0x28, 0x44, 0x82, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
+    0x00, 0x00,
+    // L (76)
+    0xfe, 0x80, 0x80, 0x80, 0x80, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
+    // M (77)
+    0xfe, 0x04, 0x18, 0x60, 0x60, 0x18, 0x04, 0xfe, 0x00, 0x00, 0x00, 0x00,
+    0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
+    // N (78)
+    0xfe, 0x04, 0x08, 0x30, 0x40, 0xfe, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
+    0x00, 0x00,
+    // O (79)
+    0x7c, 0x82, 0x82, 0x82, 0x82, 0x82, 0x7c, 0x00, 0x00, 0x00, 0x00, 0x00,
+    0x00, 0x00, 0x00, 0x00,
+    // P (80)
+    0xfe, 0x12, 0x12, 0x12, 0x0c, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
+    // Q (81)
+    0x7c, 0x82, 0x82, 0x82, 0x42, 0xc2, 0x7c, 0x00, 0x00, 0x00, 0x00, 0x00,
+    0x00, 0x00, 0x00, 0x00,
+    // R (82)
+    0xfe, 0x12, 0x12, 0x32, 0x4c, 0x80, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
+    0x00, 0x00,
+    // S (83)
+    0x4c, 0x92, 0x92, 0x92, 0x64, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
+    // T (84)
+    0x02, 0x02, 0xfe, 0x02, 0x02, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
+    // U (85)
+    0x7e, 0x80, 0x80, 0x80, 0x80, 0x7e, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
+    0x00, 0x00,
+    // V (86)
+    0x06, 0x18, 0x60, 0x80, 0x60, 0x18, 0x06, 0x00, 0x00, 0x00, 0x00, 0x00,
+    0x00, 0x00,
+    // W (87)
+    0x06, 0x38, 0xc0, 0x38, 0x06, 0x38, 0xc0, 0x38, 0x06, 0x00, 0x00, 0x00,
+    0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
+    // X (88)
+    0x82, 0x44, 0x28, 0x10, 0x28, 0x44, 0x82, 0x00, 0x00, 0x00, 0x00, 0x00,
+    0x00, 0x00,
+    // Y (89)
+    0x02, 0x04, 0x08, 0xf0, 0x08, 0x04, 0x02, 0x00, 0x00, 0x00, 0x00, 0x00,
+    0x00, 0x00,
+    // Z (90)
+    0xc2, 0xa2, 0x92, 0x8a, 0x86, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
+    // [ (91)
+    0x00, 0xfe, 0x82, 0x82, 0x00, 0x00, 0x00, 0x00,
+    // \ (92)
+    0x06, 0x38, 0xc0, 0x00, 0x00, 0x00, 0x00, 0x00,
+    // ] (93)
+    0x82, 0x82, 0xfe, 0x00, 0x00, 0x00, 0x00, 0x00,
+    // ^ (94)
+    0x08, 0x04, 0x02, 0x04, 0x08, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
+    // _ (95)
+    0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
+    // ` (96)
+    0x00, 0x02, 0x04, 0x00, 0x00, 0x00, 0x00, 0x00,
+    // a (97)
+    0x40, 0xa8, 0xa8, 0xa8, 0xf0, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
+    // b (98)
+    0xfe, 0x88, 0x88, 0x88, 0x70, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
+    // c (99)
+    0x70, 0x88, 0x88, 0x88, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
+    // d (100)
+    0x70, 0x88, 0x88, 0x88, 0xfe, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
+    // e (101)
+    0x70, 0xa8, 0xa8, 0xa8, 0x30, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
+    // f (102)
+    0x08, 0xfc, 0x0a, 0x00, 0x00, 0x00, 0x00, 0x00,
+    // g (103)
+    0x30, 0x48, 0x48, 0x48, 0xf8, 0x00, 0x00, 0x01, 0x01, 0x01, 0x00, 0x00,
+    // h (104)
+    0xfe, 0x08, 0x08, 0x08, 0xf0, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
+    // i (105)
+    0x00, 0xfa, 0x00, 0x00, 0x00, 0x00,
+    // j (106)
+    0x00, 0x00, 0xfa, 0x01, 0x00, 0x00,
+    // k (107)
+    0xfe, 0x20, 0x50, 0x88, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
+    // l (108)
+    0x00, 0xfe, 0x00, 0x00, 0x00, 0x00,
+    // m (109)
+    0xf8, 0x08, 0x08, 0xf0, 0x08, 0x08, 0xf0, 0x00, 0x00, 0x00, 0x00, 0x00,
+    0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
+    // n (110)
+    0xf8, 0x08, 0x08, 0x08, 0xf0, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
+    // o (111)
+    0x70, 0x88, 0x88, 0x88, 0x70, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
+    // p (112)
+    0xf8, 0x48, 0x48, 0x48, 0x30, 0x01, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
+    // q (113)
+    0x30, 0x48, 0x48, 0x48, 0xf8, 0x00, 0x00, 0x00, 0x00, 0x01, 0x00, 0x00,
+    // r (114)
+    0xf8, 0x10, 0x08, 0x00, 0x00, 0x00, 0x00, 0x00,
+    // s (115)
+    0x90, 0xa8, 0xa8, 0x48, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
+    // t (116)
+    0x08, 0x7e, 0x88, 0x00, 0x00, 0x00, 0x00, 0x00,
+    // u (117)
+    0x78, 0x80, 0x80, 0x80, 0xf8, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
+    // v (118)
+    0x18, 0x60, 0x80, 0x60, 0x18, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
+    // w (119)
+    0x78, 0x80, 0x60, 0x18, 0x60, 0x80, 0x78, 0x00, 0x00, 0x00, 0x00, 0x00,
+    0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
+    // x (120)
+    0x88, 0x50, 0x20, 0x50, 0x88, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
+    // y (121)
+    0x18, 0x60, 0x80, 0x60, 0x18, 0x00, 0x01, 0x00, 0x00, 0x00, 0x00, 0x00,
+    // z (122)
+    0xc8, 0xa8, 0x98, 0x88, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
+    // { (123)
+    0x10, 0x6c, 0x82, 0x00, 0x00, 0x00, 0x00, 0x00,
+    // | (124)
+    0x00, 0xfe, 0x00, 0x00, 0x00, 0x00,
+    // } (125)
+    0x82, 0x6c, 0x10, 0x00, 0x00, 0x00, 0x00, 0x00,
+    // ~ (126)
+    0x10, 0x08, 0x10, 0x20, 0x10, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
+  ]),
+};
+
+/**
+ * ArialMT Plain 16 - Medium font (height ~19 pixels)
+ * Simplified subset covering 0-9, A-Z, a-z, common punctuation
+ */
+export const ArialMT_Plain_16: OLEDFont = {
+  height: 19,
+  firstChar: 32,
+  charCount: 95,
+  widths: [
+    4, // space
+    4, // !
+    5, // "
+    8, // #
+    8, // $
+    12, // %
+    10, // &
+    2, // '
+    5, // (
+    5, // )
+    6, // *
+    8, // +
+    4, // ,
+    5, // -
+    4, // .
+    4, // /
+    8, // 0
+    8, // 1
+    8, // 2
+    8, // 3
+    8, // 4
+    8, // 5
+    8, // 6
+    8, // 7
+    8, // 8
+    8, // 9
+    4, // :
+    4, // ;
+    8, // <
+    8, // =
+    8, // >
+    8, // ?
+    15, // @
+    10, // A
+    9, // B
+    10, // C
+    10, // D
+    9, // E
+    8, // F
+    11, // G
+    9, // H
+    4, // I
+    6, // J
+    9, // K
+    8, // L
+    11, // M
+    9, // N
+    11, // O
+    9, // P
+    11, // Q
+    10, // R
+    9, // S
+    8, // T
+    9, // U
+    10, // V
+    14, // W
+    10, // X
+    10, // Y
+    9, // Z
+    4, // [
+    4, // \
+    4, // ]
+    7, // ^
+    8, // _
+    5, // `
+    8, // a
+    8, // b
+    7, // c
+    8, // d
+    8, // e
+    4, // f
+    8, // g
+    8, // h
+    4, // i
+    4, // j
+    8, // k
+    4, // l
+    12, // m
+    8, // n
+    8, // o
+    8, // p
+    8, // q
+    5, // r
+    7, // s
+    4, // t
+    8, // u
+    8, // v
+    12, // w
+    8, // x
+    8, // y
+    7, // z
+    5, // {
+    4, // |
+    5, // }
+    8, // ~
+  ],
+  // Font data would be similar pattern but larger - using placeholder
+  data: new Uint8Array(2500).fill(0xff), // Placeholder - would contain actual font bitmap data
+};
+
+/**
+ * Helper to get FONT_HEIGHT_SMALL equivalent
+ */
+export const FONT_HEIGHT_SMALL = 13;
+export const FONT_HEIGHT_MEDIUM = 19;
+export const FONT_HEIGHT_LARGE = 28;
+
+/**
+ * Helper function to create a font from raw byte data (for importing firmware fonts)
+ */
+export function createFontFromBytes(
+  height: number,
+  firstChar: number,
+  widths: number[],
+  data: number[],
+): OLEDFont {
+  return {
+    height,
+    firstChar,
+    charCount: widths.length,
+    widths,
+    data: new Uint8Array(data),
+  };
+}

oled-emulator/src/OLEDImages.ts

@@ -0,0 +1,255 @@
+/**
+ * OLEDImages.ts - Icon and image data for OLED display emulator
+ *
+ * These are direct ports of the XBM/bitmap icons from the Meshtastic firmware.
+ * Format: XBM style (LSB first, horizontal scanning)
+ */
+
+// Satellite icon (8x8)
+export const imgSatellite_width = 8;
+export const imgSatellite_height = 8;
+export const imgSatellite = new Uint8Array([
+  0b00000000, 0b00000000, 0b00000000, 0b00011000, 0b11011011, 0b11111111,
+  0b11011011, 0b00011000,
+]);
+
+// USB icon (10x8)
+export const imgUSB = new Uint8Array([
+  0x00, 0xfc, 0xf0, 0xfc, 0x88, 0xff, 0x86, 0xfe, 0x85, 0xfe, 0x89, 0xff, 0xf1,
+  0xfc, 0x00, 0xfc,
+]);
+
+// Power icon (8x16)
+export const imgPower = new Uint8Array([
+  0x40, 0x40, 0x40, 0x58, 0x48, 0x08, 0x08, 0x08, 0x1c, 0x22, 0x22, 0x41, 0x7f,
+  0x22, 0x22, 0x22,
+]);
+
+// User icon (8x8)
+export const imgUser = new Uint8Array([
+  0x3c, 0x42, 0x99, 0xa5, 0xa5, 0x99, 0x42, 0x3c,
+]);
+
+// Position empty arrow (6x8)
+export const imgPositionEmpty = new Uint8Array([
+  0x20, 0x30, 0x28, 0x24, 0x42, 0xff,
+]);
+
+// Position solid arrow (6x8)
+export const imgPositionSolid = new Uint8Array([
+  0x20, 0x30, 0x38, 0x3c, 0x7e, 0xff,
+]);
+
+// Mail icon (10x7)
+export const mail_width = 10;
+export const mail_height = 7;
+export const mail = new Uint8Array([
+  0b11111111,
+  0b00, // Top line
+  0b10000001,
+  0b00, // Edges
+  0b11000011,
+  0b00, // Diagonals start
+  0b10100101,
+  0b00, // Inner M part
+  0b10011001,
+  0b00, // Inner M part
+  0b10000001,
+  0b00, // Edges
+  0b11111111,
+  0b00, // Bottom line
+]);
+
+// Hop icon (9x10)
+export const hop_width = 9;
+export const hop_height = 10;
+export const hop = new Uint8Array([
+  0x05, 0x00, 0x07, 0x00, 0x05, 0x00, 0x38, 0x00, 0x28, 0x00, 0x38, 0x00, 0xc0,
+  0x01, 0x40, 0x01, 0xc0, 0x01, 0x40, 0x00,
+]);
+
+// Mail icon (8x8)
+export const icon_mail = new Uint8Array([
+  0b11111111, // ████████ top border
+  0b10000001, // █      █ sides
+  0b11000011, // ██    ██ diagonal
+  0b10100101, // █ █  █ █ inner M
+  0b10011001, // █  ██  █ inner M
+  0b10000001, // █      █ sides
+  0b10000001, // █      █ sides
+  0b11111111, // ████████ bottom
+]);
+
+// Compass icon (8x8)
+export const icon_compass = new Uint8Array([
+  0x3c, // Row 0: ..####..
+  0x52, // Row 1: .#..#.#.
+  0x91, // Row 2: #...#..#
+  0x91, // Row 3: #...#..#
+  0x91, // Row 4: #...#..#
+  0x81, // Row 5: #......#
+  0x42, // Row 6: .#....#.
+  0x3c, // Row 7: ..####..
+]);
+
+// Radio icon (8x8)
+export const icon_radio = new Uint8Array([
+  0x0f, // Row 0: ####....
+  0x10, // Row 1: ....#...
+  0x27, // Row 2: ###..#..
+  0x48, // Row 3: ...#..#.
+  0x93, // Row 4: ##..#..#
+  0xa4, // Row 5: ..#..#.#
+  0xa8, // Row 6: ...#.#.#
+  0xa9, // Row 7: #..#.#.#
+]);
+
+// System/settings icon (8x8)
+export const icon_system = new Uint8Array([
+  0x24, // Row 0: ..#..#..
+  0x3c, // Row 1: ..####..
+  0xc3, // Row 2: ##....##
+  0x5a, // Row 3: .#.##.#.
+  0x5a, // Row 4: .#.##.#.
+  0xc3, // Row 5: ##....##
+  0x3c, // Row 6: ..####..
+  0x24, // Row 7: ..#..#..
+]);
+
+// WiFi icon (8x8)
+export const icon_wifi = new Uint8Array([
+  0b00000000, 0b00011000, 0b00111100, 0b01111110, 0b11011011, 0b00011000,
+  0b00011000, 0b00000000,
+]);
+
+// Nodes icon (8x8)
+export const icon_nodes = new Uint8Array([
+  0xf9, // Row 0: #..#####
+  0x00, // Row 1
+  0xf9, // Row 2: #..#####
+  0x00, // Row 3
+  0xf9, // Row 4: #..#####
+  0x00, // Row 5
+  0xf9, // Row 6: #..#####
+  0x00, // Row 7
+]);
+
+// Battery vertical (7x11)
+export const batteryBitmap_v = new Uint8Array([
+  0b00011100, 0b00111110, 0b01000001, 0b01000001, 0b00000000, 0b00000000,
+  0b00000000, 0b01000001, 0b01000001, 0b01000001, 0b00111110,
+]);
+
+// Battery side gaps (8x3)
+export const batteryBitmap_sidegaps_v = new Uint8Array([
+  0b10000010, 0b10000010, 0b10000010,
+]);
+
+// Lightning bolt vertical (5x5)
+export const lightning_bolt_v = new Uint8Array([
+  0b00000100, 0b00000110, 0b00011111, 0b00001100, 0b00000100,
+]);
+
+// Horizontal battery bottom (13x9)
+export const batteryBitmap_h_bottom = new Uint8Array([
+  0b00011110, 0b00000000, 0b00000001, 0b00000000, 0b00000001, 0b00000000,
+  0b00000001, 0b00000000, 0b00000001, 0b00000000, 0b00000001, 0b00000000,
+  0b00000001, 0b00000000, 0b00000001, 0b00000000, 0b00000001, 0b00000000,
+  0b00000001, 0b00000000, 0b00000001, 0b00000000, 0b00000001, 0b00000000,
+  0b00011110, 0b00000000,
+]);
+
+// Horizontal battery top (13x9)
+export const batteryBitmap_h_top = new Uint8Array([
+  0b00111100, 0b00000000, 0b01000000, 0b00000000, 0b01000000, 0b00000000,
+  0b01000000, 0b00000000, 0b01000000, 0b00000000, 0b11000000, 0b00000000,
+  0b11000000, 0b00000000, 0b11000000, 0b00000000, 0b01000000, 0b00000000,
+  0b01000000, 0b00000000, 0b01000000, 0b00000000, 0b01000000, 0b00000000,
+  0b00111100, 0b00000000,
+]);
+
+// Lightning bolt horizontal (13x9)
+export const lightning_bolt_h = new Uint8Array([
+  0b00000000, 0b00000000, 0b00100000, 0b00000000, 0b00110000, 0b00000000,
+  0b00111000, 0b00000000, 0b00111100, 0b00000000, 0b00011110, 0b00000000,
+  0b11111111, 0b00000000, 0b01111000, 0b00000000, 0b00111100, 0b00000000,
+  0b00011100, 0b00000000, 0b00001100, 0b00000000, 0b00000100, 0b00000000,
+  0b00000000, 0b00000000,
+]);
+
+// Signal bars icon (various signal strengths)
+export const signal_bars = {
+  width: 12,
+  height: 8,
+  // 0 bars
+  none: new Uint8Array([
+    0b00000000, 0b00000000, 0b00000000, 0b00000000, 0b00000000, 0b00000000,
+    0b00000000, 0b00000000, 0b00000000, 0b00000000, 0b00000000, 0b00000000,
+    0b00000000, 0b00000000, 0b00000000, 0b00000000,
+  ]),
+  // 1 bar
+  low: new Uint8Array([
+    0b00000000, 0b00000000, 0b00000000, 0b00000000, 0b00000000, 0b00000000,
+    0b00000000, 0b00000000, 0b00000000, 0b00000000, 0b00000000, 0b00000000,
+    0b00000011, 0b00000000, 0b00000011, 0b00000000,
+  ]),
+  // 2 bars
+  medium: new Uint8Array([
+    0b00000000, 0b00000000, 0b00000000, 0b00000000, 0b00000000, 0b00000000,
+    0b00000000, 0b00000000, 0b00001100, 0b00000000, 0b00001100, 0b00000000,
+    0b00001111, 0b00000000, 0b00001111, 0b00000000,
+  ]),
+  // 3 bars
+  high: new Uint8Array([
+    0b00000000, 0b00000000, 0b00000000, 0b00000000, 0b00110000, 0b00000000,
+    0b00110000, 0b00000000, 0b00111100, 0b00000000, 0b00111100, 0b00000000,
+    0b00111111, 0b00000000, 0b00111111, 0b00000000,
+  ]),
+  // 4 bars (full)
+  full: new Uint8Array([
+    0b11000000, 0b00000000, 0b11000000, 0b00000000, 0b11110000, 0b00000000,
+    0b11110000, 0b00000000, 0b11111100, 0b00000000, 0b11111100, 0b00000000,
+    0b11111111, 0b00000000, 0b11111111, 0b00000000,
+  ]),
+};
+
+// Meshtastic logo (simplified 32x32)
+export const logo_width = 32;
+export const logo_height = 32;
+export const meshtastic_logo = new Uint8Array([
+  0x00, 0x00, 0x00, 0x00, 0x00, 0xfc, 0x3f, 0x00, 0x00, 0x06, 0x60, 0x00, 0x00,
+  0x03, 0xc0, 0x00, 0x80, 0x01, 0x80, 0x01, 0xc0, 0x00, 0x00, 0x03, 0x60, 0x00,
+  0x00, 0x06, 0x30, 0x00, 0x00, 0x0c, 0x18, 0xf8, 0x1f, 0x18, 0x08, 0x04, 0x20,
+  0x10, 0x0c, 0x02, 0x40, 0x30, 0x04, 0x01, 0x80, 0x20, 0x06, 0x01, 0x80, 0x60,
+  0x02, 0xe1, 0x87, 0x40, 0x02, 0x11, 0x88, 0x40, 0x03, 0x09, 0x90, 0xc0, 0x03,
+  0x09, 0x90, 0xc0, 0x02, 0x11, 0x88, 0x40, 0x02, 0xe1, 0x87, 0x40, 0x06, 0x01,
+  0x80, 0x60, 0x04, 0x01, 0x80, 0x20, 0x0c, 0x02, 0x40, 0x30, 0x08, 0x04, 0x20,
+  0x10, 0x18, 0xf8, 0x1f, 0x18, 0x30, 0x00, 0x00, 0x0c, 0x60, 0x00, 0x00, 0x06,
+  0xc0, 0x00, 0x00, 0x03, 0x80, 0x01, 0x80, 0x01, 0x00, 0x03, 0xc0, 0x00, 0x00,
+  0x06, 0x60, 0x00, 0x00, 0xfc, 0x3f, 0x00, 0x00, 0x00, 0x00, 0x00,
+]);
+
+// Bluetooth icon (8x11)
+export const icon_bluetooth = new Uint8Array([
+  0b00000000, 0b10000100, 0b01001010, 0b00101010, 0b00010100, 0b11111111,
+  0b00010100, 0b00101010, 0b01001010, 0b10000100, 0b00000000,
+]);
+
+// GPS/Location pin icon (8x12)
+export const icon_gps_pin = new Uint8Array([
+  0b00111100, 0b01111110, 0b11111111, 0b11100111, 0b11100111, 0b11111111,
+  0b01111110, 0b00111100, 0b00011000, 0b00011000, 0b00001000, 0b00000000,
+]);
+
+// Message/chat bubble icon (10x8)
+export const icon_message = new Uint8Array([
+  0b11111111, 0b00, 0b10000001, 0b00, 0b10000001, 0b00, 0b10000001, 0b00,
+  0b10000001, 0b00, 0b11111111, 0b00, 0b00000110, 0b00, 0b00000010, 0b00,
+]);
+
+/**
+ * Helper to convert icon data to XBM format if needed
+ */
+export function toXbm(data: Uint8Array | number[]): Uint8Array {
+  return data instanceof Uint8Array ? data : new Uint8Array(data);
+}

oled-emulator/src/ScreenRenderers.ts

@@ -0,0 +1,627 @@
+/**
+ * ScreenRenderers.ts - Sample screen rendering functions
+ *
+ * These demonstrate how to port Meshtastic firmware UI screens
+ * to the OLED emulator. The API matches the firmware's drawing code.
+ */
+
+import {
+  OLEDDisplay,
+  WHITE,
+  BLACK,
+  TEXT_ALIGN_LEFT,
+  TEXT_ALIGN_CENTER,
+  TEXT_ALIGN_RIGHT,
+} from "./OLEDDisplay";
+import { Font_6x8 } from "./SimpleFonts";
+import * as images from "./OLEDImages";
+
+// Font height for simple 6x8 font
+const FONT_HEIGHT_SMALL = 8;
+
+// Screen resolution detection (matches SharedUIDisplay.cpp)
+export type ScreenResolution = "UltraLow" | "Low" | "High";
+
+export function determineScreenResolution(
+  width: number,
+  height: number,
+): ScreenResolution {
+  if (width <= 64 || height <= 48) {
+    return "UltraLow";
+  }
+  if (width > 128) {
+    return "High";
+  }
+  return "Low";
+}
+
+// Helper for consistent line positioning
+export function getTextPositions(display: OLEDDisplay): number[] {
+  const fontHeight = FONT_HEIGHT_SMALL;
+  return [
+    0, // textZeroLine
+    fontHeight - 1, // textFirstLine
+    fontHeight - 1 + (fontHeight - 5), // textSecondLine
+    fontHeight - 1 + 2 * (fontHeight - 5), // textThirdLine
+    fontHeight - 1 + 3 * (fontHeight - 5), // textFourthLine
+    fontHeight - 1 + 4 * (fontHeight - 5), // textFifthLine
+  ];
+}
+
+/**
+ * Draw a rounded highlight box (used for inverted headers)
+ */
+export function drawRoundedHighlight(
+  display: OLEDDisplay,
+  x: number,
+  y: number,
+  w: number,
+  h: number,
+  r: number,
+): void {
+  // Draw the center and side rectangles
+  display.fillRect(x + r, y, w - 2 * r, h); // center bar
+  display.fillRect(x, y + r, r, h - 2 * r); // left edge
+  display.fillRect(x + w - r, y + r, r, h - 2 * r); // right edge
+
+  // Draw the rounded corners using filled circles
+  display.fillCircle(x + r + 1, y + r, r); // top-left
+  display.fillCircle(x + w - r - 1, y + r, r); // top-right
+  display.fillCircle(x + r + 1, y + h - r - 1, r); // bottom-left
+  display.fillCircle(x + w - r - 1, y + h - r - 1, r); // bottom-right
+}
+
+/**
+ * Draw the common header bar (battery, title, icons)
+ */
+export function drawCommonHeader(
+  display: OLEDDisplay,
+  x: number,
+  y: number,
+  titleStr: string,
+  options: {
+    inverted?: boolean;
+    batteryPercent?: number;
+    isCharging?: boolean;
+    hasUSB?: boolean;
+    hasUnreadMessage?: boolean;
+  } = {},
+): void {
+  const {
+    inverted = true,
+    batteryPercent = 75,
+    isCharging = false,
+    hasUSB = false,
+    hasUnreadMessage = false,
+  } = options;
+
+  const HEADER_OFFSET_Y = 1;
+  y += HEADER_OFFSET_Y;
+
+  display.setFont(Font_6x8);
+  const highlightHeight = FONT_HEIGHT_SMALL - 1;
+  const screenW = display.getWidth();
+
+  if (inverted) {
+    // Draw inverted header background
+    display.setColor(WHITE);
+    drawRoundedHighlight(display, x, y, screenW, highlightHeight, 2);
+    display.setColor(BLACK);
+  } else {
+    // Draw line under header
+    display.setColor(WHITE);
+    display.drawLine(0, 14, screenW, 14);
+  }
+
+  // Draw title centered
+  display.setTextAlignment(TEXT_ALIGN_CENTER);
+  display.drawString(screenW / 2, y, titleStr);
+
+  // Reset color for remaining elements
+  if (inverted) {
+    display.setColor(WHITE);
+  }
+
+  // Draw battery on left
+  let batteryX = 1;
+  const batteryY = HEADER_OFFSET_Y + 1;
+
+  if (hasUSB && !isCharging) {
+    // Draw USB icon
+    display.drawXbm(batteryX + 1, batteryY + 2, 10, 8, images.imgUSB);
+    batteryX += 11;
+  } else {
+    // Draw battery outline
+    display.drawXbm(batteryX, batteryY, 7, 11, images.batteryBitmap_v);
+
+    if (isCharging) {
+      // Draw lightning bolt
+      display.drawXbm(
+        batteryX + 1,
+        batteryY + 3,
+        5,
+        5,
+        images.lightning_bolt_v,
+      );
+    } else {
+      // Draw battery level
+      display.drawXbm(
+        batteryX - 1,
+        batteryY + 4,
+        8,
+        3,
+        images.batteryBitmap_sidegaps_v,
+      );
+      const fillHeight = Math.floor((8 * batteryPercent) / 100);
+      const fillY = batteryY - fillHeight + 10;
+      display.fillRect(batteryX + 1, fillY, 5, fillHeight);
+    }
+    batteryX += 9;
+  }
+
+  // Draw mail icon on right if unread message
+  if (hasUnreadMessage) {
+    const mailX = screenW - images.mail_width - 2;
+    display.drawXbm(
+      mailX,
+      y + 2,
+      images.mail_width,
+      images.mail_height,
+      images.mail,
+    );
+  }
+
+  display.setTextAlignment(TEXT_ALIGN_LEFT);
+  display.setColor(WHITE);
+}
+
+/**
+ * Draw a boot/splash screen with logo
+ */
+export function drawBootScreen(
+  display: OLEDDisplay,
+  appVersion: string = "2.5.0",
+): void {
+  display.clear();
+  display.setFont(Font_6x8);
+  display.setColor(WHITE);
+
+  const centerX = display.getWidth() / 2;
+  const centerY = display.getHeight() / 2;
+
+  // Draw logo centered
+  const logoX = centerX - images.logo_width / 2;
+  const logoY = centerY - images.logo_height / 2 - 8;
+  display.drawXbm(
+    logoX,
+    logoY,
+    images.logo_width,
+    images.logo_height,
+    images.meshtastic_logo,
+  );
+
+  // Draw version below
+  display.setTextAlignment(TEXT_ALIGN_CENTER);
+  display.drawString(
+    centerX,
+    centerY + images.logo_height / 2,
+    `v${appVersion}`,
+  );
+
+  display.setTextAlignment(TEXT_ALIGN_LEFT);
+}
+
+/**
+ * Draw a node info screen
+ */
+export function drawNodeInfoScreen(
+  display: OLEDDisplay,
+  nodeInfo: {
+    shortName: string;
+    longName: string;
+    nodeId: string;
+    batteryLevel?: number;
+    lastHeard?: string;
+    snr?: number;
+    hopsAway?: number;
+  },
+): void {
+  display.clear();
+
+  // Draw header
+  drawCommonHeader(display, 0, 0, "Node Info", {
+    inverted: true,
+    batteryPercent: 85,
+  });
+
+  display.setFont(Font_6x8);
+  display.setColor(WHITE);
+  display.setTextAlignment(TEXT_ALIGN_LEFT);
+
+  const lines = getTextPositions(display);
+  const screenW = display.getWidth();
+
+  // Node name (bolded by drawing twice offset)
+  display.drawString(0, lines[1], nodeInfo.longName);
+  display.drawString(1, lines[1], nodeInfo.longName);
+
+  // Short name and ID
+  display.drawString(0, lines[2], `${nodeInfo.shortName} • ${nodeInfo.nodeId}`);
+
+  // Last heard
+  if (nodeInfo.lastHeard) {
+    display.drawString(0, lines[3], `Heard: ${nodeInfo.lastHeard}`);
+  }
+
+  // Signal info on right side
+  if (nodeInfo.snr !== undefined) {
+    const snrStr = `SNR: ${nodeInfo.snr}dB`;
+    display.setTextAlignment(TEXT_ALIGN_RIGHT);
+    display.drawString(screenW, lines[3], snrStr);
+  }
+
+  // Hops
+  if (nodeInfo.hopsAway !== undefined) {
+    const hopStr =
+      nodeInfo.hopsAway === 0 ? "Direct" : `${nodeInfo.hopsAway} hops`;
+    display.setTextAlignment(TEXT_ALIGN_LEFT);
+    display.drawString(0, lines[4], hopStr);
+  }
+
+  display.setTextAlignment(TEXT_ALIGN_LEFT);
+}
+
+/**
+ * Draw a message screen
+ */
+export function drawMessageScreen(
+  display: OLEDDisplay,
+  message: {
+    from: string;
+    text: string;
+    time: string;
+    channel?: string;
+  },
+): void {
+  display.clear();
+
+  // Draw header with channel name if provided
+  const headerTitle = message.channel || "Message";
+  drawCommonHeader(display, 0, 0, headerTitle, {
+    inverted: true,
+    batteryPercent: 72,
+    hasUnreadMessage: true,
+  });
+
+  display.setFont(Font_6x8);
+  display.setColor(WHITE);
+  display.setTextAlignment(TEXT_ALIGN_LEFT);
+
+  const lines = getTextPositions(display);
+  const screenW = display.getWidth();
+
+  // From line
+  display.drawString(0, lines[1], `From: ${message.from}`);
+
+  // Time on right
+  display.setTextAlignment(TEXT_ALIGN_RIGHT);
+  display.drawString(screenW, lines[1], message.time);
+
+  // Message text (with word wrap)
+  display.setTextAlignment(TEXT_ALIGN_LEFT);
+  display.drawStringMaxWidth(0, lines[2], screenW, message.text);
+}
+
+/**
+ * Draw a GPS/location screen
+ */
+export function drawGPSScreen(
+  display: OLEDDisplay,
+  gpsInfo: {
+    latitude?: number;
+    longitude?: number;
+    altitude?: number;
+    satellites?: number;
+    hasLock: boolean;
+    speed?: number;
+  },
+): void {
+  display.clear();
+
+  drawCommonHeader(display, 0, 0, "GPS", {
+    inverted: true,
+    batteryPercent: 90,
+  });
+
+  display.setFont(Font_6x8);
+  display.setColor(WHITE);
+  display.setTextAlignment(TEXT_ALIGN_LEFT);
+
+  const lines = getTextPositions(display);
+
+  // Draw satellite icon and count
+  display.drawXbm(
+    0,
+    lines[1],
+    images.imgSatellite_width,
+    images.imgSatellite_height,
+    images.imgSatellite,
+  );
+
+  if (!gpsInfo.hasLock) {
+    display.drawString(12, lines[1], "No Lock");
+  } else {
+    display.drawString(12, lines[1], `${gpsInfo.satellites || 0} sats`);
+  }
+
+  if (
+    gpsInfo.hasLock &&
+    gpsInfo.latitude !== undefined &&
+    gpsInfo.longitude !== undefined
+  ) {
+    // Coordinates
+    display.drawString(0, lines[2], `Lat: ${gpsInfo.latitude.toFixed(6)}`);
+    display.drawString(0, lines[3], `Lon: ${gpsInfo.longitude.toFixed(6)}`);
+
+    // Altitude
+    if (gpsInfo.altitude !== undefined) {
+      display.drawString(0, lines[4], `Alt: ${gpsInfo.altitude.toFixed(0)}m`);
+    }
+
+    // Speed
+    if (gpsInfo.speed !== undefined) {
+      const screenW = display.getWidth();
+      display.setTextAlignment(TEXT_ALIGN_RIGHT);
+      display.drawString(screenW, lines[4], `${gpsInfo.speed.toFixed(1)} km/h`);
+    }
+  }
+
+  display.setTextAlignment(TEXT_ALIGN_LEFT);
+}
+
+/**
+ * Draw a node list screen
+ */
+export function drawNodeListScreen(
+  display: OLEDDisplay,
+  nodes: Array<{
+    shortName: string;
+    longName: string;
+    lastHeard: string;
+    snr?: number;
+  }>,
+  selectedIndex: number = 0,
+): void {
+  display.clear();
+
+  drawCommonHeader(display, 0, 0, `Nodes (${nodes.length})`, {
+    inverted: true,
+    batteryPercent: 80,
+  });
+
+  display.setFont(Font_6x8);
+  display.setColor(WHITE);
+  display.setTextAlignment(TEXT_ALIGN_LEFT);
+
+  const lines = getTextPositions(display);
+  const screenW = display.getWidth();
+  const maxVisibleNodes = 4;
+  const startIndex = Math.max(
+    0,
+    selectedIndex - Math.floor(maxVisibleNodes / 2),
+  );
+
+  for (let i = 0; i < maxVisibleNodes && startIndex + i < nodes.length; i++) {
+    const node = nodes[startIndex + i];
+    const lineY = lines[i + 1];
+    const isSelected = startIndex + i === selectedIndex;
+
+    // Highlight selected row
+    if (isSelected) {
+      display.fillRect(0, lineY - 1, screenW, FONT_HEIGHT_SMALL);
+      display.setColor(BLACK);
+    }
+
+    // Node short name
+    display.drawString(0, lineY, node.shortName);
+
+    // Last heard on right
+    display.setTextAlignment(TEXT_ALIGN_RIGHT);
+    display.drawString(screenW, lineY, node.lastHeard);
+    display.setTextAlignment(TEXT_ALIGN_LEFT);
+
+    if (isSelected) {
+      display.setColor(WHITE);
+    }
+  }
+}
+
+/**
+ * Draw a system info screen
+ */
+export function drawSystemScreen(
+  display: OLEDDisplay,
+  sysInfo: {
+    uptime: string;
+    channelUtil: number;
+    airUtil: number;
+    batteryVoltage?: number;
+    nodes: number;
+    freeMemory?: number;
+  },
+): void {
+  display.clear();
+
+  drawCommonHeader(display, 0, 0, "System", {
+    inverted: true,
+    batteryPercent: 95,
+  });
+
+  display.setFont(Font_6x8);
+  display.setColor(WHITE);
+  display.setTextAlignment(TEXT_ALIGN_LEFT);
+
+  const lines = getTextPositions(display);
+  const screenW = display.getWidth();
+
+  // Uptime
+  display.drawString(0, lines[1], `Uptime: ${sysInfo.uptime}`);
+
+  // Channel utilization
+  display.drawString(0, lines[2], `ChUtil: ${sysInfo.channelUtil.toFixed(1)}%`);
+
+  // Air utilization
+  display.setTextAlignment(TEXT_ALIGN_RIGHT);
+  display.drawString(
+    screenW,
+    lines[2],
+    `AirTx: ${sysInfo.airUtil.toFixed(1)}%`,
+  );
+  display.setTextAlignment(TEXT_ALIGN_LEFT);
+
+  // Nodes
+  display.drawString(0, lines[3], `Nodes: ${sysInfo.nodes}`);
+
+  // Battery voltage
+  if (sysInfo.batteryVoltage !== undefined) {
+    display.setTextAlignment(TEXT_ALIGN_RIGHT);
+    display.drawString(
+      screenW,
+      lines[3],
+      `${sysInfo.batteryVoltage.toFixed(2)}V`,
+    );
+  }
+
+  // Free memory
+  if (sysInfo.freeMemory !== undefined) {
+    display.setTextAlignment(TEXT_ALIGN_LEFT);
+    display.drawString(
+      0,
+      lines[4],
+      `Free: ${(sysInfo.freeMemory / 1024).toFixed(0)}KB`,
+    );
+  }
+
+  display.setTextAlignment(TEXT_ALIGN_LEFT);
+}
+
+/**
+ * Draw a compass screen with bearing arrow
+ */
+export function drawCompassScreen(
+  display: OLEDDisplay,
+  compassInfo: {
+    heading: number; // Device heading in degrees
+    bearing: number; // Bearing to target in degrees
+    distance?: number; // Distance to target in meters
+    targetName?: string;
+  },
+): void {
+  display.clear();
+
+  drawCommonHeader(display, 0, 0, compassInfo.targetName || "Compass", {
+    inverted: true,
+    batteryPercent: 70,
+  });
+
+  display.setFont(Font_6x8);
+  display.setColor(WHITE);
+
+  const screenW = display.getWidth();
+  const screenH = display.getHeight();
+
+  // Compass center and radius
+  const compassRadius = Math.min(screenW, screenH - 20) / 2 - 4;
+  const compassX = screenW / 2;
+  const compassY = (screenH + 16) / 2;
+
+  // Draw compass circle
+  display.drawCircle(compassX, compassY, compassRadius);
+
+  // Draw cardinal directions
+  display.setTextAlignment(TEXT_ALIGN_CENTER);
+  display.drawString(compassX, compassY - compassRadius - 10, "N");
+
+  // Calculate relative bearing (bearing - heading)
+  const relativeBearing =
+    ((compassInfo.bearing - compassInfo.heading) * Math.PI) / 180;
+
+  // Draw bearing arrow
+  const arrowLength = compassRadius - 6;
+  const arrowX = compassX + Math.sin(relativeBearing) * arrowLength;
+  const arrowY = compassY - Math.cos(relativeBearing) * arrowLength;
+
+  display.drawLine(compassX, compassY, arrowX, arrowY);
+
+  // Draw arrowhead
+  const headAngle = 0.4;
+  const headLength = 8;
+  const angle1 = relativeBearing + Math.PI - headAngle;
+  const angle2 = relativeBearing + Math.PI + headAngle;
+  display.drawLine(
+    arrowX,
+    arrowY,
+    arrowX + Math.sin(angle1) * headLength,
+    arrowY - Math.cos(angle1) * headLength,
+  );
+  display.drawLine(
+    arrowX,
+    arrowY,
+    arrowX + Math.sin(angle2) * headLength,
+    arrowY - Math.cos(angle2) * headLength,
+  );
+
+  // Draw distance at bottom
+  if (compassInfo.distance !== undefined) {
+    let distStr: string;
+    if (compassInfo.distance >= 1000) {
+      distStr = `${(compassInfo.distance / 1000).toFixed(1)} km`;
+    } else {
+      distStr = `${Math.round(compassInfo.distance)} m`;
+    }
+    display.drawString(compassX, screenH - FONT_HEIGHT_SMALL, distStr);
+  }
+
+  display.setTextAlignment(TEXT_ALIGN_LEFT);
+}
+
+/**
+ * Draw a progress/loading screen
+ */
+export function drawProgressScreen(
+  display: OLEDDisplay,
+  title: string,
+  progress: number,
+  statusText?: string,
+): void {
+  display.clear();
+  display.setFont(Font_6x8);
+  display.setColor(WHITE);
+  display.setTextAlignment(TEXT_ALIGN_CENTER);
+
+  const screenW = display.getWidth();
+  const screenH = display.getHeight();
+  const centerX = screenW / 2;
+  const centerY = screenH / 2;
+
+  // Title
+  display.drawString(centerX, centerY - 20, title);
+
+  // Progress bar
+  const barWidth = screenW - 20;
+  const barHeight = 10;
+  const barX = 10;
+  const barY = centerY - barHeight / 2;
+
+  display.drawProgressBar(barX, barY, barWidth, barHeight, progress);
+
+  // Progress percentage
+  display.drawString(centerX, barY + barHeight + 4, `${Math.round(progress)}%`);
+
+  // Status text
+  if (statusText) {
+    display.drawString(centerX, screenH - FONT_HEIGHT_SMALL - 2, statusText);
+  }
+
+  display.setTextAlignment(TEXT_ALIGN_LEFT);
+}

oled-emulator/src/SimpleFonts.ts

@@ -0,0 +1,421 @@
+/**
+ * SimpleFonts.ts - Simple working bitmap fonts for OLED emulator
+ *
+ * These are basic monospace bitmap fonts that are easy to render correctly.
+ * Format: Each character is stored in column-major order, 1 byte per column.
+ * For fonts taller than 8px, multiple bytes per column are used.
+ */
+
+import type { OLEDFont } from "./OLEDDisplay";
+
+/**
+ * Simple 6x8 monospace font
+ * Each character is 6 columns wide, 8 rows tall
+ * 1 byte per column (8 vertical pixels)
+ * Includes ASCII 32-126
+ */
+export const Font_6x8: OLEDFont = {
+  height: 8,
+  firstChar: 32,
+  charCount: 95,
+  widths: new Array(95).fill(6), // Fixed width font
+  data: new Uint8Array([
+    // Space (32)
+    0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
+    // ! (33)
+    0x00, 0x00, 0x5f, 0x00, 0x00, 0x00,
+    // " (34)
+    0x00, 0x07, 0x00, 0x07, 0x00, 0x00,
+    // # (35)
+    0x14, 0x7f, 0x14, 0x7f, 0x14, 0x00,
+    // $ (36)
+    0x24, 0x2a, 0x7f, 0x2a, 0x12, 0x00,
+    // % (37)
+    0x23, 0x13, 0x08, 0x64, 0x62, 0x00,
+    // & (38)
+    0x36, 0x49, 0x55, 0x22, 0x50, 0x00,
+    // ' (39)
+    0x00, 0x05, 0x03, 0x00, 0x00, 0x00,
+    // ( (40)
+    0x00, 0x1c, 0x22, 0x41, 0x00, 0x00,
+    // ) (41)
+    0x00, 0x41, 0x22, 0x1c, 0x00, 0x00,
+    // * (42)
+    0x08, 0x2a, 0x1c, 0x2a, 0x08, 0x00,
+    // + (43)
+    0x08, 0x08, 0x3e, 0x08, 0x08, 0x00,
+    // , (44)
+    0x00, 0x50, 0x30, 0x00, 0x00, 0x00,
+    // - (45)
+    0x08, 0x08, 0x08, 0x08, 0x08, 0x00,
+    // . (46)
+    0x00, 0x60, 0x60, 0x00, 0x00, 0x00,
+    // / (47)
+    0x20, 0x10, 0x08, 0x04, 0x02, 0x00,
+    // 0 (48)
+    0x3e, 0x51, 0x49, 0x45, 0x3e, 0x00,
+    // 1 (49)
+    0x00, 0x42, 0x7f, 0x40, 0x00, 0x00,
+    // 2 (50)
+    0x42, 0x61, 0x51, 0x49, 0x46, 0x00,
+    // 3 (51)
+    0x21, 0x41, 0x45, 0x4b, 0x31, 0x00,
+    // 4 (52)
+    0x18, 0x14, 0x12, 0x7f, 0x10, 0x00,
+    // 5 (53)
+    0x27, 0x45, 0x45, 0x45, 0x39, 0x00,
+    // 6 (54)
+    0x3c, 0x4a, 0x49, 0x49, 0x30, 0x00,
+    // 7 (55)
+    0x01, 0x71, 0x09, 0x05, 0x03, 0x00,
+    // 8 (56)
+    0x36, 0x49, 0x49, 0x49, 0x36, 0x00,
+    // 9 (57)
+    0x06, 0x49, 0x49, 0x29, 0x1e, 0x00,
+    // : (58)
+    0x00, 0x36, 0x36, 0x00, 0x00, 0x00,
+    // ; (59)
+    0x00, 0x56, 0x36, 0x00, 0x00, 0x00,
+    // < (60)
+    0x00, 0x08, 0x14, 0x22, 0x41, 0x00,
+    // = (61)
+    0x14, 0x14, 0x14, 0x14, 0x14, 0x00,
+    // > (62)
+    0x41, 0x22, 0x14, 0x08, 0x00, 0x00,
+    // ? (63)
+    0x02, 0x01, 0x51, 0x09, 0x06, 0x00,
+    // @ (64)
+    0x32, 0x49, 0x79, 0x41, 0x3e, 0x00,
+    // A (65)
+    0x7e, 0x11, 0x11, 0x11, 0x7e, 0x00,
+    // B (66)
+    0x7f, 0x49, 0x49, 0x49, 0x36, 0x00,
+    // C (67)
+    0x3e, 0x41, 0x41, 0x41, 0x22, 0x00,
+    // D (68)
+    0x7f, 0x41, 0x41, 0x22, 0x1c, 0x00,
+    // E (69)
+    0x7f, 0x49, 0x49, 0x49, 0x41, 0x00,
+    // F (70)
+    0x7f, 0x09, 0x09, 0x01, 0x01, 0x00,
+    // G (71)
+    0x3e, 0x41, 0x41, 0x51, 0x32, 0x00,
+    // H (72)
+    0x7f, 0x08, 0x08, 0x08, 0x7f, 0x00,
+    // I (73)
+    0x00, 0x41, 0x7f, 0x41, 0x00, 0x00,
+    // J (74)
+    0x20, 0x40, 0x41, 0x3f, 0x01, 0x00,
+    // K (75)
+    0x7f, 0x08, 0x14, 0x22, 0x41, 0x00,
+    // L (76)
+    0x7f, 0x40, 0x40, 0x40, 0x40, 0x00,
+    // M (77)
+    0x7f, 0x02, 0x04, 0x02, 0x7f, 0x00,
+    // N (78)
+    0x7f, 0x04, 0x08, 0x10, 0x7f, 0x00,
+    // O (79)
+    0x3e, 0x41, 0x41, 0x41, 0x3e, 0x00,
+    // P (80)
+    0x7f, 0x09, 0x09, 0x09, 0x06, 0x00,
+    // Q (81)
+    0x3e, 0x41, 0x51, 0x21, 0x5e, 0x00,
+    // R (82)
+    0x7f, 0x09, 0x19, 0x29, 0x46, 0x00,
+    // S (83)
+    0x46, 0x49, 0x49, 0x49, 0x31, 0x00,
+    // T (84)
+    0x01, 0x01, 0x7f, 0x01, 0x01, 0x00,
+    // U (85)
+    0x3f, 0x40, 0x40, 0x40, 0x3f, 0x00,
+    // V (86)
+    0x1f, 0x20, 0x40, 0x20, 0x1f, 0x00,
+    // W (87)
+    0x7f, 0x20, 0x18, 0x20, 0x7f, 0x00,
+    // X (88)
+    0x63, 0x14, 0x08, 0x14, 0x63, 0x00,
+    // Y (89)
+    0x03, 0x04, 0x78, 0x04, 0x03, 0x00,
+    // Z (90)
+    0x61, 0x51, 0x49, 0x45, 0x43, 0x00,
+    // [ (91)
+    0x00, 0x00, 0x7f, 0x41, 0x41, 0x00,
+    // \ (92)
+    0x02, 0x04, 0x08, 0x10, 0x20, 0x00,
+    // ] (93)
+    0x41, 0x41, 0x7f, 0x00, 0x00, 0x00,
+    // ^ (94)
+    0x04, 0x02, 0x01, 0x02, 0x04, 0x00,
+    // _ (95)
+    0x40, 0x40, 0x40, 0x40, 0x40, 0x00,
+    // ` (96)
+    0x00, 0x01, 0x02, 0x04, 0x00, 0x00,
+    // a (97)
+    0x20, 0x54, 0x54, 0x54, 0x78, 0x00,
+    // b (98)
+    0x7f, 0x48, 0x44, 0x44, 0x38, 0x00,
+    // c (99)
+    0x38, 0x44, 0x44, 0x44, 0x20, 0x00,
+    // d (100)
+    0x38, 0x44, 0x44, 0x48, 0x7f, 0x00,
+    // e (101)
+    0x38, 0x54, 0x54, 0x54, 0x18, 0x00,
+    // f (102)
+    0x08, 0x7e, 0x09, 0x01, 0x02, 0x00,
+    // g (103)
+    0x08, 0x14, 0x54, 0x54, 0x3c, 0x00,
+    // h (104)
+    0x7f, 0x08, 0x04, 0x04, 0x78, 0x00,
+    // i (105)
+    0x00, 0x44, 0x7d, 0x40, 0x00, 0x00,
+    // j (106)
+    0x20, 0x40, 0x44, 0x3d, 0x00, 0x00,
+    // k (107)
+    0x00, 0x7f, 0x10, 0x28, 0x44, 0x00,
+    // l (108)
+    0x00, 0x41, 0x7f, 0x40, 0x00, 0x00,
+    // m (109)
+    0x7c, 0x04, 0x18, 0x04, 0x78, 0x00,
+    // n (110)
+    0x7c, 0x08, 0x04, 0x04, 0x78, 0x00,
+    // o (111)
+    0x38, 0x44, 0x44, 0x44, 0x38, 0x00,
+    // p (112)
+    0x7c, 0x14, 0x14, 0x14, 0x08, 0x00,
+    // q (113)
+    0x08, 0x14, 0x14, 0x18, 0x7c, 0x00,
+    // r (114)
+    0x7c, 0x08, 0x04, 0x04, 0x08, 0x00,
+    // s (115)
+    0x48, 0x54, 0x54, 0x54, 0x20, 0x00,
+    // t (116)
+    0x04, 0x3f, 0x44, 0x40, 0x20, 0x00,
+    // u (117)
+    0x3c, 0x40, 0x40, 0x20, 0x7c, 0x00,
+    // v (118)
+    0x1c, 0x20, 0x40, 0x20, 0x1c, 0x00,
+    // w (119)
+    0x3c, 0x40, 0x30, 0x40, 0x3c, 0x00,
+    // x (120)
+    0x44, 0x28, 0x10, 0x28, 0x44, 0x00,
+    // y (121)
+    0x0c, 0x50, 0x50, 0x50, 0x3c, 0x00,
+    // z (122)
+    0x44, 0x64, 0x54, 0x4c, 0x44, 0x00,
+    // { (123)
+    0x00, 0x08, 0x36, 0x41, 0x00, 0x00,
+    // | (124)
+    0x00, 0x00, 0x7f, 0x00, 0x00, 0x00,
+    // } (125)
+    0x00, 0x41, 0x36, 0x08, 0x00, 0x00,
+    // ~ (126)
+    0x08, 0x08, 0x2a, 0x1c, 0x08, 0x00,
+  ]),
+};
+
+/**
+ * Simple 5x7 monospace font (more compact)
+ * Each character is 5 columns wide, 7 rows tall
+ * 1 byte per column
+ */
+export const Font_5x7: OLEDFont = {
+  height: 7,
+  firstChar: 32,
+  charCount: 95,
+  widths: new Array(95).fill(5),
+  data: new Uint8Array([
+    // Space (32)
+    0x00, 0x00, 0x00, 0x00, 0x00,
+    // ! (33)
+    0x00, 0x00, 0x2f, 0x00, 0x00,
+    // " (34)
+    0x00, 0x07, 0x00, 0x07, 0x00,
+    // # (35)
+    0x14, 0x3e, 0x14, 0x3e, 0x14,
+    // $ (36)
+    0x24, 0x2a, 0x7f, 0x2a, 0x12,
+    // % (37)
+    0x23, 0x13, 0x08, 0x64, 0x62,
+    // & (38)
+    0x36, 0x49, 0x55, 0x22, 0x50,
+    // ' (39)
+    0x00, 0x05, 0x03, 0x00, 0x00,
+    // ( (40)
+    0x00, 0x1c, 0x22, 0x41, 0x00,
+    // ) (41)
+    0x00, 0x41, 0x22, 0x1c, 0x00,
+    // * (42)
+    0x14, 0x08, 0x3e, 0x08, 0x14,
+    // + (43)
+    0x08, 0x08, 0x3e, 0x08, 0x08,
+    // , (44)
+    0x00, 0x50, 0x30, 0x00, 0x00,
+    // - (45)
+    0x08, 0x08, 0x08, 0x08, 0x08,
+    // . (46)
+    0x00, 0x30, 0x30, 0x00, 0x00,
+    // / (47)
+    0x20, 0x10, 0x08, 0x04, 0x02,
+    // 0 (48)
+    0x3e, 0x51, 0x49, 0x45, 0x3e,
+    // 1 (49)
+    0x00, 0x42, 0x7f, 0x40, 0x00,
+    // 2 (50)
+    0x42, 0x61, 0x51, 0x49, 0x46,
+    // 3 (51)
+    0x21, 0x41, 0x45, 0x4b, 0x31,
+    // 4 (52)
+    0x18, 0x14, 0x12, 0x7f, 0x10,
+    // 5 (53)
+    0x27, 0x45, 0x45, 0x45, 0x39,
+    // 6 (54)
+    0x3c, 0x4a, 0x49, 0x49, 0x30,
+    // 7 (55)
+    0x01, 0x71, 0x09, 0x05, 0x03,
+    // 8 (56)
+    0x36, 0x49, 0x49, 0x49, 0x36,
+    // 9 (57)
+    0x06, 0x49, 0x49, 0x29, 0x1e,
+    // : (58)
+    0x00, 0x36, 0x36, 0x00, 0x00,
+    // ; (59)
+    0x00, 0x56, 0x36, 0x00, 0x00,
+    // < (60)
+    0x08, 0x14, 0x22, 0x41, 0x00,
+    // = (61)
+    0x14, 0x14, 0x14, 0x14, 0x14,
+    // > (62)
+    0x00, 0x41, 0x22, 0x14, 0x08,
+    // ? (63)
+    0x02, 0x01, 0x51, 0x09, 0x06,
+    // @ (64)
+    0x32, 0x49, 0x79, 0x41, 0x3e,
+    // A (65)
+    0x7e, 0x11, 0x11, 0x11, 0x7e,
+    // B (66)
+    0x7f, 0x49, 0x49, 0x49, 0x36,
+    // C (67)
+    0x3e, 0x41, 0x41, 0x41, 0x22,
+    // D (68)
+    0x7f, 0x41, 0x41, 0x22, 0x1c,
+    // E (69)
+    0x7f, 0x49, 0x49, 0x49, 0x41,
+    // F (70)
+    0x7f, 0x09, 0x09, 0x09, 0x01,
+    // G (71)
+    0x3e, 0x41, 0x49, 0x49, 0x7a,
+    // H (72)
+    0x7f, 0x08, 0x08, 0x08, 0x7f,
+    // I (73)
+    0x00, 0x41, 0x7f, 0x41, 0x00,
+    // J (74)
+    0x20, 0x40, 0x41, 0x3f, 0x01,
+    // K (75)
+    0x7f, 0x08, 0x14, 0x22, 0x41,
+    // L (76)
+    0x7f, 0x40, 0x40, 0x40, 0x40,
+    // M (77)
+    0x7f, 0x02, 0x0c, 0x02, 0x7f,
+    // N (78)
+    0x7f, 0x04, 0x08, 0x10, 0x7f,
+    // O (79)
+    0x3e, 0x41, 0x41, 0x41, 0x3e,
+    // P (80)
+    0x7f, 0x09, 0x09, 0x09, 0x06,
+    // Q (81)
+    0x3e, 0x41, 0x51, 0x21, 0x5e,
+    // R (82)
+    0x7f, 0x09, 0x19, 0x29, 0x46,
+    // S (83)
+    0x46, 0x49, 0x49, 0x49, 0x31,
+    // T (84)
+    0x01, 0x01, 0x7f, 0x01, 0x01,
+    // U (85)
+    0x3f, 0x40, 0x40, 0x40, 0x3f,
+    // V (86)
+    0x1f, 0x20, 0x40, 0x20, 0x1f,
+    // W (87)
+    0x3f, 0x40, 0x38, 0x40, 0x3f,
+    // X (88)
+    0x63, 0x14, 0x08, 0x14, 0x63,
+    // Y (89)
+    0x07, 0x08, 0x70, 0x08, 0x07,
+    // Z (90)
+    0x61, 0x51, 0x49, 0x45, 0x43,
+    // [ (91)
+    0x00, 0x7f, 0x41, 0x41, 0x00,
+    // \ (92)
+    0x02, 0x04, 0x08, 0x10, 0x20,
+    // ] (93)
+    0x00, 0x41, 0x41, 0x7f, 0x00,
+    // ^ (94)
+    0x04, 0x02, 0x01, 0x02, 0x04,
+    // _ (95)
+    0x40, 0x40, 0x40, 0x40, 0x40,
+    // ` (96)
+    0x00, 0x01, 0x02, 0x04, 0x00,
+    // a (97)
+    0x20, 0x54, 0x54, 0x54, 0x78,
+    // b (98)
+    0x7f, 0x48, 0x44, 0x44, 0x38,
+    // c (99)
+    0x38, 0x44, 0x44, 0x44, 0x20,
+    // d (100)
+    0x38, 0x44, 0x44, 0x48, 0x7f,
+    // e (101)
+    0x38, 0x54, 0x54, 0x54, 0x18,
+    // f (102)
+    0x08, 0x7e, 0x09, 0x01, 0x02,
+    // g (103)
+    0x0c, 0x52, 0x52, 0x52, 0x3e,
+    // h (104)
+    0x7f, 0x08, 0x04, 0x04, 0x78,
+    // i (105)
+    0x00, 0x44, 0x7d, 0x40, 0x00,
+    // j (106)
+    0x20, 0x40, 0x44, 0x3d, 0x00,
+    // k (107)
+    0x7f, 0x10, 0x28, 0x44, 0x00,
+    // l (108)
+    0x00, 0x41, 0x7f, 0x40, 0x00,
+    // m (109)
+    0x7c, 0x04, 0x18, 0x04, 0x78,
+    // n (110)
+    0x7c, 0x08, 0x04, 0x04, 0x78,
+    // o (111)
+    0x38, 0x44, 0x44, 0x44, 0x38,
+    // p (112)
+    0x7c, 0x14, 0x14, 0x14, 0x08,
+    // q (113)
+    0x08, 0x14, 0x14, 0x18, 0x7c,
+    // r (114)
+    0x7c, 0x08, 0x04, 0x04, 0x08,
+    // s (115)
+    0x48, 0x54, 0x54, 0x54, 0x20,
+    // t (116)
+    0x04, 0x3f, 0x44, 0x40, 0x20,
+    // u (117)
+    0x3c, 0x40, 0x40, 0x20, 0x7c,
+    // v (118)
+    0x1c, 0x20, 0x40, 0x20, 0x1c,
+    // w (119)
+    0x3c, 0x40, 0x30, 0x40, 0x3c,
+    // x (120)
+    0x44, 0x28, 0x10, 0x28, 0x44,
+    // y (121)
+    0x0c, 0x50, 0x50, 0x50, 0x3c,
+    // z (122)
+    0x44, 0x64, 0x54, 0x4c, 0x44,
+    // { (123)
+    0x00, 0x08, 0x36, 0x41, 0x00,
+    // | (124)
+    0x00, 0x00, 0x7f, 0x00, 0x00,
+    // } (125)
+    0x00, 0x41, 0x36, 0x08, 0x00,
+    // ~ (126)
+    0x10, 0x08, 0x08, 0x10, 0x08,
+  ]),
+};
+
+// Alias for compatibility
+export const SimpleFont = Font_6x8;

oled-emulator/src/index.ts

@@ -0,0 +1,50 @@
+/**
+ * Meshtastic OLED Emulator
+ *
+ * A Vue.js component and TypeScript library for emulating SSD1306/SH1106 OLED displays.
+ * Provides the same OLEDDisplay API as the Meshtastic firmware, enabling
+ * screen development and testing in the browser.
+ */
+
+// Core display class
+export {
+  OLEDDisplay,
+  type OLEDDISPLAY_GEOMETRY,
+  type OLEDDISPLAY_COLOR,
+  type OLEDDISPLAY_TEXT_ALIGNMENT,
+  type OLEDFont,
+} from "./OLEDDisplay";
+export {
+  WHITE,
+  BLACK,
+  INVERSE,
+  TEXT_ALIGN_LEFT,
+  TEXT_ALIGN_CENTER,
+  TEXT_ALIGN_RIGHT,
+} from "./OLEDDisplay";
+
+// Fonts
+export {
+  ArialMT_Plain_10,
+  ArialMT_Plain_16,
+  FONT_HEIGHT_SMALL,
+  FONT_HEIGHT_MEDIUM,
+  FONT_HEIGHT_LARGE,
+  createFontFromBytes,
+} from "./OLEDFonts";
+
+// Simple working fonts (recommended)
+export { Font_6x8, Font_5x7, SimpleFont } from "./SimpleFonts";
+
+// Images and icons
+export * as OLEDImages from "./OLEDImages";
+
+// Screen renderers (firmware UI ports)
+export * as ScreenRenderers from "./ScreenRenderers";
+
+// Vue component
+export { default as OLEDEmulator } from "./OLEDEmulator.vue";
+export { DISPLAY_PRESETS, type DisplayPreset } from "./DisplayPresets";
+
+// Demo component
+export { default as OLEDEmulatorDemo } from "./Demo.vue";

oled-emulator/src/main.ts

@@ -0,0 +1,4 @@
+import { createApp } from "vue";
+import Demo from "./Demo.vue";
+
+createApp(Demo).mount("#app");

oled-emulator/tsconfig.json

@@ -0,0 +1,28 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "preserve",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+
+    /* Vue */
+    "types": ["vite/client"]
+  },
+  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"],
+  "exclude": ["node_modules", "dist"]
+}

oled-emulator/vite.config.ts

@@ -0,0 +1,35 @@
+import { defineConfig } from "vite";
+import vue from "@vitejs/plugin-vue";
+import dts from "vite-plugin-dts";
+import { resolve } from "path";
+
+export default defineConfig({
+  plugins: [
+    vue(),
+    dts({
+      insertTypesEntry: true,
+    }),
+  ],
+  build: {
+    lib: {
+      entry: resolve(__dirname, "src/index.ts"),
+      name: "MeshtasticOLEDEmulator",
+      formats: ["es", "cjs"],
+      fileName: (format) => `index.${format === "es" ? "mjs" : "js"}`,
+    },
+    rollupOptions: {
+      external: ["vue"],
+      output: {
+        globals: {
+          vue: "Vue",
+        },
+      },
+    },
+    cssCodeSplit: false,
+  },
+  resolve: {
+    alias: {
+      "@": resolve(__dirname, "src"),
+    },
+  },
+});