A good user interface (UI) design is very important because it helps users interact with a system easily and enjoyably. A well-designed UI makes information clear, navigation simple, and the overall experience smooth. It ensures that users can focus on what they need to do without getting confused or frustrated.

Every year, I redesign a class timetable for my daughter. This time, when I got the board, the first thing that came to mind was to create the timetable. I later expanded the project by adding features like Google Calendar, Google Tasks, and a reading section.

For all my projects, I begin by using a graphic design tool like Figma, Adobe Illustrator, Photoshop, or Photopea. For this particular project, I designed the user interface and elements using Photopea. After that, I used tools like Squareline Studio or EEZ Studio to build the LVGL UI, which helps bring the designs to life on the hardware display.

Home Screen

On the home screen, I used a sketch drawn by my daughter as the background, which adds a personal and creative touch. I included the current time and date, along with a menu icon to navigate to other screens. The design follows a pixel-style look because the display board only supports two colors: black and white. A Dial Switch is used to select between the timetable, calendar, tasks, and reader screens. The selected screen is indicated by a selection icon that changes based on the Dial Switch position.

In the future, I plan to use a weather API and add dynamic weather icons to make the interface more interesting and engaging. This will allow the display to show real-time weather updates, making it both useful and visually appealing.

In Squareline Studio, I added a label widget to display the time and date on the screen. These values are fetched using NTP (Network Time Protocol) to ensure they are accurate and up to date. I also included a selection icon as an image, which moves its X position based on the Dial Switch input to highlight the current menu option. When Button2 is pressed, it confirms the selection and navigates to the corresponding screen, whether it's the timetable, calendar, tasks, or reader.

Class Timetable

For the class timetable, I created a static background design to keep the layout clean and consistent. I added a day highlight feature to clearly show the next day, making it easier to prepare for the next day's schedule at a quick glance.

In Squareline Studio, the timetable is placed as a static image to keep the layout fixed and clean. The highlight for the current day is added as a separate image file, which can be moved dynamically. 

Calendar

For the calendar, I use Google Calendar to automatically display public holidays. This keeps the calendar up to date without needing manual input. In the future, I plan to enhance it by adding moon phase data and temperature forecasts, 

In Squareline Studio, I placed all the necessary widgets inside a panel to organize the layout efficiently. Using code, I duplicated this panel to display multiple calendar entries and updated the dates and other information dynamically using data from Google Calendar. To achieve this, I created a Google Apps Script and deployed it as a web app. This script fetches calendar data and returns it as a JSON output.

Tasks
For the tasks screen, I placed label widgets inside a panel to display task information. This panel is duplicated dynamically to show multiple tasks, with each label updated based on the data received. I created a separate Google Apps Script to fetch task data from Google Tasks and deployed it as a web app. The script returns the task data in JSON format.

Reader

For the reader screen, I placed a text area widget to display reading content. I'm planning to update this content remotely, either through a simple web server or by integrating a Telegram bot. This will allow me to send new reading material directly to the device, making it easy to keep the content.

Export the UI Files
Once everything looks good in the design, go to the export option in Squareline Studio and create a template project. I have created an OBP specifically for Squareline Studio, which you can find on my GitHub. This OBP includes all the necessary libraries and files required to drive the display.

After exporting the project, rename the files and folders like this

├── Template                              ├── Template
│   └── SLS-OBP-Your-Project              |   └── SLS-OBP-Your-Project
│       ├── libraries                 ➔   │       ├── lib
│       │   └──                           │       │   └── 
│       ├── platformio.ini                │       ├── platformio.ini
│       └── ui                        ➔   │       └── src
│           └── ui.ino                ➔   │           └── main.cpp

The OBP is created specifically for PlatformIO, so there’s no need to set up board settings or install additional libraries manually. Everything you need—board configuration, drivers, and required libraries—is already included and pre-configured in the project. This makes it quick and easy to get started right away.

Code

The code is almost self-explanatory and easy to follow. You can find the full code on my GitHub repository for reference and use.

Thank you