@openremote/or-dashboard-builder 1.2.0-snapshot.20240512154942

package/src/settings/chart-settings.ts

@@ -0,0 +1,306 @@
+import {css, html, TemplateResult } from "lit";
+import { customElement } from "lit/decorators.js";
+import {WidgetSettings} from "../util/widget-settings";
+import "../panels/attributes-panel";
+import "../util/settings-panel";
+import {i18next} from "@openremote/or-translate";
+import {AttributeAction, AttributeActionEvent, AttributesSelectEvent} from "../panels/attributes-panel";
+import {Asset, AssetDatapointIntervalQuery, AssetDatapointIntervalQueryFormula, Attribute, AttributeRef} from "@openremote/model";
+import {ChartWidgetConfig} from "../widgets/chart-widget";
+import {InputType, OrInputChangedEvent} from "@openremote/or-mwc-components/or-mwc-input";
+import {TimePresetCallback} from "@openremote/or-chart";
+import {when} from "lit/directives/when.js";
+
+const styling = css`
+  .switch-container {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+`
+
+
+@customElement("chart-settings")
+export class ChartSettings extends WidgetSettings {
+
+    protected readonly widgetConfig!: ChartWidgetConfig
+
+    protected timePresetOptions: Map<string, TimePresetCallback> = new Map<string, TimePresetCallback>();
+    protected samplingOptions: Map<string, string> = new Map<string, string>();
+
+    public setTimePresetOptions(options: Map<string, TimePresetCallback>) {
+        this.timePresetOptions = options;
+    }
+
+    public setSamplingOptions(options: Map<string, string>) {
+        this.samplingOptions = options;
+    }
+
+    static get styles() {
+        return [...super.styles, styling];
+    }
+
+    protected render(): TemplateResult {
+        const attributeFilter: (attr: Attribute<any>) => boolean = (attr): boolean => {
+            return ["boolean", "positiveInteger", "positiveNumber", "number", "long", "integer", "bigInteger", "negativeInteger", "negativeNumber", "bigNumber", "integerByte", "direction"].includes(attr.type!)
+        };
+        const min = this.widgetConfig.chartOptions.options?.scales?.y?.min;
+        const max = this.widgetConfig.chartOptions.options?.scales?.y?.max;
+        const isMultiAxis = this.widgetConfig.rightAxisAttributes.length > 0;
+        const samplingValue = Array.from(this.samplingOptions.entries()).find((entry => entry[1] === this.widgetConfig.datapointQuery.type))![0]
+        const attributeLabelCallback = (asset: Asset, attribute: Attribute<any>, attributeLabel: string) => {
+            const isOnRightAxis = isMultiAxis && this.widgetConfig.rightAxisAttributes.find(ar => ar.id === asset.id && ar.name === attribute.name) !== undefined;
+            return html`
+                <span>${asset.name}</span>
+                <span style="font-size:14px; color:grey;">${attributeLabel}</span>
+                ${when(isOnRightAxis, () => html`
+                    <span style="position: absolute; right: 0; margin-bottom: 16px; font-size:14px; color:grey;"><or-translate value="right"></or-translate></span>
+                `)}
+            `
+        }
+        const attributeActionCallback = (attributeRef: AttributeRef): AttributeAction[] => {
+            return [{
+                icon: this.widgetConfig.rightAxisAttributes.includes(attributeRef) ? "arrow-right-bold" : "arrow-left-bold",
+                tooltip: i18next.t('dashboard.toggleAxis'),
+                disabled: false
+            }]
+        }
+        return html`
+            <div>
+                <!-- Attribute selection -->
+                <settings-panel displayName="attributes" expanded="${true}">
+                    <attributes-panel .attributeRefs="${this.widgetConfig.attributeRefs}" multi="${true}" onlyDataAttrs="${true}" .attributeFilter="${attributeFilter}" style="padding-bottom: 12px;"
+                                      .attributeLabelCallback="${attributeLabelCallback}" .attributeActionCallback="${attributeActionCallback}"
+                                      @attribute-action="${(ev: AttributeActionEvent) => this.onAttributeAction(ev)}"
+                                      @attribute-select="${(ev: AttributesSelectEvent) => this.onAttributesSelect(ev)}"
+                    ></attributes-panel>
+                </settings-panel>
+
+                <!-- Display options -->
+                <settings-panel displayName="display" expanded="${true}">
+                    <div style="padding-bottom: 12px; display: flex; flex-direction: column; gap: 6px;">
+                        <!-- Timeframe -->
+                        <div>
+                            <or-mwc-input .type="${InputType.SELECT}" label="${i18next.t('timeframeDefault')}" style="width: 100%;"
+                                          .options="${Array.from(this.timePresetOptions.keys())}" value="${this.widgetConfig.defaultTimePresetKey}"
+                                          @or-mwc-input-changed="${(ev: OrInputChangedEvent) => this.onTimePresetSelect(ev)}"
+                            ></or-mwc-input>
+                        </div>
+                        <!-- Y Min/max options -->
+                        <div>
+                            <div class="switch-container">
+                                <span><or-translate value="dashboard.allowTimerangeSelect"></or-translate></span>
+                                <or-mwc-input .type="${InputType.SWITCH}" style="margin: 0 -10px;" .value="${!this.widgetConfig.showTimestampControls}"
+                                              @or-mwc-input-changed="${(ev: OrInputChangedEvent) => this.onTimestampControlsToggle(ev)}"
+                                ></or-mwc-input>
+                            </div>
+                            <div class="switch-container">
+                                <span><or-translate value="dashboard.showLegend"></or-translate></span>
+                                <or-mwc-input .type="${InputType.SWITCH}" style="margin: 0 -10px;" .value="${this.widgetConfig.showLegend}"
+                                              @or-mwc-input-changed="${(ev: OrInputChangedEvent) => this.onShowLegendToggle(ev)}"
+                                ></or-mwc-input>
+                            </div>
+                        </div>
+                    </div>
+                </settings-panel>
+
+                <!-- Axis configuration -->
+                <settings-panel displayName="dashboard.axisConfig" expanded="${true}">
+                    <div style="padding-bottom: 12px; display: flex; flex-direction: column; gap: 16px;">
+
+                        <!-- Left axis configuration -->
+                        <div>
+                            ${when(isMultiAxis, () => html`
+                                <div style="margin-bottom: 8px;">
+                                    <span><or-translate value="dashboard.leftAxis"></or-translate></span>
+                                </div>
+                            `)}
+                            <div style="display: flex;">
+                                ${max !== undefined ? html`
+                                    <or-mwc-input .type="${InputType.NUMBER}" label="${i18next.t('yAxis') + ' ' + i18next.t('max')}" .value="${max}" style="width: 100%;"
+                                                  @or-mwc-input-changed="${(ev: OrInputChangedEvent) => this.onMinMaxValueChange('left', 'max', ev)}"
+                                    ></or-mwc-input>
+                                ` : html`
+                                    <or-mwc-input .type="${InputType.TEXT}" label="${i18next.t('yAxis') + ' ' + i18next.t('max')}" disabled="true" value="auto" style="width: 100%;"></or-mwc-input>
+                                `}
+                                <or-mwc-input .type="${InputType.SWITCH}" style="margin: 0 -10px 0 0;" .value="${max !== undefined}"
+                                              @or-mwc-input-changed="${(ev: OrInputChangedEvent) => this.onMinMaxValueToggle('left', 'max', ev)}"
+                                ></or-mwc-input>
+                            </div>
+                            <div style="display: flex; margin-top: 12px;">
+                                ${min !== undefined ? html`
+                                    <or-mwc-input .type="${InputType.NUMBER}" label="${i18next.t('yAxis') + ' ' + i18next.t('min')}" .value="${min}" style="width: 100%;"
+                                                  @or-mwc-input-changed="${(ev: OrInputChangedEvent) => this.onMinMaxValueChange('left', 'min', ev)}"
+                                    ></or-mwc-input>
+                                ` : html`
+                                    <or-mwc-input .type="${InputType.TEXT}" label="${i18next.t('yAxis') + ' ' + i18next.t('min')}" disabled="true" value="auto" style="width: 100%;"></or-mwc-input>
+                                `}
+                                <or-mwc-input .type="${InputType.SWITCH}" style="margin: 0 -10px 0 0;" .value="${min !== undefined}"
+                                              @or-mwc-input-changed="${(ev: OrInputChangedEvent) => this.onMinMaxValueToggle('left', 'min', ev)}"
+                                ></or-mwc-input>
+                            </div>
+                        </div>
+
+                        <!-- Right axis configuration -->
+                        ${when(isMultiAxis, () => {
+                            const rightMin = this.widgetConfig.chartOptions.options?.scales?.y1?.min;
+                            const rightMax = this.widgetConfig.chartOptions.options?.scales?.y1?.max;
+                            return html`
+                                <div>
+                                    <div style="margin-bottom: 8px;">
+                                        <span><or-translate value="dashboard.rightAxis"></or-translate></span>
+                                    </div>
+                                    <div style="display: flex;">
+                                        ${rightMax !== undefined ? html`
+                                            <or-mwc-input .type="${InputType.NUMBER}" label="${i18next.t('yAxis') + ' ' + i18next.t('max')}" .value="${rightMax}" style="width: 100%;"
+                                                          @or-mwc-input-changed="${(ev: OrInputChangedEvent) => this.onMinMaxValueChange('right', 'max', ev)}"
+                                            ></or-mwc-input>
+                                        ` : html`
+                                            <or-mwc-input .type="${InputType.TEXT}" label="${i18next.t('yAxis') + ' ' + i18next.t('max')}" disabled="true" value="auto"
+                                                          style="width: 100%;"></or-mwc-input>
+                                        `}
+                                        <or-mwc-input .type="${InputType.SWITCH}" style="margin: 0 -10px 0 0;" .value="${rightMax !== undefined}"
+                                                      @or-mwc-input-changed="${(ev: OrInputChangedEvent) => this.onMinMaxValueToggle('right', 'max', ev)}"
+                                        ></or-mwc-input>
+                                    </div>
+                                    <div style="display: flex; margin-top: 12px;">
+                                        ${rightMin !== undefined ? html`
+                                            <or-mwc-input .type="${InputType.NUMBER}" label="${i18next.t('yAxis') + ' ' + i18next.t('min')}" .value="${rightMin}" style="width: 100%;"
+                                                          @or-mwc-input-changed="${(ev: OrInputChangedEvent) => this.onMinMaxValueChange('right', 'min', ev)}"
+                                            ></or-mwc-input>
+                                        ` : html`
+                                            <or-mwc-input .type="${InputType.TEXT}" label="${i18next.t('yAxis') + ' ' + i18next.t('min')}" disabled="true" value="auto"
+                                                          style="width: 100%;"></or-mwc-input>
+                                        `}
+                                        <or-mwc-input .type="${InputType.SWITCH}" style="margin: 0 -10px 0 0;" .value="${rightMin !== undefined}"
+                                                      @or-mwc-input-changed="${(ev: OrInputChangedEvent) => this.onMinMaxValueToggle('right', 'min', ev)}"
+                                        ></or-mwc-input>
+                                    </div>
+                                </div>
+                            `
+                        })}
+                    </div>
+                </settings-panel>
+
+                <!-- Data sampling options -->
+                <settings-panel displayName="dataSampling" expanded="${true}">
+                    <div style="padding-bottom: 12px; display: flex; flex-direction: column; gap: 12px;">
+                        <div>
+                            <or-mwc-input .type="${InputType.SELECT}" style="width: 100%" .options="${Array.from(this.samplingOptions.keys())}" .value="${samplingValue}"
+                                          label="${i18next.t('algorithm')}" @or-mwc-input-changed="${(ev: OrInputChangedEvent) => this.onSamplingQueryChange(ev)}"
+                            ></or-mwc-input>
+                        </div>
+                        <div>
+                            ${this.getSamplingOptionsTemplate(this.widgetConfig.datapointQuery.type)}
+                        </div>
+                    </div>
+                </settings-panel>
+            </div>
+        `;
+    }
+
+    protected getSamplingOptionsTemplate(type: any): TemplateResult {
+        switch (type) {
+            case 'interval': {
+                const intervalQuery = this.widgetConfig.datapointQuery as AssetDatapointIntervalQuery;
+                const formulaOptions = [AssetDatapointIntervalQueryFormula.AVG, AssetDatapointIntervalQueryFormula.MIN, AssetDatapointIntervalQueryFormula.MAX];
+                return html`
+                    <or-mwc-input .type="${InputType.SELECT}" style="width: 100%;" .options="${formulaOptions}"
+                                  .value="${intervalQuery.formula}" label="${i18next.t('algorithmMethod')}" @or-mwc-input-changed="${(event: OrInputChangedEvent) => {
+                        intervalQuery.formula = event.detail.value;
+                        this.notifyConfigUpdate();
+                    }}"
+                    ></or-mwc-input>
+                `;
+            }
+            default:
+                return html``;
+        }
+    }
+
+    // When a user clicks on ANY action in the attribute list, we want to switch between LEFT and RIGHT axis.
+    // Since that is the only action, there is no need to check the ev.action variable.
+    protected onAttributeAction(ev: AttributeActionEvent) {
+        if(this.widgetConfig.attributeRefs.indexOf(ev.detail.attributeRef) >= 0) {
+            if(this.widgetConfig.rightAxisAttributes.includes(ev.detail.attributeRef)) {
+                this.removeFromRightAxis(ev.detail.attributeRef);
+            } else {
+                this.addToRightAxis(ev.detail.attributeRef);
+            }
+            this.notifyConfigUpdate();
+        }
+    }
+
+    // When the list of attributeRefs is changed by the asset selector,
+    // we should remove the "right axis" references for the attributes that got removed.
+    // Also update the WidgetConfig attributeRefs field as usual
+    protected onAttributesSelect(ev: AttributesSelectEvent) {
+        const removedAttributeRefs = this.widgetConfig.attributeRefs.filter(ar => !ev.detail.attributeRefs.includes(ar));
+        removedAttributeRefs.forEach(raf => this.removeFromRightAxis(raf));
+        this.widgetConfig.attributeRefs = ev.detail.attributeRefs;
+        this.notifyConfigUpdate();
+    }
+
+    protected addToRightAxis(attributeRef: AttributeRef, notify = false) {
+        if(!this.widgetConfig.rightAxisAttributes.includes(attributeRef)) {
+            this.widgetConfig.rightAxisAttributes.push(attributeRef);
+            if(notify) {
+                this.notifyConfigUpdate();
+            }
+        }
+    }
+
+    protected removeFromRightAxis(attributeRef: AttributeRef, notify = false) {
+        if(this.widgetConfig.rightAxisAttributes.includes(attributeRef)) {
+            this.widgetConfig.rightAxisAttributes.splice(this.widgetConfig.rightAxisAttributes.indexOf(attributeRef), 1);
+            if(notify) {
+                this.notifyConfigUpdate();
+            }
+        }
+    }
+
+    protected onTimePresetSelect(ev: OrInputChangedEvent) {
+        this.widgetConfig.defaultTimePresetKey = ev.detail.value.toString();
+        this.notifyConfigUpdate();
+    }
+
+    protected onTimestampControlsToggle(ev: OrInputChangedEvent) {
+        this.widgetConfig.showTimestampControls = !ev.detail.value;
+        this.notifyConfigUpdate();
+    }
+
+    protected onShowLegendToggle(ev: OrInputChangedEvent) {
+        this.widgetConfig.showLegend = ev.detail.value;
+        this.notifyConfigUpdate();
+    }
+
+    protected setAxisMinMaxValue(axis: 'left' | 'right', type: 'min' | 'max', value?: number) {
+        if(axis === 'left') {
+            if(type === 'min') {
+                this.widgetConfig.chartOptions.options.scales.y.min = value;
+            } else {
+                this.widgetConfig.chartOptions.options.scales.y.max = value;
+            }
+        } else {
+            if(type === 'min') {
+                this.widgetConfig.chartOptions.options.scales.y1.min = value;
+            } else {
+                this.widgetConfig.chartOptions.options.scales.y1.max = value;
+            }
+        }
+        this.notifyConfigUpdate();
+    }
+
+    protected onMinMaxValueChange(axis: 'left' | 'right', type: 'min' | 'max', ev: OrInputChangedEvent) {
+        this.setAxisMinMaxValue(axis, type, ev.detail.value);
+    }
+
+    protected onMinMaxValueToggle(axis: 'left' | 'right', type: 'min' | 'max', ev: OrInputChangedEvent) {
+        this.setAxisMinMaxValue(axis, type, (ev.detail.value ? (type === 'min' ? 0 : 100) : undefined));
+    }
+
+    protected onSamplingQueryChange(ev: OrInputChangedEvent) {
+        this.widgetConfig.datapointQuery.type = this.samplingOptions.get(ev.detail.value)! as any;
+        this.notifyConfigUpdate();
+    }
+}

package/src/settings/gauge-settings.ts

@@ -0,0 +1,93 @@
+import {html, TemplateResult} from "lit";
+import {customElement} from "lit/decorators.js";
+import {WidgetSettings} from "../util/widget-settings";
+import {i18next} from "@openremote/or-translate";
+import {GaugeWidgetConfig} from "../widgets/gauge-widget";
+import {AttributesSelectEvent} from "../panels/attributes-panel";
+import {Attribute} from "@openremote/model";
+import { InputType, OrInputChangedEvent } from "@openremote/or-mwc-components/or-mwc-input";
+import {ThresholdChangeEvent} from "../panels/thresholds-panel";
+import "../panels/thresholds-panel";
+
+@customElement("gauge-settings")
+export class GaugeSettings extends WidgetSettings {
+
+    // Override of widgetConfig with extended type
+    protected widgetConfig!: GaugeWidgetConfig;
+
+    protected render(): TemplateResult {
+        const attributeFilter: (attr: Attribute<any>) => boolean = (attr): boolean => {
+            return ["positiveInteger", "positiveNumber", "number", "long", "integer", "bigInteger", "negativeInteger", "negativeNumber", "bigNumber", "integerByte", "direction"].includes(attr.type!)
+        };
+        return html`
+            <div>
+                <!-- Attribute selection -->
+                <settings-panel displayName="attributes" expanded="${true}">
+                    <attributes-panel .attributeRefs="${this.widgetConfig.attributeRefs}" .attributeFilter="${attributeFilter}" style="padding-bottom: 12px;"
+                                      @attribute-select="${(ev: AttributesSelectEvent) => this.onAttributesSelect(ev)}"
+                    ></attributes-panel>
+                </settings-panel>
+                
+                <!-- Min/max and decimals options-->
+                <settings-panel displayName="values" expanded="${true}">
+                    <div style="padding-bottom: 12px; display: flex; flex-direction: column; gap: 12px;">
+                        <div style="display: flex; gap: 8px;">
+                            <or-mwc-input .type="${InputType.NUMBER}" label="${i18next.t('min')}" .max="${this.widgetConfig.max}" .value="${this.widgetConfig.min}"
+                                          @or-mwc-input-changed="${(ev: OrInputChangedEvent) => this.onMinMaxValueChange('min', ev)}"
+                            ></or-mwc-input>
+                            <or-mwc-input .type="${InputType.NUMBER}" label="${i18next.t('max')}" .min="${this.widgetConfig.min}" .value="${this.widgetConfig.max}"
+                                          @or-mwc-input-changed="${(ev: OrInputChangedEvent) => this.onMinMaxValueChange('max', ev)}"
+                            ></or-mwc-input>
+                        </div>
+                        <div>
+                            <or-mwc-input .type="${InputType.NUMBER}" style="width: 100%;" .value="${this.widgetConfig.decimals}" label="${i18next.t('decimals')}" .min="${0}"
+                                          @or-mwc-input-changed="${(ev: OrInputChangedEvent) => this.onDecimalsChange(ev)}"
+                            ></or-mwc-input>
+                        </div>
+                    </div>
+                </settings-panel>
+                
+                <!-- Thresholds panel -->
+                <settings-panel displayName="thresholds" expanded="${true}">
+                    <thresholds-panel .thresholds="${this.widgetConfig.thresholds}" .valueType="${'number'}" style="padding-bottom: 12px;"
+                                      .min="${this.widgetConfig.min}" .max="${this.widgetConfig.max}"
+                                      @threshold-change="${(ev: ThresholdChangeEvent) => this.onThresholdChange(ev)}">
+                    </thresholds-panel>
+                </settings-panel>
+            </div>
+        `;
+    }
+
+    // When new attributes get selected
+    // Update the displayName to the new asset and attribute name.
+    protected onAttributesSelect(ev: AttributesSelectEvent) {
+        this.widgetConfig.attributeRefs = ev.detail.attributeRefs;
+        if(ev.detail.attributeRefs.length === 1) {
+            const attributeRef = ev.detail.attributeRefs[0];
+            const asset = ev.detail.assets.find((asset) => asset.id === attributeRef.id);
+            this.setDisplayName!(asset ? `${asset.name} - ${attributeRef.name}` : `${attributeRef.name}`);
+        }
+        this.notifyConfigUpdate();
+    }
+
+    protected onMinMaxValueChange(type: 'min' | 'max', ev: OrInputChangedEvent) {
+        switch (type) {
+            case "max":
+                this.widgetConfig.max = ev.detail.value; break;
+            case "min":
+                this.widgetConfig.min = ev.detail.value; break;
+        }
+        this.notifyConfigUpdate();
+    }
+
+    protected onDecimalsChange(ev: OrInputChangedEvent) {
+        this.widgetConfig.decimals = ev.detail.value;
+        this.notifyConfigUpdate();
+    }
+
+    protected onThresholdChange(ev: ThresholdChangeEvent) {
+        this.widgetConfig.thresholds = ev.detail;
+        this.notifyConfigUpdate();
+    }
+
+}

package/src/settings/image-settings.ts

@@ -0,0 +1,175 @@
+import {css, html, PropertyValues, TemplateResult } from "lit";
+import { customElement, state } from "lit/decorators.js";
+import {ImageWidgetConfig} from "../widgets/image-widget";
+import {i18next} from "@openremote/or-translate";
+import {AttributesSelectEvent} from "../panels/attributes-panel";
+import {Asset, AssetModelUtil, AttributeRef} from "@openremote/model";
+import { map } from "lit/directives/map.js";
+import { InputType, OrInputChangedEvent } from "@openremote/or-mwc-components/or-mwc-input";
+import {Util} from "@openremote/core";
+import { when } from "lit/directives/when.js";
+import {AssetWidgetSettings} from "../util/or-asset-widget";
+
+const styling = css`
+  #marker-container {
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+  }
+`;
+
+@customElement("image-settings")
+export class ImageSettings extends AssetWidgetSettings {
+
+    // Override of widgetConfig with extended type
+    protected readonly widgetConfig!: ImageWidgetConfig;
+
+    static get styles() {
+        return [...super.styles, styling]
+    }
+
+    protected willUpdate(changedProps: PropertyValues) {
+        super.willUpdate(changedProps);
+        if(changedProps.has('widgetConfig') && this.widgetConfig) {
+            this.updateCoordinateMap(this.widgetConfig);
+            this.loadAssets();
+        }
+    }
+
+    protected loadAssets() {
+        const missingAssets = this.widgetConfig.attributeRefs.filter(ref => !this.isAttributeRefLoaded(ref));
+        if(missingAssets.length > 0) {
+            this.fetchAssets(this.widgetConfig.attributeRefs).then((assets) => {
+                if(assets === undefined) {
+                    this.loadedAssets = [];
+                } else {
+                    this.loadedAssets = assets;
+                }
+            });
+        }
+    }
+
+    protected render(): TemplateResult {
+        return html`
+            <div>
+                <!-- Attributes selector -->
+                <settings-panel displayName="'attributes" expanded="${true}">
+                    <attributes-panel .attributeRefs="${this.widgetConfig.attributeRefs}" onlyDataAttrs="${false}" multi="${true}"
+                                      @attribute-select="${(ev: AttributesSelectEvent) => this.onAttributesSelect(ev)}"
+                    ></attributes-panel>
+                </settings-panel>
+                
+                <!-- Marker coordinates -->
+                <settings-panel displayName="dashboard.markerCoordinates" expanded="${true}">
+                    <div style="display: flex; flex-direction: column; gap: 8px;">
+                        ${map(this.draftCoordinateEntries(this.widgetConfig), template => template)}
+                    </div>
+                </settings-panel>
+                
+                <!-- Image settings -->
+                <settings-panel displayName="dashboard.imageSettings" expanded="${true}">
+                    <div>
+                        <or-mwc-input style="width: 100%;" type="${InputType.TEXT}" label="${i18next.t('dashboard.imageUrl')}" .value="${this.widgetConfig.imagePath}"
+                                      @or-mwc-input-changed="${(ev: OrInputChangedEvent) => this.onImageUrlUpdate(ev)}"
+                        ></or-mwc-input>
+                    </div>
+                </settings-panel>
+            </div>
+        `;
+    }
+
+    protected onAttributesSelect(ev: AttributesSelectEvent) {
+        this.widgetConfig.attributeRefs = ev.detail.attributeRefs;
+        this.notifyConfigUpdate();
+    }
+
+    protected onImageUrlUpdate(ev: OrInputChangedEvent) {
+        this.widgetConfig.imagePath = ev.detail.value;
+        this.notifyConfigUpdate();
+    }
+
+
+    /* -------------------------------------- */
+
+    // updates coordinate map according to the attributeRef entries per id
+    updateCoordinateMap(config: ImageWidgetConfig) {
+        for (let i = 0; i < config.attributeRefs.length; i++) {
+            const attributeRef = config.attributeRefs[i];
+            if (attributeRef === undefined) {
+                console.error('attributeRef is undefined');
+                return;
+            }
+            const index = config.markers.findIndex(m => m.attributeRef.id === attributeRef.id && m.attributeRef.name === attributeRef.name);
+            if (index === -1) {
+                config.markers.push({
+                    attributeRef: attributeRef,
+                    coordinates: [50, 50]
+                });
+            }
+        }
+    }
+
+    private draftCoordinateEntries(config: ImageWidgetConfig): TemplateResult[] {
+        const min = 0;
+        const max = 100;
+
+        if (config.markers.length > 0) {
+            return config.attributeRefs.map((attributeRef) => {
+                const marker = config.markers.find(m => m.attributeRef.id === attributeRef.id && m.attributeRef.name === attributeRef.name);
+                if(marker === undefined) {
+                    console.error("A marker could not be found during drafting coordinate entries.");
+                    return html``;
+                }
+                const index = config.markers.indexOf(marker);
+                const coordinates = marker.coordinates;
+                const asset = this.loadedAssets?.find(a => a.id === attributeRef.id);
+                let label: string | undefined;
+                if(asset) {
+                    const attribute = asset.attributes![attributeRef.name!];
+                    const descriptors = AssetModelUtil.getAttributeAndValueDescriptors(asset.type, attributeRef.name, attribute);
+                    label = Util.getAttributeLabel(attribute, descriptors[0], asset.type, false);
+                }
+                return html`
+                    <div id="marker-container">
+                        <div style="flex: 1; display: flex; flex-direction: column;">
+                            <span>${this.loadedAssets?.find(a => a.id === attributeRef.id)?.name}</span>
+                            ${when(label, () => html`
+                                <span style="color: gray;">${label}</span>
+                            `)}
+                        </div>
+                        <div style="display: flex; gap: 8px;">
+                            <or-mwc-input .disableSliderNumberInput="${true}" compact style="max-width: 64px;"
+                                          .type="${InputType.NUMBER}" .min="${min}" .max="${max}" .value="${coordinates[0]}"
+                                          @or-mwc-input-changed="${(ev: OrInputChangedEvent) => this.onCoordinateUpdate(index, 'x', ev.detail.value)}"
+                            ></or-mwc-input>
+
+                            <or-mwc-input .disableSliderNumberInput="${true}" compact style="max-width: 64px;"
+                                          .type="${InputType.NUMBER}" .min="${min}" .max="${max}" .value="${coordinates[1]}"
+                                          @or-mwc-input-changed="${(ev: OrInputChangedEvent) => this.onCoordinateUpdate(index, 'y', ev.detail.value)}"
+                            ></or-mwc-input>
+                        </div>
+                    </div>
+                `;
+            });
+        } else {
+            return [
+                html`<span><or-translate value="noAttributeConnected"></or-translate></span>`
+            ];
+        }
+    }
+
+    protected onCoordinateUpdate(index: number, coordinate: 'x' | 'y', value: number) {
+        let coords = this.widgetConfig.markers[index].coordinates;
+        if(!coords) {
+            coords = [0, 0];
+        }
+        if(coordinate === 'x') {
+            coords[0] = value;
+        } else if(coordinate === 'y') {
+            coords[1] = value;
+        }
+        this.widgetConfig.markers[index].coordinates = coords;
+        this.notifyConfigUpdate();
+    }
+
+}