IOT dashboard: Improve rooms page

examples/iotdashboard/DiagramSkinlet.cpp

@@ -8,7 +8,10 @@
 #include "nodes/DiagramDataNode.h"
 #include "nodes/DiagramSegmentsNode.h"
 
+#include <QskBoxBorderColors.h>
+#include <QskBoxBorderMetrics.h>
 #include <QskBoxNode.h>
+#include <QskBoxShapeMetrics.h>
 
 namespace
 {
@@ -159,17 +162,21 @@ QSGNode* DiagramSkinlet::updateChartNode( const Diagram* diagram, QSGNode* node
                         const auto size = diagram->strutSizeHint( barSubcontrol );
                         const qreal xMin = dataPoints.at( 0 ).x();
                         const qreal xMax = dataPoints.at( dataPoints.count() - 1 ).x();
-                        const qreal x = ( ( dataPoint.x() - xMin ) / ( xMax - xMin ) ) * rect.width()
+                        const qreal spacing = 3;
-                                + i * size.width();
+                        const qreal sectionWidth = rect.width() / dataPoints.count();
+                        const qreal sectionOffset = ( sectionWidth
+                                                      - ( diagram->dataPoints().count() * size.width()
+                                                          + ( ( diagram->dataPoints().count() - 1 ) * spacing ) ) ) / 2;
+                        const qreal x = ( ( dataPoint.x() - xMin ) / ( xMax - xMin + 1 ) ) * rect.width()
+                                + sectionOffset + i * ( size.width() + spacing );
                         const qreal fraction = ( dataPoint.y() / yMax ) * rect.height();
                         const qreal y = rect.height() - fraction;
 
                         QRectF barRect( x, y, size.width(), fraction );
                         color = diagram->color( barSubcontrol );
 
-                        qDebug() << x << y << nodeIndex;
+                        const auto shape = diagram->boxShapeHint( barSubcontrol );
-
+                        barNode->setBoxData( barRect, shape, {}, {}, color );
-                        barNode->setBoxData( barRect, color );
                     }
                 }
                 else

examples/iotdashboard/RoomsPage.cpp

@@ -5,15 +5,8 @@
 
 #include "RoomsPage.h"
 
-#include "Box.h"
-#include "BoxWithButtons.h"
 #include "Diagram.h"
 #include "GridBox.h"
-#include "LightDisplay.h"
-#include "MyDevices.h"
-#include "PieChart.h"
-#include "TopBar.h"
-#include "UsageBox.h"
 #include "UsageDiagram.h"
 
 #include <QskBoxBorderColors.h>
@@ -34,39 +27,27 @@ namespace
     class RoomsDiagram : public Diagram
     {
       public:
-        RoomsDiagram( QQuickItem* parent = nullptr )
+        RoomsDiagram( const QVector< qreal >& water,
+                      const QVector< qreal >& electricity,
+                      const QVector< qreal >& gas,
+                      QQuickItem* parent = nullptr )
             : Diagram( parent )
         {
-            const qreal water[] =
+            addCurve( water );
-            {
+            addCurve( electricity );
-                10, 20, 30, 40, 50, 60, 70
+            addCurve( gas );
-            };
 
-            const qreal electricity[] =
+            setYMax( 20 );
-            {
-                10, 20, 30, 40, 50, 60, 70
-            };
-
-            const qreal gas[] =
-            {
-                10, 20, 30, 40, 50, 60, 70
-            };
-
-            addCurve( water, sizeof( water ) / sizeof( qreal ) );
-            addCurve( electricity, sizeof( electricity ) / sizeof( qreal ) );
-            addCurve( gas, sizeof( gas ) / sizeof( qreal ) );
-
-            setYMax( 100 );
         }
 
       private:
-        void addCurve( const qreal values[], const size_t count )
+        void addCurve( const QVector< qreal >& values )
         {
             QVector< QPointF > points;
-            points.reserve( count );
+            points.reserve( values.count() );
 
-            for( size_t i = 0; i < count; i++ )
+            for( int i = 0; i < values.count(); i++ )
-                points += QPointF( i, values[i] );
+                points += QPointF( i, values.at( i ) );
 
             addDataPoints( points, Diagram::Bar );
         }
@@ -89,10 +70,29 @@ RoomsPage::RoomsPage( QQuickItem* parent )
     gridBox->setPanel( true );
     gridBox->setSpacing( 15 );
 
-    gridBox->addItem( new UsageDiagramBox( "Living Room", new RoomsDiagram() ), 0, 0 );
+    const QVector< qreal > livingRoomWater = { 5, 8, 13, 2, 3, 9, 11 };
-    gridBox->addItem( new UsageDiagramBox( "Bedroom", new RoomsDiagram() ), 0, 1 );
+    const QVector< qreal > livingRoomElectricity = { 1, 8, 7, 4, 12, 6, 5 };
-    gridBox->addItem( new UsageDiagramBox( "Bathroom", new RoomsDiagram() ), 1, 0 );
+    const QVector< qreal > livingRoomGas = { 10, 11, 5, 8, 3, 1, 7 };
-    gridBox->addItem( new UsageDiagramBox( "Kitchen", new RoomsDiagram() ), 1, 1 );
+    auto livingRoomDiagram = new RoomsDiagram( livingRoomWater, livingRoomElectricity, livingRoomGas );
+    gridBox->addItem( new UsageDiagramBox( "Living Room", livingRoomDiagram ), 0, 0 );
+
+    const QVector< qreal > bedroomWater = { 8, 6, 11, 2, 5, 4, 9 };
+    const QVector< qreal > bedroomElectricity = { 4, 5, 6, 1, 9, 12, 10 };
+    const QVector< qreal > bedroomGas = { 7, 3, 9, 8, 10, 13, 2 };
+    auto bedroomDiagram = new RoomsDiagram( bedroomWater, bedroomElectricity, bedroomGas );
+    gridBox->addItem( new UsageDiagramBox( "Bedroom", bedroomDiagram ), 0, 1 );
+
+    const QVector< qreal > bathroomWater = { 5, 1, 1, 10, 8, 9, 13 };
+    const QVector< qreal > bathroomElectricity = { 3, 4, 1, 6, 10, 7, 2 };
+    const QVector< qreal > bathroomGas = { 9, 11, 3, 8, 1, 10, 10 };
+    auto bathroomDiagram = new RoomsDiagram( bathroomWater, bathroomElectricity, bathroomGas );
+    gridBox->addItem( new UsageDiagramBox( "Bathroom", bathroomDiagram ), 1, 0 );
+
+    const QVector< qreal > kitchenWater = { 4, 3, 9, 1, 12, 13, 5 };
+    const QVector< qreal > kitchenElectricity = { 8, 5, 7, 13, 2, 1, 6 };
+    const QVector< qreal > kitchenGas = { 9, 13, 12, 1, 8, 5, 3 };
+    auto kitchenDiagram = new RoomsDiagram( kitchenWater, kitchenElectricity, kitchenGas );
+    gridBox->addItem( new UsageDiagramBox( "Kitchen", kitchenDiagram ), 1, 1 );
 
     addItem( gridBox );
 }

examples/iotdashboard/Skin.cpp

@@ -190,9 +190,9 @@ void Skin::initHints( const Palette& palette )
     ed.setStrutSize( Diagram::ChartBar2, { 6, -1 } );
     ed.setStrutSize( Diagram::ChartBar3, { 6, -1 } );
 
-    ed.setBoxShape( Diagram::ChartBar1, { 100, 100, 0, 0, Qt::RelativeSize } );
+    ed.setBoxShape( Diagram::ChartBar1, { 3, 3, 0, 0 } );
-    ed.setBoxShape( Diagram::ChartBar2, { 100, 100, 0, 0, Qt::RelativeSize } );
+    ed.setBoxShape( Diagram::ChartBar2, { 3, 3, 0, 0 } );
-    ed.setBoxShape( Diagram::ChartBar3, { 100, 100, 0, 0, Qt::RelativeSize } );
+    ed.setBoxShape( Diagram::ChartBar3, { 3, 3, 0, 0 } );
 
     // light intensity:
     ed.setBoxShape( LightDisplay::Panel, 100, Qt::RelativeSize );