implement usage

examples/iot-dashboard/DaytimeSkin.cpp

@@ -45,6 +45,8 @@ void DaytimeSkin::initHints()
     setFont( QskSkin::LargeFont, qskFont( 20 ) );
     setFont( QskSkin::HugeFont, qskFont( 27, true ) );
 
+    setFont( DaytimeSkin::TitleFont, qskFont(10, true));
+
     QColor color(Qt::white);
     color.setAlphaF(0.09);
     setGradient( MenuItem::Panel | QskControl::Hovered, color );

examples/iot-dashboard/DaytimeSkin.h

@@ -8,6 +8,10 @@ class DaytimeSkin : public QskSkin
 public:
     DaytimeSkin( QObject* parent = nullptr );
 
+    enum SkinFontRole {
+        TitleFont = QskSkin::HugeFont + 1,
+    };
+
 private:
     void initHints();
 

examples/iot-dashboard/MainContent.cpp

@@ -3,35 +3,33 @@
 #include "Card.h"
 #include "PieChart.h"
 #include "TopBar.h"
+#include "Usage.h"
 
+#include <QskBoxBorderColors.h>
+#include <QskBoxBorderMetrics.h>
+#include <QskBoxShapeMetrics.h>
+#include <QskGridBox.h>
 #include <QskTextLabel.h>
 
-MainContent::MainContent( QQuickItem *parent ) : QskLinearBox( Qt::Horizontal, parent )
+MainContent::MainContent( QQuickItem *parent ) : QskLinearBox( Qt::Vertical, parent )
 {
     setSizePolicy( QskSizePolicy::Expanding, QskSizePolicy::Expanding );
     setDefaultAlignment(Qt::AlignTop);
+    setSpacing(30);
 
     auto* topBar = new TopBar(this);
 
-//    for( int a = 0; a < 4; ++a )
-//    {
-//        auto* column = new QskLinearBox( Qt::Vertical, this );
-//        m_columns.append( column );
-//    }
+    auto* gridBox = new QskGridBox(this);
+    gridBox->setMargins({15, 0, 15, 0});
+    gridBox->setPanel(true);
+    gridBox->setBoxShapeHint(QskBox::Panel, QskBoxShapeMetrics(6) );
+    gridBox->setBoxBorderMetricsHint( QskBox::Panel, QskBoxBorderMetrics(2) );
+    QskBoxBorderColors borderColors("#dddddd");
+    borderColors.setAlpha(100);
+    gridBox->setBoxBorderColorsHint( QskBox::Panel, borderColors);
 
-//    auto* pieChart =  new PieChart;
-//    QVector< float > angles = { 60, 90, 150, 60 };
-//    pieChart->setAngles( angles );
-//    addCard( "Sample usage", pieChart, 0 );
-
-//    auto* barGraph = new QskTextLabel( "here bar graph" );
-//    addCard( "Power consumption", barGraph, 0 );
-
-//    auto* statistics = new QskTextLabel( "here detailed statistics" );
-//    addCard( "Detailed statistics", statistics, 1 );
-
-//    auto* users = new QskTextLabel( "here users" );
-//    addCard( "Users", users, 1 );
+    auto* usage = new Usage(gridBox);
+    gridBox->addItem(usage, 0, 0, 2, 1);
 }
 
 void MainContent::addCard( const QString &title, QskControl *content, int column )

examples/iot-dashboard/TopBar.cpp

@@ -11,6 +11,7 @@ TopBarItem::TopBarItem(const QString& name, const QColor &textColor, const QGrad
 {
     setAutoLayoutChildren( true );
     setAutoAddChildren( true );
+    setSpacing(15);
 
     auto* textLabel = new QskTextLabel( name, this );
     textLabel->setFontRole(QskSkin::SmallFont); // ### style
@@ -34,7 +35,7 @@ TopBar::TopBar(QQuickItem *parent) : QskLinearBox(Qt::Horizontal, parent)
     setAutoLayoutChildren(true);
     setAutoAddChildren(true);
     setSizePolicy(QskSizePolicy::Preferred, QskSizePolicy::Fixed);
-    setMargins({25, 30, 25, 0});
+    setMargins({25, 35, 25, 0});
 
     QStringList itemStrings = { "Living Room", "Bedroom", "Bathroom", "Kitchen" };
     QColor textColors[] = {"#ff3122", "#6776ff", "#f99055", "#6776ff"};

examples/iot-dashboard/Usage.cpp

@@ -0,0 +1,38 @@
+#include "Usage.h"
+#include "DaytimeSkin.h"
+
+#include <QskTextLabel.h>
+
+Usage::Usage(QQuickItem *parent)
+    : QskLinearBox(Qt::Vertical, parent)
+{
+    setMargins(17);
+    auto* title = new QskTextLabel("Usage", this);
+    title->setFontRole(DaytimeSkin::TitleFont);
+
+    auto* content = new QskLinearBox(Qt::Vertical, this);
+
+    auto* today = new QskLinearBox(Qt::Horizontal, content);
+    auto* todayText = new QskTextLabel("Usage today", today);
+    todayText->setFontRole(QskSkin::SmallFont);
+    auto* todaySpacer = new QskTextLabel("_____", today);
+    todaySpacer->setTextColor("#dddddd");
+    auto* todayValue = new QskTextLabel("0,5 kwH", today);
+    todayValue->setFontRole(QskSkin::SmallFont);
+
+    auto* month = new QskLinearBox(Qt::Horizontal, content);
+    auto* monthText = new QskTextLabel("Usage this month", month);
+    monthText->setFontRole(QskSkin::SmallFont);
+    auto* monthSpacer = new QskTextLabel("_____", month);
+    monthSpacer->setTextColor("#dddddd");
+    auto* monthValue = new QskTextLabel("66 kwH", month);
+    monthValue->setFontRole(QskSkin::SmallFont);
+
+    auto* total = new QskLinearBox(Qt::Horizontal, content);
+    auto* totalText = new QskTextLabel("Total working hours", total);
+    totalText->setFontRole(QskSkin::SmallFont);
+    auto* totalSpacer = new QskTextLabel("_____", total);
+    totalSpacer->setTextColor("#dddddd");
+    auto* totalValue = new QskTextLabel("125 hrs", total);
+    totalValue->setFontRole(QskSkin::SmallFont);
+}

examples/iot-dashboard/Usage.h

@@ -0,0 +1,12 @@
+#ifndef USAGE_H
+#define USAGE_H
+
+#include <QskLinearBox.h>
+
+class Usage : public QskLinearBox
+{
+public:
+    Usage( QQuickItem* parent);
+};
+
+#endif // USAGE_H

examples/iot-dashboard/iot-dashboard.pro

@@ -10,6 +10,7 @@ SOURCES += \
     PieChartPainted.cpp \
     PieChartSkinlet.cpp \
     TopBar.cpp \
+    Usage.cpp \
     main.cpp \
     MainWindow.cpp
 
@@ -23,7 +24,8 @@ HEADERS += \
     PieChart.h \
     PieChartPainted.h \
     PieChartSkinlet.h \
-    TopBar.h
+    TopBar.h \
+    Usage.h
 
 RESOURCES += \
     images.qrc \