using QskGraphiclabel::panel

examples/iotdashboard/BoxWithButtons.cpp

@@ -44,9 +44,9 @@ BoxWithButtons::BoxWithButtons( const QString& title, const QString& value,
     auto* layout = new QskLinearBox( Qt::Horizontal, this );
     layout->setSpacing( 20 );
 
-    QString iconFile = title.toLower();
+    auto iconLabel = new RoundedIcon( isBright, layout );
-    iconFile = iconFile.replace( ' ', '-' );
+    iconLabel->setIcon( title );
-    new RoundedIcon( iconFile, isBright, false, layout );
+    iconLabel->setFixedSize( 68, 68 );
 
     auto titleAndValue = new QskLinearBox( Qt::Vertical, layout );
     titleAndValue->setPanel( true );
@@ -58,5 +58,7 @@ BoxWithButtons::BoxWithButtons( const QString& title, const QString& value,
     auto valueLabel = new QskTextLabel( value, titleAndValue );
     valueLabel->setSubcontrolProxy( QskTextLabel::Text, ValueText );
 
+    layout->addStretch( 1 );
+
     new UpAndDownBox( layout );
 }

examples/iotdashboard/MyDevices.cpp

@@ -21,48 +21,18 @@ namespace
       public:
         Device( const QString& name, bool isBright, QQuickItem* parent )
             : QskLinearBox( Qt::Vertical, parent )
-            , m_name( name )
         {
             setDefaultAlignment( Qt::AlignCenter );
-            setAutoAddChildren( false );
 
-            m_icon = new RoundedIcon( QString(), isBright, true, this );
+            auto icon = new RoundedIcon( isBright, this );
-            m_icon->setSkinState( m_icon->skinState() | RoundedIcon::Small );
+            icon->setPale( true );
-            m_icon->setOpacity( 0.15 );
+            icon->setIcon( name );
-            addItem( m_icon );
+            icon->setFixedSize( 68, 68 );
 
-            auto* textLabel = new QskTextLabel( name, this );
+            auto textLabel = new QskTextLabel( name, this );
             textLabel->setFontRole( QskSkin::TinyFont );
             textLabel->setAlignment( Qt::AlignHCenter );
-            addItem( textLabel );
-
-            auto fileName = name.toLower();
-            fileName.replace( ' ', '-' );
-            fileName = ":/images/" + fileName + ".png";
-            QImage image( fileName );
-            auto graphic = QskGraphic::fromImage( image );
-            m_graphicLabel = new QskGraphicLabel( graphic, this );
         }
-
-      protected:
-        void updateLayout() override
-        {
-            QskLinearBox::updateLayout();
-
-            // We cannot use the icon from RoundedIcon here because
-            // it would inherit the transparency
-            const qreal size = metric( RoundedIcon::Icon | QskAspect::Size );
-
-            const qreal x = m_icon->x() + ( m_icon->width() - m_graphicLabel->width() ) / 2;
-            const qreal y = ( m_icon->y() + m_icon->height() - m_graphicLabel->height() ) / 2;
-
-            m_graphicLabel->setGeometry( x, y, size, size );
-        }
-
-      private:
-        QString m_name;
-        RoundedIcon* m_icon;
-        QskGraphicLabel* m_graphicLabel;
     };
 }
 

examples/iotdashboard/RoundedIcon.cpp

@@ -5,69 +5,42 @@
 
 #include "RoundedIcon.h"
 
-#include <QskBoxShapeMetrics.h>
 #include <QskGraphic.h>
-#include <QskGraphicLabel.h>
-
 #include <QImage>
-#include <QFile>
 
 QSK_SUBCONTROL( RoundedIcon, Panel )
-QSK_SUBCONTROL( RoundedIcon, Icon )
+QSK_SUBCONTROL( RoundedIcon, PalePanel )
+
 QSK_STATE( RoundedIcon, Bright, ( QskAspect::FirstUserState << 1 ) )
-QSK_STATE( RoundedIcon, Small, ( QskAspect::FirstUserState << 2 ) )
 
-RoundedIcon::RoundedIcon( const QString& iconName,
+RoundedIcon::RoundedIcon( bool isBright, QQuickItem* parent )
-        bool isBright, bool isSmall, QQuickItem* parent )
+    : QskGraphicLabel( parent )
-    : QskBox( parent )
 {
-    setPanel( true );
+    setAlignment( Qt::AlignCenter );
-    setPolishOnResize( true );
+    setFillMode( QskGraphicLabel::Pad );
-    setSubcontrolProxy( QskBox::Panel, Panel );
-
-    if( isSmall )
-    {
-        setSkinState( skinState() | Small );
-    }
-
-    setSizePolicy( QskSizePolicy::Minimum, QskSizePolicy::Constrained );
-    const qreal size = metric( RoundedIcon::Panel | QskAspect::Size );
-    setFixedWidth( size );
 
     if( isBright )
-    {
         setSkinState( Bright );
-    }
 
-    const QString fileName( ":/images/" + iconName + ".png" );
+    setPanel( true );
-
+    setPale( false );
-    if( QFile::exists( fileName ) )
-    {
-        QImage image( fileName );
-        auto graphic = QskGraphic::fromImage( image );
-        m_graphicLabel = new QskGraphicLabel( graphic, this );
-    }
 }
 
-void RoundedIcon::updateLayout()
+void RoundedIcon::setPale( bool on )
 {
-    if( m_graphicLabel )
+    setSubcontrolProxy( QskGraphicLabel::Panel, on ? PalePanel : Panel );
-    {
-        const auto size = metric( Icon | QskAspect::Size );
-
-        QRectF r( 0.0, 0.0, size, size );
-        r.moveCenter( rect().center() );
-
-        m_graphicLabel->setGeometry( r );
-    }
 }
 
-QSizeF RoundedIcon::contentsSizeHint( Qt::SizeHint /*which*/, const QSizeF& size ) const
+void RoundedIcon::setIcon( const QString& iconName )
 {
-    QSizeF ret = size;
+    // we should use a graphic provider, TODO ...
-    ret.setHeight( size.width() );
 
-    return ret;
+    QString fileName = ":/images/";
+    fileName += iconName.toLower().replace( ' ', '-' );
+    fileName += ".png";
+
+    const QImage image( fileName );
+    setGraphic( QskGraphic::fromImage( image ) );
 }
 
 #include "moc_RoundedIcon.cpp"

examples/iotdashboard/RoundedIcon.h

@@ -5,25 +5,20 @@
 
 #pragma once
 
-#include <QskBox.h>
+#include <QskGraphicLabel.h>
 
 class QskGraphicLabel;
 
-class RoundedIcon : public QskBox
+class RoundedIcon : public QskGraphicLabel
 {
     Q_OBJECT
 
   public:
-    QSK_SUBCONTROLS( Panel, Icon )
+    QSK_SUBCONTROLS( Panel, PalePanel )
-    QSK_STATES( Bright, Small ) // to differentiate between orange and purple and small vs. big
+    QSK_STATES( Bright ) // to differentiate between orange and purple
 
-    RoundedIcon( const QString& iconName,
+    RoundedIcon( bool isBright, QQuickItem* parent = nullptr );
-        bool isBright, bool isSmall, QQuickItem* parent = nullptr );
 
-  protected:
+    void setIcon( const QString& );
-    void updateLayout() override;
+    void setPale( bool );
-    QSizeF contentsSizeHint( Qt::SizeHint, const QSizeF& ) const override;
-
-  private:
-    QskGraphicLabel* m_graphicLabel = nullptr;
 };

examples/iotdashboard/Skin.cpp

@@ -127,7 +127,7 @@ void Skin::initHints( const Palette& palette )
     ed.setPadding( Box::Panel, 15 );
 
     ed.setMetric( ShadowPositioner::Panel | QskAspect::Size, 15 );
-    ed.setBoxShape( ShadowPositioner::Panel, {6, 6, 6, 6} );
+    ed.setBoxShape( ShadowPositioner::Panel, 6 );
 
 
     // content in boxes (indoor temperature, humidity etc.):
@@ -136,24 +136,35 @@ void Skin::initHints( const Palette& palette )
 
     ed.setPadding( BoxWithButtons::Panel, 8 );
 
-    ed.setBoxShape( RoundedIcon::Panel, 6 );
+    for ( auto subControl : { RoundedIcon::Panel, RoundedIcon::PalePanel } )
-    ed.setVGradient( RoundedIcon::Panel | RoundedIcon::Bright, "#ff7d34", "#ff3122" );
+    {
-    ed.setVGradient( RoundedIcon::Panel, "#6776FF", "#6100FF" );
+        ed.setBoxShape( subControl, 6 );
-    ed.setMetric( RoundedIcon::Panel | QskAspect::Size, 68 );
+
-    ed.setMetric( RoundedIcon::Panel | RoundedIcon::Small | QskAspect::Size, 60 );
+        QskGradient normal( QskGradient::Vertical, "#6776FF", "#6100FF" );
-    ed.setMetric( RoundedIcon::Icon | QskAspect::Size, 36 );
+        QskGradient bright( QskGradient::Vertical, "#ff7d34", "#ff3122" );
+
+        if ( subControl == RoundedIcon::PalePanel )
+        {
+            const uint alpha = 38;
+            normal.setAlpha( alpha );
+            bright.setAlpha( alpha );
+        }
+
+        ed.setGradient( subControl, normal );
+        ed.setGradient( subControl | RoundedIcon::Bright, bright );
+    }
 
     ed.setFontRole( BoxWithButtons::ValueText, QskSkin::HugeFont );
     ed.setColor( BoxWithButtons::ValueText, "#929cb2" );
 
-    ed.setPadding( BoxWithButtons::ValuePanel, {0, 10, 0, 0} );
+    ed.setPadding( BoxWithButtons::ValuePanel, 0, 10, 0, 0 );
 
-    ed.setStrutSize( RoundButton::Panel, {27, 38} );
+    ed.setStrutSize( RoundButton::Panel, 27, 38 );
-    ed.setBoxShape( RoundButton::Panel, {0, 0, 30, 30} );
+    ed.setBoxShape( RoundButton::Panel, 0, 0, 30, 30 );
-    ed.setBoxShape( RoundButton::Panel | RoundButton::Top, {30, 30, 0, 0} );
+    ed.setBoxShape( RoundButton::Panel | RoundButton::Top, 30, 30, 0, 0 );
 
     // diagram:
-    ed.setBoxBorderMetrics( UsageDiagramBox::DaysBox, {0, 0, 3, 3} );
+    ed.setBoxBorderMetrics( UsageDiagramBox::DaysBox, 0, 0, 3, 3 );
     ed.setFontRole( UsageDiagramBox::DayText, QskSkin::TinyFont );
 
     ed.setStrutSize( UsageDiagramLegend::Symbol, 8, 8 );

examples/iotdashboard/TopBar.cpp

@@ -84,7 +84,7 @@ TopBar::TopBar( QQuickItem* parent )
     setPanel( true );
     setSubcontrolProxy( QskBox::Panel, Panel );
 
-    setSizePolicy( QskSizePolicy::Preferred, QskSizePolicy::Fixed );
+    initSizePolicy( QskSizePolicy::Preferred, QskSizePolicy::Fixed );
 
     const QStringList itemStrings = { "Living Room", "Bedroom", "Bathroom", "Kitchen" };
     const int progressValues[] = {25, 45, 15, 86};

examples/iotdashboard/UsageBox.cpp

@@ -27,32 +27,30 @@ namespace
 UsageBox::UsageBox( QQuickItem* parent )
     : Box( "Usage", parent )
 {
-    auto* content = new QskLinearBox( Qt::Vertical, this );
+    auto today = new QskLinearBox( Qt::Horizontal, this );
-
+    auto todayText = new QskTextLabel( "Usage today", today );
-    auto* today = new QskLinearBox( Qt::Horizontal, content );
-    auto* todayText = new QskTextLabel( "Usage today", today );
     todayText->setFontRole( QskSkin::SmallFont );
 
     new SeparatorLabel( today );
 
-    auto* todayValue = new QskTextLabel( "0,5 kwH", today );
+    auto todayValue = new QskTextLabel( "0,5 kwH", today );
     todayValue->setFontRole( QskSkin::SmallFont );
 
-    auto* month = new QskLinearBox( Qt::Horizontal, content );
+    auto month = new QskLinearBox( Qt::Horizontal, this );
-    auto* monthText = new QskTextLabel( "Usage this month", month );
+    auto monthText = new QskTextLabel( "Usage this month", month );
     monthText->setFontRole( QskSkin::SmallFont );
 
     new SeparatorLabel( month );
 
-    auto* monthValue = new QskTextLabel( "66 kwH", month );
+    auto monthValue = new QskTextLabel( "66 kwH", month );
     monthValue->setFontRole( QskSkin::SmallFont );
 
-    auto* total = new QskLinearBox( Qt::Horizontal, content );
+    auto total = new QskLinearBox( Qt::Horizontal, this );
-    auto* totalText = new QskTextLabel( "Total working hours", total );
+    auto totalText = new QskTextLabel( "Total working hours", total );
     totalText->setFontRole( QskSkin::SmallFont );
 
     new SeparatorLabel( total );
 
-    auto* totalValue = new QskTextLabel( "125 hrs", total );
+    auto totalValue = new QskTextLabel( "125 hrs", total );
     totalValue->setFontRole( QskSkin::SmallFont );
 }