style round progress bars

examples/iot-dashboard/CircularProgressBar.cpp

@@ -2,11 +2,18 @@
 
 #include <QPainter>
 
-CircularProgressBar::CircularProgressBar( const QGradient& gradient, int progress, QQuickItem* parent )
+CircularProgressBar::CircularProgressBar( const QskGradient& gradient, int progress, QQuickItem* parent )
     : QQuickPaintedItem( parent )
-    , m_gradient( gradient )
     , m_progress( progress )
 {
+    // This is a bit hackish, but let's do this properly
+    // once QSkinny has an arch renderer in place
+    QLinearGradient g( 0, 0, 30, 0 );
+    QGradientStop stop1( 0.0, gradient.colorAt( 0 ) );
+    QGradientStop stop2( 1.0, gradient.colorAt( 1 ) );
+    g.setStops( {stop1, stop2} );
+    m_gradient = g;
+
     connect( this, &QQuickPaintedItem::contentsSizeChanged, [this]()
     {
         auto size = contentsSize();

examples/iot-dashboard/CircularProgressBar.h

@@ -1,13 +1,15 @@
 #ifndef CIRCULARPROGRESSBAR_H
 #define CIRCULARPROGRESSBAR_H
 
+#include <QskGradient.h>
+
 #include <QGradient>
 #include <QQuickPaintedItem>
 
 class CircularProgressBar : public QQuickPaintedItem
 {
     public:
-        CircularProgressBar( const QGradient& gradient, int progress, QQuickItem* parent = nullptr );
+        CircularProgressBar( const QskGradient& gradient, int progress, QQuickItem* parent = nullptr );
 
         virtual void paint( QPainter* painter ) override;
 

examples/iot-dashboard/PieChartPainted.cpp

@@ -73,7 +73,7 @@ class ProgressBarAnimator : public QskAnimator
         CircularProgressBar* m_progressBar;
 };
 
-PieChartPainted::PieChartPainted( const QColor& color, const QGradient& gradient, int progress, int /*value*/, QQuickItem* parent )
+PieChartPainted::PieChartPainted( const QColor& color, const QskGradient& gradient, int progress, int /*value*/, QQuickItem* parent )
     : QskControl( parent )
     , m_color( color )
     , m_gradient( gradient )

examples/iot-dashboard/PieChartPainted.h

@@ -15,7 +15,7 @@ class PieChartPainted : public QskControl
     public:
         QSK_SUBCONTROLS( Panel )
 
-        PieChartPainted( const QColor& color, const QGradient& gradient, int progress, int value, QQuickItem* parent = nullptr );
+        PieChartPainted( const QColor& color, const QskGradient& gradient, int progress, int value, QQuickItem* parent = nullptr );
 
         QskAspect::Subcontrol effectiveSubcontrol(
             QskAspect::Subcontrol subControl ) const override final;
@@ -25,7 +25,7 @@ class PieChartPainted : public QskControl
 
     private:
         QColor m_color;
-        QGradient m_gradient;
+        QskGradient m_gradient;
         CircularProgressBar* m_progressBar;
         QskTextLabel* m_progressLabel;
         ProgressBarAnimator* m_animator;

examples/iot-dashboard/Skin.cpp

@@ -76,12 +76,23 @@ void Skin::initHints( const Palette& palette )
 
     ed.setPadding( TopBar::Panel, {25, 35, 25, 0} );
 
+    ed.setColor( TopBarItem::Item1 | QskAspect::TextColor, "#ff3122" );
+    ed.setColor( TopBarItem::Item2 | QskAspect::TextColor, "#6776ff" );
+    ed.setColor( TopBarItem::Item3 | QskAspect::TextColor, "#f99055" );
+    ed.setColor( TopBarItem::Item4 | QskAspect::TextColor, "#6776ff" );
+
+    ed.setGradient( TopBarItem::Item1, { Qt::Horizontal, "#FF5C00", "#FF3122" } );
+    ed.setGradient( TopBarItem::Item2, { Qt::Horizontal, "#6776FF", "#6100FF" } );
+    ed.setGradient( TopBarItem::Item3, { Qt::Horizontal, "#FFCE50", "#FF3122" } );
+    ed.setGradient( TopBarItem::Item4, { Qt::Horizontal, "#6776FF", "#6100FF" } );
+
+
     ed.setColor( MenuBarLabel::Text, Qt::white );
     ed.setFontRole( MenuBarLabel::Text, QskSkin::SmallFont );
 
     ed.setAlignment( MenuBarGraphicLabel::Graphic, Qt::AlignCenter );
 
-
+    // palette dependent skin hints:
     ed.setGradient( MenuBar::Panel, palette.menuBar );
     ed.setGradient( MainContent::Panel, palette.mainContent );
     ed.setGradient( Box::Panel, palette.box );

examples/iot-dashboard/TopBar.cpp

@@ -6,9 +6,35 @@
 
 #include <QTime>
 
+QSK_SUBCONTROL( TopBarItem, Item1 )
+QSK_SUBCONTROL( TopBarItem, Item2 )
+QSK_SUBCONTROL( TopBarItem, Item3 )
+QSK_SUBCONTROL( TopBarItem, Item4 )
+
 QSK_SUBCONTROL( TopBar, Panel )
 
-TopBarItem::TopBarItem( const QString& name, const QColor& textColor, const QGradient& gradient, int progress, int value, QQuickItem* parent ) : QskLinearBox( Qt::Vertical, parent ),
+namespace
+{
+    QskAspect::Subcontrol subcontrolForIndex( int index )
+    {
+        switch( index )
+        {
+            case 0:
+                return TopBarItem::Item1;
+
+            case 1:
+                return TopBarItem::Item2;
+
+            case 2:
+                return TopBarItem::Item3;
+
+            default:
+                return TopBarItem::Item4;
+        }
+    }
+}
+
+TopBarItem::TopBarItem( int index, const QString& name, const QskGradient& gradient, int progress, int value, QQuickItem* parent ) : QskLinearBox( Qt::Vertical, parent ),
     m_name( name )
 {
     setAutoLayoutChildren( true );
@@ -16,10 +42,13 @@ TopBarItem::TopBarItem( const QString& name, const QColor& textColor, const QGra
     setSpacing( 15 );
 
     auto* textLabel = new QskTextLabel( name, this );
-    textLabel->setFontRole( QskSkin::SmallFont ); // ### style
+    textLabel->setFontRole( QskSkin::SmallFont );
 
     auto* pieChartAndDisplay = new QskLinearBox( Qt::Horizontal, this );
     pieChartAndDisplay->setSpacing( 10 );
+
+    QskAspect::Subcontrol subcontrol = subcontrolForIndex( index );
+    QColor textColor = color( subcontrol | QskAspect::TextColor );
     /*auto* pieChart =*/ new PieChartPainted( textColor, gradient, progress, value, pieChartAndDisplay );
     auto* display = new QskLinearBox( Qt::Vertical, pieChartAndDisplay );
     display->setSpacing( 0 );
@@ -40,25 +69,16 @@ TopBar::TopBar( QQuickItem* parent ) : QskLinearBox( Qt::Horizontal, parent )
     setSizePolicy( QskSizePolicy::Preferred, QskSizePolicy::Fixed );
 
     QStringList itemStrings = { "Living Room", "Bedroom", "Bathroom", "Kitchen" };
-    QColor textColors[] = {"#ff3122", "#6776ff", "#f99055", "#6776ff"};
-    QColor gradientColors[] = {"#FF5C00", "#FF3122",
-                               "#6776FF", "#6100FF",
-                               "#FFCE50", "#FF3122",
-//                               "#00ff00", "#ffffff", // ### remove
-                               "#6776FF", "#6100FF"
-                              };
 
     int progressValues[] = {25, 45, 15, 86};
     int values[] = {175, 205, 115, 289};
 
-    for( int a = 0; a < itemStrings.count(); a++ )
+    for( int i = 0; i < itemStrings.count(); i++ )
     {
-        QLinearGradient gradient( 0, 0, 30, 0 ); // ### do this properly and dependent on the size
+        QskAspect::Subcontrol subcontrol = subcontrolForIndex( i );
-        QGradientStop stop1( 0.0, gradientColors[2 * a] );
+        QskGradient gradient = gradientHint( subcontrol );
-        QGradientStop stop2( 1.0, gradientColors[2 * a + 1] );
-        gradient.setStops( {stop1, stop2} );
 
-        auto* item = new TopBarItem( itemStrings.at( a ), textColors[a], gradient, progressValues[a], values[a], this );
+        auto* item = new TopBarItem( i, itemStrings.at( i ), gradient, progressValues[i], values[i], this );
         m_entries.append( item );
     }
 

examples/iot-dashboard/TopBar.h

@@ -8,7 +8,20 @@ class TopBarItem : public QskLinearBox
         Q_OBJECT
 
     public:
-        TopBarItem( const QString& name, const QColor& textColor, const QGradient& gradient, int progress, int value, QQuickItem* parent );
+        QSK_SUBCONTROLS( Item1, Item2, Item3, Item4 )
+
+        TopBarItem( int index, const QString& name, const QskGradient& gradient, int progress, int value, QQuickItem* parent );
+
+        QskAspect::Subcontrol effectiveSubcontrol(
+            QskAspect::Subcontrol subControl ) const override final
+        {
+            if( subControl == QskLinearBox::Panel )
+            {
+                return Panel;
+            }
+
+            return subControl;
+        }
 
     private:
         QString m_name;