Added concept of Background Screen that allows for construction of pages before knowing the final parent.

This will allow for easy creation of "pages" that can be layed out internally and passed to different screens and cleaned up when screens are cleaned up by the screen manager

add set width and height to base elements that allow for easy resizing

Create a settings page and make it red.
Test adding 2 tabs with the Page

this currently does not do anything fantastic on simulator but it sets a strong foundation for managing multiple pages

Platformio/OmoteUI/core/UIElement.cpp

@@ -12,6 +12,18 @@ void UIElement::AddElement(UIElement *anUIElement) {
 
 bool UIElement::IsVisible() { return lv_obj_is_visible(mLvglSelf); }
 
+void UIElement::SetWidth(uint16_t aWidth) {
+  lv_obj_set_width(mLvglSelf, aWidth);
+}
+
+void UIElement::SetHeight(uint16_t aHeight) {
+  lv_obj_set_height(mLvglSelf, aHeight);
+}
+
+int16_t UIElement::GetHeight() { return lv_obj_get_height(mLvglSelf); };
+
+int16_t UIElement::GetWidth() { return lv_obj_get_width(mLvglSelf); }
+
 void UIElement::SetVisiblity(bool aVisible) {
   if (aVisible == IsVisible()) {
     return;

Platformio/OmoteUI/core/UIElement.hpp

@@ -16,6 +16,12 @@ public:
   void SetVisiblity(bool aVisibility);
   bool IsVisible();
 
+  virtual void SetWidth(uint16_t aWidth);
+  virtual void SetHeight(uint16_t aHeight);
+
+  int16_t GetWidth();
+  int16_t GetHeight();
+
   virtual void AddElement(UIElement *anElement);
 
   ID GetID() { return mId; };

Platformio/OmoteUI/core/UIElementIds.hpp

@@ -7,7 +7,8 @@ public:
   static constexpr auto INVALID = 0;
 
   enum class Screens {
-    Home = static_cast<int>(INVALID) + 1,
+    Background = static_cast<int>(INVALID) + 1,
+    Home,
     INVALID_SCREEN_ID
   };
 

Platformio/OmoteUI/core/page/PageBase.cpp

@@ -1,10 +1,16 @@
+#include "BackgroundScreen.hpp"
 #include "PageBase.hpp"
 
 using namespace UI::Page;
 
-Base::Base(ID aID) : UIElement(lv_obj_create(nullptr), aID) {}
+Base::Base(ID aID)
+    : Base(lv_obj_create(Screen::BackgroundScreen::getLvInstance()), aID) {}
 
-Base::Base(lv_obj_t *aLvglSelf, ID aID) : UIElement(aLvglSelf, aID) {}
+Base::Base(lv_obj_t *aLvglSelf, ID aID) : UIElement(aLvglSelf, aID) {
+  SetHeight(lv_pct(100));
+  SetWidth(lv_pct(100));
+  lv_obj_set_align(aLvglSelf, LV_ALIGN_CENTER);
+}
 
 void Base::AddWidget(Widget::Base::Ptr aWidget) {
   mWidgets.push_back(std::move(aWidget));

Platformio/OmoteUI/core/page/SettingsPage.cpp

@@ -0,0 +1,7 @@
+#include "SettingsPage.hpp"
+
+using namespace UI::Page;
+
+SettingsPage::SettingsPage() : Base(ID::Pages::Settings) {
+  SetBgColor(lv_color_make(255, 0, 0));
+}

Platformio/OmoteUI/core/page/SettingsPage.hpp

@@ -0,0 +1,8 @@
+#include "PageBase.hpp"
+
+namespace UI::Page {
+class SettingsPage : public Base {
+public:
+  SettingsPage();
+};
+} // namespace UI::Page

Platformio/OmoteUI/core/page/TabView.cpp

@@ -1,13 +1,19 @@
+#include "BackgroundScreen.hpp"
 #include "TabView.hpp"
+#include <string>
 
 using namespace UI::Page;
 
 TabView::TabView(ID aId)
-    : Base(lv_tabview_create(nullptr, LV_DIR_TOP, 0), aId) {}
+    : Base(lv_tabview_create(Screen::BackgroundScreen::getLvInstance(),
+                             LV_DIR_TOP, 0),
+           aId) {}
+
+void TabView::AddTab(Page::Base::Ptr aPage, std::string aTitle) {
+  auto tab = std::make_unique<Base>(
+      lv_tabview_add_tab(LvglSelf(), aTitle.c_str()), aPage->GetID());
 
-void TabView::AddTab(Page::Base::Ptr aPage) {
-  auto tab = std::make_unique<Base>(lv_tabview_add_tab(LvglSelf(), "fake"),
-                                    aPage->GetID());
   tab->AddElement(aPage.get());
+
   mTabs.push_back(std::move(tab));
 }

Platformio/OmoteUI/core/page/TabView.hpp

@@ -5,7 +5,7 @@ namespace UI::Page {
 class TabView : public Base {
 public:
   TabView(ID aId);
-  void AddTab(Page::Base::Ptr aPage);
+  void AddTab(Page::Base::Ptr aPage, std::string aTitle);
 
 protected:
   void OnShow() {}

Platformio/OmoteUI/core/screen/BackgroundScreen.cpp

@@ -0,0 +1,18 @@
+#include "BackgroundScreen.hpp"
+
+using namespace UI::Screen;
+
+BackgroundScreen *BackgroundScreen::mInstance = nullptr;
+
+BackgroundScreen *BackgroundScreen::GetInstance() {
+  if (!mInstance) {
+    mInstance = new BackgroundScreen();
+  }
+  return mInstance;
+};
+
+lv_obj_t *BackgroundScreen::getLvInstance() {
+  return GetInstance()->LvglSelf();
+}
+
+BackgroundScreen::BackgroundScreen() : Base(ID::Screens::Background) {}

Platformio/OmoteUI/core/screen/BackgroundScreen.hpp

@@ -0,0 +1,15 @@
+#include "ScreenBase.hpp"
+namespace UI::Screen {
+/// @brief Due to the way LVGL utilizes screens we basically need a canvas to
+/// create new pages on
+/// by adding things to this screen and then moving them to their own page.
+class BackgroundScreen : Base {
+public:
+  static BackgroundScreen *GetInstance();
+  static lv_obj_t *getLvInstance();
+
+private:
+  BackgroundScreen();
+  static BackgroundScreen *mInstance;
+};
+} // namespace UI::Screen

Platformio/OmoteUI/core/screen/HomeScreen.cpp

@@ -1,22 +1,21 @@
 #include "HomeScreen.hpp"
+#include "SettingsPage.hpp"
 
 using namespace UI::Screen;
 
 HomeScreen::HomeScreen()
-    : Base(UI::ID::Screens::Home), mMyTabView(ID(ID::Pages::INVALID_PAGE_ID)),
-      mTabView(nullptr) {
-  AddElement(&mMyTabView);
-  mMyTabView.SetBgColor(lv_color_black());
-  SetBgColor(lv_color_white());
+    : Base(UI::ID::Screens::Home), mTabView(ID(ID::Pages::INVALID_PAGE_ID)) {
+  SetBgColor(lv_color_black());
   SetPushAnimation(LV_SCR_LOAD_ANIM_FADE_IN);
+
+  AddElement(&mTabView); // Adds Tabview to Homescreen
+
+  // Adds pages to the Tab view
+  mTabView.AddTab(std::make_unique<Page::SettingsPage>(), "Settings");
+  mTabView.AddTab(std::make_unique<Page::SettingsPage>(), "Settings1");
 }
 
-// void HomeScreen::SetBgColor(lv_color_t value, lv_style_selector_t selector) {
-//   mTabView.SetBgColor(value, selector);
-//   UI::UIElement::SetBgColor(value, selector);
-// }
-
-void HomeScreen::AddPage(Page::Base::Ptr aPage) {
-  // mTabView.AddElement(aPage.get());
-  mPages.push_back(std::move(aPage));
+void HomeScreen::SetBgColor(lv_color_t value, lv_style_selector_t selector) {
+  mTabView.SetBgColor(value, selector);
+  UI::UIElement::SetBgColor(value, selector);
 }

Platformio/OmoteUI/core/screen/HomeScreen.hpp

@@ -2,21 +2,18 @@
 #include "PageBase.hpp"
 #include "ScreenBase.hpp"
 #include "TabView.hpp"
+#include <string>
 namespace UI::Screen {
 
 class HomeScreen : public Base {
 public:
   HomeScreen();
 
-  // void SetBgColor(lv_color_t value,
-  //                 lv_style_selector_t selector = LV_PART_MAIN) override;
-
-  void AddPage(Page::Base::Ptr aPage);
+  void SetBgColor(lv_color_t value,
+                  lv_style_selector_t selector = LV_PART_MAIN) override;
 
 private:
-  Page::TabView mMyTabView;
-  lv_obj_t *mTabView;
-  std::vector<Page::Base::Ptr> mPages;
+  Page::TabView mTabView;
 };
 
 } // namespace UI::Screen