HPR4532: Cheap Yellow Display Project Part 5: Graphical User Interface
This show has been flagged as Clean by the host.
Hello, again. This is Trey.
Welcome to part 5 in my Cheap Yellow Display (CYD) Project series. If you are still listening to me ramble about this project, thank you. 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
To review, My project is to build a portable morse code "Keyer memory" which can be connected to any of my HF transceiver radios by simply plugging it in to 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 the graphical user interface (GUI).
To do this, I need to learn how to build a GUI. Most of the CYD resources I have been referencing recommend using Squareline Studio for GUI development on the CYD. Sadly, Squareline Studio 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. Squareline does have a free trial and a free single user / single computer license, which I am using for this project. It will run on Windows, Linux, and Mac.
After watching several videos about using the CYD 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 which you can drag onto your screens, and it will automatically generate the supporting code in the background.
The initial page needs to have the macro buttons, with labels for the message they will send when pressed. There also needs to be navigation buttons to move from one page to others. 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 a custom message and send it.
I made a few GUI sketches on post-it-notes, then I installed Squareline Studio on my Ubuntu laptop to start designing. There is a bit of a learning curve. Even with guide videos, I found the user experience to be... challenging.
Their own GUI leaves much to be desired. It was not designed to run on the laptop's screen size/resolution. 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. Button size adjustments, alignments, and label text did not work quite as expected. Getting things sized and aligned properly took quite a bit of fiddling. The text displayed on a button is a separate object from the button itself, so I have had to put some thought into object naming so that I can write code which will change button labels dynamically.
I am including some screenshots from Squareline for the interface I designed.
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. I defined actions within Squareline, such that when the specific navigation button is pressed, it will change the button appearance to look like it has been pressed and will then scroll left or right to a specified screen. Actions were also valuable for the Speed (WPM) slider on the Config screen. When this slider is moved left and right, the GUI will change the actual number for WPM to the right of the slider.
Next, there is a simulator function which can be used to test how well the GUI works. It took some trial and error, but I was able to build and successfully test, navigational actions and the WPM slider.
As I was working on building the afore mentioned WPM slider, and thinking about the default words per minute of Morse to use, my ADHD interrupted me (As usual). I decided to change the default speed that I use for the Arduino Nano based Morse code practice keyer which I keep on my desk. You can learn more about this keyer in episode 3 of this series. And we will also discuss Morse code speed in a future episode in this series. The original code (As found on
https://github.com/jmharvey1/ArduinoCPO
)
specified 12 words per minute (WPM) as the default speed, with buttons to increase or decrease this. However, I am practicing at 20 WPM. Every time I turn on the practice set, I need to turn up the speed and guess when I am close to 20. I went ahead and opened the PracticeOscilator project in Arduino IDE and updated the wpm variable to a value of 20. No, you will not see this change reflected in my own GitHub repo because:
A) I wanted to test it locally first
B) 20 WPM may be a little fast for a default
C) I do not use git the way that it is meant to be used, or the way I SHOULD be using it, with pull requests and all. Bad Trey.
D) I was distracted
ANYWAY, the reason I bring this up is that it is the first time I have used the Arduino IDE to program a board with this system since I upgraded from Ubunto 20.04 to Ubuntu 22.04. 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 upload the updated keyer code. I spent several days troubleshooting, using other Arduino devices, different USB ports, and different cables, all to no avail. If anyone has any recommendations, I am open to suggestions.
So, I dug out my son's old Windows 10 PC and started again. I had to install the Arduino IDE, load all the necessary libraries, and my code from Github (Which I had to manually change once again, because I don't 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 CYD. 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 install Squareline Studio on Windows. Here, I ran into another snag, as my trial license was only for one system, so I had to uninstall Squareline 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 to use instead? If you know of one, please ping me or post a comment.
I wasted more time trying to get the GUI project I had written on the Linux machine imported into Squareline on Windows, all the while thinking of improvements I could make if I started again from scratch. It would not load, and would not load.
In the end, I started all over again.
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 the WPM slider. I exported the UI from Squareline, and I loaded the code it generated into a new project within Arduino IE.
Now was the moment of truth. I followed instructions found on the Pang YouTube channel video
[ESP32 + LVGL] Configuration input device rotary encoder
(
https://www.youtube.com/watch?v=aGM6gu9OpbA
). I connected the CYD and uploaded the code. SUCCESS!!
You can see my "Send" screen loaded perfectly! Now to try other screens.
Wait. Drat. It does not seem like 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 described in another of Pang's videos,
[CYD + LVGL] Configuration Cheap Yellow Display | Easy Guide
(
https://www.youtube.com/watch?v=qmR-mjJVumU
). Nothing worked.
I came to realize that I 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, then expand on it.
Lessons learned, and a good stopping point for this episode. I am 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 benefit from it as well.
Time for an espresso. Maybe I will make it a double. Or even a triple!
Provide feedback on this episode.
