@operato/scene-mpi 1.3.7

package/dist/reply-button.js

@@ -0,0 +1,67 @@
+const reply = new URL('../../icons/reply-button.png', import.meta.url).href;
+import { Component, RectPath, Shape } from '@hatiolab/things-scene';
+import { consoleLogger } from './gateway-on-message';
+export const buttons = [
+    {
+        icon: reply,
+        handler: onClickReply
+    }
+];
+const NATURE = {
+    mutable: false,
+    resizable: true,
+    rotatable: true,
+    properties: [
+        {
+            type: 'string',
+            name: 'publisher',
+            label: 'publisher'
+        }
+    ],
+    help: 'scene/component/reply-button'
+};
+export default class ReplyButton extends RectPath(Shape) {
+    static get image() {
+        if (!ReplyButton._image) {
+            ReplyButton._image = new Image();
+            ReplyButton._image.src = reply;
+        }
+        return ReplyButton._image;
+    }
+    get publisher() {
+        if (this.state.publisher) {
+            return this.root.findById(this.state.publisher);
+        }
+    }
+    render(context) {
+        var { left, top, width, height } = this.bounds;
+        context.beginPath();
+        context.rect(left, top, width, height);
+        this.drawFill(context);
+        this.drawStroke(context);
+        this.drawImage(context, ReplyButton.image, left, top, width, height);
+    }
+    onmousedown(e, hint) {
+        var button = this.buttonContains();
+        if (button) {
+            button.handler(this);
+        }
+    }
+    buttonContains() {
+        return buttons[0];
+    }
+    get nature() {
+        return NATURE;
+    }
+}
+function onClickReply(button) {
+    consoleLogger('onClickReply');
+    var gateways = button.root.findAll('gateway');
+    gateways.forEach((gw, index) => {
+        gw.indicators.forEach(ind => {
+            ind.onButton();
+        });
+    });
+}
+Component.register('reply-button', ReplyButton);
+//# sourceMappingURL=reply-button.js.map

package/dist/reply-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"reply-button.js","sourceRoot":"","sources":["../src/reply-button.ts"],"names":[],"mappings":"AAAA,MAAM,KAAK,GAAG,IAAI,GAAG,CAAC,8BAA8B,EAAE,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,IAAI,CAAA;AAE3E,OAAO,EAAE,SAAS,EAAmB,QAAQ,EAAE,KAAK,EAAE,MAAM,wBAAwB,CAAA;AAEpF,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAA;AAGpD,MAAM,CAAC,MAAM,OAAO,GAAG;IACrB;QACE,IAAI,EAAE,KAAK;QACX,OAAO,EAAE,YAAY;KACtB;CACF,CAAA;AAED,MAAM,MAAM,GAAoB;IAC9B,OAAO,EAAE,KAAK;IACd,SAAS,EAAE,IAAI;IACf,SAAS,EAAE,IAAI;IACf,UAAU,EAAE;QACV;YACE,IAAI,EAAE,QAAQ;YACd,IAAI,EAAE,WAAW;YACjB,KAAK,EAAE,WAAW;SACnB;KACF;IACD,IAAI,EAAE,8BAA8B;CACrC,CAAA;AAED,MAAM,CAAC,OAAO,OAAO,WAAY,SAAQ,QAAQ,CAAC,KAAK,CAAC;IAGtD,MAAM,KAAK,KAAK;QACd,IAAI,CAAC,WAAW,CAAC,MAAM,EAAE,CAAC;YACxB,WAAW,CAAC,MAAM,GAAG,IAAI,KAAK,EAAE,CAAA;YAChC,WAAW,CAAC,MAAM,CAAC,GAAG,GAAG,KAAK,CAAA;QAChC,CAAC;QAED,OAAO,WAAW,CAAC,MAAM,CAAA;IAC3B,CAAC;IAED,IAAI,SAAS;QACX,IAAI,IAAI,CAAC,KAAK,CAAC,SAAS,EAAE,CAAC;YACzB,OAAO,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,CAAA;QACjD,CAAC;IACH,CAAC;IAED,MAAM,CAAC,OAAiC;QACtC,IAAI,EAAE,IAAI,EAAE,GAAG,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC,MAAM,CAAA;QAE9C,OAAO,CAAC,SAAS,EAAE,CAAA;QAEnB,OAAO,CAAC,IAAI,CAAC,IAAI,EAAE,GAAG,EAAE,KAAK,EAAE,MAAM,CAAC,CAAA;QAEtC,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAA;QACtB,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,CAAA;QAExB,IAAI,CAAC,SAAS,CAAC,OAAO,EAAE,WAAW,CAAC,KAAK,EAAE,IAAI,EAAE,GAAG,EAAE,KAAK,EAAE,MAAM,CAAC,CAAA;IACtE,CAAC;IAED,WAAW,CAAC,CAAa,EAAE,IAAS;QAClC,IAAI,MAAM,GAAG,IAAI,CAAC,cAAc,EAAE,CAAA;QAClC,IAAI,MAAM,EAAE,CAAC;YACX,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,CAAA;QACtB,CAAC;IACH,CAAC;IAED,cAAc;QACZ,OAAO,OAAO,CAAC,CAAC,CAAC,CAAA;IACnB,CAAC;IAED,IAAI,MAAM;QACR,OAAO,MAAM,CAAA;IACf,CAAC;CACF;AAED,SAAS,YAAY,CAAC,MAAiB;IACrC,aAAa,CAAC,cAAc,CAAC,CAAA;IAE7B,IAAI,QAAQ,GAAG,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,SAAS,CAAc,CAAA;IAE1D,QAAQ,CAAC,OAAO,CAAC,CAAC,EAAE,EAAE,KAAK,EAAE,EAAE;QAC7B,EAAE,CAAC,UAAU,CAAC,OAAO,CAAC,GAAG,CAAC,EAAE;YAC1B,GAAG,CAAC,QAAQ,EAAE,CAAA;QAChB,CAAC,CAAC,CAAA;IACJ,CAAC,CAAC,CAAA;AACJ,CAAC;AAED,SAAS,CAAC,QAAQ,CAAC,cAAc,EAAE,WAAW,CAAC,CAAA","sourcesContent":["const reply = new URL('../../icons/reply-button.png', import.meta.url).href\n\nimport { Component, ComponentNature, RectPath, Shape } from '@hatiolab/things-scene'\n\nimport { consoleLogger } from './gateway-on-message'\nimport Gateway from './gateway'\n\nexport const buttons = [\n  {\n    icon: reply,\n    handler: onClickReply\n  }\n]\n\nconst NATURE: ComponentNature = {\n  mutable: false,\n  resizable: true,\n  rotatable: true,\n  properties: [\n    {\n      type: 'string',\n      name: 'publisher',\n      label: 'publisher'\n    }\n  ],\n  help: 'scene/component/reply-button'\n}\n\nexport default class ReplyButton extends RectPath(Shape) {\n  static _image?: HTMLImageElement\n\n  static get image() {\n    if (!ReplyButton._image) {\n      ReplyButton._image = new Image()\n      ReplyButton._image.src = reply\n    }\n\n    return ReplyButton._image\n  }\n\n  get publisher() {\n    if (this.state.publisher) {\n      return this.root.findById(this.state.publisher)\n    }\n  }\n\n  render(context: CanvasRenderingContext2D) {\n    var { left, top, width, height } = this.bounds\n\n    context.beginPath()\n\n    context.rect(left, top, width, height)\n\n    this.drawFill(context)\n    this.drawStroke(context)\n\n    this.drawImage(context, ReplyButton.image, left, top, width, height)\n  }\n\n  onmousedown(e: MouseEvent, hint: any) {\n    var button = this.buttonContains()\n    if (button) {\n      button.handler(this)\n    }\n  }\n\n  buttonContains() {\n    return buttons[0]\n  }\n\n  get nature() {\n    return NATURE\n  }\n}\n\nfunction onClickReply(button: Component) {\n  consoleLogger('onClickReply')\n\n  var gateways = button.root.findAll('gateway') as Gateway[]\n\n  gateways.forEach((gw, index) => {\n    gw.indicators.forEach(ind => {\n      ind.onButton()\n    })\n  })\n}\n\nComponent.register('reply-button', ReplyButton)\n"]}

package/dist/segment-display.d.ts

@@ -0,0 +1,41 @@
+/*!
+ * segment-display.js
+ *
+ * Copyright 2012, Rüdiger Appel
+ * http://www.3quarks.com
+ * Published under Creative Commons 3.0 License.
+ *
+ * Date: 2012-02-14
+ * Version: 1.0.0
+ *
+ * Dokumentation: http://www.3quarks.com/de/Segmentanzeige
+ * Documentation: http://www.3quarks.com/en/SegmentDisplay
+ */
+export default class SegmentDisplay {
+    static SevenSegment: number;
+    static FourteenSegment: number;
+    static SixteenSegment: number;
+    static SymmetricCorner: number;
+    static SquaredCorner: number;
+    static RoundedCorner: number;
+    width: number;
+    height: number;
+    pattern: string;
+    value: string;
+    digitHeight: number;
+    digitWidth: number;
+    digitDistance: number;
+    displayAngle: number;
+    segmentWidth: number;
+    segmentDistance: number;
+    segmentCount: number;
+    cornerType: number;
+    colorOn: string;
+    colorOff: string;
+    constructor(width: number, height: number);
+    setValue(value: any): void;
+    draw(context: CanvasRenderingContext2D): void;
+    drawDigit(context: CanvasRenderingContext2D, xPos: number, mask: string, c: string): number;
+    drawPoint(context: CanvasRenderingContext2D, x1: number, y1: number, size: number): void;
+    getSegmentColor(c: string, charSet7: string | null, charSet14?: string, charSet16?: string): string;
+}

package/dist/segment-display.js

@@ -0,0 +1,521 @@
+/*!
+ * segment-display.js
+ *
+ * Copyright 2012, Rüdiger Appel
+ * http://www.3quarks.com
+ * Published under Creative Commons 3.0 License.
+ *
+ * Date: 2012-02-14
+ * Version: 1.0.0
+ *
+ * Dokumentation: http://www.3quarks.com/de/Segmentanzeige
+ * Documentation: http://www.3quarks.com/en/SegmentDisplay
+ */
+class SegmentDisplay {
+    constructor(width, height) {
+        this.width = width;
+        this.height = height;
+        this.pattern = '##:##:##';
+        this.value = '12:34:56';
+        this.digitHeight = 20;
+        this.digitWidth = 10;
+        this.digitDistance = 2.5;
+        this.displayAngle = 12;
+        this.segmentWidth = 2.5;
+        this.segmentDistance = 0.2;
+        this.segmentCount = SegmentDisplay.SevenSegment;
+        this.cornerType = SegmentDisplay.RoundedCorner;
+        this.colorOn = 'rgb(233, 93, 15)';
+        this.colorOff = 'rgb(75, 30, 5)';
+    }
+    setValue(value) {
+        this.value = value;
+    }
+    draw(context) {
+        // compute and check display width
+        var width = 0;
+        var first = true;
+        if (this.pattern) {
+            for (var i = 0; i < this.pattern.length; i++) {
+                var c = this.pattern.charAt(i).toLowerCase();
+                if (c == '#') {
+                    width += this.digitWidth;
+                }
+                else if (c == '.' || c == ':') {
+                    width += this.segmentWidth;
+                }
+                else if (c != ' ') {
+                    return;
+                }
+                width += first ? 0 : this.digitDistance;
+                first = false;
+            }
+        }
+        if (width <= 0) {
+            return;
+        }
+        // compute skew factor
+        var angle = -1.0 * Math.max(-45.0, Math.min(45.0, this.displayAngle));
+        var skew = Math.tan((angle * Math.PI) / 180.0);
+        // compute scale factor
+        var scale = Math.min(this.width / (width + Math.abs(skew * this.digitHeight)), this.height / this.digitHeight);
+        // compute display offset
+        var offsetX = (this.width - (width + skew * this.digitHeight) * scale) / 2.0;
+        var offsetY = (this.height - this.digitHeight * scale) / 2.0;
+        // context transformation
+        context.save();
+        context.translate(offsetX, offsetY);
+        context.scale(scale, scale);
+        context.transform(1, 0, skew, 1, 0, 0);
+        // draw segments
+        var xPos = 0;
+        var size = this.value ? this.value.length : 0;
+        for (var i = 0; i < this.pattern.length; i++) {
+            var mask = this.pattern.charAt(i);
+            var value = i < size ? this.value.charAt(i).toLowerCase() : ' ';
+            xPos += this.drawDigit(context, xPos, mask, value);
+        }
+        // finish drawing
+        context.restore();
+    }
+    drawDigit(context, xPos, mask, c) {
+        switch (mask) {
+            case '#':
+                var r = Math.sqrt((this.segmentWidth * this.segmentWidth) / 2.0);
+                var d = Math.sqrt((this.segmentDistance * this.segmentDistance) / 2.0);
+                var e = d / 2.0;
+                var f = (this.segmentWidth - d) * Math.sin((45.0 * Math.PI) / 180.0);
+                var g = f / 2.0;
+                var h = (this.digitHeight - 3.0 * this.segmentWidth) / 2.0;
+                var w = (this.digitWidth - 3.0 * this.segmentWidth) / 2.0;
+                var s = this.segmentWidth / 2.0;
+                var t = this.digitWidth / 2.0;
+                // draw segment a (a1 and a2 for 16 segments)
+                if (this.segmentCount == 16) {
+                    var x = xPos;
+                    var y = 0;
+                    context.fillStyle = this.getSegmentColor(c, null, '02356789abcdefgiopqrstz@%');
+                    context.beginPath();
+                    switch (this.cornerType) {
+                        case SegmentDisplay.SymmetricCorner:
+                            context.moveTo(x + s + d, y + s);
+                            context.lineTo(x + this.segmentWidth + d, y);
+                            break;
+                        case SegmentDisplay.SquaredCorner:
+                            context.moveTo(x + s + e, y + s - e);
+                            context.lineTo(x + this.segmentWidth, y);
+                            break;
+                        default:
+                            context.moveTo(x + this.segmentWidth - f, y + this.segmentWidth - f - d);
+                            context.quadraticCurveTo(x + this.segmentWidth - g, y, x + this.segmentWidth, y);
+                    }
+                    context.lineTo(x + t - d - s, y);
+                    context.lineTo(x + t - d, y + s);
+                    context.lineTo(x + t - d - s, y + this.segmentWidth);
+                    context.lineTo(x + this.segmentWidth + d, y + this.segmentWidth);
+                    context.fill();
+                    var x = xPos;
+                    var y = 0;
+                    context.fillStyle = this.getSegmentColor(c, null, '02356789abcdefgiopqrstz@');
+                    context.beginPath();
+                    context.moveTo(x + this.digitWidth - this.segmentWidth - d, y + this.segmentWidth);
+                    context.lineTo(x + t + d + s, y + this.segmentWidth);
+                    context.lineTo(x + t + d, y + s);
+                    context.lineTo(x + t + d + s, y);
+                    switch (this.cornerType) {
+                        case SegmentDisplay.SymmetricCorner:
+                            context.lineTo(x + this.digitWidth - this.segmentWidth - d, y);
+                            context.lineTo(x + this.digitWidth - s - d, y + s);
+                            break;
+                        case SegmentDisplay.SquaredCorner:
+                            context.lineTo(x + this.digitWidth - this.segmentWidth, y);
+                            context.lineTo(x + this.digitWidth - s - e, y + s - e);
+                            break;
+                        default:
+                            context.lineTo(x + this.digitWidth - this.segmentWidth, y);
+                            context.quadraticCurveTo(x + this.digitWidth - this.segmentWidth + g, y, x + this.digitWidth - this.segmentWidth + f, y + this.segmentWidth - f - d);
+                    }
+                    context.fill();
+                }
+                else {
+                    var x = xPos;
+                    var y = 0;
+                    context.fillStyle = this.getSegmentColor(c, '02356789acefp', '02356789abcdefgiopqrstz@');
+                    context.beginPath();
+                    switch (this.cornerType) {
+                        case SegmentDisplay.SymmetricCorner:
+                            context.moveTo(x + s + d, y + s);
+                            context.lineTo(x + this.segmentWidth + d, y);
+                            context.lineTo(x + this.digitWidth - this.segmentWidth - d, y);
+                            context.lineTo(x + this.digitWidth - s - d, y + s);
+                            break;
+                        case SegmentDisplay.SquaredCorner:
+                            context.moveTo(x + s + e, y + s - e);
+                            context.lineTo(x + this.segmentWidth, y);
+                            context.lineTo(x + this.digitWidth - this.segmentWidth, y);
+                            context.lineTo(x + this.digitWidth - s - e, y + s - e);
+                            break;
+                        default:
+                            context.moveTo(x + this.segmentWidth - f, y + this.segmentWidth - f - d);
+                            context.quadraticCurveTo(x + this.segmentWidth - g, y, x + this.segmentWidth, y);
+                            context.lineTo(x + this.digitWidth - this.segmentWidth, y);
+                            context.quadraticCurveTo(x + this.digitWidth - this.segmentWidth + g, y, x + this.digitWidth - this.segmentWidth + f, y + this.segmentWidth - f - d);
+                    }
+                    context.lineTo(x + this.digitWidth - this.segmentWidth - d, y + this.segmentWidth);
+                    context.lineTo(x + this.segmentWidth + d, y + this.segmentWidth);
+                    context.fill();
+                }
+                // draw segment b
+                x = xPos + this.digitWidth - this.segmentWidth;
+                y = 0;
+                context.fillStyle = this.getSegmentColor(c, '01234789adhpy', '01234789abdhjmnopqruwy');
+                context.beginPath();
+                switch (this.cornerType) {
+                    case SegmentDisplay.SymmetricCorner:
+                        context.moveTo(x + s, y + s + d);
+                        context.lineTo(x + this.segmentWidth, y + this.segmentWidth + d);
+                        break;
+                    case SegmentDisplay.SquaredCorner:
+                        context.moveTo(x + s + e, y + s + e);
+                        context.lineTo(x + this.segmentWidth, y + this.segmentWidth);
+                        break;
+                    default:
+                        context.moveTo(x + f + d, y + this.segmentWidth - f);
+                        context.quadraticCurveTo(x + this.segmentWidth, y + this.segmentWidth - g, x + this.segmentWidth, y + this.segmentWidth);
+                }
+                context.lineTo(x + this.segmentWidth, y + h + this.segmentWidth - d);
+                context.lineTo(x + s, y + h + this.segmentWidth + s - d);
+                context.lineTo(x, y + h + this.segmentWidth - d);
+                context.lineTo(x, y + this.segmentWidth + d);
+                context.fill();
+                // draw segment c
+                x = xPos + this.digitWidth - this.segmentWidth;
+                y = h + this.segmentWidth;
+                context.fillStyle = this.getSegmentColor(c, '013456789abdhnouy', '01346789abdghjmnoqsuw@', '%');
+                context.beginPath();
+                context.moveTo(x, y + this.segmentWidth + d);
+                context.lineTo(x + s, y + s + d);
+                context.lineTo(x + this.segmentWidth, y + this.segmentWidth + d);
+                context.lineTo(x + this.segmentWidth, y + h + this.segmentWidth - d);
+                switch (this.cornerType) {
+                    case SegmentDisplay.SymmetricCorner:
+                        context.lineTo(x + s, y + h + this.segmentWidth + s - d);
+                        context.lineTo(x, y + h + this.segmentWidth - d);
+                        break;
+                    case SegmentDisplay.SquaredCorner:
+                        context.lineTo(x + s + e, y + h + this.segmentWidth + s - e);
+                        context.lineTo(x, y + h + this.segmentWidth - d);
+                        break;
+                    default:
+                        context.quadraticCurveTo(x + this.segmentWidth, y + h + this.segmentWidth + g, x + f + d, y + h + this.segmentWidth + f); //
+                        context.lineTo(x, y + h + this.segmentWidth - d);
+                }
+                context.fill();
+                // draw segment d (d1 and d2 for 16 segments)
+                if (this.segmentCount == 16) {
+                    x = xPos;
+                    y = this.digitHeight - this.segmentWidth;
+                    context.fillStyle = this.getSegmentColor(c, null, '0235689bcdegijloqsuz_=@');
+                    context.beginPath();
+                    context.moveTo(x + this.segmentWidth + d, y);
+                    context.lineTo(x + t - d - s, y);
+                    context.lineTo(x + t - d, y + s);
+                    context.lineTo(x + t - d - s, y + this.segmentWidth);
+                    switch (this.cornerType) {
+                        case SegmentDisplay.SymmetricCorner:
+                            context.lineTo(x + this.segmentWidth + d, y + this.segmentWidth);
+                            context.lineTo(x + s + d, y + s);
+                            break;
+                        case SegmentDisplay.SquaredCorner:
+                            context.lineTo(x + this.segmentWidth, y + this.segmentWidth);
+                            context.lineTo(x + s + e, y + s + e);
+                            break;
+                        default:
+                            context.lineTo(x + this.segmentWidth, y + this.segmentWidth);
+                            context.quadraticCurveTo(x + this.segmentWidth - g, y + this.segmentWidth, x + this.segmentWidth - f, y + f + d);
+                            context.lineTo(x + this.segmentWidth - f, y + f + d);
+                    }
+                    context.fill();
+                    x = xPos;
+                    y = this.digitHeight - this.segmentWidth;
+                    context.fillStyle = this.getSegmentColor(c, null, '0235689bcdegijloqsuz_=@', '%');
+                    context.beginPath();
+                    context.moveTo(x + t + d + s, y + this.segmentWidth);
+                    context.lineTo(x + t + d, y + s);
+                    context.lineTo(x + t + d + s, y);
+                    context.lineTo(x + this.digitWidth - this.segmentWidth - d, y);
+                    switch (this.cornerType) {
+                        case SegmentDisplay.SymmetricCorner:
+                            context.lineTo(x + this.digitWidth - s - d, y + s);
+                            context.lineTo(x + this.digitWidth - this.segmentWidth - d, y + this.segmentWidth);
+                            break;
+                        case SegmentDisplay.SquaredCorner:
+                            context.lineTo(x + this.digitWidth - s - e, y + s + e);
+                            context.lineTo(x + this.digitWidth - this.segmentWidth, y + this.segmentWidth);
+                            break;
+                        default:
+                            context.lineTo(x + this.digitWidth - this.segmentWidth + f, y + f + d);
+                            context.quadraticCurveTo(x + this.digitWidth - this.segmentWidth + g, y + this.segmentWidth, x + this.digitWidth - this.segmentWidth, y + this.segmentWidth);
+                    }
+                    context.fill();
+                }
+                else {
+                    x = xPos;
+                    y = this.digitHeight - this.segmentWidth;
+                    context.fillStyle = this.getSegmentColor(c, '0235689bcdelotuy_', '0235689bcdegijloqsuz_=@');
+                    context.beginPath();
+                    context.moveTo(x + this.segmentWidth + d, y);
+                    context.lineTo(x + this.digitWidth - this.segmentWidth - d, y);
+                    switch (this.cornerType) {
+                        case SegmentDisplay.SymmetricCorner:
+                            context.lineTo(x + this.digitWidth - s - d, y + s);
+                            context.lineTo(x + this.digitWidth - this.segmentWidth - d, y + this.segmentWidth);
+                            context.lineTo(x + this.segmentWidth + d, y + this.segmentWidth);
+                            context.lineTo(x + s + d, y + s);
+                            break;
+                        case SegmentDisplay.SquaredCorner:
+                            context.lineTo(x + this.digitWidth - s - e, y + s + e);
+                            context.lineTo(x + this.digitWidth - this.segmentWidth, y + this.segmentWidth);
+                            context.lineTo(x + this.segmentWidth, y + this.segmentWidth);
+                            context.lineTo(x + s + e, y + s + e);
+                            break;
+                        default:
+                            context.lineTo(x + this.digitWidth - this.segmentWidth + f, y + f + d);
+                            context.quadraticCurveTo(x + this.digitWidth - this.segmentWidth + g, y + this.segmentWidth, x + this.digitWidth - this.segmentWidth, y + this.segmentWidth);
+                            context.lineTo(x + this.segmentWidth, y + this.segmentWidth);
+                            context.quadraticCurveTo(x + this.segmentWidth - g, y + this.segmentWidth, x + this.segmentWidth - f, y + f + d);
+                            context.lineTo(x + this.segmentWidth - f, y + f + d);
+                    }
+                    context.fill();
+                }
+                // draw segment e
+                x = xPos;
+                y = h + this.segmentWidth;
+                context.fillStyle = this.getSegmentColor(c, '0268abcdefhlnoprtu', '0268acefghjklmnopqruvw@');
+                context.beginPath();
+                context.moveTo(x, y + this.segmentWidth + d);
+                context.lineTo(x + s, y + s + d);
+                context.lineTo(x + this.segmentWidth, y + this.segmentWidth + d);
+                context.lineTo(x + this.segmentWidth, y + h + this.segmentWidth - d);
+                switch (this.cornerType) {
+                    case SegmentDisplay.SymmetricCorner:
+                        context.lineTo(x + s, y + h + this.segmentWidth + s - d);
+                        context.lineTo(x, y + h + this.segmentWidth - d);
+                        break;
+                    case SegmentDisplay.SquaredCorner:
+                        context.lineTo(x + s - e, y + h + this.segmentWidth + s - d + e);
+                        context.lineTo(x, y + h + this.segmentWidth);
+                        break;
+                    default:
+                        context.lineTo(x + this.segmentWidth - f - d, y + h + this.segmentWidth + f);
+                        context.quadraticCurveTo(x, y + h + this.segmentWidth + g, x, y + h + this.segmentWidth);
+                }
+                context.fill();
+                // draw segment f
+                x = xPos;
+                y = 0;
+                context.fillStyle = this.getSegmentColor(c, '045689abcefhlpty', '045689acefghklmnopqrsuvwy@', '%');
+                context.beginPath();
+                context.moveTo(x + this.segmentWidth, y + this.segmentWidth + d);
+                context.lineTo(x + this.segmentWidth, y + h + this.segmentWidth - d);
+                context.lineTo(x + s, y + h + this.segmentWidth + s - d);
+                context.lineTo(x, y + h + this.segmentWidth - d);
+                switch (this.cornerType) {
+                    case SegmentDisplay.SymmetricCorner:
+                        context.lineTo(x, y + this.segmentWidth + d);
+                        context.lineTo(x + s, y + s + d);
+                        break;
+                    case SegmentDisplay.SquaredCorner:
+                        context.lineTo(x, y + this.segmentWidth);
+                        context.lineTo(x + s - e, y + s + e);
+                        break;
+                    default:
+                        context.lineTo(x, y + this.segmentWidth);
+                        context.quadraticCurveTo(x, y + this.segmentWidth - g, x + this.segmentWidth - f - d, y + this.segmentWidth - f);
+                        context.lineTo(x + this.segmentWidth - f - d, y + this.segmentWidth - f);
+                }
+                context.fill();
+                // draw segment g for 7 segments
+                if (this.segmentCount == 7) {
+                    x = xPos;
+                    y = (this.digitHeight - this.segmentWidth) / 2.0;
+                    context.fillStyle = this.getSegmentColor(c, '2345689abdefhnoprty-=');
+                    context.beginPath();
+                    context.moveTo(x + s + d, y + s);
+                    context.lineTo(x + this.segmentWidth + d, y);
+                    context.lineTo(x + this.digitWidth - this.segmentWidth - d, y);
+                    context.lineTo(x + this.digitWidth - s - d, y + s);
+                    context.lineTo(x + this.digitWidth - this.segmentWidth - d, y + this.segmentWidth);
+                    context.lineTo(x + this.segmentWidth + d, y + this.segmentWidth);
+                    context.fill();
+                }
+                // draw inner segments for the fourteen- and sixteen-segment-display
+                if (this.segmentCount != 7) {
+                    // draw segment g1
+                    x = xPos;
+                    y = (this.digitHeight - this.segmentWidth) / 2.0;
+                    context.fillStyle = this.getSegmentColor(c, null, '2345689aefhkprsy-+*=', '%');
+                    context.beginPath();
+                    context.moveTo(x + s + d, y + s);
+                    context.lineTo(x + this.segmentWidth + d, y);
+                    context.lineTo(x + t - d - s, y);
+                    context.lineTo(x + t - d, y + s);
+                    context.lineTo(x + t - d - s, y + this.segmentWidth);
+                    context.lineTo(x + this.segmentWidth + d, y + this.segmentWidth);
+                    context.fill();
+                    // draw segment g2
+                    x = xPos;
+                    y = (this.digitHeight - this.segmentWidth) / 2.0;
+                    context.fillStyle = this.getSegmentColor(c, null, '234689abefghprsy-+*=@', '%');
+                    context.beginPath();
+                    context.moveTo(x + t + d, y + s);
+                    context.lineTo(x + t + d + s, y);
+                    context.lineTo(x + this.digitWidth - this.segmentWidth - d, y);
+                    context.lineTo(x + this.digitWidth - s - d, y + s);
+                    context.lineTo(x + this.digitWidth - this.segmentWidth - d, y + this.segmentWidth);
+                    context.lineTo(x + t + d + s, y + this.segmentWidth);
+                    context.fill();
+                    // draw segment j
+                    x = xPos + t - s;
+                    y = 0;
+                    context.fillStyle = this.getSegmentColor(c, null, 'bdit+*', '%');
+                    context.beginPath();
+                    if (this.segmentCount == 14) {
+                        context.moveTo(x, y + this.segmentWidth + this.segmentDistance);
+                        context.lineTo(x + this.segmentWidth, y + this.segmentWidth + this.segmentDistance);
+                    }
+                    else {
+                        context.moveTo(x, y + this.segmentWidth + d);
+                        context.lineTo(x + s, y + s + d);
+                        context.lineTo(x + this.segmentWidth, y + this.segmentWidth + d);
+                    }
+                    context.lineTo(x + this.segmentWidth, y + h + this.segmentWidth - d);
+                    context.lineTo(x + s, y + h + this.segmentWidth + s - d);
+                    context.lineTo(x, y + h + this.segmentWidth - d);
+                    context.fill();
+                    // draw segment m
+                    x = xPos + t - s;
+                    y = this.digitHeight;
+                    context.fillStyle = this.getSegmentColor(c, null, 'bdity+*@', '%');
+                    context.beginPath();
+                    if (this.segmentCount == 14) {
+                        context.moveTo(x, y - this.segmentWidth - this.segmentDistance);
+                        context.lineTo(x + this.segmentWidth, y - this.segmentWidth - this.segmentDistance);
+                    }
+                    else {
+                        context.moveTo(x, y - this.segmentWidth - d);
+                        context.lineTo(x + s, y - s - d);
+                        context.lineTo(x + this.segmentWidth, y - this.segmentWidth - d);
+                    }
+                    context.lineTo(x + this.segmentWidth, y - h - this.segmentWidth + d);
+                    context.lineTo(x + s, y - h - this.segmentWidth - s + d);
+                    context.lineTo(x, y - h - this.segmentWidth + d);
+                    context.fill();
+                    // draw segment h
+                    x = xPos + this.segmentWidth;
+                    y = this.segmentWidth;
+                    context.fillStyle = this.getSegmentColor(c, null, 'mnx\\*');
+                    context.beginPath();
+                    context.moveTo(x + this.segmentDistance, y + this.segmentDistance);
+                    context.lineTo(x + this.segmentDistance + r, y + this.segmentDistance);
+                    context.lineTo(x + w - this.segmentDistance, y + h - this.segmentDistance - r);
+                    context.lineTo(x + w - this.segmentDistance, y + h - this.segmentDistance);
+                    context.lineTo(x + w - this.segmentDistance - r, y + h - this.segmentDistance);
+                    context.lineTo(x + this.segmentDistance, y + this.segmentDistance + r);
+                    context.fill();
+                    // draw segment k
+                    x = xPos + w + 2.0 * this.segmentWidth;
+                    y = this.segmentWidth;
+                    context.fillStyle = this.getSegmentColor(c, null, '0kmvxz/*', '%');
+                    context.beginPath();
+                    context.moveTo(x + w - this.segmentDistance, y + this.segmentDistance);
+                    context.lineTo(x + w - this.segmentDistance, y + this.segmentDistance + r);
+                    context.lineTo(x + this.segmentDistance + r, y + h - this.segmentDistance);
+                    context.lineTo(x + this.segmentDistance, y + h - this.segmentDistance);
+                    context.lineTo(x + this.segmentDistance, y + h - this.segmentDistance - r);
+                    context.lineTo(x + w - this.segmentDistance - r, y + this.segmentDistance);
+                    context.fill();
+                    // draw segment l
+                    x = xPos + w + 2.0 * this.segmentWidth;
+                    y = h + 2.0 * this.segmentWidth;
+                    context.fillStyle = this.getSegmentColor(c, null, '5knqrwx\\*');
+                    context.beginPath();
+                    context.moveTo(x + this.segmentDistance, y + this.segmentDistance);
+                    context.lineTo(x + this.segmentDistance + r, y + this.segmentDistance);
+                    context.lineTo(x + w - this.segmentDistance, y + h - this.segmentDistance - r);
+                    context.lineTo(x + w - this.segmentDistance, y + h - this.segmentDistance);
+                    context.lineTo(x + w - this.segmentDistance - r, y + h - this.segmentDistance);
+                    context.lineTo(x + this.segmentDistance, y + this.segmentDistance + r);
+                    context.fill();
+                    // draw segment n
+                    x = xPos + this.segmentWidth;
+                    y = h + 2.0 * this.segmentWidth;
+                    context.fillStyle = this.getSegmentColor(c, null, '0vwxz/*', '%');
+                    context.beginPath();
+                    context.moveTo(x + w - this.segmentDistance, y + this.segmentDistance);
+                    context.lineTo(x + w - this.segmentDistance, y + this.segmentDistance + r);
+                    context.lineTo(x + this.segmentDistance + r, y + h - this.segmentDistance);
+                    context.lineTo(x + this.segmentDistance, y + h - this.segmentDistance);
+                    context.lineTo(x + this.segmentDistance, y + h - this.segmentDistance - r);
+                    context.lineTo(x + w - this.segmentDistance - r, y + this.segmentDistance);
+                    context.fill();
+                }
+                return this.digitDistance + this.digitWidth;
+            case '.':
+                context.fillStyle = c == '#' || c == '.' ? this.colorOn : this.colorOff;
+                this.drawPoint(context, xPos, this.digitHeight - this.segmentWidth, this.segmentWidth);
+                return this.digitDistance + this.segmentWidth;
+            case ':':
+                context.fillStyle = c == '#' || c == ':' ? this.colorOn : this.colorOff;
+                var y = (this.digitHeight - this.segmentWidth) / 2.0 - this.segmentWidth;
+                this.drawPoint(context, xPos, y, this.segmentWidth);
+                this.drawPoint(context, xPos, y + 2.0 * this.segmentWidth, this.segmentWidth);
+                return this.digitDistance + this.segmentWidth;
+            default:
+                return this.digitDistance;
+        }
+    }
+    drawPoint(context, x1, y1, size) {
+        var x2 = x1 + size;
+        var y2 = y1 + size;
+        var d = size / 4.0;
+        context.beginPath();
+        context.moveTo(x2 - d, y1);
+        context.quadraticCurveTo(x2, y1, x2, y1 + d);
+        context.lineTo(x2, y2 - d);
+        context.quadraticCurveTo(x2, y2, x2 - d, y2);
+        context.lineTo(x1 + d, y2);
+        context.quadraticCurveTo(x1, y2, x1, y2 - d);
+        context.lineTo(x1, y1 + d);
+        context.quadraticCurveTo(x1, y1, x1 + d, y1);
+        context.fill();
+    }
+    getSegmentColor(c, charSet7, charSet14, charSet16) {
+        if (c == '#') {
+            return this.colorOn;
+        }
+        else {
+            switch (this.segmentCount) {
+                case 7:
+                    return (charSet7 === null || charSet7 === void 0 ? void 0 : charSet7.indexOf(c)) == -1 ? this.colorOff : this.colorOn;
+                case 14:
+                    return (charSet14 === null || charSet14 === void 0 ? void 0 : charSet14.indexOf(c)) == -1 ? this.colorOff : this.colorOn;
+                case 16:
+                    var pattern = charSet14 + (charSet16 === undefined ? '' : charSet16);
+                    return pattern.indexOf(c) == -1 ? this.colorOff : this.colorOn;
+                default:
+                    return this.colorOff;
+            }
+        }
+    }
+}
+// Segment display types
+SegmentDisplay.SevenSegment = 7;
+SegmentDisplay.FourteenSegment = 14;
+SegmentDisplay.SixteenSegment = 16;
+// Segment corner types
+SegmentDisplay.SymmetricCorner = 0;
+SegmentDisplay.SquaredCorner = 1;
+SegmentDisplay.RoundedCorner = 2;
+export default SegmentDisplay;
+//# sourceMappingURL=segment-display.js.map