more content

examples/iot-dashboard/Card.cpp

@@ -0,0 +1,12 @@
+#include "Card.h"
+
+#include <QskTextLabel.h>
+
+Card::Card(const QString &title, QskControl *content, QQuickItem *parent ) : QskLinearBox( Qt::Vertical, parent ),
+    m_title( title )
+{
+    m_label = new QskTextLabel( m_title, this );
+    m_content = content;
+    m_content->setParentItem( this );
+    m_content->setParent( this );
+}

examples/iot-dashboard/Card.h

@@ -0,0 +1,19 @@
+#ifndef CARD_H
+#define CARD_H
+
+#include <QskLinearBox.h>
+
+class QskTextLabel;
+
+class Card : public QskLinearBox
+{
+public:
+    Card( const QString& title, QskControl* content, QQuickItem* parent );
+
+private:
+    QString m_title;
+    QskTextLabel* m_label;
+    QskControl* m_content;
+};
+
+#endif // CARD_H

examples/iot-dashboard/MainContent.cpp

@@ -0,0 +1,33 @@
+#include "MainContent.h"
+
+#include "Card.h"
+
+#include <QskTextLabel.h>
+
+MainContent::MainContent( QQuickItem *parent ) : QskLinearBox( Qt::Horizontal, parent )
+{
+    setSizePolicy( QskSizePolicy::Expanding, QskSizePolicy::Expanding );
+
+    for( int a = 0; a < 4; ++a )
+    {
+        auto* column = new QskLinearBox( Qt::Vertical, this );
+        m_columns.append( column );
+    }
+
+    auto* pieChart =  new QskTextLabel( "here pie chart" );
+    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 );
+}
+
+void MainContent::addCard( const QString &title, QskControl *content, int column )
+{
+    new Card( title, content, m_columns.at( column ) );
+}

examples/iot-dashboard/MainContent.h

@@ -0,0 +1,19 @@
+#ifndef MAINCONTENT_H
+#define MAINCONTENT_H
+
+#include <QskLinearBox.h>
+
+class MainContent : public QskLinearBox
+{
+    Q_OBJECT
+
+public:
+    MainContent( QQuickItem* parent );
+
+private:
+    void addCard( const QString& title, QskControl* content, int column = -1 );
+
+    QList< QskLinearBox* > m_columns;
+};
+
+#endif // MAINCONTENT_H

examples/iot-dashboard/MainWindow.cpp

@@ -1,4 +1,6 @@
 #include "MainWindow.h"
+
+#include "MainContent.h"
 #include "MenuBar.h"
 
 #include <QskLinearBox.h>
@@ -9,17 +11,6 @@ MainWindow::MainWindow() : QskWindow()
     setTitle( "IOT dashboard" );
 
     m_mainLayout = new QskLinearBox( Qt::Horizontal, contentItem() );
-
-    addMenuBar();
-    addMainContent();
-}
-
-void MainWindow::addMenuBar()
-{
-    auto* menuBar = new MenuBar( m_mainLayout );
-}
-
-void MainWindow::addMainContent()
-{
-
+    m_menuBar = new MenuBar( m_mainLayout );
+    m_mainContent = new MainContent( m_mainLayout );
 }

examples/iot-dashboard/MainWindow.h

@@ -3,6 +3,8 @@
 
 #include <QskWindow.h>
 
+class MainContent;
+class MenuBar;
 class QskLinearBox;
 
 class MainWindow : public QskWindow
@@ -13,10 +15,9 @@ public:
     MainWindow();
 
 private:
-    void addMenuBar();
-    void addMainContent();
-
     QskLinearBox* m_mainLayout;
+    MenuBar* m_menuBar;
+    MainContent* m_mainContent;
 };
 
 #endif // MAINWINDOW_H

examples/iot-dashboard/MenuBar.cpp

@@ -1,20 +1,44 @@
 #include "MenuBar.h"
 
+#include <QskGraphic.h>
+#include <QskGraphicLabel.h>
+#include <QskGraphicIO.h>
 #include <QskTextLabel.h>
 
-MenuBar::MenuBar( QQuickItem *parent ) : QskLinearBox( Qt::Vertical, parent )
+#include <QtGui/QImage>
+
+MenuItem::MenuItem( const QString& name, QQuickItem* parent ) : QskLinearBox( Qt::Horizontal, parent ),
+    m_name( name )
 {
-    setSizePolicy( QskSizePolicy::Minimum, QskSizePolicy::Expanding );
     setAutoLayoutChildren( true );
     setAutoAddChildren( true );
 
+    QString fileName = ":/images/" + name.toLower() + ".png";
+    QImage image( fileName );
+    auto graphic = QskGraphic::fromImage( image );
+    auto* graphicLabel = new QskGraphicLabel( graphic, this );
+    graphicLabel->setFixedSize( 32, 32 );
+
+    auto* textLabel = new QskTextLabel( name, this );
+    textLabel->setTextColor( Qt::white ); // ### style
+}
+
+MenuBar::MenuBar( QQuickItem *parent ) : QskLinearBox( Qt::Vertical, parent )
+{
+    setSizePolicy( QskSizePolicy::Minimum, QskSizePolicy::Preferred );
+    setAutoLayoutChildren( true );
+    setAutoAddChildren( true );
+    setMargins( 35 ); // ### style
+    setSpacing( 30 ); // ### style
+
     setBackgroundColor( { 0, 35, 102 } ); // ### style
 
-    m_entries = { "Home", "Details", "Statistics", "Usage" };
+    m_entries = { "Home", "Details", "Statistics", "Settings" };
 
     for( const auto entry : m_entries )
     {
-        auto* label = new QskTextLabel( entry, this );
-        label->setTextColor( Qt::white ); // ### style
+        auto* menuItem = new MenuItem( entry, this );
     }
+
+    addSpacer( 0, 1 ); // fill the space at the bottom
 }

examples/iot-dashboard/MenuBar.h

@@ -3,6 +3,17 @@
 
 #include <QskLinearBox.h>
 
+class MenuItem : public QskLinearBox
+{
+    Q_OBJECT
+
+public:
+    MenuItem( const QString& name, QQuickItem* parent );
+
+private:
+    QString m_name;
+};
+
 class MenuBar : public QskLinearBox
 {
     Q_OBJECT

examples/iot-dashboard/images.qrc

@@ -0,0 +1,8 @@
+<RCC>
+    <qresource prefix="/">
+        <file>images/statistics.png</file>
+        <file>images/settings.png</file>
+        <file>images/home.png</file>
+        <file>images/details.png</file>
+    </qresource>
+</RCC>

examples/iot-dashboard/iot-dashboard.pro

@@ -1,11 +1,17 @@
 CONFIG += qskexample
 
 SOURCES += \
+    Card.cpp \
+    MainContent.cpp \
     MenuBar.cpp \
     main.cpp \
     MainWindow.cpp
 
 HEADERS += \
+    Card.h \
+    MainContent.h \
     MainWindow.h \
     MenuBar.h
 
+RESOURCES += \
+    images.qrc

examples/iot-dashboard/main.cpp

@@ -1,3 +1,5 @@
+#include "MainWindow.h"
+
 #include <SkinnyFont.h>
 #include <SkinnyShortcut.h>
 
@@ -8,8 +10,6 @@
 
 #include <QGuiApplication>
 
-#include "MainWindow.h"
-
 int main( int argc, char* argv[] )
 {
     QGuiApplication app( argc, argv );