use shadow

examples/iotdashboard/LightDisplay.cpp

@@ -18,6 +18,7 @@
 #include <QPainter>
 #include <QRadialGradient>
 
+QSK_SUBCONTROL( LightDisplay, Panel )
 QSK_SUBCONTROL( LightDisplay, Groove )
 QSK_SUBCONTROL( LightDisplay, ColdPart )
 QSK_SUBCONTROL( LightDisplay, WarmPart )
@@ -29,6 +30,44 @@ LightDisplay::LightDisplay( QQuickItem* parent )
     : QskBoundedControl( parent )
 {
     setAlignmentHint( LeftLabel, Qt::AlignRight );
+
+    // ### move to Skin:
+    setGradient( Qt::magenta );
+    setShadow( { 0, 20 } );
+    setShadowColor( 0xe5e5e5 );
+}
+
+void LightDisplay::setShadow( const QskShadowMetrics& shadow )
+{
+    m_shadow = shadow;
+    update();
+}
+
+const QskShadowMetrics& LightDisplay::shadow() const
+{
+    return m_shadow;
+}
+
+void LightDisplay::setGradient( const QskGradient& gradient )
+{
+    m_gradient = gradient;
+    update();
+}
+
+const QskGradient& LightDisplay::gradient() const
+{
+    return m_gradient;
+}
+
+void LightDisplay::setShadowColor( const QColor& color )
+{
+    m_shadowColor = color;
+    update();
+}
+
+QColor LightDisplay::shadowColor() const
+{
+    return m_shadowColor;
 }
 
 #include "moc_LightDisplay.cpp"

examples/iotdashboard/LightDisplay.h

@@ -6,13 +6,30 @@
 #pragma once
 
 #include <QskBoundedControl.h>
+#include <QskBoxShapeMetrics.h>
+#include <QskShadowMetrics.h>
 
 class LightDisplay : public QskBoundedControl
 {
     Q_OBJECT
 
   public:
-    QSK_SUBCONTROLS( Groove, ColdPart, WarmPart, ValueText, LeftLabel, RightLabel )
+    QSK_SUBCONTROLS( Panel, Groove, ColdPart, WarmPart, ValueText, LeftLabel, RightLabel )
 
     LightDisplay( QQuickItem* parent = nullptr );
+
+    void setShadow( const QskShadowMetrics& );
+    const QskShadowMetrics& shadow() const;
+
+    void setGradient( const QskGradient& );
+    const QskGradient& gradient() const;
+
+    void setShadowColor( const QColor& );
+    QColor shadowColor() const;
+
+  private:
+    QskShadowMetrics m_shadow;
+    QColor m_shadowColor = Qt::black;
+
+    QskGradient m_gradient;
 };

examples/iotdashboard/LightDisplaySkinlet.cpp

@@ -6,6 +6,8 @@
 #include "LightDisplaySkinlet.h"
 #include "LightDisplay.h"
 
+#include "nodes/BoxShadowNode.h"
+
 #include <QskTextOptions.h>
 
 #include <QFontMetrics>
@@ -13,8 +15,8 @@
 LightDisplaySkinlet::LightDisplaySkinlet( QskSkin* skin )
     : QskSkinlet( skin )
 {
-    setNodeRoles( { GrooveRole, WarmPartRole, ColdPartRole, ValueTextRole,
-                  LeftLabelRole, RightLabelRole } );
+    setNodeRoles( { GrooveRole, PanelRole, WarmPartRole, ColdPartRole,
+                    ValueTextRole, LeftLabelRole, RightLabelRole } );
 }
 
 LightDisplaySkinlet::~LightDisplaySkinlet()
@@ -27,7 +29,8 @@ QRectF LightDisplaySkinlet::subControlRect( const QskSkinnable* skinnable,
     auto* display = static_cast< const LightDisplay* >( skinnable );
     QRectF rect = contentsRect;
 
-    if( subControl == LightDisplay::Groove )
+    if( subControl == LightDisplay::Groove
+            || subControl == LightDisplay::Panel )
     {
         QSizeF size = textLabelsSize( display );
 
@@ -72,12 +75,36 @@ QRectF LightDisplaySkinlet::subControlRect( const QskSkinnable* skinnable,
 QSGNode* LightDisplaySkinlet::updateSubNode(
     const QskSkinnable* skinnable, quint8 nodeRole, QSGNode* node ) const
 {
+    auto* display = static_cast< const LightDisplay* >( skinnable );
+
+
     switch( nodeRole )
     {
+        case PanelRole:
+        {
+            return updateBoxNode( skinnable, node, LightDisplay::Panel );
+        }
         case GrooveRole:
         {
-            return updateArcNode( skinnable, node, 0, 5760,
-                                  LightDisplay::Groove );
+            const QRectF grooveRect = display->subControlRect( LightDisplay::Groove );
+            if ( grooveRect.isEmpty() )
+                return nullptr;
+
+            auto shadowNode = static_cast< BoxShadowNode* >( node );
+            if ( shadowNode == nullptr )
+                shadowNode = new BoxShadowNode();
+
+            const auto& shadowMetrics = display->shadow();
+
+            shadowNode->setRect( shadowMetrics.shadowRect( grooveRect ) );
+            shadowNode->setShape( grooveRect.width() / 2 );
+            shadowNode->setBlurRadius( shadowMetrics.blurRadius() );
+            shadowNode->setColor( display->shadowColor() );
+            shadowNode->setClipRect( grooveRect );
+
+            shadowNode->updateGeometry();
+
+            return shadowNode;
         }
         case WarmPartRole:
         {
@@ -98,12 +125,12 @@ QSGNode* LightDisplaySkinlet::updateSubNode(
         }
         case LeftLabelRole:
         {
-            return updateTextNode( skinnable, node, QStringLiteral( "0" ), {},
+            return updateTextNode( skinnable, node, QStringLiteral( "0  " ), {},
                                    LightDisplay::LeftLabel );
         }
         case RightLabelRole:
         {
-            return updateTextNode( skinnable, node, QStringLiteral( "100" ), {},
+            return updateTextNode( skinnable, node, QStringLiteral( "  100" ), {},
                                    LightDisplay::RightLabel );
         }
     }
@@ -116,7 +143,7 @@ QSizeF LightDisplaySkinlet::textLabelsSize( const LightDisplay* display ) const
     QFont font = display->effectiveFont( LightDisplay::LeftLabel );
     QFontMetricsF fm( font );
 
-    qreal w = fm.width( QStringLiteral( "100" ) );
+    qreal w = fm.width( QStringLiteral( "  100" ) );
     qreal h = fm.height();
     return { w, h };
 }

examples/iotdashboard/LightDisplaySkinlet.h

@@ -18,6 +18,7 @@ class LightDisplaySkinlet : public QskSkinlet
   public:
     enum NodeRole
     {
+        PanelRole,
         GrooveRole,
         ColdPartRole,
         WarmPartRole,

examples/iotdashboard/Skin.cpp

@@ -182,8 +182,7 @@ void Skin::initHints( const Palette& palette )
     ed.setColor( Diagram::ChartArea3, "#66ff7d34" );
 
     // light intensity:
-    ed.setGradient( LightDisplay::Groove, Qt::magenta );
-    ed.setArcMetrics( LightDisplay::Groove, { 10, 0, 5760 } );
+    ed.setBoxShape( LightDisplay::Panel, 100, Qt::RelativeSize );
     ed.setGradient( LightDisplay::ColdPart, { Qt::Horizontal, "#a7b0ff", "#6776ff" } );
     ed.setGradient( LightDisplay::WarmPart, { Qt::Horizontal, "#feeeb7", "#ff3122" } );
     ed.setFontRole( LightDisplay::ValueText, QskSkin::LargeFont );
@@ -195,7 +194,7 @@ void Skin::initHints( const Palette& palette )
     ed.setGradient( Box::Panel, palette.box );
     ed.setGradient( BoxWithButtons::Panel, palette.box );
     ed.setGradient( UsageDiagramBox::Panel, palette.box );
-//    ed.setColor( LightDisplay::Panel, palette.lightDisplay ); ###
+    ed.setGradient( LightDisplay::Panel, palette.box );
     ed.setGradient( RoundButton::Panel, palette.roundButton );
     ed.setBoxBorderColors( UsageDiagramBox::DaysBox, palette.weekdayBox );
     ed.setColor( QskTextLabel::Text, palette.text );