enable theme mode

app/src/views/Device.vue

@@ -16,7 +16,6 @@
 
       <v-select
         v-model="form.theme"
-        disabled
         :items="optionsTheme"
         label="Appearance"
         prepend-icon="$palette"

lib/app/app.cpp

@@ -257,6 +257,7 @@ void setupApiSettings()
 			}
 
 			NVS.commit();
+			loadSettingsColor();
 
 			request->send(200, "application/ld+json; charset=utf-8", "{}");
 		} });

lib/face/faceCalendar.cpp

@@ -50,7 +50,7 @@ void showFaceCalendar()
 	GFXcanvas1 *canvas = displayGetCanvas();
 
 	canvas->setRotation(0);
-	canvas->fillScreen(GxEPD_WHITE);
+	canvas->fillScreen(COLOR_FG);
 
 	display_picture();
 	display_calender();
@@ -81,12 +81,12 @@ void display_calender()
 	int16_t tbx, tby;
 	uint16_t tbw, tbh, x;
 	char label[64];
-	canvas->setTextColor(GxEPD_WHITE);
+	canvas->setTextColor(COLOR_FG);
 	canvas->setTextSize(1);
 	canvas->setRotation(0);
 
 	// left side
-	canvas->fillRect(0, 0, sideWidth, canvas->height(), GxEPD_BLACK);
+	canvas->fillRect(0, 0, sideWidth, canvas->height(), COLOR_BG);
 
 	// weekday
 	strftime(label, 64, "%A", &now);
@@ -140,13 +140,13 @@ void display_calender()
 	}
 
 	// current weather
-	canvas->drawLine(15, 320, sideWidth - 15, 320, GxEPD_WHITE);
+	canvas->drawLine(15, 320, sideWidth - 15, 320, COLOR_FG);
 
 	// icon
 	const unsigned char *icon = getIconById(weatherData.current_icon, 64);
 	if (icon)
 	{
-		canvas->drawBitmap(72, 325, icon, 64, 64, GxEPD_BLACK, GxEPD_WHITE);
+		canvas->drawBitmap(72, 325, icon, 64, 64, COLOR_BG, COLOR_FG);
 	}
 
 	// temperature
@@ -186,7 +186,7 @@ void display_time()
 	//display time
 	canvas->setFont(&FreeMonoBold9pt7b); // LARGE_FONT
 	canvas->setTextSize(1);
-	canvas->setTextColor(GxEPD_BLACK);
+	canvas->setTextColor(COLOR_BG);
 	int16_t time_base_y = 60;
 	int16_t time_base_x = 25;
 	canvas->getTextBounds("03", time_base_x, time_base_y, &x1, &y1, &w, &h); // 03 is arbitrary text to get the height and width

lib/face/faceWeather.cpp

@@ -47,8 +47,8 @@ void playlistFaceWeather()
 	GFXcanvas1 *canvas = displayGetCanvas();
 
 	canvas->setRotation(0);
-	canvas->fillScreen(GxEPD_BLACK);
+	canvas->fillScreen(COLOR_BG);
-	canvas->setTextColor(GxEPD_WHITE);
+	canvas->setTextColor(COLOR_FG);
 	canvas->setTextSize(1);
 
 	render_current();
@@ -70,7 +70,7 @@ void render_current()
 	const unsigned char *icon = getIconById(weatherData.current_icon, 256);
 	if (icon)
 	{
-		canvas->drawBitmap(192, 0, icon, 256, 256, GxEPD_BLACK, GxEPD_WHITE);
+		canvas->drawBitmap(192, 0, icon, 256, 256, COLOR_BG, COLOR_FG);
 	}
 
 	// name
@@ -102,11 +102,11 @@ void render_forecast()
 	const unsigned char *icon;
 
 	// line forecast
-	canvas->drawRect(0, 250, 640, 2, GxEPD_WHITE);
+	canvas->drawRect(0, 250, 640, 2, COLOR_FG);
 
-	canvas->drawLine(160, 250, 160, 384, GxEPD_WHITE);
+	canvas->drawLine(160, 250, 160, 384, COLOR_FG);
-	canvas->drawLine(320, 250, 320, 384, GxEPD_WHITE);
+	canvas->drawLine(320, 250, 320, 384, COLOR_FG);
-	canvas->drawLine(480, 250, 480, 384, GxEPD_WHITE);
+	canvas->drawLine(480, 250, 480, 384, COLOR_FG);
 	// 160 per block
 
 	canvas->setTextSize(1);
@@ -121,7 +121,7 @@ void render_forecast()
 	icon = getIconById(weatherData.forecast_1_icon, 64);
 	if (icon)
 	{
-		canvas->drawBitmap(0 + 48, 260, icon, 64, 64, GxEPD_BLACK, GxEPD_WHITE);
+		canvas->drawBitmap(0 + 48, 260, icon, 64, 64, COLOR_BG, COLOR_FG);
 
 		sprintf(label, "%2d ... %2d", weatherData.forecast_1_min, weatherData.forecast_1_max);
 		canvas->getTextBounds(label, 0, 0, &tbx, &tby, &tbw, &tbh);
@@ -134,7 +134,7 @@ void render_forecast()
 	icon = getIconById(weatherData.forecast_2_icon, 64);
 	if (icon)
 	{
-		canvas->drawBitmap(160 + 48, 260, icon, 64, 64, GxEPD_BLACK, GxEPD_WHITE);
+		canvas->drawBitmap(160 + 48, 260, icon, 64, 64, COLOR_BG, COLOR_FG);
 
 		sprintf(label, "%2d ... %2d", weatherData.forecast_2_min, weatherData.forecast_2_max);
 		canvas->getTextBounds(label, 0, 0, &tbx, &tby, &tbw, &tbh);
@@ -147,7 +147,7 @@ void render_forecast()
 	icon = getIconById(weatherData.forecast_3_icon, 64);
 	if (icon)
 	{
-		canvas->drawBitmap(320 + 48, 260, icon, 64, 64, GxEPD_BLACK, GxEPD_WHITE);
+		canvas->drawBitmap(320 + 48, 260, icon, 64, 64, COLOR_BG, COLOR_FG);
 
 		sprintf(label, "%2d ... %2d", weatherData.forecast_3_min, weatherData.forecast_3_max);
 		canvas->getTextBounds(label, 0, 0, &tbx, &tby, &tbw, &tbh);
@@ -160,7 +160,7 @@ void render_forecast()
 	icon = getIconById(weatherData.forecast_4_icon, 64);
 	if (icon)
 	{
-		canvas->drawBitmap(480 + 48, 260, icon, 64, 64, GxEPD_BLACK, GxEPD_WHITE);
+		canvas->drawBitmap(480 + 48, 260, icon, 64, 64, COLOR_BG, COLOR_FG);
 
 		sprintf(label, "%2d ... %2d", weatherData.forecast_4_min, weatherData.forecast_4_max);
 		canvas->getTextBounds(label, 0, 0, &tbx, &tby, &tbw, &tbh);

lib/settings/settings.cpp

@@ -1,8 +1,13 @@
 #include "settings.h"
 
+uint16_t COLOR_FG = 0x0000;
+uint16_t COLOR_BG = 0xFFFF;
+
 void setupSettings()
 {
 	NVS.begin();
+
+	loadSettingsColor();
 }
 
 void settingsFactoryReset()
@@ -10,4 +15,18 @@ void settingsFactoryReset()
 	NVS.eraseAll();
 
 	// TODO remove also json db file
+}
+
+void loadSettingsColor()
+{
+	if (NVS.getString("device.theme") == "black")
+	{
+		COLOR_FG = 0xFFFF;
+		COLOR_BG = 0x0000;
+	}
+	else
+	{
+		COLOR_FG = 0x0000;
+		COLOR_BG = 0xFFFF;
+	}
 }

lib/settings/settings.h

@@ -3,8 +3,11 @@
 
 #include "ArduinoNvs.h"
 
+extern uint16_t COLOR_FG;
+extern uint16_t COLOR_BG;
+
 void setupSettings();
 void settingsFactoryReset();
-
+void loadSettingsColor();
 
 #endif