Skip to Content

A lot of xMII beginners find the SVG/Dynamic Graphics capabilities of xMII to be a little intimidating to begin with as it involves a lot of steps. This step by step tutorial is therefore targeted at xMII Beginners to get them started with xMII 11.5 ‘s SVG/Dynamic Graphics capabilities.

We’ll use the SVGDial SVG object and the Speed Tag of the Simulator server to create a Dial which updates every second with the correct speed.

Step 1 – Creating the Tag Query

Create a simple Tag Query by selecting the Data Source as Simulator (Simulation Server) and the Mode as Current. Browse over to the Tag Query Details tab and select the Speed Tag. Save the Query as TagTestSpeed.

Refer Screenshots below on how exactly to achieve this :

The Data Source Tab :

image

The Tag Query Details Tab :

image

Step 2 – Preparing the 3DDialGauge Object

Launch the Dynamic Graphics Editor from “Visualization Services -> Dynamic Graphics menu option. Click on “File -> Open” and select the 3DDialGauge Object. Click on Object Properties to add a property FanSpeed of the type “Number”. Create two more properties of type “String” called Label1 and Label2 and assign values “Fan” and “Speed to them respectively.

Object Properties are those that will be exposed as properties of the object when called in a BLS Transaction and let values be assigned to them

The FanSpeed property will let us assign the value of the Fan Speed that we obtain from the Tag Query to the SVG Object.

Now we’ll create two Calculated Properties for the SVG Object.

Calculated Properties are those which are arrived upon by performing various arithmetical calculations on other Object or Calculated properties.

We’ll need two Calculated Properties, the first, called FanSpeedForLabel for displaying the Fan Speed formatted to two decimal places and the second, called FanSpeedDegrees denoting the rotation in degrees the dial has to rotate in order to depict the Fan Speed.

The FanSpeedForLabel property would actually display the Fan Speed in the area marked below :

image

Select each calculated property and click on Edit to display the Property Editor.

Enter the following values in the Expression Field for

FanSpeedForLabel

image

FanSpeedDegrees

image

The formula above assumes that the sweep of the dial, clockwise, from 0 to 100 is that of 320 degrees and converts  the numerical Fan Speed to the degree that it should rotate in degrees in the range of 0 to 320 degrees. A value of 20 is added to the degree value obtained thus to compensate for the gap between 100 and 0 in the dials clockwise sweep. Refer the screenshot for the exact area (marked in blue) for which this value is compensated.

image

Now the only thing that is left to do is to Map these Calculated Properties to the SVG Element Properties. Click on the Animation Links button to proceed with the same.

Map the Label1 and Label2 properties to that of TopLabel->text and BottomLabel->text properties respectively.

Now map the FanSpeedForLabel with the ValueLabel->text property and the FanSpeedDegrees to the Needle->transform property by selecting both of them, one by one, and clicking on the “Assign Link” button.

Refer Screenshot below :

image

image

The xMII help document describes the rotate function as rotate(<rotate-angle> [<cx> <cy>]), and if the optional cx, cy is given, the rotation is about the point (cx,cy). The value of <cx> and , that is the point about which the needle is pivoted can be obtained by selecting the Needle->x1 and Needle->y1 properties on the Link Editor and clicking on the Get Value from SVG button.

Save the 3DDialGauge SVG object as SVGDial.

Step 3 – Creating the BLS Transaction

Create a new BLS Transaction and add a Tag Query action block. Right click to configure it and select TagTestSpeed tag query that you had created in Step 1 as the Query Template.

Now add a Animation Renderer action block, and in the configuration dialog select the SVG Object SVGDial that you had created in Step 2.

Check the field Render Image? and select a format of the image file to be rendered.

image

Now in the Links, map Speed from the output of the Tag Query to the FanSpeed property of the SVGObject. Recollect that it was we who had defined it as a Object Property in the Dynamic Graphics editor.

image

Now add a Image Saver action block and in the configuration options enter the path to save the image as “C:\Inetpub\wwwroot\svg\Fan.jpg”.

Now in the Links, map EncodedImage from Animation Renderer to the EncodedImage property of the Image Saver.

image

Close the Link Editor and save the Transaction as FanSpeedVis. You Transaction should look like this :

image

Step 4 – Creating an Xacute Query for the BLS Transaction

This is the shortest step of all. Go to Data Services->Query Templates, click on New and choose XacuteQuery. On the Data Source tab select XacuteConnector as the Server and Query as the Mode. On the Transaction tab select the FanSpeedVis Transaction as shown below and save the Transaction as Xacute_Fan_Speed.

image

Step 5 – Creating the HTML Page

This is the last step of the whole exercise. Now we make a HTML page to showcase our creation. Embed a iCommand Applet and set it’s QueryTemplate parameter to that of the Xacute Query you just created : Xacute_Fan_Speed. The Code to do this will be :

*

*

In the body of the HTML Page we will embed the image Fan.jpg that the BLS Transaction creates when it is run and also add two buttons one of which will call the Transaction and refresh the image at an interval of one sec and the other which will stop the refresh.

*


*

The Javascript code for the functions doit() and clearit() is given below :
*
var Time;
function doit(){
executeQry();
imagename = “Fan.jpg”;
tmp = new Date();
tmp = “?”+tmp.getTime()
document.images[“refresh”].src = imagename+tmp;
Time = setTimeout(“doit()”, 1000);
}

function clearit(){
clearTimeout(Time);
}

function executeQry(){
document.TransFanSpeed.executeCommand();
}

*
+
Notice that I append a Question Mark and the Timestamp to the name of the image. This is done because some browsers cache images and thus the image would not update even if a new image has been generated by the transaction.+
.

Now click on the Do it !!! button to start the fun. Your dial should automatically update every one second with the new image ! Click on Clear Timeout to stop the auto update !

image

image

The code for the HTML page is pasted below :

var Time;
function doit(){
executeQry();
imagename = “Fan.jpg”;
tmp = new Date();
tmp = “?”+tmp.getTime()
document.images[“refresh”].src = imagename+tmp;
Time = setTimeout(“doit()”, 1000);
}

function clearit(){
clearTimeout(Time);
}

function executeQry(){
document.TransFanSpeed.executeCommand();
}


To report this post you need to login first.

3 Comments

You must be Logged on to comment or reply to a post.

  1. krishna chaitanya
    i did the program as it is given by u , but i am not able to map the fan.png into the browser, and also i am getting some errors in the html, it is showing the error like time is not defined.so can u help regarding this
    (0) 
  2. Venkatesh Kaliappan
    Hi, i have followed the steps which you have given, finally i am getting in the executeqry as java null pointer exception, how to resolve this.  Please guide me.

    Regards,
    Venkatesh K

    (0) 

Leave a Reply