add light intensity

examples/iot-dashboard/LightIntensity.cpp

@@ -0,0 +1,108 @@
+#include "LightIntensity.h"
+#include "DaytimeSkin.h"
+
+#include <QskTextLabel.h>
+
+#include <QPainter>
+#include <QRadialGradient>
+
+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 );
+}

examples/iot-dashboard/LightIntensity.h

@@ -0,0 +1,58 @@
+#ifndef LIGHTINTENSITY_H
+#define LIGHTINTENSITY_H
+
+#include <QskLinearBox.h>
+
+#include <QQuickPaintedItem>
+
+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

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 )

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 \