Add helper class that make set/get borders padding and Outline

Add Colors Header to have a place to access colors for consistency

use some of this new functionality in pages and screens.

Platformio/OmoteUI/core/BorderOutlinePadding.hpp

@@ -0,0 +1,110 @@
+#pragma once
+#include "Colors.hpp"
+#include "UIElement.hpp"
+#include <lvgl.h>
+// Builder Class to make it easier to create boarder and Paddings
+namespace UI {
+/////////////////////////////////Border/////////////////////////////////
+class Border {
+  friend class UIElement;
+
+public:
+  Border() = default;
+
+  Border &Width(lv_coord_t aWidth) {
+    width = aWidth;
+    return *this;
+  }
+  Border &Color(lv_color_t aColor) {
+    color = aColor;
+    return *this;
+  }
+  Border &Opacity(lv_opa_t aOpacity) {
+    opacity = aOpacity;
+    return *this;
+  }
+  Border &Sides(lv_border_side_t aSides) {
+    sides = aSides;
+    return *this;
+  }
+
+private:
+  lv_coord_t width = 0;
+  lv_color_t color = UI::Color::BLACK;
+  lv_opa_t opacity = 255;
+  lv_border_side_t sides = LV_BORDER_SIDE_FULL;
+};
+
+///////////////////////////////////////Outline////////////////////////////////
+class Outline {
+  friend class UIElement;
+
+public:
+  Outline() = default;
+
+  Outline &Width(lv_coord_t aWidth) {
+    width = aWidth;
+    return *this;
+  }
+  Outline &Color(lv_color_t aColor) {
+    color = aColor;
+    return *this;
+  }
+  Outline &Opacity(lv_opa_t aOpacity) {
+    opacity = aOpacity;
+    return *this;
+  }
+  Outline &Padding(lv_coord_t aPadding) {
+    padding = aPadding;
+    return *this;
+  }
+
+private:
+  lv_coord_t width = 0;
+  lv_color_t color = UI::Color::BLACK;
+  lv_opa_t opacity = 255;
+  lv_coord_t padding = 0;
+};
+
+//////////////////////////////////////Padding////////////////////////////////
+class Padding {
+  friend class UIElement;
+
+public:
+  Padding() = default;
+
+  Padding &Top(lv_coord_t aTopPadding) {
+    top = aTopPadding;
+    return *this;
+  };
+  Padding &Bottom(lv_coord_t aBottomPadding) {
+    bottom = aBottomPadding;
+    return *this;
+  };
+  Padding &Left(lv_coord_t aLeftPadding) {
+    left = aLeftPadding;
+    return *this;
+  };
+  Padding &Right(lv_coord_t aRightPadding) {
+    right = aRightPadding;
+    return *this;
+  };
+  Padding &Row(lv_coord_t aRowPadding) {
+    row = aRowPadding;
+    return *this;
+  }
+  Padding &Column(lv_coord_t aColumnPadding) {
+    column = aColumnPadding;
+    return *this;
+  }
+
+private:
+  lv_coord_t top = 0;
+  lv_coord_t bottom = 0;
+  lv_coord_t left = 0;
+  lv_coord_t right = 0;
+  lv_coord_t row = 0;
+  lv_coord_t column = 0;
+};
+
+} // namespace UI

Platformio/OmoteUI/core/Colors.hpp

@@ -0,0 +1,14 @@
+#pragma once
+#include <lvgl.h>
+
+namespace UI::Color {
+const auto WHITE = lv_color_white();
+const auto BLACK = lv_color_black();
+const auto RED = lv_color_make(255, 0, 0);
+const auto GREEN = lv_color_make(0, 255, 0);
+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);
+
+} // namespace UI::Color

Platformio/OmoteUI/core/UIElement.cpp

@@ -57,6 +57,24 @@ lv_coord_t UIElement::GetWidth() {
   return lv_obj_get_width(mLvglSelf);
 }
 
+void UIElement::SetContentWidth(lv_coord_t aWidth) {
+  LvglResourceManger::GetInstance().AttemptNow(
+      [this, aWidth] { lv_obj_set_content_width(mLvglSelf, aWidth); });
+}
+void UIElement::SetContentHeight(lv_coord_t aHeight) {
+  LvglResourceManger::GetInstance().AttemptNow(
+      [this, aHeight] { lv_obj_set_content_height(mLvglSelf, aHeight); });
+}
+
+lv_coord_t UIElement::GetContentWidth() {
+  auto lock = LvglResourceManger::GetInstance().scopeLock();
+  return lv_obj_get_content_width(mLvglSelf);
+}
+lv_coord_t UIElement::GetContentHeight() {
+  auto lock = LvglResourceManger::GetInstance().scopeLock();
+  return lv_obj_get_content_height(mLvglSelf);
+}
+
 void UIElement::SetY(lv_coord_t aY) {
   LvglResourceManger::GetInstance().AttemptNow(
       [this, aY] { lv_obj_set_y(mLvglSelf, aY); });
@@ -79,6 +97,71 @@ lv_coord_t UIElement::GetX() {
 
 lv_coord_t UIElement::GetBottom() { return GetY() + GetHeight(); };
 
+void UIElement::SetBorder(Border aNewBorder, lv_style_selector_t aStyle) {
+  LvglResourceManger::GetInstance().AttemptNow([this, aNewBorder, aStyle] {
+    lv_obj_set_style_border_color(mLvglSelf, aNewBorder.color, aStyle);
+    lv_obj_set_style_border_opa(mLvglSelf, aNewBorder.opacity, aStyle);
+    lv_obj_set_style_border_side(mLvglSelf, aNewBorder.sides, aStyle);
+    lv_obj_set_style_border_width(mLvglSelf, aNewBorder.width, aStyle);
+  });
+}
+
+Border UIElement::GetBorder(lv_style_selector_t aStyle) {
+  auto lock = LvglResourceManger::GetInstance().scopeLock();
+  return Border()
+      .Color(lv_obj_get_style_border_color(mLvglSelf, aStyle))
+      .Opacity(lv_obj_get_style_border_opa(mLvglSelf, aStyle))
+      .Sides(lv_obj_get_style_border_side(mLvglSelf, aStyle))
+      .Width(lv_obj_get_style_border_width(mLvglSelf, aStyle));
+}
+
+void UIElement::SetOutline(Outline aNewOutline, lv_style_selector_t aStyle) {
+  LvglResourceManger::GetInstance().AttemptNow([this, aNewOutline, aStyle] {
+    lv_obj_set_style_outline_color(mLvglSelf, aNewOutline.color, aStyle);
+    lv_obj_set_style_outline_opa(mLvglSelf, aNewOutline.opacity, aStyle);
+    lv_obj_set_style_outline_width(mLvglSelf, aNewOutline.width, aStyle);
+    lv_obj_set_style_outline_pad(mLvglSelf, aNewOutline.padding, aStyle);
+  });
+};
+
+Outline UIElement::GetOutline(lv_style_selector_t aStyle) {
+  auto lock = LvglResourceManger::GetInstance().scopeLock();
+  return Outline()
+      .Color(lv_obj_get_style_outline_color(mLvglSelf, aStyle))
+      .Opacity(lv_obj_get_style_outline_opa(mLvglSelf, aStyle))
+      .Padding(lv_obj_get_style_outline_pad(mLvglSelf, aStyle))
+      .Width(lv_obj_get_style_outline_width(mLvglSelf, aStyle));
+};
+
+void UIElement::SetPadding(Padding aNewPadding, lv_style_selector_t aStyle) {
+  LvglResourceManger::GetInstance().AttemptNow([this, aNewPadding, aStyle] {
+    lv_obj_set_style_pad_top(mLvglSelf, aNewPadding.top, aStyle);
+    lv_obj_set_style_pad_bottom(mLvglSelf, aNewPadding.bottom, aStyle);
+    lv_obj_set_style_pad_left(mLvglSelf, aNewPadding.left, aStyle);
+    lv_obj_set_style_pad_right(mLvglSelf, aNewPadding.right, aStyle);
+    lv_obj_set_style_pad_row(mLvglSelf, aNewPadding.row, aStyle);
+    lv_obj_set_style_pad_column(mLvglSelf, aNewPadding.column, aStyle);
+  });
+};
+
+void UIElement::SetAllPadding(lv_coord_t aNewPadding,
+                              lv_style_selector_t aStyle) {
+  LvglResourceManger::GetInstance().AttemptNow([this, aNewPadding, aStyle] {
+    lv_obj_set_style_pad_all(mLvglSelf, aNewPadding, aStyle);
+  });
+}
+
+Padding UIElement::GetPadding(lv_style_selector_t aStyle) {
+  auto lock = LvglResourceManger::GetInstance().scopeLock();
+  return Padding()
+      .Top(lv_obj_get_style_pad_top(mLvglSelf, aStyle))
+      .Bottom(lv_obj_get_style_pad_bottom(mLvglSelf, aStyle))
+      .Left(lv_obj_get_style_pad_left(mLvglSelf, aStyle))
+      .Right(lv_obj_get_style_pad_right(mLvglSelf, aStyle))
+      .Row(lv_obj_get_style_pad_row(mLvglSelf, aStyle))
+      .Column(lv_obj_get_style_pad_column(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,5 +1,6 @@
 #pragma once
 
+#include "BorderOutlinePadding.hpp"
 #include "UIElementIds.hpp"
 #include <lvgl.h>
 
@@ -25,6 +26,12 @@ public:
   lv_coord_t GetWidth();
   lv_coord_t GetHeight();
 
+  virtual void SetContentWidth(lv_coord_t aWidth);
+  virtual void SetContentHeight(lv_coord_t aHeight);
+
+  lv_coord_t GetContentWidth();
+  lv_coord_t GetContentHeight();
+
   virtual void SetY(lv_coord_t aY);
   virtual void SetX(lv_coord_t aX);
 
@@ -35,6 +42,20 @@ public:
   void AlignTo(UIElement *anElementToAlignWith, lv_align_t anAlignment,
                lv_coord_t aXoffset = 0, lv_coord_t aYOffset = 0);
 
+  virtual void SetBorder(Border aNewBorder,
+                         lv_style_selector_t aStyle = LV_PART_MAIN);
+  Border GetBorder(lv_style_selector_t aStyle = LV_PART_MAIN);
+
+  virtual void SetOutline(Outline aNewOutline,
+                          lv_style_selector_t aStyle = LV_PART_MAIN);
+  Outline GetOutline(lv_style_selector_t aStyle = LV_PART_MAIN);
+
+  virtual void SetPadding(Padding aNewPadding,
+                          lv_style_selector_t aStyle = LV_PART_MAIN);
+  virtual void SetAllPadding(lv_coord_t aNewPadding,
+                             lv_style_selector_t aStyle = LV_PART_MAIN);
+  Padding GetPadding(lv_style_selector_t aStyle = LV_PART_MAIN);
+
   virtual void AddElement(UIElement *anElement);
 
   ID GetID() { return mId; };

Platformio/OmoteUI/core/page/SettingsPage.cpp

@@ -1,16 +1,20 @@
 #include "SettingsPage.hpp"
 #include "BackgroundScreen.hpp"
 #include "Button.hpp"
+#include "Colors.hpp"
 #include "DisplaySettings.hpp"
 #include "PopUpScreen.hpp"
 #include "ScreenManager.hpp"
 
 using namespace UI::Page;
+using namespace UI::Color;
 
 SettingsPage::SettingsPage(std::shared_ptr<HardwareAbstract> aHardware)
     : Base(ID::Pages::Settings), mHardware(aHardware) {
-  SetBgColor(lv_color_make(255, 0, 0));
-  auto button = std::make_unique<UI::Widget::Button>([this] { PushDisplaySettings(); });
+  SetBgColor(RED);
+  auto button =
+      std::make_unique<UI::Widget::Button>([this] { PushDisplaySettings(); });
+  button->SetBorder(button->GetBorder().Color(BLUE).Width(2));
   button->SetY(0);
   button->SetHeight(lv_pct(10));
   button->SetWidth(lv_pct(10));
@@ -29,7 +33,7 @@ void SettingsPage::AddSlider() {
   auto fakeSlider = std::make_unique<UI::Widget::Base>(
       lv_slider_create(UI::Screen::BackgroundScreen::getLvInstance()));
   fakeSlider->SetHeight(lv_pct(10));
-  fakeSlider->SetWidth(GetWidth());
+  fakeSlider->SetWidth(GetContentWidth());
   if (sliders.empty()) {
     fakeSlider->SetY(mButton->GetBottom());
   } else {

Platformio/OmoteUI/core/screen/HomeScreen.cpp

@@ -1,4 +1,5 @@
 #include "HomeScreen.hpp"
+#include "Colors.hpp"
 #include "SettingsPage.hpp"
 
 using namespace UI::Screen;
@@ -6,7 +7,7 @@ using namespace UI::Screen;
 HomeScreen::HomeScreen(std::shared_ptr<HardwareAbstract> aHardware)
     : Base(UI::ID::Screens::Home), mHardware(aHardware),
       mTabView(ID(ID::Pages::INVALID_PAGE_ID)) {
-  SetBgColor(lv_color_black());
+  SetBgColor(UI::Color::BLACK);
   SetPushAnimation(LV_SCR_LOAD_ANIM_FADE_IN);
 
   AddElement(&mTabView); // Adds Tabview to Homescreen

Platformio/OmoteUI/core/screen/PopUpScreen.cpp

@@ -1,4 +1,5 @@
 #include "PopUpScreen.hpp"
+#include "Colors.hpp"
 #include "ScreenManager.hpp"
 
 using namespace UI;
@@ -8,9 +9,10 @@ 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); })) {
+
   mExitButton->SetWidth(30);
   mExitButton->SetHeight(30);
-  mExitButton->SetBgColor(lv_color_make(255, 0, 0));
+  mExitButton->SetBgColor(Color::RED);
   mExitButton->AlignTo(this, LV_ALIGN_TOP_RIGHT, -5, 5);
 
   AddElement(mContentPage.get());