IOT example: Make device buttons clickable

examples/iotdashboard/BoxWithButtons.cpp

@@ -56,7 +56,8 @@ BoxWithButtons::BoxWithButtons( const QString& title, const QString &prefix,
     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 );

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/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 QskGraphicLabel
+class RoundedIcon : public QskPushButton
 {
     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

@@ -26,6 +26,7 @@
 #include <QskBoxShapeMetrics.h>
 #include <QskBoxBorderMetrics.h>
 #include <QskBoxBorderColors.h>
+#include <QskColorFilter.h>
 #include <QskFunctions.h>
 #include <QskShadowMetrics.h>
 #include <QskSkinHintTableEditor.h>
@@ -148,11 +149,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 );
@@ -259,7 +280,8 @@ Skin::Palette DaytimeSkin::palette() const
         0xfff4f4f4,
         Qt::black,
         0xffe5e5e5,
-        { { { 0.0, 0xffc4c4c4 }, { 0.5, 0xfff8f8f8 }, { 1.0, 0xffc4c4c4 } } }
+        { { { 0.0, 0xffc4c4c4 }, { 0.5, 0xfff8f8f8 }, { 1.0, 0xffc4c4c4 } } },
+        0xffdddddd,
     };
 }
 
@@ -274,6 +296,7 @@ Skin::Palette NighttimeSkin::palette() const
         0xff0c0c0c,
         Qt::white,
         0xff1a1a1a,
-        { { { 0.0, 0xff666666 }, { 0.5, 0xff222222 }, { 1.0, 0xff333333 } } }
+        { { { 0.0, 0xff666666 }, { 0.5, 0xff222222 }, { 1.0, 0xff333333 } } },
+        0xff222222,
     };
 }

examples/iotdashboard/Skin.h

@@ -22,6 +22,7 @@ class Skin : public QskSkin
         QColor text;
         QColor shadow;
         QskGradient circularProgressBarGroove;
+        QRgb deviceGraphic;
     };
 
     Skin( const Palette& palette, QObject* parent = nullptr );