WebIQ Teaser.png

Embed IoT Dashboard in WebIQ

rum1
Established Member

This How-to is a continuation of IIoT: Use ctrlX CORE as a monitoring platform using InfluxDB and Grafana  and is intended to show how the Grafana dashboard can be integrated into the visualisation of SmartHMI (WebIQ).

Prerequisites
  • Node-Red (V02.06)
  • Grafana (IoT Dashboard) (V02.06)
  • InfluxDB (V02.06)
  • WebIQ (V2.15.7)

The other how-to must be carried out beforehand.

Step-by-Step Guide
Step 1: Prepare Grafana 

In order for a Grafana dashboard to be integrated, a few settings must be made first.
Therefore go on the ctrlX Landing Page to the path Manage app data > IoT Dashboard > Grafana.ini

In Grafana V02.06 go to Row 342 or search for "allow_embedding" uncomment it and set it to true.
 
Grafana.ini Part 1Grafana.ini Part 1
Additional go to Row 559 or search for "enabled anonymous access" uncomment it and set it to true.

Grafana.ini Part 2Grafana.ini Part 2
Then Restart the Grafana App.
Hint: Set the Update interval in your Grafana Dashboard before you embed it. 

Step 2: Grafana 

Click on your Dashboard, which you want to share. Click on the dots in the top right corner and select > Share > Embed

Grafana DashboardGrafana Dashboard

Share Grafana DashboardShare Grafana Dashboard
Switch off the Slider as shown in the picture to get relative time range. And here just copy the source link (not the complete link which is displayed in the image), e.g.:https://192.168.1.1/grafana........&refresh=auto&panelId=1

Step 3: WebIQ

Go to WebIQ and start a new project there. 
Insert the iFrame object.

WebIQ (SmartHMI)WebIQ (SmartHMI)

Then insert the copied Source URL

iFrame settingsiFrame settings

And then trust the certificate.

Trust Certificates in WebIQTrust Certificates in WebIQ

 After that you can publish the dashboard.

And the final result is that you can reach the IoT Dashboard over the WebIQ Visualization.

Embed IoT Dashboard in the WebIQ HMIEmbed IoT Dashboard in the WebIQ HMI

Video of complete setup

This video shows the complete setup of the InfluxDB, IoT Dashboard and also the embedding of the Dashboard into the WebIQ HMI.

Must Read
Icon--AD-black-48x48Icon--address-consumer-data-black-48x48Icon--appointment-black-48x48Icon--back-left-black-48x48Icon--calendar-black-48x48Icon--center-alignedIcon--Checkbox-checkIcon--clock-black-48x48Icon--close-black-48x48Icon--compare-black-48x48Icon--confirmation-black-48x48Icon--dealer-details-black-48x48Icon--delete-black-48x48Icon--delivery-black-48x48Icon--down-black-48x48Icon--download-black-48x48Ic-OverlayAlertIcon--externallink-black-48x48Icon-Filledforward-right_adjustedIcon--grid-view-black-48x48IC_gd_Check-Circle170821_Icons_Community170823_Bosch_Icons170823_Bosch_Icons170821_Icons_CommunityIC-logout170821_Icons_Community170825_Bosch_Icons170821_Icons_CommunityIC-shopping-cart2170821_Icons_CommunityIC-upIC_UserIcon--imageIcon--info-i-black-48x48Icon--left-alignedIcon--Less-minimize-black-48x48Icon-FilledIcon--List-Check-grennIcon--List-Check-blackIcon--List-Cross-blackIcon--list-view-mobile-black-48x48Icon--list-view-black-48x48Icon--More-Maximize-black-48x48Icon--my-product-black-48x48Icon--newsletter-black-48x48Icon--payment-black-48x48Icon--print-black-48x48Icon--promotion-black-48x48Icon--registration-black-48x48Icon--Reset-black-48x48Icon--right-alignedshare-circle1Icon--share-black-48x48Icon--shopping-bag-black-48x48Icon-shopping-cartIcon--start-play-black-48x48Icon--store-locator-black-48x48Ic-OverlayAlertIcon--summary-black-48x48tumblrIcon-FilledvineIc-OverlayAlertwhishlist