Add touch panel port to lvgl.

PoC of user interaction with 3 screen (clock, menu and app).

9 files changed, 412 insertions, 23 deletions

diff --git a/src/DisplayApp/Screens/Clock.cpp b/src/DisplayApp/Screens/Clock.cpp
index a413476a..8513d3ed 100644
--- a/src/DisplayApp/Screens/Clock.cpp
+++ b/src/DisplayApp/Screens/Clock.cpp
@@ -4,12 +4,24 @@
 #include <Version.h>
 #include <libs/lvgl/lvgl.h>
 #include "Clock.h"
+#include "../DisplayApp.h"
 
 using namespace Pinetime::Applications::Screens;
 extern lv_font_t jetbrains_mono_extrabold_compressedextrabold_compressed;
 extern lv_font_t jetbrains_mono_bold_20;
 
-Clock::Clock(Pinetime::Components::Gfx &gfx) : Screen(gfx), currentDateTime{{}}, version {{}} {
+static void event_handler(lv_obj_t * obj, lv_event_t event) {
+  Clock* screen = static_cast<Clock *>(obj->user_data);
+  screen->OnObjectEvent(obj, event);
+}
+
+Clock::Clock(DisplayApp* app, Pinetime::Components::Gfx &gfx, Controllers::DateTime& dateTimeController) : Screen(app, gfx), currentDateTime{{}}, version {{}}, dateTimeController{dateTimeController} {
+  displayedChar[0] = 0;
+  displayedChar[1] = 0;
+  displayedChar[2] = 0;
+  displayedChar[3] = 0;
+  displayedChar[4] = 0;
+
   label_battery = lv_label_create(lv_scr_act(), NULL);
   lv_obj_align(label_battery, lv_scr_act(), LV_ALIGN_IN_TOP_RIGHT, -80, 0);
 
@@ -38,11 +50,24 @@ Clock::Clock(Pinetime::Components::Gfx &gfx) : Screen(gfx), currentDateTime{{}},
   lv_label_set_style(label_version, LV_LABEL_STYLE_MAIN, labelStyle);
   lv_obj_align(label_version, lv_scr_act(), LV_ALIGN_IN_LEFT_MID, 0, 100);
 
+  backgroundLabel = lv_label_create(lv_scr_act(), NULL);
+  backgroundLabel->user_data = this;
+  lv_label_set_style(backgroundLabel, LV_LABEL_STYLE_MAIN, labelStyle);
+  lv_obj_set_click(backgroundLabel, true);
+  lv_obj_set_event_cb(backgroundLabel, event_handler);
+  lv_label_set_long_mode(backgroundLabel, LV_LABEL_LONG_CROP);
+  lv_obj_set_size(backgroundLabel, 240, 240);
+  lv_obj_set_pos(backgroundLabel, 0, 0);
+  lv_label_set_text(backgroundLabel, "");
+}
+
+Clock::~Clock() {
+  lv_obj_clean(lv_scr_act());
 }
 
 void Clock::Refresh(bool fullRefresh) {
   if(fullRefresh) {
-    auto dummy = currentDateTime.Get();
+    auto currentDateTime = dateTimeController.CurrentDateTime();
   }
 
   if (fullRefresh || batteryPercentRemaining.IsUpdated()) {
@@ -62,6 +87,8 @@ void Clock::Refresh(bool fullRefresh) {
     // TODO color
   }
 
+  currentDateTime = dateTimeController.CurrentDateTime();
+
   if(fullRefresh || currentDateTime.IsUpdated()) {
     auto newDateTime = currentDateTime.Get();
 
@@ -86,10 +113,17 @@ void Clock::Refresh(bool fullRefresh) {
 
     char timeStr[6];
     sprintf(timeStr, "%c%c:%c%c", hoursChar[0],hoursChar[1],minutesChar[0], minutesChar[1]);
-    lv_label_set_text(label_time, timeStr);
+
+    if(hoursChar[0] != displayedChar[0] || hoursChar[1] != displayedChar[1] || minutesChar[0] != displayedChar[2] || minutesChar[1] != displayedChar[3]) {
+      displayedChar[0] = hoursChar[0];
+      displayedChar[1] = hoursChar[1];
+      displayedChar[2] = minutesChar[0];
+      displayedChar[3] = minutesChar[1];
+
+      lv_label_set_text(label_time, timeStr);
+    }
 
     if ((year != currentYear) || (month != currentMonth) || (dayOfWeek != currentDayOfWeek) || (day != currentDay)) {
-      gfx.FillRectangle(0,180, 240, 15, 0x0000);
       char dateStr[22];
       sprintf(dateStr, "%s %d %s %d", DayOfWeekToString(dayOfWeek), day, MonthToString(month), year);
       lv_label_set_text(label_date, dateStr);
@@ -103,9 +137,10 @@ void Clock::Refresh(bool fullRefresh) {
   }
 
   if(fullRefresh || version.IsUpdated()) {
-    char version[20];
-    sprintf(version, "VERSION: %d.%d.%d", Version::Major(), Version::Minor(), Version::Patch());
-    lv_label_set_text(label_version, version);
+    auto dummy = version.Get();
+    char versionStr[20];
+    sprintf(versionStr, "VERSION: %d.%d.%d", Version::Major(), Version::Minor(), Version::Patch());
+    lv_label_set_text(label_version, versionStr);
   }
 
 }
@@ -145,4 +180,12 @@ char const *Clock::MonthsString[] = {
         "DEC"
 };
 
+void Clock::OnObjectEvent(lv_obj_t *obj, lv_event_t event) {
+  if(obj == backgroundLabel) {
+    if (event == LV_EVENT_CLICKED) {
+      nextScreen = NextScreen::Menu;
+    }
+  }
+}
+
 
diff --git a/src/DisplayApp/Screens/Clock.h b/src/DisplayApp/Screens/Clock.h
index f5328535..d6e5a288 100644
--- a/src/DisplayApp/Screens/Clock.h
+++ b/src/DisplayApp/Screens/Clock.h
@@ -21,7 +21,7 @@ namespace Pinetime {
           explicit DirtyValue(T v) { value = v; }
           explicit DirtyValue(T& v) { value = v; }
           bool IsUpdated() const { return isUpdated; }
-          T& Get() { return value; this->isUpdated = false;}
+          T& Get() { this->isUpdated = false; return value; }
 
           DirtyValue& operator=(const T& other) {
             this->value = other;
@@ -35,19 +35,23 @@ namespace Pinetime {
       class Clock : public Screen{
         public:
           enum class BleConnectionStates{ NotConnected, Connected};
-          Clock(Components::Gfx& gfx);
+          Clock(DisplayApp* app, Components::Gfx& gfx, Controllers::DateTime& dateTimeController);
+          ~Clock() override;
           void Refresh(bool fullRefresh) override;
 
           void SetBatteryPercentRemaining(uint8_t percent) { batteryPercentRemaining = percent; }
           void SetBleConnectionState(BleConnectionStates state) { bleState = state; }
           void SetCurrentDateTime(const std::chrono::time_point<std::chrono::system_clock, std::chrono::milliseconds>& tp) { currentDateTime = tp;}
 
+          void OnObjectEvent(lv_obj_t *pObj, lv_event_t i);
         private:
           static const char* MonthToString(Pinetime::Controllers::DateTime::Months month);
           static const char* DayOfWeekToString(Pinetime::Controllers::DateTime::Days dayOfWeek);
           static char const *DaysString[];
           static char const *MonthsString[];
 
+          char displayedChar[5];
+
           const FONT_INFO largeFont {lCD_70ptFontInfo.height, lCD_70ptFontInfo.startChar, lCD_70ptFontInfo.endChar, lCD_70ptFontInfo.spacePixels, lCD_70ptFontInfo.charInfo, lCD_70ptFontInfo.data};
           const FONT_INFO smallFont {lCD_14ptFontInfo.height, lCD_14ptFontInfo.startChar, lCD_14ptFontInfo.endChar, lCD_14ptFontInfo.spacePixels, lCD_14ptFontInfo.charInfo, lCD_14ptFontInfo.data};
 
@@ -69,6 +73,9 @@ namespace Pinetime {
           lv_obj_t* label_time;
           lv_obj_t* label_date;
           lv_obj_t* label_version;
+          lv_obj_t* backgroundLabel;
+
+          Controllers::DateTime& dateTimeController;
 
       };
     }
diff --git a/src/DisplayApp/Screens/Message.cpp b/src/DisplayApp/Screens/Message.cpp
index 8ffad413..c9e0938f 100644
--- a/src/DisplayApp/Screens/Message.cpp
+++ b/src/DisplayApp/Screens/Message.cpp
@@ -5,24 +5,77 @@
 #include <libs/lvgl/src/lv_core/lv_obj.h>
 #include <libs/lvgl/src/lv_font/lv_font.h>
 #include <libs/lvgl/lvgl.h>
+#include <libraries/log/nrf_log.h>
 #include "Message.h"
+#include <DisplayApp/DisplayApp.h>
+
 
 using namespace Pinetime::Applications::Screens;
 
-extern lv_font_t jetbrains_mono_extrabold_compressedextrabold_compressed;
+extern lv_font_t jetbrains_mono_bold_20;
+
+static void event_handler(lv_obj_t * obj, lv_event_t event) {
+  Message* screen = static_cast<Message *>(obj->user_data);
+  screen->OnObjectEvent(obj, event);
+}
+
+Message::Message(DisplayApp* app, Pinetime::Components::Gfx &gfx) : Screen(app, gfx) {
+
+  backgroundLabel = lv_label_create(lv_scr_act(), NULL);
+  backgroundLabel->user_data = this;
+
+  labelStyle = const_cast<lv_style_t *>(lv_label_get_style(backgroundLabel, LV_LABEL_STYLE_MAIN));
+  labelStyle->text.font = &jetbrains_mono_bold_20;
+
+  lv_label_set_style(backgroundLabel, LV_LABEL_STYLE_MAIN, labelStyle);
+  lv_obj_set_click(backgroundLabel, true);
+  lv_obj_set_event_cb(backgroundLabel, event_handler);
+  lv_label_set_long_mode(backgroundLabel, LV_LABEL_LONG_CROP);
+  lv_obj_set_size(backgroundLabel, 240, 240);
+  lv_obj_set_pos(backgroundLabel, 0, 0);
+  lv_label_set_text(backgroundLabel, "");
+//  lv_obj_align(backgroundLabel, NULL, LV_ALIGN_IN_TOP_LEFT, 0, 0);
+
+  button = lv_btn_create(lv_scr_act(), NULL);
+  lv_obj_set_event_cb(button, event_handler);
+  lv_obj_align(button, NULL, LV_ALIGN_CENTER, 0, -40);
+  button->user_data = this;
+
+  label = lv_label_create(button, NULL);
+  lv_label_set_style(label, LV_LABEL_STYLE_MAIN, labelStyle);
+  lv_label_set_text(label, "Hello!");
+
+  labelClick = lv_label_create(lv_scr_act(), NULL);
+  lv_label_set_style(labelClick, LV_LABEL_STYLE_MAIN, labelStyle);
+  lv_obj_align(labelClick, button, LV_ALIGN_OUT_BOTTOM_MID, 0, 30);
+  lv_label_set_text(labelClick, "0");
+}
+
+Message::~Message() {
+  lv_obj_clean(lv_scr_act());
+}
 
-lv_obj_t * label;
-int x = 0;
 void Message::Refresh(bool fullRefresh) {
-  if(fullRefresh) {
-    label = lv_label_create(lv_scr_act(), NULL);          /*Add a label to the button*/
-    labelStyle = const_cast<lv_style_t *>(lv_label_get_style(label, LV_LABEL_STYLE_MAIN));
-    labelStyle->text.font = &jetbrains_mono_extrabold_compressedextrabold_compressed;
-    lv_label_set_style(label, LV_LABEL_STYLE_MAIN, labelStyle);
-    lv_label_set_text(label, "01:23");                     /*Set the labels text*/
-  } else {
-    lv_obj_set_pos(label, 0, x++);
-    if(x > 200) x = 0;
+  if(previousClickCount != clickCount) {
+    lv_label_set_text_fmt(labelClick, "%d", clickCount);
+    previousClickCount = clickCount;
   }
+}
 
+void Message::OnObjectEvent(lv_obj_t *obj, lv_event_t event) {
+  if(obj == backgroundLabel) {
+    if(event == LV_EVENT_CLICKED) {
+      app->PushMessage(DisplayApp::Messages::SwitchScreen);
+      NRF_LOG_INFO("SCREEN");
+    }
+    return ;
+  }
+
+  if(event == LV_EVENT_CLICKED) {
+    NRF_LOG_INFO("Clicked");
+    clickCount++;
+  }
+  else if(event == LV_EVENT_VALUE_CHANGED) {
+    NRF_LOG_INFO("Toggled");
+  }
 }
diff --git a/src/DisplayApp/Screens/Message.h b/src/DisplayApp/Screens/Message.h
index 419c2e62..2f1da942 100644
--- a/src/DisplayApp/Screens/Message.h
+++ b/src/DisplayApp/Screens/Message.h
@@ -15,14 +15,24 @@ namespace Pinetime {
     namespace Screens {
       class Message : public Screen{
         public:
-          Message(Components::Gfx& gfx) : Screen(gfx) {}
+          explicit Message(DisplayApp* app, Components::Gfx& gfx);
+          ~Message() override;
           void Refresh(bool fullRefresh) override;
+          void OnObjectEvent(lv_obj_t* obj, lv_event_t event);
+          void OnButtonPushed() override { nextScreen = Screen::NextScreen::Menu; }
 
         private:
           const FONT_INFO largeFont {lCD_70ptFontInfo.height, lCD_70ptFontInfo.startChar, lCD_70ptFontInfo.endChar, lCD_70ptFontInfo.spacePixels, lCD_70ptFontInfo.charInfo, lCD_70ptFontInfo.data};
           const FONT_INFO smallFont {lCD_14ptFontInfo.height, lCD_14ptFontInfo.startChar, lCD_14ptFontInfo.endChar, lCD_14ptFontInfo.spacePixels, lCD_14ptFontInfo.charInfo, lCD_14ptFontInfo.data};
 
           lv_style_t* labelStyle;
+          lv_obj_t * label;
+          lv_obj_t* backgroundLabel;
+          lv_obj_t * button;
+          lv_obj_t * labelClick;
+
+          uint32_t clickCount = 0 ;
+          uint32_t previousClickCount = 0;
       };
     }
   }
diff --git a/src/DisplayApp/Screens/Screen.h b/src/DisplayApp/Screens/Screen.h
index 5e2fa43e..57b8ea2a 100644
--- a/src/DisplayApp/Screens/Screen.h
+++ b/src/DisplayApp/Screens/Screen.h
@@ -4,14 +4,21 @@
 
 namespace Pinetime {
   namespace Applications {
+    class DisplayApp;
     namespace Screens {
       class Screen {
         public:
-          Screen(Components::Gfx& gfx) : gfx{gfx} {}
+          enum class NextScreen {None, Clock, Menu, App};
+          Screen(DisplayApp* app, Components::Gfx& gfx) : app{app}, gfx{gfx} {}
+          virtual ~Screen() = default;
           virtual void Refresh(bool fullRefresh) = 0;
+          NextScreen GetNextScreen() {return nextScreen;}
+          virtual void OnButtonPushed() {};
 
         protected:
+          DisplayApp* app;
           Components::Gfx& gfx;
+          NextScreen nextScreen = NextScreen::None;
       };
     }
   }
diff --git a/src/DisplayApp/Screens/Tab.cpp b/src/DisplayApp/Screens/Tab.cpp
new file mode 100644
index 00000000..adc32578
--- /dev/null
+++ b/src/DisplayApp/Screens/Tab.cpp
@@ -0,0 +1,67 @@
+#include <cstdio>
+#include <libs/date/includes/date/date.h>
+#include <Components/DateTime/DateTimeController.h>
+#include <Version.h>
+#include <libs/lvgl/src/lv_core/lv_obj.h>
+#include <libs/lvgl/src/lv_font/lv_font.h>
+#include <libs/lvgl/lvgl.h>
+#include <libraries/log/nrf_log.h>
+#include "Tab.h"
+#include <DisplayApp/DisplayApp.h>
+
+
+using namespace Pinetime::Applications::Screens;
+
+extern lv_font_t jetbrains_mono_bold_20;
+
+//static void event_handler(lv_obj_t * obj, lv_event_t event) {
+//  Tile* screen = static_cast<Tile *>(obj->user_data);
+//  screen->OnObjectEvent(obj, event);
+//}
+
+Tab::Tab(DisplayApp* app, Pinetime::Components::Gfx &gfx) : Screen(app, gfx) {
+/*Create a Tab view object*/
+  lv_obj_t *tabview;
+  tabview = lv_tabview_create(lv_scr_act(), NULL);
+
+  /*Add 3 tabs (the tabs are page (lv_page) and can be scrolled*/
+  lv_obj_t *tab1 = lv_tabview_add_tab(tabview, "Tab 1");
+  lv_obj_t *tab2 = lv_tabview_add_tab(tabview, "Tab 2");
+  lv_obj_t *tab3 = lv_tabview_add_tab(tabview, "Tab 3");
+
+
+  /*Add content to the tabs*/
+  lv_obj_t * label = lv_label_create(tab1, NULL);
+  lv_label_set_text(label, "This the first tab\n\n"
+                           "If the content\n"
+                           "of a tab\n"
+                           "become too long\n"
+                           "the it \n"
+                           "automatically\n"
+                           "become\n"
+                           "scrollable.");
+
+  label = lv_label_create(tab2, NULL);
+  lv_label_set_text(label, "Second tab");
+
+  label = lv_label_create(tab3, NULL);
+  lv_label_set_text(label, "Third tab");
+
+}
+
+Tab::~Tab() {
+  lv_obj_clean(lv_scr_act());
+}
+
+void Tab::Refresh(bool fullRefresh) {
+
+}
+
+void Tab::OnObjectEvent(lv_obj_t *obj, lv_event_t event) {
+  if(event == LV_EVENT_CLICKED) {
+    NRF_LOG_INFO("Clicked");
+  }
+  else if(event == LV_EVENT_VALUE_CHANGED) {
+    NRF_LOG_INFO("Toggled");
+  }
+}
diff --git a/src/DisplayApp/Screens/Tab.h b/src/DisplayApp/Screens/Tab.h
new file mode 100644
index 00000000..1af956f4
--- /dev/null
+++ b/src/DisplayApp/Screens/Tab.h
@@ -0,0 +1,28 @@
+#pragma once
+
+#include <cstdint>
+#include <chrono>
+#include <Components/Gfx/Gfx.h>
+#include "Screen.h"
+#include <bits/unique_ptr.h>
+#include "../Fonts/lcdfont14.h"
+#include "../Fonts/lcdfont70.h"
+#include "../../Version.h"
+#include <lvgl/src/lv_core/lv_style.h>
+
+namespace Pinetime {
+  namespace Applications {
+    namespace Screens {
+      class Tab : public Screen {
+        public:
+          explicit Tab(DisplayApp* app, Components::Gfx& gfx);
+          ~Tab() override;
+          void Refresh(bool fullRefresh) override;
+          void OnObjectEvent(lv_obj_t* obj, lv_event_t event);
+
+        private:
+
+      };
+    }
+  }
+}
diff --git a/src/DisplayApp/Screens/Tile.cpp b/src/DisplayApp/Screens/Tile.cpp
new file mode 100644
index 00000000..d89562c7
--- /dev/null
+++ b/src/DisplayApp/Screens/Tile.cpp
@@ -0,0 +1,118 @@
+#include <cstdio>
+#include <libs/date/includes/date/date.h>
+#include <Components/DateTime/DateTimeController.h>
+#include <Version.h>
+#include <libs/lvgl/src/lv_core/lv_obj.h>
+#include <libs/lvgl/src/lv_font/lv_font.h>
+#include <libs/lvgl/lvgl.h>
+#include <libraries/log/nrf_log.h>
+#include "Tile.h"
+#include <DisplayApp/DisplayApp.h>
+#include <libs/lvgl/src/lv_core/lv_style.h>
+
+
+using namespace Pinetime::Applications::Screens;
+
+extern lv_font_t jetbrains_mono_bold_20;
+
+static void event_handler(lv_obj_t * obj, lv_event_t event) {
+  Tile* screen = static_cast<Tile *>(obj->user_data);
+  screen->OnObjectEvent(obj, event);
+}
+
+//static const char * btnm_map1[] = {"App1", "App2", "App3", "\n", "App4", "App5", "App11", ""};
+//static const char * btnm_map2[] = {"App6", "App7", "App8", "\n", "App9", "App10", "App22",""};
+static const char * btnm_map1[] = {"App1", ""};
+
+Tile::Tile(DisplayApp* app, Pinetime::Components::Gfx &gfx) : Screen(app, gfx) {
+
+  static lv_point_t valid_pos[] = {{0,0}, {LV_COORD_MIN, LV_COORD_MIN}};
+  tileview = lv_tileview_create(lv_scr_act(), NULL);
+  lv_tileview_set_valid_positions(tileview, valid_pos, 1);
+  lv_tileview_set_edge_flash(tileview, false);
+
+  tile1 = lv_obj_create(tileview, NULL);
+  lv_obj_set_pos(tile1, 0, 0);
+  lv_obj_set_size(tile1, LV_HOR_RES, LV_VER_RES);
+  lv_tileview_add_element(tileview, tile1);
+
+  btnm1 = lv_btnm_create(tile1, NULL);
+  lv_btnm_set_map(btnm1, btnm_map1);
+  lv_obj_set_size(btnm1, LV_HOR_RES, LV_VER_RES);
+
+  labelStyle = const_cast<lv_style_t *>(lv_label_get_style(btnm1, LV_BTNM_STYLE_BTN_REL));
+  labelStyle->text.font = &jetbrains_mono_bold_20;
+  labelStyle->body.grad_color = labelStyle->body.main_color;
+  lv_btnm_set_style(btnm1, LV_BTNM_STYLE_BTN_REL, labelStyle);
+  lv_btnm_set_style(btnm1, LV_BTNM_STYLE_BTN_PR, labelStyle);
+
+  lv_obj_align(btnm1, tile1, LV_ALIGN_CENTER, 0, 0);
+  btnm1->user_data = this;
+  lv_obj_set_event_cb(btnm1, event_handler);
+/*
+  tile2 = lv_obj_create(tileview, NULL);
+  lv_obj_set_pos(tile2, 0, LV_VER_RES);
+  lv_obj_set_size(tile2, LV_HOR_RES, LV_VER_RES);
+  lv_tileview_add_element(tileview, tile2);
+
+  btnm2 = lv_btnm_create(tileview, NULL);
+  lv_btnm_set_map(btnm2, btnm_map2);
+  lv_obj_align(btnm2, tile2, LV_ALIGN_CENTER, 0, 0);
+*/
+/*
+  tile1 = lv_obj_create(tileview, NULL);
+  lv_obj_set_pos(tile1, 0, 0);
+  lv_obj_set_size(tile1, LV_HOR_RES, LV_VER_RES);
+  lv_tileview_add_element(tileview, tile1);
+
+  btn1 = lv_btn_create(tile1, NULL);
+  lv_obj_align(btn1, tile1, LV_ALIGN_CENTER, 0, 0);
+
+  label1 = lv_label_create(btn1, NULL);
+  lv_label_set_text(label1, "Button1");
+*/
+/*
+  tile2 = lv_obj_create(tileview, NULL);
+  lv_obj_set_pos(tile2, 0, LV_VER_RES);
+  lv_obj_set_size(tile2, LV_HOR_RES, LV_VER_RES);
+  lv_tileview_add_element(tileview, tile2);
+
+  btn2 = lv_btn_create(tile2, NULL);
+  lv_obj_align(btn2, tile2, LV_ALIGN_CENTER, 0, 0);
+
+
+  label2 = lv_label_create(btn2, NULL);
+  lv_label_set_text(label2, "Button2");
+
+  tile3 = lv_obj_create(tileview, NULL);
+  lv_obj_set_pos(tile3, 0, LV_VER_RES*2);
+  lv_obj_set_size(tile3, LV_HOR_RES, LV_VER_RES);
+  lv_tileview_add_element(tileview, tile3);
+
+  btn3 = lv_btn_create(tile3, NULL);
+  lv_obj_align(btn3, tile3, LV_ALIGN_CENTER, 0, 0);
+
+
+  label3 = lv_label_create(btn3, NULL);
+  lv_label_set_text(label3, "Button3");
+*/
+}
+
+Tile::~Tile() {
+  lv_obj_clean(lv_scr_act());
+}
+
+void Tile::Refresh(bool fullRefresh) {
+
+}
+
+void Tile::OnObjectEvent(lv_obj_t *obj, lv_event_t event) {
+  if(event == LV_EVENT_CLICKED) {
+    NRF_LOG_INFO("Clicked");
+    nextScreen = Screen::NextScreen::App;
+    clickCount++;
+  }
+  else if(event == LV_EVENT_VALUE_CHANGED) {
+    NRF_LOG_INFO("Toggled");
+  }
+}
diff --git a/src/DisplayApp/Screens/Tile.h b/src/DisplayApp/Screens/Tile.h
new file mode 100644
index 00000000..c9de2c5c
--- /dev/null
+++ b/src/DisplayApp/Screens/Tile.h
@@ -0,0 +1,56 @@
+#pragma once
+
+#include <cstdint>
+#include <chrono>
+#include <Components/Gfx/Gfx.h>
+#include "Screen.h"
+#include <bits/unique_ptr.h>
+#include "../Fonts/lcdfont14.h"
+#include "../Fonts/lcdfont70.h"
+#include "../../Version.h"
+#include <lvgl/src/lv_core/lv_style.h>
+
+namespace Pinetime {
+  namespace Applications {
+    namespace Screens {
+      class Tile : public Screen {
+        public:
+          explicit Tile(DisplayApp* app, Components::Gfx& gfx);
+          ~Tile() override;
+          void Refresh(bool fullRefresh) override;
+          void OnObjectEvent(lv_obj_t* obj, lv_event_t event);
+
+          void OnButtonPushed() override {nextScreen = NextScreen::Clock;}
+
+        private:
+          const FONT_INFO largeFont {lCD_70ptFontInfo.height, lCD_70ptFontInfo.startChar, lCD_70ptFontInfo.endChar, lCD_70ptFontInfo.spacePixels, lCD_70ptFontInfo.charInfo, lCD_70ptFontInfo.data};
+          const FONT_INFO smallFont {lCD_14ptFontInfo.height, lCD_14ptFontInfo.startChar, lCD_14ptFontInfo.endChar, lCD_14ptFontInfo.spacePixels, lCD_14ptFontInfo.charInfo, lCD_14ptFontInfo.data};
+
+          lv_style_t* labelStyle;
+          lv_obj_t * label1;
+          lv_obj_t * label2;
+          lv_obj_t * label3;
+
+          lv_obj_t* backgroundLabel;
+          lv_obj_t * button;
+          lv_obj_t * labelClick;
+
+          lv_obj_t *tileview;
+          lv_obj_t * tile1;
+          lv_obj_t * tile2;
+          lv_obj_t * list;
+          lv_obj_t * list_btn;
+          lv_obj_t * tile3;
+          lv_obj_t * btn1;
+          lv_obj_t * btn2;
+          lv_obj_t * btn3;
+
+          lv_obj_t * btnm1;
+          lv_obj_t * btnm2;
+
+          uint32_t clickCount = 0 ;
+          uint32_t previousClickCount = 0;
+      };
+    }
+  }
+}