How to select a mobile prototyping tool

This week I needed to find the best prototyping tool to build a series of user testable interfaces on an iPhone. I have built several prototypes using Balsamiq but it was always in the context of trying to gather feedback from product owners on workflow thru the app design. It is a great tool as they supply templates for just about any user interface know to man on their Mockups To Go site. I like using this tool to capture my vision and to explore several alternatives. Using the Balsamiq templates, I can quickly see if the design will actually work. I also use the prototypes to test user scenarios so I know they work at least for me. If I cannot get thru the work flow navigating thru the app then there is no need to test actual users on the interface. Another side benefit of this type of prototype is to get general acceptance from the product owner. Whether it is used to get additional funding or to demo to potential customers as a sales aid, when working with entrepreneurs I find these visual prototypes are invaluable. The product owner is paying for a product and a prototype can definitely help them visualize what they are spending their hard earned money on. Of course there is nothing better than actual end user testing, but their time is precious also and should not be wasted with half baked prototypes that cannot pass a smoke test.

The best thing about Balsamiq is that it has two modes for creating an output clickable PDF. It can look either like a hand drawn sketch or a wireframe. Another nice feature is when exporting a PDF the output can be optimized for viewing (which is great for discussion of annotations recorded in document) or by shrinking the output to fit a page (which is ideal for printing the PDF to make hard written notes while in a conference room). The last feature that I find really useful is that the link hints are optional. For user testing you never want them to appear, but when in initial discussions they are really helpful for the product owner to see the intended user flow thru the app.

Since I was already familiar with Balsamiq, I started building a two page prototype by using Words with Friends app. It was an app I use all of the time and it has some interesting uses of standard iOS controls as well as some custom components. My intent was to see how long it would take to build the two screens including all of the visual treatments and the interactions between the two screens. I also need to use the standard iOS 7 look-n-feel. This is very easy for Balsamiq as the iOS 7 templates already exist at their site. The biggest unknown for me at the start was how the clickable PDF would work on my iPhone. The end result has to be a workable prototype that actual users can use so it cannot just look good it has to be interactive and useable.

1) Added iOS 7 controls inside iPhone device using Balsamiq template

2) Removed device template

3) Duplicated first page
4) Shifted content to right
5) Added settings screen
6) Added clickable links on vertical bars icon

 My first attempt at getting the clickable PDF on my iPhone was to email it to myself. When I opened the PDF on my iPhone, it was not the best user experience as the PDF was embedded in the email app  decoration and the links did not work. I tried both Yahoo! and Gmail and neither one of them were acceptable. I have both Dropbox and Goggle Drive, which worked by using the equivalent of a preview app on the iPhone. My next attempt was using an app called File Browser as it integrates with iTunes. When I connect my iPhone to my Mac, I can then drag the clickable PDFs to the File Browser app and that works as well. I needed to find a better way as I did not want to depend on DropBox, Google Drive or having the physical device attached to my computer.

After an hour of research I found an app called Documents by Readdle. It was a great find as it supports all kinds of network storage alternatives and I have absolute confidence that any iPhone used for testing will have access to one of these methods. The list is quite impressive: iCloud, Dropbox, WebDAV Server, Windows SMB, Google Drive, FTP Server, SFTP Server, SugarSync, Box, Office 365 Sharepoint, SkyDrive and CloudMe. Even better the app has settings on how to view a PDF by using the built-in iOS Viewer or the Readdle PDF Expert. This is the best find of the week as it is also free!

After getting that to work, it was time to switch to something completely different by using a tool I had not previously considered. I found a great list of prototyping tools written in July, 2013 and posted on Alan Cooper's web site. I am not a big fan of subscription services, mostly because I don't do prototyping full time. I am also not a proponent of becoming an expert in a single tool as that tool may become obsolete by the time I conquer it or a better one may come out and then switching will not be that easy. I spent time evaluating two tools. The first is called AppCooker but it has a big draw back as it only runs on an iPad. There is a similar tool called Blueprint. Both of these tools come with free app viewers with examples to try them out. It turns out they both did the standard iOS Clock app so that made it easy to compare them on the user interaction side. I was not impressed with either one enough to buy them on my iPad. For starters, why would I want to build a prototype on an iPad for an iPhone? Time to find another tool.

One tool that kept popping up in searches and blog posts was called Antetype, so I thought it would be good to study it. They have nine training videos on their web site so I watched them all to get a feeling for whether I would like to use it. It has many great features and I am sure you could build any prototype known to man using it, but with great flexibility comes great complexity. They also had a community and an impressive gallery on their site. I would be willing to invest time in this tool if it was my full time job, but since it is not I need to find something else.

One of my favorite speakers and writers is Luke Wroblewski, so I searched his site to see if he had any suggestions. Lo and behold, he suggested Keynote. Several years ago I used PowerPoint to quickly put together a linkable presentation but it was just so simple that I never considered using it again. It turns out that a company called Keynotopia has created templates for Keynote to do the same thing as I had done with Balsamiq. Besides having a great web site, there list of templates or themes as they call them is very impressive. Before buying the Keynote Bundle I tried build a couple of simple pages in Keynote with custom transitions. I typically don't like such things in a presentation as I find them distracting, but to simulate iOS page transitions, it seems like a perfect alternative. TI quickly found the best thing about using the Keynotopia templates as all of the iOS 7 components are vector drawings! The following screenshots show how close these are to the Balsamiq screens. It took about the same amount of time but that is good news as I have never used Keynote in this way before so I can had a learn how to best to set links and use the templates. The first tricky part was adding a clickable link that works on the iPhone. The best way I found was to add a transparent region around the vertical lines icon; otherwise, even with the lines being grouped together, the tapping on the iPhone did not work properly. I also found that using the Push transition was perfect to simulate the switch from one of these screens to the other. When on the first screen the transition was left-to-right and when on the second screen the transition was from right-to-left. Wow did that work perfectly and look great at the same time.

first screen using Keynotopia

second screen using Keynotopia

Since I am surrounded at work with great developers, I thought a third option would be to let one of them build the same thing using Apple's Xcode. All of the data would be static so I wanted to see how much storyboards could be used with the absolute minimum amount of Objective-C code. At the start I thought it would be nice to use only storyboards, but we soon discovered that in this case that was impossible. The biggest amount of effort was spent on getting the page transitions working correctly and also getting the second screen appear with the first screen partially exposed. This behavior used in many iPhone and iPad apps is not built into iOS controls and so must be manually created. I also did not want to bring in any other external libraries to help us. It was really an exercise in creating the very same interface and discovering which one would be the best way to deliver prototypes. The only real drawback to the native iOS app is that we would have to use a tool like TestFlight to deploy the app outside the Apple store for user testing. The best thing of all about the using Xcode to build the prototype is that scrolling to see the rest of the contents in the first screen just works as expected, but in the Balsamiq and Keynote prototypes, this behavior would have to be implemented as separate pages. It can be done, but is more painful and time consuming.

first screen using Xcode

second screen using Xcode

As in everything I do, there are tradeoffs to be considered. I definitely prefer Keynotopia to Balsamiq as the iOS 7 templates are exhaustive and look just like a real app. I like how easy it is to create transitions in Keynote that look just like using a real app. I definitely like using the Readdle app as I don't need to deal with locating the device ID to enter into TestFlight as is used to deliver the Xcode app. Some of the things that the developer did to get this to work were just not reasonable for me to know and remember since I don't do iOS development, so that is definitely a drawback. For now I am going to se Keynotopia if I have to build a prototype by myself and if I have a developer helping me then Xcode wins hands down.

From concept to reality in 6 weeks - final meeting prep

In preparing for the final iteration meeting with the customer, I took a few screenshots and created a Keynote presentation. Pretty simple stuff, just time consuming to make sure I have everything covered. At the client site I do not have an internet connection so I want to make sure I have it all covered.

On Friday, I saw a problem in trying to create the app as an installable package as I never received the email confirmation code. I found that odd since it has been working all along. The only thing I can think of is that somehow my license expired. I paid for the developer license so I have no real logical explanation. I need to have an installable image ready to go before the meeting either stored on my machine or on a thumb drive to give to the customer.

I search Ms. Google to find out why my two-step confirmation code never arrives. I found a Microsoft document explaining how to set this up as I definitely could not remember doing that. I went to Safari and logged into my live.com account. I went thru the steps to enable the two-step verification under my live account. I clicked on the icon in the upper hand corner for the Outlook web app. Then I clicked on "Security info" on the left hand side. I added my phone number as I need a fallback when my email does not work. I also added a second email account. The only odd thing about the process was installing an authenticator app on my iPhone. After doing that I had to scan the QR code on the screen to validate my iPhone. Once I had all of that setup, then when I tried to create a new package in Visual Studio, I opened the Authenticator app on my iPhone and entered the blue number on the screen. Now I should be all set from now on.

One final odd problem for the day as it is coming to a close. I cleaned and re-built the app and everything runs correctly, but when I build the Windows Store image it fails with 16 errors and those are all methods I renamed over the last two weeks. It must be stored in a file somewhere that I need to regenerate. Time to use Ms. Google again as I have not encountered these errors before. After much searching and searching and searching, I finally found the answer deeply embedded in a StackOverflow post. The only  way to fix the problem was to delete the "obj" folder and then rebuild the project solution. That is obviously to get around a VisualStudio bug as that does not make sense why VSE would cache such things when building release packages. I am just so glad I found the problem finally.

I finished the release build, made a ZIP file and now I am ready to go.

From concept to reality in 6 weeks - RECAP

This is a summary of what was done each day from start to finish, which included the second phase of the project:

Day 1 - buy a Windows 8.1 laptop with touch interface
Day 2 - get Windows Phone development environment working on Windows 8.1 Pro environment
Day 3 - learn about BingMaps and VisualStudio Express
Day 4 - learn how to load data from server using BackgroundTransfer
Day 5 - learn about Metro UI using XAML + 3rd party component libraries
Day 6 - read Windows Store app UX guidelines + using single Application Bar + first iteration meeting with client
Day 6.5 - create Microsoft developer account + learn how to submit app to Windows Store
Day 7 - custom application icons & fonts + UI layouts + create 1st deployable package to give to customer
Day 8 - learn about Windows 8 Application Lifecycle + how to use dialogs
Day 9 - retrieve live data from server and process as JSON and then display on BingMap
Day 9.5 - load free Perpetuum Windows Store controls
Day 11 - ask for more developer help to build custom controls + learn how to debug exceptions
Day 12 - parse all live data as JSON and display on BingMap as push pins
Day 13 - use Telerik DualRangeSlider + formatting numbers + learn LINQ
Day 14 - learn C# interfaces + create custom font using IcoMoon.io + learn how to create custom images dynamically in code
Day 15 - switch to BA3 mapping engine + learn how to do string manipulation in C#
Day 16 - generate dynamic markers with ImageMagick
Day 17 - check each image anchor point + explore how to install app outside Windows Store
Day 18 - figure out how to use and debug asynchronous methods + deploy outside Windows Store + how to read/write files locally on device
Day 19 - more success with LINQ + debug geographic issues with GPS coordinates
Day 20 - learn about notifications and bindings + how to use custom app colors
Day 21 - learn more details about strings + rewrite all of server download code to use HttpClient
Day 22 - deal with 500 error codes from server + change app so it works without internet connection by loading local files instead of loading data from server + centering map in geographic center of USA with extents to show some of Alaska
Day 23 - app stops working at most inopportune time
Day 24 - all 4 map layers working correctly + important customer iteration meeting + whole app in good working condition
Day 25 - use Telerik Date/Time controls + StackPanel compared to Grid layout + theming Telerik controls
Day 26 - list of all Metro controls + VisualStudio app reports + timing app usage using StopWatch class
Day 27 - prepare for final iteration meeting + create test data to validate all 4 layers on map

This was the start of Phase 2, since I ran out of the allotted money allowed for the initial project, I had to get customer approval before resuming on the left that remained that was not essential for the CES conference:

Day 28 - resolve some of related issues to uses of Telerik RangeSlider for filtering
Day 29 - property change notifications + pointer events
Day 30 - use Windows Store app Settings + saving Settings as local data
Day 31 - localizing date/time output + button FlyOut menus
Day 32 - live update at periodic intervals + mathematical formulas related to GPS coordinates
Day 33 - missing BA3 mapping functions + create temporary work arounds until BA3 can deliver updates
Day 34 - Windows Store app SearchBox + popup placement + working with collections to remove and find whether element already exists + more geographic mathematical formulas
Day 35 - major typo found in bearing calculations + BA3 mapping engine update
Day 36 - merge two collections + email issues + reboot to install patches
Day 37 - retry logic for server failures + ListView for search results

From concept to reality in 6 weeks - part 37

In many ways today is a sad day is it is the last day I have to work on the Windows Store app. To start the day off in the correct musical mood I am going to listen to "North Mississippi Allstars". Next week I am going to write a couple of summary blog entries to recap all of the things I learned from a couple of views.

For now I just need to wrap up and test as many of the features as I can. The beauty of working on my laptop is that it is not a simulator or emulator as the machine is also a touch device that is the target of this app. I don't expect to try any new C# stuff today but you never know...

The very first thing I encountered was numerous 500 and 502 server errors. I have ignored these long enough as I need to add some retry logic as they always seem to work when I try them in Safari on my Mac. When in the debugger I see an odd HResult code but that is not going to help me as I tried to look that up in the Microsoft error codes and it was not a match. The real ticket was looking up the HttpResponseCodes as that is very easy to retrieve. I set a a maximum number of times to retry so I never get into an infinite look when the server is not working at all or the internet connection fails. When that happens I make sure the progress dialog is closed and a MessageDialog is shown so the user sees the actual error message. That is my first error I have shown in the this app so I feel pretty good about that.

I have been testing the live updates for a while and found several issues that have to be fixed. When part of the data is filtered and new data arrives then the data is not stored correctly. That was pretty easy to fix. I was a bit worried at first as it seemed like a major problem.

Then I switched to changing the way search worked as it was only partially implemented. I need to match the iPad functionality but at the same time make it look better and act better. It is kind of late to do this but I am confident that it can be done. The first thing I want to do it make the search popup on the right hand side of the app (kind of like the Settings). It turns out that is way harder than it should be. I first tried to change the placement location as documented. When that did not work I tried looking for other answers but some were so complicated that it just did not seem like the right thing to do. In the end the solution was to set the HorizontalAlignment to be on the right side, but that pushed the whole popup off the screen. Then I set the HorizontalOffset to be the negative of the popup width and bingo all was resolved.

After trying a couple of different things using multiple StackedPanel and then a Grid to display the custom search results, I tried wrapping them both in a ScrollView but that was not a good idea. It was a good guess but totally the wrong thing to do. I abandoned everything I have done so far and looked up the GridView or ListView to learn about how they are different and which would be better for me. I decided ListView was better so I was off to explore a brand new part of a Windows Store app on my final day - sounds dangerous but it was just what I needed or so it seems. Thankfully the ListView quick start guide was perfect and I was up and running quickly. I created a new model class to hold the search results to be displayed in the ListView, which was a small subset of the observations data model. Perfectly simple and made perfect sense. As a first pass I just added a ToString method in my new model class and the data displayed correctly the first time! I guess I am getting the hang of this now.

I need to make it look stylish so I need to find the style template names. ListView has been around so that was too easy as they are all documented. I read up on the ListView guidelines to make sure I was not doing something odd. The only tricky thing was I needed to apply the style programmatically, which is not something I even know how to do. A quick search on the MSDN blog and solution was found and worked the first time. Then I switched as it seemed like my code was getting too complicated. I found an explanation of styling using a ListView.ItemTemplate. That is amazing how easy that is in XAML, so I deleted all of my C# code related to ListViewItems.

Now that my search results look beautiful, I need to figure out how to allow multiple selection, since the scrolling automatically works with the ListView as I don't have to deal with that nastiness. The only tricky part was figuring out how to deal with multiple selections in the SelectionChange handler.  The ListView has a SelectedItems property which is a collection of IList

I had time to look a one last filter bug and squished that with some effort. I have been neglecting that one for a long time. That leaves one final bug that will just have to sit there so a while as I have run out of time and money to work on this project so I have to make one final tag in the GitHub repo and then make one final release build to give to the customer next week in my last visit.

Happy ending to a Friday!

From concept to reality in 6 weeks - part 36

This was not the way today was supposed to start out. I have had issues with my Mac Mail app and when I tried to send email this morning, I keep seeing the emails pile up in my Outbox. That was not supposed to be doing that for sure. I have two email accounts that I use that are tied to my HostMonster domains. After a struggle, I decided to delete the two internet accounts and just start over. I first went into HostMonster and changed the email passwords just to be safe that it was not password issues. I added both email accounts back in and they still did not work. I then went back into my HostMonster account and decided to look more closely at the settings and I had added the non-SSL accounts so once again I deleted both accounts and added them back in as SSL accounts. Then after Mail.app crashing multiple times, which I assume were due to the email account changes, I finally have my email back up and running and the emails sitting in my Outbox were all Sent. Hopefully this is not a sign for my day.

And I am going to try to restart the day by listening to "Of Monsters and Men" on Spotify since it was very nice listening to their songs while watching "The secret life of Walter Mitty" the other day. That should put me in the right frame of mind to get my tasks done early today - or at least I can hope.

My first new thing to learn about today was now to merge two list collections into a single collection. And what came to my rescue but LINQ yet again. It is THE most useful part of C# that I have encountered so far. If I think about collections in Java, ActionScript, Ruby, and Objective-C, then LINQ is definitely number one as it makes writing code so much more readable and just makes sense to me with very little training or reading documentation.

I keep forgetting that I am using a Windows machine. Today my Windows laptop was acting really strange so I remembered that I need to reboot it occasionally. I have only reboot a hand full of times in the months since I got the machine, which sounds really good, except for the fact when I rebooted today I had several updates that were waiting for a reboot to install. Last week when I reboot I have some SONY VAIO specific patches to install and since that day I have not had the problems with my display where the touch sensors stopped working after a while. I just get in the zone after using my Mac for so long that I forget about things like that. When I logged back into my laptop this time I saw a notification that I had a new Adobe Reader available also. All kinds of updates are happening - must be the full moon day coming up tonight.

Today was pretty much testing day as I wanted to make sure the live updates were working and when new data arrives every thing still works as expected. This requires loading the initial data and then waiting for the minimum live update time for updates to arrive and do stuff while the update is happening.

From concept to reality in 6 weeks - part 35

The project is definitely winding down now as the end is definitely in sight. I am so immersed in this project that I think of things at night in my sleep to fix the next day and the shocking thing is that they are good ideas and have been helping.

The first thing I need to do is verify that the very same data loaded from the server on the original Java app matching the iPad app which matches the Windows Store app. The first thing that got my attention was the heading I was using on the Windows Store app seemed off. I kept looking at the app running on my iPad mini and compared it to my Windows Store app and just could not figure it out. Finally I looked at the mathematics one more time and found the problem. The font used in VSE hid the fact that a zero (0) and eight (8) look very similar. For an angle I had 100 instead of 180 which will make a big difference. I finally had all of the data loading correctly and matching so that was a major accomplishment for today. These changes also will make one of the final tasks much easier to finish. But there is more that needs to be done...

Today's task was to finish what has been bothering me for 5 days now. I got a new mapping engine build and that fixed several of my problems. I looked at the documentation and found a much better way to simulate a flight path and so finally I am done with the task that has been bothering me way to long. What made it even better was that the code was about half the number of lines and so much easier to read. Mission complete.

The end of the day has come and I have a new page for all aviation formulas that I would ever need to know or care about, even though I was told by the mapping engine lead developer that some of them are incorrect and he has 100,000 pilots that back up his argument. Let's see who shall I believe? That is not hard at all as I pick the mapping engine developer every time as he has been wonderful in every way!

From concept to reality in 6 weeks - part 34

This week means it is time to start ramping down on this project for this current phase. I have a bunch of small tasks that would be nice to have completed, but they are going to have to be delayed to the end of this phase when I am sure I have more time left. The number one priority now is to complete the last 4 tasks that have to be down and leave all of the others to the end.

I tried a couple of things this morning that did not go so well. I thought I would try to change one of the styles in the SearchBox but since this is a new component I found little information on the style classes so had to refer to an article outside the standard MSDN network. I wanted to style the selected text in the SearchBox so it was not the default bright purple color. It is a pretty minor issue, so after trying a couple of different properties I gave up.

Then I thought it would be nice to place the search popup on the right hand side and that was not possible in the XAML as it required code behind window size calculations (after referring to the Popup Placement documentation), to I made an executive decision to leave it on the top left where all of the other popup dialogs are placed in this app.

The only simple success so far this morning was figuring out how to remove elements from a List Collection. One of the lists of data I am getting from the server contains data but it is not relevant for the other data I am getting from the server, so I need to trim the non-relevent data from the collection. A really bad idea is to loop thru the collection and call Remove as that messes up the next element retrieved. I waded thru one of the MSDN blogs and found the easiest solution to understand was to loop thru all of the collection finding the bad elements and then in a separate loop remove those elements. There is probably a more elegant way but it works and I only call this method once on a small set of data so it is good enough for me.

While on a success roll, I decided I wanted to change the SeachBox queries to not match at the start but anywhere in the string. I just switched "StartsWith" to IndexOf and that was pretty much done. Before leaving the search one last time I re-read the Quick Start guide on adding a search and using a SearchBox is much more flexible than the SearchPane so that was definitely the correct decision. Time to move on...

I contacted the mapping engine lead developer to discuss a couple of missing API's late last week so I am still waiting on them. This morning I sent him one more problem as I am able to crash the Windows Store app every time when I use the Settings service. Hopefully that will be resolved this week also before I wrap up the project.

Now I get to resume working on my geographic mathematics skills by reviewing the code at the bottom of the same page I was look at last week as I need to finish the task I have been working on and off for the last 4 working days.

This is a helpful site to help me figure out the distance in nautical miles between two points to check my calculations. Then I need to do some more Date arithmetic since the server always returns dates in UTC format and I have to always show them in local time. Just before I started on that I noticed that each of my threads exit with a code of 250 (0x103), so I looked that up to make sure nothing evil was happening. The documentation said that it was "ERROR_NO_MORE_ITEMS" so that is perfectly fine since those are my server requests ending.

I had another detour as I needed to send the system dump to the mapping engineer lead developer so he can be working on the crash. I can duplicate it easily so when the app crashes, I just went to the DEBUG menu and clicked on "Save Dump As..." at bottom of the menu. The only problem was that the resulting dump file was 262 MB. The compressed size was 79 MB so both are way too large for sending it by email. They have an FTP site set up so I transferred the file from my Windows laptop using my new $9.95 8 GB thumb drive to my Mac and then used a secure copy command using the port he gave me and the username/password combination.

Back to UTC problems. If you search for "utc time" using Ms. Google then she shows the current time in UTC time. This helps me debug my UTC server issues. As I expected there is a -5 hour time difference between where I am and Greenwich, England. All I had to do to fix all of my UTC problems was always pass a UTC time to get data from the server but when displaying the date/time information, I just do the following:

DateTimeFormatter formatter = new DateTimeFormatter(Preferences.DateTimeFormat);

string startDate = formatter.Format(data.First().Add(DateTimeOffset.Now.Offset));

This is not the normal way of using the Windows Store DateTimeOffset class as it supports ways to convert time from a UTC time to local time as long as the Kind property is set correctly, but in my case that is not set so I have to do special processing. As typically happens the above code looks so simple but that took me a while to reduce what I was doing to that simple level. The first thing I did was use the Subtract method instead of the Add method and what is amusing about that is that I was debugging this problem around noon and so the numbers looked very close but were off by two hours or so it seemed. It was actually off by by 5 hours in the wrong direction.

From concept to reality in 6 weeks - part 33

I am resuming where I left off yesterday with writing C# code using the Objective-C code as a reference - within a couple of hours I should be done and then I have the rest of the day to test and validate every thing is working correctly. I have a couple of missing mapping engine APIs so that may be a challenge but I will get it as close as possible. I contacted the mapping engine lead developer and sent him an email of the missing APIs. He said he would add them for me in the next couple of weeks so I will be patient in that regard and trust him since he is totally trustworthy and is a great developer. I am happy I got to know him better during this project.

My first attempt was a pretty big failure as the mapping engine displayed a spinning globe looking down from the north pole. At least I can learn something from this. I looked that up and the north pole means a location of 90° N so somehow my location is messed up. I got into the debugger and check the location value I was setting and it was way off, so much so I am do not even want to mention what the lat/long values are. OK, for the sake of confession I will say the value was (770+, 4337+) - I am pretty sure there is no planet where those values are correct. Now I get to track down what I did wrong. At least the heading value was correct at 255°, so at least something is correct. I think the best plan of action is to go line by line and recheck what I did and maybe I will find some problems. As I was creating the C# code yesterday I was wondering about the order of the points so maybe that is different from the iPad app, but that is not my immediate problem. There is no utility I can use so I just need to take some time and compare the files. I have Xcode up on my Mac and VSE on Windows and need to slowly look at the 330 lines of Objective-C code and compare it with the 291 of C# code.

The above two paragraphs describe what I was able to do in 3 hours of work time. Not that great, as I had so many distractions yesterday and fixing this task requires complete concentration. Today is yet another new day and it is pretty quiet around work so just the environment I need for this task. I have a late day meeting so yesterday and today will count for a full day's work so I am reusing this post.

Comparing the Objective-C to C# line by line did not immediately uncover any problems until I saw the line that I was using as a work around since the version of the mapping engine that I am using is missing a method I need. The version I borrowed from http://www.movable-type.co.uk/scripts/latlong.html required a closer look and then I found the major bug that was causing most of my problems. I was passing the latitude and longitude in degrees instead of radians, so that obviously is going to be bad news when calling trig functions! I moved all of the trig functions to a separate class so I don't have to remember such things ever again. Then as I inspected location values in the debugger I noticed NaN being returned, so that is pretty evil. In the approximation function I was using I was getting the evil NaN when I passed in the same location twice. That was easy to fix as I went back to original and that problem was fixed as quick as you can say "Not a Number".

Again I did not get to finish the feature I was working on but at last I fixe most of the problems and now it is working partially so it will have to wait for next week.

From concept to reality in 6 weeks - part 32

For the first time I need to really study the iPad app code to see how this one feature was implemented as it is specific to the mapping engine and I really need to do the very same thing in the Windows Store app. It is not really that difficult a feature but unlike other parts of the app, this one should be able to be duplicated by rewriting the code in C# by looking at the Objective-C code. Again when you compare the languages, they are just nothing alike. I am just going to read the Objective-C code a couple of times to understand what was done and then create the same idea in C#. My estimate is that I should be able to finish this completely in one day.

Before I got started I had to review some changes that came in last night and send feedback on them to make sure I understand the code and that the UI works correctly. It sure is nice to have someone else helping me with an isolated part of the app as creating a custom component is definitely extremely time consuming.

The toughest part of this feature is figuring out how to use a Timer in a Windows Store app in C#. Thankfully again MSDN comes to the rescue with an example. Again the hardest problem is finding where Microsoft moved the class for Windows Store app. I see numerous code examples that refer to System.Windows.Threading but that is not available in a Windows Store app, so that has been moved to Windows.UI.Xaml since this class is used in the foreground UI threads. The example had the correct code by I had to figure out the using statement that matched the timer class. I should have just copied them all into my example, but I read documentation on my Mac and then edit the code on my Windows laptop obviously. I still have not learned how to use the help within VSE to allow me to look this kind of stuff on while in the IDE. Maybe some other day for that one.

Just when I was cruising alone I got one of those crazy compiler errors that just make you wonder what in the world is going on. I have gotten so used to not seeing these kinds of errors that I forgot about them. My problem is I want to handle when a tick fires in the DispatcherTimer which is easy to define a handler but then the method signature is so different from all of the other even handlers I have used. After struggling with the code not compiling by passing in EventArgs as the second argument I looked at the documentation and found this handler requires and "object" type as the second argument. Then I had to set up another Stopwatch class so I can monitor the elapsed time to simulate movement on the map so that meant I also had to look up how to figure out the number of elapsed seconds using the returned TimeSpan class.

I just ran into a road block as I need some methods in the mapping engine that I have not used before. Since I have no documentation, I need to figure out what was available in the DLL's that I added to my project. After searching around using Ms. Google and not finding anything I gave up and opened the "References" section within VSE and double clicked on the DLL and what should appear but the Object Browser window that I could open each DLL and inspect symbols for classes and methods in my DLL's - now that is nice. Even I am allowed to search for anything in any DDLL included in my project references. But the real problem is that the functions I need do not exist, so that means I have to talk to the mapping engine lead developer or find a way around this by looking up the math myself as an estimate. So on looking around I found this absolutely wonderful site that describes mathematical formulas for everything GPS related. Once again I had to remind myself how to do a modulus in C# since Math.Mod does not exist and I am supposed to use the "%" operator instead. Maybe one day I will remember that when I no longer need to!

It is so interesting how you learn new things all the time when using a new VSE. I added a comment in the code to link to that article on the web and I saw the underline in the source code. When I hovered over the link, VSE said CTRL+click to follow the link and when I did that it opened that article in a tab within VSE. That is nice if I ever need to see that article again and so I don't need to copy-n-paste that into IE.

Another big lesson of the day is getting a range within an existing List collection which is very easy as it already supported in the millions of methods in that template class. Tons of code written today but it is going to have to wait for tomorrow to see if it is all working...

From concept to reality in 6 weeks - part 31

Today I need to go back and clean up the way I did the Settings as I need to move everything into it's own Preferences class so all of those settings are in one place. Then I can move onto my favorite topic of internationalization (I18N) and localization (L10N) for date/time settings. I am using a single set of default whenever I display any date/time to the user but I need to use the standard Windows Store globalization strings instead and then as the locale changes on the device it will just work perfectly so I don't need a special Setting for the time zone and date/time format. I am pretty excited about that but first I need to quickly clean up the Settings to prepare for that changes.

It took longer to completely test the change that it took to add the new class and move the code into it. So as I was reading about the ToggleSwitch yesterday there were a couple of things I wanted to try as I took the defaults for the first pass. The first thing I want to try is to customize the on/off labels and then I can use the header label and get rid of my labels. That really cleaned up my code and now I can move onto my favorite task of date/time localization.

The quick start guide is the place to start yet again as there is one called Global-Ready Formats. The place I have to start is the Remarks within the DateTimeFormatter class as it lists all of the allowed string values. The best thing about the Remarks documentation is that it also shows examples of how to use the strings. That is the best class documentation I have seen so far as it is just what I need to get my job done. The only tricky part is that the JSON data coming from the server has Date/Time information and so I need to have that format fixed to match the data and it is in a standard form of "MM/dd/yyyy HH:mm:ss", so I kept that in place but all of the other date/time output needs to be localized. For that case I had to hard code the CultureInfo to be "en-US" as documented in the IFormatProvider class, which I found by looking at the ParseExtract method which I was already using.

Then it was just a matter of switching my code from using "DateTime.ToString(format)" to call "Windows.Globalization.DateTimeFormatting.DateTimeFormatter("shortdate longtime").Format(DateTime)" - piece of cake as that was right out of the DateTimeFormatter documentation under the Examples section. Now that is all done, it is time to completely switch gears and look into a new UI component.

That means it is time to look at the List of Windows Store controls again. I think I like the Menu Flyout so I am going to use that one and see how I like the look and interaction. My other alternative is to use a ComboBox. I need a menu to be associated with a button for a couple of choices so one of those is going to work. I am pretty happy with the Button Menu Flyout so that is what I am going with. The UI is complete so now I just need to hook that up, which should be very easy because I have my friend LINQ to help me.

Just when I thought this was going to be easy, I find out that C# is not going to help me with a deep copy of the data so I have to do it myself. At least I found a StackOverflow article that helped me do this. I also get to learn about the alternate LINQ method or lambda syntax as presented in that article as this one makes more sense to me that the syntax I have been using - but just in this case as I like the SQL like syntax in all of the other cases so far. I then went back to review all of the other LINQ statements I created to make sure they were valid and I noticed that my distinct count statements were wrong and needed to be rewritten using the lambda syntax which made a lot more sense for those cases. I used this StackOverflow article to help me.

So far yesterday was a big feature completed and today was another so I am definitely going to complete this list of new features in the allotted time and budget as if that was ever in doubt. It turns out that it is in doubt with every estimate as there are always unforeseen things that come up. I also need extra time to verify everything is absolutely correct and the data presented matches what is shown in the original Java app for the same time period.

One more small task before the day ends to create a play and stop button. I want to use the standard Segoe UI Symbol font so all I needed to know what how to set the font on the button and then the actual symbol, which resulted in the following:

                         

                           

From concept to reality in 6 weeks - part 30

After a weekend break, which was not a real break since I continued to work on filtering issues for half a day on Saturday, it is now the day to complete the two remaining filter bugs. I wish I could have been done with these issues but this is such an important part of the app that I want to make sure it is all working perfectly. The last two problems as visual and relate to the location of the tick marks and labels on the Telerik RangeSliders customized for the Windows Store app. After continued struggles this weekend, I am beginning to think that maybe I am trying to force the control to do something it was no intended to do. From my experience I have done this same thing with other controls in the past so I know the request is not totally unusual. I may just have to get the tick marks and labels close enough as the working filters are the most important part and that is all working as it should be. I am going to leave that alone for today and move on.

So the big task for day is working with Windows Store app settings. So the first place to start is the generic Windows Store guidelines of Settings. Once that was read then I found probably the best quick start guide so far on how to use the new Windows 8.1 Settings service. I had to look up the ToogleSwitch class as I had not used that before and it is highly customizable. I had to look up how to set the default switch value as the IsOn property was a bit odd for me as I just assumed it I needed a slight refresher on how to define get/set accessors since the break away from C# must have caused some memory loss. I also needed to look up the best way to compare strings as well. This is kind of getting depressing that I did not remember those two things. The hardest part was figuring out how to know when the Settings flyout was closed. There is a BackClick which was easy to handle in the SettingsFlyout class.

Then in testing I found out that you can use Escape key while the Settings is up so I need to handle that case. I searched for a solution and found a sample app that did just this which really proved helpful as that just was not obvious at all. In a way it makes sense that to know when the Escape key was pressed that a global listener was needed but defining it on "Window.Current.CoreWindow" was not my first guess, second guess or ay guess for that matter. The sample app should how to have multiple pages of settings that depend on each other, which I did not need, but learning how to handle key events was a new lesson. It also required learning about Virtual Keys to check for the specific Escape key in the handler.

I then found an odd issue when the Escape was used on the keyboard and the Settings flyout went away I had a nice white outline around by AppBarToggleButton. Naturally I tried the obvious thing to do, which was remove the focus. My intuition let me down as that immediately caused an exception and when I looked up the Focus State documentation that was in the first line that doing so would cause an exception. As a work around I set focus to the main window and that fixed my problem from a keyboard stand point.

The next issue to figure out is how to know when my toggle switches have been changed in the Settings flyout. It is time again to use Data Bindings so I go back to that quick start guide. This requires a single INotifyPropertyChange interface by adding a PropertyChangedEventHandler and a very simple PropertyChangedEventArgs with the name of the property that was changed. That was not a big deal as I had dealt with those before.

The last problem was figuring out how to save my Settings once I had the flyout working correctly. That took a bit of searching but yet another great quick start article helped me understand how to solve that problem by using Windows.Storage.ApplicationData.Current.LocalSettings. After a short break in Windows Store app coding, it makes the documentation seem even better as I have had two new things I needed to do and I found the documentation to solve both quickly.

I am pretty happy that it only took me one short day to add custom preferences for my Windows Store app.

From concept to reality in 6 weeks - part 29

I will have to work on the filter changes again today as I was not able to finish them all yesterday. The big problem I encountered yesterday was that I switched the Telerik RangeSlider from "PointerReleased" to "PointerMoved". Doesn't sound like a big deal as it actually does what I want but I receive tons of extra events when the pointer in fact has not moved so now my #1 priority to figure out why and prevent that bad behavior.

Turns out that the event arguments I get in this callback is a standard Windows event called PointerRoutedEventArgs. So the real issue is that the pointer did in fact move by the slider thumb value did not changed. Time to read up on Telerik events and see if there is a custom event where I can get this information. I found absolutely no information on Telerik custom events so that must mean they always use the standard Microsoft Windows Store events. Time to read up on the pointers quick start guide as I am hoping to find a gem in there to help me get over the hump. That was interesting reading but did not help me as I am getting every pointer change, so I have to recognize within my code when the RangeSlider thumb has changed. That is pretty sad as I should be able to use the built in INotifyPropertyChange interface but if the RangeSlider does not implement it then listening to property changes for selection start and end will do me no good. In protest I went into my Telerik account to contact customer support and then realized the cheap license we got to save money did not come with support after the initial 30 days, so much for that. I am moving on as I have a solution not an elegant one I was hoping for.

There is nothing like taking time to test thoroughly all of the options. The last two days I have been testing all of the filtering from every imaginable angle. This is something I did not get a chance to do when in hurry up get everything working quickly mode. I must admit it feels really good to know with confidence that the filtering code is working exactly as it should be. It would not have been possible without the fixed TestData that I created previously with all know values. That was time well worth spent.

From concept to reality in 6 weeks - part 28

It is time to resume working on some of the features that I did not have time to complete for the conference that are needed in the final product. The last time I looked at this code it was 12 days ago so I need to try to remember where I was. Thankfully I recorded all of the outstanding issues in Kanbanery so I just need to resume where I left off. I worked on a couple of other projects in the meantime so I have to settle back into this Windows Store stuff as it requires a paradigm shift.

To start off the day, I picked a couple of the simple tasks so I can warm up to working in VSE and the Windows environment. It is funny how quickly your brain reverts to comfortable things like Command-C/Command-V on my Mac versus Ctrl-C/Ctrl-V on Windows. For my first issue I had to bring up Xcode and look at the Objective-C iOS implementation so that is a crazy way to start the day by then switching to VSE and C#. I survived the simple tasks so now onto the hard ones I ignored because of time pressures...

I decided to tackle all of the Telerik slider related bugs today as those seem to be the most important parts as that is where the Windows Store app deviates the most from the iPad app. Everything I ever wanted to know is in the Telerik RangeSlider documentation as the problems I am seeing are all related to configuration issues and not issues in the Telerik control itself, mostly related to snapping and tick mark locations. I did not actually write any of that code as I farmed that out to someone else when I got in a time crunch so now it is time to learn how it was built using reusable components and style resources. This is going to be a good lesson to learn as I skipped that part of building a Windows Store app.