Terracotta project – the best user experience ever

Wow!  This is the best user experience I’ve ever had.

The documentation is clean, crisp and to the point. The installation went smooth and, after the installation, I was asked if I’d like to run some demo application. Without leaving the installation program (post-install) I was able to run pre-built samples that demonstrated the beauty of the product and made me feel safe and sound that the installed product is operational.

Good job, guys!  I wish other product would’ve followed your track with the user experience.

Useful Links

Terracotta project home – http://www.terracotta.org/

Terracotta tutorials – http://www.terracotta.org/confluence/display/explore/Home

Hello, Arduino world! Here I come.

After a very very very long wait, followed the Boarduino USB kit order, I’ve finally received the package. And, without loosing any more time, decided to give it a test spin.

The assembling experience was a breeze. Within 15 minutes I was running my very first Arduino “Hello, World!” program. And you can too …

This is how you can do it (I guess that you know how to solder):

Step 1

1. Don’t forget to order a kit. There are a couple of different Arduino kit distributors as well as a bunch of Arduino clones. I’ve ordered a Boarduino USB kit from Adafruit Industries.
2. Wait patiently for the kit to arrive.
3. Prepare some essential tools:
   1. Solder iron, solder and (optionally) flux
   2. Angle cutters
   3. Small pliers
   4. It’ll help you if you’ll have a 3-rd hand.

Step 2

1. Unpack everything carefully – there are a lot of small parts.
2. Verify that all the parts in the kit are present. 

   

Step 3

1. Start with putting the capacitors C1 and C3
2. Green LED (D1). Make sure that you use a correct polarity (long leg is a ‘+’, the short leg and a shaved side is a ‘-‘) 

   

3. Resistors R2 (1K), R3 (1K). To make the resistors fit nicely in the holes – use small pliers to bend the leads.

    

4. Solder everything and clip the extra legs

   

Step 4

1. Use angle cutters to cut a 2-pin header of the long header strip. Be careful not to burn your fingers holding it in place while soldering it. You can use a drop of a glue to hold it in place or hold it with a tweezers while soldering.

   

2. Add the electrolytic capacitor C2. Make sure that you using a correct polarity – align the ‘+’ sign on the cap with the ‘+’ sign on the board.

   

Step 5

1. Now you can plug in the Boarduino using a plain USB A-B cable.
2. Check that the green LED is turned ON – this tells you that your board is now powered up by the USB

   

3. Tap yourself on the back, smile and get back to work …

Step 6

1. Add a Red LED (D2)
2. 16 MHz Resonator
3. Capacitor C2
4. Resistors R1 (10K) and R4 (1K)

   

5. Don’t forget to clip all the extra legs after the soldering is done

   

Step 7

1. Now we’re going to add some extra hardware
2. Add a reset button
3. Add a 3-pair header
4. Add a chip socket. To ease the pain putting it through the hole – use a solid table surface to bend the pins inward. Make sure to follow the diagram on the board to correctly orient the notch on the socket.

   

Step 8 – breathtaking

1. Now hold your breath and insert the chip. Match the notch on the chip with the notch on the socket. To make the insertion easy – use a solid table surface to bend the chip’s legs. 
2. Go to FTDI site and download the latest drivers. More detailed you can find in Arduino Tutorial Lesson 0.
3. Plug in the USB cable and:
   1. See that the Green LED is turned on
   2. Note that the Red LED begins blinking. This tells you that the bootloader on the chip does it’s job

      

4. On your computer go to Device Manager:
   
   1. Start –> Control Panel –> System
   2. Select Hardware tab
   3. Press “Device Manager” button and you’ll see the following window:

      

5. Under the Ports section look for extra “USB Serial Port” item – this is your Boarduino.
6. Note the COM port number – you’ll need it later
7. If everything is OK – hold your breath for the next step where we’re going to have a real fun.

Step 9 – awestricken

1. Go to the official Arduino site and download the development software.
2. Install it and run the development environment
3. Configure the Boarduino:
   1. Tools –> Board leave the setting as “Arduino Decimila”
   2. Tools –> Serial port select the port that you’ve noted in the Device Manager in the previous step.
4. Open a Blink sketch:
   1. From the File menu select: “Sketch Book” –> Examples –> Digital –> Blink
   2. Note that you have a piece of code in the editor
5. Compile the code: Sketch –> Verify/Compile (there should not be any errors)
6. Upload the code to the board: File –> “Upload to I/O Board” (if everything is OK – there should not be any problems either)
7. If you’ve followed all the steps to the point – you should see the Red LED blinking after a very short period of time.
8. Breathe in and breathe out – go grab a cold beer! You’ve earned it.

Step 10 – optional

1. If you want to use your Boarduino on bread boards you need to solder the rest of the headers.
2. Use your angle cutters to cut the header pieces to the required length
3. Use your breadboard to align them in the correct configuration:

   

4. Place Boarduino on the headers.

   

5. Solder them one by one. Make sure you don’t heat the leads too much – it may melt the breadboard. Try to solder the headers randomly and one on each side – it will minimize the chance of melting your breadboard.

   

6. Now you’re really DONE. Be very careful when you’ll be pulling the Boarduino from the breadboard – you can bend the legs. Try to pull it out by slightly rocking and preserving it parallel position to the breadboards as close as possible.

   

Extra Links

1. Official Arduino site and Arduino Development software – http://www.arduino.cc/en/Main/Software
2. Boarduino site and USB Boarduino Schematics – http://ladyada.net/make/boarduino/download.html
3. Arduino tutorial – http://www.ladyada.net/learn/arduino/index.html
4. Getting started with Arduino – http://www.arduino.cc/en/Guide/HomePage
5. FTDI Chip drivers – http://www.ftdichip.com/FTDrivers.htm

WPF Skin Factory – or how to skin your application

Here are a couple of very simple steps to follow to make your WPF application skin-friendly.

1. Create an empty WPF Windows Application (or use or old one)
2. Create a Skins folder and a subfolder for each separate skin (you’ll need it later if your skins become more complex)
3. Add a Resource dictionary (Add –> New Item –> Resource Dictionary) into each skin folder.
1. In this example we’ll create a Black skin with BlackResources.xaml and
2. Green skin with GreenResources.xaml
4. In the App.xaml add the following code in the <Application.Resources> section:

   <ResourceDictionary>

       <ResourceDictionary.MergedDictionaries>

           <!-- Use the Black skin by default -->

           <ResourceDictionary Source="Skins\Black\BlackResources.xaml"/>

       </ResourceDictionary.MergedDictionaries>

   </ResourceDictionary>

5. Let’s start (for simplicity) with skinning of the main window background only.
6. In each skin resource dictionary create a Brush resource:
   

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

    <!-- The Background Brush is used as the background for the Main Window -->

    <LinearGradientBrush x:Key="MainBackgroundBrush" EndPoint="0.5,1" StartPoint="0.5,0">

        <GradientStop Color="#FF2C952C" Offset="0"/>

        <GradientStop Color="#FFFFFFFF" Offset="1"/>

    </LinearGradientBrush>

</ResourceDictionary>

7. In the window’s XAML bind the window’s background brush to the skin dynamic resource by it’s name (note that we have to use DynamicResource, since we’re planning to change it while the application is still running to let the customers to change the skin):

<Window x:Class="SkinFactory.Window1"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    Title="Window1" Height="300" Width="300"

    Background="{DynamicResource MainBackgroundBrush}">

    <Grid>

        <Button Width="100" Height="100" Content="Toggle Skin" />

    </Grid>

</Window>

8. Let’s wire the “Toggle Skin” button with the functionality that will toggle between these two (Black and Green) skins:

   1: private void ToggleSkin_Click(object sender, RoutedEventArgs e)

   2: {

   3:     var rd = new ResourceDictionary();

   4:  

   5:     string uriSkin;

   6:     if (_bIsBlackSkin)

   7:     {

   8:         uriSkin = @"Skins\Green\GreenResources.xaml";

   9:     }

  10:     else

  11:     {

  12:         uriSkin = @"Skins\Black\BlackResources.xaml";

  13:     }

  14:     _bIsBlackSkin = !_bIsBlackSkin;

  15:  

  16:     rd.MergedDictionaries.Add(Application.LoadComponent(new Uri(uriSkin, UriKind.Relative)) as ResourceDictionary);

  17:     Application.Current.Resources = rd;

  18: }

9. Note: try to avoid hardcoding the resource dictionary path in the code. You can replace it either with a configuration file or with a simple file discovery.
   
10. You have to make sure that the resource files will be located in the output folder. To do so you need:
1. On the resource file properties set Build Action to Content
2. Set the “Copy to Output directory” to “Copy if newer”
   
11. Start the application.

You can take the sample source code here:

If you’ll toggle the button you’ll see the window background colors are changing.