168492376
/
qskinny
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

IOT dashboard: Improve rooms page

This commit is contained in:
Peter Hartmann 2022-08-02 11:05:28 +02:00 committed by uwerat
parent d4cffcadf7
commit 3e1ef84480
3 changed files with 50 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
examples/iotdashboard/DiagramSkinlet.cpp
View File

@ -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()
+ i * size.width();
const qreal spacing = 3;
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;
barNode->setBoxData( barRect, color );
const auto shape = diagram->boxShapeHint( barSubcontrol );
barNode->setBoxData( barRect, shape, {}, {}, color );
}
}
else

70
examples/iotdashboard/RoomsPage.cpp
View File

@ -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[] =
{
10, 20, 30, 40, 50, 60, 70
};
addCurve( water );
addCurve( electricity );
addCurve( gas );
const qreal electricity[] =
{
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 );
setYMax( 20 );
}
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++ )
points += QPointF( i, values[i] );
for( int i = 0; i < values.count(); 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 );
gridBox->addItem( new UsageDiagramBox( "Bedroom", new RoomsDiagram() ), 0, 1 );
gridBox->addItem( new UsageDiagramBox( "Bathroom", new RoomsDiagram() ), 1, 0 );
gridBox->addItem( new UsageDiagramBox( "Kitchen", new RoomsDiagram() ), 1, 1 );
const QVector< qreal > livingRoomWater = { 5, 8, 13, 2, 3, 9, 11 };
const QVector< qreal > livingRoomElectricity = { 1, 8, 7, 4, 12, 6, 5 };
const QVector< qreal > livingRoomGas = { 10, 11, 5, 8, 3, 1, 7 };
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 );
}

6
examples/iotdashboard/Skin.cpp
View File

@ -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::ChartBar2, { 100, 100, 0, 0, Qt::RelativeSize } );
ed.setBoxShape( Diagram::ChartBar3, { 100, 100, 0, 0, Qt::RelativeSize } );
ed.setBoxShape( Diagram::ChartBar1, { 3, 3, 0, 0 } );
ed.setBoxShape( Diagram::ChartBar2, { 3, 3, 0, 0 } );
ed.setBoxShape( Diagram::ChartBar3, { 3, 3, 0, 0 } );
// light intensity:
ed.setBoxShape( LightDisplay::Panel, 100, Qt::RelativeSize );