leaderboard left
leaderboard right
content topleft content topright

Creating Custom Dashboards for your Nuvi Page 2

Jul
26
2013

Community Contribution By Boyd Ostroff
Back to page 1

The TwoFields dashboard

twoNow we’ll build on what you’ve already learned with a more complete dashboard example. Open the TwoFields_800x480.dshb file in Notepad++. You’ll see that this file has the id “two”. The first new thing you’ll notice is the DashboardColors section. These define the font colors we’ll be using in the data fields. The red, green and blue values correspond to the RGB values you’ll see in the Photoshop color picker.

colorsIn this example we have created a green color called TitleColorID. We could have defined different colors for day and night if we had wanted to. We could have also created additional ColorHandles if we wanted more variety in the dashboard.

<ColorHandle id="TitleColorID">
	<DayColor red="143" green="255" blue="125" alpha="255"/>
	<NightColor red="143" green="255" blue="125" alpha="255"/>
</ColorHandle>

Different font styles

These colors are used in the DashboardStyles definitions that follow. In this example we’re only using two styles, but we can use more if desired. DashboardStyles define the font and style that are used in our data fields. Let’s take a closer look at the style we’re using for the field titles: the labels that will be displayed above our data on the screen, such as “Arrival”.

<DashboardStyle id="TitleStyleId"
		name="FONT_SIZE_MAP_DATA_TITLE"
		color_name="TitleColorID"
		halo_color_name="HighlightColorId"T
		justify_horizontal="center"
		justify_vertical="middle"
		>
	<FontAttributes>
		<FontAttribute type="normal" />
	</FontAttributes>
	<FontStyles>
		<FontStyle type="normal" />
	</FontStyles>
</DashboardStyle>

Most of this should be pretty easy to understand. Name specifies which font to use. These fonts are part of the Nuvi firmware and therefore somewhat of a mystery. By examining the stock dashboards, I have found the following options. If you look at the names of these fonts, you might be able to make some educated guesses about other options.

	FONT_SIZE_C2
	FONT_SIZE_D
	FONT_SIZE_F2
	FONT_SIZE_DATA_TITLE
	FONT_SIZE_MAP_DATA_ATTRIBUTE
	FONT_SIZE_MAP_LIMIT_TEXT

You can try substituting some of these other names into the DashboardStyle code and observe what happens. I’ve used FONT_SIZE_DATA_TITLE for the titles in all of my dashboards because it appears to be the smallest. And I have used FONT_SIZE_C2 for all the data because it’s small enough to work with my 7 field dashboard.

The justification should be easy to understand and we’ll see how that works when we take a look at the actual data fields later. The “normal” attribute should also be easy to understand Note that we’re using “bold” for the field data. I have not tried any other values for these, so I don’t know what else is possible.

If you don’t like any of the stock fonts, it appears that you can even install your own. To see how this is done, take a look at the stock GarminDigi dashboard. This dashboard uses a custom font named FONT_GARMIN_DIGI_DATA. Open the hidden .System folder on your Nuvi (where the map is stored) and you’ll see a Fonts folder that contains a file named DigiGarmin.ttf. This is a custom TrueType font used by the dashboard. If you use a utility program to examine the font, you’ll see that it doesn’t have a complete character set. It only contains numbers and the few letters and symbols that are used to display data (such N-S-E-W to indicate driving direction). I have not explored this in any depth, but it’s interesting that Garmin has provided a mechanism to install your own fonts.

Continuing our tour of the TwoFields dashboard, you’ll find a Background and a Back Button section just like the one in the HelloWorld example. The only difference is that the background image includes two boxes where the data fields will be displayed.

Digital Components

Scroll down further and you’ll find a field that displays our current speed on the left side of the screen, next to the Back Button.

<DigitalComponent id="SpeedField" action="trip_computer">

DigitalComponents are used to display GPS data on the screen and they can have actions associated with them. The id SpeedField is arbitrary; you can choose any name you like for your DigitalComponents.

One of the possible actions is “none“, and this means nothing will happen if you tap the field on the screen. Here we’re using the Nuvi standard of bringing up the Trip Computer screen. A third possible option for a data field is “Customize“. When you tap a field on the screen with this option, it brings up a list of different items that you can display in a field.

Here’s an important thing to remember: never use “customize” with a speed field! Why? When you customize a field, a number of different choices are available when tapping a field, but “speed” is not one of them. So if you customize the speed field, you must change it to one of the available choices when you use the dashboard. The Nuvi will then remember your choice and there will be no way to change this field back to a speed display. This appears to permanently break your dashboard. The customization preferences are stored internally by the Nuvi where we can’t access them. The preferences are associated with the dashboard id, so re-loading the dashboard file won’t fix this problem. Performing a hard reset on the Nuvi also won’t fix the problem. The only way to fix your dashboard will be to assign a new id to it.

Moving along, you will see our old friends LandscapeRect and PortraitRect that define where the field is displayed on the screen. We’re using “BUILT_IN_NO_IMAGE_HNDL” because we don’t want any image to be displayed for the field. If we had wanted to, we could have created an image to be displayed for the field by specifying it here. I have chosen to use the background to provide the box where this field is displayed however. But we are defining an image to be shown when you tap the field:

	depressed="IMG_DASHBOARD_MSCL_DIAL_DPRS_HNDL"

Consult the table posted earlier and you will see that this corresponds with image number 10 in GIR_Editor.

Displaying titles for your data

Let’s turn our attention to the field title now:

<TitleDisplay style_id="TitleStyleId">
	<Meta>
		<LandscapeRect x="0" y="1" w="112" h="22" />
		<PortraitRect x="0" y="1" w="112" h="22" />
	</Meta>
</TitleDisplay>

TitleStyleId” references the DashboardStyles described earlier and determines what font and style will be used. The LandscapeRect and PortraitRect should be familiar, but the context is a little different here. At the beginning of the SpeedField section we defined

	<LandscapeRect x="55" y="425" w="112" h="54" />

As you should know, this means that top left corner of the Speed Field will be located at coordinates x=55, y=425 on the screen and it is 112 pixels wide x 54 pixels high. This describes where the field itself is located. But the LandscapeRect parameters in the TitleDisplay section define where the title will be located inside the speed field. In other words, the top left corner of the title will be even with the left edge of the field (x=”0″) and one pixel below the top of the field (y=”1″) and it’s 112 pixels wide x 22 pixels high.

	<LandscapeRect x="0" y="1" w="112" h="22" />

Remember the TitleStyleId at the beginning of the dashboard file?

	justify_horizontal="center"
	justify_vertical="middle

This indicates that the title will be horizontally and vertically centered in the area we have defined. Now where do the actual titles, such as “Speed” come from? These are part of the Nuvi system software. There may be a way to change the titles by editing the .glx files found in the Text folder on the Nuvi, however I haven’t tried this myself and am not sure what side effects it might have. I believe any change to these files will be global, and would change everywhere that the word “Speed” is either displayed or spoken.

What if you don’t want any title for your field? That’s easy: just remove the whole TitleDisplay section for the SpeedField. There is no requirement to use field titles. If you want a custom title you could also use the approach of including it in the dashboard background image or a background for the field itself. However this approach would not allow the field title to change if you customize it.

Displaying the data

Next we find the DataDisplay section

<DataDisplay default_mode="speed" default_route_mode="speed" style_id="DataStyleId">
	<Meta>
		<LandscapeRect x="0" y="22" w="112" h="0" />
		<PortraitRect x="0" y="22" w="112" h="0" />
	</Meta>
</DataDisplay>

We can define different defaults for what a field shows depending on whether or not a route is active. In this case, we want the field to always show speed. We’ll explore this in more depth a little later. Note that we’re using the font and styles defined earlier as DataStyleId. The LandscapeRect and PortraitRect should again be familiar and they work just like the title. Notice that the height is defined as zero (h=”0″). Have another look at the way we defined DataStyleId at the beginning of the dashboard:

	justify_vertical="top"

The top of the numbers will be aligned 22 pixels below the top of the field. We might have done this differently if we wanted the title to appear below the data. On the Nuvi, you will observe that the software tries to automatically size whatever data you’re displaying within the field width you specify. But there are limits to how small you can make a field and still get a large number to fit. It may take a little trial and error to create a new dashboard and get everything to fit the way you like. That’s how I created the examples for this tutorial, and it took a lot of experimentation to create the SevenFields layout and get all the numbers to fit in small fields.

A final note that’s specific to the Speed field. The Nuvi will automatically display your speed in red if you’re driving too fast on a road for which it has speed limit data. This will over-ride the font color you have specified and I don’t see any way to prevent it.

This concludes the DigitalComponent that provides speed display for our dashboard. We’ll now take a look at the second field in the dashboard, and you’ll see that it’s very similar.

Our first custom field

We have another DigitalComponent named CustomField. As previously mentioned, you can name the components anything you like, the Nuvi doesn’t care. We have made this a field that the user can customize by tapping the screen

	<DigitalComponent id="CustomField" action="customize">	

The next section is pretty much the same as the Speed field, although the coordinates place it on the right side of the screen. Once again there is no background image attached to this field and we’re displaying the same image as the Speed field when you tap the screen. The title and data are also the same as the Speed field. But we have something a little different here:

<DataDisplay default_mode="direction" default_route_mode="arrv_time" 				style_id="DataStyleId">

These defaults will cause the field to show something like “Driving NW” if you aren’t navigating or “Arrival 12:45 PM” if a route is active. With a customizable field, I don’t think these values are especially important one way or the other. Once the GPS user chooses the data he wants to display (customizes the field), the Nuvi will remember it permanently. So the defaults will only be used until a user makes his own choice. If we had used a value of action=”none”, then it would certainly be important to have the correct defaults in the code, since the user couldn’t alter them.

When not navigating, the list of possible defaults are “direction“, “elevation” and “time“. “Speed” is another possibility, but as discussed above, you shouldn’t use speed for a customizable field.

While navigating a route, “dest_dist” shows how far away the destination is and “arrv_time” shows what time you will arrive. There are obviously a number of other options but I haven’t taken the time to figure them out since it’s so easy for the user to just choose them himself from the Nuvi menu.

I’m not going to cover the images for the TwoFields dashboard because they’re almost identical to the HelloWorld images. But take a few moments and look at them in GIR_Editor. You’ll see that the dashboard background is similar but it adds boxes for the two data fields. The only other difference is the addition of a new “depressed” image for the data fields.

Congratulations! You now know enough to make a functional dashboard. If anything in the code still confuses you, review what we’ve learned so far as I think we’ve covered all the important concepts and parameters.

Exercises – test your knowledge

  • Try moving the data fields to a different location on the screen. Change the dashboard background to match the new location. Change the color of the data and titles. Try using a different color for day and night.
  • Use one of the other fonts listed above for the data. Re-size the fields so that it fits comfortably. Change the background image as needed so it matches. Try different font justification, such as “left” instead of “center“.
  • Can you figure out how to add another custom field to this dashboard before you read the next section? (hint: copy and paste is your friend)
  • Advanced exercise: use a custom font in the .System/Fonts folder to display the Speed. Adjust the field size, position and background image as needed.

Page 3


Leave Your Track

Comments will be displayed directly on this page for everyone to view. Please make sure your comment/review is relevant to this page. You can be notified of further comments by checking the box at the bottom of the form. We reserve the right to delete or edit any comments.

Unfortunately, please refrain from posting pricing or store information as we've had trouble with vendors trying to advertise through comments, disguised to look like regular users. Feel free to post that info in the forums, but not here.




content bottomleft content bottomright