Problem solve Get help with specific problems with your technologies, process and projects.

Getting started with Dynamic Graphics in xMII 11.5

Are you intimidated by SVG/Dynamic Graphics in SAP xMII? Never fear, this SDN tip will give you a step-by-step tutorial to help you get started.

A lot of xMII beginners find the SVG/Dynamic Graphics capabilities of xMII to be a little intimidating to get started...

with as it involves a lot of steps. This step-by-step tutorial is targeted at xMII beginners and aims 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 that 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 to the screenshots below for details on how exactly to achieve this:

The Data Source Tab:

The Tag Query Details Tab:

Step 2 - Preparing the 3DDialGauge Object
Launch the Dynamic Graphics Editor from the 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:

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

Enter the following values in the Expression Field for



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.

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 to the Screenshot below:

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 <cy>, 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 an 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.

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

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.

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

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.

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 an iCommand Applet and set its QueryTemplate parameter to that of the Xacute Query you just created : Xacute_Fan_Speed. The Code to do this will be :

<APPLET NAME="TransFanSpeed" WIDTH="1" HEIGHT="1" CODE="iCommand" CODEBASE="/Illuminator/Classes" ARCHIVE="" MAYSCRIPT>
<PARAM NAME="QueryTemplate" VALUE="Abesh/XACute_Fan_Speed">

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.

<IMG src="Fan.jpg" name="refresh"><p>
<button onclick="javascript:doit()">Do it !!!</button>
<button onclick="javascript:clearit()">Clear Timeout</button>

The Javascript code for the functions doit() and clearit() is given below :

<script language="javascript">
var Time;
function doit(){
imagename = "Fan.jpg";
tmp = new Date();
tmp = "?"+tmp.getTime()
document.images["refresh"].src = imagename+tmp;
Time = setTimeout("doit()", 1000);

function clearit(){

function executeQry(){

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.

The code for the HTML page is pasted below :

Abesh Bhattacharjee is presently working in SAP Labs India Pvt. Ltd. as a Development Specialist.

This content is reposted from the SAP Developer Network.
Copyright 2007, SAP Developer Network

SAP Developer Network (SDN) is an active online community where ABAP, Java, .NET, and other cutting-edge technologies converge to form a resource and collaboration channel for SAP developers, consultants, integrators, and business analysts. SDN hosts a technical library, expert blogs, exclusive downloads and code samples, an extensive eLearning catalog, and active, moderated discussion forums. SDN membership is free.

Want to read more from this author? Click here to read Abesh Bhattacharjee's Weblog. Click here to read more about SAP xApps on SDN.

Dig Deeper on SAP manufacturing module

Start the conversation

Send me notifications when other members comment.

Please create a username to comment.