Gauge Graphics

Update 1 (Nov 8, 2013):

Note that a little more info is also in the Builder blog article.

Blog 1 (Mar 8, 2011):

This is a "work in progress" at describing how GaugeFace graphics work. Eventually we intend to support allowing you to customize and/or create your own gauges and this is a heads-up on some of the info you might need to know about.

Main screen

The main app screen size is 480x300 or 320x460 depending on if you want to design graphics for a Landscape or Portrait orientation. A main screen background can be set with any RGB color or with a graphic image that should be png or jpg format at 72 DPI. If using a graphic image, note that it is treated as a "color pattern" This means that if you have an image that is smaller than the screen sizes previously mentioned that then the image will be used as a repeating pattern tile to fill the screen.

Readings

Gauge readings are defined as being of a specific "class" that are defined to have a corresponding data type.

  • speedo: numeric double
  • tach: numeric double
  • gear: numeric integer
  • enginetemp: numeric integer
  • leftturn: numeric boolean (0|1)
  • rightturn: numeric boolean (0|1)
  • altimeter: numeric double
  • compass: numeric double (0.0 to 360.0)

Gauges

Each gauge type has its own behaviour and/or look & feel.

Circular

Has an x, y, width & height. Draws a background color or image within the defined width & height. Images should be double the size needed so that a retina displays capabilities are taken advantage of. Draws a needle image in the foreground with a center axis point being the center point of the needle image rotated around the center point of the gauge. Draws a circular gauge line using a specified color and with "tick marks" based on start/end angles and start/end values.

Linear

Has an x, y, width & height. Draws a background color or image within the defined width & height. Images should be double the size needed so that a retina displays capabilities are taken advantage of. Draws a needle image in the foreground with a center axis point being the center point of the needle image through either the horizontal or vertical length of the gauge. Draws a linear gauge line using a specified color and with "tick marks" based on the and start/end values.

Digital

Has an x, y, width & height. Draws a background color or image within the defined width & height. Images should be double the size needed so that a retina displays capabilities are taken advantage of. Draws a textual representation of the data using a specified color and a "format" specification (Eg. 1234.56789 passed in with a format of "%.01f °F" results in the value being displayed as 1234.5 ).

Boolean

Has an x, y, width & height. Draws a background color or image within the defined width & height. Images should be double the size needed so that a retina displays capabilities are taken advantage of. Draws an optional foreground image for the On state or another image for the Off state.

Other Notes

While generally simple to setup a new gauge I like to test each one to ensure everything works and looks as intended while out on an actual ride in multiple lighting conditions. Some colors can be harder to read than others. Using smaller sized gauges results in better drawing performance as does the reduction of any alpha (translucent) layers. Using too much alpha or really large turn signal or needle images, for example, really hurt the total frames per second that can be displayed and this results in a choppy looking, or even an unresponsive, gauge.