Tutorial – Create a Design from Scratch (AEM EMS CAN)

First, read instructions on opening, saving, and exporting designs by clicking here.

In this tutorial, you will learn how to make a gauge design from scratch. To begin, download the gaugeART Classic design from the Design Gallery and unzip the files to your desktop.

  1. Click “load design” and open the .GAD file.
  2. Next, click “load image” and open the .JPG file.
  3. The design will appear as shown. This is what your design will look like when you are complete.
  4. To create a bank canvas, click “new design” as indicated by arrow.

  5. Download the background image here.
  6. To load a background image, click “load image”. Open the background image file you saved in the prior step.

  7. The right column in design is the list of gauges in the design. The first gauge we will create is engine speed. Click “ADD A GAUGE”. Select “circular” for the gauge type. Look at the data stream list you printed. Engine speed is CAN address 0x111 byte 1. Enter 111 (0x is already filled in) for the address and select 1 for the byte.

  8. Click the settings icon. 
  9. Click the “Size” tab. Enter “303” for the horizontal and vertical width settings as shown to make the gauge the correct size. The size can also be manipulated by dragging the bottom right of the gauge.

  10. Try to place the gauge in place by clicking the gauge and holding your mouse button to position the gauge as shown below (the settings window will close). You can move the gauge by one pixel by clicking “control” on your keyboard and the left, right, up, or down arrow. To move the gauge by 10 pixels, click “control”, “shift” and the left, right, up or down arrow.
  11. Positioning can also be done in the settings “Size” tab. Click the settings icon, then the “Size” tab. Click the horizontal (x) and vertical (y) arrows up or down. The position changes by 10 pixels. Enter “96” for the horizontal and “89” for the vertical positions as shown.

  12. Click the “Circular” tab. Change the bar width to “14” in order to make the gauge thicker. Click the arrows up or down for “start angle”. This refers to the degree that the circular gauge will begin. This can be changed if the background design’s ticks start at a certain angle. For this design, set start position to 90 to match the ticks in the background design. Click the arrows up or down for “length in degrees”. This refers to the length of the circular gauge in degrees. This design’s gauge spans 270 degrees, or three quarters of the gauge’s range, so set “length in degrees” to 270 to match the ticks in the background design.

  13. Click the “Data” tab. The “data min” and “data max” values refer to the range of 256 “data buckets” that the ECU transmits for this data parameter (click for more information about data ranges).  Since the gauge design will display 0 – 8000 RPM and the scalar is 100, set the data min value to 0 and the data max value to 80 (80 x 100 = 8000).
  14. Next, click the “Ranges” tab. First, choose the background color that the gauge is positioned over. For this gauge, the background is black, the default color. The low, mid, and high point allows you to select at which point the gauge should change color. The numbers indicate at which percentage of the gauges length should the color change. You may color the gauge one, two, or three colors. We will explore how this works in a further step. Leave the values to the default 60, 20, and 20.

  15. The next gauge added will be throttle position. Click “ADD A GAUGE”. Select the drop down and set the gauge type to “Horizontal”. Set the address to what is configured for throttle position (0x111 byte 5). 

  16. Select the settings icon, and set the position and sizing as shown.

  17. Since the range of throttle position is 0-100%, and we want the full range to be displayed, leave the data range 0-255 as shown.

  18. We want this gauge to be bright pink for the full range. Click the color for “low”. Enter “FFFB19EF”.
  19. Set low to 100% to color the entire bar pink.

  20. The next gauge added will be intake air temperature. Click “ADD A GAUGE”. Select the drop down and set the gauge type to “Digital”. Set the address to what is configured for throttle position (0x111 byte 7).

  21. Set the position of the gauge (584 & 122). Do not adjust size, the font size will be adjusted on the next step.

  22. For a digital gauge to display correctly, the correct input type must be selected. Select “Temperature F” to display coolant and air intake temperature digital gauges in Fahrenheit. Note that “temperature C” will display the temperature in Centigrade. We will use Fahrenheit for this example. Select font size “4” and alignment to “center”.
  23. Click the “Data” tab. Typically digital gauges are left as the full range. Leave the range as 0-255.

  24. Choose orange for this gauge (FFFF5900).

  25. This gauge will be orange for the full range, so set low to “100”.

  26. Repeat the same process for the digital coolant (0x111 byte 8) gauge. Coolant is located at 583 & 203. The data type is “Temperature F”, the size is the 4, and the alignment is center. The color is teal (FF01E6FC) and it is the same color for the entire range.
  27. Repeat the same process for digital air/fuel ratio, or O2#1 (0x444 byte 1) gauge. AFR is located at 573 & 289. The data type is “Air Fuel Ratio”, the size is the 5, and the alignment is center. The color is blue (FF0A12F2) for 40% for the low range, yellow (FFFFFF00) for 20% of the mid range, and red (FFFF0000) for 40% of the high range.
  28. The last gauge to be created is for vehicle speed. Click “ADD A GAUGE”, select “Circular” for gauge type and set the correct address (0x444 byte 3).

  29. The size of this gauge is 362 pixels and is positioned att 66 & 60 as shown.

  30. This gauge has a thicker width (12) and has a starting angle of 90 and length of 270 degrees.

  31. Because the scalar of vehicle speed is 1 and this gauge will range from 0 – 160 MPH, set the range to 0 – 160 (1 x 160 = 160). 

  32. This gauge will have a royal blue color (FF382AF8).

  33. The range will be the same color – set low to 100.

  34. Note that if two gauges overlap, the larger gauge will cover the smaller gauge. To access the smaller gauge click the top of the channel as indicated by the arrow. You can now move or open the gauge setting window.

  35. Congratulations, you have just finished your gauge design! Although you’ve already downloaded this design, let’s practice the final steps to save your design to your hard drive, then prepare the files for the gaugeART Video Gauge Adapter.
  36. Save your design to your hard drive by clicking “save design”. Save the file as classic.GAD on your hard drive.
  37. Click “new design” to create a blank canvas.
  38. Click “load image” to open the background image you downloaded.
  39. Click “load design” to open classic.GAD you previously saved.
  40. Next, you will export the three necessary files used by the gaugeART Video Gauge Adapter. Click “export image”, and save the file created to the microSD memory card. Click “export design”, and save the file created to the microSD memory card. Lastly, if the microSD card does not already have the pointer file, click “update pointers”, and save the file created to the microSD card. Do not change any of the file names created by gaugeDesigner when saving files to the microSD card.
  41. Insert the microSD card in to the gaugeART Video Gauge Adapter, turn on power, and your created design will now display.