Add diagram

examples/iot-dashboard/Diagram.cpp

@@ -0,0 +1,54 @@
+#include "Diagram.h"
+
+#include <QPainter>
+
+static constexpr int segments = 7;
+
+Diagram::Diagram( QQuickItem* parent )
+    : QskControl( parent )
+    , m_content( new DiagramContent( this ) )
+{
+    setAutoLayoutChildren( true );
+}
+
+void Diagram::updateLayout()
+{
+    m_content->setContentsSize( size().toSize() );
+    m_content->update();
+}
+
+DiagramContent::DiagramContent( QQuickItem* parent ) : QQuickPaintedItem( parent )
+{
+}
+
+void DiagramContent::paint( QPainter* painter )
+{
+//    auto size = contentsSize();
+//    QRectF outerRect( {0, 0}, size );
+
+    painter->setRenderHint( QPainter::Antialiasing, true );
+
+    qreal stepSize = width() / segments;
+
+    QLinearGradient myGradient( {width() / 2, 0}, {width() / 2, height()} );
+    myGradient.setColorAt( 0, "#996776FF" );
+    myGradient.setColorAt( 1, "#116776FF" );
+    QPen myPen( Qt::transparent );
+
+    QPainterPath myPath;
+    myPath.moveTo( 0, height() );
+
+    qreal ys[7] = {0.8, 0.85, 0.92, 0.5, 0.88, 0.7, 0.8};
+
+    for( int i = 0; i < stepSize; i++ )
+    {
+        qreal x1 = i * stepSize + stepSize / 2;
+        qreal y = ys[i] * height();
+        qreal x2 = x1;
+        myPath.cubicTo( x1, y, x2, height() * ( 1 - ys[i] ), stepSize * ( i + 1 ), height() * ( 1 - ys[i] ) );
+    }
+
+    painter->setBrush( myGradient );
+    painter->setPen( myPen );
+    painter->drawPath( myPath );
+}

examples/iot-dashboard/Diagram.h

@@ -0,0 +1,33 @@
+#ifndef DIAGRAM_H
+#define DIAGRAM_H
+
+#include <QskControl.h>
+
+#include <QQuickPaintedItem>
+
+class DiagramContent;
+
+class Diagram : public QskControl
+{
+    Q_OBJECT
+
+public:
+    Diagram( QQuickItem* parent );
+    void updateLayout() override;
+
+private:
+    DiagramContent* m_content;
+};
+
+class DiagramContent : public QQuickPaintedItem
+{
+    Q_OBJECT
+
+public:
+    DiagramContent( QQuickItem* parent);
+
+    virtual void paint(QPainter *painter) override;
+
+};
+
+#endif // DIAGRAM_H

examples/iot-dashboard/MainContent.cpp

@@ -1,6 +1,7 @@
 #include "MainContent.h"
 
 #include "Card.h"
+#include "Diagram.h"
 #include "Humidity.h"
 #include "IndoorTemperature.h"
 #include "MyDevices.h"
@@ -14,37 +15,40 @@
 #include <QskGridBox.h>
 #include <QskTextLabel.h>
 
-MainContent::MainContent( QQuickItem *parent ) : QskLinearBox( Qt::Vertical, parent )
+MainContent::MainContent( QQuickItem* parent ) : QskLinearBox( Qt::Vertical, parent )
 {
     setSizePolicy( QskSizePolicy::Expanding, QskSizePolicy::Expanding );
-    setDefaultAlignment(Qt::AlignTop);
-    setSpacing(30);
+    setDefaultAlignment( Qt::AlignTop );
+    setSpacing( 30 );
 
-    auto* topBar = new TopBar(this);
+    auto* topBar = new TopBar( this );
 
-    auto* gridBox = new QskGridBox(this);
-    gridBox->setMargins({15, 0, 15, 20});
-    gridBox->setPanel(true);
-    gridBox->setBoxShapeHint(QskBox::Panel, 6 );
+    auto* gridBox = new QskGridBox( this );
+    gridBox->setMargins( {15, 0, 15, 20} );
+    gridBox->setPanel( true );
+    gridBox->setBoxShapeHint( QskBox::Panel, 6 );
     gridBox->setBoxBorderMetricsHint( QskBox::Panel, 2 );
-    QskBoxBorderColors borderColors("#dddddd");
-    borderColors.setAlpha(100);
-    gridBox->setBoxBorderColorsHint( QskBox::Panel, borderColors);
+    QskBoxBorderColors borderColors( "#dddddd" );
+    borderColors.setAlpha( 100 );
+    gridBox->setBoxBorderColorsHint( QskBox::Panel, borderColors );
 
-    auto* usage = new Usage(gridBox);
-    gridBox->addItem(usage, 0, 0, 2, 1);
+    auto* usage = new Usage( gridBox );
+    gridBox->addItem( usage, 0, 0, 2, 1 );
 
-    auto* indoorTemperature = new IndoorTemperature(gridBox);
-    gridBox->addItem(indoorTemperature, 0, 1);
+    auto* indoorTemperature = new IndoorTemperature( gridBox );
+    gridBox->addItem( indoorTemperature, 0, 1 );
 
-    auto* humidity = new Humidity(gridBox);
-    gridBox->addItem(humidity, 1, 1);
+    auto* humidity = new Humidity( gridBox );
+    gridBox->addItem( humidity, 1, 1 );
 
-    auto* myDevices = new MyDevices(gridBox);
-    gridBox->addItem(myDevices, 0, 2, 2, 1);
+    auto* myDevices = new MyDevices( gridBox );
+    gridBox->addItem( myDevices, 0, 2, 2, 1 );
+
+    auto* diagram = new Diagram( gridBox );
+    gridBox->addItem( diagram, 2, 0, 0, 2 );
 }
 
-void MainContent::addCard( const QString &title, QskControl *content, int column )
+void MainContent::addCard( const QString& title, QskControl* content, int column )
 {
     new Card( title, content, m_columns.at( column ) );
 }

examples/iot-dashboard/iot-dashboard.pro

@@ -4,6 +4,7 @@ SOURCES += \
     Card.cpp \
     CircularProgressBar.cpp \
     DaytimeSkin.cpp \
+    Diagram.cpp \
     Humidity.cpp \
     IndoorTemperature.cpp \
     MainContent.cpp \
@@ -22,6 +23,7 @@ HEADERS += \
     Card.h \
     CircularProgressBar.h \
     DaytimeSkin.h \
+    Diagram.h \
     Humidity.h \
     IndoorTemperature.h \
     MainContent.h \