Design Studio 1.3 SDK – Custom Gauge with Code

Hi there!

I approached to design studio 3 weeks ago and i started developing some custom components.

My first work is based on this blog post:

Design Studio 1.3 SDK – Creating a custom gauge component

by Nicholas Stein

Following his design i wrote my code with some changes/perks.

The component is completely scalable and customizable.

You can choose:

Main Color.
Tick and text color.
Needle Color.
Color and scale(and if gradient).
If you want numbers and the start and end.
Title and showed value in the middle.

I added an animation on the needle, and a method that you can call from DS for moving it.

That is the base version and the properties page.

And these are some custom versions:

Here the GitHub Repository:

Antoninjo/DesignStudioCustomGauge · GitHub

I’m sorry for my really chaotic code and my multilanguage comments, i will fix it soon.

I hope it could be usefull.

For any problem or suggestion please write a comment below and i will solve it as soon as possible.

Best Regards

3 Comments

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

venkatesh guttikonda

July 23, 2014 at 6:33 am

Hi-

Excelent component. Can you please provide us gauge with two needles please.

i have a requriment to show actual and budget value.

Former Member

February 3, 2015 at 10:34 am

Hi Antonino,

very nice job. could you provide the info how to bind the component to data.should we use

SPEEDOMETER_1.setNeedle(xxx); ?

thanks

Former Member

March 20, 2015 at 9:25 am

Hey Elisabeth, you are on the right track (I assume), with the very minimal time I have spent on this component I used the same function to grab a specific measure from my Datasource (to a filter) but when the filter is applied the speedometer starts to spin (360 constantly).

Was wondering if you were experiencing anything similar or you have managed to use it as intended.

-Stav

Design Studio 1.3 SDK – Custom Gauge with Code

Assigned Tags