168492376
/
qskinny
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'master' of https://github.com/uwerat/qskinny

This commit is contained in:
Uwe Rathmann 2022-12-20 16:48:33 +01:00
parent a85127ca14 0db351872a
commit 5725be4470
12 changed files with 128 additions and 79 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
examples/iotdashboard/BoxWithButtons.cpp
View File

@ -19,6 +19,8 @@ namespace
{
class UpAndDownBox : public QskLinearBox
{
Q_OBJECT
public:
UpAndDownBox( QQuickItem* parent )
: QskLinearBox( Qt::Vertical, parent )
@ -26,15 +28,25 @@ namespace
setSizePolicy( Qt::Horizontal, QskSizePolicy::Fixed );
setSpacing( 0 );
new RoundButton( QskAspect::Top, this );
new RoundButton( QskAspect::Bottom, this );
auto* const topButton = new RoundButton( QskAspect::Top, this );
connect( topButton, &QskPushButton::clicked, this, &UpAndDownBox::increase );
auto* const bottomButton = new RoundButton( QskAspect::Bottom, this );
connect( bottomButton, &QskPushButton::clicked, this, &UpAndDownBox::decrease );
}
Q_SIGNALS:
void increase();
void decrease();
};
}
BoxWithButtons::BoxWithButtons( const QString& title, const QString& value,
BoxWithButtons::BoxWithButtons( const QString& title, const QString &prefix,
const int initialValue, const QString &suffix,
bool isBright, QQuickItem* parent )
: Box( QString(), parent )
, m_prefix( prefix )
, m_suffix( suffix )
{
setSubcontrolProxy( QskBox::Panel, Panel );
@ -44,7 +56,8 @@ BoxWithButtons::BoxWithButtons( const QString& title, const QString& value,
layout->setSpacing( 20 );
auto iconLabel = new RoundedIcon( isBright, layout );
iconLabel->setSource( title );
iconLabel->setGraphicSource( title );
iconLabel->setGraphicStrutSize( { 35.17, 35.17 } );
iconLabel->setFixedSize( 68, 68 );
auto titleAndValue = new QskLinearBox( Qt::Vertical, layout );
@ -54,10 +67,30 @@ BoxWithButtons::BoxWithButtons( const QString& title, const QString& value,
auto* titleLabel = new QskTextLabel( title, titleAndValue );
titleLabel->setFontRole( Skin::TitleFont );
auto valueLabel = new QskTextLabel( value, titleAndValue );
valueLabel->setSubcontrolProxy( QskTextLabel::Text, ValueText );
m_valueLabel = new QskTextLabel( titleAndValue );
m_valueLabel->setSubcontrolProxy( QskTextLabel::Text, ValueText );
setValue( initialValue );
layout->addStretch( 1 );
new UpAndDownBox( layout );
auto* const upAndDownBox = new UpAndDownBox( layout );
connect( upAndDownBox, &UpAndDownBox::increase, this, [this]()
{
setValue( m_value + 1 );
} );
connect( upAndDownBox, &UpAndDownBox::decrease, this, [this]()
{
setValue( m_value - 1 );
} );
}
void BoxWithButtons::setValue( const int value )
{
m_value = qBound( 0, value, 100 );
const QString text = m_prefix + QString::number( m_value ) + m_suffix;
m_valueLabel->setText( text );
}
#include "BoxWithButtons.moc"

13
examples/iotdashboard/BoxWithButtons.h
View File

@ -7,11 +7,22 @@
#include "Box.h"
class QskTextLabel;
class BoxWithButtons : public Box
{
public:
QSK_SUBCONTROLS( Panel, ValuePanel, ValueText )
BoxWithButtons( const QString& title, const QString& value,
BoxWithButtons( const QString& title, const QString& prefix,
const int initialValue, const QString& suffix,
bool isBright, QQuickItem* parent = nullptr );
private:
void setValue( const int value );
const QString m_prefix;
int m_value;
const QString m_suffix;
QskTextLabel* m_valueLabel;
};

4
examples/iotdashboard/DashboardPage.cpp
View File

@ -33,7 +33,7 @@ namespace
{
public:
IndoorTemperature( QQuickItem* parent = nullptr )
: BoxWithButtons( "Indoor Temperature", "+24", true, parent )
: BoxWithButtons( "Indoor Temperature", "+", 24, {}, true, parent )
{
}
};
@ -42,7 +42,7 @@ namespace
{
public:
Humidity( QQuickItem* parent = nullptr )
: BoxWithButtons( "Humidity", "30%", false, parent )
: BoxWithButtons( "Humidity", {}, 30, "%", false, parent )
{
}
};

26
examples/iotdashboard/LightDisplay.cpp
View File

@ -43,10 +43,6 @@ LightDisplay::LightDisplay( QQuickItem* parent )
setAlignmentHint( ValueText, Qt::AlignRight );
setBoundaries( 0, 100 );
// ### move to Skin:
setShadow( { 0, 20 } );
setShadowColor( 0xe5e5e5 );
}
bool LightDisplay::isPressed() const
@ -54,17 +50,6 @@ bool LightDisplay::isPressed() const
return hasSkinState( Pressed );
}
void LightDisplay::setShadow( const QskShadowMetrics& shadow )
{
m_shadow = shadow;
update();
}
const QskShadowMetrics& LightDisplay::shadow() const
{
return m_shadow;
}
void LightDisplay::setGradient( const QskGradient& gradient )
{
m_gradient = gradient;
@ -76,17 +61,6 @@ const QskGradient& LightDisplay::gradient() const
return m_gradient;
}
void LightDisplay::setShadowColor( const QColor& color )
{
m_shadowColor = color;
update();
}
QColor LightDisplay::shadowColor() const
{
return m_shadowColor;
}
void LightDisplay::mousePressEvent( QMouseEvent* event )
{
QRectF handleRect = subControlRect( LightDisplay::Knob );

6
examples/iotdashboard/LightDisplay.h
View File

@ -22,15 +22,9 @@ class LightDisplay : public QskBoundedValueInput
bool isPressed() const;
void setShadow( const QskShadowMetrics& );
const QskShadowMetrics& shadow() const;
void setGradient( const QskGradient& );
const QskGradient& gradient() const;
void setShadowColor( const QColor& );
QColor shadowColor() const;
protected:
void mousePressEvent( QMouseEvent* e ) override;
void mouseMoveEvent( QMouseEvent* e ) override;

13
examples/iotdashboard/LightDisplaySkinlet.cpp
View File

@ -137,18 +137,7 @@ QSGNode* LightDisplaySkinlet::updateSubNode(
}
case GrooveRole:
{
const QRectF grooveRect = display->subControlRect( LightDisplay::Groove );
if ( grooveRect.isEmpty() )
return nullptr;
const auto& shadowMetrics = display->shadow();
const auto shadowRect = shadowMetrics.shadowRect( grooveRect );
auto shadowNode = QskSGNode::ensureNode< QskBoxShadowNode >( node );
shadowNode->setShadowData( shadowRect, grooveRect.width() / 2,
shadowMetrics.blurRadius(), display->shadowColor() );
return shadowNode;
return updateBoxNode( skinnable, node, LightDisplay::Groove );
}
case ColdAndWarmArcRole:
{

6
examples/iotdashboard/MyDevices.cpp
View File

@ -4,12 +4,12 @@
*****************************************************************************/
#include "MyDevices.h"
#include "Skin.h"
#include "RoundedIcon.h"
#include <QskGraphic.h>
#include <QskGraphicLabel.h>
#include <QskGridBox.h>
#include <QskSkin.h>
#include <QskTextLabel.h>
#include <QImage>
@ -26,8 +26,10 @@ namespace
auto icon = new RoundedIcon( isBright, this );
icon->setPale( true );
icon->setSource( name );
icon->setGraphicSource( name );
icon->setGraphicStrutSize( { 36, 36 } );
icon->setFixedSize( 68, 68 );
icon->setCheckable( true );
auto textLabel = new QskTextLabel( name, this );
textLabel->setFontRole( QskSkin::TinyFont );

2
examples/iotdashboard/RoundButton.h
View File

@ -7,7 +7,7 @@
#include <QskPushButton.h>
class RoundButton : QskPushButton
class RoundButton : public QskPushButton
{
Q_OBJECT

11
examples/iotdashboard/RoundedIcon.cpp
View File

@ -7,25 +7,24 @@
QSK_SUBCONTROL( RoundedIcon, Panel )
QSK_SUBCONTROL( RoundedIcon, PalePanel )
QSK_SUBCONTROL( RoundedIcon, Graphic )
QSK_STATE( RoundedIcon, Bright, ( QskAspect::FirstUserState << 1 ) )
RoundedIcon::RoundedIcon( bool isBright, QQuickItem* parent )
: QskGraphicLabel( parent )
: QskPushButton( parent )
{
setAlignment( Qt::AlignCenter );
setFillMode( QskGraphicLabel::Pad );
if( isBright )
setSkinStateFlag( Bright );
setPanel( true );
setPale( false );
setSubcontrolProxy( QskPushButton::Graphic, Graphic );
}
void RoundedIcon::setPale( bool on )
{
setSubcontrolProxy( QskGraphicLabel::Panel, on ? PalePanel : Panel );
setSubcontrolProxy( QskPushButton::Panel, on ? PalePanel : Panel );
}
#include "moc_RoundedIcon.cpp"

13
examples/iotdashboard/RoundedIcon.h
View File

@ -5,18 +5,21 @@
#pragma once
#include <QskGraphicLabel.h>
#include <QskPushButton.h>
class QskGraphicLabel;
class RoundedIcon : public QskGraphicLabel
class RoundedIcon : public QskPushButton
{
Q_OBJECT
public:
QSK_SUBCONTROLS( Panel, PalePanel )
QSK_SUBCONTROLS( Panel, PalePanel, Graphic )
QSK_STATES( Bright ) // to differentiate between orange and purple
enum {
NormalRole,
CheckedRole,
} GraphicRole;
RoundedIcon( bool isBright, QQuickItem* parent = nullptr );
void setPale( bool );

58
examples/iotdashboard/Skin.cpp
View File

@ -16,6 +16,7 @@
#include "LightDisplaySkinlet.h"
#include "DashboardPage.h"
#include "MenuBar.h"
#include "RoomsPage.h"
#include "RoundedIcon.h"
#include "RoundButton.h"
#include "TopBar.h"
@ -26,9 +27,11 @@
#include <QskBoxShapeMetrics.h>
#include <QskBoxBorderMetrics.h>
#include <QskBoxBorderColors.h>
#include <QskColorFilter.h>
#include <QskFunctions.h>
#include <QskShadowMetrics.h>
#include <QskSkinHintTableEditor.h>
#include <QskStateCombination.h>
#include <QskTextLabel.h>
#include <QFontDatabase>
@ -147,11 +150,31 @@ void Skin::initHints( const Palette& palette )
QskGradient bright( 0xffff7d34, 0xffff3122 );
bright.setLinearDirection( Qt::Vertical );
if ( subControl == RoundedIcon::PalePanel )
if ( subControl == RoundedIcon::PalePanel ) // My Devices section
{
const uint alpha = 38;
normal.setAlpha( alpha );
bright.setAlpha( alpha );
auto pressedNormal = normal;
pressedNormal.setAlpha( 10 );
auto pressedBright = bright;
pressedBright.setAlpha( 10 );
const int duration = 300;
ed.setGradient( RoundedIcon::PalePanel | QskAbstractButton::Checked, pressedNormal );
ed.setGradient( RoundedIcon::PalePanel | RoundedIcon::Bright | QskAbstractButton::Checked, pressedBright );
ed.setAnimation( RoundedIcon::PalePanel | QskAspect::Color, duration );
ed.setGraphicRole( RoundedIcon::Graphic, RoundedIcon::NormalRole );
ed.setGraphicRole( RoundedIcon::Graphic | QskAbstractButton::Checked, RoundedIcon::CheckedRole,
{ QskStateCombination::CombinationNoState, RoundedIcon::Bright } );
ed.setAnimation( RoundedIcon::Graphic, duration );
QskColorFilter filter;
filter.addColorSubstitution( 0xff606675, palette.deviceGraphic ); // color comes from the SVG
setGraphicFilter( RoundedIcon::CheckedRole, filter );
}
ed.setGradient( subControl, normal );
@ -200,10 +223,6 @@ void Skin::initHints( const Palette& palette )
ed.setBoxShape( LightDisplay::Panel, 100, Qt::RelativeSize );
ed.setArcMetrics( LightDisplay::ColdAndWarmArc, 8.785, 0, 180 );
const QskGradient coldGradient(
{ { 0.0, 0xffff3122 }, { 0.2, 0xfffeeeb7 }, { 0.3, 0xffa7b0ff },
{ 0.5, 0xff6776ff }, { 1.0, Qt::black } } );
ed.setGradient( LightDisplay::ColdAndWarmArc, coldGradient );
ed.setMetric( LightDisplay::Tickmarks, 1 );
ed.setArcMetrics( LightDisplay::Tickmarks, { 4.69, 0, 180 } );
@ -214,12 +233,12 @@ void Skin::initHints( const Palette& palette )
ed.setStrutSize( LightDisplay::Knob, { 20, 20 } );
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( DashboardPage::Panel, palette.mainContent );
ed.setGradient( RoomsPage::Panel, palette.mainContent );
ed.setColor( Box::Panel, palette.box );
QskShadowMetrics shadowMetrics( 0, 10 );
@ -236,7 +255,18 @@ void Skin::initHints( const Palette& palette )
ed.setGradient( LightDisplay::Panel, palette.box );
ed.setGradient( LightDisplay::Knob, palette.box );
ed.setGradient( LightDisplay::ColdAndWarmArc, palette.lightDisplayColdAndWarmArc );
ed.setBoxBorderColors( LightDisplay::Knob, palette.lightDisplayKnobBorder );
ed.setShadowMetrics( LightDisplay::Groove, { 0, 20 } );
ed.setShadowColor( LightDisplay::Groove, palette.shadow );
ed.setGradient( LightDisplay::Groove, palette.box );
ed.setBoxShape( LightDisplay::Groove, 100, Qt::RelativeSize );
ed.setGradient( RoundButton::Panel, palette.roundButton );
ed.setGradient( RoundButton::Panel | QskAbstractButton::Pressed, palette.roundButtonPressed,
{ QskStateCombination::CombinationNoState, RoundButton::Top } );
ed.setAnimation( RoundButton::Panel | QskAspect::Color, 100 );
ed.setBoxBorderColors( UsageDiagramBox::DaysBox, palette.weekdayBox );
ed.setColor( QskTextLabel::Text, palette.text );
ed.setColor( UsageDiagramBox::DayText, palette.text );
@ -250,10 +280,15 @@ Skin::Palette DaytimeSkin::palette() const
0xfffbfbfb,
Qt::white,
0xfff7f7f7,
0xffe5e5e5,
0xfff4f4f4,
Qt::black,
0xffe5e5e5,
{ { { 0.0, 0xffc4c4c4 }, { 0.5, 0xfff8f8f8 }, { 1.0, 0xffc4c4c4 } } }
0xffc4c4c4,
{ { { 0.0, 0xffff3122 }, { 0.2, 0xfffeeeb7 }, { 0.3, 0xffa7b0ff },
{ 0.5, 0xff6776ff }, { 1.0, Qt::black } } },
{ { { 0.0, 0xffc4c4c4 }, { 0.5, 0xfff8f8f8 }, { 1.0, 0xffc4c4c4 } } },
0xffdddddd,
};
}
@ -264,9 +299,14 @@ Skin::Palette NighttimeSkin::palette() const
0xff040404,
Qt::black,
0xff0a0a0a,
0xff1a1a1a,
0xff0c0c0c,
Qt::white,
0xff1a1a1a,
{ { { 0.0, 0xff666666 }, { 0.5, 0xff222222 }, { 1.0, 0xff333333 } } }
0xff4a4a4a,
0xff555555,
{ { { 0.0, 0xff991100 }, { 0.2, 0xff9a7a57 },
{ 0.5, 0xff3726af }, { 1.0, Qt::black } } },
{ { { 0.0, 0xff666666 }, { 0.5, 0xff222222 }, { 1.0, 0xff333333 } } },
0xff222222,
};
}

4
examples/iotdashboard/Skin.h
View File

@ -17,10 +17,14 @@ class Skin : public QskSkin
QColor mainContent;
QColor box;
QColor roundButton;
QColor roundButtonPressed;
QColor weekdayBox;
QColor text;
QColor shadow;
QColor lightDisplayKnobBorder;
QskGradient lightDisplayColdAndWarmArc;
QskGradient circularProgressBarGroove;
QRgb deviceGraphic;
};
Skin( const Palette& palette, QObject* parent = nullptr );