IOT dashboard: Make temperature and humidity changeable with buttons

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 );
-            new RoundButton( QskAspect::Bottom, this );
+            auto* const topButton = new RoundButton( QskAspect::Top, 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,
-        bool isBright, QQuickItem* parent )
+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 );
 
@@ -54,10 +66,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 );
-    valueLabel->setSubcontrolProxy( QskTextLabel::Text, ValueText );
+    m_valueLabel = new QskTextLabel( titleAndValue );
+    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,
-        bool isBright, QQuickItem* parent = nullptr );
+    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/RoundButton.h

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

examples/iotdashboard/Skin.cpp

@@ -29,6 +29,7 @@
 #include <QskFunctions.h>
 #include <QskShadowMetrics.h>
 #include <QskSkinHintTableEditor.h>
+#include <QskStateCombination.h>
 #include <QskTextLabel.h>
 
 #include <QFontDatabase>
@@ -237,6 +238,10 @@ void Skin::initHints( const Palette& palette )
     ed.setGradient( LightDisplay::Panel, palette.box );
     ed.setGradient( LightDisplay::Knob, palette.box );
     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,6 +255,7 @@ Skin::Palette DaytimeSkin::palette() const
         0xfffbfbfb,
         Qt::white,
         0xfff7f7f7,
+        0xffe5e5e5,
         0xfff4f4f4,
         Qt::black,
         0xffe5e5e5,
@@ -264,6 +270,7 @@ Skin::Palette NighttimeSkin::palette() const
         0xff040404,
         Qt::black,
         0xff0a0a0a,
+        0xff1a1a1a,
         0xff0c0c0c,
         Qt::white,
         0xff1a1a1a,

examples/iotdashboard/Skin.h

@@ -17,6 +17,7 @@ class Skin : public QskSkin
         QColor mainContent;
         QColor box;
         QColor roundButton;
+        QColor roundButtonPressed;
         QColor weekdayBox;
         QColor text;
         QColor shadow;