/* eslint-disable */ /** * This file was automatically generated by json-schema-to-typescript. * DO NOT MODIFY IT BY HAND. Instead, modify the source JSONSchema file, * and run json-schema-to-typescript to regenerate this file. */ /** * The main heading displayed above the overlay image. Use to describe what the visualization represents. */ export type Title = string; /** * Secondary text displayed below the title. Use for additional context like location, update frequency, or data source. */ export type Subtitle = string; /** * 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. */ export type StretchToFill = boolean; /** * Identifier for this overlay layer. Used for organization when multiple layers exist. */ export type LayerName = string; /** * Type of overlay elements: 'progress' for fill-level bars (tanks, batteries, progress), 'text' for numeric/text value displays. */ export type LayerType = "progress" | "text"; /** * 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). */ export type SectionLimits = number[]; /** * 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. */ export type SectionColors = { [k: string]: unknown; }[]; /** * Rotation angle in degrees. Use 0 for horizontal bars, 90 or -90 for vertical bars, or any angle for diagonal orientation. */ export type Rotate = number; /** * Width of the progress bar in pixels at original image scale. Scales proportionally when the image resizes. */ export type Width = number; /** * Height of the progress bar in pixels at original image scale. Scales proportionally when the image resizes. */ export type Height = number; /** * Font weight from 100 (thin) to 900 (black). Use 400 for normal, 700 for bold. */ export type FontWeight = number; /** * Font size in pixels as it appears on the original image size. The text scales proportionally when the image resizes. */ export type FontSize = number; /** * Number of decimal places to display for numeric values. Use 0 for integers, 1-2 for measurements. */ export type Precision = number; /** * Identifier label for this progress bar, displayed in tooltips or alongside the bar. */ export type Label = string; /** * Horizontal position as a fraction of image width: 0 = left edge, 0.5 = center, 1 = right edge. Position the center of the progress bar. */ export type RelativeXPosition = number; /** * Vertical position as a fraction of image height: 0 = top edge, 0.5 = center, 1 = bottom edge. Position the center of the progress bar. */ export type RelativeYPosition = number; /** * 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. */ export type Data = number; /** * Array of progress bar instances positioned on the image. Each pin represents one progress indicator at a specific location. */ export type ProgressPins = { label?: Label; relXPos?: RelativeXPosition; relYPos?: RelativeYPosition; data?: Data; [k: string]: unknown; }[]; /** * Text displayed before the data value (e.g., 'Temp: ', 'Level: '). Include trailing space if needed. */ export type Prefix = string; /** * Text displayed after the data value (e.g., '°C', '%', ' PSI'). Include leading space if needed. */ export type Suffix = string; /** * Horizontal position as a fraction of image width: 0 = left edge, 0.5 = center, 1 = right edge. */ export type RelativeXPosition1 = number; /** * Vertical position as a fraction of image height: 0 = top edge, 0.5 = center, 1 = bottom edge. */ export type RelativeYPosition1 = number; /** * 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. */ export type Data1 = string; /** * Array of text value instances positioned on the image. Each pin displays a value with optional prefix and suffix at a specific location. */ export type TextPins = { prefix?: Prefix; suffix?: Suffix; relXPos?: RelativeXPosition1; relYPos?: RelativeYPosition1; data?: Data1; [k: string]: unknown; }[]; /** * 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. */ export type Overlays = { layerName?: LayerName; layerType?: LayerType; sections?: ColorSections; progressStyle?: Style; textStyle?: Style1; progressPins?: ProgressPins; textPins?: TextPins; [k: string]: unknown; }[]; /** * 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. */ export interface ImageOverlayConfiguration { title?: Title; subTitle?: Subtitle; stretchToFit?: StretchToFill; image?: UploadImageFile; overlays?: Overlays; [k: string]: unknown; } /** * 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. */ export interface UploadImageFile { [k: string]: unknown; } /** * Define value ranges and their corresponding colors. Used for both progress bar fill colors and text value coloring based on thresholds. */ export interface ColorSections { sectionLimits?: SectionLimits; colors?: SectionColors; [k: string]: unknown; } /** * Visual styling for progress bar overlays. */ export interface Style { rotate?: Rotate; width?: Width; height?: Height; backgroundColor?: BackgroundColor; [k: string]: unknown; } /** * Color of the unfilled portion of the progress bar. Use a neutral or faded color to contrast with the fill. */ export interface BackgroundColor { [k: string]: unknown; } /** * Visual styling for text pin overlays. */ export interface Style1 { fontWeight?: FontWeight; fontSize?: FontSize; precision?: Precision; backgroundColor?: BackgroundColor1; [k: string]: unknown; } /** * Background color behind the text for improved readability on busy images. Leave empty for transparent background. */ export interface BackgroundColor1 { [k: string]: unknown; }