This show has been flagged as Clean by the host.
Hello, again. This is Trey.
Please note: I did the work described in this episode, and wrote the script more than 6 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 (CYD) Project series. If you are still listening to me ramble about this project, thank you. If you have lost track of it over the months of silence from me, you are not alone. Frankly, I have lost track of it, too.
If you wish to catch up on earlier episodes, you can find them on my
HPR profile page
https://www.hackerpublicradio.org/correspondents/0394.html
Today I am not going to blather on about all the things we have done so far, and the current state of the project. No, today we are getting back to basics, beginning with the Random Nerds Tutorial "Introducing the ESP32 Cheap Yellow Display" (
https://randomnerdtutorials.com/lvgl-cheap-yellow-display-esp32-2432s028r/
).
Why am I going back to basics? I really don't want to talk about it. If you have not listened to episode 5 of this series, you may go back and suffer through it at HPR4532 -
https://hackerpublicradio.org/eps/hpr4532/index.html
Suffice it to say that, 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. Thus was my case.
However, a recurring theme has been evident to me in several podcasts & YouTube videos I have experienced over the last few weeks. That theme is "Embracing Failure". The most recent of these was Mark Rober's YouTube video "Uncovering America's Underwater City" (
Uncovering America's Underwater City
). His successes and misses in that video gave me a glimmer of hope.
I have been programming computers in various forms since the early '80s. Over the years, I worked with BASIC, Pascal, various flavors of C and of assembly, Perl, Java, JScript, 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 post "Introducing the ESP32 Cheap Yellow Display" (
https://randomnerdtutorials.com/lvgl-cheap-yellow-display-esp32-2432s028r/
) includes a starter program that creates 2 different buttons on the screen, which do 2 different things, a slider, and, of course, displays "Hello World". In the show notes, you can see an image of this screen, captured from the tutorial.
It was time for me to get started.
Copy, paste, RUN, right? Nope. Not this time. The article also explains, section by section what the code does. My goal here is NOT simply to make the CYD do my bidding, but to learn the "Why" and the "How" which I need in order to become proficient.
First, we start with loading the necessary libraries. These include (Pun absolutely intended):
LVGL (Light and Versatile Graphics Library)
TFT_eSPI (Graphics library for output to the display itself)
XPT2046_Touchscreen.h (A Resistive touch controller library, used for touchscreen inputs from the CYD)
Instructions earlier in the tutorial described how to make certain these are properly installed into the Arduino IDE. One thing that I noticed almost immediately is that the previous GUI building tool I used in episode 5, called Squareline Studio, only supported up to LVGL Version 8, while the tutorial recommended LVGL 9.01. I wonder if this contributed to some of my issues?
What is LVGL anyway? LVGL stands for Light and Versatile Graphics Library. According to lvgl.io, "LVGL is the most popular free and open-source embedded graphics library to create beautiful user interfaces for any micro controller unit, microprocessor unit and display type." It is built to make UI development easier with animations and more than 30 different widgets.
Now that we have included the necessary libraries, there is some initialization to do for the touchscreen. The touchscreen is a Serial Peripheral Interface (SPI). You can see in the tutorial that XPT2046 requires you to define the following:
The interrupt (IRQ) used
The MOSI (Master Out Slave In) pin used. This is the pin which the microcontroller uses to send data to the touchscreen.
The MISO (Master In Slave Out) pin used. This is the pin which the microcontroller uses to receive data from the touchscreen.
The clock pin which the microcontroller uses to send clock signals to SPI devices.
The Chip Select (CS) pin on the microcontroller, used to enable/disable communications with the touchscreen.
With these defined, we can create specific instances for "touchscreenSPI" and "touchscreen". Next, we define the screen height, width, and font size, along with integer variables x & y for input coordinates when the screen is touched, and z for pressure used when the screen is touched. These values are important when configuring the draw buffer.
There is also a setup function which is used to basically launch the touchscreenSPI, the TFT Display, and LVGL.
That was a lot. But wait! There is more!
There is a decent sized function which creates the main GUI screen, and it begins with the "Hello World" text label. Here we can see specifically how the text label is created, named, assigned the text it will display, and sized and positioned.
The same goes for buttons one and two and their 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. When button 2 is pressed, it actually changes the state of the button between "off" and "on" to the opposite of the state it was in before it was pressed and alters the button 2 color accordingly. Button 2 effectively toggles from "off" to "on" or from "on" back to "off" again each time it is pressed. If it is "off" and I push it, it goes "on" and stays "on" until I push it again. I hope my explanation of that simple function did not make it even more confusinger. Back to the code!
When the slider is moved, it changes the value of the text for the slider label.
All fairly simple. Now for the test. In episode 5 you can witness me building my morse code keyer app and downloading it to my CYD, only to have the touchscreen input fail spectacularly. I know there wasn't a hardware failure because the application which was pre-installed when I purchased the CYD worked perfectly. Additionally a pre-compiled application built for the CYD which I loaded from Brian Lough's WitnessMeNow GitHub site (
https://github.com/witnessmenow/ESP32-Cheap-Yellow-Display
) also worked perfectly.
So, now it was time to, once again verify that the proper libraries are loaded in the library manager, and then copy the "Hello World" TFT Display & Touchscreen test code from Random Tutorials and paste it into Arduino IDE, section by section, making certain, again, that I understand what each section does.
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 my typos than I did actually typing the program. So, YES, I will copy & paste other people's programs every time I can (And include proper attribution). After all, this is a test, and if it works, it could even be the foundation upon which I build the application I really want.
I connected my CYD's USB-C port to my computer and verified the COM port Windows has chosen to assign to it. Next, per the instructions in the tutorial, within Arduino IDE, I selected the "board" type that I was using as "ESP32 Dev Module", and specified the COM port to which it is connected. With a deep breath and a short prayer, I clicked the "Upload" button.
After what seemed like an eternity compiling, but was actually closer to 36 seconds, I saw the screen on my CYD showing exactly what it should, and proudly displaying "Hello, world!"
Now will the touchscreen work? I clicked button 1.
The button changed color when I was pressing it, and returned to normal when released. Now for button 2.
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 are getting somewhere. There are photos in the shownotes.
What next? I had a few options:
I could use what I had learned from "Hello World" to begin building my GUI once again, part by part, but this time manually as code directly within Arduino IDE. To start with, I would need to learn how to build different screens and navigate between them.
I was not 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 need more information before I can make a choice.
In the end, I chose "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 in there.
It turns out there was quite a bit. Granted, I had built 3 different screens with quite a number of buttons and some other controls. But where "Hello World" included all the code in a single .ino file, SquareLine had created a number of files:
CMakeLists.txt & Filelist.txt seem to be artifacts from when the GUI code was exported from SquareLine.
ui.ino is an Arduino C file with several of the same foundational structures found in "Hello World" for configuring and initializing libraries to work with the CYD. Some of these differ from "Hello World", and will require comparison.
ui.c starts with a "Variables" section for defining screen, control and label names. It also has a "Functions" section with code for event handling. Finally, it has a "Screens" section which defines functions for each of the different application screens built within SquareLine: Send, Config, and Keyboard.
ui.h really does not have much in it. I will need to research what it does
ui_Send_Screen.c, ui_Config_Screen.c, & ui_Keyboard_Screen.c create all the controls and labels on each screen, specifying location, size, and some functionality.
ui_events.h also seems to have very little in it, like ui.h. More research is needed.
ui_comp_hook.c simply includes the list of libraries with their versions along with the project name header, common to most of the files in this list.
ui_helpers.c has code related to properties for several of the controls in the project
ui_helpers.h is the only of the .h with any real amount of code in it.
You can find all of these files on my github repository at
https://github.com/jttrey3/CYD_MorseSender-v0.4
This was interesting, but it didn't really get me anywhere. Remember I mentioned a YouTube video by LVGL_BEGINNER where I first saw reference to EEZ Studio. It was titled "LVGL ESP32 2432S028R CYD example with EEZ Studio" (
LVGL ESP32 2432S028R CYD example with EEZ Studio
). In this video, the author shows how to use EEZ Studio to build a button. Then he exports the code (A bunch of files like SquareLline did), copies all the created files into the same folder where his .ino file resides, and he integrates it into a "Template" .ino file designed by RandomNerds for the CYD, using an include statement and a function call.
I went back to my old ui.ino file from SquareLine. It seems to only interact with the remainder of the ui files through an "#include <ui.h>" line and through a "ui_init();" function call. What if, my issues were within ui.ino itself in the way it configured the board or instantiated the libraries or something?
I have a working foundation to build on. I made a copy of the template and moved it into a new test folder. I copied all the SquareLine created ui files into the same folder except for "ui.ino" Next, I edited this version of "Hello World" and removed all the event handlers and the entire "lv_create_main_gui" function. Finally, I replaced the "lv_create_main_gui();" function call with "ui_init();"
This couldn't work, could it? It was worth a shot. I could always revert back to my saved copy of "Hello World" and try something different.
I reconnected the CYD to the USB-C cable and clicked the "Upload" button in Arduino IDE, then waited for what seemed like another eternity while the code compiled. This time, much longer than 36 seconds. I pondered searching YouTube for the Jeopardy game show theme music to play in the background while I waited.
Finally, the screen on the CYD went black, and, amazingly, it displayed the "Send" screen I had originally built in SquareLine. "Okay, Trey", I thought to myself, "Don't get your hopes up. You have seen this before." The real test is if any of the buttons work.
I tapped the "Config" button...
The "Send" screen began to 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 shouted loud enough to scare both cats, and they jumped from their sleeping spots on the bed in my office and ran out the door.
It worked. I still have a ton of work to do, in the GUI and on the actual program to send Morse. But this is a good place to stop and savor a 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 address listed in my HPR profile.
Have an amazing day, and I will talk to you again in my next episode.
Provide feedback on this episode.
Ireland