awtrix-ts 1.1.3 → 1.2.0

package/README.md

@@ -246,7 +246,29 @@ for (let i = 0; i <= 100; i++) {
 }
 ```
 
+#### Draw Pixels
+
+Draw shapes on the display:
+
+```typescript
+await clock.notify({
+  draw: [
+    new clock.draw.Pixel(0, 0, [255, 0, 0]),
+    new clock.draw.Line(0, 1, 15, 1, [0, 255, 0]),
+    new clock.draw.Rectangle(2, 2, 12, 6, [0, 0, 255]),
+    new clock.draw.FilledRectangle(3, 3, 10, 4, [255, 255, 0]),
+    new clock.draw.Circle(8, 1, 3, [0, 255, 255]),
+    new clock.draw.FilledCircle(8, 3, 2, [255, 0, 255]),
+    new clock.draw.Text(0, 1, 'AWTRIX', [255, 255, 255]),
+  ],
+});
+```
+
 ### Other
 
 - All API calls are asynchronous and return Promises.
 - The class exposes enums for transitions, indicators, and effects for convenience.
+
+```
+
+```

package/dist/draw.d.ts

@@ -0,0 +1,132 @@
+export declare class Pixel {
+    x: number;
+    y: number;
+    color: string | number[];
+    constructor(x: number, y: number, color: string | number[]);
+}
+export declare class Line {
+    x0: number;
+    y0: number;
+    x1: number;
+    y1: number;
+    color: string | number[];
+    constructor(x0: number, y0: number, x1: number, y1: number, color: string | number[]);
+}
+export declare class Rectangle {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    color: string | number[];
+    constructor(x: number, y: number, width: number, height: number, color: string | number[]);
+}
+export declare class FilledRectangle {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    color: string | number[];
+    constructor(x: number, y: number, width: number, height: number, color: string | number[]);
+}
+export declare class Circle {
+    x: number;
+    y: number;
+    radius: number;
+    color: string | number[];
+    constructor(x: number, y: number, radius: number, color: string | number[]);
+}
+export declare class FilledCircle {
+    x: number;
+    y: number;
+    radius: number;
+    color: string | number[];
+    constructor(x: number, y: number, radius: number, color: string | number[]);
+}
+export declare class Text {
+    x: number;
+    y: number;
+    text: string;
+    color: string | number[];
+    constructor(x: number, y: number, text: string, color: string | number[]);
+}
+export declare class Bitmap {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    bitmap: (string | number[])[];
+    constructor(x: number, y: number, width: number, height: number, bitmap: (string | number[])[]);
+}
+export declare const map: (item: Pixel | Line | Rectangle | FilledRectangle | Circle | FilledCircle | Text | Bitmap) => Pixel | Line | Rectangle | FilledRectangle | Circle | FilledCircle | Text | Bitmap | {
+    dp: (string | number | number[])[];
+    dl?: undefined;
+    dr?: undefined;
+    fr?: undefined;
+    dc?: undefined;
+    dfc?: undefined;
+    dt?: undefined;
+    db?: undefined;
+} | {
+    dl: (string | number | number[])[];
+    dp?: undefined;
+    dr?: undefined;
+    fr?: undefined;
+    dc?: undefined;
+    dfc?: undefined;
+    dt?: undefined;
+    db?: undefined;
+} | {
+    dr: (string | number | number[])[];
+    dp?: undefined;
+    dl?: undefined;
+    fr?: undefined;
+    dc?: undefined;
+    dfc?: undefined;
+    dt?: undefined;
+    db?: undefined;
+} | {
+    fr: (string | number | number[])[];
+    dp?: undefined;
+    dl?: undefined;
+    dr?: undefined;
+    dc?: undefined;
+    dfc?: undefined;
+    dt?: undefined;
+    db?: undefined;
+} | {
+    dc: (string | number | number[])[];
+    dp?: undefined;
+    dl?: undefined;
+    dr?: undefined;
+    fr?: undefined;
+    dfc?: undefined;
+    dt?: undefined;
+    db?: undefined;
+} | {
+    dfc: (string | number | number[])[];
+    dp?: undefined;
+    dl?: undefined;
+    dr?: undefined;
+    fr?: undefined;
+    dc?: undefined;
+    dt?: undefined;
+    db?: undefined;
+} | {
+    dt: (string | number | number[])[];
+    dp?: undefined;
+    dl?: undefined;
+    dr?: undefined;
+    fr?: undefined;
+    dc?: undefined;
+    dfc?: undefined;
+    db?: undefined;
+} | {
+    db: (number | (string | number[])[])[];
+    dp?: undefined;
+    dl?: undefined;
+    dr?: undefined;
+    fr?: undefined;
+    dc?: undefined;
+    dfc?: undefined;
+    dt?: undefined;
+};

package/dist/draw.js

@@ -0,0 +1,147 @@
+export class Pixel {
+    x;
+    y;
+    color;
+    constructor(x, y, color) {
+        this.x = x;
+        this.y = y;
+        this.color = color;
+    }
+}
+export class Line {
+    x0;
+    y0;
+    x1;
+    y1;
+    color;
+    constructor(x0, y0, x1, y1, color) {
+        this.x0 = x0;
+        this.y0 = y0;
+        this.x1 = x1;
+        this.y1 = y1;
+        this.color = color;
+    }
+}
+export class Rectangle {
+    x;
+    y;
+    width;
+    height;
+    color;
+    constructor(x, y, width, height, color) {
+        this.x = x;
+        this.y = y;
+        this.width = width;
+        this.height = height;
+        this.color = color;
+    }
+}
+export class FilledRectangle {
+    x;
+    y;
+    width;
+    height;
+    color;
+    constructor(x, y, width, height, color) {
+        this.x = x;
+        this.y = y;
+        this.width = width;
+        this.height = height;
+        this.color = color;
+    }
+}
+export class Circle {
+    x;
+    y;
+    radius;
+    color;
+    constructor(x, y, radius, color) {
+        this.x = x;
+        this.y = y;
+        this.radius = radius;
+        this.color = color;
+    }
+}
+export class FilledCircle {
+    x;
+    y;
+    radius;
+    color;
+    constructor(x, y, radius, color) {
+        this.x = x;
+        this.y = y;
+        this.radius = radius;
+        this.color = color;
+    }
+}
+export class Text {
+    x;
+    y;
+    text;
+    color;
+    constructor(x, y, text, color) {
+        this.x = x;
+        this.y = y;
+        this.text = text;
+        this.color = color;
+    }
+}
+export class Bitmap {
+    x;
+    y;
+    width;
+    height;
+    bitmap;
+    constructor(x, y, width, height, bitmap) {
+        this.x = x;
+        this.y = y;
+        this.width = width;
+        this.height = height;
+        this.bitmap = bitmap;
+    }
+}
+export const map = (item) => {
+    switch (item.constructor) {
+        case Pixel:
+            const p = item;
+            return {
+                dp: [p.x, p.y, p.color]
+            };
+        case Line:
+            const l = item;
+            return {
+                dl: [l.x0, l.y0, l.x1, l.y1, l.color]
+            };
+        case Rectangle:
+            const r = item;
+            return {
+                dr: [r.x, r.y, r.width, r.height, r.color]
+            };
+        case FilledRectangle:
+            const fr = item;
+            return {
+                fr: [fr.x, fr.y, fr.width, fr.height, fr.color]
+            };
+        case Circle:
+            const c = item;
+            return {
+                dc: [c.x, c.y, c.radius, c.color]
+            };
+        case FilledCircle:
+            const fc = item;
+            return {
+                dfc: [fc.x, fc.y, fc.radius, fc.color]
+            };
+        case Text:
+            const t = item;
+            return {
+                dt: [t.x, t.y, t.text, t.color]
+            };
+        case Bitmap:
+            const b = item;
+            return {
+                db: [b.x, b.y, b.width, b.height, b.bitmap]
+            };
+    }
+    return item;
+};

package/dist/index.d.ts

@@ -1,4 +1,5 @@
 import * as interaction from './interaction.js';
+import * as draw from './draw.js';
 import * as transitions from './transitions.js';
 import * as indicators from './indicators.js';
 import * as settings from './settings.js';
@@ -51,6 +52,7 @@ declare class Awtrix {
         readonly MoveOnce: 1;
         readonly MoveRepeat: 2;
     };
+    draw: typeof draw;
     constructor(url: URL);
     power(power: boolean): Promise<void>;
     sleep(time: number): Promise<void>;

package/dist/index.js

@@ -1,5 +1,6 @@
 import { setTimeout } from 'node:timers/promises';
 import * as interaction from './interaction.js';
+import * as draw from './draw.js';
 import * as transitions from './transitions.js';
 import * as indicators from './indicators.js';
 class Awtrix {
@@ -9,6 +10,7 @@ class Awtrix {
     Indicators = indicators.Indicator;
     Effects = interaction.Effect;
     PushIcon = interaction.PushIcon;
+    draw = draw;
     constructor(url) {
         this.url = url.href + 'api';
     }
@@ -111,7 +113,10 @@ class Awtrix {
         await this.post('moodlight');
     }
     async notify(notification) {
-        await this.post('notify', notification);
+        await this.post('notify', {
+            ...notification,
+            draw: notification.draw?.map(item => draw.map(item)),
+        });
     }
     async dismissNotification() {
         await this.post('notify/dismiss');

package/dist/interaction.d.ts

@@ -1,4 +1,5 @@
-export interface Interaction {
+import * as draw from './draw.js';
+export interface InteractionPayload {
     text?: string;
     textCase?: number;
     topText?: boolean;
@@ -26,7 +27,7 @@ export interface Interaction {
     progressC?: string | number[];
     progressBC?: string | number[];
     pos?: number;
-    draw?: object[];
+    draw?: DrawCommand[];
     lifetime?: number;
     lifetimeMode?: number;
     stack?: boolean;
@@ -39,6 +40,9 @@ export interface Interaction {
     save?: boolean;
     overlay?: string;
 }
+export interface Interaction extends Omit<InteractionPayload, 'draw'> {
+    draw?: Array<draw.Pixel | draw.Line | draw.Rectangle | draw.FilledRectangle | draw.Circle | draw.FilledCircle | draw.Text | draw.Bitmap>;
+}
 declare const PushIcon: {
     readonly Static: 0;
     readonly MoveOnce: 1;
@@ -67,4 +71,21 @@ declare const Effect: {
     readonly Fade: "Fade";
 };
 type Effect = typeof Effect[keyof typeof Effect];
+export type DrawCommand = {
+    dp: [number, number, string | number[]];
+} | {
+    dl: [number, number, number, number, string | number[]];
+} | {
+    dr: [number, number, number, number, string | number[]];
+} | {
+    df: [number, number, number, number, string | number[]];
+} | {
+    dc: [number, number, number, string | number[]];
+} | {
+    dfc: [number, number, number, string | number[]];
+} | {
+    dt: [number, number, string, string | number[]];
+} | {
+    db: [number, number, number, number, (string | number[])[]];
+};
 export { PushIcon, Effect };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "awtrix-ts",
-  "version": "1.1.3",
+  "version": "1.2.0",
   "description": "TypeScript API for Awtrix LED Matrix Display",
   "repository": {
     "type": "git",