Merge branch 'master' of https://github.com/uwerat/qskinny

examples/iotdashboard/BoxWithButtons.cpp

@@ -19,6 +19,8 @@ namespace
 {
     class UpAndDownBox : public QskLinearBox
     {
+        Q_OBJECT
+
       public:
         UpAndDownBox( QQuickItem* parent )
             : QskLinearBox( Qt::Vertical, parent )
@@ -26,15 +28,25 @@ namespace
             setSizePolicy( Qt::Horizontal, QskSizePolicy::Fixed );
             setSpacing( 0 );
 
-            new RoundButton( QskAspect::Top, this );
+            auto* const topButton = new RoundButton( QskAspect::Top, this );
-            new RoundButton( QskAspect::Bottom, this );
+            connect( topButton, &QskPushButton::clicked, this, &UpAndDownBox::increase );
+
+            auto* const bottomButton = new RoundButton( QskAspect::Bottom, this );
+            connect( bottomButton, &QskPushButton::clicked, this, &UpAndDownBox::decrease );
         }
+
+      Q_SIGNALS:
+        void increase();
+        void decrease();
     };
 }
 
-BoxWithButtons::BoxWithButtons( const QString& title, const QString& value,
+BoxWithButtons::BoxWithButtons( const QString& title, const QString &prefix,
+                                const int initialValue, const QString &suffix,
                                 bool isBright, QQuickItem* parent )
     : Box( QString(), parent )
+    , m_prefix( prefix )
+    , m_suffix( suffix )
 {
     setSubcontrolProxy( QskBox::Panel, Panel );
 
@@ -44,7 +56,8 @@ BoxWithButtons::BoxWithButtons( const QString& title, const QString& value,
     layout->setSpacing( 20 );
 
     auto iconLabel = new RoundedIcon( isBright, layout );
-    iconLabel->setSource( title );
+    iconLabel->setGraphicSource( title );
+    iconLabel->setGraphicStrutSize( { 35.17, 35.17 } );
     iconLabel->setFixedSize( 68, 68 );
 
     auto titleAndValue = new QskLinearBox( Qt::Vertical, layout );
@@ -54,10 +67,30 @@ BoxWithButtons::BoxWithButtons( const QString& title, const QString& value,
     auto* titleLabel = new QskTextLabel( title, titleAndValue );
     titleLabel->setFontRole( Skin::TitleFont );
 
-    auto valueLabel = new QskTextLabel( value, titleAndValue );
+    m_valueLabel = new QskTextLabel( titleAndValue );
-    valueLabel->setSubcontrolProxy( QskTextLabel::Text, ValueText );
+    m_valueLabel->setSubcontrolProxy( QskTextLabel::Text, ValueText );
+    setValue( initialValue );
 
     layout->addStretch( 1 );
 
-    new UpAndDownBox( layout );
+    auto* const upAndDownBox = new UpAndDownBox( layout );
+
+    connect( upAndDownBox, &UpAndDownBox::increase, this, [this]()
+    {
+        setValue( m_value + 1 );
+    } );
+
+    connect( upAndDownBox, &UpAndDownBox::decrease, this, [this]()
+    {
+        setValue( m_value - 1 );
+    } );
 }
+
+void BoxWithButtons::setValue( const int value )
+{
+    m_value = qBound( 0, value, 100 );
+    const QString text = m_prefix + QString::number( m_value ) + m_suffix;
+    m_valueLabel->setText( text );
+}
+
+#include "BoxWithButtons.moc"

examples/iotdashboard/BoxWithButtons.h

@@ -7,11 +7,22 @@
 
 #include "Box.h"
 
+class QskTextLabel;
+
 class BoxWithButtons : public Box
 {
   public:
     QSK_SUBCONTROLS( Panel, ValuePanel, ValueText )
 
-    BoxWithButtons( const QString& title, const QString& value,
+    BoxWithButtons( const QString& title, const QString& prefix,
+                    const int initialValue, const QString& suffix,
                     bool isBright, QQuickItem* parent = nullptr );
+
+  private:
+    void setValue( const int value );
+
+    const QString m_prefix;
+    int m_value;
+    const QString m_suffix;
+    QskTextLabel* m_valueLabel;
 };

examples/iotdashboard/DashboardPage.cpp

@@ -33,7 +33,7 @@ namespace
     {
       public:
         IndoorTemperature( QQuickItem* parent = nullptr )
-            : BoxWithButtons( "Indoor Temperature", "+24", true, parent )
+            : BoxWithButtons( "Indoor Temperature", "+", 24, {}, true, parent )
         {
         }
     };
@@ -42,7 +42,7 @@ namespace
     {
       public:
         Humidity( QQuickItem* parent = nullptr )
-            : BoxWithButtons( "Humidity", "30%", false, parent )
+            : BoxWithButtons( "Humidity", {}, 30, "%", false, parent )
         {
         }
     };

examples/iotdashboard/LightDisplay.cpp

@@ -43,10 +43,6 @@ LightDisplay::LightDisplay( QQuickItem* parent )
     setAlignmentHint( ValueText, Qt::AlignRight );
 
     setBoundaries( 0, 100 );
-
-    // ### move to Skin:
-    setShadow( { 0, 20 } );
-    setShadowColor( 0xe5e5e5 );
 }
 
 bool LightDisplay::isPressed() const
@@ -54,17 +50,6 @@ bool LightDisplay::isPressed() const
     return hasSkinState( Pressed );
 }
 
-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;
@@ -76,17 +61,6 @@ 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;
-}
-
 void LightDisplay::mousePressEvent( QMouseEvent* event )
 {
     QRectF handleRect = subControlRect( LightDisplay::Knob );

examples/iotdashboard/LightDisplay.h

@@ -22,15 +22,9 @@ class LightDisplay : public QskBoundedValueInput
 
     bool isPressed() const;
 
-    void setShadow( const QskShadowMetrics& );
-    const QskShadowMetrics& shadow() const;
-
     void setGradient( const QskGradient& );
     const QskGradient& gradient() const;
 
-    void setShadowColor( const QColor& );
-    QColor shadowColor() const;
-
   protected:
     void mousePressEvent( QMouseEvent* e ) override;
     void mouseMoveEvent( QMouseEvent* e ) override;

examples/iotdashboard/LightDisplaySkinlet.cpp

@@ -137,18 +137,7 @@ QSGNode* LightDisplaySkinlet::updateSubNode(
         }
         case GrooveRole:
         {
-            const QRectF grooveRect = display->subControlRect( LightDisplay::Groove );
+            return updateBoxNode( skinnable, node, LightDisplay::Groove );
-            if ( grooveRect.isEmpty() )
-                return nullptr;
-
-            const auto& shadowMetrics = display->shadow();
-            const auto shadowRect = shadowMetrics.shadowRect( grooveRect );
-
-            auto shadowNode = QskSGNode::ensureNode< QskBoxShadowNode >( node );
-            shadowNode->setShadowData( shadowRect, grooveRect.width() / 2,
-                shadowMetrics.blurRadius(), display->shadowColor() );
-
-            return shadowNode;
         }
         case ColdAndWarmArcRole:
         {

examples/iotdashboard/MyDevices.cpp

@@ -4,12 +4,12 @@
  *****************************************************************************/
 
 #include "MyDevices.h"
-#include "Skin.h"
 #include "RoundedIcon.h"
 
 #include <QskGraphic.h>
 #include <QskGraphicLabel.h>
 #include <QskGridBox.h>
+#include <QskSkin.h>
 #include <QskTextLabel.h>
 
 #include <QImage>
@@ -26,8 +26,10 @@ namespace
 
             auto icon = new RoundedIcon( isBright, this );
             icon->setPale( true );
-            icon->setSource( name );
+            icon->setGraphicSource( name );
+            icon->setGraphicStrutSize( { 36, 36 } );
             icon->setFixedSize( 68, 68 );
+            icon->setCheckable( true );
 
             auto textLabel = new QskTextLabel( name, this );
             textLabel->setFontRole( QskSkin::TinyFont );

examples/iotdashboard/RoundButton.h

@@ -7,7 +7,7 @@
 
 #include <QskPushButton.h>
 
-class RoundButton : QskPushButton
+class RoundButton : public QskPushButton
 {
     Q_OBJECT
 

examples/iotdashboard/RoundedIcon.cpp

@@ -7,25 +7,24 @@
 
 QSK_SUBCONTROL( RoundedIcon, Panel )
 QSK_SUBCONTROL( RoundedIcon, PalePanel )
+QSK_SUBCONTROL( RoundedIcon, Graphic )
 
 QSK_STATE( RoundedIcon, Bright, ( QskAspect::FirstUserState << 1 ) )
 
 RoundedIcon::RoundedIcon( bool isBright, QQuickItem* parent )
-    : QskGraphicLabel( parent )
+    : QskPushButton( parent )
 {
-    setAlignment( Qt::AlignCenter );
-    setFillMode( QskGraphicLabel::Pad );
-
     if( isBright )
         setSkinStateFlag( Bright );
 
-    setPanel( true );
     setPale( false );
+
+    setSubcontrolProxy( QskPushButton::Graphic, Graphic );
 }
 
 void RoundedIcon::setPale( bool on )
 {
-    setSubcontrolProxy( QskGraphicLabel::Panel, on ? PalePanel : Panel );
+    setSubcontrolProxy( QskPushButton::Panel, on ? PalePanel : Panel );
 }
 
 #include "moc_RoundedIcon.cpp"

examples/iotdashboard/RoundedIcon.h

@@ -5,18 +5,21 @@
 
 #pragma once
 
-#include <QskGraphicLabel.h>
+#include <QskPushButton.h>
 
-class QskGraphicLabel;
+class RoundedIcon : public QskPushButton
-
-class RoundedIcon : public QskGraphicLabel
 {
     Q_OBJECT
 
   public:
-    QSK_SUBCONTROLS( Panel, PalePanel )
+    QSK_SUBCONTROLS( Panel, PalePanel, Graphic )
     QSK_STATES( Bright ) // to differentiate between orange and purple
 
+    enum {
+        NormalRole,
+        CheckedRole,
+    } GraphicRole;
+
     RoundedIcon( bool isBright, QQuickItem* parent = nullptr );
 
     void setPale( bool );

examples/iotdashboard/Skin.cpp

@@ -16,6 +16,7 @@
 #include "LightDisplaySkinlet.h"
 #include "DashboardPage.h"
 #include "MenuBar.h"
+#include "RoomsPage.h"
 #include "RoundedIcon.h"
 #include "RoundButton.h"
 #include "TopBar.h"
@@ -26,9 +27,11 @@
 #include <QskBoxShapeMetrics.h>
 #include <QskBoxBorderMetrics.h>
 #include <QskBoxBorderColors.h>
+#include <QskColorFilter.h>
 #include <QskFunctions.h>
 #include <QskShadowMetrics.h>
 #include <QskSkinHintTableEditor.h>
+#include <QskStateCombination.h>
 #include <QskTextLabel.h>
 
 #include <QFontDatabase>
@@ -147,11 +150,31 @@ void Skin::initHints( const Palette& palette )
         QskGradient bright( 0xffff7d34, 0xffff3122 );
         bright.setLinearDirection( Qt::Vertical );
 
-        if ( subControl == RoundedIcon::PalePanel )
+        if ( subControl == RoundedIcon::PalePanel ) // My Devices section
         {
             const uint alpha = 38;
             normal.setAlpha( alpha );
             bright.setAlpha( alpha );
+
+            auto pressedNormal = normal;
+            pressedNormal.setAlpha( 10 );
+            auto pressedBright = bright;
+            pressedBright.setAlpha( 10 );
+
+            const int duration = 300;
+
+            ed.setGradient( RoundedIcon::PalePanel | QskAbstractButton::Checked, pressedNormal );
+            ed.setGradient( RoundedIcon::PalePanel | RoundedIcon::Bright | QskAbstractButton::Checked, pressedBright );
+            ed.setAnimation( RoundedIcon::PalePanel | QskAspect::Color, duration );
+
+            ed.setGraphicRole( RoundedIcon::Graphic, RoundedIcon::NormalRole );
+            ed.setGraphicRole( RoundedIcon::Graphic | QskAbstractButton::Checked, RoundedIcon::CheckedRole,
+                               { QskStateCombination::CombinationNoState, RoundedIcon::Bright } );
+            ed.setAnimation( RoundedIcon::Graphic, duration );
+
+            QskColorFilter filter;
+            filter.addColorSubstitution( 0xff606675, palette.deviceGraphic ); // color comes from the SVG
+            setGraphicFilter( RoundedIcon::CheckedRole, filter );
         }
 
         ed.setGradient( subControl, normal );
@@ -200,10 +223,6 @@ void Skin::initHints( const Palette& palette )
     ed.setBoxShape( LightDisplay::Panel, 100, Qt::RelativeSize );
 
     ed.setArcMetrics( LightDisplay::ColdAndWarmArc, 8.785, 0, 180 );
-    const QskGradient coldGradient(
-        { { 0.0, 0xffff3122 }, { 0.2, 0xfffeeeb7 }, { 0.3, 0xffa7b0ff },
-          { 0.5, 0xff6776ff }, { 1.0, Qt::black } } );
-    ed.setGradient( LightDisplay::ColdAndWarmArc, coldGradient );
 
     ed.setMetric( LightDisplay::Tickmarks, 1 );
     ed.setArcMetrics( LightDisplay::Tickmarks, { 4.69, 0, 180 } );
@@ -214,12 +233,12 @@ void Skin::initHints( const Palette& palette )
 
     ed.setStrutSize( LightDisplay::Knob, { 20, 20 } );
     ed.setBoxBorderMetrics( LightDisplay::Knob, 1 );
-    ed.setBoxBorderColors( LightDisplay::Knob, 0xffc4c4c4 );
     ed.setBoxShape( LightDisplay::Knob, 100, Qt::RelativeSize );
 
     // palette dependent skin hints:
     ed.setGradient( MenuBar::Panel, palette.menuBar );
     ed.setGradient( DashboardPage::Panel, palette.mainContent );
+    ed.setGradient( RoomsPage::Panel, palette.mainContent );
 
     ed.setColor( Box::Panel, palette.box );
     QskShadowMetrics shadowMetrics( 0, 10 );
@@ -236,7 +255,18 @@ void Skin::initHints( const Palette& palette )
 
     ed.setGradient( LightDisplay::Panel, palette.box );
     ed.setGradient( LightDisplay::Knob, palette.box );
+    ed.setGradient( LightDisplay::ColdAndWarmArc, palette.lightDisplayColdAndWarmArc );
+    ed.setBoxBorderColors( LightDisplay::Knob, palette.lightDisplayKnobBorder );
+    ed.setShadowMetrics( LightDisplay::Groove, { 0, 20 } );
+    ed.setShadowColor( LightDisplay::Groove, palette.shadow );
+    ed.setGradient( LightDisplay::Groove, palette.box );
+    ed.setBoxShape( LightDisplay::Groove, 100, Qt::RelativeSize );
+
     ed.setGradient( RoundButton::Panel, palette.roundButton );
+    ed.setGradient( RoundButton::Panel | QskAbstractButton::Pressed, palette.roundButtonPressed,
+                    { QskStateCombination::CombinationNoState, RoundButton::Top } );
+    ed.setAnimation( RoundButton::Panel | QskAspect::Color, 100 );
+
     ed.setBoxBorderColors( UsageDiagramBox::DaysBox, palette.weekdayBox );
     ed.setColor( QskTextLabel::Text, palette.text );
     ed.setColor( UsageDiagramBox::DayText, palette.text );
@@ -250,10 +280,15 @@ Skin::Palette DaytimeSkin::palette() const
         0xfffbfbfb,
         Qt::white,
         0xfff7f7f7,
+        0xffe5e5e5,
         0xfff4f4f4,
         Qt::black,
         0xffe5e5e5,
-        { { { 0.0, 0xffc4c4c4 }, { 0.5, 0xfff8f8f8 }, { 1.0, 0xffc4c4c4 } } }
+        0xffc4c4c4,
+        { { { 0.0, 0xffff3122 }, { 0.2, 0xfffeeeb7 }, { 0.3, 0xffa7b0ff },
+                { 0.5, 0xff6776ff }, { 1.0, Qt::black } } },
+        { { { 0.0, 0xffc4c4c4 }, { 0.5, 0xfff8f8f8 }, { 1.0, 0xffc4c4c4 } } },
+        0xffdddddd,
     };
 }
 
@@ -264,9 +299,14 @@ Skin::Palette NighttimeSkin::palette() const
         0xff040404,
         Qt::black,
         0xff0a0a0a,
+        0xff1a1a1a,
         0xff0c0c0c,
         Qt::white,
-        0xff1a1a1a,
+        0xff4a4a4a,
-        { { { 0.0, 0xff666666 }, { 0.5, 0xff222222 }, { 1.0, 0xff333333 } } }
+        0xff555555,
+        { { { 0.0, 0xff991100 }, { 0.2, 0xff9a7a57 },
+                { 0.5, 0xff3726af }, { 1.0, Qt::black } } },
+        { { { 0.0, 0xff666666 }, { 0.5, 0xff222222 }, { 1.0, 0xff333333 } } },
+        0xff222222,
     };
 }

examples/iotdashboard/Skin.h

@@ -17,10 +17,14 @@ class Skin : public QskSkin
         QColor mainContent;
         QColor box;
         QColor roundButton;
+        QColor roundButtonPressed;
         QColor weekdayBox;
         QColor text;
         QColor shadow;
+        QColor lightDisplayKnobBorder;
+        QskGradient lightDisplayColdAndWarmArc;
         QskGradient circularProgressBarGroove;
+        QRgb deviceGraphic;
     };
 
     Skin( const Palette& palette, QObject* parent = nullptr );