add night time skin

examples/iot-dashboard/Box.cpp

@@ -8,6 +8,8 @@
 #include <QskBoxShapeMetrics.h>
 #include <QskTextLabel.h>
 
+QSK_SUBCONTROL( Box, Panel )
+
 ShadowBox::ShadowBox( QQuickItem* parent )
     : QskControl( parent )
 //    , m_control( control )
@@ -73,3 +75,13 @@ Box::Box( const QString& title, QQuickItem* parent )
         m_label->setVisible( false );
     }
 }
+
+QskAspect::Subcontrol Box::effectiveSubcontrol( QskAspect::Subcontrol subControl ) const
+{
+    if( subControl == QskBox::Panel )
+    {
+        return Box::Panel;
+    }
+
+    return subControl;
+}

examples/iot-dashboard/Box.h

@@ -23,9 +23,15 @@ class ShadowBox : public QskControl
 
 class Box : public QskLinearBox
 {
+        Q_OBJECT
     public:
+        QSK_SUBCONTROLS( Panel )
+
         Box( const QString& title, QQuickItem* parent );
 
+        QskAspect::Subcontrol effectiveSubcontrol(
+            QskAspect::Subcontrol subControl ) const override final;
+
     private:
         QString m_title;
         QskTextLabel* m_label;

examples/iot-dashboard/CircularProgressBar.cpp

@@ -23,7 +23,7 @@ void CircularProgressBar::paint(QPainter *painter)
     gradient.setStops( {stop1, stop2, stop3} );
 
     painter->setBrush( gradient );
-    painter->setPen(Qt::white);
+    painter->setPen( m_backgroundColor );
     painter->drawEllipse( outerRect );
 
     int startAngle = 1440;
@@ -32,8 +32,8 @@ void CircularProgressBar::paint(QPainter *painter)
     painter->setBrush( m_gradient );
     painter->drawPie( outerRect, startAngle, endAngle );
 
-    painter->setBrush(Qt::white);
+    painter->setBrush( m_backgroundColor );
-    painter->setPen(Qt::white);
+    painter->setPen( m_backgroundColor );
     QRectF innerRect( width() / 2, width() / 2, size.width() - width(), size.height() - width() );
     painter->drawEllipse( innerRect );
 }

examples/iot-dashboard/CircularProgressBar.h

@@ -11,16 +11,26 @@ public:
 
         virtual void paint( QPainter* painter ) override;
 
-    double width() const {
+        double width() const
+        {
             return m_width;
         }
 
-    void setWidth(double width) {
+        void setWidth( double width )
+        {
             m_width = width;
         }
 
+        void setBackgroundColor( const QColor& color )
+        {
+            m_backgroundColor = color;
+        }
+
+
+
     private:
         QGradient m_gradient;
+        QColor m_backgroundColor;
         double m_width = 20;
         int m_progress;
 };

examples/iot-dashboard/DaytimeSkin.cpp

@@ -1,10 +1,12 @@
 #include "DaytimeSkin.h"
 
+#include "Box.h"
+#include "LightIntensity.h"
+#include "MainContent.h"
 #include "MenuBar.h"
 #include "QskShadowedRectangle.h"
 #include "QskShadowedRectangleSkinlet.h"
-#include "PieChart.h"
+#include "PieChartPainted.h"
-#include "PieChartSkinlet.h"
 
 #include <QskBoxBorderMetrics.h>
 #include <QskBoxBorderColors.h>
@@ -32,7 +34,6 @@ namespace
 DaytimeSkin::DaytimeSkin( QObject* parent ) : QskSkin( parent )
 {
     declareSkinlet< QskShadowedRectangle, QskShadowedRectangleSkinlet >();
-    declareSkinlet< PieChart, PieChartSkinlet >();
     initHints();
 }
 
@@ -50,11 +51,13 @@ void DaytimeSkin::initHints()
 
     setFont( DaytimeSkin::TitleFont, qskFont( 10, true ) );
 
+
+    setGradient( MainContent::Panel, {"#fbfbfb"} );
+    setGradient( Box::Panel, {"#ffffff"} );
+    setColor( LightDisplay::Panel, "#ffffff" );
+    setColor( PieChartPainted::Panel, "#ffffff" );
+
     QColor color( Qt::white );
     color.setAlphaF( 0.09 );
     setGradient( MenuItem::Panel | QskControl::Hovered, color );
-
-    setBoxBorderMetrics( PieChart::Panel, 2 );
-    setGradient( PieChart::Panel, Qt::blue );
-    setBoxBorderColors( PieChart::Panel, Qt::green );
 }

examples/iot-dashboard/DaytimeSkin.h

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

examples/iot-dashboard/Humidity.cpp

@@ -13,6 +13,7 @@
 Humidity::Humidity( QQuickItem* parent )
     : Box( "", parent )
 {
+    setPanel( true );
     setMarginsHint( Panel | QskAspect::Padding, 8 );
     setSizePolicy( Qt::Vertical, QskSizePolicy::Maximum );
 

examples/iot-dashboard/IndoorTemperature.cpp

@@ -13,6 +13,7 @@
 IndoorTemperature::IndoorTemperature( QQuickItem* parent )
     : Box( "", parent )
 {
+    setPanel( true );
     setMarginsHint( Panel | QskAspect::Padding, 8 );
     setSizePolicy( Qt::Vertical, QskSizePolicy::Maximum );
 

examples/iot-dashboard/LightIntensity.cpp

@@ -1,11 +1,14 @@
 #include "LightIntensity.h"
 #include "DaytimeSkin.h"
 
+#include <QskSetup.h>
 #include <QskTextLabel.h>
 
 #include <QPainter>
 #include <QRadialGradient>
 
+QSK_SUBCONTROL( LightDisplay, Panel )
+
 LightDimmer::LightDimmer( QQuickItem* parent )
     : QQuickPaintedItem( parent )
 {
@@ -28,7 +31,8 @@ void LightDimmer::paint( QPainter* painter )
     gradient.setStops( {stop1, stop2, stop3} );
 
     painter->setBrush( gradient );
-    painter->setPen( Qt::white );
+
+    painter->setPen( m_backgroundColor );
     painter->drawEllipse( outerRect );
 
     int startAngle = 16 * 180;
@@ -48,12 +52,12 @@ void LightDimmer::paint( QPainter* painter )
     painter->setBrush( redGradient );
     painter->drawPie( outerRect, 16 * 90, endAngle );
 
-    painter->setBrush( Qt::white );
+    painter->setBrush( m_backgroundColor );
-    painter->setPen( Qt::white );
+    painter->setPen( m_backgroundColor );
     QRectF innerRect( thickness() / 2, thickness() / 2 + offset, size.width() - thickness(), size.height() - thickness() );
     painter->drawEllipse( innerRect );
 
-    painter->setBrush( Qt::white );
+    painter->setBrush( m_backgroundColor );
     painter->setPen( "#c4c4c4" );
     QRectF knobRect( ( contentsSize().width() - knobDiameter ) / 2, 1, knobDiameter, knobDiameter );
     painter->drawEllipse( knobRect );
@@ -75,6 +79,25 @@ LightDisplay::LightDisplay( QQuickItem* parent )
     m_rightLabel->setZ( 1 );
 
     setAutoLayoutChildren( true );
+
+    const QColor c = color( Panel );
+    m_dimmer->setBackgroundColor( c );
+
+    connect( qskSetup, &QskSetup::skinChanged, [this]()
+    {
+        const QColor c = color( Panel );
+        m_dimmer->setBackgroundColor( c );
+    } );
+}
+
+QskAspect::Subcontrol LightDisplay::effectiveSubcontrol( QskAspect::Subcontrol subControl ) const
+{
+    if( subControl == QskBox::Panel )
+    {
+        return LightDisplay::Panel;
+    }
+
+    return subControl;
 }
 
 void LightDisplay::updateLayout()

examples/iot-dashboard/LightIntensity.h

@@ -24,8 +24,14 @@ class LightDimmer: public QQuickPaintedItem
             m_thickness = thickness;
         }
 
+        void setBackgroundColor( const QColor& color )
+        {
+            m_backgroundColor = color;
+        }
+
     private:
         double m_thickness = 17.57;
+        QColor m_backgroundColor;
 
         virtual void paint( QPainter* painter ) override;
 };
@@ -35,8 +41,13 @@ class LightDisplay : public QskControl
         Q_OBJECT
 
     public:
+        QSK_SUBCONTROLS( Panel )
+
         LightDisplay( QQuickItem* parent );
 
+        QskAspect::Subcontrol effectiveSubcontrol(
+            QskAspect::Subcontrol subControl ) const override final;
+
     protected:
         void updateLayout() override;
 

examples/iot-dashboard/MainContent.cpp

@@ -20,6 +20,8 @@
 
 #include <QTimer>
 
+QSK_SUBCONTROL( MainContent, Panel )
+
 ShadowPositioner::ShadowPositioner( QQuickItem* parent ) : QskControl( parent )
 {
     setAutoLayoutChildren( true );
@@ -67,7 +69,7 @@ MainContent::MainContent( QQuickItem* parent ) : QskLinearBox( Qt::Vertical, par
     setSizePolicy( QskSizePolicy::Expanding, QskSizePolicy::Expanding );
     setDefaultAlignment( Qt::AlignTop );
     setSpacing( 24 );
-    setBackgroundColor( "#FBFBFB" );
+    setPanel( true );
 
     auto* topBar = new TopBar( this );
     addItem( topBar );
@@ -103,6 +105,16 @@ MainContent::MainContent( QQuickItem* parent ) : QskLinearBox( Qt::Vertical, par
     m_shadowPositioner->setGridBox( gridBox );
 }
 
+QskAspect::Subcontrol MainContent::effectiveSubcontrol( QskAspect::Subcontrol subControl ) const
+{
+    if( subControl == QskBox::Panel )
+    {
+        return MainContent::Panel;
+    }
+
+    return subControl;
+}
+
 void MainContent::geometryChanged( const QRectF& newGeometry, const QRectF& oldGeometry )
 {
     QskLinearBox::geometryChanged( newGeometry, oldGeometry );

examples/iot-dashboard/MainContent.h

@@ -26,8 +26,13 @@ class MainContent : public QskLinearBox
         Q_OBJECT
 
     public:
+        QSK_SUBCONTROLS( Panel )
+
         MainContent( QQuickItem* parent );
 
+        QskAspect::Subcontrol effectiveSubcontrol(
+            QskAspect::Subcontrol subControl ) const override final;
+
     protected:
         void geometryChanged( const QRectF&, const QRectF& ) override;
 

examples/iot-dashboard/NighttimeSkin.cpp

@@ -0,0 +1,63 @@
+#include "NighttimeSkin.h"
+
+#include "Box.h"
+#include "LightIntensity.h"
+#include "MainContent.h"
+#include "MenuBar.h"
+#include "QskShadowedRectangle.h"
+#include "QskShadowedRectangleSkinlet.h"
+#include "PieChartPainted.h"
+
+#include <QskBoxBorderMetrics.h>
+#include <QskBoxBorderColors.h>
+#include <QskFunctions.h>
+
+#include <QFontDatabase>
+
+namespace
+{
+    static inline QFont qskFont( qreal pointSize, bool semiBold = false )
+    {
+        QFont font( "Proxima Nova" );
+
+        if( semiBold )
+        {
+            font.setWeight( QFont::Bold );
+        }
+
+        font.setPointSizeF( pointSize /*/ qskDpiScaled( 1.0 )*/ );
+        return font;
+    }
+
+}
+
+NighttimeSkin::NighttimeSkin( QObject* parent ) : QskSkin( parent )
+{
+    declareSkinlet< QskShadowedRectangle, QskShadowedRectangleSkinlet >();
+    initHints();
+}
+
+void NighttimeSkin::initHints()
+{
+    QFontDatabase db;
+    db.addApplicationFont( ":/fonts/ProximaNova-Regular.otf" ); // ### use fontconfig
+
+    setFont( QskSkin::DefaultFont, qskFont( 12 ) );
+    setFont( QskSkin::TinyFont, qskFont( 9 ) );
+    setFont( QskSkin::SmallFont, qskFont( 10 ) );
+    setFont( QskSkin::MediumFont, qskFont( 13 ) );
+    setFont( QskSkin::LargeFont, qskFont( 20 ) );
+    setFont( QskSkin::HugeFont, qskFont( 27, true ) );
+
+    setFont( NighttimeSkin::TitleFont, qskFont( 10, true ) );
+
+
+    setGradient( MainContent::Panel, {"#040404"} );
+    setGradient( Box::Panel, {"#000000"} );
+    setColor( LightDisplay::Panel, "#000000" );
+    setColor( PieChartPainted::Panel, "#000000" );
+
+    QColor color( Qt::white );
+    color.setAlphaF( 0.09 );
+    setGradient( MenuItem::Panel | QskControl::Hovered, Qt::yellow ); // ### nicer color
+}

examples/iot-dashboard/NighttimeSkin.h

@@ -0,0 +1,20 @@
+#ifndef NIGHTTIMESKIN_H
+#define NIGHTTIMESKIN_H
+
+#include <QskSkin.h>
+
+class NighttimeSkin : public QskSkin
+{
+    public:
+        NighttimeSkin( QObject* parent = nullptr );
+
+        enum SkinFontRole
+        {
+            TitleFont = QskSkin::HugeFont + 1,
+        };
+
+    private:
+        void initHints();
+};
+
+#endif // NIGHTTIMESKIN_H

examples/iot-dashboard/PieChartPainted.cpp

@@ -1,11 +1,15 @@
 #include "PieChartPainted.h"
 
+#include <QskBox.h>
+#include <QskSetup.h>
 #include <QskSkin.h>
 #include <QskTextLabel.h>
 
 #include <QFontMetricsF>
 #include <QQuickPaintedItem>
 
+QSK_SUBCONTROL( PieChartPainted, Panel )
+
 PieChartPainted::PieChartPainted( const QColor& color, const QGradient& gradient, int progress, int value, QQuickItem* parent )
     : QskControl( parent )
     , m_color( color )
@@ -21,6 +25,25 @@ PieChartPainted::PieChartPainted(const QColor& color, const QGradient& gradient,
     m_progressLabel->setText( progressText );
     m_progressLabel->setFontRole( QskSkin::SmallFont );
     m_progressLabel->setTextColor( color );
+
+    const QColor c = this->color( Panel );
+    m_progressBar->setBackgroundColor( c );
+
+    connect( qskSetup, &QskSetup::skinChanged, [this]()
+    {
+        const QColor c = this->color( Panel );
+        m_progressBar->setBackgroundColor( c );
+    } );
+}
+
+QskAspect::Subcontrol PieChartPainted::effectiveSubcontrol( QskAspect::Subcontrol subControl ) const
+{
+    if( subControl == QskBox::Panel )
+    {
+        return PieChartPainted::Panel;
+    }
+
+    return subControl;
 }
 
 QSizeF PieChartPainted::contentsSizeHint( Qt::SizeHint /*sizeHint*/, const QSizeF& /*size*/ ) const

examples/iot-dashboard/PieChartPainted.h

@@ -11,8 +11,13 @@ class QQuickPaintedItem;
 class PieChartPainted : public QskControl
 {
     public:
+        QSK_SUBCONTROLS( Panel )
+
         PieChartPainted( const QColor& color, const QGradient& gradient, int progress, int value, QQuickItem* parent = nullptr );
 
+        QskAspect::Subcontrol effectiveSubcontrol(
+            QskAspect::Subcontrol subControl ) const override final;
+
         virtual QSizeF contentsSizeHint( Qt::SizeHint, const QSizeF& ) const override;
         void updateLayout() override;
 

examples/iot-dashboard/Usage.cpp

@@ -6,7 +6,6 @@
 Usage::Usage( QQuickItem* parent )
     : Box( "Usage", parent )
 {
-    setBackgroundColor( Qt::transparent );
     auto* content = new QskLinearBox( Qt::Vertical, this );
 
     auto* today = new QskLinearBox( Qt::Horizontal, content );

examples/iot-dashboard/iot-dashboard.pro

@@ -11,6 +11,7 @@ SOURCES += \
     MainContent.cpp \
     MenuBar.cpp \
     MyDevices.cpp \
+    NighttimeSkin.cpp \
     PieChart.cpp \
     PieChartPainted.cpp \
     PieChartSkinlet.cpp \
@@ -34,6 +35,7 @@ HEADERS += \
     MainWindow.h \
     MenuBar.h \
     MyDevices.h \
+    NighttimeSkin.h \
     PieChart.h \
     PieChartPainted.h \
     PieChartSkinlet.h \

examples/iot-dashboard/main.cpp

@@ -1,6 +1,7 @@
 #include "MainWindow.h"
 
 #include "DaytimeSkin.h"
+#include "NighttimeSkin.h"
 
 #include <SkinnyFont.h>
 #include <SkinnyShortcut.h>
@@ -16,7 +17,8 @@
 #include <QGuiApplication>
 
 
-namespace {
+namespace
+{
     class SkinFactory : public QskSkinFactory
     {
             Q_OBJECT
@@ -28,8 +30,9 @@ namespace {
 
             QStringList skinNames() const override
             {
-            return { "DaytimeSkin" };
+                return { "DaytimeSkin", "NighttimeSkin" };
             }
+
             QskSkin* createSkin( const QString& skinName ) override
             {
                 if( skinName == "DaytimeSkin" )
@@ -37,6 +40,11 @@ namespace {
                     return new DaytimeSkin;
                 }
 
+                if( skinName == "NighttimeSkin" )
+                {
+                    return new NighttimeSkin;
+                }
+
                 return nullptr;
             }
     };
@@ -51,6 +59,9 @@ int main( int argc, char* argv[] )
     SkinFactory skinFactory;
 
     qskSkinManager->setPluginPaths( QStringList() ); // no plugins
+
+    qskSkinManager->unregisterFactory( "materialfactory" );
+    qskSkinManager->unregisterFactory( "squiekfactory" );
     qskSkinManager->registerFactory(
         QStringLiteral( "SampleSkinFactory" ), &skinFactory );
 
@@ -58,12 +69,12 @@ int main( int argc, char* argv[] )
 //        false, skinFactory, SLOT(toggleScheme()) );
 
 //    QskShortcutMap::addShortcut( QKeySequence( Qt::CTRL + Qt::Key_S ),
-//        false, skinFactory, SLOT(rotateSkin()) );
+//                                 true, &skinFactory, SLOT( rotateSkin() ) );
 
     qskSetup->setSkin( "DaytimeSkin" );
 
     // With CTRL-B you can rotate a couple of visual debug modes
-    SkinnyShortcut::enable( SkinnyShortcut::DebugBackground |
+    SkinnyShortcut::enable( SkinnyShortcut::RotateSkin | SkinnyShortcut::DebugBackground |
                             SkinnyShortcut::DebugStatistics | SkinnyShortcut::Quit );
 
     MainWindow window;