Add clock sprite

Author: marcelstoer

.gitignore

@@ -3,3 +3,4 @@
 .vscode/c_cpp_properties.json
 .vscode/launch.json
 .vscode/ipch
+*_cpp

platformio.ini

@@ -54,5 +54,4 @@ lib_deps =
   bodmer/TJpg_Decoder@~1.0.8
   bodmer/JSON_Decoder@~0.0.7
   https://github.com/Bodmer/OpenFontRender#96a29bc ; no tags or releases to reference :( -> pin to Git revision
-  ; squix78/WeatherStation@~2.1.0
-  https://github.com/ThingPulse/esp8266-weather-station#v2.2.0
+  thingpulse/ESP8266 Weather Station@~2.2.0

src/main.cpp

@@ -27,6 +27,7 @@
 OpenFontRender ofr;
 FT6236 ts = FT6236(TFT_HEIGHT, TFT_WIDTH);
 TFT_eSPI tft = TFT_eSPI();
+TFT_eSprite timeSprite = TFT_eSprite(&tft);
 GfxUi ui = GfxUi(&tft, &ofr);
 
 int lastMinute = -1;
@@ -45,12 +46,13 @@ OpenWeatherMapForecastData forecasts[MAX_FORECASTS];
 // Function prototypes (declarations)
 // ----------------------------------------------------------------------------
 void drawProgress(const char *text, int8_t percentage);
+void drawTime();
 void initJpegDecoder();
 void initOpenFontRender();
 bool pushImageToTft(int16_t x, int16_t y, uint16_t w, uint16_t h, uint16_t *bitmap);
 void syncTime();
 void update();
-void updateData();
+void updateData(boolean updateProgressBar);
 
 
 
@@ -67,6 +69,7 @@ void setup(void) {
   initJpegDecoder();
   initTouchScreen(&ts);
   initTft(&tft);
+  timeSprite.createSprite(timeSpritePos.width, timeSpritePos.height);
   logDisplayDebugInfo(&tft);
 
   initFileSystem();
@@ -81,7 +84,10 @@ void loop(void) {
       lastUpdateMillis == 0 ||
       (millis() - lastUpdateMillis) > updateIntervalMillis) {
     update();
+  } else {
+    drawTime();
   }
+  delay(1000);
 }
 
 
@@ -102,6 +108,16 @@ void drawProgress(const char *text, int8_t percentage) {
   ui.drawProgressBar(pbX, pbY, pbWidth, 15, percentage, TFT_WHITE, TFT_TP_BLUE);
 }
 
+void drawTime() {
+  timeSprite.fillSprite(TFT_BLACK);
+  ofr.setFontSize(48);
+  ofr.setDrawer(timeSprite);
+  ofr.drawString(getCurrentTimestamp(UI_TIME_FORMAT).c_str(), timePosX, 0);
+  timeSprite.pushSprite(timeSpritePos.x, timeSpritePos.y);
+  // set the drawer back since we temporarily changed it to the time sprite above
+  ofr.setDrawer(tft);
+}
+
 void initJpegDecoder() {
     // The JPEG image can be scaled by a factor of 1, 2, 4, or 8 (default: 0)
   TJpgDec.setJpgScale(1);
@@ -140,6 +156,7 @@ void syncTime() {
 }
 
 void update() {
+  tft.fillScreen(TFT_BLACK);
   ui.drawLogo();
 
   ofr.setFontSize(16);
@@ -154,14 +171,20 @@ void update() {
   drawProgress("Synchronizing time...", 30);
   syncTime();
 
-  updateData();
+  updateData(true);
 
   drawProgress("Ready", 100);
   lastUpdateMillis = millis();
+
+  tft.fillScreen(TFT_BLACK);
+
+  ofr.setFontSize(16);
+  ofr.cdrawString(String("Last weather update: " + getCurrentTimestamp(UI_TIME_FORMAT_NO_SECONDS)).c_str(), tft.width() / 2, 10);
+  drawTime();
 }
 
-void updateData() {
-  drawProgress("Updating weather...", 70);
+void updateData(boolean updateProgressBar) {
+  if(updateProgressBar) drawProgress("Updating weather...", 70);
   OpenWeatherMapCurrent *currentWeatherClient = new OpenWeatherMapCurrent();
   currentWeatherClient->setMetric(IS_METRIC);
   currentWeatherClient->setLanguage(OPEN_WEATHER_MAP_LANGUAGE);
@@ -170,7 +193,7 @@ void updateData() {
   currentWeatherClient = nullptr;
   log_i("Current weather in %s: %s, %.1fC°", currentWeather.cityName, currentWeather.description.c_str(), currentWeather.feelsLike);
 
-  drawProgress("Updating forecasts...", 90);
+  if(updateProgressBar) drawProgress("Updating forecast...", 90);
   OpenWeatherMapForecast *forecastClient = new OpenWeatherMapForecast();
   forecastClient->setMetric(IS_METRIC);
   forecastClient->setLanguage(OPEN_WEATHER_MAP_LANGUAGE);

src/settings.h

@@ -13,25 +13,24 @@ const char *WIFI_PWD = "yourpassw0rd";
 // timezone Europe/Zurich as per https://github.com/nayarsystems/posix_tz_db/blob/master/zones.csv
 #define TIMEZONE "CET-1CEST,M3.5.0,M10.5.0/3"
 
-// format specifiers: https://cplusplus.com/reference/ctime/strftime/
-#define USER_DATE_FORMAT "%d.%m.%Y"
-#define USER_TIMESTAMP_FORMAT "%d.%m.%Y %H:%M:%S"
+// uncomment to get "08/23/2022 02:55:02 pm" instead of "23.08.2022 14:55:02"
+// #define DATE_TIME_FORMAT_US
 
 // values in metric or imperial system?
 bool IS_METRIC = true;
 
 // OpenWeatherMap Settings
 // Sign up here to get an API key: https://docs.thingpulse.com/how-tos/openweathermap-key/
-String OPEN_WEATHER_MAP_API_KEY = "";
+const String OPEN_WEATHER_MAP_API_KEY = "";
 
 /*
 Go to https://openweathermap.org/find?q= and search for a location. Go through the
 result set and select the entry closest to the actual location you want to display
 data for. It'll be a URL like https://openweathermap.org/city/2657896. The number
 at the end is what you assign to the constant below.
  */
-String OPEN_WEATHER_MAP_LOCATION_ID = "2657896";
-String DISPLAYED_LOCATION_NAME = "Zurich";
+const String OPEN_WEATHER_MAP_LOCATION_ID = "2657896";
+const String DISPLAYED_LOCATION_NAME = "Zurich";
 //String OPEN_WEATHER_MAP_LOCATION_ID = "3833367";
 //String DISPLAYED_LOCATION_NAME = "Ushuaia";
 //String OPEN_WEATHER_MAP_LOCATION_ID = "2147714";
@@ -54,6 +53,15 @@ const String OPEN_WEATHER_MAP_LANGUAGE = "en";
 // ****************************************************************************
 // System settings - do not modify unless you understand what you are doing!
 // ****************************************************************************
+typedef struct RectangleDef {
+  int x;
+  int y;
+  int width;
+  int height;
+} RectangleDef;
+
+RectangleDef timeSpritePos = {0, 30, 320, 55};
+
 // 2: portrait, on/off switch right side -> 0/0 top left
 // 3: landscape, on/off switch at the top -> 0/0 top left
 #define TFT_ROTATION 2
@@ -73,6 +81,21 @@ const String OPEN_WEATHER_MAP_LANGUAGE = "en";
 // the medium blue in the TP logo is 0x0067B0 which converts to 0x0336 in 16bit RGB565
 #define TFT_TP_BLUE 0x0336
 
+// format specifiers: https://cplusplus.com/reference/ctime/strftime/
+#ifdef DATE_TIME_FORMAT_US
+  int timePosX = 29;
+  #define UI_DATE_FORMAT "%m/%d/%Y"
+  #define UI_TIME_FORMAT "%H:%M:%S %P"
+  #define UI_TIME_FORMAT_NO_SECONDS "%I:%M %P"
+  #define UI_TIMESTAMP_FORMAT (UI_DATE_FORMAT + " " + UI_TIME_FORMAT)
+#else
+  int timePosX = 68;
+  #define UI_DATE_FORMAT "%d.%m.%Y"
+  #define UI_TIME_FORMAT "%H:%M:%S"
+  #define UI_TIME_FORMAT_NO_SECONDS "%H:%M"
+  #define UI_TIMESTAMP_FORMAT (UI_DATE_FORMAT + " " + UI_TIME_FORMAT)
+#endif
+
 #define SYSTEM_TIMESTAMP_FORMAT "%Y-%m-%d %H:%M:%S"
 
 #define MAX_FORECASTS 12