diff --git a/examples/iot-dashboard/CircularProgressBar.cpp b/examples/iot-dashboard/CircularProgressBar.cpp index af042c7e..382475a8 100644 --- a/examples/iot-dashboard/CircularProgressBar.cpp +++ b/examples/iot-dashboard/CircularProgressBar.cpp @@ -2,9 +2,9 @@ #include -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); diff --git a/examples/iot-dashboard/CircularProgressBar.h b/examples/iot-dashboard/CircularProgressBar.h index ce232cdf..88d43ca3 100644 --- a/examples/iot-dashboard/CircularProgressBar.h +++ b/examples/iot-dashboard/CircularProgressBar.h @@ -1,24 +1,16 @@ #ifndef CIRCULARPROGRESSBAR_H #define CIRCULARPROGRESSBAR_H -#include +#include #include 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; }; diff --git a/examples/iot-dashboard/PieChartPainted.cpp b/examples/iot-dashboard/PieChartPainted.cpp index 624ad371..090615bc 100644 --- a/examples/iot-dashboard/PieChartPainted.cpp +++ b/examples/iot-dashboard/PieChartPainted.cpp @@ -6,10 +6,11 @@ #include #include -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)) diff --git a/examples/iot-dashboard/PieChartPainted.h b/examples/iot-dashboard/PieChartPainted.h index 306be32a..2fb12f82 100644 --- a/examples/iot-dashboard/PieChartPainted.h +++ b/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; diff --git a/examples/iot-dashboard/TopBar.cpp b/examples/iot-dashboard/TopBar.cpp index 5c20e416..95038ff6 100644 --- a/examples/iot-dashboard/TopBar.cpp +++ b/examples/iot-dashboard/TopBar.cpp @@ -6,7 +6,7 @@ #include -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); } diff --git a/examples/iot-dashboard/TopBar.h b/examples/iot-dashboard/TopBar.h index c372405e..3865750d 100644 --- a/examples/iot-dashboard/TopBar.h +++ b/examples/iot-dashboard/TopBar.h @@ -1,13 +1,14 @@ #pragma once #include +#include 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;