From bf1f4906e6fc063d6f7824ed3198561cd4bd9561 Mon Sep 17 00:00:00 2001 From: Peter Hartmann Date: Fri, 5 Nov 2021 17:13:12 +0100 Subject: [PATCH] use shadow --- examples/iotdashboard/LightDisplay.cpp | 39 +++++++++++++++++ examples/iotdashboard/LightDisplay.h | 19 +++++++- examples/iotdashboard/LightDisplaySkinlet.cpp | 43 +++++++++++++++---- examples/iotdashboard/LightDisplaySkinlet.h | 1 + examples/iotdashboard/Skin.cpp | 5 +-- 5 files changed, 95 insertions(+), 12 deletions(-) diff --git a/examples/iotdashboard/LightDisplay.cpp b/examples/iotdashboard/LightDisplay.cpp index b0d29b58..7af22589 100644 --- a/examples/iotdashboard/LightDisplay.cpp +++ b/examples/iotdashboard/LightDisplay.cpp @@ -18,6 +18,7 @@ #include #include +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" diff --git a/examples/iotdashboard/LightDisplay.h b/examples/iotdashboard/LightDisplay.h index 96710a52..de27155b 100644 --- a/examples/iotdashboard/LightDisplay.h +++ b/examples/iotdashboard/LightDisplay.h @@ -6,13 +6,30 @@ #pragma once #include +#include +#include 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; }; diff --git a/examples/iotdashboard/LightDisplaySkinlet.cpp b/examples/iotdashboard/LightDisplaySkinlet.cpp index c29d5f2b..54c45784 100644 --- a/examples/iotdashboard/LightDisplaySkinlet.cpp +++ b/examples/iotdashboard/LightDisplaySkinlet.cpp @@ -6,6 +6,8 @@ #include "LightDisplaySkinlet.h" #include "LightDisplay.h" +#include "nodes/BoxShadowNode.h" + #include #include @@ -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 }; } diff --git a/examples/iotdashboard/LightDisplaySkinlet.h b/examples/iotdashboard/LightDisplaySkinlet.h index 8db42faa..60dad4c8 100644 --- a/examples/iotdashboard/LightDisplaySkinlet.h +++ b/examples/iotdashboard/LightDisplaySkinlet.h @@ -18,6 +18,7 @@ class LightDisplaySkinlet : public QskSkinlet public: enum NodeRole { + PanelRole, GrooveRole, ColdPartRole, WarmPartRole, diff --git a/examples/iotdashboard/Skin.cpp b/examples/iotdashboard/Skin.cpp index 311114a0..2a4bb31b 100644 --- a/examples/iotdashboard/Skin.cpp +++ b/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 );