add label widget and text styling

setter and getter

Generally working on getting the Display Settings page and pop up screen working well

Platformio/OmoteUI/core/Colors.hpp

@@ -11,4 +11,6 @@ const auto BLUE = lv_color_make(0, 0, 255);
 const auto PURPLE = lv_color_make(128, 0, 128);
 const auto LILAC = lv_color_make(231, 209, 255);
 
+const auto GREY = lv_color_make(105, 105, 105);
+
 } // namespace UI::Color

Platformio/OmoteUI/core/TextStyle.hpp

@@ -0,0 +1,52 @@
+#pragma once
+#include "Colors.hpp"
+#include <lvgl.h>
+
+namespace UI {
+class UIElement;
+
+class TextStyle {
+  friend UIElement;
+
+public:
+  TextStyle() = default;
+
+  TextStyle &Opacity(lv_opa_t aOpacity) {
+    opacity = aOpacity;
+    return *this;
+  }
+  TextStyle &Color(lv_color_t aColor) {
+    color = aColor;
+    return *this;
+  }
+  TextStyle &Decor(lv_text_decor_t aDecor) {
+    decor = aDecor;
+    return *this;
+  }
+  TextStyle &Align(lv_text_align_t aAlignment) {
+    align = aAlignment;
+    return *this;
+  }
+  TextStyle &LetterSpacing(lv_coord_t aLetterSpacing) {
+    letter_space = aLetterSpacing;
+    return *this;
+  }
+  TextStyle &LineSpacing(lv_coord_t aLineSpacing) {
+    line_space = aLineSpacing;
+    return *this;
+  }
+  TextStyle &Font(const lv_font_t *aFont) {
+    font = aFont;
+    return *this;
+  }
+
+private:
+  lv_opa_t opacity = 255;
+  lv_color_t color = Color::WHITE;
+  lv_text_decor_t decor = LV_TEXT_DECOR_NONE;
+  lv_text_align_t align = LV_TEXT_ALIGN_CENTER;
+  lv_coord_t letter_space = 0;
+  lv_coord_t line_space = 0;
+  const lv_font_t *font = lv_font_default();
+};
+} // namespace UI

Platformio/OmoteUI/core/UIElement.cpp

@@ -68,10 +68,12 @@ void UIElement::SetContentHeight(lv_coord_t aHeight) {
 
 lv_coord_t UIElement::GetContentWidth() {
   auto lock = LvglResourceManger::GetInstance().scopeLock();
+  lv_obj_update_layout(mLvglSelf);
   return lv_obj_get_content_width(mLvglSelf);
 }
 lv_coord_t UIElement::GetContentHeight() {
   auto lock = LvglResourceManger::GetInstance().scopeLock();
+  lv_obj_update_layout(mLvglSelf);
   return lv_obj_get_content_height(mLvglSelf);
 }
 
@@ -162,6 +164,33 @@ Padding UIElement::GetPadding(lv_style_selector_t aStyle) {
       .Column(lv_obj_get_style_pad_column(mLvglSelf, aStyle));
 };
 
+void UIElement::SetTextStyle(TextStyle aNewTextStyle,
+                             lv_style_selector_t aStyle) {
+  LvglResourceManger::GetInstance().AttemptNow([this, aNewTextStyle, aStyle] {
+    lv_obj_set_style_text_align(mLvglSelf, aNewTextStyle.align, aStyle);
+    lv_obj_set_style_text_color(mLvglSelf, aNewTextStyle.color, aStyle);
+    lv_obj_set_style_text_decor(mLvglSelf, aNewTextStyle.decor, aStyle);
+    lv_obj_set_style_text_font(mLvglSelf, aNewTextStyle.font, aStyle);
+    lv_obj_set_style_text_letter_space(mLvglSelf, aNewTextStyle.letter_space,
+                                       aStyle);
+    lv_obj_set_style_text_line_space(mLvglSelf, aNewTextStyle.line_space,
+                                     aStyle);
+    lv_obj_set_style_text_opa(mLvglSelf, aNewTextStyle.opacity, aStyle);
+  });
+}
+
+TextStyle UIElement::GetTextStyle(lv_style_selector_t aStyle) {
+  auto lock = LvglResourceManger::GetInstance().scopeLock();
+  return TextStyle()
+      .Align(lv_obj_get_style_text_align(mLvglSelf, aStyle))
+      .Color(lv_obj_get_style_text_color(mLvglSelf, aStyle))
+      .Decor(lv_obj_get_style_text_decor(mLvglSelf, aStyle))
+      .Font(lv_obj_get_style_text_font(mLvglSelf, aStyle))
+      .LetterSpacing(lv_obj_get_style_text_letter_space(mLvglSelf, aStyle))
+      .LineSpacing(lv_obj_get_style_text_line_space(mLvglSelf, aStyle))
+      .Opacity(lv_obj_get_style_text_opa(mLvglSelf, aStyle));
+}
+
 void UIElement::AlignTo(UIElement *anElementToAlignTo, lv_align_t anAlignment,
                         lv_coord_t aXoffset, lv_coord_t aYOffset) {
   LvglResourceManger::GetInstance().AttemptNow([=] {

Platformio/OmoteUI/core/UIElement.hpp

@@ -1,6 +1,7 @@
 #pragma once
 
 #include "BorderOutlinePadding.hpp"
+#include "TextStyle.hpp"
 #include "UIElementIds.hpp"
 #include <lvgl.h>
 
@@ -56,6 +57,10 @@ public:
                              lv_style_selector_t aStyle = LV_PART_MAIN);
   Padding GetPadding(lv_style_selector_t aStyle = LV_PART_MAIN);
 
+  virtual void SetTextStyle(TextStyle aNewStyle,
+                            lv_style_selector_t aStyle = LV_PART_MAIN);
+  TextStyle GetTextStyle(lv_style_selector_t aStyle = LV_PART_MAIN);
+
   virtual void AddElement(UIElement *anElement);
 
   ID GetID() { return mId; };

Platformio/OmoteUI/core/page/DisplaySettings.cpp

@@ -4,12 +4,25 @@
 using namespace UI::Page;
 
 DisplaySettings::DisplaySettings(std::shared_ptr<DisplayAbstract> aDisplay)
-    : Base(UI::ID::Pages::DisplaySettings), mDisplay(aDisplay) {
-  auto slider = std::make_unique<Widget::Slider>(
-      [this](auto aNewBrightness) { mDisplay->setBrightness(aNewBrightness); },
-      0, 255);
-  slider->AlignTo(this, LV_ALIGN_CENTER);
-  slider->SetWidth(GetContentWidth());
-  slider->SetHeight(lv_pct(10));
-  AddWidget(std::move(slider));
-}
+    : Base(UI::ID::Pages::DisplaySettings), mDisplay(aDisplay),
+      mBrightnessSlider(
+          AddWidget<Widget::Slider>(std::make_unique<Widget::Slider>(
+              [this](auto aNewBrightness) {
+                mDisplay->setBrightness(aNewBrightness);
+              },
+              0, 255))) {
+  SetBgColor(Color::GREY);
+  auto usableWidth = GetContentWidth();
+
+  mBrightnessSlider->SetWidth(usableWidth - (usableWidth * 0.20f));
+  mBrightnessSlider->SetHeight(lv_pct(10));
+  mBrightnessSlider->AlignTo(this, LV_ALIGN_TOP_MID);
+}
+
+void DisplaySettings::OnShow() {
+  mBrightnessSlider->SetValue(mDisplay->getBrightness());
+};
+
+void DisplaySettings::OnHide(){
+
+};

Platformio/OmoteUI/core/page/DisplaySettings.hpp

@@ -2,15 +2,22 @@
 #include "DisplayAbstract.h"
 #include "PageBase.hpp"
 
+namespace UI::Widget {
+class Slider;
+}
+
 namespace UI::Page {
 class DisplaySettings : public Base {
 public:
   DisplaySettings(std::shared_ptr<DisplayAbstract> aDisplay);
 
-  void OnShow() override{};
-  void OnHide() override{};
+  void OnShow() override;
+  void OnHide() override;
+
+  std::string GetTitle() override { return "Display Settings"; };
 
 private:
   std::shared_ptr<DisplayAbstract> mDisplay;
+  Widget::Slider *mBrightnessSlider;
 };
 } // namespace UI::Page

Platformio/OmoteUI/core/page/PageBase.hpp

@@ -2,6 +2,7 @@
 #include "UIElement.hpp"
 #include "WidgetBase.hpp"
 
+#include <string>
 #include <vector>
 namespace UI::Screen {
 class PopUpScreen;
@@ -23,10 +24,15 @@ public:
   Base(lv_obj_t *aLvglSelf, ID aID);
   virtual ~Base() = default;
 
+  template <class ElementTy> ElementTy *AddWidget(Widget::Base::Ptr aWidget);
+
   Widget::Base *AddWidget(Widget::Base::Ptr aWidget);
   Widget::Base::Ptr RemoveWidget(Widget::Base *aWidgetRefrence);
   size_t GetNumWidgets() { return mWidgets.size(); }
 
+  // Override to have a title associated with your page.
+  virtual std::string GetTitle() { return ""; };
+
 protected:
   void OnShow() override{};
   void OnHide() override{};
@@ -37,4 +43,10 @@ protected:
 private:
   std::vector<Widget::Base::Ptr> mWidgets;
 };
+
+template <class ElementTy>
+ElementTy *Base::AddWidget(Widget::Base::Ptr aWidget) {
+  return static_cast<ElementTy *>(AddWidget(std::move(aWidget)));
+}
+
 } // namespace UI::Page

Platformio/OmoteUI/core/screen/PopUpScreen.cpp

@@ -8,15 +8,25 @@ using namespace UI::Screen;
 PopUpScreen::PopUpScreen(Page::Base::Ptr aPage)
     : Screen::Base(UI::ID::Screens::PopUp), mContentPage(std::move(aPage)),
       mExitButton(std::make_unique<Widget::Button>(
-          [this] { UI::Screen::Manager::getInstance().popScreen(this); })) {
+          [this] { UI::Screen::Manager::getInstance().popScreen(this); })),
+      mTitle(std::make_unique<Widget::Label>(mContentPage->GetTitle())) {
 
-  mExitButton->SetWidth(30);
-  mExitButton->SetHeight(30);
+  mExitButton->SetWidth(lv_pct(10));
+  mExitButton->SetHeight(mExitButton->GetWidth());
   mExitButton->SetBgColor(Color::RED);
   mExitButton->AlignTo(this, LV_ALIGN_TOP_RIGHT, -5, 5);
 
+  mTitle->SetWidth(mExitButton->GetX());
+  mTitle->SetHeight(mExitButton->GetHeight());
+  mTitle->AlignTo(mExitButton.get(), LV_ALIGN_OUT_LEFT_BOTTOM);
+  mTitle->SetTextStyle(mTitle->GetTextStyle().Align(LV_TEXT_ALIGN_CENTER));
+
+  mContentPage->SetHeight(GetHeight() - mExitButton->GetBottom() - 5);
+  mContentPage->SetY(mExitButton->GetBottom() + 5);
+
   AddElement(mContentPage.get());
   AddElement(mExitButton.get());
+  AddElement(mTitle.get());
 }
 
 bool PopUpScreen::OnKeyEvent(KeyPressAbstract::KeyEvent aKeyEvent) {

Platformio/OmoteUI/core/screen/PopUpScreen.hpp

@@ -1,5 +1,6 @@
 #pragma once
 #include "Button.hpp"
+#include "Label.hpp"
 #include "PageBase.hpp"
 #include "ScreenBase.hpp"
 
@@ -20,6 +21,7 @@ protected:
 private:
   UI::Page::Base::Ptr mContentPage;
   std::unique_ptr<Widget::Button> mExitButton;
+  std::unique_ptr<Widget::Label> mTitle;
 };
 
 } // namespace UI::Screen

Platformio/OmoteUI/core/widget/Label.cpp

@@ -0,0 +1,10 @@
+#include "Label.hpp"
+#include "BackgroundScreen.hpp"
+#include "Colors.hpp"
+
+using namespace UI::Widget;
+
+Label::Label(std::string aText)
+    : Base(lv_label_create(UI::Screen::BackgroundScreen::getLvInstance())) {
+  lv_label_set_text(LvglSelf(), aText.c_str());
+}

Platformio/OmoteUI/core/widget/Label.hpp

@@ -0,0 +1,12 @@
+#pragma once
+#include "WidgetBase.hpp"
+
+#include <string>
+
+namespace UI::Widget {
+class Label : public Base {
+public:
+  Label(std::string aText);
+};
+
+} // namespace UI::Widget

Platformio/OmoteUI/core/widget/WidgetBase.cpp

@@ -2,4 +2,7 @@
 
 using namespace UI::Widget;
 
-Base::Base(lv_obj_t *aLvglSelf) : UIElement(aLvglSelf) {}
+Base::Base(lv_obj_t *aLvglSelf) : UIElement(aLvglSelf) {
+  SetWidth(lv_pct(100));
+  SetHeight(lv_pct(100));
+}