hpr-knowledge-base/hpr_transcripts/hpr4624.txt

Episode: 4624
Title: Cheap Yellow Display Project Part 7: GUI Trying a Simple Hello World 
Source: https://hub.hackerpublicradio.org/ccdn.php?filename=/eps/hpr4624/hpr4624.mp3
Transcribed: 2026-07-31 16:15:22 (official HPR transcript)

---

This is Hacker Public Radio Episode 4624, for 2026-04-23
Today's show is entitled, "Cheap Yellow Display Project Part 7: GUI Trying a Simple Hello World "
The host is Trey and the duration is 00:21:47
The flag is Clean, and the license is CC-BY-SA
The summary is "The continuing saga of the Cheap Yellow Display graphical user interface"
Hello again, this is Tre. Please note, I did the work described in this episode and wrote the script,
more than six months prior to this recording. But then life got in the way, and I didn't get
it recorded, and I didn't even look at the project until recently. But that dear friends is a story
for another episode. In literature we call that foretelling. Right now, however, it is time to
record and publish this episode. Welcome to Part 7 in my cheap yellow display project series.
If you're still listening to me ramble about this project, thank you. If you lost track of it over
the months of silence from me, you're not alone. Frankly, I've lost track of it too.
If you wish to catch up on earlier episodes, you can find them on my HPR profile page,
and there's a link in the show notes. Today, I'm not going to blather on about all the things
that we've done so far in the current state of the project. Now, today we are getting back to basics.
Beginning with the random nerds tutorial, introducing the ESP32 cheap yellow display,
and I'm posting a link to that in the show notes. Why am I going back to basics?
I really, I just, I don't want to talk about it. If you've not listened to episode 5 of this series,
you may go back and suffer through it. It's an HPR episode 4, 5, 3, 2.
There's a link in the show notes, but suffice it to say, when you choose to jump in the deep end of
something, you think you understand a little about, but about which you really know much less,
you can find yourself flailing about gasping for air and trying not to sink.
That's a pretty good illustration of what happened in episode 5.
However, a recurring theme has been evident to me in several weeks of podcasts and
YouTube videos that I've experienced over the last, again, over the last several weeks.
That theme is embracing failure. The most recent of those was Mark Rober's YouTube video
uncovering America's underwater city. There's a link to it in the show notes too.
In the video, his successes and his misses gave me a glimmer of hope and reminded me that our
failures are not failures in and of themselves, their opportunities to learn and pivot and change and
move forward. I've been programming computers in various forms since the early 1980s. Yes,
back in the 1900s for all you young folk there. Over the years, I worked with basic and Pascal
various flavors of sea of assembly language, Pearl, Java, JavaScript, Python, and more.
And every time I started a course to learn a new language, the first program to write was,
yep, you guessed it, hello world. Random nerds tutorial posted and article entitled,
introduced in the ESP32 cheap yellow display. And it includes a starter program that creates two
different buttons on the screen, which do two different things. A slider, and of course, it displays
hello world. In the show notes, you can find an image of that screen and a link to the random nerds
tutorial. That's where I'm going. All right, it was time for me to get started. Copy paste run,
nope, not this time. The article also explains section by section what the code does.
And my goal here is not to simply make the cheap yellow display do my bidding,
but rather to learn the why and the how, which I need in order to become proficient with it.
First, we start with loading the necessary libraries. These include pun intended there,
include, oh, never mind. These include LVGL, TFT, underscore espy, XPT, 2046 underscore touch screen.
That's a resistive touch controller library used for all sorts of touch screens.
There are instructions earlier in the tutorial that describe how to make certain that these are
properly installed in the Arduino IDE. One thing that I noticed almost immediately
is that the previous GUI building tool I used in episode five called Squareline Studio,
only supported up to LVGL version 8. Well, the tutorial recommended LVGL version 9.01.
I wonder if this could have contributed to some of my issues. All right,
back up, I'm using acronyms and I haven't talked about them. So what is this LVGL thing anyways?
LVGL stands for light and versatile graphics library. According to LVGL.io, quote,
LVGL is the most popular free and open source embedded graphics library to create
beautiful user interfaces for any microcontroller unit, micro processor unit, and display type, unquote.
It is built to make UI development easier with animations and more than 30 different widgets.
It basically allows a lot of things to happen without you having to get down into the weeds of your code.
All right, so we've got that. We've included the necessary library types and there's some initialization
to do for the touch screen. The touch screen is a serial peripheral interface. We'll call it SPI.
And you can see in the tutorial that the XPT 2046 requires you to define several different things
for that particular serial peripheral interface. These include the interrupt that it uses.
The Mossi, that's MOSI, master out slave in port that's used. This is the pin that the
microcontroller uses to send data to the touch screen or the touch screen's input port.
There's also a Nissan port, MISO, master in slave out pin. That pin is the pin that the
microcontroller uses to receive data from the touch screen or the touch screen's out port.
The ins and outs seem to be a little confusing, but it's defining the ports on the microcontroller
itself that these will use. There's also the clock pin, which the microcode microcontroller
uses to send clock signals to SPI devices. SPI is a bus and you can have several different devices
and having that clock signal is important to make sure that the things are in sync.
The chip select pin on the microcontroller is used to enable and disable communications
with the touch screen. We've got all those defined. We can then create specific instances for
touch screen SPI and touch screen within our code. Next, we define the screen height,
the width, and the font size. Along with integer variables for X and Y coordinates, input coordinates,
when the screen is touched, and Z, which is the pressure that's used when the screen is touched.
These values are important when you're configuring the draw buffer. There's also a setup
function which is used to basically launch the touch screen SPI and the TFTP display and LVGL.
That's a lot. But wait, there's more. There's a decent size function which creates the main
GUI screen and it begins with the hello world text label. Great, our hello world program.
Here we can see specifically how the text label is created, named and assigned the text that
it will display, then sized and positioned. The same goes for buttons 1 and 2 and there are associated
labels and the slider and it's label. Finally, there are event handler functions for when
button 1 or button 2 are pressed and for when the slider is moved. When button 1 is pressed,
it shows that it is clicked until it is released. So, when you press it, it shows clicked,
when you release it, it's not clicked anymore. When button 2 is pressed, however, it actually changes
the state of the button between off and on to the opposite of what the state was before it was
pressed, then it alters the color of the button accordingly. So, button 2 effectively toggles from
off to on or from on back to off again, each time it is pressed. So, if it's off and I push it,
it goes on and it stays on until I push it again. I hope that explanation of this simple function
did not make it even more confusing. Back to the code. When the slide is moved, it changes the
value of the text for the slider label. All of these are fairly simple. Now for the test. In episode
five, you can witness me building my Morse code app or Morse code key app and downloading it
to the cheap yellow display, only to have the touch screen input fail spectacularly.
I know there wasn't a hardware failure because the application that was pre-installed when I purchased
the cheap yellow display worked perfectly. Additionally, when I loaded a pre-compiled application
built for the cheap yellow display, from Brian Lowe's witness me now Github site, it also worked
perfectly and I'll include a link to that in the show notes as well. So, now it was time to once again
verify the proper libraries are loaded in the library manager and then copy the hello world
TFTP display and touch screen test code from random tutorials and paste it into the Arduino IDE.
Section by section, making sure again that I understand with each section does and fine tuning it
for my display. Please note, I spent years of my youth manually typing programs from magazines
into computers. Back then my eyes worked better and my brain worked better and I often spent more
time troubleshooting and trying to find all the typos that I actually spent typing the program.
So yes, I will copy and paste other people's programs every time I can and I'll include proper
attribution for where I got it from. After all, this is a test and if it works, it could be the
foundation upon which I build the application I really want. I connected my cheap yellow displays
USB C port to my computer and verified the comp port the windows had chosen to assign it.
Next, per the instructions in the tutorial, within Arduino IDE, I select the board type that I'm using
as ESP32 Dev module and I specified the comp port to that which it was connected.
With a deep breath in a short prayer, I clicked the upload button.
After what seemed like an eternity of compiling but was actually closer to 36 seconds, I saw the screen
on my cheap yellow display showing exactly what it should and proudly displaying hello world.
Alright, now we'll the touch screen work. I clicked button one. The button changed color when I
pressed it and returned to normal when I released it. Now for button two, a tap toggled it from
orange to blue and another toggled it back to orange again. Finally, the slider test.
Moving the slider did work and changed the percentage value being displayed below the
control. Everything worked. Now we're getting somewhere. There are photos of all of these in the
show notes. What next? I had a few options. I could use what I learned from hello world to begin
building my GUI again part by part. But this time manually as the code directly within Arduino IDE
just manually writing that code not using some other tool for it. To start with I would need to
learn how to build different screens and to navigate between those. So that's option one. Option two.
Alright, to be honest, I wasn't thrilled with my experience using SquareLine Studio.
It is a commercial tool and the licensing is a pain. I recently discovered an open source
option called EEZ Studio. I could load it and try to rebuild the GUI a little at a time examining
the code produced as I go along. Other options. I'm sure there are dozens, but I really need
more information before I can choose what to do. In the end, I choose none of the above. I decided
to take a closer look at the code which SquareLine built for my GUI and try to learn what is in there.
It turns out there's quite a bit. Granted, I had built three different screens with
quite a number of buttons and some other controls. But where hello world included all of the
source code in a single.iono file. SquareLine had created a number of files. Let's talk about those.
There was CMakelist.text and filelist.text and those seem to be artifacts from when the GUI code
was exported from SquareLine. There's a UI.iono file and this is the Arduino C file with several of
the same foundational structures that can also be found in hello world for configuring individual
libraries to work with the CYD and things like that. Some of these differ from hello world and
will require comparison. There's also the UI.c file which starts with a variable section for
defining screen control, label names and things like that. It also has a function section with code
for event handling and finally it has a screen section which defines functions for each of the different
application screens built within SquareLine. Send config and keyboard. There's a UI.h file
which really does not have much in it. I need to figure out what the that file does.
There's a UI underscore screen UI underscore send underscore screen.c a UI underscore config
underscore screen.c and UI underscore keyboard underscore screen.c and these create all the controls
and labels on each of those screens. The send screen, the config screen and the keyboard screen.
They specify location, size and some of the functions of those controls.
There's a UI underscore events.h file which also seems to have very little in it like
UI underscore h. So there's more research needed and figuring out what the that h files do.
There's a UI underscore comp underscore hook.c file and it simply includes a list of libraries
and their versions along with the project name header and it's common that the header is
common to most of the files that are in this list. There's a UI underscore helper.c and it has
code related to the properties of several of the controls in the project and a UI underscore helpers
underscore or dot h UI underscore helpers dot h file and it's the only dot h file that has really
any amount of code in it but I still don't know what that code is doing. You can find all of these
on my GitHub repository and I'm posting a link to it in the show notes.
So this is interesting but I didn't really get anywhere. Remember I mentioned a YouTube video
by LVGL beginner where I first saw reference to a product called EEZ Studio.
That video I'll post a link to it in the show notes along with the title but it's a good place to
start. So I went back to the video and in the video the author shows how to use EEZ Studio to build a
button. Then he exports the code which is a bunch of files like square line did copies all of the
created files into the same folder where his dot iano file resides and then he integrates it into
the dot iano file. In fact he's using a template iano file that was designed by random nerds and
can be found on the random nerds site and he integrates it by using an include statement and a
function call. So I went back to my old UI dot iano file from square line. It seems to only
interact with the remainder of the UI files also through an include include less than ui dot h greater
than statement. Okay that's where ui dot h comes in that's that's interesting. So there's a line
for that and there's also a function ui underscore init which which calls some things.
What if what if my issues were within the ui dot iano file itself in the way it configured
the board or instantiated the libraries or something. All right I have a working foundation to build
on let's let's look at something. So I make a copy of the template and I moved it into a new
test folder and I copied all the square line created user user files into that same test folder
except for my ui dot iano. Next I edited the version of hello world and removed all of the event
handlers and the entire lv underscore create underscore main GUI function. Finally I replaced the
lv underscore create underscore main underscore GUI function call with a ui underscore init function call.
This couldn't work could it? It's worth a shot. I could always revert back to my saved copy
of hello world and try something different. I reconnected the capabilities play to the USB
C cable and I clicked the upload button in the Arduino IDE and then waited for what seemed
like another eternity while the code compiled. This time taking much longer than 36 seconds.
I pondered searching youtube for the jeopardy game theme song music to play in the background while
it waited. Finally the screen on the cheap yellow display went black and amazingly it displayed
the send button screen that I had originally built in square line. Okay try I thought to myself
don't get your hopes up you've seen this before. The real test is if any of the buttons work.
I tapped the config button. The send screen began to slide from left slide to the left to be replaced
with the config screen. It worked. I tapped the keyboard screen. The config screen
slid to the left and the keyboard screen slid into its place. I absolutely shouted.
A lot of enough to scare both of my cats and they jumped from their place where they'd been sleeping
on the bed in my office and ran out the door. It worked. I still have a ton of work to do. I still
don't really understand a lot of the parts of this and I need to get a better understanding
of it but I've got work to do in the GUI and I've got work to do in the actual program part to
send the Morris code. But this is a good place to stop and savor a little bit of success.
I look forward to any feedback you might have. Please post it as a comment or send me an email
using the addresses that are listed in my HPR profile. I hope you have an amazing day and I will
talk to you again in my next episode.
You have been listening to the Hacker Public Radio podcast, at hackerpublicradio.org.
Today's show was contributed by a HPR listener like yourself.
If you ever thought of recording a podcast, then visit the HPR site to find out how easy it really is.
Hosting for HPR has been kindly provided by anhonesthost.com, the Internet Archive, rsync.net, and the HPR Community Content Delivery Network.
Unless otherwise stated, today's show is released under a Creative Commons Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.