use some gradients

all of this is very hackish still

examples/iot-dashboard/CircularProgressBar.cpp

@@ -2,9 +2,9 @@
 
 #include <QPainter>
 
-CircularProgressBar::CircularProgressBar(const QColor &color, int progress, QQuickItem *parent)
+CircularProgressBar::CircularProgressBar(const QGradient &gradient, int progress, QQuickItem *parent)
     : QQuickPaintedItem(parent)
-    , m_color(color)
+    , m_gradient(gradient)
     , m_progress(progress)
 {
 }
@@ -12,21 +12,24 @@ CircularProgressBar::CircularProgressBar(const QColor &color, int progress, QQui
 void CircularProgressBar::paint(QPainter *painter)
 {
     auto size = contentsSize();
-    qDebug() << Q_FUNC_INFO << size;
     QRectF outerRect({0, 0}, size);
 
     painter->setRenderHint(QPainter::Antialiasing, true);
 
-    // ### chose a different color here due to the lack of inner shadow:
-    painter->setBrush({"#e8e8e8"});
+    QRadialGradient gradient(size.width() / 2, size.height() / 2, 45);
+    QGradientStop stop1(0.0, "#c0c0c0");
+    QGradientStop stop2(0.5, "#f0f0f0");
+    QGradientStop stop3(1.0, "#c0c0c0");
+    gradient.setStops({stop1, stop2, stop3});
+
+    painter->setBrush(gradient);
     painter->setPen(Qt::white);
     painter->drawEllipse(outerRect);
 
     int startAngle = 1440;
     int endAngle = -16 * (m_progress / 100.0) * 360;
 
-    painter->setBrush(color());
-    painter->setPen(color());
+    painter->setBrush(m_gradient);
     painter->drawPie(outerRect, startAngle, endAngle);
 
     painter->setBrush(Qt::white);

examples/iot-dashboard/CircularProgressBar.h

@@ -1,24 +1,16 @@
 #ifndef CIRCULARPROGRESSBAR_H
 #define CIRCULARPROGRESSBAR_H
 
-#include <QColor>
+#include <QGradient>
 #include <QQuickPaintedItem>
 
 class CircularProgressBar : public QQuickPaintedItem
 {
 public:
-    CircularProgressBar(const QColor& color, int progress, QQuickItem* parent = nullptr);
+    CircularProgressBar(const QGradient& gradient, int progress, QQuickItem* parent = nullptr);
 
     virtual void paint(QPainter *painter) override;
 
-    QColor color() const {
-        return m_color;
-    }
-
-    void setColor(const QColor& color) {
-        m_color = color;
-    }
-
     double width() const {
         return m_width;
     }
@@ -28,7 +20,7 @@ public:
     }
 
 private:
-    QColor m_color;
+    QGradient m_gradient;
     double m_width = 20;
     int m_progress;
 };

examples/iot-dashboard/PieChartPainted.cpp

@@ -6,10 +6,11 @@
 #include <QFontMetricsF>
 #include <QQuickPaintedItem>
 
-PieChartPainted::PieChartPainted(const QColor &color, int progress, int value, QQuickItem *parent)
+PieChartPainted::PieChartPainted(const QColor& color, const QGradient& gradient, int progress, int value, QQuickItem *parent)
     : QskControl(parent)
     , m_color(color)
-    , m_progressBar(new CircularProgressBar(color, progress, this))
+    , m_gradient(gradient)
+    , m_progressBar(new CircularProgressBar(gradient, progress, this))
     , m_progressLabel(new QskTextLabel(this))
 //    , m_numberLabel(new QskTextLabel(QString::number(value), this))
 //    , m_unitLabel(new QskTextLabel("kwH", this))

examples/iot-dashboard/PieChartPainted.h

@@ -11,13 +11,14 @@ class QQuickPaintedItem;
 class PieChartPainted : public QskControl
 {
 public:
-    PieChartPainted(const QColor& color, int progress, int value, QQuickItem* parent = nullptr);
+    PieChartPainted(const QColor& color, const QGradient& gradient, int progress, int value, QQuickItem* parent = nullptr);
 
     virtual QSizeF contentsSizeHint( Qt::SizeHint, const QSizeF& ) const override;
     void updateLayout() override;
 
 private:
     QColor m_color;
+    QGradient m_gradient;
     CircularProgressBar* m_progressBar;
     QskTextLabel* m_progressLabel;
 //    QskTextLabel* m_numberLabel;

examples/iot-dashboard/TopBar.cpp

@@ -6,7 +6,7 @@
 
 #include <QTime>
 
-TopBarItem::TopBarItem(const QString& name, const QColor &color, int progress, int value, QQuickItem* parent ) : QskLinearBox( Qt::Vertical, parent ),
+TopBarItem::TopBarItem(const QString& name, const QColor &textColor, const QGradient& gradient, int progress, int value, QQuickItem* parent ) : QskLinearBox( Qt::Vertical, parent ),
     m_name( name )
 {
     setAutoLayoutChildren( true );
@@ -19,7 +19,7 @@ TopBarItem::TopBarItem(const QString& name, const QColor &color, int progress, i
     auto* textLabel = new QskTextLabel( name, this );
     textLabel->setFontRole(QskSkin::SmallFont); // ### style
 
-    auto* pieChart = new PieChartPainted(color, progress, value, this);
+    auto* pieChart = new PieChartPainted(textColor, gradient, progress, value, this);
 }
 
 TopBar::TopBar(QQuickItem *parent) : QskLinearBox(Qt::Horizontal, parent)
@@ -30,13 +30,24 @@ TopBar::TopBar(QQuickItem *parent) : QskLinearBox(Qt::Horizontal, parent)
     setFixedHeight(100);
 
     QStringList itemStrings = { "Living Room", "Bedroom", "Bathroom", "Kitchen" };
-    QColor colors[] = {"#ff3122", "#6776ff", "#f99055", "#6776ff"};
+    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++)
     {
-        auto* item = new TopBarItem( itemStrings.at(a), colors[a], progressValues[a], values[a], this );
+        QLinearGradient gradient(0, 0, 30, 0); // ### do this properly and dependent on the size
+        QGradientStop stop1(0.0, gradientColors[2 * a]);
+        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 );
         m_entries.append(item);
     }
 

examples/iot-dashboard/TopBar.h

@@ -1,13 +1,14 @@
 #pragma once
 
 #include <QskLinearBox.h>
+#include <QGradient>
 
 class TopBarItem : public QskLinearBox
 {
     Q_OBJECT
 
 public:
-    TopBarItem(const QString& name, const QColor& color, int progress, int value, QQuickItem* parent );
+    TopBarItem(const QString& name, const QColor& textColor, const QGradient &gradient, int progress, int value, QQuickItem* parent );
 
 private:
     QString m_name;