add knob

examples/iotdashboard/LightDisplay.cpp

@@ -24,6 +24,7 @@ QSK_SUBCONTROL( LightDisplay, ColdAndWarmArc )
 QSK_SUBCONTROL( LightDisplay, ValueText )
 QSK_SUBCONTROL( LightDisplay, LeftLabel )
 QSK_SUBCONTROL( LightDisplay, RightLabel )
+QSK_SUBCONTROL( LightDisplay, Knob )
 
 LightDisplay::LightDisplay( QQuickItem* parent )
     : QskBoundedValueInput( parent )

examples/iotdashboard/LightDisplay.h

@@ -14,7 +14,8 @@ class LightDisplay : public QskBoundedValueInput
     Q_OBJECT
 
   public:
-    QSK_SUBCONTROLS( Panel, Groove, ColdAndWarmArc, ValueText, LeftLabel, RightLabel )
+    QSK_SUBCONTROLS( Panel, Groove, ColdAndWarmArc, ValueText, LeftLabel,
+                     RightLabel, Knob )
 
     LightDisplay( QQuickItem* parent = nullptr );
 

examples/iotdashboard/LightDisplaySkinlet.cpp

@@ -12,12 +12,13 @@
 #include <QskTextOptions.h>
 
 #include <QFontMetrics>
+#include <QtMath>
 
 LightDisplaySkinlet::LightDisplaySkinlet( QskSkin* skin )
     : QskSkinlet( skin )
 {
-    setNodeRoles( { GrooveRole, PanelRole, ColdAndWarmArcRole,
+    setNodeRoles( { GrooveRole, PanelRole, ColdAndWarmArcRole, ValueTextRole,
-                    ValueTextRole, LeftLabelRole, RightLabelRole } );
+                    LeftLabelRole, RightLabelRole, KnobRole } );
 }
 
 LightDisplaySkinlet::~LightDisplaySkinlet()
@@ -79,7 +80,24 @@ QRectF LightDisplaySkinlet::subControlRect( const QskSkinnable* skinnable,
         rect.setY( arcRect.y() + ( arcRect.height() - size.height() ) / 2 );
         rect.setHeight( size.height() );
 
-        qDebug() << "rl rect:" << rect;
+        return rect;
+    }
+    else if( subControl == LightDisplay::Knob )
+    {
+        QRectF arcRect = subControlRect( skinnable, contentsRect, LightDisplay::ColdAndWarmArc );
+        QskArcMetrics arcMetrics = display->arcMetricsHint( LightDisplay::ColdAndWarmArc );
+        QSizeF knobSize = display->strutSizeHint( LightDisplay::Knob );
+
+        const qreal radius = ( arcRect.width() - arcMetrics.width() ) / 2;
+        const qreal angle = display->valueAsRatio() * 180;
+
+        const qreal cos = qFastCos( qDegreesToRadians( angle ) );
+        const qreal sin = qFastSin( qDegreesToRadians( angle ) );
+
+        const auto x = arcRect.center().x() - knobSize.width() / 2 - radius * cos;
+        const auto y = arcRect.center().y() - knobSize.height() / 2 - radius * sin;
+
+        rect = QRectF( x, y, knobSize.width(), knobSize.height() );
         return rect;
     }
 
@@ -144,6 +162,10 @@ QSGNode* LightDisplaySkinlet::updateSubNode(
             return updateTextNode( skinnable, node, QStringLiteral( "  100" ), {},
                                    LightDisplay::RightLabel );
         }
+        case KnobRole:
+        {
+            return updateBoxNode( skinnable, node, LightDisplay::Knob );
+        }
     }
 
     return Inherited::updateSubNode( skinnable, nodeRole, node );

examples/iotdashboard/LightDisplaySkinlet.h

@@ -25,6 +25,7 @@ class LightDisplaySkinlet : public QskSkinlet
         ValueTextRole,
         LeftLabelRole,
         RightLabelRole,
+        KnobRole,
 
         RoleCount,
     };

examples/iotdashboard/Skin.cpp

@@ -195,6 +195,11 @@ void Skin::initHints( const Palette& palette )
     ed.setFontRole( LightDisplay::ValueText, QskSkin::LargeFont );
     ed.setColor( LightDisplay::ValueText, "#929cb2" );
 
+    ed.setStrutSize( LightDisplay::Knob, { 15.65, 15.65 } );
+    ed.setBoxBorderMetrics( LightDisplay::Knob, 1 );
+    ed.setBoxBorderColors( LightDisplay::Knob, 0xffc4c4c4 );
+    ed.setBoxShape( LightDisplay::Knob, 100, Qt::RelativeSize );
+
     // palette dependent skin hints:
     ed.setGradient( MenuBar::Panel, palette.menuBar );
     ed.setGradient( MainContent::Panel, palette.mainContent );
@@ -202,6 +207,7 @@ void Skin::initHints( const Palette& palette )
     ed.setGradient( BoxWithButtons::Panel, palette.box );
     ed.setGradient( UsageDiagramBox::Panel, palette.box );
     ed.setGradient( LightDisplay::Panel, palette.box );
+    ed.setGradient( LightDisplay::Knob, palette.box );
     ed.setGradient( RoundButton::Panel, palette.roundButton );
     ed.setBoxBorderColors( UsageDiagramBox::DaysBox, palette.weekdayBox );
     ed.setColor( QskTextLabel::Text, palette.text );