.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

One comment

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


Leave a Reply

Fill in your details below or click an icon to log in:

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