WatchGui < IoT_Course_English

---+ The T-Watch Graphical User Interface and how to add your own applications and settings
---++ Introduction

The " [[https://github.com/sharandac/My-TTGO-Watch/blob/master/src/app/weather/weather.cpp][factory firmware]]" is developed by Dirk Brosswick. It is a rather complex C++ program developed under platformio in an Arduino framework. I tried to follow, as far as possible, the same structure and I translated the C++ calls to LVGL into their !MicroPython equivalents.

The infrastructure can be tested with the Unix port of !MicroPython in conjunction with LVGL, based on the SDL2 driver. This allows me to quickly test the complete !GUI on the PC as long as no hardware dependent features are used. This means that power management using the axp202, time functionality using the pcf8563 or applications using the bma423 accelerometer must be separated from the !GUI code.
---++ The Graphical User Interface

When the program boots a splash screen is shown, while hardware initialization takes place.

<img alt="splash_screen.png" height="279" src="%ATTACHURL%/splash_screen.png" title="splash_screen.png" width="242" />

Once that the hardware is ready the twatch first connects to !WiFi and then reads the current date and time from NTP and sets the pcf8563 real time clock. After that the !GUI is started

The GUI is based on the LVGL tile view widget (lv.tileview). The base !GUI consists of 8 tiles as a matrix with 4 columns and 2 rows. The upper row is used for _applications_ while the lower row contains a<i> note</i> tile and all the _setup_ functions.
   * The upper row:
      * The main tile (position 0,0) comes up when the program is started. In this tile the default application is run
      * 3 tiles are reserved for applications (only the first 2 tiles are used for the moment)
   * The lower row
      * The first tile is reserved as a _note_ tile, which is unused for the moment
      * 3 tiles are reserved for setups (only the first 2 tiles are used for the moment)

| <img alt="main_tile.png" height="279" src="%ATTACHURL%/main_tile.png" title="main_tile.png" width="242" /> | <img alt="app_tile_1.png" height="279" src="%ATTACHURL%/app_tile_1.png" title="app_tile_1.png" width="242" /> | <img alt="app_tile_2.png" height="279" src="%ATTACHURL%/app_tile_2.png" title="app_tile_2.png" width="242" /> |
| <img alt="note_tile.png" src="%ATTACHURL%/note_tile.png" title="note_tile.png" /> | <img alt="setup_tile_1.png" src="%ATTACHURL%/setup_tile_1.png" title="setup_tile_1.png" /> | <img alt="setup_tile_2.png" height="279" src="%ATTACHURL%/setup_tile_2.png" title="setup_tile_2.png" width="242" /> |
The individual tiles use a style with transparent OPA (opacity) such that the wallpaper on the tile view is visible on all tiles. In addition, a status bar shows the current state of the hardware like
   * !WiFi state
   * battery charge
   * step counter
   * !BlueTooth state
---++ Adding applications
---++ 

-- %USERSIG{UliRaich - 2021-01-28}%

---++ Comments

%COMMENT%

Attachments

Topic attachments
I	Attachment	History	Action	Size	Date	Who
png	app_tile_1.png	r2 r1	manage	97.1 K	2021-02-13 - 09:59	UliRaich
png	app_tile_2.png	r2 r1	manage	90.5 K	2021-02-13 - 09:59	UliRaich
png	main_tile.png	r2 r1	manage	94.0 K	2021-02-13 - 09:59	UliRaich
png	note_tile.png	r1	manage	91.5 K	2021-02-01 - 10:54	UliRaich
png	setup_tile_1.png	r1	manage	93.1 K	2021-02-01 - 10:54	UliRaich
png	setup_tile_2.png	r1	manage	92.8 K	2021-02-01 - 10:54	UliRaich
png	splash_screen.png	r1	manage	9.0 K	2021-02-01 - 10:54	UliRaich

This topic: IoT_Course_English > WebHome > WatchGui
Topic revision: r6 - 2021-02-13 - UliRaich