I want to share my experience of how I went about creating a embedded browser based application which would work on a tiny 7 inch lcd display to a large 4K TV. You can download the final Raspberry Pi 4 image from the link given at the bottom of this page to try it out yourself. Please note that this is not production quality code but just a technology demonstration but nevertheless you can use it as a starting point it for your needs if you wish.
What hardware will you need?
- Raspberry Pi 4. I am using 4GB model.
- RTC clock module. They are very cheap to buy and I bought couple of them from thepihut I chose this model has it could fit inside the lcd touchscreen case and it did not use the same GPIO pins as those required by the lcd touchscreen. It is tiny and does the job of keeping time perfectly.
Please do read my previous blogs on how to configure Yocto basic environment if you have not already done so.
The idea was to create a Yocto embedded linux with all Qt modules including QtWebengine and the GUI application using QtWebengine to load the website of our choice. Now QtWebengine is a beast to compile and the documentation around the build part especially on embedded platform is sparse. In order to ensure that we can play online media the webengine has to be built with with the proprietary codecs flags. The build time for the entire process was around 18 hours, so you need to have lot of patience.
The RTC clock stuff
The Raspberry Pi board does not comes with a clock of its own and thus any software modules or services which require accurate time will not function properly. In our case since we would be accessing external websites like Youtube, IMDB from our embedded browser, these websites will refuse to talk to our browser if the date is in the past - most of them will complain that our certificates have expired. Yocto also comes to our rescue here as we do not have to spend time in syncronising hardware time or kernel time for our purpose. All you have to do is to tell Yocto via local.conf that our Pi has RTC on it and it will automatically put a script called hwclock.sh to be launched at startup to sync the kernel time and the RTC clock time. We also need to modify config.txt on the Raspberry Pi so that it knows which clock module we are using. In our case the clock chip is DS3231 which you can see on the pihut website.
Yocto build process
This is a mammoth task and will drain all your energy out so one needs lot of patience. Make sure your virtual machine has atleast 16GB as building qtwebengine needs lot of resources. It took me about 2 weeks of trial and error to fine tune and build a linux image which I desired. I wanted to build almost all Qt and C++ libraries so I could just write different applications for this linux image in future and spend less time with Yocto. I also added a custom logo and christened my linux image as CoffeePlace. Amen. Note that I have not tweaked CoffeePlace to increase maximum no of opened files as this is just a technology demonstration. You can easily do that if you wish should you download the image for your own use. There is no password for the root user. CoffeePlace supports eglfs and linuxfb display protocols. I have included many Qt demos just in case you are interested to see them running here but since they have not been changed for embedded world i.e. there is no Exit button, you will have to pull the plug to quit the application.
The thinking behind GUI Application
The idea was to launch this GUI application on startup after CoffeePlace has finished booting. I have already posted Yocto recipe for doing this in my previous blog if your are interested. This application is what the end user will interact with so it has to be responsive and scalable. Not all users of Raspberry Pi will have touch screens or not all of them will have 4K TV's so this application should accomodate to available display size. What that means for us developers is that instead of specifying height/width or sizes in absolute pixels we need to calculate them at run time based on a formula. Qt makes it painless but it is still trial and error to get the look right. I designed my application for 7 inch lcd touchscreen which has a resolution of 800x480. This was my reference resolution. I did not use any PNG images but instead went for Scalable Vector Graphics which will scale without any distortion.
The application is auto launched with -platform eglfs and -no-sandbox parameters.
The full source code for this application is available at https://github.com/programmerkm/coffeeplace.git
Finally
You can watch the entire process described above including the demo on a 4K TV and the Raspberry official lcd touchscreen below. In order to use the experimental image, you can download it from the link given below, make sure you enter your wifi credentials in the wpa supplicant file located in /etc folder if you plan to use wifi. This is work in progress and I will keep uploading this image till I fine tune and fix any errors. You can use it for any purpose you like.
