Removed the backgroundMargins and lineSpacing properties for the clock element and added backgroundColorEnd, backgroundGradientType and backgroundPadding

es-core/src/ThemeData.cpp

@@ -602,9 +602,10 @@ std::map<std::string, std::map<std::string, ThemeData::ElementPropertyType>>
        {"verticalAlignment", STRING},
        {"color", COLOR},
        {"backgroundColor", COLOR},
-       {"backgroundMargins", NORMALIZED_PAIR},
+       {"backgroundColorEnd", COLOR},
+       {"backgroundGradientType", STRING},
+       {"backgroundPadding", NORMALIZED_PAIR},
        {"backgroundCornerRadius", FLOAT},
-       {"lineSpacing", FLOAT},
        {"format", STRING},
        {"opacity", FLOAT}}},
      {"sound",

es-core/src/components/DateTimeComponent.cpp

@@ -16,9 +16,14 @@
 #include "utils/StringUtil.h"
 
 DateTimeComponent::DateTimeComponent()
-    : mClockAccumulator {0}
+    : mRenderer {Renderer::getInstance()}
+    , mClockAccumulator {0}
     , mClockMode {false}
     , mDisplayRelative {false}
+    , mBackgroundPadding {0.0f, 0.0f}
+    , mClockBgColor {0x00000000}
+    , mClockBgColorEnd {0x00000000}
+    , mClockColorGradientHorizontal {true}
 {
     // ISO 8601 date format.
     setFormat("%Y-%m-%d");
@@ -37,6 +42,10 @@ DateTimeComponent::DateTimeComponent(const std::string& text,
     , mClockAccumulator {0}
     , mClockMode {false}
     , mDisplayRelative {false}
+    , mBackgroundPadding {0.0f, 0.0f}
+    , mClockBgColor {0x00000000}
+    , mClockBgColorEnd {0x00000000}
+    , mClockColorGradientHorizontal {true}
 {
     // ISO 8601 date format.
     setFormat("%Y-%m-%d");
@@ -149,6 +158,23 @@ void DateTimeComponent::render(const glm::mat4& parentTrans)
     if (mClockMode && !Settings::getInstance()->getBool("DisplayClock"))
         return;
 
+    if (mClockMode && mClockBgColor != 0x00000000) {
+        const glm::vec3 positionTemp {mPosition};
+        mPosition.x -= mBackgroundPadding.x / 2.0f;
+        mPosition.y -= mBackgroundPadding.y / 2.0f;
+
+        const glm::mat4 trans {parentTrans * getTransform()};
+        mRenderer->setMatrix(trans);
+
+        mRenderer->drawRect(0.0f, 0.0f, mSize.x + mBackgroundPadding.x,
+                            mSize.y + mBackgroundPadding.y, mClockBgColor, mClockBgColorEnd,
+                            mClockColorGradientHorizontal, mThemeOpacity, 1.0f,
+                            Renderer::BlendFactor::SRC_ALPHA,
+                            Renderer::BlendFactor::ONE_MINUS_SRC_ALPHA, mBackgroundCornerRadius);
+
+        mPosition = positionTemp;
+    }
+
     // Render the component.
     TextComponent::render(parentTrans);
 }
@@ -169,9 +195,10 @@ void DateTimeComponent::applyTheme(const std::shared_ptr<ThemeData>& theme,
         componentName = "ClockComponent";
         // Apply default clock settings as the theme may not define any configuration for it.
         setFont(Font::get(FONT_SIZE_SMALL, FONT_PATH_LIGHT));
+        setLineSpacing(1.0f);
         const glm::vec2 scale {
             getParent() ? getParent()->getSize() :
-                          glm::vec2 {Renderer::getScreenWidth(), Renderer::getScreenHeight()}};
+                          glm::vec2 {mRenderer->getScreenWidth(), mRenderer->getScreenHeight()}};
         setPosition(0.018f * scale.x, 0.016f * scale.y);
         mSize.y = mFont->getLetterHeight();
         setColor(0xFFFFFFFF);
@@ -205,15 +232,51 @@ void DateTimeComponent::applyTheme(const std::shared_ptr<ThemeData>& theme,
 
     setRenderBackground(false);
     if (properties & COLOR && elem->has("backgroundColor")) {
-        setBackgroundColor(elem->get<unsigned int>("backgroundColor"));
+        if (mClockMode) {
-        setRenderBackground(true);
+            mClockBgColor = elem->get<unsigned int>("backgroundColor");
+
+            if (elem->has("backgroundColorEnd"))
+                mClockBgColorEnd = elem->get<unsigned int>("backgroundColorEnd");
+            else
+                mClockBgColorEnd = mClockBgColor;
+
+            if (elem->has("backgroundGradientType")) {
+                const std::string& backgroundGradientType {
+                    elem->get<std::string>("backgroundGradientType")};
+                if (backgroundGradientType == "horizontal") {
+                    mClockColorGradientHorizontal = true;
+                }
+                else if (backgroundGradientType == "vertical") {
+                    mClockColorGradientHorizontal = false;
+                }
+                else {
+                    mClockColorGradientHorizontal = true;
+                    LOG(LogWarning) << componentName
+                                    << ": Invalid theme configuration, property "
+                                       "\"backgroundGradientType\" for element \""
+                                    << element.substr(6) << "\" defined as \""
+                                    << backgroundGradientType << "\"";
+                }
+            }
+        }
+        else {
+            setBackgroundColor(elem->get<unsigned int>("backgroundColor"));
+            setRenderBackground(true);
+        }
     }
 
-    if (elem->has("backgroundMargins")) {
+    if (!mClockMode && elem->has("backgroundMargins")) {
         setBackgroundMargins(glm::clamp(elem->get<glm::vec2>("backgroundMargins"), 0.0f, 0.5f) *
                              mRenderer->getScreenWidth());
     }
 
+    if (mClockMode && elem->has("backgroundPadding")) {
+        const glm::vec2 backgroundPadding {
+            glm::clamp(elem->get<glm::vec2>("backgroundPadding"), 0.0f, 0.2f)};
+        mBackgroundPadding.x = backgroundPadding.x * mRenderer->getScreenWidth();
+        mBackgroundPadding.y = backgroundPadding.y * mRenderer->getScreenHeight();
+    }
+
     if (elem->has("backgroundCornerRadius")) {
         setBackgroundCornerRadius(
             glm::clamp(elem->get<float>("backgroundCornerRadius"), 0.0f, 0.5f) *

es-core/src/components/DateTimeComponent.h

@@ -56,6 +56,10 @@ private:
     std::string mFormat;
     bool mClockMode;
     bool mDisplayRelative;
+    glm::vec2 mBackgroundPadding;
+    unsigned int mClockBgColor;
+    unsigned int mClockBgColorEnd;
+    bool mClockColorGradientHorizontal;
 };
 
 #endif // ES_CORE_COMPONENTS_DATE_TIME_COMPONENT_H

es-core/src/components/TextComponent.cpp

@@ -16,11 +16,11 @@
 
 TextComponent::TextComponent()
     : mFont {Font::get(FONT_SIZE_MEDIUM)}
+    , mBackgroundCornerRadius {0.0f}
     , mRenderer {Renderer::getInstance()}
     , mColor {0x000000FF}
     , mBgColor {0x00000000}
     , mBackgroundMargins {0.0f, 0.0f}
-    , mBackgroundCornerRadius {0.0f}
     , mColorOpacity {1.0f}
     , mBgColorOpacity {0.0f}
     , mRenderBackground {false}
@@ -69,11 +69,11 @@ TextComponent::TextComponent(const std::string& text,
                              float scrollGap,
                              float maxLength)
     : mFont {nullptr}
+    , mBackgroundCornerRadius {0.0f}
     , mRenderer {Renderer::getInstance()}
     , mColor {0x000000FF}
     , mBgColor {0x00000000}
     , mBackgroundMargins {0.0f, 0.0f}
-    , mBackgroundCornerRadius {0.0f}
     , mColorOpacity {1.0f}
     , mBgColorOpacity {0.0f}
     , mRenderBackground {false}

es-core/src/components/TextComponent.h

@@ -136,6 +136,7 @@ protected:
     std::string mText;
     std::string mHiddenText;
     std::shared_ptr<Font> mFont;
+    float mBackgroundCornerRadius;
 
 private:
     void onColorChanged();
@@ -176,7 +177,6 @@ private:
     unsigned int mColor;
     unsigned int mBgColor;
     glm::vec2 mBackgroundMargins;
-    float mBackgroundCornerRadius;
     float mColorOpacity;
     float mBgColorOpacity;
     bool mRenderBackground;