July 2009 Entries

Drunktender lives! A brief live demo.

I used red and blue water to create purple water to demonstrate the functionality of the hardware and software.  Trust me, it has a wicked kick back.

Drunktender’s state: Functional and getting prettier

I’ve tested the software pretty heavily and I think it is feature complete.  I before I’m going to show off the code, I need to clean up my naming scheme on some stuff.  I changed my naming scheme for UI elements half way through so … yeah, oops.

Here is the current UI, the graphics came from both Ian Hall and Jeff Couturier from 10volt Media.  Jeff really helped me out and whipped up a sweet magnifying glass while Ian did the glasses for me.  Note the glass effect with the whiskey glass.  I got graphics for both in Photoshop and Illustrator and used the new built-in convertor in Expression Blend 3.0 to turn the PSD and AI files in to XAML files.  I’m super lucky to have some talented friends that can make stuff look good.

The three things I’m not happy with currently are the sign out button in the right, the pour button on the pour screen and the back buttons on the pour / search screen (more so on the pour screen.).

Tomorrow I’ll create some videos of the system actually working with RFID and UI in full effect.

Login screen (Use your card blurs in and out):

clip_image002

Signed in / Welcome:

clip_image004

Search Screen:

clip_image006

Pour Screen before you click pour:

clip_image008

While pouring, (pouring pulses in and out of blurriness):

clip_image010

WPF and making stuff pretty

I can thank my upbringing for demanding stuff looks good before anyone even sees it.  Appearance matters so how can one person make their application look good and have those styles and features be reusable?  First is to use Styles.  Styles much like CSS but are different.  With CSS in web pages, you can apply multiple styles to one element.  An example of this is

<div class="foo bar awesomer" style="width: 1.2em">Clint is awesomer</div>

With XAML, you can’t chain styles together but what you can do is create a hierarchy of styles.  Let me show you what I’m talking about in an example I used in my drunktender project.  This is a real world, working example.

<Style x:Key="leftSideStyleBase" TargetType="TextBlock">
	<Setter Property="FontWeight" Value="SemiBold" />
	<Setter Property="VerticalAlignment" Value="Center" />
	<Setter Property="Grid.Column" Value="0" />
	<Setter Property="TextWrapping" Value="Wrap" />
</Style>
<Style x:Key="pouringStyle" TargetType="TextBlock" BasedOn="{StaticResource leftSideStyleBase}">
	<Setter Property="FontSize" Value="35" />
	<Setter Property="Foreground" Value="#fff" />
</Style>
<Style x:Key="nonSelectedStyle" TargetType="TextBlock" BasedOn="{StaticResource leftSideStyleBase}">
	<Setter Property="FontSize" Value="25" />
	<Setter Property="FontWeight" Value="Bold" />
	<Setter Property="Margin" Value="10,0,0,0" />
	<Setter Property="Effect">
		<Setter.Value>
			<BlurEffect Radius="5" />
		</Setter.Value>
	</Setter>
</Style>
<Style x:Key="pouredStyle" TargetType="TextBlock" BasedOn="{StaticResource nonSelectedStyle}">
	<Setter Property="Foreground" Value="#B0ADFF" />
</Style>
<Style x:Key="notPouredStyle" TargetType="TextBlock" BasedOn="{StaticResource nonSelectedStyle}">
	<Setter Property="Foreground" Value="#969696" />
</Style>

You may not think that is amazing but I applied and set an effect through a style sheet!  I added an object to my XAML through just a Style sheet!

We’ve defined the styles, adding them is just as easy.

<TextBlock x:Name="pouring" Style="{DynamicResource pouringPulseStyle}">Pouring</TextBlock>

But Clint, what if we want to dynamically change them at run-time in code behind?  You can do something like this:

// style is in App.Xaml, ala Global Resource
myControl.Style = Application.Current.Resources["myStyle"] as Style;

// style is in a control, ala Local Resource
myControl.Style = Resources["myStyle"] as Style;

UI testing

I’ve been doing a decent amount of UI tweaking.  This is what I came up with.  Pour screen is a work in progress but the others I think are pretty near finalized.  The main screen is missing the top two in the video since the test account I’m using lacks an order history.

Possible Pour Screen

A quick UI run though on Drunktender