.NET Gadgeteer Hello BizVise Project – Part 4: Graphical User Interface GUI

This is the last blog post of my Hello BizVise Project blog series. In this blog post, I will show you how I connect the TouchScreen Display module (Display T43) to my FEZ Raptor mainboard. I will share the source code of the Glide GUI configuration to create a user interface for my application as well. Below are the steps taken:

1. All we need to do on the hardware side is to connect the TouchScreen connectors to FEZ Raptor mainboard according to the setting below.

  • T (Display) -> T (FEZ Raptor connector 14)
  • R (Display) -> R (FEZ Raptor connector 15)
  • B (Display) -> B (FEZ Raptor connector 16)
  • G (Display) -> G (FEZ Raptor connector 17)

WARNING: Make sure the power is off during the wiring.

FEZ Raptor with Touch LCD

2. Next, open our Visual Studio project and follow the video instructions below. Just as a summary of what I did in the video:

  • Setup Project.Gadgeteer Designer
  • Add Glide Library Reference
  • Generate XAML code using Glide Online Designer Tool
  • Read the created XAML and initialize the GUI window
  • Wired up event handling of the GUI controls – Toggle button and also Counter text block

I’m using Glide library to edit the GUI, you can find out more about my review about Glide GUI at – https://bizvise.com/2014/05/04/net-micro-framework-user-interface-development-framework-review/

NOTE: Here’s the video. Sorry for occasional mumbling, that’s me thinking, coding, video recording and narrating at the same time and I wasn’t good at that yet.

namespace HelloBizVise.NETMF
{
    public partial class Program
    {
        private bool isLEDON = true;
        private static GHI.Glide.Display.Window _mainWindow;
        private GHI.Glide.UI.Button _btnToggle;
        private GHI.Glide.UI.TextBlock _tbCounter;
        private int clickCounter = 0;

        void ProgramStarted()
        {
            Debug.Print("Program Started");

            ledStrip.TurnAllLedsOn();
            isLEDON = true;

            bToggle.ButtonPressed += bToggle_ButtonPressed;

            Glide.FitToScreen = true;
            _mainWindow = GlideLoader.LoadWindow(Resources.GetString(Resources.StringResources.MainWindow));

            _btnToggle = (GHI.Glide.UI.Button) _mainWindow.GetChildByName("btnToggle");
            _tbCounter = (GHI.Glide.UI.TextBlock) _mainWindow.GetChildByName("tbCounter");

            _btnToggle.TapEvent += _btnToggle_TapEvent;

            Glide.MainWindow = _mainWindow;
            GlideTouch.Initialize();
        }

        // GUI Toggle Button
        void _btnToggle_TapEvent(object sender)
        {
            ToggleLED();
        }

        // Hardware Push Button
        void bToggle_ButtonPressed(Button sender, Button.ButtonState state)
        {
            ToggleLED();
        }

        private void ToggleLED()
        {
            clickCounter += 1;
            if (isLEDON)
            {
                ledStrip.TurnAllLedsOff();
                isLEDON = false;
            }
            else
            {
                ledStrip.TurnAllLedsOn();
                isLEDON = true;
            }
            _tbCounter.Text = clickCounter.ToString();
            _mainWindow.Invalidate();
        }
    }
}

3. Well, here’s my recorded working Hello BizVise 🙂 Thanks for following my blog posts.

Advertisements

.NET Micro Framework User Interface Development Framework Review

Did an online research on the user interface development options available for .NET Micro Framework, doing this to evaluate the best option for me in order to proceed on my Hello BizVise project. Here’s what I learn. Basically, there are two main options that we can choose from in developing the User Interface of our .NET MF application.

A) .NET MF WPF (Windows Presentation Foundation)

.NET Micro Framework provides its own version of WPF, which is a scale down version of the desktop WPF library. This UI framework is provided out of the box in .NET MF SDK under the libraries Microsoft.SPOT.Presentation. Those who has experience working on WPF XAML will find this library familiar, it comes with all the important layout like GridPanel, StackPanel etc and those fundamental input controls like TextBox, Slider and it even includes the Grid control. 🙂

Having said that, there’s no XAML editor and any drag and drop designer tool provided out of the box. Hence, it’s less user friendly as compare to the desktop WPF XAML development. All the controls and layouts needed to be coded in C#, no WYSIWYG experience. You can find out more about the library at this link – http://msdn.microsoft.com/en-us/library/cc533011.aspx

B) Glide

Glide is an open source UI library and designer tool maintained by GHI Electronics. I highly recommend this library as it builds on top of the .NET MF WPF framework which it provides the drag and drop designer tool (missing in the core .NET MF WPF). Below are some of the important links to get started on Glide.

You may also ready this blog post on How I Use Glide in my Hello BizVise Project.

.NET Gadgeteer Hello BizVise Project – Part 3: Toggling LED strip of .NET Gadgeteer

Well, in this blog post I will try to hook up my Push Button and also the LED Strip that come with my FEZ Raptor Starter Kit. Will demonstrate how I fix the modules and write a simple code that runs on FEZ Raptor to toggle LEDs based on the push button input. Below are the steps taken, enjoy!

1. First, connect the Push Button module X connector to FEZ Raptor connector X (number 2). Then, connect the LED Strip Y connector to FEZ Raptor connector Y (number 1). You may refer the photo taken below for the wiring.

LED Strip Toggle and Push Button Connection on FEZ Raptor .NET Gadgeteer

2. Next, setup the Visual Studio project connection according to the physical connection done in Step 1. The video below shows how I did it.

3. Once we have the project setup correctly, next is to write the code that toggle the LED Strip based on the push button input. Below is the video guide and also code snippet (in case following video guide is not your cup of tea).

namespace HelloBizVise.NETMF
{
    public partial class Program
    {
        private bool isLEDON = true;

        void ProgramStarted()
        {
            Debug.Print("Program Started");

            ledStrip.TurnAllLedsOn();
            isLEDON = true;

            bToggle.ButtonPressed += bToggle_ButtonPressed;
        }

        void bToggle_ButtonPressed(Button sender, Button.ButtonState state)
        {
            if (isLEDON)
            {
                ledStrip.TurnAllLedsOff();
                isLEDON = false;
            }
            else
            {
                ledStrip.TurnAllLedsOn();
                isLEDON = true;
            }
        }
    }
}

If everything done correctly, we are ready to run the application on FEZ Raptop. Here’s what I get. 🙂

Toggline LED with push button on .NET Gadgeteer (Guide) - 2

Just as a preview of what coming up next 🙂 – Part 4 https://bizvise.com/2014/05/05/net-gadgeteer-hello-bizvise-project-part-4-graphical-user-interface-gui/

FEZ Raptor with Touch LCD