The layout of the LCD screen on TPP2(G2) devices equipped with the LCD can be customized using widgets. This project explores the different widgets available and how to configure them.
The LCD page in the Features Tab allows you to add widgets to the LCD screen. Two types of widgets are available. Click on the Add Widget button to add a widget to the screen.
Text Widget
The text widget displays a string on the LCD screen. You can customize some properties of the text widget, such as the font size, color, and text alignment.
Image Widget
The image widget displays an image on the LCD screen. To do so, you first need to upload an image in the Images section of the LCD page. The device supports bitmap images in the .bmp format.
Upon adding an image widget, it is possible to select the image to display on the screen or leave it undefined for now, as the image can be set dynamically with the blocks.
The widgets in the screen preview in the LCD page can be moved around and resized to fit the desired layout. Please note that the widget content will be cropped if it exceeds the dimensions set in the preview.
In our preview, we have added 2 text widgets with different properties and an image widget that will change at runtime. We also added 4 image widgets by the Keypad buttons to indicate the actions that can be performed. These actions are configured with blocks in the AppBlocks tab.
- The Keypad buttons 1 and 2 are each linked to their own variable. Pressing button 1 will increment the value of the first variable and display the updated value in the first text widget on the screen. Similarly, pressing button 2 will increment the value of the second variable and display the updated value in the second text widget.
- The Keypad button 3 is linked to a variable that toggles between 0 and 1 to show two different images on the main image widget depending on the value of the variable.
- The Keypad button 4 clears the content of these 3 widgets so that only the UI icons shown in the preview remain.
A dummy setting was added to the LCD menus to show that opening the LCD menu will disable events that should update the LCD screen. Exiting the LCD menu will re-enable the actions.