6.4 Frontend Nodes
      Back to home
      1. Home
      2. 6: Nodes Reference Guide
      3. 6.4 Frontend Nodes

      Data on Image Widget Node Configuration Guide

      The Data on Image Widget Node allows you to overlay live data values directly on top of an uploaded image (e.g., plant layout, machine schematic, facility map). It’s ideal for real-time visual monitoring of sensor values, machine states and more..

      What It Does

      This widget binds live values to pre-defined SVG areas or ID elements on a custom image, updating them in real-time based on incoming payloads. Each overlay element (area) can be customized with formatting, symbols, decimal precision, and optional interface links.

       Step-by-Step: How to Configure the Data on Image Widget

      1. Add the widget node

        • Drag the Data on Image node onto your canvas from the Widgets section.

      2. Open the configuration panel

        • Double-click the node to begin setup.

      3. Upload and map overlay elements

        • Use the Edit Overlay button to load an SVG image and define each area or label to be populated.

      4. Assign data fields to areas

        • Link each SVG element to a JSON key from the payload, along with optional labels and units.

      5. Customize styling

        • Configure decimal places, background transparency, symbols, and tooltip settings.

      6. Assign to interface(s)

        • Choose where the widget will be displayed and whether it is grouped by label.

       Configuration Fields

      Field Requirement Description
      Widget Name* Required Title of the widget, shown on dashboards.
      Widget Header Optional Toggle visibility of the header bar.
      Show UID / Label Name Optional Display UID or device label name.
      Background Color Optional Set fill color of the image container.
      Transparency Optional Adjust widget transparency (0–100%).
      Widget Subtitle Optional Secondary label below the main widget name.
      Decimal Places Optional Sets number of decimals shown globally (can be overridden per area).
      Edit Overlay Required Load and configure the image overlay (SVG only).
       

       Area Configuration

      Each area defines one display element on the image. Use Edit Overlay to map them.

      Field Requirement Description
      Area Name Required Label shown next to or inside the overlay zone.
      Text Optional Static text to display alongside the value.
      Input Data Field* Required JSON key from the incoming payload for this area.
      SVG ID Required ID of the SVG element this area maps to.
      Decimals Optional Decimal precision for this area only.
      Pre Symbol Optional Add symbol (e.g., $, ±) before the value.
      Post Symbol Optional Add unit (e.g., %, kWh) after the value.
      Thousands Comma Optional Toggle comma formatting (e.g., 1,000).
      Interface to Link To Optional Set clickable link to another dashboard for this area.
       

      You can define multiple areas using the + button.

       Additional Options

      Field Description
      Add to Interface Choose interfaces to display the widget.
      Tooltip Toggle tooltip activation.
      Enable Tooltip Add custom help text shown on hover.
      Number of Widgets to Display Display grouped widgets (one per label).
      Select Label Choose the device label to group widgets by.
       

       Best Practices

      • Use clean SVGs with labeled IDs for each zone or data element.

      • Set unique area names to clearly indicate what each value represents.

      • For scalable monitoring, group by label to show multiple systems using one widget.

      • Link overlays to dashboards for drill-down insights per machine, zone, or process.

      • Use transparency to allow layering over backgrounds in mixed UIs.

       Use Cases

      • Visualize sensor values directly on a factory floorplan

      • Display machine states or productivity by zone

      • Monitor environmental data (e.g., humidity, noise) on a site map

      • Overlay energy usage or alerts onto a schematic layout

      FAQ

      Q: What image formats are supported?

      A: Only SVG is supported to enable data binding via element IDs.

      Q: Can I animate or style the text dynamically?

      A: Styling can be applied via SVG/CSS, but animations are not supported in this version.

      Q: How do I identify the SVG ID?

      A: Use browser dev tools or your vector editing tool to assign unique IDs to each SVG text or shape element.