Group Contribution By Boyd Ostroff
Page 1, Page 2
SevenFields: the Holy Grail of dashboards?
Properly personally I don’t assume so, however should you comply with the GPS boards, you may come to this conclusion! Personally, I favor simplicity… However regardless of your philosophy, our remaining instance is the SevenFields dashboard, and it builds on every little thing you’ve already discovered. Open the dashboard in Notepad++ and take a look…
Ranging from the top, the only distinction you’ll discover is that id=”seven” for this dashboard. Let me remind you a ultimate time, all the time use unique id’s if you create a brand new dashboard.
The fonts, colours and attributes are all the identical as TwoFields. The background is identical, however it has extra packing containers to match the additional fields. Extract the picture with GIR_Editor and open one of many backgrounds in Photoshop. You’ll be able to then see the pixel dimensions of the varied fields and examine them with the parameters within the code.
The Again and Menu buttons haven’t modified because the HelloWorld dashboard.
The code for the Velocity area is equivalent to the TwoFields dashboard with one change. We’ve made it smaller, as a result of the 112 pixels used previously is wider than we actually want and we’re making an attempt to squeeze lots of knowledge into this format. This required the creation of a further “depressed” picture for suggestions when the consumer taps the sector.
Additionally word another subtler distinction. We’re using totally different sizes and positions of fields in Panorama vs Portrait orientation. With this much knowledge, it simply isn’t attainable to fit all of it on the identical line in Portrait mode. So we use a second row of fields, with a niche within the middle to offer a bit of more room across the car. This was only a design choice on my part. You’ll be able to definitely think of many other layouts to current your knowledge in either Landscape or Portrait modes.
What’s the velocity limit?
The new function on this dashboard is velocity limit show. As you’ll see, this requires a longer part of code nevertheless it must be straightforward to know based mostly on what we’ve already discovered.
The default Nuvi dashboard presents the velocity restrict display by displaying a graphic of an indication with the title “LIMIT” should you stay in North America. In case you’re in Europe it exhibits your velocity inside a purple circle with no label.
There’s really nothing particular about how this is finished nevertheless, it uses the identical methods you’ve already discovered. There’s a background picture hooked up to the Velocity Restrict that looks like a sign that has knowledge and title fields like another. But the code has a singular function: localization
The worth for locale is predicated on the country you selected once you first setup your Nuvi. It makes use of this value to decide on which part of code to use when displaying the velocity restrict background picture.
With the SevenField dashboard, I needed to maintain the velocity limit on the bottom line, identical to the other knowledge. For those who favor the default type with a velocity restrict signal, then take a look at the GarminMuscle dashboard.
Velocity limit corrections
You will notice a brand new worth for action here:
Velocity restrict corrections have been a new function on the 2012 Nuvi fashions. They let you faucet the Velocity Limit on the display and enter your own worth if it isn’t already proven. Or you possibly can change an present velocity restrict if it’s mistaken. Based mostly on the icons I see within the GarminMuscle dashboard, there may be two different types of “correction” as nicely. There’s an icon which will symbolize a pink mild digital camera and another that may be for a velocity digital camera. I’ve by no means used either of those options myself so I don’t understand how they work.
Should you open the GarminMuscle dashboard in GIR_Editor, you will notice that these icons seem in photographs 13 and 14. However then seek the advice of the listing of photographs posted earlier in this article. I’ve flagged these two photographs as “not used?” because I can’t discover any point out of them within the code, and subsequently we don’t have a solution to specify them. So that is another “dashboard mystery” I haven’t solved. When you determine it out, let me know!
The velocity limit background
Let’s continue with our walk-through of the Velocity Restrict code now although; we’ll return to speed restrict reporting under. The essential area structure and conduct is rather like the opposite fields we’ve seen. No background image is related to the sector, nevertheless it has a “depressed” image that exhibits if you tap the display (GIR_Editor image 19). I’ve created a somewhat slender area – only 80 pixels vast. This appears to work in the simulations I’ve executed, together with once I changed models to Kilometers (leading to some 3-digit speeds). This narrower subject is why I wanted to create a unique “depressed” image.
Notice that the LocalBackgroundDisplay code is similar for each the US and EU – this is an “international dashboard”! If we have been utilizing the opposite type of velocity restrict show that appears like a street sign, we might use totally different image information as background based mostly on location.
LocaleSpeedLimitDisplay works identical to the DataDisplay section of a normal subject. It specifies the situation the place the velocity knowledge will seem inside the LocaleBackgroundDisplay that was beforehand defined. Notice that the peak is about to zero, like our previous DataDisplay fields. And we’re using the identical DataStyleId with top-justification of the font as nicely. If we had needed to, we might have outlined separate fonts, types and justifications for use for the velocity restrict.
Again, a separate, duplicate copy is included for the US and EU. Since I needed to make use of the identical type regardless of locale, I attempted numerous strategies of simplifying the code however all of them had problems. I came to the conclusion that separate US and EU sections are required, however I’ll have missed something.
The velocity restrict label part appears identical to the TitleDisplay part we’ve seen before with the addition of the locale:
Add your personal velocity limit
The ultimate a part of the velocity limit section permits you to add a missing velocity restrict:
This section of code is just used if the street doesn’t already have a velocity restrict related to it. Once you’re driving on such a street it shows an icon of a plus sign within the velocity subject
Consulting our record of pictures, you’ll see that this translates to GIR_Editor picture number 15. If we had needed to, we might have used one thing totally different than the plus sign.
That just about covers the code for velocity limits, but here’s one other level to remember. These fields are a bit of totally different from normal fields in that they solely work whenever you’re driving on a mapped street. In case you’re driving around a shopping mall parking zone that isn’t on the map, for instance, the velocity restrict subject will simply be a blank. You can’t add a velocity until you’re driving on a mapped street. And the velocity subject will all the time appear as a blank when you aren’t using a City Navigator map. So should you’re utilizing a topo map, the velocity restrict area will all the time be blank.
Necessity dictates simplicity
The notable thing concerning the third area of this dashboard is its simplicity. This may stand for instance of tips on how to implement a bare-bones knowledge subject.
Nothing happens once you faucet this subject. Why is that? It’s a compromise I made for two causes. The primary is that it’s a very slender subject, simply extensive sufficient to point out what path you’re driving. A lot of the different subject knowledge options merely wouldn’t fit in that area if we allowed customization. However the actual purpose comes right down to our restricted capability to create dashboards. Keep in mind, they have to be based mostly on an unique Garmin dashboard, and I have chosen the GarminMuscle dashboard as my template as a result of it has the longest code part. But cramming 7 fields into a single dashboard leads to a whole lot of code – and I spent awhile trimming out every thing that isn’t absolutely needed. Even so, it didn’t appear attainable to suit the extra code wanted for a customizable subject here. Scroll right down to the top of the XML code section of this dashboard. You’ll see there are only two strains of “filler” whereas our previous examples had a number of pages of filler.
We don’t want a BackgroundDisplay part for this area. Since there’s no action related to tapping the sector, we don’t need an image to point out when it’s depressed. The only strategy to create an easier DigitalComponent would have been to omit the TitleDisplay section.
Wrapping up the SevenFields dashboard
Properly, we’re virtually residence now and I solely have a couple of extra thoughts to share concerning the SevenFields dashboard. The remaining 4 fields are all identical to the customizable area we noticed within the TwoFields dashboard; these fields are simply “copy and paste jobs”. The one variations between them are the sector names and coordinates. Take a quick look by means of them and also you’ll see how they work. Totally different defaults are used for each, however as previously discussed, that’s virtually irrelevant for a customizable area. However you may need to observe how the Panorama and Portrait variations of the fields differ. As we’ve already seen, cramming 7 fields into the portrait view requires a unique strategy from panorama.
I’m not going into any detail concerning the pictures because there’s nothing new right here. There are two new “depressed” pictures to suit the smaller fields used in this dashboard. The one different new image is the plus signal that’s displayed for adding a velocity restrict. Open the dashboard in GIR_Editor, extract the pictures and you’ll perceive how they work.
Workouts – that is your remaining exam!
- Change the fashion of the dashboard to go well with your own colour sense. Change the title and knowledge colors. Use totally different day and night time colors. You possibly can truly display each subject in a special shade scheme if you’d like. Sadly, your options are a bit limited as a consequence of small quantity of “filler” and the restricted amount of code that may fit in this dashboard.
- To offer a bit extra suggestions when driving on a street that isn’t on the map, provide you with a scheme to display one thing reminiscent of “no speed data” within the area as an alternative of just a clean. You will want to make use of a couple of totally different non-transparent pictures to do this, as a result of we don’t need to see it if there’s a velocity restrict for the current street of if the plus sign is being displayed. Again, this could be arduous to implement as a result of we’re near the quantity of code we will cram into this dashboard.
- Adapt this primary design to a 5-field dashboard. That may scale back the dimensions and offer you extra room to play with extra complicated code – such as the earlier two recommended workouts. With 5 fields, might you match all the things onto a single line in portrait view? Attempt putting the Back and Menu buttons larger up on the display in portrait view to create extra room on the bottom.
- Superior workouts (for individuals smarter than me!): Work out how the names of the pictures are saved in the dashboard file in order that we will re-name them. Write a program to mix the XML code with the pictures so we will stop worrying about maintaining the identical file measurement and may create our personal dashboards from scratch. Hey…. I can dream, can’t I?…
Remaining thoughts about design and workflow
What’s the most effective strategy to designing your own dashboard? The place do you begin? This is finally a private determination, however I feel it helps to perform a little planning earlier than you write any code. The only strategy is to sketch and scribble your concept on a bit of paper, along with some easy arithmetic to calculate subject spacing and measurement. I’ve an entire pile of pages like that lying next to my keyboard. I additionally used a CAD program to work out my dashboard designs. This definitely isn’t crucial, but I already use the software for my “real” job and it was a simple option to move objects around and measure their sizes. You would do the same type of thing with Photoshop or Illustrator.
In case you’re going to incorporate the bins for your knowledge fields in the background picture (like the examples right here), then creating that picture in Photoshop could be the subsequent logical step within the process. Hopefully I’ve offered you with enough constructing blocks in this article to copy and paste the fields into your new dashboard. You possibly can then modify them as wanted to fit your design.
As already instructed, try to work in small steps and replica the file to the nuvi steadily for testing. It makes debugging a lot easier for those who haven’t made too many modifications because the last model. The primary essential milestone is getting a draft copy dashboard to “just work” with all the specified fields, even if it’s not fairly. At this point, take some screenshots of both portrait and panorama view on the Nuvi, then open them in Photoshop. Using the marquee selection software, you possibly can measure how much you should move each subject for it to line up with the background picture. Now go into Notepad++ and regulate the x, y, w and h parameters of the fields as needed.
Now it’s your turn…
I hope you’ve discovered a number of things and loved these tutorials. In case you make your personal dashboards, why not share them in our lengthy thread within the GPSReview Boards? That’s what first received me concerned with making dashboards, and later led me to purchase a Nuvi 3550.This thread can also be a superb place to ask questions and remedy dashboard problems.
Garmin has made it attainable for use to customize the Nuvi in ways in which by no means have been attainable earlier than, so have fun and benefit from it!