@record-evolution/widget-overlay 1.0.9 → 1.0.11

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/dist/widget-overlay.js +720 -1647
  2. package/dist/widget-overlay.js.map +1 -1
  3. package/package.json +8 -3
  4. package/src/definition-schema.d.ts +0 -65
  5. package/src/definition-schema.json +32 -22
  6. package/thumbnail.webp +0 -0
package/package.json CHANGED
@@ -3,18 +3,23 @@
3
3
  "description": "Webcomponent widget-overlay following open-wc recommendations",
4
4
  "license": "MIT",
5
5
  "author": "widget-overlay",
6
- "version": "1.0.9",
6
+ "version": "1.0.11",
7
+ "engines": {
8
+ "node": ">=24.9.0",
9
+ "npm": ">=10.0.2"
10
+ },
7
11
  "type": "module",
8
12
  "main": "dist/widget-overlay.js",
9
13
  "types": "dist/src/widget-overlay.d.ts",
10
14
  "files": [
11
15
  "dist",
12
16
  "src",
13
- "thumbnail.png"
17
+ "thumbnail.png",
18
+ "thumbnail.webp"
14
19
  ],
15
20
  "scripts": {
16
21
  "analyze": "cem analyze --litelement",
17
- "start": "vite",
22
+ "start": "vite build --watch & vite",
18
23
  "build": "vite build",
19
24
  "watch": "vite build --watch",
20
25
  "link": "npm run build && npm link && cd ../RESWARM/frontend && npm link @record-evolution/widget-overlay",
package/src/definition-schema.d.ts CHANGED
@@ -1,65 +0,0 @@
1
- export interface InputData {
2
- title: string
3
- subTitle?: string
4
- stretchToFit?: boolean
5
- image?: string // base64 encoded image string or URL
6
- overlays?: Overlay[]
7
- }
8
-
9
- export type Overlay = ProgressOverlay | TextOverlay
10
-
11
- interface BaseOverlay {
12
- layerName: string
13
- layerType: 'progress' | 'text'
14
- textPins?: TextItem[]
15
- progressPins?: ProgressItem[]
16
- }
17
-
18
- interface TextItem {
19
- prefix: string
20
- suffix: string
21
- relXPos: number // 0 = left, 0.5 = center, 1 = right
22
- relYPos: number // 0 = top, 0.5 = center, 1 = bottom
23
- data: string
24
- }
25
-
26
- interface ProgressItem {
27
- relXPos: number // 0 = left, 0.5 = center, 1 = right
28
- relYPos: number // 0 = top, 0.5 = center, 1 = bottom
29
- data: string
30
- }
31
- export interface ProgressOverlay extends BaseOverlay {
32
- layerType: 'progress'
33
- progressStyle?: {
34
- width?: number
35
- height?: number
36
- rotate?: number
37
- backgroundColor?: string // CSS color
38
- }
39
- sections?: {
40
- sectionLimits: number[]
41
- colors: string[]
42
- }
43
- }
44
-
45
- export interface TextOverlay extends BaseOverlay {
46
- layerType: 'text'
47
- textStyle: {
48
- fontSize?: number
49
- fontWeight?: number
50
- precision?: number
51
- backgroundColor?: string
52
- }
53
- sections?: {
54
- sectionLimits: number[]
55
- colors: string[]
56
- }
57
- }
58
-
59
- export type Modifier = {
60
- scaler: number
61
- xOffset: number
62
- yOffset: number
63
- visibleWidth: number
64
- visibleHeight: number
65
- }
package/src/definition-schema.json CHANGED
@@ -1,33 +1,37 @@
1
1
  {
2
2
  "title": "Input Data",
3
+ "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.",
3
4
  "type": "object",
4
5
  "properties": {
5
6
  "title": {
6
7
  "title": "Title",
8
+ "description": "The main heading displayed above the overlay image. Use to describe what the visualization represents.",
7
9
  "type": "string",
8
10
  "order": 1
9
11
  },
10
12
  "subTitle": {
11
13
  "title": "Subtitle",
14
+ "description": "Secondary text displayed below the title. Use for additional context like location, update frequency, or data source.",
12
15
  "type": "string",
13
16
  "order": 2
14
17
  },
15
18
  "stretchToFit": {
16
19
  "title": "Stretch to fill",
17
20
  "type": "boolean",
18
- "description": "If enabled, the image will stretch to fill the entire widget area. If disabled, the image will maintain its aspect ratio.",
21
+ "description": "When enabled, the background image stretches to fill the entire widget area, potentially distorting aspect ratio. When disabled, the image maintains its original aspect ratio with letterboxing if needed.",
19
22
  "dataDrivenDisabled": true,
20
23
  "order": 3
21
24
  },
22
25
  "image": {
23
26
  "title": "Upload image file",
24
- "description": "Upload an image to overlay data driven information on.",
27
+ "description": "Upload the background image (PNG, JPG, SVG) that will have data overlays positioned on it. This could be a floor plan, schematic, process diagram, or any reference image.",
25
28
  "dataDrivenDisabled": true,
26
29
  "type": "image",
27
30
  "order": 4
28
31
  },
29
32
  "overlays": {
30
33
  "title": "Overlays",
34
+ "description": "Array of overlay layers. Each layer defines a type of overlay (progress bars or text) with its own styling and data pins positioned on the image.",
31
35
  "type": "array",
32
36
  "dataDrivenDisabled": true,
33
37
  "order": 4,
@@ -36,12 +40,13 @@
36
40
  "properties": {
37
41
  "layerName": {
38
42
  "title": "Layer Name",
43
+ "description": "Identifier for this overlay layer. Used for organization when multiple layers exist.",
39
44
  "type": "string",
40
45
  "order": 1
41
46
  },
42
47
  "layerType": {
43
48
  "title": "Layer Type",
44
- "description": "The type of the overlay items.",
49
+ "description": "Type of overlay elements: 'progress' for fill-level bars (tanks, batteries, progress), 'text' for numeric/text value displays.",
45
50
  "type": "string",
46
51
  "enum": ["progress", "text"],
47
52
  "dataDrivenDisabled": true,
@@ -49,7 +54,7 @@
49
54
  },
50
55
  "sections": {
51
56
  "title": "Color Sections",
52
- "description": "You can specify ranges and intermediate colors.",
57
+ "description": "Define value ranges and their corresponding colors. Used for both progress bar fill colors and text value coloring based on thresholds.",
53
58
  "type": "object",
54
59
  "condition": {
55
60
  "relativePath": "../layerType",
@@ -59,7 +64,7 @@
59
64
  "properties": {
60
65
  "sectionLimits": {
61
66
  "title": "Section Limits",
62
- "description": "The limits of the sections. Starting from the min value, ending with the max value.",
67
+ "description": "Array of boundary values defining color transitions. First value is the minimum, last is the maximum. Values between define where colors change (e.g., [0, 30, 70, 100] creates 3 zones).",
63
68
  "type": "array",
64
69
  "dataDrivenDisabled": true,
65
70
  "order": 4,
@@ -70,7 +75,7 @@
70
75
  },
71
76
  "colors": {
72
77
  "title": "Section colors",
73
- "description": "Progress color for each section. This Array is one shorter than the number of sections.",
78
+ "description": "Array of colors for each section between the limits. Should have one fewer color than section limits (e.g., 3 colors for 4 limits). Common pattern: green→yellow→red for status indication.",
74
79
  "type": "array",
75
80
  "dataDrivenDisabled": true,
76
81
  "items": {
@@ -83,6 +88,7 @@
83
88
  },
84
89
  "progressStyle": {
85
90
  "title": "Style",
91
+ "description": "Visual styling for progress bar overlays.",
86
92
  "type": "object",
87
93
  "order": 3,
88
94
  "condition": {
@@ -92,24 +98,25 @@
92
98
  "properties": {
93
99
  "rotate": {
94
100
  "title": "Rotate",
95
- "description": "Rotation of the progress bar in degrees.",
101
+ "description": "Rotation angle in degrees. Use 0 for horizontal bars, 90 or -90 for vertical bars, or any angle for diagonal orientation.",
96
102
  "type": "number",
97
103
  "order": 3
98
104
  },
99
105
  "width": {
100
106
  "title": "Width",
101
- "description": "Width of the progress bar in pixels.",
107
+ "description": "Width of the progress bar in pixels at original image scale. Scales proportionally when the image resizes.",
102
108
  "type": "number",
103
109
  "order": 1
104
110
  },
105
111
  "height": {
106
112
  "title": "Height",
107
- "description": "Height of the progress bar in pixels.",
113
+ "description": "Height of the progress bar in pixels at original image scale. Scales proportionally when the image resizes.",
108
114
  "type": "number",
109
115
  "order": 2
110
116
  },
111
117
  "backgroundColor": {
112
118
  "title": "Background Color",
119
+ "description": "Color of the unfilled portion of the progress bar. Use a neutral or faded color to contrast with the fill.",
113
120
  "type": "color",
114
121
  "order": 5
115
122
  }
@@ -117,6 +124,7 @@
117
124
  },
118
125
  "textStyle": {
119
126
  "title": "Style",
127
+ "description": "Visual styling for text pin overlays.",
120
128
  "type": "object",
121
129
  "order": 3,
122
130
  "condition": {
@@ -126,24 +134,25 @@
126
134
  "properties": {
127
135
  "fontWeight": {
128
136
  "title": "Font Weight",
129
- "description": "Font Weight is a number in the range of 100 to 900.",
137
+ "description": "Font weight from 100 (thin) to 900 (black). Use 400 for normal, 700 for bold.",
130
138
  "type": "number",
131
139
  "order": 3
132
140
  },
133
141
  "fontSize": {
134
142
  "title": "Font Size",
135
- "description": "Font Size in pixels as it should appear on the original image size. It will be scaled together with the image.",
143
+ "description": "Font size in pixels as it appears on the original image size. The text scales proportionally when the image resizes.",
136
144
  "type": "number",
137
145
  "order": 2
138
146
  },
139
147
  "precision": {
140
148
  "title": "Precision",
141
- "description": "Number of decimal places to display.",
149
+ "description": "Number of decimal places to display for numeric values. Use 0 for integers, 1-2 for measurements.",
142
150
  "type": "number",
143
151
  "order": 4
144
152
  },
145
153
  "backgroundColor": {
146
154
  "title": "Background Color",
155
+ "description": "Background color behind the text for improved readability on busy images. Leave empty for transparent background.",
147
156
  "type": "color",
148
157
  "order": 5
149
158
  }
@@ -151,7 +160,7 @@
151
160
  },
152
161
  "progressPins": {
153
162
  "title": "Progress Pins",
154
- "description": "A list of progress pins to overlay on the image at defined positions.",
163
+ "description": "Array of progress bar instances positioned on the image. Each pin represents one progress indicator at a specific location.",
155
164
  "type": "array",
156
165
  "condition": {
157
166
  "relativePath": "../layerType",
@@ -163,24 +172,25 @@
163
172
  "properties": {
164
173
  "label": {
165
174
  "title": "Label",
175
+ "description": "Identifier label for this progress bar, displayed in tooltips or alongside the bar.",
166
176
  "type": "string",
167
177
  "order": 1
168
178
  },
169
179
  "relXPos": {
170
180
  "title": "Relative X Position",
171
- "description": "Position of the item relative to the width of the image. i.e. 0 means left edge, 0.5 means center and 1 means right edge.",
181
+ "description": "Horizontal position as a fraction of image width: 0 = left edge, 0.5 = center, 1 = right edge. Position the center of the progress bar.",
172
182
  "type": "number",
173
183
  "order": 3
174
184
  },
175
185
  "relYPos": {
176
186
  "title": "Relative Y Position",
177
- "description": "Position of the item relative to the height of the image. i.e. 0 means top edge, 0.5 means center and 1 means bottom edge.",
187
+ "description": "Vertical position as a fraction of image height: 0 = top edge, 0.5 = center, 1 = bottom edge. Position the center of the progress bar.",
178
188
  "type": "number",
179
189
  "order": 4
180
190
  },
181
191
  "data": {
182
192
  "title": "Data",
183
- "description": "Value to display for the progress pin. Setup the scale in the sections settings.",
193
+ "description": "The current value to display as fill level. Should be within the section limits range defined in the layer's Color Sections. Bind to a data column for real-time updates.",
184
194
  "type": "number",
185
195
  "order": 111
186
196
  }
@@ -189,7 +199,7 @@
189
199
  },
190
200
  "textPins": {
191
201
  "title": "Text Pins",
192
- "description": "A list of text pins to overlay on the image at defined positions.",
202
+ "description": "Array of text value instances positioned on the image. Each pin displays a value with optional prefix and suffix at a specific location.",
193
203
  "type": "array",
194
204
  "condition": {
195
205
  "relativePath": "../layerType",
@@ -201,31 +211,31 @@
201
211
  "properties": {
202
212
  "prefix": {
203
213
  "title": "Prefix",
204
- "description": "Text to display before the data value.",
214
+ "description": "Text displayed before the data value (e.g., 'Temp: ', 'Level: '). Include trailing space if needed.",
205
215
  "type": "string",
206
216
  "order": 1
207
217
  },
208
218
  "suffix": {
209
219
  "title": "Suffix",
210
- "description": "Text to display after the data value.",
220
+ "description": "Text displayed after the data value (e.g., '°C', '%', ' PSI'). Include leading space if needed.",
211
221
  "type": "string",
212
222
  "order": 2
213
223
  },
214
224
  "relXPos": {
215
225
  "title": "Relative X Position",
216
- "description": "Position of the item relative to the width of the image. i.e. 0 means left edge, 0.5 means center and 1 means right edge.",
226
+ "description": "Horizontal position as a fraction of image width: 0 = left edge, 0.5 = center, 1 = right edge.",
217
227
  "type": "number",
218
228
  "order": 3
219
229
  },
220
230
  "relYPos": {
221
231
  "title": "Relative Y Position",
222
- "description": "Position of the item relative to the height of the image. i.e. 0 means top edge, 0.5 means center and 1 means bottom edge.",
232
+ "description": "Vertical position as a fraction of image height: 0 = top edge, 0.5 = center, 1 = bottom edge.",
223
233
  "type": "number",
224
234
  "order": 4
225
235
  },
226
236
  "data": {
227
237
  "title": "Data",
228
- "description": "Value to display for the text pin.",
238
+ "description": "The value to display at this position. Can be numeric (formatted per precision setting) or text. Bind to a data column for real-time updates.",
229
239
  "type": "string",
230
240
  "order": 111
231
241
  }
package/thumbnail.webp ADDED
Binary file