PhotoBooth

• Download source code - 562 KB

Introduction

This article describe some very basic techniques on how to create a photo kiosk (similar to the Kodak Picture Kiosk).

Architecture

PhotoBooth uses the default MainView/MainViewModel created by the MVVM Toolkit. Various "sub-views" then gets shown or hidden based on the properties on the MainViewModel!

The MainViewModel has a ObservableCollection of photos. This gets populated by the OBEX listener. We also keep track of the current selected photo (by using CollectionView)

view = (ListCollectionView)CollectionViewSource.GetDefaultView(Photos); 
view.CurrentChanged += delegate 
{ 
    SelectedPhoto = (string)view.CurrentItem; 
};

Marlon has a excellent article on this technique available here. Just remember the IsSynchronizedWithCurrentItem="True".

PhotoBooth has four sub-views:

WelcomeView

This is the "Oooo, look at me... I am so pretty" screen to get customers to use the kiosk!

PhotoBrowserView

PhotoBrowserView shows all the photos received by the kiosk. The view can also interact with the ViewModel using two commands:

• Clear - Removes all the photos
• Checkout - Starts the checkout procedure

This view is only visible if HasPhotos is true.

PhotoEditView

The PhotoEditView allows editing and sharing of photos (not implemented yet). Basic navigation commands are available on the ViewModel:

• NextPhoto
• PreviousPhoto
• UnselectPhoto

This view is only visible if IsPhotoSelected is true.

CheckoutView

Finally, the CheckoutView shows a basket-like view of all the photos you have uploaded; here, you can also select the size of the photo to be printed!

This view is only visible if BusyCheckingOut is true.

Bluetooth

• Bluetooth is an open wireless protocol for exchanging data over short distances from fixed and mobile devices.
• OBEX (OBject EXchange) is a communications protocol that facilitates the exchange of binary objects between devices.

Our PhotoBooth receives photos via Bluetooth (using the OBEX protocol). We will be using the 32 Feet library from In The Hand.

Tip: If you are developing using a 64-bit OS, also do the following (thank you big red):

Change Project > PhotoBooth Properties > Build > Platform Target: x86 (it defaults to Any CPU).

Here is the code to start the OBEX listener:

private ObexListener listener; 

private void StartObexListener() 
{ 
    radio = InTheHand.Net.Bluetooth.BluetoothRadio.PrimaryRadio; 
    
    if (radio != null) 
    { 
        radio.Mode = InTheHand.Net.Bluetooth.RadioMode.Discoverable; 
        
        listener = new ObexListener(ObexTransport.Bluetooth); 
        listener.Start(); 
        
        dispatcher = Dispatcher.CurrentDispatcher; 
        System.Threading.Thread t = new System.Threading.Thread(
           new System.Threading.ThreadStart(ObexRequestHandler)); 
        t.Start(); 
    } 
} 

private void ObexRequestHandler() 
{ 
    if (radio == null) 
        return; 

    while (listener.IsListening) 
    { 
        try 
        { 
            ObexListenerContext olc = listener.GetContext(); 
            ObexListenerRequest olr = olc.Request; 
            string filename = 
              System.Environment.GetFolderPath(System.Environment.SpecialFolder.Personal) + 
               "\\" + DateTime.Now.ToString("yyMMddHHmmss") + 
               " " + Uri.UnescapeDataString(olr.RawUrl.TrimStart(new char[] { '/' })); 
            olr.WriteFile(filename); 
            dispatcher.Invoke(new Action(delegate() 
            { 
                Photos.Add(filename); 
                OnPropertyChanged("HasPhotos"); 
            })); 
        } catch (Exception ex) 
        { 
            break; 
        } 
    } 
}

Two things to notice about this code: we force our Bluetooth radio to Discoverable mode, and we store a reference to the current Dispatcher. This allows us to Invoke back to the correct thread when we receive a photo on our background thread!

Read more here.

PhotoBooth also displays the current status of the Bluetooth radios using tooltips.

Here is the markup:

<Image Source="..\Resources\Images\bluetooth_blue.png">
    <Image.ToolTip> 
        <ToolTip> 
            <StackPanel> 
                <TextBlock Text="{Binding Radio.Name}" FontWeight="Bold"/> 
                <TextBlock Text="{Binding Radio.Manufacturer, StringFormat='Manufacturer: {0}'}" /> 
                <TextBlock Text="{Binding Radio.SoftwareManufacturer, StringFormat='Software: {0}'}" /> 
                <TextBlock Text="{Binding Radio.LocalAddress, StringFormat='Address: {0}'}" /> 
                <TextBlock Text="{Binding Radio.Mode, StringFormat='Mode: {0}'}" /> 
            </StackPanel> 
        </ToolTip> 
    </Image.ToolTip> 
</Image>

And if no radio is found?

Animations

Most kiosks have some very fancy animations to attract the attention of the customers. I unfortunately have no design skills! The only animation that I will be using is the AnimatedWrapPanel. This gives me very basic animation on each new photo received!

<ListBox> 
    <ListBox.ItemsPanel> 
        <ItemsPanelTemplate> 
            <layout:AnimatedWrapPanel /> 
        </ItemsPanelTemplate> 
    </ListBox.ItemsPanel> 
</ListBox>

Read more here.

Kiosk Tips

Most kiosks are a single application system; remember to make your application run full screen and remove the border chrome.

WindowState="Maximized" 
WindowStyle="None"

Kiosks usually uses touch screens. It is very common to then hide the cursor.

Cursor="None"

And, that's it...