The Active Area element can also work as a placeholder for your web component. In the runtime, mySCADA will create an empty DIV component in the location and size of your active area. This DIV component can be manipulated in View Scripts.

Select HTML -> Div Element. Fill in the ID of your DIV (active area) component. With this ID you can access your component in the View Scripts using the function

document.getElementById ("ID")

Example #

In the following example, we will use the Active Area to display a Google map. First of all, create a view and insert it into the active area. Then set the type to HTML -> Div Element in the Init Value. Type in ‘googlemap’ into the ID type field.

Now all we need to do is to initialize the DIV element with Google maps. This can be done in View Scripts. Open the view script and enter the code for initialization into the Init function field.

There are two interesting parts in this code:

1. This part dynamically loads external JavaScript from the Internet – in our case Google map API:

var script = document.createElement('script'); //create script element
script.src = "http://maps.google.com/maps/api/js?sensor=true&callback=gmap_draw"; //url to the script
document.head.appendChild(script);  //load and append js

2. This piece of code will find our DIV element (e.g. Active area) with googlemap id

document.getElementById("googlemap")

3. And finally the result: