cancel
Showing results for 
Search instead for 
Did you mean: 

graphical speedometer

former_member329434
Participant
0 Kudos

Hi Friends,

We  have requirement to display data in the form of speedometer in the form of a graphical image (unlike standard guage output). Can any one guide me on this development.

All I want is to display data using speedometer graphical image with real time refresh from shop floor systems. ( every second refresh).

Thanks,

Suman

Accepted Solutions (1)

Accepted Solutions (1)

Former Member
0 Kudos

Suman,

Try the link below which came from the following area: SCN MII Wiki > Modeling > MII 12.0 Sample Projects and Tools > Click here to download > xMII Dynamic Graphics

http://www.sdn.sap.com/irj/sdn/go/portal/prtroot/docs/webcontent/uuid/70e0837a-b080-2a10-878b-f83574...

The sva and svg files mentioned should be located there.

Regards,

Mike

Former Member

former_member329434
Participant
0 Kudos

Hi Mike,

Thank you for providing the links.. I could able to download those..

Regards,

Suman

former_member329434
Participant
0 Kudos

Hi Mike / Anuj,

There is some problem with  3DDialGuage svg file . Except 3DDialGuage,all other files are showing SVG elements in the link editor.

I am looking for a speedometer similar to the one which was  pasted in the discussion .Could you share me the  link on the same mail id.

Thanks and appreciate your support

Regards,

Suman

Former Member
0 Kudos

Hi Suman,

Yes the 3D Dial Gauge/Half gauge both looks to be corrupted. The sample projects SVG 3D Dial Gauge/Half gauge wont work.

Could someone please share the files.

Regards,
Avi

Former Member
0 Kudos

Suman,

Please verify that you are referencing the SVA file and not the SVG file in your transaction.  The Animated Object (SVA) file is a wrapper around the corresponding SVG object.

In a quick test, I had no issue exposing the SVA properties...

Regards,

Mike

Former Member
0 Kudos

Just to add,

I am noticing that the output of the generated 3DGauge isn't quite right if rendered client-side.

Here's what the image looks like if rendered as either a base-64 encoded image or as a native SVG in Firefox or Chrome (as IE8 or lower does not natively support either)...

I tried both the default LowLimit (45) and HighLimit (70) values having the same results.  When I adjusted the values of LowLimit to 40 and HighLimit to 65, the following image generated...

So it appears that something isn't right in either the SVG, SVA, or the rendering engine itself.

Hope this info helps!

Regards,

Mike

Former Member
0 Kudos

Hi Suman/Avinash,

Please update if you were able to fix this from the pointers given above by Michael.

Warm Regards,

Anuj

former_member329434
Participant
0 Kudos

Hi Mike / Anuj,

I am getting error as " Target Animated object Render is not valid" . Configured steps as:

1) Imported 3DGuage sva and svg object into workbench

2) Selected 3DGuage svg file for the animated object SVA file ( for first step1)

3) Created a transaction

4) first step is a query which returns value

5) second step configured as animation renderer ( selected the file ) ( hard coded max and min parameters in link editor)

6) third step as image saver.

Please let me know if I miss anything.

Thanks,

Suman

Former Member
0 Kudos

Hi Suman,

This error comes if there is no namespace mentioned in the xml header of the svg file.

Please check if it is there in the svg file you have with you with reference to the below code, the text in bold is the namespace:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>

<svg xmlns="http://www.w3.org/2000/svg" height="300" text-rendering="geometricPrecision"width="300">

<defs>

...

....(rest of the code)

It should work after this is there..

Warm Regards,

Anuj

former_member329434
Participant
0 Kudos

Hi Anuj,

After adding the namespace,  while saving, I am getting  the following error:

"File type is invalid for target location."

Do I need to mention the same namespace as it was provided or the path of physical file location of svg file.

Thanks,

Suman

Former Member
0 Kudos

Dear Suman,

The namespace will be same as I have given above, its not the physical file location of svg file but its a standard namespace given by w3c.

Please try it and let me know if you are facing any more issues.

Warm Regards,

Anuj

Former Member
0 Kudos

Hi Anuj

Even I am also facing the same issue.

I added the namespace also but getting error as "File type is invalid for target location"

I am working on MII 14.0

Please help me out on this.

Regards

Sandeep

Former Member
0 Kudos

Hi Sandeep,

I am not sure if it worked for Suman or not as it is not confirmed in this post.

But, can you please tell me if you have also downloaded the file from the link given above so that I can download the same files and check because the files which I have were also giving error which was resolved after adding the namespace I had posted here earlier.

Warm Regards,

Anuj

Former Member
0 Kudos

Hi Sandeep,

I got your and Suman's issue now.

I have 3DDialGauge.svg file downloaded from the link given above in this post and when I try to save that file after adding namespace it gives me error which you have mentioned.

Please open that svg file saved in your computer in notepad/wordpad --> add the namespace --> save

and then import it in MII and link this svg to the sva file '3DGauge'. It works absolutely fine for me.

Really hope it works for both of you now 🙂

Warm Regards,

Anuj

Former Member
0 Kudos

Hi Anuj

Yes I have downloaded it from the link

Regards

Sandeep

Former Member
0 Kudos

HI Anuj

Still I am getting same error. Can you send me the SVG file aftermaking the changes.

Regards

Sandeep

Former Member
0 Kudos

Hey Sandeep,

Thats very weird because I am not at all getting any error.

Sorry, but we cannot send those files in the forum.

Which error do you get now? 'Target Location....' or some different error?

Regards,

Anuj

Former Member
0 Kudos

Hi Anuj

I am getting g the error when I try saving the SVG object

But I can see the image when its mapped to animation object.

Regards

Sandeep

Former Member
0 Kudos

Hi Sandeep,

Once you have made changes to the svg file in notepad/wordpad and saved it, you just need to import that in the Catalog tab and need not to modify it again.

Then select this particular file in 'Select SVG Document' link in the animation object file.

If you are able to see the preview, you can then use this animation object in your transaction.

Warm Regards,

Anuj

Former Member
0 Kudos

Thanks Anuj

It solved the issue

Former Member
0 Kudos

Hi Sandeep,

Happy to hear that 🙂

Thanks for confirming..cheers!!

Regards,

Anuj

former_member329434
Participant
0 Kudos

Hi Anuj / Mike,

First of all big thanks for the support extended by you and other forum members. My issue got resolved.

As I was on short vacation, couldn't check mails and confirm .

Thanks,

Suman

former_member329434
Participant
0 Kudos

Hi All,

One last thing,  I am able to run transaction and generate jpg file with the values. I want meter to be displayed in html page with every second refresh.

can any one share me snippet of code or steps to do it.

Thanks,

Suman

Former Member
0 Kudos

Hi Suman,

I dont know your exact requirement but refreshing it every second will increase unnecessary load which is not advisable.

But to answer your question, one way is to recursively call the javascript function which renders the image on your page.

Thanks & Regards,

Anuj

former_member329434
Participant
0 Kudos

Hi Anuj,

I am reading a load which changes on every second. I want to display the load using graphical meter with every second interval

basically meter should be in synch with load values from source and display on webpage

as mentioned, able to generate image out of transacation with a current  value. I want to develop a webpage where  it should display with every second change from source system.

Ideally, it should display like standard guage type meter where needle rotates.

Thanks,

Suman

Former Member
0 Kudos

Hi Suman,

Refreshing it every second seems to be very difficult, because in that case your transaction must be executed and image must be rendered within a second. Moreover, its an image that is being rendered on the webpage, so cannot be displayed as a standard gauge type meter where needle rotates on realtime information.

Thanks & Regards,

Anuj

former_member329434
Participant
0 Kudos

Hi Anuj,

Is there any way I can make the image appear on webpage with out disappearing during the page refresh.

I have written logic with a 10 sec interval and able to represent live data . I don't want image to be disappear during page refresh.

How can I achieve this? Ideally it should like like standard guage type.

Thanks,

Suman

Former Member
0 Kudos

Suman,

There are multiple ways to render gauges on the MII server and serve them up to the browser.

Are you using a scheduled transaction which is dropping the image in a project directory or are you calling the transaction directly with a JavaScript timer? Also are you leveraging any DOM libraries like jQuery?

Thanks,

former_member329434
Participant
0 Kudos

Hi Mike,

I am running a scheduler for creating images in the directory and then using javascript to load the image  with a  refresh of 10 seconds interval.

JQuery is not used in the program. 

I dont want a blinking image on the web browser every 10 seconds, only the value to be changed. Is there any way, I can do this..?

Please guide me.

Regards,

Suman

Former Member
0 Kudos

Hi Suman,

The way you want it, cannot be achieved using SVG. In the logic discussed above, image is created every time which cannot be refreshed in the page in a continuous pattern.

You may have to use some open source plugins like JQuery (as mentioned by Mike) or some other open source, for the same.

Thanks & Regards,

Anuj

Message was edited by: Anuj Suryawanshi

Former Member
0 Kudos

Suman,

Do you have the image width and height defined, preferably in CSS?

Regards,

Former Member

Former Member
0 Kudos

Also can you please define your target web browser(s)?

Regards,

Michael Teti

Former Member

Answers (2)

Answers (2)

Former Member
0 Kudos

Hi Suman,

     I am also looking for same what you post.

     I completed till the transaction execution, after that i can able to store the image in DB location.

     But i want to refresh the speedometer value dynamically in html page by executing query peroidically.

     Please share the steps to be followed to achieve it.

     It would be great helpful for me.

Note: I am using MII 12.2

Regards,

Santhosh K

Message was edited by: Santhosh k

Former Member
0 Kudos

Hi Suman,

Please follow the steps below:

1.You can download the SVG object file for the same from the SDN forum and import it in MII workbench.

2.Then create one animated object in the workbench and include the file imported in Step 1.

3. Now create a transaction to calculate the value which you need to project in this dial and pass this to your animated object by using 'Animation Renderer' action block under Dynamic Graphics category.

4. You can take the encoded image output of this transaction and write the logic accordingly to refresh it. The image will look as shown below:

Hope this helps you in your development!!

Warm Regards,

Anuj

former_member329434
Participant
0 Kudos

Hi Anuj,

Thank you.

Somehow, I couldn't find the correct link for downloading speedometer svg file. can you please share the path .

Thanks,

Suman

Former Member
0 Kudos

Hi Suman,

Somehow I am also not able to get the link now. Please give some try to it, I could have shared those files with you but seems that the attachment here does not support those file formats.

Thanks & Regards,

Anuj

former_member329434
Participant
0 Kudos

Hi Anuj,

Thank you . I always appreciate your help. You are the one who responds to most of the queries.

I request everyone to help me with the file path where I can download the svg file.

Thanks

Suman

Former Member
0 Kudos

Hi Suman,

You are welcome, we are here to help each other only 🙂

I would also suggest if you can share your email id by whatever the way you think is appropriate, I will straight away share those files with you. This is the max I can do. 🙂

Warm Regards,

Anuj

former_member329434
Participant
0 Kudos

Hi Anuj,

Please share the link (email deleted by moderator).

Thank you for the needful.

Regards,

Suman

Message was edited by: Michael Appleby