MultiMote · bfour · Apr 3, 2026 · Apr 4, 2026 · Apr 4, 2026
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -24,6 +24,7 @@
 		"@mmote/niimbluelib": "0.0.1-alpha.38",
 		"@popperjs/core": "^2.11.8",
 		"bootstrap": "5.3.8",
+		"bwip-js": "4.9.0",
 		"d3-dsv": "^3.0.1",
 		"dayjs": "^1.11.19",
 		"fabric": "^7.1.0",
@@ -38,6 +39,7 @@
 		"@sveltejs/vite-plugin-svelte": "^6.2.1",
 		"@tsconfig/svelte": "^5.0.5",
 		"@types/bootstrap": "^5.2.10",
+		"@types/bwip-js": "3.2.3",
 		"@types/d3-dsv": "^3.0.7",
 		"@types/node": "^24.10.0",
 		"@types/qrcode-svg": "^1.1.5",

diff --git a/src/components/LabelDesigner.svelte b/src/components/LabelDesigner.svelte
@@ -5,6 +5,7 @@
   import { ArUcoMarker } from "$/fabric-object/aruco";
   import { Barcode } from "$/fabric-object/barcode";
   import { QRCode } from "$/fabric-object/qrcode";
+  import { DataMatrix } from "$/fabric-object/datamatrix";
   import { iconCodepoints, type MaterialIcon } from "$/styles/mdi_icons";
   import { automation, connectionState, csvData, loadedFonts } from "$/stores";
   import {
@@ -30,6 +31,7 @@
   import PrintPreview from "$/components/PrintPreview.svelte";
   import ArUcoParamsPanel from "$/components/designer-controls/ArUcoParamsControls.svelte";
   import QrCodeParamsPanel from "$/components/designer-controls/QRCodeParamsControls.svelte";
+  import DataMatrixParamsPanel from "$/components/designer-controls/DataMatrixParamsControls.svelte";
   import TextParamsControls from "$/components/designer-controls/TextParamsControls.svelte";
   import VariableInsertControl from "$/components/designer-controls/VariableInsertControl.svelte";
   import { DEFAULT_LABEL_PROPS, GRID_SIZE, OBJECT_DEFAULTS } from "$/defaults";
@@ -550,6 +552,10 @@
         {#if selectedObject instanceof QRCode}
           <QrCodeParamsPanel selectedQRCode={selectedObject} {editRevision} valueUpdated={controlValueUpdated} />
         {/if}
+
+        {#if selectedObject instanceof DataMatrix}
+          <DataMatrixParamsPanel selectedDataMatrix={selectedObject} {editRevision} valueUpdated={controlValueUpdated} />
+        {/if}
 
         {#if selectedObject instanceof ArUcoMarker}
           <ArUcoParamsPanel selectedArUco={selectedObject} {editRevision} valueUpdated={controlValueUpdated} />
@@ -559,7 +565,7 @@
           <BarcodeParamsPanel selectedBarcode={selectedObject} {editRevision} valueUpdated={controlValueUpdated} />
         {/if}
 
-        {#if selectedObject instanceof fabric.IText || selectedObject instanceof QRCode || (selectedObject instanceof Barcode && selectedObject.encoding === "CODE128B")}
+        {#if selectedObject instanceof fabric.IText || selectedObject instanceof QRCode || selectedObject instanceof DataMatrix || (selectedObject instanceof Barcode && selectedObject.encoding === "CODE128B")}
           <VariableInsertControl {selectedObject} valueUpdated={controlValueUpdated} />
         {/if}
       </div>

diff --git a/src/components/designer-controls/DataMatrixParamsControls.svelte b/src/components/designer-controls/DataMatrixParamsControls.svelte
@@ -0,0 +1,31 @@
+<script lang="ts">
+  import { DataMatrix } from "$/fabric-object/datamatrix";
+
+  interface Props {
+    selectedDataMatrix: DataMatrix;
+    editRevision: number;
+    valueUpdated: () => void;
+  }
+
+  let { selectedDataMatrix, editRevision, valueUpdated }: Props = $props();
+</script>
+
+<input type="hidden" value={editRevision}>
+
+<textarea
+  class="datamatrix-content form-control"
+  value={selectedDataMatrix.text}
+  oninput={(e) => {
+    selectedDataMatrix?.set("text", e.currentTarget.value);
+    valueUpdated();
+  }}></textarea>
+
+<style>
+  .input-group {
+    width: fit-content;
+  }
+
+  .datamatrix-content {
+    height: 100px;
+  }
+</style>
diff --git a/src/components/designer-controls/ObjectPicker.svelte b/src/components/designer-controls/ObjectPicker.svelte
@@ -49,6 +49,10 @@
         <MdIcon icon="qr_code_2" />
         {$tr("editor.objectpicker.qrcode")}
       </button>
+      <button class="btn me-1" onclick={() => onSubmit("datamatrix")}>
+        <MdIcon icon="qr_code_2" />
+        {$tr("editor.objectpicker.datamatrix")}
+      </button>      
       <button class="btn me-1" onclick={() => onSubmit("aruco")}>
         <MdIcon icon="grid_on" />
         {$tr("editor.objectpicker.aruco")}

diff --git a/src/components/designer-controls/ObjectPositionControls.svelte b/src/components/designer-controls/ObjectPositionControls.svelte
@@ -6,6 +6,8 @@
   import QRCode from "$/fabric-object/qrcode";
   import Barcode from "$/fabric-object/barcode";
 
+  import { DataMatrix } from "$/fabric-object/datamatrix";
+
   interface Props {
     selectedObject: fabric.FabricObject;
   }
@@ -75,7 +77,7 @@
       <span class="input-group-text">y</span>
       <input class="form-control" type="number" bind:value={y} onchange={updateObject} />
     </div>
-    {#if !(selectedObject instanceof fabric.FabricText || selectedObject instanceof fabric.FabricImage || selectedObject instanceof QRCode || selectedObject instanceof Barcode)}
+    {#if !(selectedObject instanceof fabric.FabricText || selectedObject instanceof fabric.FabricImage || selectedObject instanceof QRCode || selectedObject instanceof DataMatrix || selectedObject instanceof Barcode)}
       <div class="input-group flex-nowrap input-group-sm mb-2">
         <input class="form-control" type="number" min="1" bind:value={width} onchange={updateObject} />
         <span class="input-group-text">x</span>

diff --git a/src/components/designer-controls/VariableInsertControl.svelte b/src/components/designer-controls/VariableInsertControl.svelte
@@ -2,6 +2,7 @@
   import * as fabric from "fabric";
   import { tr } from "$/utils/i18n";
   import QRCode from "$/fabric-object/qrcode";
+  import { DataMatrix } from "$/fabric-object/datamatrix";
   import Barcode from "$/fabric-object/barcode";
   import MdIcon from "$/components/basic/MdIcon.svelte";
 
@@ -21,7 +22,7 @@
     if (selectedObject instanceof fabric.IText) {
       selectedObject.exitEditing();
       selectedObject.set({ text: `${selectedObject.text}${value}` });
-    } else if (selectedObject instanceof QRCode) {
+    } else if (selectedObject instanceof QRCode || selectedObject instanceof DataMatrix) {
       selectedObject.set({ text: `${selectedObject.text}${value}` });
     } else if (selectedObject instanceof Barcode) {
       selectedObject.set({ text: `${selectedObject.text}${value}` });

diff --git a/src/fabric-object/datamatrix.ts b/src/fabric-object/datamatrix.ts
@@ -0,0 +1,128 @@
+import bwipjs from "bwip-js";
+import * as fabric from "fabric";
+import { OBJECT_SIZE_DEFAULTS } from "$/defaults";
+import { CanvasUtils } from "$/utils/canvas_utils";
+
+export const dataMatrixDefaultValues: Partial<fabric.TClassProperties<DataMatrix>> = {
+  text: "Text",
+  stroke: "#000000",
+  fill: "#ffffff",
+  ...OBJECT_SIZE_DEFAULTS,
+};
+
+interface UniqueDataMatrixProps {
+  text: string;
+}
+export interface DataMatrixProps extends fabric.FabricObjectProps, UniqueDataMatrixProps {}
+export interface SerializedDataMatrixProps extends fabric.SerializedObjectProps, UniqueDataMatrixProps {}
+const DATAMATRIX_PROPS = ["text", "size"] as const;
+
+export class DataMatrix<
+    Props extends fabric.TOptions<DataMatrixProps> = Partial<DataMatrixProps>,
+    SProps extends SerializedDataMatrixProps = SerializedDataMatrixProps,
+    EventSpec extends fabric.ObjectEvents = fabric.ObjectEvents,
+  >
+  extends fabric.FabricObject<Props, SProps, EventSpec>
+  implements DataMatrixProps
+{
+  static override readonly type = "DataMatrix";
+
+  /**
+   * DataMatrix text
+   */
+  declare text: string;
+
+  constructor(options?: Props) {
+    super();
+    Object.assign(this, dataMatrixDefaultValues);
+    this.setOptions(options);
+    this.lockScalingFlip = true;
+    this.setControlsVisibility({
+      ml: false,
+      mt: false,
+      mr: false,
+      mb: false,
+      tl: false,
+      tr: false,
+      bl: false,
+    });
+  }
+
+  override _set(key: string, value: any): this {
+    super._set(key, value);
+    if (key === "text") {
+      this.dirty = true;
+    }
+
+    return this;
+  }
+
+  override _render(ctx: CanvasRenderingContext2D): void {
+    if (!this.text) {
+      CanvasUtils.renderError(ctx, this.width, this.height);
+      super._render(ctx);
+      return;
+    }
+
+    let dmData: any;
+
+    try {
+      const res = bwipjs.raw({ bcid: "datamatrix", text: this.text });
+      dmData = res?.[0];
+      if (!dmData || !('pixs' in dmData)) throw new Error("Invalid bwip-js output");
+    } catch (e) {
+      console.error(e);
+      CanvasUtils.renderError(ctx, this.width, this.height);
+      super._render(ctx);
+      return;
+    }
+
+    const { pixs, pixx, pixy } = dmData;
+
+    // Choose scaling factor to map modules to canvas size
+    const dmScaleX = Math.floor(this.width / pixx);
+    const dmScaleY = Math.floor(this.height / pixy);
+    const dmScale = Math.min(dmScaleX, dmScaleY);
+
+    let dmWidth = dmScale * pixx;
+    let dmHeight = dmScale * pixy;
+    dmWidth -= dmWidth % 2; // avoid half-pixel rendering
+    dmHeight -= dmHeight % 2;
+
+    if (dmScale < 1 || dmWidth > this.width || dmHeight > this.height) {
+      CanvasUtils.renderError(ctx, this.width, this.height);
+      super._render(ctx);
+      return;
+    }
+
+    ctx.save();
+
+    const offsetX = -dmWidth / 2;
+    const offsetY = -dmHeight / 2;
+    ctx.translate(offsetX, offsetY); // center
+    ctx.translate(-0.5, -0.5); // blurry rendering fix
+
+    ctx.fillStyle = this.fill as string;
+    ctx.fillRect(0, 0, dmWidth, dmHeight);
+
+    ctx.fillStyle = "#000000";
+
+    for (let y = 0; y < pixy; y++) {
+      for (let x = 0; x < pixx; x++) {
+        if (pixs[y * pixx + x]) {
+          ctx.fillRect(x * dmScale, y * dmScale, dmScale, dmScale);
+        }
+      }
+    }
+
+    ctx.restore();
+
+    super._render(ctx);
+  }
+
+  override toObject(propertiesToInclude: any[] = []) {
+    return super.toObject([...DATAMATRIX_PROPS, ...propertiesToInclude]);
+  }
+}
+
+fabric.classRegistry.setClass(DataMatrix, "DataMatrix");
diff --git a/src/locale/dicts/ar.json b/src/locale/dicts/ar.json
@@ -20,6 +20,7 @@
     "editor.objectpicker.image": "صورة",
     "editor.objectpicker.line": "خط",
     "editor.objectpicker.qrcode": "QR Code",
+    "editor.objectpicker.datamatrix": "DataMatrix",
     "editor.objectpicker.rectangle": "مستطيل",
     "editor.objectpicker.text": "نص",
     "editor.objectpicker.title": "أضف عنصر",

diff --git a/src/locale/dicts/bg.json b/src/locale/dicts/bg.json
@@ -30,6 +30,7 @@
     "editor.objectpicker.image": "Изображение",
     "editor.objectpicker.line": "Ред",
     "editor.objectpicker.qrcode": "Код на QR",
+    "editor.objectpicker.datamatrix": "DataMatrix",
     "editor.objectpicker.rectangle": "Правоъгълник",
     "editor.objectpicker.text": "Текст",
     "editor.objectpicker.title": "Добавяне на обект",

diff --git a/src/locale/dicts/cs.json b/src/locale/dicts/cs.json
@@ -17,6 +17,7 @@
     "editor.objectpicker.image": "Obrázek",
     "editor.objectpicker.line": "Čára",
     "editor.objectpicker.qrcode": "QR Kód",
+    "editor.objectpicker.datamatrix": "DataMatrix",
     "editor.objectpicker.rectangle": "Obdélník",
     "editor.objectpicker.text": "Text",
     "editor.objectpicker.title": "Přidat objekt",

diff --git a/src/locale/dicts/de.json b/src/locale/dicts/de.json
@@ -17,6 +17,7 @@
     "editor.objectpicker.image": "Grafik",
     "editor.objectpicker.line": "Linie",
     "editor.objectpicker.qrcode": "QR-Code",
+    "editor.objectpicker.datamatrix": "DataMatrix",
     "editor.objectpicker.rectangle": "Rechteck",
     "editor.objectpicker.text": "Text",
     "editor.objectpicker.title": "Objekt hinzufügen",

diff --git a/src/locale/dicts/en.json b/src/locale/dicts/en.json
@@ -32,6 +32,7 @@
     "editor.objectpicker.image": "Image",
     "editor.objectpicker.line": "Line",
     "editor.objectpicker.qrcode": "QR Code",
+    "editor.objectpicker.datamatrix": "DataMatrix",
     "editor.objectpicker.rectangle": "Rectangle",
     "editor.objectpicker.text": "Text",
     "editor.objectpicker.title": "Add object",

diff --git a/src/locale/dicts/es.json b/src/locale/dicts/es.json
@@ -20,6 +20,7 @@
     "editor.objectpicker.image": "Imagen",
     "editor.objectpicker.line": "Línea",
     "editor.objectpicker.qrcode": "Código QR",
+    "editor.objectpicker.datamatrix": "DataMatrix",
     "editor.objectpicker.rectangle": "Rectángulo",
     "editor.objectpicker.text": "Texto",
     "editor.objectpicker.title": "Añadir objeto",

diff --git a/src/locale/dicts/fr.json b/src/locale/dicts/fr.json
@@ -19,6 +19,7 @@
     "editor.objectpicker.image": "Image",
     "editor.objectpicker.line": "Ligne",
     "editor.objectpicker.qrcode": "QR Code",
+    "editor.objectpicker.datamatrix": "DataMatrix",
     "editor.objectpicker.rectangle": "Rectangle",
     "editor.objectpicker.text": "Texte",
     "editor.objectpicker.title": "Ajouter un objet",

diff --git a/src/locale/dicts/hi.json b/src/locale/dicts/hi.json
@@ -27,6 +27,7 @@
     "editor.objectpicker.image": "इमेज",
     "editor.objectpicker.line": "लाइन",
     "editor.objectpicker.qrcode": "क्यूआर कोड",
+    "editor.objectpicker.datamatrix": "DataMatrix",
     "editor.objectpicker.rectangle": "आयत (Rectangle)",
     "editor.objectpicker.text": "टेक्स्ट",
     "editor.objectpicker.title": "ऑब्जेक्ट जोड़ें",

diff --git a/src/locale/dicts/hr.json b/src/locale/dicts/hr.json
@@ -18,6 +18,7 @@
     "editor.objectpicker.image": "Slika",
     "editor.objectpicker.line": "Linija",
     "editor.objectpicker.qrcode": "QR kod",
+    "editor.objectpicker.datamatrix": "DataMatrix",
     "editor.objectpicker.rectangle": "Pravokutnik",
     "editor.objectpicker.text": "Tekst",
     "editor.objectpicker.title": "Dodaj objekt",

diff --git a/src/locale/dicts/hu.json b/src/locale/dicts/hu.json
@@ -20,6 +20,7 @@
     "editor.objectpicker.image": "Kép",
     "editor.objectpicker.line": "Vonal",
     "editor.objectpicker.qrcode": "QR-kód",
+    "editor.objectpicker.datamatrix": "DataMatrix",
     "editor.objectpicker.rectangle": "Négyzet",
     "editor.objectpicker.text": "Szöveg",
     "editor.objectpicker.title": "Elem beszúrása",

diff --git a/src/locale/dicts/it.json b/src/locale/dicts/it.json
@@ -17,6 +17,7 @@
     "editor.objectpicker.image": "Immagine",
     "editor.objectpicker.line": "Linea",
     "editor.objectpicker.qrcode": "Codice QR",
+    "editor.objectpicker.datamatrix": "DataMatrix",
     "editor.objectpicker.rectangle": "Rettangolo",
     "editor.objectpicker.text": "Testo",
     "editor.objectpicker.title": "Aggiungi oggetto",

diff --git a/src/locale/dicts/ko_KR.json b/src/locale/dicts/ko_KR.json
@@ -20,6 +20,7 @@
     "editor.objectpicker.image": "이미지",
     "editor.objectpicker.line": "선",
     "editor.objectpicker.qrcode": "QR 코드",
+    "editor.objectpicker.datamatrix": "DataMatrix",
     "editor.objectpicker.rectangle": "사각형",
     "editor.objectpicker.text": "텍스트",
     "editor.objectpicker.title": "개체 추가",

diff --git a/src/locale/dicts/mr.json b/src/locale/dicts/mr.json
@@ -27,6 +27,7 @@
     "editor.objectpicker.image": "प्रतिमा",
     "editor.objectpicker.line": "रेषा",
     "editor.objectpicker.qrcode": "QR कोड",
+    "editor.objectpicker.datamatrix": "DataMatrix",
     "editor.objectpicker.rectangle": "आयत",
     "editor.objectpicker.text": "मजकूर",
     "editor.objectpicker.title": "ऑब्जेक्ट जोडा",

diff --git a/src/locale/dicts/pl.json b/src/locale/dicts/pl.json
@@ -17,6 +17,7 @@
     "editor.objectpicker.image": "Obraz",
     "editor.objectpicker.line": "Linia",
     "editor.objectpicker.qrcode": "Kod QR",
+    "editor.objectpicker.datamatrix": "DataMatrix",
     "editor.objectpicker.rectangle": "Prostokąt",
     "editor.objectpicker.text": "Tekst",
     "editor.objectpicker.title": "Dodaj obiekt",

diff --git a/src/locale/dicts/pt_BR.json b/src/locale/dicts/pt_BR.json
@@ -19,6 +19,7 @@
     "editor.objectpicker.image": "Imagem",
     "editor.objectpicker.line": "Linha",
     "editor.objectpicker.qrcode": "QR Code",
+    "editor.objectpicker.datamatrix": "DataMatrix",
     "editor.objectpicker.rectangle": "Retângulo",
     "editor.objectpicker.text": "Texto",
     "editor.objectpicker.title": "Adicionar objeto",

diff --git a/src/locale/dicts/ru.json b/src/locale/dicts/ru.json
@@ -31,6 +31,7 @@
     "editor.objectpicker.image": "Картинка",
     "editor.objectpicker.line": "Линия",
     "editor.objectpicker.qrcode": "QR Код",
+    "editor.objectpicker.datamatrix": "DataMatrix",
     "editor.objectpicker.rectangle": "Прямоугольник",
     "editor.objectpicker.text": "Текст",
     "editor.objectpicker.title": "Добавить объект",

diff --git a/src/locale/dicts/tr.json b/src/locale/dicts/tr.json
@@ -20,6 +20,7 @@
     "editor.objectpicker.image": "Resim",
     "editor.objectpicker.line": "Çizgi",
     "editor.objectpicker.qrcode": "QR Kod",
+    "editor.objectpicker.datamatrix": "DataMatrix",
     "editor.objectpicker.rectangle": "Dikdörtgen",
     "editor.objectpicker.text": "Metin",
     "editor.objectpicker.title": "Nesne ekle",