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

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. We will now start from scratch. 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 Designer corresponds to the 19 channels output from the data stream. The first gauge we will create is throttle position. Look at the data stream list you printed. You will find that the third gauge on the list is throttle position. Click the drop down list for “Gauge 3”. Select “Horizontal”. The gauge will appear on the far left as shown.
   
8. Position the top left of the gauge as shown.
   
9. Position your mouse on the bottom right of the gauge, and stretch the height (H) so that it is 18 pixels tall to fit in the rectangle as shown.
   
10. Position your mouse on the bottom right of the gauge, and stretch the width (W) so that it is 251 pixel wide to fit in the rectangle as shown. When complete, choose the gauge setting icon as indicated by arrow.
    
11. The first tab “Ranges” is shown. 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. For this gauge, it will be the same color no mater what percentage the gauge is at.
    
12. For this gauge, we would like the color to always be the same. Let’s make this gauge pink. If you’d like it to be the exact color in the default design, enter the color code shown (FFFB19EF).
    
13. In order to make the gauge one color, enter 100 for the first color.
    
14. The next tab is “Data”. The information in this tab shows how the data will be displayed. “Data Min” and “Data Max” corresponds to which data buckets are displayed. “Average Rolling Data” will average several data samples before displaying in order to smooth spiky data (such as battery voltage). “Reverse Gauge” will reverse the direction of the gauge (a horizontal bar gauge will move from right to left instead of the normal right to left).
    
15. The last tab is “Size”. This shows the position of the gauge as x position (horizontal) and y position (vertical). It also shows the gauges width and height.
    
16. Close the gauge setting screen by clicking anywhere outside of the gauge setting screen. Your gauge is now shown.
    
17. Next, we will make a digital gauge for intake air temperature. Looking at the data stream list, you will find that intake air temperature is channel four. Select digital from gauge 4’s drop down. The digital gauge will appear in the top left corner as shown below.
    
18. Click the “Digital” tab. Select “temperature F” for the input type, and change the next size to 4. Note that “temperature C” will display the temperature in Centigrade. We will use Fahrenheit for this example.
    
19. Like the throttle position gauge, we will make the digital gauge for intake temperature to be the same color through out the gauge’s range by setting the first color to orange (FFFF5900), and making the range 100%. Close the gauge setting window by clicking outside the window. We will now position the intake air temperature gauge under the text “INTAKE AIR TEMP (F)” text on the right. Instead of moving the gauge with the mouse, we will use the keyboard for this example. Click the gauge, and move it to the right in small movements by holding down the “Ctrl” key and pressing the right arrow. The gauge will move by one pixel. For larger movements, hold down the “Ctrl” and “Shift” key while pressing the right arrow. The gauge will move by ten pixels. Position the gauge under “INTAKE AIR TEMP (F)”.
    
20. Position the gauge approximately as shown, then click gauge settings and the “Size” tab to check where the position is. Use the up and down arrows next to x (horizontal) and y (vertical) to precisely place the gauge at 591 & 116.
    
21. Next, we will produce the coolant gauge, which you will find on the channel list as channel 5. Select Digital from the drop down list, change the color to teal (FF01E6FC), set the input type to “Temperature F” and the text size to 4. Move the gauge over with your mouse to approximately the same horizontal position as the intake air temp gauge, then open the settings, and precisely change the horizontal position to the same as the intake air temp gauge (591).
    
22. Change the vertical position to be the same spacing from “COOLANT”, which you will find is 197 as shown below.
    
23. Repeat the same process above for the air/fuel ratio gauge, which you will find on the channel list as gauge 14 for “O2 1” or the first wideband oxygen sensor. Set the input type to air/fuel ratio and increase the text size to 5. Set the X position to 583 & Y position to 276. We will make the low, mid, and high colors for this gauge different as shown below. Set the low point to 40% and blue (FF0A12F2), the mid point to 20% and yellow (FFFFFF00), and the high point to 40% and red (FFFF0000).
    
24. Next, we will create the engine speed, or tach gauge. You will find engine speed as channel 1. Select circular gauge from the gauge 1 drop down menu.
    
25. We will make the low point green (FF03FC03) at 60%, the mid point yellow (FFFCFC1B) at 20% and the high point red (FFFF0000) at 20%.
    
26. Click the data tab. Since the gauge spans 0 – 8,000, we will set the minimum to 0 and the maximum to 80. This is because the data stream “scalar” is 100 and 100 * 0 = 0 and 100 * 80 = 8,000. For more detailed information on how the data stream works, click here. 
    
27. Make the bar width 14 pixels as shown.
    
28. Make the gauge 303 pixels in diameter by dragging the bottom right of the gauge. Position the gauge at X: 96 & Y: 89. 
    
29. Next, click the circular tab. Note that the start position is 90 degrees as the length 270 degrees.
30. Create the speedometer gauge (channel 16). Configure as shown.
    
31. Increase to 362 pixels in diameter.
    
32. Position as shown.
    
33. 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.
    
34. The data min / max needs to match the range of the gauge (0-160 MPH). Since vehicle speed (channel 16) minimum value is 0, we know data min should equal 0. Since the scalar is 1, we know the maximum should be 160 (1*160 = 160). 
    
35. Congratulations, you have just finished your gauge design! Although this gauge design automatically loads when you visit gaugeDesigner, 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. 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.
37. Save your design to your hard drive by clicking “save design”. Save the file as classic.GAD on your hard drive.
38. Click “new design” to create a blank canvas.
39. Click “load image” to open the background image you downloaded.
40. Click “load design” to open classic.GAD you previously saved.
41. 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.
42. Insert the microSD card in to the gaugeART Video Gauge Adapter, turn on power, and your created design will now display.