GPIO Test Application Part 5 – View

Previous: GPIO Test Application Part 4 – ViewModel

This post is part 5 of 6 of the GPIO Test Application. You can find the initial post here: GPIO Test Application part 1 – Overview.

The View presents the information on screen. It allows the user to interact with the system and offers an up to date view of what is happening on the GPIO. It is written in XAML and binds directly to the Model and ViewModel.

A lot of the screen code is about creating the layout of how the different controls are organized on screen. We will ignore the layout as much as possible to focus on the functionality.

View Model

As seen before, the view model is declared as a page resource and is instantiated as the DataContext of the top level layout container for the page:

<Page.Resources>
        
    <vm:MainPageVM x:Key="PageViewModel" />

<!-- ... -->
        
</Page.Resources>
<Grid DataContext="{StaticResource PageViewModel}" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

Logic Operation Selection

The list used for the selection of the Logic Operation by the user is quite simple. It looks like this:

LogicSelector

There is the code used to generate that view. Notice that I had to supply different templates to control the way the items are displayed.

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="40"/>
        <RowDefinition Height="100"/>
    </Grid.RowDefinitions>
    <TextBlock Grid.Row="0" Margin="5" Text="Logic Operation" HorizontalAlignment="Center" VerticalAlignment="Center" FontWeight="Bold"/>
    <ListBox Grid.Row="1" ItemsSource="{Binding LogicList}" SelectedItem="{Binding Logic, Mode=TwoWay}" Margin="5" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Grid.ColumnSpan="4" ItemTemplate="{StaticResource LogicItemTemplate}" ItemsPanel="{StaticResource LogicLayoutTemplate}" Background="{x:Null}" BorderBrush="{x:Null}" Foreground="Black" />
</Grid>

The connection between the View and the ViewModel for the Logic Selection consist only in 2 bindings:

  • ItemsSource to MainPageVM.LogicList
  • SelectedItem to the MainPageVM.Logic

Device Visual Interface

The visual interface for the device inputs and outputs looks like this:

DeviceInterface

It is composed of:

  • Two ellipses, red and green, that represents the red LED (not shown), and the green LED.
  • Two blue rectangles that represents the switches.

Notice the databinding on the Visibility points directly to the Model properties. A converter is used to convert the Boolean value to a UIElement.Visibility.

Here is the code used to generate the Device Interface portion of the screen:

<Grid Margin="5">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="100"/>
        <ColumnDefinition Width="100"/>
        <ColumnDefinition Width="100"/>
        <ColumnDefinition Width="100"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="40"/>
        <RowDefinition Height="100"/>
        <RowDefinition Height="40"/>
        <RowDefinition Height="40"/>
    </Grid.RowDefinitions>
    <TextBlock Grid.Row="0"  Grid.Column="1" Grid.ColumnSpan="4" Margin="5" Text="Device Interface" HorizontalAlignment="Center" VerticalAlignment="Center" FontWeight="Bold"/>

    <!--Following are the objects representing the different hardware components-->
    <!--Notice the Visibility property binds directly to the Model properties-->
    <Rectangle Grid.Row="1" Grid.Column="1" Margin="15" Fill="Blue" Visibility="{Binding Model.LeftSwitch, Converter={StaticResource VisibilityValueConverter}}" />
    <Ellipse Grid.Row="1" Grid.Column="2" Margin="15" Fill="Red" Visibility="{Binding Model.RedLED, Converter={StaticResource VisibilityValueConverter}}" />
    <Ellipse Grid.Row="1" Grid.Column="3" Margin="15" Fill="Lime" Visibility="{Binding Model.GreenLED, Converter={StaticResource VisibilityValueConverter}}" />
    <Rectangle Grid.Row="1" Grid.Column="4" Margin="15" Fill="Blue" Visibility="{Binding Model.RightSwitch, Converter={StaticResource VisibilityValueConverter}}" />

    <!--Labels associated with the hardware components-->
    <TextBlock Grid.Row="2" Grid.Column="1" Text="Left Switch" HorizontalAlignment="Center" VerticalAlignment="Center" />
    <TextBlock Grid.Row="2" Grid.Column="2" Text="Red LED" HorizontalAlignment="Center" VerticalAlignment="Center" />
    <TextBlock Grid.Row="2" Grid.Column="3" Text="Green LED" HorizontalAlignment="Center" VerticalAlignment="Center" />
    <TextBlock Grid.Row="2" Grid.Column="4" Text="Right Switch" HorizontalAlignment="Center" VerticalAlignment="Center" />

    <!--Hardware simulation switches. Only visible when GPIO is not available IE when not running on the Raspberry Pi-->
    <ToggleButton Grid.Row="3" Grid.Column="0" Grid.ColumnSpan="2" Content="Sim Left Switch" Visibility="{Binding ShowSimulatedSwitches, Converter={StaticResource VisibilityValueConverter}}" IsChecked="{Binding Model.LeftSwitch, Mode=TwoWay}" HorizontalAlignment="Center" Margin="5" />
    <ToggleButton Grid.Row="3" Grid.Column="4" Grid.ColumnSpan="2" Content="Sim Right Switch" Visibility="{Binding ShowSimulatedSwitches, Converter={StaticResource VisibilityValueConverter}}" IsChecked="{Binding Model.RightSwitch, Mode=TwoWay}" HorizontalAlignment="Center" Margin="5" />
    
</Grid>

Other

The application offers more information on screen that are utilitarian in nature. There are some instructions for the user, a description of the status of the GPIO and there is an event log portion the shows all the events that occur inside the application.

Conclusion

Through the MVVM pattern and with minimal effort, the user interface portion of your device can display your device status almost in real time.

I kept the UI on the application very simple. But you can also use the full power of WPF and XAML to make your application UI really stand out and build very aesthetically pleasing user interfaces.

Next: GPIO Test Application Part 6 – Result

  1. Leave a comment

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: