hpr-knowledge-base/hpr_transcripts/hpr4532.txt

Episode: 4532
Title: Cheap Yellow Display Project Part 5: Graphical User Interface 
Source: https://hub.hackerpublicradio.org/ccdn.php?filename=/eps/hpr4532/hpr4532.mp3
Transcribed: 2026-07-31 16:13:22 (official HPR transcript)

---

This is Hacker Public Radio Episode 4532, for 2025-12-16
Today's show is entitled, "Cheap Yellow Display Project Part 5: Graphical User Interface "
The host is Trey and the duration is 00:13:11
The flag is Clean, and the license is CC-BY-SA
The summary is "Trey experiments with Squareline Studio to build a GUI for this project"
Hello again, this is Tray. Welcome to Part 5 in my cheap yellow display project series.
If you are still listening to me ramble on about this project, thank you. I really do appreciate
you. If you wish to catch up on earlier episodes, you can find them on my HDR profile page
and there's a link in the show notes. To review, my project is to build a portable
Morris code, cure memory, which can be connected to any of my HF Transsever radios
by simply plugging it into the code key input port. Then, I could transmit stored messages
by simply touching their specific icon on the touch screen. I also want to be able to
program each macro individually from within the graphical user interface.
And as you can probably tell from the background noise, we are in my office where I'm
surrounded by clocks that all seem to want to strike or kuku or chime all at the same
time, so please forgive the extra noise. Where was I? Right. To accomplish this project,
I need to learn how to build a graphical user interface for the cheap yellow display.
Most of the cheap yellow display resources I have been referencing recommend using a product
called SquareLine Studio for GUI development on the cheap yellow display. By the way, throughout
this, I made interchangeably use the term GUI GUI or GUI or graphic user interface. I just
I may use them interchangeably, so be aware of that. Anyways, SquareLine Studio. Sadly,
it is not open source. If any of you have experience with a good open source alternative
to SquareLine Studio, please record a show to help the rest of us or at least send me an
email. SquareLine does have a free trial with a free single user single computer license,
which I am using for this project. It will run on Windows or Linux or Mac, so it's very
very versatile. So, after watching several videos about using the cheap yellow display with
SquareLine, I started to outline the functionality I needed. SquareLine provides a wide range
of pre-configured boards and interfaces to choose from, in addition to widgets and controls,
you can drag onto your screens and it will automatically generate the supporting code
in the background. The initial page for my project needs to have macro buttons with labels
for the message that they will send when they are pressed. There also need to be navigation
buttons to move from one page to another. Another important page will be the configuration
page where the user can store the contents of each macro and set the speed at which code
will be sent. I would like to have a keyboard page where the user can type in a custom
message and send it to. I made a few GUI sketches on post-it notes, then I scratch them
out and made more because my drawing skills are even worse than my GUI coding skills.
Then I went ahead and installed SquareLine Studio on my Ubuntu laptop to start designing.
I do use Ubuntu for my daily driver. It's what sets out my desk, it's what I use all
the time. For those of you who may be paying attention, that is for telling. So, I installed
SquareLine Studio, there is a bit of a learning curve, even with the guide videos that
I found online. The user experience within SquareLine is challenging. Their own graphically
user interface leaves much to be desired. It is not designed to run on the laptops screen
size screen resolution that I had it running on. I had to switch to a much higher resolution
monitor and rearrange frames within the app itself in order to see many of the controls
that were just hidden and I couldn't get to them. Then, as I'm building the GUI itself,
button size adjustments, alignments and label text did not work quite as I expected. For
instance, a label text item is not part of something like a button. So, the text that
displayed on the button is actually a separate object completely from the button itself.
So, I had to put much more thought into the object naming so that I could write code
that will change button labels dynamically. I'm also including some screenshots from the
user interface that I designed within SquareLine and you'll see those in the show notes.
One great feature is that you can define actions and conditions for objects in your project.
For example, there are buttons on the left which will navigate to specific screens,
like the send screen or the config screen or the keyboard screen. I defined actions within
SquareLine such that when a specific navigation button is pressed, it will change the
buttons appearance to look like it has been pressed and will then scroll left or right to
the specified screen. Actions were also valuable as I was working on this speed word
per minute slider in the config screen. When the slider is moved left or right, the GUI
will change the actual number which represents the word per minute and is seen to the
right of the slider on the screen. Next, there is a simulator function which can be used
to test how well the GUI works. It took me some trial and error but I was able to build
and successfully test navigational actions and the word per minute slider. As I was working
on building the aforementioned word per minute slider and thinking about the default words
per minute of Morse code to use, my ADHD interrupted me as it usually does. I decided to change the default
speed that I use for the Arduino Nano-based Morse code practice here that I keep on my desk. You
can learn more about this here in episode 3 of the series. We will also discuss Morse code
speed in a future episode of this series. The original code, as is found on a link that
I'll include in the show notes, specified 12 words per minute as the default speed, with
buttons to increase and decrease this. However, I am practicing it 20 words per minute. Every
time I turn on the practice set I need to turn up the speed and guess if I'm close to 20 words
per minute. I went ahead and opened the practice oscillator project in our Arduino IDE and
updated the words WPM variable that represents words per minute in the code to a value of 20.
No, you will not see this change reflected in my GitHub repo. Why? Well, A, I wanted to test it locally
first. B, 20 words per minute may be a little bit fast for default for people that are just
getting started with it. C, confession. I do not use get the way it was meant to be used or the
way it should be used for that matter with pull requests and all that stuff. Bad tray. D, I was
distracted. The reason I bring all this up is this is the first time I've used the Arduino IDE to
program a board with this system since I upgraded it from a boom to 20.04 to a boom to 22.04. Well,
now, try as I might. I was not able to get the Arduino Nano's USB port to be recognized in
Linux so that I could update the key or code. I spent several days troubleshooting using other
Arduino devices different USB ports different cables all to no avail. None of them would be
recognized within Linux or within the Arduino IDE. If anyone has any recommendations, I'm open to
suggestions. What did I do? Well, I dug out my son's old Windows 10 PC which should slow down
to the point where he couldn't use it and I wiped it and started all over again with a new fresh
clean install of Windows and all the chaos that comes with that removed and then I went ahead
and installed the Arduino IDE and loaded up all the necessary dry libraries and the code from my
GitHub which I had to manually change once again because I do not fully get Git. Finally, I was able
to update the Arduino Nano with its new code and it works perfectly. But this revealed the same
problem for the cheap yellow display. I also could not get it to connect over USB to my Ubuntu system.
Time to migrate the entire project to Windows. My next step was to go ahead and install
Square Line Studio on Windows. Here, I ran into another snag because my trial license was only
for one system. So I had to uninstall Square Line from Linux before I could activate the
license on Windows. Did I mention that I would love to find an open source free software product
that I could use instead? If you know of one, please ping me or post a comment or something.
I wasted more time trying to get the GUI project which I had written on the Linux machine
imported to Square Line on Windows. All the while thinking of improvements I could make if I just
started over again from scratch. It would not load. It would not load. It would not load.
In the end, I started all over again from scratch. After much blood, sweat, and tears. My GUI code
was working again. And this time in Windows, I was able to run it in the simulation mode and move
from page to page successfully and also use my word per minute slider. I exported the UI from
Square Line and loaded the code it generated into a new project within the Arduino IDE.
Now was a moment of truth. I followed the instructions found in the Pang YouTube channel
video that I've posted within the show notes. I connected the Chipila display and uploaded
the code success. You can see in the picture in the show notes, my send screen loaded perfectly.
Now to try the other screens. Wait, draught. It does not seem that my navigation buttons work.
Actually, it does not appear that the touch screen is responding at all.
I spent the next several days trying to figure out what went wrong. I checked and double-checked
interrupt and configuration settings such as those that are described in another of Pang's videos
which I'll post a link to in the show notes. Nothing worked. I came to realize that I had
bit off more than I could chew and I should not have started with such an ambitious project.
Instead, I should have started with a simple equivalence of hello world where I could build and
test simple functionality to make sure I knew exactly what I was doing and then expand on it.
Lessons learned and a good stopping point for this episode. I'm open to your feedback on what
you would recommend what I should do differently, etc. You can post simple feedback as a comment or
send me an email using the address in my HPR profile. As usual, if your feedback is more than a
sentence or two, you might want to record it as an episode so that other listeners can profit from it as
well. Time for an espresso. Maybe I'll make it a double or even a triple.
You have been listening to Hacker Public Radio at Hacker Public Radio.org.
Today's show was contributed by a HPR listener like yourself.
If you ever thought of recording podcast, click on our upload link
to find out how easy it is.
Hosting for HPR has been kindly provided by an AnHonestHost.com, the Internet Archive,
rsync.net, and our mirror network.
Unless otherwise stated, today's show is released under a Creative Commons
Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.