How to generate an analog gauge

This help pages explains the usage of the customizable Gauges Widget(s).

At first glance it might be similar to the How to create a custom Gauge Help page, but the main differences are:

  • The Gauges that are explained in this help page don't need images. You don't have to be a Photoshop Expert to create a Gauge
  • Gauges, created with this Technique do not have a fixed scale. They can adapt automatically to the selected unit and specifications of the Vehicle

However, if you wan't to create a very specific Gauge and you got the Photoshop Skills you can still create a custom Gauge with images

Here are some examples what you can create with the customizable Gauge Widgets:



Settings

The following Documentation lists all Settings and how they influence the appearance of the Gauge.

Outer Arc Position

The Outer Arc Position defines the distance from the Gauge to the Edge of the Widget.

An Outer Arc Position with the value 0%. The ring of the Gauge starts at the Edge of the Widget.

An Outer Arc Position of 6%. The ring looks thinner, because it has a distance of 6% of the Radius from the Edge of the Widget

Inner Arc Position

The Inner Arc Position specifies where the Ring of the Gauge ends. A higher Inner Arc Position results in a thicker Ring if the Outer Arc Position value stays the same. If you increase the Outer Arc Position as well, you can create a thinner Ring with a small radius.

An Inner Arc Position of 25%. The ring looks bigger. The width of the ring is 25% as well, because the Outer Arc Position is 0% (25%-0% = 25%)

An Inner Arc Position of 100%. The ring is now actually a full circle (Please note: the "cutout" at the bottom depends on the Start Angle and the End Angle that are described further down the page.).

An Inner Arc Position of 100% and an Outer Arc Position of 50%. The radius of the ring is now smaller, but it can still be thick.

Bar Color

The Bar Color specifies the Solid color of the Circle. You can also select a transparent color to hide the Circle completly.

The Bar Color is blue

Use Gradient Color / Gradient

The Use Gradient Setting allows to specify a Gradient that overrides the Bar Color.

A Gradient from Gray to Red, with an Outer Arc Position of 0% and an Inner Arc Position of 14%.

A Gradient from Light Gray to Red, with an Outer Arc Position of 0% and an Inner Arc Position of 100%.

Use Radial Gradient

If you tick the Option Use Radial Gradient the Gradient will now be drawn from the Outside to the Inside of the Ring.

The Gradient is drawn on the ring. The ring ends at the dashed line, so the Gradient does not continue to the center of the Gauge.

This time the Ring is bigger (Inner Arc Position is 100%), so the Gradient continues to the center.

Draw ticks

Draw Ticks specifies if the outer Ticks are drawn or not.

Draw Ticks is on

Draw Ticks is off

Tick color

With the Tick color the color of the outer Ticks can be changed.

Tick Color is black.

Tick Color is blue.

Tick width

The Tick width changes the thickness of the Ticks.

Small Tick width.

Higher Tick width.

Tick Start Pos (from Outside)

The Tick Start Pos defines where the Tick begins on the Gauge.

In this example the Tick Start Pos is higher than zero, so there is an Offset to the Outside of the Gauge.

This example shows a Tick Start Pos of 0, the Tick starts at the Outside of the Gauge.

Tick End Pos (from Outside)

The Tick End Pos defines where the Tick ends.

The Tick End Pos is higher, so the Ticks are longer.

Sub Division Tick Count

The Sub Division Tick Count changes the number of smaller Ticks.

Please note: You have to activate the Custom Scale Option further down on the Settings screen for the Sub Division Tick Count to have effect.

A Sub Division Tick Count of 1.

A Sub Division Tick Count of 6.

Sub Division Tick Width

Sub Division Tick Width specifies the width of the Ticks between the Main Ticks.

Thin Sub Division Ticks.

Thick Sub Division Ticks.

Sub Division Tick Start Pos (from Outside)

Specifies the Distance from the Sub Division Ticks to the Outside of the Gauge.

The Sub Division Tick Start Pos is non zero, the Tick starts with an Offset to the Edge of the Gauge.

The Sub Division Tick Start Pos is Zero, the Ticks start at the outside of the Gauge.

Sub Division Tick End Pos (from Outside)

Specifies the Distance from the Sub Division Tick End to the Outside of the Gauge.

The Sub Division Tick End Pos is 14%, the Ticks end with an Offset from the Edge of the Gauge.

The Sub Division Tick End Pos is 20%, the Ticks are longer and have a higher Offset from the Edge of the Gauge.

Draw inner Ticks

Toggles the visibility of the inner Ticks.

Draw inner Ticks is on.

Draw inner Ticks is off.

Inner Tick color

Changes the color of the Inner Ticks.

Inner Tick color is white.

Inner Tick color is red.

Inner Tick Start Pos (from Outside)

The Inner Tick Start Pos defines the Distance from the Inner Ticks to the Edge of the Gauge.

Inner Tick End Pos (from Outside)

The Inner Tick End Pos defines the Distance from the end of the Inner Ticks to the Edge of the Gauge.

Inner Sub Division Tick color

Changes the Color of the Inner Sub Division Ticks.

The Inner Sub Division Tick color is white.

The Inner Sub Division Tick color is blue.

Inner Sub Division Tick Start Pos (from Outside)

Specifies the Distance from the Inner Sub Division Ticks to the Outside of the Gauge.

The Inner Sub Division Tick Start Pos is non zero, the Tick starts with an Offset to the Edge of the Gauge.

Inner Sub Division Tick End Pos (from Outside)

Specifies the Distance from the End of the Inner Sub Division Ticks to the Outside of the Gauge.

Draw Scale

Changes the visibility of the Scale.

Draw Scale is on.

Draw Scale is off.

Font

Changes the appearance of the Font. You can choose from a variety of fonts.

Default font.

Changed font.

Font Size

Changes the size of the Font.

Smaller Font size.

Bigger Font size.

Text color

Changes the color of the scale text.

Text color is white.

Text color is red.

Text pos

Specifies the Text position on the scale. From 0% On the Edge of the Gauge to 100% to the Center of Gauge.

The text position is 32% from the Outside.

The text position is 50% from the Outside.

Start Angle

Specifies where the Gauge Scale starts. 0° is at the bottom center of the Gauge.

The Start Angle is 25°.

The Start Angle is 0°.

End Angle

Specifies where the Gauge Scale ends. 360° is at the bottom center of the Gauge.

The End Angle is 335°.

The End Angle is 270°.

Angle Offset

The Angle Offset allows you to specify an Offset for the Scale of the Gauge.

The Angle Offset is 5°.

The Angle Offset is 0°.

Needle Image

Choose from different Needle Images.

Needle Selection Dialog.

White Needle, Style Atego.

Red Needle, Style M4.

Relative Needle Height

Changes the Size of the Needle.

Default Size 45.

Reduced Size.

Custom Needle

Activate this Option if you like to use a Custom Needle.

Needle Image

Choose your custom Needle Image.

Needle Y Pivot

The Point on the Needle Image, where the Needle rotates around.

As you can see in the image the point where the needle rotates is at 89px (from the bottom!). Divide this point by the full height of the needle to get the y pivot: 89px/138px = 0.64.