Lots of colors and stuff for demonstrating skin transitions added.

Better hints for the slider of the DefaultSkin - some animators and
increased mouse press areas

examples/automotive/ButtonBar.cpp

@@ -0,0 +1,63 @@
+#include "ButtonBar.h"
+#include "SkinFactory.h"
+#include <QskGraphic.h>
+#include <QskGraphicIO.h>
+#include <QskGraphicLabel.h>
+
+QSK_SUBCONTROL( ButtonBar, Indicator )
+
+class IndicatorLabel : public QskGraphicLabel
+{
+public:
+    IndicatorLabel( QQuickItem* parentItem = nullptr ):
+        QskGraphicLabel( parentItem )
+    {
+    }
+
+    virtual QskAspect::Subcontrol effectiveSubcontrol(
+        QskAspect::Subcontrol subControl ) const override final
+    {
+        // so that we can set specific colors in the skin
+
+        if ( subControl == QskGraphicLabel::Graphic )
+            return ButtonBar::Indicator;
+
+        return subControl;
+    }
+};
+
+ButtonBar::ButtonBar( QQuickItem* parentItem ):
+    QskLinearBox( parentItem )
+{
+    QColor c( Qt::black );
+    c.setAlphaF( 0.5 );
+    setBackgroundColor( c );
+
+    setMargins( QMarginsF( 20, 15, 20, 15 ) );
+    setSpacing( 20 );
+
+    setSizePolicy( QskSizePolicy::MinimumExpanding, QskSizePolicy::MinimumExpanding );
+}
+
+void ButtonBar::addIndicator( const char* name )
+{
+    auto* label = new IndicatorLabel( this );
+
+    // so the skins are able to colorize them
+    label->setGraphicRole( QskGraphicLabel::Graphic, SkinFactory::Indicator );
+
+    /*
+        The label should adjust vertically and be stretched horizontally
+        according to its aspect ratio.
+     */
+
+    label->setSizePolicy( QskSizePolicy::Constrained, QskSizePolicy::Ignored );
+
+    const QString fileName = QString( ":/qvg/%1.qvg" ).arg( name );
+    label->setGraphic( QskGraphicIO::read( fileName ) );
+}
+
+QSizeF ButtonBar::contentsSizeHint() const
+{
+    return QSizeF( -1, 20 );
+}

examples/automotive/ButtonBar.h

@@ -0,0 +1,18 @@
+#ifndef _BUTTON_BAR_
+#define _BUTTON_BAR_
+
+#include <QskLinearBox.h>
+
+class ButtonBar : public QskLinearBox
+{
+public:
+    QSK_SUBCONTROLS( Indicator )
+
+    ButtonBar( QQuickItem* = nullptr );
+    void addIndicator( const char* name );
+
+protected:
+    virtual QSizeF contentsSizeHint() const override;
+};
+
+#endif

examples/automotive/DefaultSkin.cpp

@@ -1,6 +1,8 @@
 #include "DefaultSkin.h"
 
+#include "SkinFactory.h"
 #include "SoundControl.h"
+#include "ButtonBar.h"
 
 #include <QskBox.h>
 #include <QskFunctions.h>
@@ -9,10 +11,11 @@
 #include <QskSlider.h>
 #include <QskTextLabel.h>
 #include <QskSeparator.h>
+#include <QskColorFilter.h>
 
 #include <QDebug>
 
-class DefaultSkin::Transition : public QskSkinTransition
+class Transition : public QskSkinTransition
 {
 protected:
     virtual void updateSkin( QskSkin*, QskSkin* newSkin ) override final
@@ -77,13 +80,21 @@ DefaultSkin::DefaultSkin( const QString& name, QObject* parent ):
     initHints();
 }
 
+DefaultSkin::~DefaultSkin()
+{
+    delete m_palette;
+}
+
 void DefaultSkin::initHints()
 {
+    const int duration = 200; // for animators
+
     setFont( QskSkin::DefaultFont, qskFont( 13 ) );
     setFont( QskSkin::LargeFont, qskFont( 20 ) );
 
     setColor( QskTextLabel::Text, m_palette->color4 );
 
+    setColor( SoundControl::Overlay, 0 );
     setColor( SoundControl::CrossHair, m_palette->color3 );
     setColor( SoundControl::Marker, m_palette->color5 );
 
@@ -96,26 +107,58 @@ void DefaultSkin::initHints()
     setColor( QskSeparator::Panel, m_palette->color3 );
     setMetric( QskSeparator::Panel, 2 );
 
+    // -- push buttons
+
     setMetric( QskPushButton::Panel | QskAspect::Padding, 10 );
     setColor( QskPushButton::Panel, m_palette->color1 );
     setColor( QskPushButton::Text, m_palette->color3 );
     setColor( QskPushButton::Panel | QskPushButton::Pressed, m_palette->color2 );
+    setAnimation( QskPushButton::Panel | QskAspect::Color, duration );
 
     setColor( SoundControl::SliderControl, m_palette->color1 );
     setColor( SoundControl::SliderControl | QskPushButton::Pressed, m_palette->color2 );
+    setAnimation( SoundControl::SliderControl | QskAspect::Color, duration );
 
     setMetric( QskPushButton::Text | QskAspect::Size, 20 );
     setSkinHint( QskPushButton::Text | QskAspect::FontRole, int( QskSkin::LargeFont ) );
     setSkinHint( QskPushButton::Text | QskAspect::Alignment, Qt::AlignCenter );
 
-    setMetric( QskSlider::Panel | QskAspect::Size, 5 );
+    // -- a more advanced setup of the hints for the slider
+
+    const qreal dim = 30;
+
+    setMetric( QskSlider::Panel | QskAspect::Size, dim );
+    setMetric( QskSlider::Groove | QskAspect::Size, 2 );
+    setMetric( QskSlider::Fill | QskAspect::Size, 2 );
+    setColor( QskSlider::Panel, Qt::transparent );
     setColor( QskSlider::Groove, m_palette->color4 );
     setColor( QskSlider::Fill, m_palette->color4.darker( 200 ) );
-    setMetric( QskSlider::Handle | QskAspect::Size, 18 );
+    setMetric( QskSlider::Handle | QskAspect::Size, 24 );
-    setMetric( QskSlider::Handle | QskAspect::Radius, 9 );
+    setMetric( QskSlider::Handle | QskAspect::Radius, 12 );
     setColor( QskSlider::Handle, m_palette->color5 );
 
-    // animator for daylight/night scheme transitions
+    // handle expanding, when being pressed
+    for ( auto state : { QskAspect::NoState, QskSlider::Pressed } )
+    {
+        using namespace QskAspect;
+
+        const Aspect aspect = QskSlider::Handle | state;
+
+        // fullsize, only when being pressed
+        const qreal sz = ( state == NoState ) ? 0.7 * dim : dim;
+
+        setMetric( aspect | Size, sz );
+        setMetric( aspect | Radius, 0.5 * sz ); // a round handle
+
+        setAnimation( aspect | Size | Metric, duration );
+        setAnimation( aspect | Radius | Metric, 200 );
+
+        // move the handle smoothly, when using keys
+        setAnimation( aspect | Metric | Position,
+            ( state == NoState ) ? 2 * duration : 0 );
+    }
+
+    // animator for color scheme transitions
     setAnimation( QskAspect::Color, QskAnimationHint( 1000, QEasingCurve::InQuad ) );
 }
 
@@ -143,7 +186,3 @@ void DefaultSkin::resetColors()
     initHints();
 }
 
-DefaultSkin::~DefaultSkin()
-{
-    delete m_palette;
-}

examples/automotive/DefaultSkin.h

@@ -21,8 +21,6 @@ public:
     };
 
 private:
-    class Transition;
-
     void initHints();
 
     QString m_name;

examples/automotive/MainWindow.cpp

@@ -1,6 +1,8 @@
 #include "MainWindow.h"
+#include "ButtonBar.h"
 #include "RadioControl.h"
 #include "SoundControl.h"
+#include "SkinFactory.h"
 
 #include <QskGraphic.h>
 #include <QskGraphicIO.h>
@@ -11,47 +13,6 @@
 #include <QDate>
 #include <QImage>
 
-namespace
-{
-    class ButtonBar : public QskLinearBox
-    {
-    public:
-        ButtonBar( QQuickItem* parentItem = nullptr ):
-            QskLinearBox( parentItem )
-        {
-            QColor c( Qt::black );
-            c.setAlphaF( 0.5 );
-            setBackgroundColor( c );
-
-            setMargins( QMarginsF( 20, 15, 20, 15 ) );
-            setSpacing( 20 );
-
-            setSizePolicy( QskSizePolicy::MinimumExpanding, QskSizePolicy::MinimumExpanding );
-        }
-
-        void addIcon( const char* name )
-        {
-            auto* label = new QskGraphicLabel( this );
-
-            /*
-                The label should adjust vertically and be stretched horizontally
-                according to its aspect ratio.
-             */
-
-            label->setSizePolicy( QskSizePolicy::Constrained, QskSizePolicy::Ignored );
-
-            const QString fileName = QString( ":/qvg/%1.qvg" ).arg( name );
-            label->setGraphic( QskGraphicIO::read( fileName ) );
-        }
-
-    protected:
-        virtual QSizeF contentsSizeHint() const override final
-        {
-            return QSizeF( -1, 20 );
-        }
-    };
-}
-
 MainWindow::MainWindow()
 {
     const QImage image( ":/images/background.jpg" );
@@ -81,16 +42,15 @@ MainWindow::MainWindow()
 QQuickItem* MainWindow::headerBar() const
 {
     auto* header = new ButtonBar();
-    header->addIcon( "bluetooth" );
+    header->addIndicator( "bluetooth" );
-    header->addIcon( "location" );
+    header->addIndicator( "location" );
-    header->addIcon( "phone" );
+    header->addIndicator( "phone" );
 
-    auto dateLabel = new QskTextLabel( QDate::currentDate().toString(), header );
+    (void) new QskTextLabel( QDate::currentDate().toString(), header );
-    dateLabel->setColor( QskTextLabel::Text, Qt::white );
 
-    header->addIcon( "user" );
+    header->addIndicator( "user" );
-    header->addIcon( "bookmark" );
+    header->addIndicator( "bookmark" );
-    header->addIcon( "menu" );
+    header->addIndicator( "menu" );
 
     return header;
 }
@@ -108,11 +68,11 @@ QQuickItem* MainWindow::footerBar() const
 {
     auto* footer = new ButtonBar();
 
-    footer->addIcon( "cloud" );
+    footer->addIndicator( "cloud" );
-    footer->addIcon( "man" );
+    footer->addIndicator( "man" );
-    footer->addIcon( "bus" );
+    footer->addIndicator( "bus" );
-    footer->addIcon( "plane" );
+    footer->addIndicator( "plane" );
-    footer->addIcon( "train" );
+    footer->addIndicator( "train" );
 
     footer->addStretch( 10 );
 

examples/automotive/OtherSkin.cpp

@@ -1,12 +1,17 @@
 #include "OtherSkin.h"
+#include "SkinFactory.h"
 
 #include "SoundControl.h"
+#include "ButtonBar.h"
 
+#include <QskBox.h>
 #include <QskFunctions.h>
 #include <QskPushButton.h>
 #include <QskSkinTransition.h>
 #include <QskSlider.h>
 #include <QskTextLabel.h>
+#include <QskSeparator.h>
+#include <QskColorFilter.h>
 
 #include <QDebug>
 
@@ -49,38 +54,87 @@ OtherSkin::OtherSkin( const QString& name, QObject* parent ):
 {
     setObjectName( "OtherSkin" );
     initHints();
-}
+    initGraphicFilters();
-
-void OtherSkin::initHints()
-{
-    setFont( QskSkin::DefaultFont, qskFont( 13 ) );
-    setFont( QskSkin::LargeFont, qskFont( 20 ) );
-
-    setColor( QskTextLabel::Text, m_palette->color4 );
-
-    setColor( SoundControl::CrossHair, m_palette->color3 );
-    setColor( SoundControl::Marker, m_palette->color3 );
-    setMetric( SoundControl::Marker | QskAspect::Radius, 100 );
-    setSkinHint( SoundControl::Marker
-        | QskAspect::Radius | QskAspect::AllCorners
-        | QskAspect::SizeMode, Qt::RelativeSize );
-
-    setColor( QskPushButton::Panel, m_palette->color1 );
-    setColor( QskPushButton::Text, m_palette->color3 );
-
-    setMetric( QskPushButton::Text | QskAspect::Size, 20 );
-    setSkinHint( QskPushButton::Text | QskAspect::FontRole, int( QskSkin::LargeFont ) );
-    setSkinHint( QskPushButton::Text | QskAspect::Alignment, Qt::AlignCenter );
-
-    setMetric( QskSlider::Panel | QskAspect::Size, 5 );
-    setColor( QskSlider::Groove, m_palette->color4 );
-    setColor( QskSlider::Fill, m_palette->color4.darker( 200 ) );
-    setMetric( QskSlider::Handle | QskAspect::Size, 18 );
-    setMetric( QskSlider::Handle | QskAspect::Radius, 9 );
-    setColor( QskSlider::Handle, m_palette->color5 );
 }
 
 OtherSkin::~OtherSkin()
 {
     delete m_palette;
 }
+
+void OtherSkin::initHints()
+{
+    const int duration = 200; // for animators
+
+    setFont( QskSkin::DefaultFont, qskFont( 13 ) );
+    setFont( QskSkin::LargeFont, qskFont( 20 ) );
+
+    setColor( QskTextLabel::Text, m_palette->color3 );
+
+    setColor( SoundControl::CrossHair, QColor( "OliveDrab" ).lighter( 120 ) );
+    setColor( SoundControl::Marker, "OliveDrab" );
+    setMetric( SoundControl::Marker | QskAspect::Radius, 100 );
+    setSkinHint( SoundControl::Marker
+        | QskAspect::Radius | QskAspect::AllCorners
+        | QskAspect::SizeMode, Qt::RelativeSize );
+
+    setSkinHint( ButtonBar::Indicator | QskAspect::GraphicRole, SkinFactory::Indicator );
+    setSkinHint( SoundControl::Vehicle | QskAspect::GraphicRole, SkinFactory::Vehicle );
+    setSkinHint( SoundControl::MarkerControl | QskAspect::GraphicRole, SkinFactory::Vehicle );
+
+    setColor( QskSeparator::Panel, m_palette->color3 );
+    setMetric( QskSeparator::Panel, 1 );
+
+    // -- push buttons
+
+    setMetric( QskPushButton::Panel | QskAspect::Radius, 4 );
+    setMetric( QskPushButton::Panel | QskAspect::Padding, 8 );
+    setColor( QskPushButton::Panel, m_palette->color1 );
+    setColor( QskPushButton::Text, m_palette->color3 );
+    setColor( QskPushButton::Panel | QskPushButton::Pressed, m_palette->color2 );
+    setAnimation( QskPushButton::Panel | QskAspect::Color, duration );
+
+    QColor overlayColor( "#011627" );
+    overlayColor.setAlpha( 200 );
+    setColor( SoundControl::Overlay, overlayColor );
+    setMetric( SoundControl::SliderControl | QskAspect::Radius, 4 );
+    setColor( SoundControl::SliderControl, m_palette->color1 );
+    setColor( SoundControl::SliderControl | QskPushButton::Pressed, m_palette->color2 );
+    setAnimation( SoundControl::SliderControl | QskAspect::Color, duration );
+
+    setMetric( QskPushButton::Text | QskAspect::Size, 20 );
+    setSkinHint( QskPushButton::Text | QskAspect::FontRole, int( QskSkin::LargeFont ) );
+    setSkinHint( QskPushButton::Text | QskAspect::Alignment, Qt::AlignCenter );
+
+    // -- a more advanced setup of the hints for the slider
+
+    setMetric( QskSlider::Panel | QskAspect::Size, 30 );
+    setMetric( QskSlider::Groove | QskAspect::Size, 5 );
+    setMetric( QskSlider::Fill | QskAspect::Size, 5 );
+    setColor( QskSlider::Panel, Qt::transparent );
+    setColor( QskSlider::Groove, m_palette->color4.darker( 200 ) );
+    setColor( QskSlider::Fill, m_palette->color3.lighter( 150 ) );
+    setMetric( QskSlider::Handle | QskAspect::Size, 22 );
+    setMetric( QskSlider::Handle | QskAspect::Radius, 6 );
+    setColor( QskSlider::Handle, m_palette->color3 );
+}
+
+void OtherSkin::initGraphicFilters()
+{
+    {
+        // all SVGs on the header/footer are plain white
+
+        QskColorFilter filter;
+        filter.addColorSubstitution( Qt::white, m_palette->color3.rgb() );
+
+        setGraphicFilter( SkinFactory::Indicator, filter );
+    }
+
+    {
+        // we need to modify the SVG to have more colors for substutions !!
+        QskColorFilter filter;
+        filter.addColorSubstitution( Qt::white, m_palette->color3.rgb() );
+
+        setGraphicFilter( SkinFactory::Vehicle, filter );
+    }
+}

examples/automotive/OtherSkin.h

@@ -13,6 +13,7 @@ public:
 
 private:
     void initHints();
+    void initGraphicFilters();
 
     QString m_name;
     Palette* m_palette;

examples/automotive/SkinFactory.cpp

@@ -1,16 +1,21 @@
 #include "SkinFactory.h"
 #include "DefaultSkin.h"
 #include "OtherSkin.h"
+#include "SoundControl.h"
 
 #include <QskSetup.h>
 #include <QskSkinTransition.h>
+#include <QskColorFilter.h>
+#include <QskTextLabel.h>
+#include <QskPushButton.h>
+#include <QskSeparator.h>
 
 #include <squiek/QskSquiekSkin.h>
 #include <material/QskMaterialSkin.h>
 
 QStringList SkinFactory::skinNames() const
 {
-    return { "DefaultSkin", "OtherSkin", "Squiek", "Material" };
+    return { "DefaultSkin", "OtherSkin", "SquiekSkin", "MaterialSkin" };
 }
 
 QskSkin* SkinFactory::createSkin( const QString& skinName )
@@ -22,10 +27,57 @@ QskSkin* SkinFactory::createSkin( const QString& skinName )
         return new OtherSkin( skinName );
 
     if ( skinName == "SquiekSkin" )
-        return new QskSquiekSkin();
+    {
+        auto skin = new QskSquiekSkin();
+
+        const QColor themeColor( "FireBrick" );
+
+        QColor overlayColor( "SlateGray");
+        overlayColor.setAlpha( 200 );
+        skin->setColor( SoundControl::Overlay, overlayColor );
+
+        QskColorFilter filter;
+        filter.addColorSubstitution( Qt::white, themeColor.rgb() );
+        skin->setGraphicFilter( SkinFactory::Indicator, filter );
+
+        filter.addColorSubstitution( Qt::white, QColor( "CornflowerBlue" ).rgb() );
+        skin->setGraphicFilter( SkinFactory::Vehicle, filter );
+
+        skin->setSkinHint( SoundControl::MarkerControl | QskAspect::GraphicRole, SkinFactory::Indicator );
+        skin->setSkinHint( SoundControl::Vehicle | QskAspect::GraphicRole, SkinFactory::Vehicle );
+
+        skin->setColor( SoundControl::Marker, themeColor );
+        skin->setMetric( SoundControl::Marker | QskAspect::Radius, 6 );
+        skin->setColor( QskTextLabel::Text, "PeachPuff" );
+        skin->setColor( QskPushButton::Text, themeColor );
+
+        return skin;
+    }
 
     if ( skinName == "MaterialSkin" )
-        return new QskMaterialSkin();
+    {
+        auto skin = new QskMaterialSkin();
+
+        const QColor themeColor( "Tan" );
+
+        QColor overlayColor = themeColor;
+        overlayColor.setAlpha( 200 );
+        skin->setColor( SoundControl::Overlay, overlayColor );
+
+        QskColorFilter filter;
+        filter.addColorSubstitution( Qt::white, QColor( "SaddleBrown" ).rgb() );
+        skin->setGraphicFilter( SkinFactory::Indicator, filter );
+
+        skin->setSkinHint( SoundControl::MarkerControl | QskAspect::GraphicRole, SkinFactory::Indicator );
+
+        skin->setMetric( SoundControl::Marker | QskAspect::Radius, 8 );
+        skin->setColor( SoundControl::Marker, "SaddleBrown" );
+        skin->setColor( SoundControl::CrossHair, "Sienna" );
+        skin->setColor( QskTextLabel::Text, "SaddleBrown" );
+        skin->setColor( QskSeparator::Panel, "Sienna" );
+
+        return skin;
+    }
 
     return nullptr;
 }
@@ -53,7 +105,7 @@ void SkinFactory::rotateSkin()
 
     transition.setSourceSkin( oldSkin );
     transition.setTargetSkin( newSkin );
-    transition.setAnimation( 500 );
+    transition.setAnimation( 600 );
 
     transition.process();
 

examples/automotive/SkinFactory.h

@@ -8,6 +8,18 @@ class SkinFactory : public QskSkinFactory
     Q_OBJECT
 
 public:
+    enum GraphicRoles
+    {
+        // to be visisble on a button
+        Button,
+
+        // to be visisble on header/footer
+        Indicator,
+
+        // in contrast to the background pixmap
+        Vehicle
+    };
+
     virtual QStringList skinNames() const override;
     virtual QskSkin* createSkin( const QString& skinName ) override;
 

examples/automotive/SoundControl.cpp

@@ -1,4 +1,5 @@
 #include "SoundControl.h"
+#include "SkinFactory.h"
 
 #include <QskGraphic.h>
 #include <QskGraphicLabel.h>
@@ -12,10 +13,34 @@
 #include <QskBox.h>
 #include <QskNamespace.h>
 
+QSK_SUBCONTROL( SoundControl, Overlay )
 QSK_SUBCONTROL( SoundControl, CrossHair )
 QSK_SUBCONTROL( SoundControl, Marker )
+QSK_SUBCONTROL( SoundControl, MarkerControl )
+QSK_SUBCONTROL( SoundControl, Vehicle )
 QSK_SUBCONTROL( SoundControl, SliderControl )
 
+class VehicleLabel : public QskGraphicLabel
+{
+public:
+    VehicleLabel( QQuickItem* parentItem = nullptr ):
+        QskGraphicLabel( parentItem )
+    {
+        setGraphic( QskGraphicIO::read( QString( ":/qvg/car.qvg" ) ) );
+    }
+
+    virtual QskAspect::Subcontrol effectiveSubcontrol(
+        QskAspect::Subcontrol subControl ) const override final
+    {
+        // so that we can set specific colors in the skin
+
+        if ( subControl == QskGraphicLabel::Graphic )
+            return SoundControl::Vehicle;
+
+        return subControl;
+    }
+};
+
 class CrossHairLine : public QskBox
 {
 public:
@@ -52,10 +77,10 @@ public:
     }
 };
 
-class NavigationButton : public QskPushButton
+class MarkerControlButton : public QskPushButton
 {
 public:
-    NavigationButton( Qsk::Direction direction, QQuickItem* parentItem = nullptr ):
+    MarkerControlButton( Qsk::Direction direction, QQuickItem* parentItem = nullptr ):
         QskPushButton( parentItem ),
         m_direction( direction )
     {
@@ -90,6 +115,17 @@ public:
         return QPointF();
     }
 
+    virtual QskAspect::Subcontrol effectiveSubcontrol(
+        QskAspect::Subcontrol subControl ) const override final
+    {
+        // so that we can set specific colors in the skin
+
+        if ( subControl == QskPushButton::Graphic )
+            return SoundControl::MarkerControl;
+
+        return subControl;
+    }
+
 protected:
     virtual QSizeF contentsSizeHint() const override final
     {
@@ -149,8 +185,7 @@ public:
         auto verticalCarRectangle = new CrossHairLine( this );
         verticalCarRectangle->setObjectName( "verticalBar" );
 
-        auto* carLabel = new QskGraphicLabel( this );
+        (void) new VehicleLabel( this );
-        carLabel->setGraphic( QskGraphicIO::read( QString( ":/qvg/car.qvg" ) ) );
 
         auto marker = new BalanceFadeMarker( this );
         marker->setObjectName( "marker" );
@@ -246,6 +281,7 @@ public:
         m_slider = new QskSlider( Qt::Vertical );
         m_slider->setMinimum( min );
         m_slider->setMaximum( max );
+        m_slider->setStepSize( 10 );
 
         // layout
 
@@ -314,9 +350,9 @@ public:
     BalanceFadeControlBox( QQuickItem* parentItem = nullptr ):
         QskGridBox( parentItem )
     {
-        NavigationButton* buttons[4];
+        MarkerControlButton* buttons[4];
         for ( int i = 0; i < 4; i++ )
-            buttons[i] = new NavigationButton( static_cast< Qsk::Direction >( i ) );
+            buttons[i] = new MarkerControlButton( static_cast< Qsk::Direction >( i ) );
 
         m_carControl = new StackedControl();
 
@@ -347,20 +383,30 @@ public:
 };
 
 SoundControl::SoundControl( QQuickItem* parent ):
-    QskControl( parent )
+    QskBox( parent )
 {
-    setMargins( QMarginsF( 40, 20, 40, 20 ) );
     setAutoLayoutChildren( true );
 
-    QskGridBox* outerLayout = new QskGridBox( this );
+    auto layout = new QskGridBox( this );
-    outerLayout->setVerticalSpacing( 10 );
+    layout->setMargins( QMarginsF( 40, 20, 40, 20 ) );
-    outerLayout->setHorizontalSpacing( 60 );
+    layout->setVerticalSpacing( 10 );
-    outerLayout->setColumnStretchFactor( 0, 1 );
+    layout->setHorizontalSpacing( 60 );
-    outerLayout->setColumnStretchFactor( 1, 2 );
+    layout->setColumnStretchFactor( 0, 1 );
+    layout->setColumnStretchFactor( 1, 2 );
 
-    outerLayout->addItem( new SectionTitleBar( "Tone" ), 0, 0 );
+    layout->addItem( new SectionTitleBar( "Tone" ), 0, 0 );
-    outerLayout->addItem( new ToneControlBox(), 1, 0 );
+    layout->addItem( new ToneControlBox(), 1, 0 );
 
-    outerLayout->addItem( new SectionTitleBar( "Balance / Fade" ), 0, 1 );
+    layout->addItem( new SectionTitleBar( "Balance / Fade" ), 0, 1 );
-    outerLayout->addItem( new BalanceFadeControlBox(), 1, 1 );
+    layout->addItem( new BalanceFadeControlBox(), 1, 1 );
 }
+
+QskAspect::Subcontrol SoundControl::effectiveSubcontrol(
+    QskAspect::Subcontrol subControl ) const
+{
+    if ( subControl == QskBox::Panel )
+        return SoundControl::Overlay;
+
+    return subControl;
+}
+

examples/automotive/SoundControl.h

@@ -1,14 +1,17 @@
 #ifndef SOUNDCONTROL_H
 #define SOUNDCONTROL_H
 
-#include <QskControl.h>
+#include <QskBox.h>
 
-class SoundControl : public QskControl
+class SoundControl : public QskBox
 {
 public:
-    QSK_SUBCONTROLS( CrossHair, Marker, SliderControl )
+    QSK_SUBCONTROLS( Overlay, CrossHair, Marker, Vehicle, SliderControl, MarkerControl )
 
     SoundControl( QQuickItem* parent = nullptr );
+
+    virtual QskAspect::Subcontrol effectiveSubcontrol(
+        QskAspect::Subcontrol subControl ) const override final;
 };
 
 #endif // SOUNDCONTROL_H

examples/automotive/automotive.pro

@@ -3,21 +3,23 @@ include( $${PWD}/../examples.pri )
 TARGET = automotive
 
 HEADERS += \
-    MainWindow.h \
+    ButtonBar.h \
     RadioControl.h \
     SoundControl.h \
     SkinFactory.h \
     DefaultSkin.h \
-    OtherSkin.h
+    OtherSkin.h \
+    MainWindow.h
 
 SOURCES += \
-    main.cpp \
+    ButtonBar.cpp \
-    MainWindow.cpp \
     RadioControl.cpp \
     SoundControl.cpp \
     SkinFactory.cpp \
     DefaultSkin.cpp \
-    OtherSkin.cpp
+    OtherSkin.cpp \
+    MainWindow.cpp \
+    main.cpp
 
 QRCFILES += \
     images.qrc

examples/automotive/main.cpp

@@ -36,13 +36,13 @@ int main( int argc, char** argv )
     cout << "CTRL-T to change the color scheme, when the \"Default\" skin is active." << endl;
 
     QskShortcut::addShortcut( QKeySequence( Qt::CTRL + Qt::Key_T ),
-        &skinFactory, SLOT( toggleScheme()), false );
+        &skinFactory, SLOT(toggleScheme()), false );
 
     QskShortcut::addShortcut( QKeySequence( Qt::CTRL + Qt::Key_S ),
-        &skinFactory, SLOT( rotateSkin()), false );
+        &skinFactory, SLOT(rotateSkin()), false );
 
     // With CTRL-B you can rotate a couple of visual debug modes
-    SkinnyShortcut::enable( SkinnyShortcut::DebugBackground | 
+    SkinnyShortcut::enable( SkinnyShortcut::DebugBackground |
         SkinnyShortcut::DebugStatistics | SkinnyShortcut::Quit );
 
     MainWindow mainWindow;