Image Overlay
Image Overlay
Article summary
Did you find this summary helpful?
Thank you for your feedback
Image Overlay Node
The Image Overlay node displays payload data over the top of a user-uploaded background image. It is useful when end-users need to associate the data shown with a specific visual. For example, you might use this node to display data for sensors installed at various points on a floor plan, or for certain parts of machine equipment.
Adding an Image Overlay node to your workflow
- First, select a solution and navigate to Rayven Workflow.
- Select ‘Visualizations’ from the left-hand panel.
- Find the Image Overlay node and drag it onto the canvas.
- Connect the Image Overlay node to your input node.
- Double click on the Image Overlay node to open its configuration window.
Configuring your Image Overlay node
- You will need to give your widget a Name. Choose something simple that clearly explains its purpose. You must pick a name that has three or more characters.
- Select the Device Name checkbox if you want the device name visible on the end display.
- Next, upload theimage from your local machine you want to use as a background.
- If you want, you can add a Widget Subtitle. This additional text helps explain the data presented to the end-user.
- You can also configure the Decimal Precision of the information displayed. You must enter this as a numerical value.
Configuring Areas
Under 'Areas' you can choose the fields to be displayed and configure where on an image output data will appear.
The mandatory fields are the Area Position and the Data Field Name:
- Area Position determines the location of the text overlay on the image. Click and drag on the pop-up to configure.
- Data Field Name must contain the name of the field in the incoming JSON payload that contains the data you want to display on the widget. When configured, this will show the last value received.
Optionally, you can configure:
- Area Name: Enter a title to be shown above the value overlaid on the image.
- Font Size: If left blank, the platform will use the default value. We recommend you start with size 12 and adjust as required.
- Font Color: Select the color of the value displayed on the dashboard (make sure this is different from the BG (background) color.
- BG color: Select the background color for the area overlaid on the image (make sure this is different from the font color).
- Pre Symbol: Enter the symbol you want to appear at the start of the value (For example, $).
- Post Symbol: Enter a symbol you want to appear at the end of the value (For example, °C or °F).
- Dashboard to link to: Select a dashboard from the dropdown menu to open when an end-user clicks on the value widget. See Creating a Dashboard for more information.
Grouping by Device Label
You need to select how data should be grouped and displayed on the widget. Currently, only No Grouping is available. It will display one widget for each device.
Once you’re satisfied with your Image Overlay conditions, click ‘Save’ to confirm your configuration.
See Also: Creating device labels, Adding devices, Device filters
As of Release: 13.04.2022