From b4b1fa701c598379fe9096cc831e80fd72b7b38a Mon Sep 17 00:00:00 2001 From: Peter Hartmann Date: Tue, 8 Sep 2020 17:21:54 +0200 Subject: [PATCH] add light intensity --- examples/iot-dashboard/LightIntensity.cpp | 108 ++++++++++++++++++++++ examples/iot-dashboard/LightIntensity.h | 58 ++++++++++++ examples/iot-dashboard/MainContent.cpp | 6 +- examples/iot-dashboard/iot-dashboard.pro | 2 + 4 files changed, 173 insertions(+), 1 deletion(-) create mode 100644 examples/iot-dashboard/LightIntensity.cpp create mode 100644 examples/iot-dashboard/LightIntensity.h diff --git a/examples/iot-dashboard/LightIntensity.cpp b/examples/iot-dashboard/LightIntensity.cpp new file mode 100644 index 00000000..3d9c27cd --- /dev/null +++ b/examples/iot-dashboard/LightIntensity.cpp @@ -0,0 +1,108 @@ +#include "LightIntensity.h" +#include "DaytimeSkin.h" + +#include + +#include +#include + +LightDimmer::LightDimmer( QQuickItem* parent ) + : QQuickPaintedItem( parent ) +{ +} + +void LightDimmer::paint( QPainter* painter ) +{ + const qreal knobDiameter = 15.65; + const qreal offset = ( thickness() - knobDiameter ) + 2; + + painter->setRenderHint( QPainter::Antialiasing, true ); + + auto size = contentsSize(); + QRectF outerRect( {0, offset}, size ); + + QRadialGradient gradient( size.width() / 2, size.height() / 2, 70 ); + 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 = 16 * 180; + int middleAngle = 16 * -90; + int endAngle = 16 * -90; + + QLinearGradient blueGradient( {thickness(), 0.0}, {thickness(), thickness()} ); + blueGradient.setColorAt( 0, "#a7b0ff" ); + blueGradient.setColorAt( 1, "#6776ff" ); + painter->setBrush( blueGradient ); + painter->setPen( Qt::transparent ); + painter->drawPie( outerRect, startAngle, middleAngle ); + + QLinearGradient redGradient( {thickness(), 0.0}, {thickness(), thickness()} ); + redGradient.setColorAt( 0, "#feeeb7" ); + redGradient.setColorAt( 1, "#ff3122" ); + painter->setBrush( redGradient ); + painter->drawPie( outerRect, 16 * 90, endAngle ); + + painter->setBrush( Qt::white ); + painter->setPen( Qt::white ); + QRectF innerRect( thickness() / 2, thickness() / 2 + offset, size.width() - thickness(), size.height() - thickness() ); + painter->drawEllipse( innerRect ); + + painter->setBrush( Qt::white ); + painter->setPen( "#c4c4c4" ); + QRectF knobRect( ( contentsSize().width() - knobDiameter ) / 2, 1, knobDiameter, knobDiameter ); + painter->drawEllipse( knobRect ); +} + +LightDisplay::LightDisplay( QQuickItem* parent ) + : QskControl( parent ) + , m_leftLabel( new QskTextLabel( QString::number( 0 ), this ) ) + , m_centreLabel( new QskTextLabel( QString::number( 50 ) + "%", this ) ) + , m_rightLabel( new QskTextLabel( QString::number( 100 ), this ) ) + , m_dimmer( new LightDimmer( this ) ) +{ + m_leftLabel->setSizePolicy( Qt::Horizontal, QskSizePolicy::Maximum ); + m_centreLabel->setSizePolicy( Qt::Horizontal, QskSizePolicy::Maximum ); + m_centreLabel->setZ( 1 ); + m_centreLabel->setFontRole( DaytimeSkin::LargeFont ); + m_centreLabel->setTextColor( "#929cb2" ); + m_rightLabel->setSizePolicy( Qt::Horizontal, QskSizePolicy::Maximum ); + m_rightLabel->setZ( 1 ); + + setAutoLayoutChildren( true ); +} + +void LightDisplay::updateLayout() +{ + const int r = qMin( width(), height() ); + m_dimmer->setContentsSize( {r - 4, r - 4} ); // for some reason we need some padding, hence the 4 + m_dimmer->setSize( QSizeF( r, r ) ); + const qreal padding = 8; + const qreal x = ( width() - ( m_leftLabel->width() + 2 * padding + m_dimmer->width() + m_rightLabel->width() ) ) / 2; + const qreal offset = 2; // circle doesn't start at 0 + m_leftLabel->setPosition( {x, ( m_dimmer->height() - m_leftLabel->height() ) / 2 + offset} ); + + m_dimmer->setPosition( {m_leftLabel->x() + m_leftLabel->width() + padding, 0} ); + + qreal centreX = m_dimmer->x() + ( m_dimmer->width() - m_centreLabel->width() ) / 2; + qreal centreY = m_dimmer->y() + ( m_dimmer->height() - m_centreLabel->height() ) / 2; + m_centreLabel->setPosition( {centreX, centreY + offset} ); + + m_rightLabel->setPosition( {m_dimmer->x() + m_dimmer->width() + padding, m_leftLabel->y()} ); +} + +LightIntensity::LightIntensity( QQuickItem* parent ) + : QskLinearBox( Qt::Vertical, parent ) +{ + setMargins( 17 ); + + auto* title = new QskTextLabel( "Light Intensity", this ); + title->setFontRole( DaytimeSkin::TitleFont ); + + new LightDisplay( this ); +} diff --git a/examples/iot-dashboard/LightIntensity.h b/examples/iot-dashboard/LightIntensity.h new file mode 100644 index 00000000..a85f423e --- /dev/null +++ b/examples/iot-dashboard/LightIntensity.h @@ -0,0 +1,58 @@ +#ifndef LIGHTINTENSITY_H +#define LIGHTINTENSITY_H + +#include + +#include + +class QskTextLabel; + +class LightDimmer: public QQuickPaintedItem +{ + Q_OBJECT + + public: + LightDimmer( QQuickItem* parent ); + + double thickness() const + { + return m_thickness; + } + + void setThickness( double thickness ) + { + m_thickness = thickness; + } + + private: + double m_thickness = 17.57; + + virtual void paint( QPainter* painter ) override; +}; + +class LightDisplay : public QskControl +{ + Q_OBJECT + + public: + LightDisplay( QQuickItem* parent ); + + protected: + void updateLayout() override; + + private: + QskTextLabel* m_leftLabel; + QskTextLabel* m_centreLabel; + QskTextLabel* m_rightLabel; + LightDimmer* m_dimmer; +}; + +class LightIntensity : public QskLinearBox +{ + Q_OBJECT + + public: + LightIntensity( QQuickItem* parent ); +}; + +#endif // LIGHTINTENSITY_H diff --git a/examples/iot-dashboard/MainContent.cpp b/examples/iot-dashboard/MainContent.cpp index 054b1cf5..03c03069 100644 --- a/examples/iot-dashboard/MainContent.cpp +++ b/examples/iot-dashboard/MainContent.cpp @@ -4,6 +4,7 @@ #include "Diagram.h" #include "Humidity.h" #include "IndoorTemperature.h" +#include "LightIntensity.h" #include "MyDevices.h" #include "PieChart.h" #include "TopBar.h" @@ -21,7 +22,7 @@ MainContent::MainContent( QQuickItem* parent ) : QskLinearBox( Qt::Vertical, par setDefaultAlignment( Qt::AlignTop ); setSpacing( 30 ); - auto* topBar = new TopBar( this ); + new TopBar( this ); auto* gridBox = new QskGridBox( this ); gridBox->setMargins( {15, 0, 15, 20} ); @@ -46,6 +47,9 @@ MainContent::MainContent( QQuickItem* parent ) : QskLinearBox( Qt::Vertical, par auto* diagram = new Diagram( gridBox ); gridBox->addItem( diagram, 2, 0, 0, 2 ); + + auto* lightIntensity = new LightIntensity( gridBox ); + gridBox->addItem( lightIntensity, 2, 2 ); } void MainContent::addCard( const QString& title, QskControl* content, int column ) diff --git a/examples/iot-dashboard/iot-dashboard.pro b/examples/iot-dashboard/iot-dashboard.pro index 8270a87b..518c9701 100644 --- a/examples/iot-dashboard/iot-dashboard.pro +++ b/examples/iot-dashboard/iot-dashboard.pro @@ -7,6 +7,7 @@ SOURCES += \ Diagram.cpp \ Humidity.cpp \ IndoorTemperature.cpp \ + LightIntensity.cpp \ MainContent.cpp \ MenuBar.cpp \ MyDevices.cpp \ @@ -26,6 +27,7 @@ HEADERS += \ Diagram.h \ Humidity.h \ IndoorTemperature.h \ + LightIntensity.h \ MainContent.h \ MainWindow.h \ MenuBar.h \