Introduction

In this guide I will try to show how to start using Nextion display with Nextion.NET drivers 1.1.0 and NETMF 4.3 board. This example includes:

  • Create new Micro Framework project.
  • Proper configuration of you Visual Studio to automatically generate display configuration proxy class.
  • Update text in Text control.
  • Get button click event.
  • Change current page.

Requirements

  • board with NETMF 4.3
  • Nextion Display
  • Working development environment including Visual Studio, NETMF, SDKs, etc.
  • Nextion Editor
  • Proper wiring between board and display

Prepare your IDE

In this guide I’m using Visual Studio 2013 with Micro Framework 4.3 and GHI Electronics SDK.

First create new Micro Framework project

image

 

Download Nextion.NET driver from downloads page and extract it folder “Demo1\_NextionNET” (full path in my case is “C:\Demo Files\Demo1\_NextionNET”). In this guide I used version 1.1.0.

In project file add reference to:

  • Microsoft.SPOT.Hardware.SerialPort (from the framework)
  • JernejK.NextionNET.Driver.dll (from Demo1\_NextionNET folder)

HMI file

Nextion Display require UI configuration which includes:

  • Pages
  • Components
  • Fonts
  • Pictures

For editing, testing and deployment to Nextion display use Nextion Edior. In this guide we will use very simple UI. HMI file can be downloaded here. UI contains:

  • One font
  • Two pages
  • Components on page 1
    • Text control with ID TextTime
    • Button control with ID ButtonNextPage, with checked “Send component ID” on the “Touch Release Event” tab
  • Second page is empty

image

Upload this UI to your Nextion display.

Project file structure

File structure should looks like this:

image

This is just recommended folder structure. If you have different one just change Pre-build event command accordingly.

Display Configuration Generator

Display Configuration Generator comes with Nextion.NET driver and it is used to generate proxy class directly from HMI file. This gives you access to components, pages, pictures and fonts using strongly typed classes. You can run class generation manually after every change of HMI file or you can configure Visual Studio to automatically generate class on every build. This is done using Build Events in Visual Studio project properties.

image

Full Pre-build event command line is:

"$(ProjectDir)..\_NextionNET\DisplayConfigurationGenerator.exe" "$(ProjectDir)..\Display.HMI" /ns Demo1 /o "$(ProjectDir)DisplayConfiguration.generated.cs"

Using correct quotes is very important, so just copy complete line above and paste it to the Visual Studio. After that build project. If build succeed, there is new file named DisplayConfiguration.generated.cs, which need to be added to the project. Right click on project in Solution Explorer and select Add –> Exsisting Item and select file DisplayConfiguration.generated.cs. If you open this file you will find references to pages (Page0 and Page1 in our example), Fonts (one font called Arial16 in this case), empty pictures enumeration, and reference to two components (textbox and button) in Page0. Page1 don’t contains components, but you still have information about page id and page name. Configuration class is defined as partial so you can include your own helper methods and additional references.

You can find more about DisplayConfigurationGenerator and its parameters here.

Coding

Now we are ready to write some code. Open Program.cs file and replace it with code below. Code is very simple and I hope that provided comments will be enough. Complete file can be downloaded here.

using System;
using Microsoft.SPOT;
using System.Threading;

namespace Demo1
{
    public class Program
    {
        public static void Main()
        {
            //Create new instance of display driver. Use appropriate COM port, baud rate and display resolution
            var display = new JernejK.NextionNET.Driver.NextionDisplay(new System.IO.Ports.SerialPort("COM2",), 320, 240);
            //This will initialize display configuration.
            DisplayConfiguration.Init(display);

            //Now we can access controls using DisplayConfiguration class
            display.PageId = DisplayConfiguration.Page0.Id;
            DisplayConfiguration.Page0.TextHello.Text = "Hello!!!";

            display.TouchEvent += display_TouchEvent;
        }

        //To prevent double clicks
        static bool NextClicked = false;
        static void display_TouchEvent(object sender, JernejK.NextionNET.Driver.TouchEventArgs args)
        {
            //Get touched control
            var ctrl = args.ResolveControl();
            if (ctrl == DisplayConfiguration.Page0.ButtonNextPage)
            {
                //Do not allow double click
                if (NextClicked)
                    return;

                NextClicked = true;
                //Additional communication with display need to be done on different thread!
                var thread = new Thread(new ThreadStart(() =>
                    {
                        DisplayConfiguration.Page0.ButtonNextPage.Text = "Clicked";
                        Thread.Sleep(3000);
                        ((JernejK.NextionNET.Driver.NextionDisplay)sender).PageId = DisplayConfiguration.Page1.Id;
                    }));
                thread.Start();
            }
        }
    }
}

Testing

Try to build project. Fix missing namespaces and deploy program to you NETMF board. If everything is OK text “Hello!!!” should appear on the screen. If you touch the button text changes to “Clicked” and after 3 seconds the page changes, so the screen become blank.

I hope you find this guide helpful and everything works as expected, otherwise don’t hesitate to ask  at discousions page. Complete project can be downloaded here.

Have fun!!!

Last edited Nov 18, 2015 at 10:07 PM by jernejk, version 7