Add support for Dot Matrix Display (#199)

Author: spessasus

package.json

@@ -1,6 +1,6 @@
 {
     "name": "SpessaSynth",
-    "version": "4.1.2",
+    "version": "4.1.3",
     "type": "module",
     "private": true,
     "scripts": {

src/website/changelog.ts

@@ -1,4 +1,4 @@
 /**
  * Note to self: make sure to update this
  */
-export const WHATS_NEW: string[] = [`Updated libraries`] as const;
+export const WHATS_NEW: string[] = [`GS/XG display dots support!`] as const;

src/website/js/renderer/draw_dot_matrix.ts

@@ -0,0 +1,59 @@
+import type { Renderer } from "./renderer.ts";
+
+const DOT_MATRIX_PIXEL_WIDTH = 40;
+const DOT_MATRIX_PIXEL_HEIGHT = 16;
+const DOT_MATRIX_SIZE = 16;
+const DOT_MATRIX_MARGIN = 2;
+const DOT_MATRIX_BG_PADDING = 2;
+
+const DOT_MATRIX_WIDTH =
+    (DOT_MATRIX_PIXEL_WIDTH + DOT_MATRIX_MARGIN) * DOT_MATRIX_SIZE;
+const DOT_MATRIX_HEIGHT =
+    (DOT_MATRIX_PIXEL_HEIGHT + DOT_MATRIX_MARGIN) * DOT_MATRIX_SIZE;
+
+const DOT_MATRIX_ACTIVE = "hsl(0,0%,10%)";
+const DOT_MATRIX_BG_GS = "hsl(30, 100%, 50%)";
+const DOT_MATRIX_INACTIVE_GS = "hsl(30, 100%, 40%)";
+
+const DOT_MATRIX_BG_XG = "hsl(75, 100%, 50%)";
+const DOT_MATRIX_INACTIVE_XG = "hsl(75, 100%, 40%)";
+const SCALE_FACTOR = 800;
+
+export function drawDotMatrix(this: Renderer) {
+    const canvasWidth = this.canvas.width;
+    const canvasHeight = this.canvas.height;
+    const scale = Math.min(canvasWidth, canvasHeight) / SCALE_FACTOR;
+    const matrixWidth = DOT_MATRIX_WIDTH * scale;
+    const matrixHeight = DOT_MATRIX_HEIGHT * scale;
+    const matrixStartX = canvasWidth / 2 - matrixWidth / 2;
+    const matrixStartY = canvasHeight / 2 - matrixHeight / 2;
+    const bgPadding = scale * DOT_MATRIX_BG_PADDING;
+    const dotWidth = scale * DOT_MATRIX_PIXEL_WIDTH;
+    const dotHeight = scale * DOT_MATRIX_PIXEL_HEIGHT;
+    const dotMargin = scale * DOT_MATRIX_MARGIN;
+
+    const isGS = this.showDisplayMatrix === "gs";
+    this.drawingContext.fillStyle = isGS ? DOT_MATRIX_BG_GS : DOT_MATRIX_BG_XG;
+    this.drawingContext.fillRect(
+        matrixStartX - bgPadding,
+        matrixStartY - bgPadding,
+        matrixWidth + 2 * bgPadding,
+        matrixHeight + 2 * bgPadding
+    );
+
+    for (let row = 0; row < DOT_MATRIX_SIZE; row++) {
+        for (let col = 0; col < DOT_MATRIX_SIZE; col++) {
+            this.drawingContext.fillStyle = this.displayMatrix[row][col]
+                ? DOT_MATRIX_ACTIVE
+                : isGS
+                  ? DOT_MATRIX_INACTIVE_GS
+                  : DOT_MATRIX_INACTIVE_XG;
+            this.drawingContext.fillRect(
+                matrixStartX + col * (dotWidth + dotMargin),
+                matrixStartY + row * (dotHeight + dotMargin),
+                dotWidth,
+                dotHeight
+            );
+        }
+    }
+}

src/website/js/renderer/render.ts

@@ -58,6 +58,11 @@ export function render(this: Renderer, auto = true, force = false) {
         }
     }
 
+    // Draw dot matrix
+    if (this.showDisplayMatrix !== null) {
+        this.drawDotMatrix();
+    }
+
     // Calculate fps
     const timeSinceLastFrame = performance.now() - this.frameTimeStart;
     this.frameTimeStart = performance.now();

src/website/js/renderer/renderer.ts

@@ -13,10 +13,15 @@ import {
     renderWaveforms
 } from "./render_waveforms.js";
 import { consoleColors } from "../utils/console_colors.js";
-import { BasicMIDI, midiMessageTypes } from "spessasynth_core";
+import {
+    BasicMIDI,
+    midiMessageTypes,
+    type SynthSystem
+} from "spessasynth_core";
 import type { Sequencer } from "spessasynth_lib";
 import type { LocaleManager } from "../locale/locale_manager.ts";
 import type { Synthesizer } from "../utils/synthesizer.ts";
+import { drawDotMatrix } from "./draw_dot_matrix.ts";
 
 /**
  * Renderer.js
@@ -44,6 +49,8 @@ export const rendererModes = {
 
 export type RendererMode = (typeof rendererModes)[keyof typeof rendererModes];
 
+const DISPLAY_MATRIX_TIMEOUT = 2880;
+
 // Analysers
 const CHANNEL_ANALYSER_FFT = 1024;
 const DRUMS_ANALYSER_FFT = 4096;
@@ -90,6 +97,12 @@ export class Renderer {
     public sideways = false;
     public readonly updateFftSize = updateFftSize.bind(this);
     public readonly render = render.bind(this);
+    /**
+     * For XG/GS display matrix
+     */
+    public readonly displayMatrix = Array.from({ length: 16 }, () =>
+        new Array<boolean>(16).fill(false)
+    );
     protected version: string;
     protected _notesFall = true;
     protected canvas: HTMLCanvasElement;
@@ -120,12 +133,15 @@ export class Renderer {
     protected readonly disconnectChannelAnalysers =
         disconnectChannelAnalysers.bind(this);
     protected readonly renderWaveforms = renderWaveforms.bind(this);
+    protected readonly drawDotMatrix = drawDotMatrix.bind(this);
     protected readonly renderSingleWaveform = renderSingleWaveform.bind(this);
     protected readonly renderSingleFft = renderSingleFft.bind(this);
     protected readonly renderBigFft = renderBigFft.bind(this);
     protected readonly inputNode: AudioNode;
     protected readonly workerMode: boolean;
     protected readonly sampleRateFactor: number;
+    protected showDisplayMatrix: SynthSystem | null = null;
+    private displayMatrixTimeout = 0;
 
     /**
      * Creates a new midi renderer for rendering notes visually.
@@ -248,12 +264,12 @@ export class Renderer {
 
     protected _stabilizeWaveforms = true;
 
-    // noinspection JSUnusedGlobalSymbols
-
     public get stabilizeWaveforms() {
         return this._stabilizeWaveforms;
     }
 
+    // noinspection JSUnusedGlobalSymbols
+
     public set stabilizeWaveforms(val: boolean) {
         this._stabilizeWaveforms = val;
         this.updateFftSize();
@@ -316,6 +332,14 @@ export class Renderer {
         this._notesFall = val === "down";
     }
 
+    public updateDisplayMatrix(mode: SynthSystem) {
+        this.showDisplayMatrix = mode;
+        clearTimeout(this.displayMatrixTimeout);
+        this.displayMatrixTimeout = window.setTimeout(() => {
+            this.showDisplayMatrix = null;
+        }, DISPLAY_MATRIX_TIMEOUT);
+    }
+
     public setRendererMode(mode: RendererMode) {
         this.rendererMode = mode;
         this.updateFftSize();