Creating an iOS Settings Bundle (Xamarin.iOS)

With the investigation I’ve been doing in building an iOS application using Xamarin, I’ve now gotten to the point where I wanted to put some settings into the iOS Setting app for my application. I found this nice thread that gave the 3 easy steps to set up a settings bundle.

It literally is as simple as written, but there were a couple gotchas that I ran into that I wanted to forward along.

  1. The Settings.bundle folder needs to be in the project root, NOT under the Resources folder (where some examples showed it). I’m not sure if this is a new change or not, but I spent some time banging my head against the wall over this one.
  2. If you do not register default values for your settings they’ll return the default for the data type. (ie. null for String, false for bool, etc….). The DefaultValue you specify in the Root.plist file for a setting is the default value the control will show, NOT the value of the setting. Below is an example of registering default values for settings.
  3. NSUserDefaults userDefaults = NSUserDefaults.StandardUserDefaults;
    NSMutableDictionary appDefaults = new NSMutableDictionary(); 
    appDefaults.SetValueForKey( NSObject.FromObject( true ), new NSString( "BooleanSettingKey" ) );
    userDefaults.RegisterDefaults( appDefaults );
    userDefaults.Synchronize();
    

Accessing the value for a setting is a simple as the following:

bool settingValue = NSUserDefaults.StandardUserDefaults.BoolForKey( "BooleanSettingKey");

One last thing that I found in an example solution here was how to listen in your app for when settings have been changed and wanted to pass it along:

NSObject observer = NSNotificationCenter.DefaultCenter.AddObserver( (NSString)"NSUserDefaultsDidChangeNotification", DefaultsChanged ); 
private void DefaultsChanged( NSNotification obj )
{ 	
// Handle the settings changed 
}

The biggest bummer I found in the iOS Settings Bundle is that everything is statically defined. So if you happen to have a collection of items that you want updated from a server, you’ll have to do this on your own inside your application.

Fluid Move Set Tag Behavior In a Master/Detail View

The FluidMoveSetTagBahvior is a helpful, but scarcely documented, feature that allows you to apply fluid movement between UI elements that share both a visual relationship as well as a data relationship. The most common example of this would be the Master/Details view where you have a list that displays all available items, and a view that displays the details of the selected item. By using the FluidMoveSetTagBehavior and FluidMoveBehavior in Expression Blend, we can make the selected item appear to “fly out” of the list and into the details view.

Here’s how…

In Expression Blend, search for FluidMove (not case sensitive) in the asset panel. Next, drill down into the ItemsTemplate of whatever control you’re using to display your Master list ( standard ListBox in my example). Now, you’ll need to drag that FluidMoveSetTagBehavior from the asset panel down to the UI element in the ItemsTemplate where you want the “fly out” animation to begin. It my example, I applied it to the root container (the StackPanel). Here’s how that looks in Blend…

Next, click the FluidMoveSetTagBehavior that you just dropped, and turn your attention to the Properties panel on the right. The key here is to set the Tag property to DataContext. What this does is register the DataContext object ( in my example, a Person object) to a hidden data store that our corresponding FluidMoveBehavior will use later to execute the animation.

Next, we’ll apply the FluidMoveBehavior to the Details view to enable the “fly out” animation. In the Objects and Timeline panel in Blend, select the UI element in your Details view that will be the end point of the animation. In my example, that’s the root StackPanel of my Details view. Drag the FluidMoveBehavior ( NOT the FluidMoveSetTagBehavior ) down to this UI Element. Here’s how that looks in my sample…

Once again, we need to select the FluidMoveBehavior we just added and go over to the Properties panel on the right. Set the InitialTag property to DataContext. Now, when the DataContext of this UI element changes, the FluidMoveBehavior will check the hidden data store for the last known location of this new DataContext object, which would be the last location of the original StackPanel where we set the FluidMoveSetTagBehavior. Now that we have the FluidMoveBehavior wired up, we need to connect the DataContext of the Details StackPanel to to SelectedItem of the Master ListBox. When the SelectedItem changes, the DataContext of the StackPanel also changes, and triggers the FluidMoveBehavior. If you’re using the MVVM pattern ( which my sample is), you’ll want to do the following….

On your Master ListBox, bind the SelectedItem to the corresponding property on your ViewModel, and set it as a Two-Way binding. Here’s how mine looks…

Now,  bind the target UI element in your Details view to that same property that you just bound the ListBox SelectedItem to.

and……voila!… Fluid Move Demo

People Watching, with SoftKinetic and Iisu

I recently spent some time working on project that utilizes SoftKinetic cameras through the Iisu SDK, more specifically the Iisu.net wrapper. For those of you who don’t know what SoftKinetic is, the cameras operate similar to Kinect. The cameras attempt to detect and track people who are in their field view. This allows me, the developer, to create applications that react to the user without the need of a tradition input devices (mouse, keyboard, etc.) This it typically done though known gestures, but does not have to be.

Getting Started

The first step in using the Iisu SDK, is getting a device that is Iisu compatible. For my most recent project, I was working with the Panasonic EKL3106 and the SoftKinetic DS311. The EKL3106, the DS311 and the Kinect are very similar in appearance, and actually very similar in function and what data they each can provide. When using the EKL3106 and DS311 in conjunction with the Iisu SDK, I was able to detect and track people, as well as recognize gestures. The Iisu SDK is available through the SoftKinetic website, and does require licensing.

Development Experience

Getting started with Iisu.net was time consuming, and a bit frustrating. Currently for Iisu.net, the documentation is very limited. The first lesson I had to learn was to not rely on the C# documentation; instead look at the C++ documentation, and learn how to translate that information to work for your purposes in the C#/.Net world. The C# documentation’s usefulness really was limited to getting a basic connection to the hardware, beyond that, the C++ documentation was all I could rely on. The process of starting Iisu.net and the camera relies on the use of case sensitive string literals. This makes the learning process of what can be done much more difficult. Enabling a feature of the camera, or subscribing to some data feed from the camera, required me to look in the documentation for the exact string to pass in. Although not difficult, just not as intuitive as I had hoped and required a bit of investigation. Once that was sorted out, the Iisu.net wrapper provides an easy interface to get data from the camera.

Usability

I feel the user as a controller technology still has a lot of room to improve. Too often the camera would report false positives and would track a person that was not there. This prevented the camera from detecting when there was an actual user in front of the camera. The opposite problem also occurs. The camera sometimes has difficultly detecting when a person is in front of it. In general, tracking people needs to get more reliable. The Iisu needs to be able to see at least from head to waist to detect a user, and is most accurate when place above head level looking down. That being said, once a user is detected, the tracking of various joints is pretty accurate, and often to an impressive degree. Another positive of the Iisu SDK, is the built in gesture recognition. The Iisu SDK has a concept of a controller built in. What this means, is that if a person is in front of the camera and performs a known gesture with their hand (wave or circle) a “controller” at the gesture location. This feature allows me to track the users hand, as a controller, pretty accurately. This method is the route I went in the my most recent project and works very well. It makes my life much easier to do simple hand tracking and gesture recognition.

I like the idea of touchless interaction and the “magical” feel it provides, but after using the technology, it needs to mature a bit in order to get more reliable. I am excited to see what the next generation of hardware will bring.

Telestr8: Introduction and Features

Introduction

Telestr8 is a desktop application that has a sole purpose of annotating images shared by Telestr8 Mate or any image shown in the desktop. At the end of every session, all images are stored in a folder in Picture Library (as .png) for future use.

As I mentioned on my previous blog post, Telestr8 works closely with Telestr8 Mate that it is important that Telestr8 is installed in one device and Telestr8 Mate is running on another device for them to communicate. From Telestr8 Mate, we can share images to Telestr8 and these shared images will be displayed in a panel on the top-right of Telestr8.

Card Panel where all shared and duplicated images are found

Feature: Desktop Mode

Telestr8_DesktopMode

Things you can do on desktop mode:

a) Toggle annotation mode on/off – This mode will allow you to annotate on any image you selected.
b) Duplicate your desktop image and add it to your card panel

  • This means you can take a screenshot of your desktop so you can annotate on it.
  • This will then be added to your card panel for future use.

c) View any connections (IP Address) your device is connected to.
d) Help menu – You will be able to read 3 pages worth of documentation on how to use the menu of Telestr8 (like this blog post, but more detailed).
e) Exit Telestr8

Feature: Annotation Mode

Telestr8_AnnotationMode


Once annotation is toggled on, a screenshot of your desktop will be added to the collection of images in your card panel.

Things you can do on Annotation Mode:

a) Select brush size and brush color for annotating.
b) Toggle erase on/off
c) Erase all annotations (strokes, etc.) on the image you are working on.
d) Create a copy of the image you are currently working on and automatically add it to the collection of images you have on your card panel.
e) View help menu
f) Done annotating! – Saves all the strokes or any changes made on that image replacing its original image.

Favorite Feature

  • While working on this application, I have 2 main features I can call my “favorite”:
    1) Being able to save on clipboard with an animation to show you did, and
    2) On Exit, the animation of showing all of the images stored in your card panel and one by one getting moved out of the view mode then at the end of the process, all of it are display in the photos library with all of the images saved as PNG files.
  • These features are accomplished by using Storyboard’s DoubleAnimation and also using Blend to do fluid layout. Both features have very challenging animations that once you get the hang of it, it becomes very easy to deal with.

Introducing Telestr8 Mate: Another way of sharing images!

Telestr8 Mate is a WinRT (Windows Runtime) Application designed primarily to share pictures from your Photos Application or any photos-sharing application you have.
Since Telestr8 Mate was also planned to be on Windows Store, there is a guide that comes along with the application. Also, when app is launched, there is a step-by-step instructions on how to go about using it.

Important!

Telestr8 Mate is the companion app of Telestr8 (a desktop application). Telestr8 will be discussed on a blog post following this, but it is important to know that in order for Telestr8 Mate to function properly, you will need to download and install Telestr8 App, as well.

Here are the features of Telestr8 Mate:

Settings

When app is launched, Telestr8 Mate provides a screen with instructions on how to connect to an IP Address where Telestr8 (A desktop application that I will discuss following this blog) is installed.

Telestr8 Mate: how to connect

Screen for connecting using Telestr8 Mate

Steps in connecting:

a) Find out what IP Address Telestr8 is connected to by running the program and clicking on the settings button (computer icon).
b) Go back to Telestr8 Mate, select the settings charm, go to service settings and put IP Address on the text box or select any discovered device that pops up below the validate button.
IP address
c) Validate!

Sharing

Once Telestr8 Mate changed screen to “YOU ARE CONNECTED”, congratulations you are now ready to share your images to Telestr8.

telestr8_mate_sharescreen

Instructions on how to share using telestr8 mate

Steps in sharing images using Telestr8 Mate

a) Find the image you want to share on your Photos Application.
b) Click on Share charm and select Telestr8 Mate.
c) Share!
d) You should be able to see the picture you shared on whatever device you installed Telestr8 in. The picture will appear at the top-right corner of Telestr8 app.

Lessons Learned

  • As a developer, being able to work with WinRT application is a big deal. I had the chance to struggle figuring out Application Lifecycle: OnSuspended, OnResuming, OnLaunched and just about how will my breakpoints on OnResuming event will be hit.
  • I learned how WinRT works by reading other’s blogs, thorough researching and just TRYING IT OUT MYSELF.
  • Lastly, just a shout-out that following this post is Telestr8 App, so keep reading!

C# to F#: My Initial Experience and Reflections

When someone tells you, “You’re doin’ it wrong!” There is often a feeling to push back and get defensive. I’ve learned this is a worthless response. So when I was told that formulas should be written in F# not C# I took it to heart and decided to give F# and functional programming a whirl. While the jury is still out on performance, only because I haven’t completely finished my test app, F# has proven to be WAY more readable as far as formulas are concerned, and load time compared to my C# counter example is AWESOME! In this article I will discuss some high level comparisons and my approach so far.

Motivation

Here at InterKnowlogy we pride our selves on our ability to solve problems in the best way possible for our customers while still preserving readable, reusable, and elegant code. One problem that has come up over the last few years has been how to handle formulas. For example, if I have an Excel workbook with multiple sheets each with a set of complex formulas how do we transpose that workbook into code? My former co-worker and friend Kevin Stumpf in collaboration with the IK team developed what we call PDFx or the Property Dependency Framework. PDFx is a great succinct way to allow properties to depend on on properties by leveraging the INotifyPropertyChanged interface and a LINQ esque API. This was revolutionary for us. Instead of needing a completely separate formula calculator we could build our formulas directly into objects. We could create class for each sheet in an Excel workbook and have a property for each cell. This solution is elegant and easy to maintain. Features our previous implementations were not. This also allowed us the amazing capability to validate our formula output directly to cells in Excel. We have increased in productivity and the code is more reliable because of these things.

So what’s the problem? Performance! It’s not a matter of how complex the formula is, C# is lightning fast at math as far as we are concerned. However, each property that depends on another or more requires a property registration full of lambdas. Lambdas are slow, although you wouldn’t know it unless you were trying to call them about 2 Million times. With depth and width of our object model is really the problem here. Sheer number of instances each with N properties causes load time to be slow. Once loaded PDFx is awesome! Formulas run very quick and we have few grips about performance after load, but load time when accessing properties 2 Million times and running lambdas during that time can take about a minute.

Is there a better way? MAYBE! F# is our next attempt.

Why F# and Functional?

Honestly I’ve only started diligently listening to DotNetRocks in the last month. Shame on me I know. BUT! I backtracked some sessions on F# and Functional Programming. BEST… IDEA… EVER!!! I started looking into the capabilities of F# and feel strongly that I needed to get smart on the topic. We’ve been trying to optimize PDFx for some time now and have a few more tricks up our selves, but that doesn’t mean that it’s THE right way to do formulas. It’s certainly a really good one, but best? To be determined. Functional programming seems like a very intuitive way to handle formulas. After listening to how easy it is to parallelize work in F# I was sold. Functional programming forces you to think differently. Everything is immutable by default in F# and therefore the old ways in C# of looping and creating are over. This help preserve the integrity of your formulas and data which sounds great. Plus, would be no need for property registrations or lambdas and therefore load time, in theory, would only be bottlenecked by instantiating C# objects from the database. The question is runtime performance, which is still to be determined.

Approach – C# vs. F# Formula Comparison App

Since PDFx is open source we wanted to find a way to show it off in all it’s glory. We created a sample formula model in Excel and implemented it in C# using PDFx. The effort to create the workbook took longer than the 2 days it took me to implement the software solution. With this example we have been able to recreate the performance conditions that one of our clients has. Which is really great news! Because this means it is the perfect sample to implement in F# to see if it is more performant than it’s C# cousin. So far F# has taken me a longer period of time to implement, but only because it’s a new language. In fact, I already feel confident that I would be WAY faster in F# than in C# when dealing with formulas like this sample. I’m really excited to see the final results and of course the sample app and Excel workbook will be released as proving points. So look forward to more on this subject.

One major difference about using F# vs. C# & PDfx is that PDFx allows the formula model and the UI model to be the same. In F# this is not true. You need separation between your formula model, which is really the formula inputs and functions, and the UI model. For F# the UI model in our sample app has two mechanisms: GetFormulaInputs(), and ApplyFormulaOutputs(). The F# formula model has 2 main calculations that are called easily from C# with the inputs provided by GetFormulaInputs(). The F# formula model spits out outputs which are then applied in C# via the ApplyFormulaOutputs() method. I’m very close to have this working, but wanted to get my initial thoughts out on the matter first.

Stay Tuned

I’ve been super impressed with F# so far and the community using it. I haven’t struggled too terribly yet, but getting into a functional thought process and thinking in F#, a totally new language to me, has been tough. I have high hopes for the possibilities. The F# Language Reference has become my new best friend!

Could not copy the file “obj\Debug\app.exe” because it was not found

I was in the middle of working on a project and I suddenly started getting the following error:

I tried a complete clean and rebuild. I even tried scorching my workspace but the error would not go away. I read that it might be a problem with Visual Studio extensions so I disabled all my extensions, but no luck.

I then started watching the obj\Debug folder as I did a build. Turns out that the .exe file was getting written, but then it would immediately be deleted before the build could finish. Then I found this:

It turns out that Avast anti-virus thought my program was suspicious and was quarantining it during the build process.  Adding an exclusion for my entire source tree solved this issue.

Next time, I’ll discuss how to solve the issue when installing this same application.

Working with UITableView (Xamarin.iOS)

After setting up my solution, my next step was to figure out how to display a list in iOS with the ability to select an item. In WPF, my first thought would be to utilize the ListBox control, bind its ItemsSource to the underlying data, and define an ItemTemplate for how I want each item to look. Not so simple in iOS. There’s a nice list control called the UITableView that provides support for a number of neat things (indexed list, splitting the items into sections/grouping them, selection, etc…). However, to accomplish the most important part, hooking it up to data, you have to define a data source object that you assign to the .Source property of the UITableView. There are a number of ways to accomplish this, but I went with creating a source that inherits from UITableViewSource. Xamarin has a nice guide that I used for guidance (Working with Tables and Cells).

Coming from WPF and MVVM I wanted to make this source reusable rather than following all the examples that were hardcoded to a specific object type. So I decided to create an ObjectTableSource, and since I’m still in the early stages of development I decided to make use of the built-in styles for the cell appearance rather than making a custom cell. With this in mind I needed to make sure that the objects provided to my table source had specific properties for me to utilize so I created an interface called ISupportTableSourceand used that as the .

public interface ISupportTableSource
{
	string Text { get; }
	string DetailText { get; }
	string ImageUri { get; }
}
public class ObjectTableSource : UITableViewSource

When inheriting from UITableViewSource you must override RowsInSection and GetCell. RowsInSection is exactly what it sounds like, you return how many items are in that section. My current version only supports 1 section so it returns the total number of items. GetCell returns the prepared UITableViewCell. The UITableView supports virtualization of its cell controls so in order to get the cell you need to call the DequeueReusableCellmethod on the table view. In versions earlier than iOS 6 this will return null if the cell hasn’t been created yet. In iOS 6 and later you can choose to register a cell type with the UITableView and that will make it so a cell is always returned. However, going this path means that you can’t specify which of the 4 build in styles to use (since it is specified in the constructor only), so I refrained from registering the cell type and handle null. When preparing the cell I also loaded any images on a background thread so the UI is still responsive, but I’ll cover that in another post.

public override int RowsInSection( UITableView tableview, int section )
{
	return _items.Count;
}

public override UITableViewCell GetCell( UITableView tableView, NSIndexPath indexPath )
{
	// if there are no cells to reuse, create a new one
	UITableViewCell cell = tableView.DequeueReusableCell( CellId )
			       ?? new UITableViewCell( _desiredCellStyle, CellId );

	ISupportTableSource item = _items[indexPath.Row];
	if ( !String.IsNullOrEmpty( item.Text ) )
	{
		cell.TextLabel.Text = item.Text;
	}
	if ( !String.IsNullOrEmpty( item.DetailText ) )
	{
		cell.DetailTextLabel.Text = item.DetailText;
	}
	if ( !String.IsNullOrEmpty( item.ImageUri ) )
	{
		cell.ImageView.ShowLoadingAnimation();
		LoadImageAsync( cell, item.ImageUri );
	}
	return cell;
}

The remaining thing for making this usable was to provide a way to notify when an item has been selected. There isn’t any event on the UITableViewSource like I expected, instead I needed to override the RowSelectedmethod and fire my own event providing the object found at the selected row.

public override void RowSelected( UITableView tableView, NSIndexPath indexPath )
{
	ISupportTableSource selectedItem = _items[indexPath.Row];

	// normal iOS behaviour is to remove the blue highlight
	tableView.DeselectRow( indexPath, true );

	OnItemSelected( selectedItem );
}

Beginning Xamarin and Xamarin.iOS

I’ve recently started delving into using Xamarin and Xamarin.iOS to get an understanding of its capabilities and see what I could do with it. After my first little app, I have to say it is really impressive what the people at Xamarin have done!

I’m coming at this from years of experience in C# and WPF/Silverlight/XAML and I wanted to describe my initial findings. For this post I plan to cover the general setup.

Installation

My goal was to have an iPad application that does something similar to a Master-Detail set of views where I could display a collection of images. Because of this I wanted to get a grasp on both Xamarin Studio and the Visual Studio integration so I installed Xamarin for Windows (on my primary dev machine) and Xamarin for OS X (on a Mac Mini we have at our office) from here. NOTE: On Windows 8 run the Xamarin installer as Administrator otherwise it will error out near the end. The installation took a while because it downloaded everything that I needed to develop for iOS (and for Android since I wanted to look into that in the future too.), but once everything was installed I was able to start developing instantly.

The installation guides for Xamarin.iOS, located here, provided excellent instruction for hooking up Visual Studio 2012 to remote debug on the Mac Mini (Section: 6.2. Connecting to the Mac Build Host), and the Xamarin services that were installed made it so that I found and connected to the Mac immediately. On another note, Synergy is an amazing tool to use to share your keyboard and mouse between the 2 devices. You need to make sure both machines are on the same network though in order for it to work (quickly at least).

Solution Setup

With Xamarin installed, I decided to get my feet wet by following Xamarin’s Hello, iPhone guide. (They’ve done a very nice job with their guides covering a nice range of topics.) For someone who has never developed in Xcode (and is pretty much a Mac beginner) this provided a nice tutorial of the tool.

With a general idea of how to get started, I created my solution in VS 2012 and on the Mac I used “Finder” to connect to my machine and open up the solution in Xamarin Studio. I’ve found that if I want to use Xcode’s Interface Builder to design my UI I need to add the iPad View Controller via Xamarin Studio, since adding it in Visual Studio didn’t create the .xib file.

My next step was to set up a core library, since I desire to try Xamarin’s Android functionality in the future, to enable code reuse. Xamarin is currently developing support for referencing Portable Class Libraries (PCLs), but until they’ve got that functioning we have to go more manual routes. I created the PCL to hold my core files (model objects primarily), but went the route of linking to all those files in the iOS project. Once I work on the Android counterpart I’ll be able to update with whether I think it’s the right way to go.

EDIT: With the release of Xamarin.iOS 7.0.1, they’ve apparently fixed the PCL build issue I was running into. So I was able to remove the links to all the files and reference the PCL library instead!

Debugging

It is extremely nice to be able to dev and debug in VS 2012 while connected to the iOS simulator on the Mac. When running into exceptions being thrown, I found that, if it wasn’t immediately apparent as to what the exception was caused by, debugging from Xamarin Studio on the Mac provides better exception information.

I’ll go into more detail on discoveries I ran into in other posts, but overall the development process using Xamarin and Xamarin.iOS has been very interesting and enjoyable. I would definitely recommend it.

DevLink – Crawl, Walk, Talk: Windows Phone 8 App Lifecycle and Speech API

Huge thanks to all who attended my session. It was a blast! I hope you found it helpful and informative. You may find my Presentation Deck, Code, and a recording of the session below. Feel free to ask me any questions or give me any feedback you’d like in the comments below.

Session Description

Many Windows Phone apps in the store are good, but they could be great if they understood the very basics of app Lifecycle management. App users should never know they left the app due to app behavior. We’ll discuss and learn how to effectively and efficiently suspend, tombstone, resume and restore Windows Phone apps. Then we’ll move on to teaching our apps how to respond to Voice Commands. Voice Commands are one of the most helpful features and yet one of the least leveraged features in the Windows Phone platform. We’ll learn where they can help and how they can streamline the user experience.

Material Links

Contact InterKnowlogy

If you’re interested in receiving our News Letter please email: curious@interknowlogy.com

If you’re interested in career opportunities please email your resume: findyourcalling@interknowlogy.com

If you’re interested in partnering with us please email: curious@interknowlogy.com