Adding Touch Screens to Projects and Prototypes

Name: Adding Touch Screens to Projects and Prototypes
Rating: 4.3 (6 reviews)

Send and receive data from and to a touch screen, and learn to use the available GPIOs

Created byWissam Botros, P.Eng, CID

Last updated 8/2023

English

English [Auto],

What you'll learn

Adding a touch screen to a project on a developet board
Sending and receiving data from and to the screen using UART
Using the General Purpose Input Output (GPIO) pins of the screen as Input, Output, and PWM.
Creating a custom animated gouge (animated battery level indicator)
Receiving data to screen by creating a battery level indicator using the ADC of the development board and UART communications
Sending UART data from the screen to the dev. board and from Dev board to a MIDI shield
The screen used in this board is from Nextion, and the Dev board is Nucleo-64 from ST Microelectronics with 411RE microcontroller

Course content

6 sections • 72 lectures • 7h 40m total length

Introduction to the course1:58
This is an Intro to the course, it will give you an idea of the logic used to create this course and what is covered in a couple minutes.
Course plan2:14
This is the pan of the course and its sections.

The touch screen we use in the course - Part 13:33
Explore the NextGen Enhanced Series 3.2 inch resistive touch screen with eight GPIOs and four PWM pins, a 400 by 200 display, USB TTL serial, and a required ribbon cable.
The touch screen we use in the course - Part 25:01
Choose the NextGen enhanced 3.2-inch resistive touchscreen (400 by 240) with eight GPIOs to practice UART communication and PWM, and review its data sheet for operating voltage and current limits.
The development board we use int eh course - Part 11:50
The development board we use int eh course - Part 21:11
Use a Nucleo f4 series development board or any compatible board to connect a screen, leveraging the hardware abstraction layer in CubeIDE and UART communications with C functions.
The TTL to USB module we use in the course - Part 10:51
The TTL to USB module we use in the course - Part 21:45
The Nextion IO adaptor we use in the course - Part 11:13
The Nextion IO adaptor we use in the course - Part 21:35
Use the Nextion IO adaptor (8 IO pins, 5 volts, ground) to connect the screen; orient the cable toward the PCB, pull the plastic latch, and push until it locks.
Bezel for the screen3:05
Downloading and installing Nextion Editor2:38
Explaning Nextion Editor interface - Part 18:12
Explaning Nextion Editor interface - Part 216:32
Explaning Nextion Editor interface - Part 316:32
Open a new Nextion project, explore page attributes and events, use the toolbox to add pages and components, and understand local versus global scope and background color.
Adding and using fonts16:32
Learn to create and add fonts with the font generator, assign font IDs, apply Arial bold 24 and Microsoft Sans Serif 16 to text boxes, and test in the simulator.
Changing attributes of a text box with a touch16:32
Demonstrate touch-based text box styling by changing font color and background on press, using t0 attributes such as bco and pc, with the instruction set and gpio examples.
Scrolling text box16:32
Number box16:32
Using buttons16:32
Using Dual State buttons and Timers16:32
Receiving data on the screen16:32
Sending data from the screen16:32
Learn to send data from the touch screen via uart, enabling send component IDs, composing messages with page number, component ID, and event, including length and termination, with debugging tips.
A bit more about the NExtion Editor interface16:32

GPIOs of the Screen3:45
GPIOs as Output - Diagram and configurations4:33
Controling an LED from screen - Setting up the project in Nextion Editor7:13
Set up a Nextion editor project to drive a GPIO LED with on/off buttons, font setup, color feedback, and final compile, debug, and upload to the screen.
Testing the LED project2:19
Controlling an LED from Dual State button
GPIOs as input6:34
GPIO as input assignement
GPIO as Pulse Width Modulation PWM5:26
Implementing the project in Nextion Editor - Part 17:29
Implementing the project in Nextion Editor - Part 23:44
Link the red LED PWM duty cycle to the slider in Nextion Editor (0–100) using PWM 5, 6, and 7 on touch move, then compile and push to the board.
Testing the Project - GPIO as PWM2:57

Creating an animated guage - plan and graphics3:02
Create an animated battery gauge from 0 to 100% by displaying sequential images on a non-gif screen. Use the NextGen editor to prepare the image sequence, simulate, and display.
Knowing the difference between JPG, PNG and GIF
Placing a jpg on the screen
Creating the animated guage - Part 14:09
Creating the animated guage - Part 23:48
Creating the animated guage - Part 35:54
Create an animated gauge by tying a variable to the picture value, incrementing with a timer and an if statement, and resetting at ten to loop from 0% to 100%.
Testing the project2:39
Upload and test the project on the touch screen, verify baud rate connections, and confirm the animated battery and graphics work as expected.
Graphics types0:12
Bitmap and Vector graphics
Design software and graphics sources0:19

Project oerview1:57
Demonstrate building a simple battery indicator on a nuclear board and NextGen screen, showing live battery levels from 0% to 100% as the system powers on.
Project layout and plan3:46
Plan the project with NextGen editor, simulate, push to screen, and connect via uart to the development board. Read battery levels with adc and send data to the screen.
Creating Page 1 in Nextion Editor7:53
Open the NextGen editor, create a three-page battery indicator project, add picture elements, set a black background, and animate with timers and a variable to transition to the next page.
Creating Page 2 in Nextion Editor7:25
Creating Page 3 in Nextion Editor4:35
Sending the project to the screen3:31
Transfer the program to the screen by uploading and connecting, then verify the battery indicator updates from 0 to 100 while powered by five volts and observe the ten bars.
Explaining what to change on screen when we read the battery value5:51
Map battery readings from the ADC to on-screen graphics by updating the image container P5 and the value container N0 to display the current percent on the development board.
Explaining the change and the code plan6:49
Code plan - Part 15:34
Code plan - Part 22:01
Code plan - Part 36:48
Explore a code plan for sending strings and numbers to a screen using a buffer, format specifiers, and pointers, with basic memory management and image switching.
Code plan - Part 45:45
Setting up the project in CubeIDE - Part 19:09
Setting up the project in CubeIDE - Part 25:04
Debug a CubeIDE project to ensure zero errors and warnings, initialize a 32-bit battery variable, start ADC in DMA mode, and read values with HAL_ADC get value.
Setting up the project in CubeIDE - Part 31:46
Solving and understanding ADC reading5:12
ADC reading from the battery and the battery ranges4:26
ADC reading table1:39
Implementing the function in the code8:45
Connecting UART 6 on the Nucleo board2:55
Connect uart 6 on the nucleo board by wiring rx to tx (pc7 to pc6), power with 5 volts, boot, and test before implementing 10%, 20%, and 30% battery ranges.
Including the battery reading in the code7:27
Final code debugging and testing11:09

Introduction to the project7:22
Send commands from the touch screen through a development board and Midi shield to a keyboard, using two uart channels at 9600 and 31.25k baud.
The hardware used in the project5:12
MIDI Protocol0:07
Debugging the project in Nextion Editor3:21
Explaining the project in Nextion Editor9:09
Explore Nextion Editor basics by building multi-page navigation with touch areas and buttons, including dual-state controls that emit UART commands to a development board for a musical keyboard.
Seeting the project in CubeIDE and solving the assignement7:22
Set up an STM32 project in CubeIDE, configure two UART channels for screen and midi, set 9600 and 31250 baud, clear unused pins, initialize peripherals, build with zero errors.
Understanding the system and the code plan for the project8:38
Explore how screen button presses generate hex messages read and translated into MIDI note on/off via UART to a MIDI instrument, with baud rate and code mapping.
Explaning the MIDI instructions on the code7:54
Testing the project0:57
Testing the project with a logic analyzer2:53
Use a logic analyzer to test uart communication from nextion to stm32 at 9600 baud. Then verify transmission through the midi shield to the midi instrument at 31.25 kilo baud.

Requirements

Familiarity with programming in C
Familiarity with a development board and an IDE software to program it
If you are no familiar with the above, then it is still an opportunity to understand the concept.

Description

In this course you are going to learn how to interface a Nextion touch screen with projects done on a development board, the ST Nucleo-64 with 411 RE chip. Your board does not have to be the same, you can implement what you learn on the board of your choice, so watch, get the concept, and enjoy adding a touch screen to your project!

The main objective is to teach you how to utilize the resources of the touch screen in your project, starting from using the GPIOs of the screen assembly as Input, Output and PMW, and then how to communicate with the developemtn board through UART. Receiving and Transmitting.

Learning will be through real projects, starting from working with GPIOs as Output ( controlling an LED) , Input (Check the power on the pins), and PWM (controlling an RGB LED using sliders on the screen) modes. Then we are going to create an animated gauge simulating a battery level. Next, we are going to use that gauge in creating a battery level indicator using the Nucleo-64 board ADC. Last we are going to send UART instructions and data in two channels to a MIDI Shield, this project is for your learning objective and you do not have to implement it physically.

Whether you are an engineering student, an engineer, a maker, an electronics enthusiast, or anyone interested in this subject, this course is for you

I hope you enjoy the course!

Who this course is for:

Makers who want to learn hwo to add touch screen to recevie and send data and istructions
Engineers who want to add a touch screen to their
Engineering students who want to create touch screen cotrol panels attached to their projects
Anyoen prototyping and interested in adding screen

Adding Touch Screens to Projects and Prototypes

What you'll learn

Explore related topics

Course content

Introduction2 lectures • 4min

Hardware and Software in use22 lectures • 3hr 33min

Using the GPIO of the Screen9 lectures • 44min

Creating a custom animated guage7 lectures • 20min

Receiving UART data on the screen - Creating a battery level tester22 lectures • 1hr 59min

Sending UART Data from screen - MIDI Controller project10 lectures • 53min

Requirements

Description

Who this course is for: