How to create a custom gauge
If you want to create a custom analog gauge like the one below, read on.
In this tutorial we want to create a Speedometer Gauge. So at first we need the image above separated into two png images. One for the Gauge and its scale and one for the needle. Copy your final images to the device.
Make sure that the needle image is vertical and the tip is directed towards the bottom of the image. The Gauge image should be in 1:1 ratio.
Then open the app and find the type of gauge you want to create in the Editor. For this tutorial I selected a Speedometer Gauge.
Add it to your Design and it will show you the customization options.
First one is the Scale Start Value. The value of 0 is fine here, because our scale starts with 0 km/h
The second one is the Scale End Value. We set it to 220, because the scale ends at 220 km/h
Now select the unit type of your scale. In this example we have a km/h scale. This value is important, it must be set to the scale of the image!
We are now ready to select our images, click on the Scale Image entry and select your Gauge image.
Then click on the Needle Image entry and select your needle image.
The Tip of the Needle should be pointing to the bottom!
Going further in the settings list we need to provide values for the Needle Start Angle and the Needle End Angle
For a better understanding how these are calculated have a look at the following image
I have added an overlay for the angle. As you can see the angle 0°/360° is at the bottom. The Needle Start Angle is at around 75°, the Needle End Angle is at 294°. Enter your values in the app, you can fine tune that later
If the option Debug draw at the End of the Settings List is activated, the app shows an overlay with the configured parameters.
The left green line shows the start angle (which was set to 75°) and the corresponding value (0 kph). It helps to find the correct angle, because the visual representation allows to verify that the needle is directed to the desired start value.
The right green line does the same for the End angle (294°) and the corresponding value of 220 kph.
The red lines show the center point of the graphic and the red dot helps to verify the Needle Y Pivot, which is explained later in this tutorial.
Now we come to the last two settings. First one is the Relative Needle Height which says how big the needle is in relation to the gauge.
As you can see on the image above the needle has a height of 138px, the gauge is 371px high. Divide 138px/371px and the result 0.37 is the Relative Needle Height
Finally we need to provide the app the position on the needle image, where the needle is rotating around
As you can see in the image the point where the needle rotates is at 89px. Divide this point by the full height of the needle to get the y pivot: 89px/138px = 0.64. Enter the value in the app and you are done.
By default the needle is positioned at the center of the Gauge background image, if you want to change that, you can adjust the Needle Y Position option at the end of the settings list which is not required in this example
Thank you for taking the time to read till the end. If you have created a cool gauge feel free to share it using the Community Share feature!