Seven Segment Display

I am an engineer, I probably always was, and probably always will be. I remember that during my engineering degree course we were being lectured in microprocessors during where we learned about binary and BCD. To hammer this home we had some labs where we were interfacing microprocessors to 7-segment display elements to count in decimal, binary and BCD. Then, just recently, I was introduced to the work of Mark Coleran where in one of the designs was from the film Fred Claus Here, lo and behold, was the 7-segment display being put to good design use. So, I thought, how could I achieve such a design using just Expression Studio? How could I also realise the mimicry of this electronic element without resorting to using C# or VS2010?

So the challenge was now set, the tools defined – all it needed was the time. So how did I approach this task? Well, as follows:

  1. I defined the scope of the project
  2. I appraised the example given by Mark here.
  3. I then isolated the two shapes involved and the effects Mark had used such as segment on blur (an actual phenomenon due to the eye’s perception of intensity) and inactive segment colouring.
  4. Expression Design was then used to define the two basic shapes and their inactive colouring.
  5. Once this mock-up was completed the elements were copied to Expression Blend after which the dynamic functionality was defined.

The final application is shown below:

Expression Design

Okay I am not an expert in Expression Design but two geometric shapes were not beyond my means. The points worth mentioning here are: 45 degrees must be used for the angled edges and that the middle segment can be made out of two of the other segment combined.

Combined for the mock-up is as follows:

A segment which is “on” (with attached blurring)

Just a small note here: Blend does not support all of the effects that are available in Design so be careful when enhancing the mock-up that you are not disappointed with the end result in Blend.

Expression Blend

Most of the Blend static design can be taken directly from the Design mock-up. However the following points are worth mentioning:

  1. I added the blurring in Blend not taking it from Design as I selected each segment in turn and copied the XAML directly out of Design.
  2. So that the blur effect can be shown in the final application a blur effect with no radius was added to each segment hence the need of defining a blur in the storyboard was eliminated.

I added check boxes with a custom font and size that matched the look and feel of the 7-segment display. After adding the segments, the test checkboxes, and all the storyboards Blend looks as follows:

The code for one of the storyboards (segment displaying the digit 3)

    <Storyboard x:Key="DigitThreeOn">
        <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Stroke).(SolidColorBrush.Color)" Storyboard.TargetName="TopLeftSegment">
            <EasingColorKeyFrame KeyTime="0:0:0.1" Value="#FF6E0000"/>
        </ColorAnimationUsingKeyFrames>
        <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)" Storyboard.TargetName="TopLeftSegment">
            <EasingColorKeyFrame KeyTime="0:0:0.1" Value="#FF6E0000"/>
        </ColorAnimationUsingKeyFrames>
        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Effect).(BlurEffect.Radius)" Storyboard.TargetName="TopLeftSegment">
            <EasingDoubleKeyFrame KeyTime="0:0:0.1" Value="1"/>
        </DoubleAnimationUsingKeyFrames>
        <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Stroke).(SolidColorBrush.Color)" Storyboard.TargetName="TopSegment">
            <EasingColorKeyFrame KeyTime="0:0:0.1" Value="Red"/>
        </ColorAnimationUsingKeyFrames>
        <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)" Storyboard.TargetName="TopSegment">
            <EasingColorKeyFrame KeyTime="0:0:0.1" Value="Red"/>
        </ColorAnimationUsingKeyFrames>
        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Effect).(BlurEffect.Radius)" Storyboard.TargetName="TopSegment">
            <EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="5"/>
            <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="21"/>
        </DoubleAnimationUsingKeyFrames>
        <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Stroke).(SolidColorBrush.Color)" Storyboard.TargetName="TopRightSegment">
            <EasingColorKeyFrame KeyTime="0:0:0.1" Value="Red"/>
        </ColorAnimationUsingKeyFrames>
        <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)" Storyboard.TargetName="TopRightSegment">
            <EasingColorKeyFrame KeyTime="0:0:0.1" Value="Red"/>
        </ColorAnimationUsingKeyFrames>
        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Effect).(BlurEffect.Radius)" Storyboard.TargetName="TopRightSegment">
            <EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="5"/>
            <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="21"/>
        </DoubleAnimationUsingKeyFrames>
        <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Stroke).(SolidColorBrush.Color)" Storyboard.TargetName="MiddleSegment">
            <EasingColorKeyFrame KeyTime="0:0:0.1" Value="Red"/>
        </ColorAnimationUsingKeyFrames>
        <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)" Storyboard.TargetName="MiddleSegment">
            <EasingColorKeyFrame KeyTime="0:0:0.1" Value="Red"/>
        </ColorAnimationUsingKeyFrames>
        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Effect).(BlurEffect.Radius)" Storyboard.TargetName="MiddleSegment">
            <EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="5"/>
            <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="21"/>
        </DoubleAnimationUsingKeyFrames>
        <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Stroke).(SolidColorBrush.Color)" Storyboard.TargetName="BottomRightSegment">
            <EasingColorKeyFrame KeyTime="0:0:0.1" Value="Red"/>
        </ColorAnimationUsingKeyFrames>
        <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)" Storyboard.TargetName="BottomRightSegment">
            <EasingColorKeyFrame KeyTime="0:0:0.1" Value="Red"/>
        </ColorAnimationUsingKeyFrames>
        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Effect).(BlurEffect.Radius)" Storyboard.TargetName="BottomRightSegment">
            <EasingDoubleKeyFrame KeyTime="0:0:0.1" Value="5"/>
            <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="21"/>
        </DoubleAnimationUsingKeyFrames>
        <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Stroke).(SolidColorBrush.Color)" Storyboard.TargetName="BottomLeftSegment">
            <EasingColorKeyFrame KeyTime="0:0:0.1" Value="#FF6E0000"/>
        </ColorAnimationUsingKeyFrames>
        <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)" Storyboard.TargetName="BottomLeftSegment">
            <EasingColorKeyFrame KeyTime="0:0:0.1" Value="#FF6E0000"/>
        </ColorAnimationUsingKeyFrames>
        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Effect).(BlurEffect.Radius)" Storyboard.TargetName="BottomLeftSegment">
            <EasingDoubleKeyFrame KeyTime="0:0:0.1" Value="1"/>
        </DoubleAnimationUsingKeyFrames>
        <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Stroke).(SolidColorBrush.Color)" Storyboard.TargetName="BottomSegment">
            <EasingColorKeyFrame KeyTime="0:0:0.1" Value="Red"/>
        </ColorAnimationUsingKeyFrames>
        <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)" Storyboard.TargetName="BottomSegment">
            <EasingColorKeyFrame KeyTime="0:0:0.1" Value="Red"/>
        </ColorAnimationUsingKeyFrames>
        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Effect).(BlurEffect.Radius)" Storyboard.TargetName="BottomSegment">
            <EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="5"/>
            <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="21"/>
        </DoubleAnimationUsingKeyFrames>
    </Storyboard>

The final result:

So I managed to complete the project without having to write a single line of C# code.

That’s all folks…

Advertisements

~ by Intelligence4 on March 18, 2011.

 
%d bloggers like this: