Creating Custom Dashboards for your Nuvi Page 3
Community Contribution By Boyd Ostroff
SevenFields: the Holy Grail of dashboards?
Well personally I don’t think so, but if you follow the GPS forums, you might come to this conclusion! Personally, I prefer simplicity… But regardless of your philosophy, our final example is the SevenFields dashboard, and it builds on everything you’ve already learned. Open the dashboard in Notepad++ and take a look…
Starting from the top, the only difference you’ll notice is that id=”seven” for this dashboard. Let me remind you a final time, always use unique id’s when you create a new dashboard.
The fonts, colors and attributes are all the same as TwoFields. The background is the same, but it has more boxes to match the additional fields. Extract the image with GIR_Editor and open one of the backgrounds in Photoshop. You can then see the pixel dimensions of the various fields and compare them with the parameters in the code.
The code for the Speed field is identical to the TwoFields dashboard with one change. We’ve made it smaller, because the 112 pixels used previously is wider than we really need and we’re trying to squeeze a lot of data into this layout. This required the creation of an additional “depressed” image for feedback when the user taps the field.
Also note another subtler difference. We’re using different sizes and positions of fields in Landscape vs Portrait orientation. With this much data, it just isn’t possible to fit it all on the same line in Portrait mode. So we use a second row of fields, with a gap in the center to provide a little more space around the vehicle. This was just a design decision on my part. You can certainly think of many other layouts to present your data in either Landscape or Portrait modes.
What’s the speed limit?
The default Nuvi dashboard presents the speed limit display by showing a graphic of a sign with the title “LIMIT” if you live in North America. If you’re in Europe it shows your speed inside a red circle with no label.
There’s really nothing special about how this is done however, it uses the same techniques you’ve already learned. There’s a background image attached to the Speed Limit that looks like a sign that has data and title fields like any other. But the code has a unique feature: localization
The value for locale is based on the country you chose when you first setup your Nuvi. It uses this value to choose which section of code to use when displaying the speed limit background image.
With the SevenField dashboard, I wanted to keep the speed limit on the bottom line, just like the other data. If you prefer the default style with a speed limit sign, then take a look at the GarminMuscle dashboard.
Speed limit corrections
You will see a new value for action here:
<SpeedAndSpeedLimitComponent id="F2" action="report" >
Speed limit corrections were a new feature on the 2012 Nuvi models. They allow you to tap the Speed Limit on the screen and enter your own value if it isn’t already shown. Or you can change an existing speed limit if it’s wrong. Based on the icons I see in the GarminMuscle dashboard, there may be two other forms of “correction” as well. There’s an icon that may represent a red light camera and another that might be for a speed camera. I have never used either of these features myself so I don’t know how they work.
If you open the GarminMuscle dashboard in GIR_Editor, you will see that these icons appear in images 13 and 14. But then consult the list of images posted earlier in this article. I have flagged these two images as “not used?” because I can’t find any mention of them in the code, and therefore we don’t have a way to specify them. So this is another “dashboard mystery” I haven’t solved. If you figure it out, let me know!
The speed limit background
Let’s continue with our walk-through of the Speed Limit code now though; we’ll return to speed limit reporting below. The basic field structure and behavior is just like the other fields we’ve seen. No background image is associated with the field, but it has a “depressed” image that shows when you tap the screen (GIR_Editor image 19). I have created a rather narrow field – only 80 pixels wide. This seems to work in the simulations I’ve done, including when I changed units to Kilometers (resulting in some 3-digit speeds). This narrower field is why I needed to create a different “depressed” image.
Notice that the LocalBackgroundDisplay code is identical for both the US and EU – this is an “international dashboard”! If we were using the other style of speed limit display that looks like a road sign, we would use different image files as background based on location.
<LocaleSpeedLimitDisplay style_id="DataStyleId" locale="US">
LocaleSpeedLimitDisplay works just like the DataDisplay section of a standard field. It specifies the location where the speed data will appear within the LocaleBackgroundDisplay that was previously defined. Notice that the height is set to zero, like our previous DataDisplay fields. And we’re using the same DataStyleId with top-justification of the font as well. If we had wanted to, we could have defined separate fonts, styles and justifications to be used for the speed limit.
Again, a separate, duplicate copy is included for the US and EU. Since I wanted to use the same style regardless of locale, I tried various methods of simplifying the code but they all had problems. I came to the conclusion that separate US and EU sections are required, but I may have missed something.
The speed limit label section looks just like the TitleDisplay section we’ve seen before with the addition of the locale:
<LabelDisplay style_id="TitleStyleId" locale="US">
Add your own speed limit
The final part of the speed limit section allows you to add a missing speed limit:
This section of code is only used if the road doesn’t already have a speed limit associated with it. When you’re driving on such a road it displays an icon of a plus sign in the speed field
That pretty much covers the code for speed limits, but here’s one other point to keep in mind. These fields are a little different from standard fields in that they only work when you’re driving on a mapped road. If you’re driving around a shopping center parking lot that isn’t on the map, for example, the speed limit field will just be a blank. You cannot add a speed unless you’re driving on a mapped road. And the speed field will always appear as a blank if you aren’t using a City Navigator map. So if you’re using a topo map, the speed limit field will always be blank.
Necessity dictates simplicity
The notable thing about the third field of this dashboard is its simplicity. This might stand as an example of how to implement a bare-bones data field.
<DigitalComponent id="F3" action="none">
Nothing happens when you tap this field. Why is that? It’s a compromise I made for two reasons. The first is that it’s a very narrow field, just wide enough to show what direction you’re driving. Most of the other field data options simply wouldn’t fit in that space if we allowed customization. But the real reason comes down to our limited ability to create dashboards. Remember, they must be based on an original Garmin dashboard, and I have chosen the GarminMuscle dashboard as my template because it has the longest code section. But cramming 7 fields into a single dashboard results in a lot of code – and I spent awhile trimming out everything that isn’t absolutely needed. Even so, it didn’t seem possible to fit the additional code needed for a customizable field here. Scroll down to the end of the XML code section of this dashboard. You’ll see there are only two lines of “filler” while our previous examples had several pages of filler.
We don’t need a BackgroundDisplay section for this field. Since there’s no action associated with tapping the field, we don’t need an image to show when it’s depressed. The only way to create a simpler DigitalComponent would have been to omit the TitleDisplay section.
Wrapping up the SevenFields dashboard
Well, we’re almost home now and I only have a few more thoughts to share about the SevenFields dashboard. The remaining 4 fields are all just like the customizable field we saw in the TwoFields dashboard; these fields are just “copy and paste jobs”. The only differences between them are the field names and coordinates. Take a quick look through them and you’ll see how they work. Different defaults are used for each, but as previously discussed, that’s almost irrelevant for a customizable field. But you might want to note how the Landscape and Portrait versions of the fields differ. As we’ve already seen, cramming 7 fields into the portrait view requires a different approach from landscape.
I’m not going into any detail about the images because there’s nothing new here. There are two new “depressed” images to fit the smaller fields used in this dashboard. The only other new image is the plus sign that’s displayed for adding a speed limit. Open the dashboard in GIR_Editor, extract the images and you will understand how they work.
Exercises – this is your final exam!
- Change the style of the dashboard to suit your own color sense. Change the title and data colors. Use different day and night colors. You can actually display each field in a different color scheme if you want. Unfortunately, your options are a little limited due to small amount of “filler” and the limited amount of code that can fit in this dashboard.
- To provide a little more feedback when driving on a road that isn’t on the map, come up with a scheme to display something such as “no speed data” in the field instead of just a blank. You will need to use a few different non-transparent images to do this, because we don’t want to see it if there is a speed limit for the current road of if the plus sign is being displayed. Again, this might be hard to implement because we’re close to the amount of code we can cram into this dashboard.
- Adapt this basic design to a 5-field dashboard. That will reduce the size and give you more room to play with more complex code – such as the previous two suggested exercises. With 5 fields, could you fit everything onto a single line in portrait view? Try placing the Back and Menu buttons higher up on the screen in portrait view to create more room on the bottom.
- Advanced exercises (for people smarter than me!): Figure out how the names of the images are stored in the dashboard file so that we can re-name them. Write a program to combine the XML code with the images so we can stop worrying about maintaining the same file size and can create our own dashboards from scratch. Hey…. I can dream, can’t I?…
Final thoughts about design and workflow
What’s the best approach to designing your own dashboard? Where do you start? This is ultimately a personal decision, but I think it helps to do a little planning before you write any code. The simplest approach is to sketch and scribble your idea on a piece of paper, along with some simple arithmetic to calculate field spacing and size. I have a whole pile of pages like that lying next to my keyboard. I also used a CAD program to work out my dashboard designs. This certainly isn’t necessary, but I already use the software for my “real” job and it was an easy way to move objects around and measure their sizes. You could do the same kind of thing with Photoshop or Illustrator.
If you’re going to include the boxes for your data fields in the background image (like the examples here), then creating that image in Photoshop might be the next logical step in the process. Hopefully I’ve provided you with enough building blocks in this article to copy and paste the fields into your new dashboard. You can then modify them as needed to fit your design.
As already suggested, try to work in small steps and copy the file to the nuvi frequently for testing. It makes debugging much easier if you haven’t made too many changes since the last version. The first important milestone is getting a draft copy dashboard to “just work” with all the desired fields, even if it’s not pretty. At this point, take some screenshots of both portrait and landscape view on the Nuvi, then open them in Photoshop. Using the marquee selection tool, you can measure how much you need to move each field for it to line up with the background image. Now go into Notepad++ and adjust the x, y, w and h parameters of the fields as needed.
Now it’s your turn…
I hope you’ve learned a few things and enjoyed these tutorials. If you make your own dashboards, why not share them in our long thread in the GPSReview Forums? That’s what first got me interested in making dashboards, and later led me to purchase a Nuvi 3550.This thread is also a good place to ask questions and solve dashboard problems.
Garmin has made it possible for use to customize the Nuvi in ways that never were possible before, so have fun and make the most of it!