diff --git a/Platformio/OmoteUI/core/BorderOutlinePadding.hpp b/Platformio/OmoteUI/core/BorderOutlinePadding.hpp new file mode 100644 index 0000000..f0165d7 --- /dev/null +++ b/Platformio/OmoteUI/core/BorderOutlinePadding.hpp @@ -0,0 +1,110 @@ +#pragma once +#include "Colors.hpp" +#include "UIElement.hpp" +#include +// 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 \ No newline at end of file diff --git a/Platformio/OmoteUI/core/Colors.hpp b/Platformio/OmoteUI/core/Colors.hpp new file mode 100644 index 0000000..9915650 --- /dev/null +++ b/Platformio/OmoteUI/core/Colors.hpp @@ -0,0 +1,14 @@ +#pragma once +#include + +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 \ No newline at end of file diff --git a/Platformio/OmoteUI/core/UIElement.cpp b/Platformio/OmoteUI/core/UIElement.cpp index 42f565b..01da9a0 100644 --- a/Platformio/OmoteUI/core/UIElement.cpp +++ b/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([=] { diff --git a/Platformio/OmoteUI/core/UIElement.hpp b/Platformio/OmoteUI/core/UIElement.hpp index bad7ee7..c31f832 100644 --- a/Platformio/OmoteUI/core/UIElement.hpp +++ b/Platformio/OmoteUI/core/UIElement.hpp @@ -1,5 +1,6 @@ #pragma once +#include "BorderOutlinePadding.hpp" #include "UIElementIds.hpp" #include @@ -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; }; diff --git a/Platformio/OmoteUI/core/page/SettingsPage.cpp b/Platformio/OmoteUI/core/page/SettingsPage.cpp index 9b3d9a4..329437a 100644 --- a/Platformio/OmoteUI/core/page/SettingsPage.cpp +++ b/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 aHardware) : Base(ID::Pages::Settings), mHardware(aHardware) { - SetBgColor(lv_color_make(255, 0, 0)); - auto button = std::make_unique([this] { PushDisplaySettings(); }); + SetBgColor(RED); + auto button = + std::make_unique([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( 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 { diff --git a/Platformio/OmoteUI/core/screen/HomeScreen.cpp b/Platformio/OmoteUI/core/screen/HomeScreen.cpp index 855beaf..b762aa8 100644 --- a/Platformio/OmoteUI/core/screen/HomeScreen.cpp +++ b/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 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 diff --git a/Platformio/OmoteUI/core/screen/PopUpScreen.cpp b/Platformio/OmoteUI/core/screen/PopUpScreen.cpp index 22390eb..3c61cce 100644 --- a/Platformio/OmoteUI/core/screen/PopUpScreen.cpp +++ b/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( [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());