Embedding Dashboards

Create a URL

First, you'll need to figure out your MiniDash URL.

It's in the form servername/s/sitename/minidash/embed?id=<assetid>, where assetid is the unique numeric identifier for an ARDI asset.

You can also use the name of the asset instead, with ?name=<asset name>.

Embedding

There are two main ways of embedding a MiniDash dashboard into your product.

IFrame Method

The IFrame method is the most secure, but also the most difficult to customise.

With this method, you add an iframe into your HTML page that links to the MiniDash URL, with an additional parameter - 'embedded' - set to true.

For example, the dashboard for Finish Oven Zone 1 on our Paint Line demo is…

https://demo.optrix.com.au/s/pl/minidash/embed?id=100&embedded=true

And for a full, embeddable iframe, it would be…

   <iframe src="https://demo.optrix.com.au/s/pl/minidash/embed?id=100&embedded=true">
   </iframe>

AJAX Method

The AJAX method is less secure and more complex, but allows the dashboard to be customised and made more interactive.

In this version, you load HTML directly into your existing web page instead of embedding it with an iframe.

You'll need quite a bit of additional content, but you'll then be free to style, respond and otherwise interact with the dashboard any way you'd like.

You'll need to perform the following steps…

Import a suitable CSS stylesheet, such as <ardiserver>/minidash/panels.css
Import the ARDI live data Javascript library, such as <ardiserver>/plugins/optrix/hmi.js
Perform an AJAX POST to the minidash embedding endpoint,
Take the return text and add it to your HTML
Perform any formatting/styling/event handling on the content
Connect/reconnect to live data

An example is below, and assumes you have a div in your HTML with an ID of 'embedholder'.

//Request embedded content
var dataSubscriptions = [];
var connection = null;
 
function LoadDashboardFor(id)
{
    $.post('<myardiserver>/minidash/embed',{id: id},function(data) {
                //Add all of the content to the DIV
		$('#embedholder').html(data);	
 
                //Hide the individual panels
		$('#embedholder .section').css('display','none');
 
                //Fade the panels in one-by-one
		var counter = 0;
		$('#embedholder .section').each(function() {
			$(this).delay(counter*250).fadeIn(500);	
			counter++;			
		});
 
                //Add dragging behaviour so the whole DIV scrolls when dragged
		drag = false;		
		$('#embedholder').on('mousedown',function(ev) {
			drag = true;
			mpos.x = ev.clientX;
			mpos.y = ev.clientY;			
		});		
 
		$('#embedholder').css('user-select','none');
 
		$('#embedholder').on('mouseup',function(ev) {
			drag = false;	
		});
 
		$('#embedholder').on('mousemove',function(ev) {			
			if (drag == true)
			{
				var mod = ev.clientY - mpos.y;
				//console.log("Adjusting Scroll: " + $('#embedholder')[0].scrollTop + " + " + scrolloffset);
				$('#embeddeddisplay')[0].scrollTop += -(mod);				
				mpos.x = ev.clientX;
				mpos.y = ev.clientY;
			}
		});
 
                //Run this to re-subscribe to live data.
		OnMinidashLoaded();
 
function OnMinidashLoaded()
{
	if (connection != null)
	{
		connection.CloseSubscription();
	}
	connection = new HMIPanel();
	for(var x=0;x<dataSubscriptions.length;x++)
	{
		dataSubscriptions[x](connection);
	}
	connection.OnlyWhenFocused();
	connection.ConnectTo("<ardiserver>");
}

Embedding Dashboards