Skip to main content

3DVisualizr for Grafana​

The 3DVisualizr panel renders the 3D scenes that are hosted at Elisa IndustrIQ's 3DVisualizr Portal.

The 3DVisualizr panel supports table and raw JSON data.

Introduction​

3DVisualizr is designed to view and visualize factory data in a 3D format by connecting data sources to virtual assets. Virtual assets can display their state, by changing their color based on some predefined rules, and KPIs in a label that can be attached to each individual asset.

screenshot

Features​

  • Web based 3D rendering engine powered by BabylonJS library
  • Runs in any browser (desktop and mobile) supporting WebGL without any extra plugin
  • Supports touch gestures on touch devices
  • Informative data labels
    • Data labels can be linked to any 3D object in the active 3D scene
    • Labels support state formatting (colors, icons)
    • Label state can be used to color 3D object
    • Labels support showing data in different visualizations (text, gauge, progress bar, bar)
    • Labels have multiple visibility states (hidden, icon, icon & title, icon & title & content)
  • Interactive 3D view
    • 3D view can be navigated (zoom, pan, rotate) using mouse or touch gestures
    • 3D objects can be hovered to highlight the object and its associated label
    • 3D objects can be selected using mouse and touch gestures
    • On selection predefined group of 3D objects can be isolated from the 3D scene to enable better visibility to selected group of 3D objects
    • Default views can be saved to scene and the 3d objects
    • A predefined fly through route of 3D scene can be recorded
    • Play animations configured in the 3D model
    • Camera can be locked to 2D mode in cases where 3D is not needed (floorplan, piping and instrumentation diagram)

Requirements​

  • Grafana version 7.x or newer recomended
  • Browser with WebGL support

Getting Started​

3D Model​

The 3DVisualizr panel will download and render 3D scenes that are hosted at Elisa IndustrIQ's 3DVisualizr Portal. Please contact our sales to create a trial account!

  • From the 3DVisualizr portal, you will be able to:
    • Generate the barebone of your own 3D scene from our 2D drawing tool
    • Leverage our massive collection of 3D objects
    • Place the 3D objects into your 3D scenes
    • Publish the 3D scene to the Internet so that it can be rendered with our 3DVisualizr software (included in this plugin).

  • To use the 3D scene with this panel, please copy the personalAccessToken and the modelUrl to the Panel Option Editor. Read more about it here:

https://docs.3d-portal.cloud.elisasmartfactory.com/

Label Data​

The contents of a label consists of entities that we refer to as KPI's here (Key Performance Indicator) even if they are not necessarily KPI's. The list below shows the possible contents of a label (e.g. objectID, status, layout, KPIs, etc).

  • 1. Object ID (String, required) - The id the 3D object to which the label will be bound
(e.g. labelId="xyz", 3dObjectId="L2OVEN01")
  • 2. Label status (Integer) - The status icon can give a quick indication of whether everything's running normally or if there are any anomalies happening. The status icon is shown in all other states of a label except when it fully hidden
    • **0 (default)**: not configure
    • **1**: warning
    • **2**: normal
    • **3**: planned downtime
    • **4**: unplanned downtime
    • **5**: unavailable

  • 3. Label layout (Integer) - Define the layout of the label

    • 0: hidden
    • 1: collapsed
    • 2: title only
    • 3 (default): default
    • 4: full

    Note 1: regardless of the layout, once the mouse hovers over the asset, the binding labels will be displayed in full mode.


    Note 2: different layouts will render the label information differently depend on the zooms of the camera



  • 4. Title info KPIs (List of field names) - Those fields (e.g. data columns) that will be shown as Title info KPIs. This title is a data-binding field. It is different from the regular title which is shown on top of the label and in its collapsed state. It can be used to display the machine name in human language.


  • 5. Info KPIs (List of field names) - Those fields (e.g. data columns) that will be shown as texture data. It can be useful to display machine statuses or other messages in human language. The textual presentation is arguably similar to the Title info KPIs but without the prefix "Title".


  • 6. Progress KPIs (List of field names) - Those fields (e.g. data columns) that will be shown as progress bars. A progress kpi is a simple progress bar that consists of a title, value and min and max values.


  • 7. Speedbar KPIs (List of field names) - Those fields (e.g. data columns) that will be shown as spped bars. Speedbar is similar to the progress KPI but more expressive with its three possible ranges (red, orange, green). The ranges are defined using two limits. Also displays the title and value.

  • 8. Speedometer KPIs (List of field names) - Those fields (e.g. data columns) that will be shown as speedometers. A speedometer is similar to speedbar except for its gauge visual representation.

In general, the datasource should provide a table data from which the columns will be mapped to different label entities. For example,

Panel Options​

Use these settings to refine your visualization.

  • Debug mode - Choose whether internal logs will be outputed to the browser console.
  • Model:
    • Personal Access Token - API token to fetch the 3D scene
    • Model Url - The Url of the 3D scene
  • Camera:
    • Default camera position - The default position of the camera
    • Default camera target position - The default position to which the camera will look at
  • Label Settings: (Read the above section for more details)
    • Object ID - The field that defines the 3D object ID to which the label will be bound
    • Label Layout - The field that defines the label layout
    • Label Status - The field that defines the status icon of the label
    • Title value KPIs - The data fields that will be rendered as texture section in the label
    • Info KPIs - The data fields that will be rendered as texture section in the label
    • Progress KPIs - The data fields that will be rendered as progress bars in the label
    • Speedbar KPIs - The data fields that will be rendered as speedbar bars in the label
    • Speedometer KPIs - The data fields that will be rendered as speedometers in the label
  • Standard Options:
    • Decimals - Round up the displayed value to a number of decimals
  • Progressbar Options:
    • Unit - The measurement unit that will postfixed to the KPI value (e.g. %, products, etc)
    • Min - Minimum value for the KPI
    • Max - Maximum value for the KPI
  • Speedbar Options:
    • Unit - The measurement unit that will postfixed to the KPI value (e.g. %)
    • Min - Minimum value for the KPI
    • Max - Maximum value for the KPI
    • Low Threshold - If there is a need for an intermediate stage, set a value for the lower limit
    • High Threshold - If there is a need for an intermediate stage, set a value for the higher limit
    • Larger value is better - Whether the value range should be inverted or not (e.g. values above the higher limit should be considered good or bad. For example, machine temperatature is considered smaller is better, whereas machine usage is consider larger is better)
  • Speedometer Options:
    • Unit - The measurement unit that will postfixed to the KPI value (e.g. %)
    • Min - Minimum value for the KPI
    • Max - Maximum value for the KPI
    • Low Threshold - If there is a need for an intermediate stage, set a value for the lower limit
    • High Threshold - If there is a need for an intermediate stage, set a value for the higher limit
    • Larger value is better - Whether the value range should be inverted or not (e.g. values above the higher limit should be considered good or bad. For example, machine temperatature is considered smaller is better, whereas machine usage is consider larger is better)

Communicate between 3DVisualizr panel plugin and the dashboard​

The 3DVisualizr panel plugin will update a variable named selectedObject every time a label is selected (e.g. double-click on the label).

The dashboard developers can add a textbox variable to their dashboard to start receiving this information. Thenn they can leverage this information in other panels' queries and improve the dashboard interactivity.



Read more about how to add variables to dashboard and use them in panel's data query:

https://grafana.com/docs/grafana/latest/variables/

https://grafana.com/docs/grafana/latest/variables/syntax/