Skip to Content
Author's profile photo Former Member

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.

baseExample.png /wp-content/uploads/2014/07/properties_502109.png

And these are some custom versions:

/wp-content/uploads/2014/07/examples_502110.png

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

AC

Assigned tags

      3 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo venkatesh guttikonda
      venkatesh guttikonda

      Hi-

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

      i have a requriment to show actual and budget value.

      Author's profile photo Former Member
      Former Member

      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

      Author's profile photo Former Member
      Former Member

      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