The Image Widget Node displays a static or uploaded image within a Rayven interface. It is typically used for showing diagrams, floorplans, visual references, product photos, or any fixed visual content alongside real-time workflow data.
What It Does
This node renders a user-uploaded image within a widget on the interface. You can assign it a name and subtitle, control how the header and device label are shown, and optionally group it by label to show different versions per device. The image can also act as a visual reference or background for other contextual widgets.
Step-by-Step: How to Configure the Image Widget Node
1. Add the widget node
Drag the Image Widget Node from the Widgets section onto the workflow canvas.
2. Set widget name
Enter a descriptive title for the widget (e.g., "Floorplan - Sector A").
3. Configure the widget subtitle (optional)
Add a subtitle to provide additional context or a short description.
4. Name the uploaded image
Enter a name to identify the uploaded image file. This is useful if managing multiple image assets.
5. Upload the image
Use the upload control to select an image file (e.g., .jpg
, .png
, .svg
) to display in the widget.
6. Display settings
-
Widget header: Choose to show or hide the widget title bar.
-
Show UID / label name: Toggle whether the device UID or label appears alongside the widget.
7. Interface placement
-
Select one or more interfaces to which this widget should be added.
-
Use Add to Interface to confirm placement.
8. Configure tooltip (optional)
Enable tooltip display and define text to appear when hovering over the widget.
9. Grouping and filtering
-
Number of Widgets to Display:
-
One unified widget (default): All devices share the same image.
-
One widget per label: Display one widget instance per selected label.
-
-
Select label (if grouping is enabled): Choose the label to filter by (e.g.,
zone_A
,machine_group_1
).
Configuration Fields
Field | Requirement | Description |
---|---|---|
Widget Name* | Required | Title shown at the top of the widget. |
Widget Subtitle | Optional | Secondary text shown under the widget name. |
Image Name* | Required | Name to identify the uploaded image. |
Upload Image | Required | Image file to display. |
Widget Header | Optional | Show/hide the header bar with name and subtitle. |
Show UID / Label Name | Optional | Toggle display of UID or device label. |
Interface to Link To | Optional | Target interfaces where the widget will appear. |
Tooltip | Optional | Hover text for additional context. |
Number of Widgets to Display | Optional | Choose one widget per label or a single shared widget. |
Select Label | Optional | Filter widgets by device label (if grouping is enabled). |
Example: Display a Machine Layout Image per Label
Scenario: You want to show a labeled schematic for each machine station, with individual widgets per station label.
Configuration:
-
Widget Name:
Station Overview
-
Widget Subtitle:
Real-Time Machine Layout
-
Image Name:
station_layout
-
Upload Image:
station_schematic.png
-
Widget Header: Show
-
Show UID / Label Name: Show
-
Tooltip: Enabled – “Click for more detail”
-
Number of Widgets to Display: One per label
-
Select Label:
machine_station_group
-
Interfaces:
interface2
,Analytics
Result:
Each machine label displays its own instance of the Station Overview
image widget, tagged with UID/label name, embedded into the selected interfaces.
Best Practices
-
Use high-resolution images for floorplans or diagrams to ensure legibility.
-
Keep image file sizes small to optimize interface load speed.
-
Use grouping only when distinct visual content is needed per device label.
-
Tooltip text should be short and action-oriented.
Use Cases
-
Display factory floorplans with sensor overlays.
-
Show schematic diagrams of equipment or systems.
-
Embed photos of remote assets (e.g., pump stations, panels).
-
Provide visual orientation for interface users unfamiliar with site layout.
FAQ
Q: What file formats are supported for upload?
A: Most standard image formats are supported, including .jpg
, .png
, and .svg
.
Q: Can I display different images per device?
A: Yes, by enabling One widget per label and uploading different images per label grouping.
Q: Is the image interactive or clickable?
A: No. The widget currently displays static images only. Use tooltips for light interaction or consider using linked widgets.
Q: What if the image does not appear on the interface?
A: Ensure the image was uploaded successfully, added to at least one interface, and that the workflow is published.