@record-evolution/widget-overlay 1.0.11 → 1.0.13

package/src/definition-schema.json

@@ -1,6 +1,20 @@
 {
-    "title": "Input Data",
+    "title": "Image Overlay Configuration",
     "description": "An image overlay widget for displaying data-driven annotations on top of background images. Use this widget to create visual dashboards that combine a schematic, floor plan, process diagram, or photo with real-time data overlays. Supports two overlay types: progress bars showing fill levels and text pins displaying values. Overlays are positioned using relative coordinates (0-1) so they scale with the image. Ideal for factory floor visualizations, building management systems, process monitoring, or any scenario where data should be shown in spatial context on a reference image.",
+    "aiSelection": {
+        "dataShape": "A background image plus pins placed on it by relative coordinates (relXPos / relYPos in 0-1, so they scale with the image). Each pin binds one live value, drawn either as a progress bar (progressPins) or as text (textPins).",
+        "useWhen": [
+            "Values only make sense in their spatial context — tank levels on a process diagram, room temperatures on a floor plan, station output on a line layout.",
+            "A photo or schematic already exists and should be annotated with live readings.",
+            "Fill levels should be shown in place as progress bars against a picture of the plant."
+        ],
+        "notFor": [
+            "Positions on the earth rather than on a picture — use widget-mapbox.",
+            "A standard industrial component (tank, pump, valve, meter) that the platform can already draw and animate — use widget-scada, which needs no background image.",
+            "An image with no data on it — use widget-image.",
+            "Values compared against each other rather than placed in space — use widget-linechart, widget-value or widget-gauge."
+        ]
+    },
     "type": "object",
     "properties": {
         "title": {

package/src/widget-overlay.ts

@@ -2,25 +2,36 @@ import { html, css, LitElement, PropertyValues, nothing } from 'lit'
 import { property, query, state } from 'lit/decorators.js'
 import { styleMap } from 'lit/directives/style-map.js'
 import { unsafeSVG } from 'lit/directives/unsafe-svg.js'
-import {
-    InputData,
-    Modifier,
-    Overlay,
-    ProgressItem,
-    ProgressOverlay,
-    TextItem,
-    TextOverlay
-} from './definition-schema.js'
+import { ImageOverlayConfiguration, Overlays } from './definition-schema.js'
 import { repeat } from 'lit/directives/repeat.js'
 import './linear-progress.js'
 
+// Views over the generated schema types. json-schema-to-typescript names the
+// layer array `Overlays` and gives its pin arrays no names of their own, so the
+// per-layer and per-pin types the component works with are derived here.
+type Overlay = Overlays[number]
+type TextOverlay = Overlay
+type ProgressOverlay = Overlay
+type TextItem = NonNullable<Overlay['textPins']>[number]
+type ProgressItem = NonNullable<Overlay['progressPins']>[number]
+
+// Not schema data: the scaling factor and letterbox offsets of the background
+// image inside the widget, recomputed by getModifier() on every resize.
+type Modifier = {
+    scaler: number
+    xOffset: number
+    yOffset: number
+    visibleWidth: number
+    visibleHeight: number
+}
+
 type Theme = {
     theme_name: string
     theme_object: any
 }
 export class WidgetImage extends LitElement {
     @property({ type: Object })
-    inputData?: InputData
+    inputData?: ImageOverlayConfiguration
 
     @property({ type: Object })
     theme?: Theme
@@ -62,12 +73,9 @@ export class WidgetImage extends LitElement {
     }
 
     registerTheme(theme?: Theme) {
-        const cssTextColor = getComputedStyle(this).getPropertyValue('--re-text-color').trim()
-        const cssBgColor = getComputedStyle(this).getPropertyValue('--re-tile-background-color').trim()
-        this.themeBgColor = cssBgColor || this.theme?.theme_object?.backgroundColor
-        this.themeTitleColor = cssTextColor || this.theme?.theme_object?.title?.textStyle?.color
-        this.themeSubtitleColor =
-            cssTextColor || this.theme?.theme_object?.title?.subtextStyle?.color || this.themeTitleColor
+        this.themeBgColor = `var(--re-tile-background-color, ${this.theme?.theme_object?.backgroundColor || 'transparent'})`
+        this.themeTitleColor = `var(--re-text-color, ${this.theme?.theme_object?.title?.textStyle?.color || 'inherit'})`
+        this.themeSubtitleColor = `var(--re-text-color, ${this.theme?.theme_object?.title?.subtextStyle?.color || this.theme?.theme_object?.title?.textStyle?.color || 'inherit'})`
     }
 
     private handleFileChange(ev: Event) {