add value text

examples/iotdashboard/LightDisplay.cpp

@@ -27,12 +27,14 @@ QSK_SUBCONTROL( LightDisplay, LeftLabel )
 QSK_SUBCONTROL( LightDisplay, RightLabel )
 
 LightDisplay::LightDisplay( QQuickItem* parent )
-    : QskBoundedControl( parent )
+    : QskBoundedValueInput( parent )
 {
     setAlignmentHint( LeftLabel, Qt::AlignRight );
+    setAlignmentHint( ValueText, Qt::AlignCenter | Qt::AlignHCenter );
+
+    setBoundaries( 0, 100 );
 
     // ### move to Skin:
-    setGradient( Qt::magenta );
     setShadow( { 0, 20 } );
     setShadowColor( 0xe5e5e5 );
 }

examples/iotdashboard/LightDisplay.h

@@ -5,11 +5,11 @@
 
 #pragma once
 
-#include <QskBoundedControl.h>
+#include <QskBoundedValueInput.h>
 #include <QskBoxShapeMetrics.h>
 #include <QskShadowMetrics.h>
 
-class LightDisplay : public QskBoundedControl
+class LightDisplay : public QskBoundedValueInput
 {
     Q_OBJECT
 

examples/iotdashboard/LightDisplaySkinlet.cpp

@@ -30,7 +30,8 @@ QRectF LightDisplaySkinlet::subControlRect( const QskSkinnable* skinnable,
     QRectF rect = contentsRect;
 
     if( subControl == LightDisplay::Groove
-            || subControl == LightDisplay::Panel )
+            || subControl == LightDisplay::Panel
+            || subControl == LightDisplay::ValueText )
     {
         QSizeF size = textLabelsSize( display );
 
@@ -120,8 +121,10 @@ QSGNode* LightDisplaySkinlet::updateSubNode(
         }
         case ValueTextRole:
         {
-
-            return nullptr;
+            const QString valueText = QString::number( display->value(), 'f', 0 )
+                    + QStringLiteral( " %" );
+            return updateTextNode( skinnable, node, valueText, {},
+                                   LightDisplay::ValueText );
         }
         case LeftLabelRole:
         {

examples/iotdashboard/MainContent.cpp

@@ -54,7 +54,8 @@ namespace
         LightIntensity( QQuickItem* parent = nullptr )
             : Box( "Light intensity", parent )
         {
-            new LightDisplay( this );
+            auto* lightDisplay = new LightDisplay( this );
+            lightDisplay->setValue( 50.0 );
         }
     };
 }