From 9ba2fdb2f22ec2fdd44880b6d5c0129ce0a42da6 Mon Sep 17 00:00:00 2001 From: Peter Hartmann Date: Sat, 17 Dec 2022 11:26:26 +0100 Subject: [PATCH] IOT example: Make device buttons clickable --- examples/iotdashboard/BoxWithButtons.cpp | 3 ++- examples/iotdashboard/MyDevices.cpp | 6 +++-- examples/iotdashboard/RoundedIcon.cpp | 11 ++++----- examples/iotdashboard/RoundedIcon.h | 13 +++++++---- examples/iotdashboard/Skin.cpp | 29 +++++++++++++++++++++--- examples/iotdashboard/Skin.h | 1 + 6 files changed, 46 insertions(+), 17 deletions(-) diff --git a/examples/iotdashboard/BoxWithButtons.cpp b/examples/iotdashboard/BoxWithButtons.cpp index feae96bb..cfed81ba 100644 --- a/examples/iotdashboard/BoxWithButtons.cpp +++ b/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 ); diff --git a/examples/iotdashboard/MyDevices.cpp b/examples/iotdashboard/MyDevices.cpp index d5fa4945..cf463014 100644 --- a/examples/iotdashboard/MyDevices.cpp +++ b/examples/iotdashboard/MyDevices.cpp @@ -4,12 +4,12 @@ *****************************************************************************/ #include "MyDevices.h" -#include "Skin.h" #include "RoundedIcon.h" #include #include #include +#include #include #include @@ -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 ); diff --git a/examples/iotdashboard/RoundedIcon.cpp b/examples/iotdashboard/RoundedIcon.cpp index 9f5cea12..5c9c531b 100644 --- a/examples/iotdashboard/RoundedIcon.cpp +++ b/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" diff --git a/examples/iotdashboard/RoundedIcon.h b/examples/iotdashboard/RoundedIcon.h index b232d6d1..b448c42c 100644 --- a/examples/iotdashboard/RoundedIcon.h +++ b/examples/iotdashboard/RoundedIcon.h @@ -5,18 +5,21 @@ #pragma once -#include +#include -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 ); diff --git a/examples/iotdashboard/Skin.cpp b/examples/iotdashboard/Skin.cpp index dd7e78fd..9ecee0c3 100644 --- a/examples/iotdashboard/Skin.cpp +++ b/examples/iotdashboard/Skin.cpp @@ -26,6 +26,7 @@ #include #include #include +#include #include #include #include @@ -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, }; } diff --git a/examples/iotdashboard/Skin.h b/examples/iotdashboard/Skin.h index c60180af..7d374d1b 100644 --- a/examples/iotdashboard/Skin.h +++ b/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 );