The spare time is few, but step by step the target is getting closer.
It’s a been I’ve started playing around the FTDI FT800 Eve board, and it must admit it is awesome. If you need a quick solution to add a small touch display to your *duino board, the Eve is something you should consider.
You know, I love Netduino and C#. That’s because I chose to play with the display using Netduino (Plus 2), and honestly I’d expected a pretty bad performance. Instead, the graphic engine of the Eve can be easily driven via SPI from any board. That is, the SPI on Netduino is fast, very fast.
My goal is creating a small library for helping many users to create small and funny home/hobby projects with the Netduino and the Eve display boards. Since I love the classic WPF, how could I avoid to inspire from them?
Micro WPF
If you know WPF, many concepts would come easier. Otherwise, I recommend to take a look to the documentation, tutorials and whatever you want. Even if you don’t harm with a PC, rather with the Windows Store/Phone APIs, the approach here isn’t too far from.
The “WPF” term for a simple Netduino is clearly abused. Here is just the visual approach, the XAML-like approach to create the UI, and -yes- the same ability to create your own controls: MeasureOverride and ArrangeOverride.
That’s not all.
If you have any visual application in mind with Netduino+Eve (e.g. a climate control, IoT client, etc), then probably you’d need some kind of navigation service across several pages. That’s the most modern UI experience, on every device: PC, tablets, and phones.
I still don’t write what the library will offer, because it’s just something made for fun: for helping hobbists and even students working with a UI on a such small board as Netduino is.
For sure, there are NOT (nor in the future):
- data binding
- XAML parsing (the tree has to be created programmatically)
- styling
- the remaining 99.99% of regular WPF…
An example of layout
The most versatile yet complex layout control is the Grid, but it seems working fine.
Let’s take this sample XAML:
<Page x:Class="WpfApplication2.Page1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="300"
Title="Page1">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="150" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="2*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<StackPanel
Grid.Row="0"
Grid.Column="0"
x:Name="R0C0"
Background="Blue"
/>
<StackPanel
Grid.Row="0"
Grid.Column="1"
x:Name="R0C1"
Background="DarkGreen"
/>
<StackPanel
Grid.Row="0"
Grid.Column="2"
x:Name="R0C2"
Background="Red"
>
<Button
Content="Caption"
Width="120"
Height="30"
Margin="10,5"
HorizontalAlignment="Center"
x:Name="B0"
/>
</StackPanel>
<StackPanel
Grid.Row="1"
Grid.Column="0"
Grid.ColumnSpan="2"
x:Name="R1C0"
Background="LightPink"
/>
<StackPanel
Grid.Row="2"
Grid.Column="1"
Grid.ColumnSpan="2"
x:Name="R2C1"
Background="MediumSlateBlue"
>
<Button
Content="Caption"
Width="120"
Height="30"
Margin="10,5"
HorizontalAlignment="Center"
x:Name="B2"
/>
</StackPanel>
</Grid>
</Page>
On the regular WPF the result is the following:
Now, let’s see how to write the same thing on Netduino:
public class DemoPage2 : PageBase
{
protected override void OnCreate(FT800Device dc)
{
var btn_prev = new WidgetButton() { Margin = new Thickness(10, 5), Text = "Prev" };
btn_prev.Click += new EventHandler(btn_prev_Click);
var btn_next = new WidgetButton() { Margin = new Thickness(10, 5), Text = "Next" };
btn_next.Click += new EventHandler(btn_next_Click);
btn_next.HAlign = HorizontalAlignment.Center;
var grid = new WidgetGridContainer();
grid.Name = "GRID";
grid.AddColumnDefinition(150);
grid.AddColumnDefinition(1, GridUnitType.Star);
grid.AddColumnDefinition(1, GridUnitType.Auto);
grid.AddRowDefinition(1, GridUnitType.Star);
grid.AddRowDefinition(2, GridUnitType.Star);
grid.AddRowDefinition(1, GridUnitType.Auto);
{
var ctr = new WidgetStackContainer();
ctr.Name = "R0C0";
ctr.Background = Colors.Blue;
grid.SetRowCol(ctr, 0, 0);
grid.Children.Add(ctr);
ctr.Children.Add(btn_prev);
}
{
var ctr = new WidgetStackContainer();
ctr.Name = "R0C1";
ctr.Background = Colors.DarkGreen;
grid.SetRowCol(ctr, 0, 1);
grid.Children.Add(ctr);
}
{
var ctr = new WidgetStackContainer();
ctr.Name = "R0C2";
ctr.Background = Colors.Red;
grid.SetRowCol(ctr, 0, 2);
grid.Children.Add(ctr);
ctr.Children.Add(
new WidgetButton() { Name = "B0", Margin = new Thickness(10, 5) }
);
}
{
var ctr = new WidgetStackContainer();
ctr.Name = "R1C0";
ctr.Background = Colors.LightPink;
grid.SetRowCol(ctr, 1, 0, 1, 2);
grid.Children.Add(ctr);
}
{
var ctr = new WidgetStackContainer();
ctr.Name = "R2C1";
ctr.Background = Colors.MediumSlateBlue;
grid.SetRowCol(ctr, 2, 1, 1, 2);
grid.Children.Add(ctr);
ctr.Children.Add(btn_next);
}
this.Content = grid;
}
void btn_prev_Click(object sender, EventArgs e)
{
NavigationService.Instance.GoBack();
}
void btn_next_Click(object sender, EventArgs e)
{
NavigationService.Instance.Navigate(new DemoPage3());
}
}
That leads the following snapshot:
NOTE: by live the display shows the colors correctly. However, the picture taken renders a bad result.
Widgets, widgets, widgets…
The Eve board is very well designed, because it’s plenty of useful widgets. I don’t believe you’d need something different from the provided.
At the moment of writing, the Netduino library supports:
- (normal) Button
- ToggleButton
- TextBlock
- Slider
- Dial
and, as for the layout control:
- StackPanel
- Grid
As long the spare time helps me, I will try to add some other useful component as the TextBox and the Image.
Yet some screens generated by the Netduino and the FT800 Eve board.
Source code
I will release a beta release soon.
Highfield Tales 