Bicycle Computer #5 – UI continued – Custom Controls

This is the fifth in a series of articles demonstrating how someone with modest .NET programming capabilities can now write applications for embedded devices using the .NET Micro Framework and Visual Studio. To jump to the initial article, click here. I am still working on getting this project posted out to CodePlex or somehow made available to you in total. I know I said that before but I am waiting on input from another group inside Microsoft. Remember, you can help determine what we cover in the series with your questions and suggestions. What do you want to see covered? Programmers are often very particular and opinionated – what do you think should have been done differently. This is a great place to share your experiences. The series is getting lots of readers but relatively few comments.

I started to think about the settings view – the UI where the user sets up the application. Right now, I can only think of two settings that I need: the units and the size of the wheel. Both of these only needs to be set once and likely rarely changed. I could use a drop down but looking at the number of tire sizes, that would be too unwieldly. What I have decided to do is to create my own control using software buttons. I don’t recommend this as good UI practice but it will make a good demonstration case for building rich UI on these small devices.

What I would actually recommend is that if you need to do something that is not supported in the base product that the first place you look is at Jens Kühner’s Rich Media Extensions Component Suite for NTEMF. You can find it at: http://www.innobedded.com. Jens has put together an impressive set of useful extensions. I would use them if the point wasn’t to demonstrate how you use the product.

UpDownArrowButton

For setting the tire size, the user is selecting from a long list. For setting the display units (Metric or English) you are selecting from a much shorter list but we can use the same control for both. I will create a list selection control that displays the current selection with an up and down arrow to change the selection. The selections are contained in a SettingsTable object which always has a label. The TireSize SettingsTable adds a circumference property. (I didn’t just compute this because it gets complicated with different style rims having different circumferences at the point that the tire sits as well as different size tires so the easiest thing is to compute that once and put it in the table. For example, the 700A and the 700B tires are both listed as 28x1-3/8 but the circumference of the rim where the tire sits (the ‘bead’) is 2016 mm on one and 1955 mm on the other. Besides, this gives us a good example of polymorphism. )

Settings can be table driven so that they can have an arbitrary and easily changed set of contents. The behavior is that they behave as a circular list so the you can reach all elements by going either up of down.