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

add night time skin

This commit is contained in:
Peter Hartmann 2020-09-23 17:45:06 +02:00
parent e360c16be3
commit 2a3913ef06
19 changed files with 309 additions and 102 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
examples/iot-dashboard/Box.cpp
View File

@ -8,6 +8,8 @@
#include <QskBoxShapeMetrics.h>
#include <QskTextLabel.h>
QSK_SUBCONTROL( Box, Panel )
ShadowBox::ShadowBox( QQuickItem* parent )
: QskControl( parent )
// , m_control( control )
@ -73,3 +75,13 @@ Box::Box( const QString& title, QQuickItem* parent )
m_label->setVisible( false );
}
}
QskAspect::Subcontrol Box::effectiveSubcontrol( QskAspect::Subcontrol subControl ) const
{
if( subControl == QskBox::Panel )
{
return Box::Panel;
}
return subControl;
}

6
examples/iot-dashboard/Box.h
View File

@ -23,9 +23,15 @@ class ShadowBox : public QskControl
class Box : public QskLinearBox
{
Q_OBJECT
public:
QSK_SUBCONTROLS( Panel )
Box( const QString& title, QQuickItem* parent );
QskAspect::Subcontrol effectiveSubcontrol(
QskAspect::Subcontrol subControl ) const override final;
private:
QString m_title;
QskTextLabel* m_label;

44
examples/iot-dashboard/CircularProgressBar.cpp
View File

@ -2,38 +2,38 @@
#include <QPainter>
CircularProgressBar::CircularProgressBar(const QGradient &gradient, int progress, QQuickItem *parent)
: QQuickPaintedItem(parent)
, m_gradient(gradient)
, m_progress(progress)
CircularProgressBar::CircularProgressBar( const QGradient& gradient, int progress, QQuickItem* parent )
: QQuickPaintedItem( parent )
, m_gradient( gradient )
, m_progress( progress )
{
}
void CircularProgressBar::paint(QPainter *painter)
void CircularProgressBar::paint( QPainter* painter )
{
auto size = contentsSize();
QRectF outerRect({0, 0}, size);
QRectF outerRect( {0, 0}, size );
painter->setRenderHint(QPainter::Antialiasing, true);
painter->setRenderHint( QPainter::Antialiasing, true );
QRadialGradient gradient(size.width() / 2, size.height() / 2, 45);
QGradientStop stop1(0.0, "#c0c0c0");
QGradientStop stop2(0.5, "#f0f0f0");
QGradientStop stop3(1.0, "#c0c0c0");
gradient.setStops({stop1, stop2, stop3});
QRadialGradient gradient( size.width() / 2, size.height() / 2, 45 );
QGradientStop stop1( 0.0, "#c0c0c0" );
QGradientStop stop2( 0.5, "#f0f0f0" );
QGradientStop stop3( 1.0, "#c0c0c0" );
gradient.setStops( {stop1, stop2, stop3} );
painter->setBrush(gradient);
painter->setPen(Qt::white);
painter->drawEllipse(outerRect);
painter->setBrush( gradient );
painter->setPen( m_backgroundColor );
painter->drawEllipse( outerRect );
int startAngle = 1440;
int endAngle = -16 * (m_progress / 100.0) * 360;
int endAngle = -16 * ( m_progress / 100.0 ) * 360;
painter->setBrush(m_gradient);
painter->drawPie(outerRect, startAngle, endAngle);
painter->setBrush( m_gradient );
painter->drawPie( outerRect, startAngle, endAngle );
painter->setBrush(Qt::white);
painter->setPen(Qt::white);
QRectF innerRect(width() / 2, width() / 2, size.width() - width(), size.height() - width());
painter->drawEllipse(innerRect);
painter->setBrush( m_backgroundColor );
painter->setPen( m_backgroundColor );
QRectF innerRect( width() / 2, width() / 2, size.width() - width(), size.height() - width() );
painter->drawEllipse( innerRect );
}

36
examples/iot-dashboard/CircularProgressBar.h
View File

@ -6,23 +6,33 @@
class CircularProgressBar : public QQuickPaintedItem
{
public:
CircularProgressBar(const QGradient& gradient, int progress, QQuickItem* parent = nullptr);
public:
CircularProgressBar( const QGradient& gradient, int progress, QQuickItem* parent = nullptr );
virtual void paint(QPainter *painter) override;
virtual void paint( QPainter* painter ) override;
double width() const {
return m_width;
}
double width() const
{
return m_width;
}
void setWidth(double width) {
m_width = width;
}
void setWidth( double width )
{
m_width = width;
}
private:
QGradient m_gradient;
double m_width = 20;
int m_progress;
void setBackgroundColor( const QColor& color )
{
m_backgroundColor = color;
}
private:
QGradient m_gradient;
QColor m_backgroundColor;
double m_width = 20;
int m_progress;
};
#endif // CIRCULARPROGRESSBAR_H

17
examples/iot-dashboard/DaytimeSkin.cpp
View File

@ -1,10 +1,12 @@
#include "DaytimeSkin.h"
#include "Box.h"
#include "LightIntensity.h"
#include "MainContent.h"
#include "MenuBar.h"
#include "QskShadowedRectangle.h"
#include "QskShadowedRectangleSkinlet.h"
#include "PieChart.h"
#include "PieChartSkinlet.h"
#include "PieChartPainted.h"
#include <QskBoxBorderMetrics.h>
#include <QskBoxBorderColors.h>
@ -32,7 +34,6 @@ namespace
DaytimeSkin::DaytimeSkin( QObject* parent ) : QskSkin( parent )
{
declareSkinlet< QskShadowedRectangle, QskShadowedRectangleSkinlet >();
declareSkinlet< PieChart, PieChartSkinlet >();
initHints();
}
@ -50,11 +51,13 @@ void DaytimeSkin::initHints()
setFont( DaytimeSkin::TitleFont, qskFont( 10, true ) );
setGradient( MainContent::Panel, {"#fbfbfb"} );
setGradient( Box::Panel, {"#ffffff"} );
setColor( LightDisplay::Panel, "#ffffff" );
setColor( PieChartPainted::Panel, "#ffffff" );
QColor color( Qt::white );
color.setAlphaF( 0.09 );
setGradient( MenuItem::Panel | QskControl::Hovered, color );
setBoxBorderMetrics( PieChart::Panel, 2 );
setGradient( PieChart::Panel, Qt::blue );
setBoxBorderColors( PieChart::Panel, Qt::green );
}

16
examples/iot-dashboard/DaytimeSkin.h
View File

@ -5,16 +5,16 @@
class DaytimeSkin : public QskSkin
{
public:
DaytimeSkin( QObject* parent = nullptr );
public:
DaytimeSkin( QObject* parent = nullptr );
enum SkinFontRole {
TitleFont = QskSkin::HugeFont + 1,
};
private:
void initHints();
enum SkinFontRole
{
TitleFont = QskSkin::HugeFont + 1,
};
private:
void initHints();
};
#endif // DAYTIMESKIN_H

1
examples/iot-dashboard/Humidity.cpp
View File

@ -13,6 +13,7 @@
Humidity::Humidity( QQuickItem* parent )
: Box( "", parent )
{
setPanel( true );
setMarginsHint( Panel | QskAspect::Padding, 8 );
setSizePolicy( Qt::Vertical, QskSizePolicy::Maximum );

1
examples/iot-dashboard/IndoorTemperature.cpp
View File

@ -13,6 +13,7 @@
IndoorTemperature::IndoorTemperature( QQuickItem* parent )
: Box( "", parent )
{
setPanel( true );
setMarginsHint( Panel | QskAspect::Padding, 8 );
setSizePolicy( Qt::Vertical, QskSizePolicy::Maximum );

31
examples/iot-dashboard/LightIntensity.cpp
View File

@ -1,11 +1,14 @@
#include "LightIntensity.h"
#include "DaytimeSkin.h"
#include <QskSetup.h>
#include <QskTextLabel.h>
#include <QPainter>
#include <QRadialGradient>
QSK_SUBCONTROL( LightDisplay, Panel )
LightDimmer::LightDimmer( QQuickItem* parent )
: QQuickPaintedItem( parent )
{
@ -28,7 +31,8 @@ void LightDimmer::paint( QPainter* painter )
gradient.setStops( {stop1, stop2, stop3} );
painter->setBrush( gradient );
painter->setPen( Qt::white );
painter->setPen( m_backgroundColor );
painter->drawEllipse( outerRect );
int startAngle = 16 * 180;
@ -48,12 +52,12 @@ void LightDimmer::paint( QPainter* painter )
painter->setBrush( redGradient );
painter->drawPie( outerRect, 16 * 90, endAngle );
painter->setBrush( Qt::white );
painter->setPen( Qt::white );
painter->setBrush( m_backgroundColor );
painter->setPen( m_backgroundColor );
QRectF innerRect( thickness() / 2, thickness() / 2 + offset, size.width() - thickness(), size.height() - thickness() );
painter->drawEllipse( innerRect );
painter->setBrush( Qt::white );
painter->setBrush( m_backgroundColor );
painter->setPen( "#c4c4c4" );
QRectF knobRect( ( contentsSize().width() - knobDiameter ) / 2, 1, knobDiameter, knobDiameter );
painter->drawEllipse( knobRect );
@ -75,6 +79,25 @@ LightDisplay::LightDisplay( QQuickItem* parent )
m_rightLabel->setZ( 1 );
setAutoLayoutChildren( true );
const QColor c = color( Panel );
m_dimmer->setBackgroundColor( c );
connect( qskSetup, &QskSetup::skinChanged, [this]()
{
const QColor c = color( Panel );
m_dimmer->setBackgroundColor( c );
} );
}
QskAspect::Subcontrol LightDisplay::effectiveSubcontrol( QskAspect::Subcontrol subControl ) const
{
if( subControl == QskBox::Panel )
{
return LightDisplay::Panel;
}
return subControl;
}
void LightDisplay::updateLayout()

11
examples/iot-dashboard/LightIntensity.h
View File

@ -24,8 +24,14 @@ class LightDimmer: public QQuickPaintedItem
m_thickness = thickness;
}
void setBackgroundColor( const QColor& color )
{
m_backgroundColor = color;
}
private:
double m_thickness = 17.57;
QColor m_backgroundColor;
virtual void paint( QPainter* painter ) override;
};
@ -35,8 +41,13 @@ class LightDisplay : public QskControl
Q_OBJECT
public:
QSK_SUBCONTROLS( Panel )
LightDisplay( QQuickItem* parent );
QskAspect::Subcontrol effectiveSubcontrol(
QskAspect::Subcontrol subControl ) const override final;
protected:
void updateLayout() override;

14
examples/iot-dashboard/MainContent.cpp
View File

@ -20,6 +20,8 @@
#include <QTimer>
QSK_SUBCONTROL( MainContent, Panel )
ShadowPositioner::ShadowPositioner( QQuickItem* parent ) : QskControl( parent )
{
setAutoLayoutChildren( true );
@ -67,7 +69,7 @@ MainContent::MainContent( QQuickItem* parent ) : QskLinearBox( Qt::Vertical, par
setSizePolicy( QskSizePolicy::Expanding, QskSizePolicy::Expanding );
setDefaultAlignment( Qt::AlignTop );
setSpacing( 24 );
setBackgroundColor( "#FBFBFB" );
setPanel( true );
auto* topBar = new TopBar( this );
addItem( topBar );
@ -103,6 +105,16 @@ MainContent::MainContent( QQuickItem* parent ) : QskLinearBox( Qt::Vertical, par
m_shadowPositioner->setGridBox( gridBox );
}
QskAspect::Subcontrol MainContent::effectiveSubcontrol( QskAspect::Subcontrol subControl ) const
{
if( subControl == QskBox::Panel )
{
return MainContent::Panel;
}
return subControl;
}
void MainContent::geometryChanged( const QRectF& newGeometry, const QRectF& oldGeometry )
{
QskLinearBox::geometryChanged( newGeometry, oldGeometry );

5
examples/iot-dashboard/MainContent.h
View File

@ -26,8 +26,13 @@ class MainContent : public QskLinearBox
Q_OBJECT
public:
QSK_SUBCONTROLS( Panel )
MainContent( QQuickItem* parent );
QskAspect::Subcontrol effectiveSubcontrol(
QskAspect::Subcontrol subControl ) const override final;
protected:
void geometryChanged( const QRectF&, const QRectF& ) override;

63
examples/iot-dashboard/NighttimeSkin.cpp Normal file
View File

@ -0,0 +1,63 @@
#include "NighttimeSkin.h"
#include "Box.h"
#include "LightIntensity.h"
#include "MainContent.h"
#include "MenuBar.h"
#include "QskShadowedRectangle.h"
#include "QskShadowedRectangleSkinlet.h"
#include "PieChartPainted.h"
#include <QskBoxBorderMetrics.h>
#include <QskBoxBorderColors.h>
#include <QskFunctions.h>
#include <QFontDatabase>
namespace
{
static inline QFont qskFont( qreal pointSize, bool semiBold = false )
{
QFont font( "Proxima Nova" );
if( semiBold )
{
font.setWeight( QFont::Bold );
}
font.setPointSizeF( pointSize /*/ qskDpiScaled( 1.0 )*/ );
return font;
}
}
NighttimeSkin::NighttimeSkin( QObject* parent ) : QskSkin( parent )
{
declareSkinlet< QskShadowedRectangle, QskShadowedRectangleSkinlet >();
initHints();
}
void NighttimeSkin::initHints()
{
QFontDatabase db;
db.addApplicationFont( ":/fonts/ProximaNova-Regular.otf" ); // ### use fontconfig
setFont( QskSkin::DefaultFont, qskFont( 12 ) );
setFont( QskSkin::TinyFont, qskFont( 9 ) );
setFont( QskSkin::SmallFont, qskFont( 10 ) );
setFont( QskSkin::MediumFont, qskFont( 13 ) );
setFont( QskSkin::LargeFont, qskFont( 20 ) );
setFont( QskSkin::HugeFont, qskFont( 27, true ) );
setFont( NighttimeSkin::TitleFont, qskFont( 10, true ) );
setGradient( MainContent::Panel, {"#040404"} );
setGradient( Box::Panel, {"#000000"} );
setColor( LightDisplay::Panel, "#000000" );
setColor( PieChartPainted::Panel, "#000000" );
QColor color( Qt::white );
color.setAlphaF( 0.09 );
setGradient( MenuItem::Panel | QskControl::Hovered, Qt::yellow ); // ### nicer color
}

20
examples/iot-dashboard/NighttimeSkin.h Normal file
View File

@ -0,0 +1,20 @@
#ifndef NIGHTTIMESKIN_H
#define NIGHTTIMESKIN_H
#include <QskSkin.h>
class NighttimeSkin : public QskSkin
{
public:
NighttimeSkin( QObject* parent = nullptr );
enum SkinFontRole
{
TitleFont = QskSkin::HugeFont + 1,
};
private:
void initHints();
};
#endif // NIGHTTIMESKIN_H

57
examples/iot-dashboard/PieChartPainted.cpp
View File

@ -1,43 +1,66 @@
#include "PieChartPainted.h"
#include <QskBox.h>
#include <QskSetup.h>
#include <QskSkin.h>
#include <QskTextLabel.h>
#include <QFontMetricsF>
#include <QQuickPaintedItem>
PieChartPainted::PieChartPainted(const QColor& color, const QGradient& gradient, int progress, int value, QQuickItem *parent)
: QskControl(parent)
, m_color(color)
, m_gradient(gradient)
, m_progressBar(new CircularProgressBar(gradient, progress, this))
, m_progressLabel(new QskTextLabel(this))
QSK_SUBCONTROL( PieChartPainted, Panel )
PieChartPainted::PieChartPainted( const QColor& color, const QGradient& gradient, int progress, int value, QQuickItem* parent )
: QskControl( parent )
, m_color( color )
, m_gradient( gradient )
, m_progressBar( new CircularProgressBar( gradient, progress, this ) )
, m_progressLabel( new QskTextLabel( this ) )
// , m_numberLabel(new QskTextLabel(QString::number(value), this))
// , m_unitLabel(new QskTextLabel("kwH", this))
{
setAutoLayoutChildren(true);
setAutoLayoutChildren( true );
auto progressText = QString::number(progress) + " %";
m_progressLabel->setText(progressText);
m_progressLabel->setFontRole(QskSkin::SmallFont);
m_progressLabel->setTextColor(color);
auto progressText = QString::number( progress ) + " %";
m_progressLabel->setText( progressText );
m_progressLabel->setFontRole( QskSkin::SmallFont );
m_progressLabel->setTextColor( color );
const QColor c = this->color( Panel );
m_progressBar->setBackgroundColor( c );
connect( qskSetup, &QskSetup::skinChanged, [this]()
{
const QColor c = this->color( Panel );
m_progressBar->setBackgroundColor( c );
} );
}
QSizeF PieChartPainted::contentsSizeHint(Qt::SizeHint /*sizeHint*/, const QSizeF& /*size*/) const
QskAspect::Subcontrol PieChartPainted::effectiveSubcontrol( QskAspect::Subcontrol subControl ) const
{
if( subControl == QskBox::Panel )
{
return PieChartPainted::Panel;
}
return subControl;
}
QSizeF PieChartPainted::contentsSizeHint( Qt::SizeHint /*sizeHint*/, const QSizeF& /*size*/ ) const
{
return {57, 57};
}
void PieChartPainted::updateLayout()
{
m_progressBar->setContentsSize(size().toSize());
m_progressBar->setContentsSize( size().toSize() );
m_progressBar->update();
auto rect = contentsRect();
QFontMetricsF progressMetrics(m_progressLabel->effectiveFont(QskTextLabel::Text));
auto textWidth = progressMetrics.width(m_progressLabel->text());
QFontMetricsF progressMetrics( m_progressLabel->effectiveFont( QskTextLabel::Text ) );
auto textWidth = progressMetrics.width( m_progressLabel->text() );
auto posX = rect.width() / 2 - textWidth / 2;
auto posY = rect.height() / 2 - progressMetrics.height() / 2;
m_progressLabel->setPosition({posX, posY});
m_progressLabel->setFixedWidth(textWidth);
m_progressLabel->setPosition( {posX, posY} );
m_progressLabel->setFixedWidth( textWidth );
}

23
examples/iot-dashboard/PieChartPainted.h
View File

@ -10,17 +10,22 @@ class QQuickPaintedItem;
class PieChartPainted : public QskControl
{
public:
PieChartPainted(const QColor& color, const QGradient& gradient, int progress, int value, QQuickItem* parent = nullptr);
public:
QSK_SUBCONTROLS( Panel )
virtual QSizeF contentsSizeHint( Qt::SizeHint, const QSizeF& ) const override;
void updateLayout() override;
PieChartPainted( const QColor& color, const QGradient& gradient, int progress, int value, QQuickItem* parent = nullptr );
private:
QColor m_color;
QGradient m_gradient;
CircularProgressBar* m_progressBar;
QskTextLabel* m_progressLabel;
QskAspect::Subcontrol effectiveSubcontrol(
QskAspect::Subcontrol subControl ) const override final;
virtual QSizeF contentsSizeHint( Qt::SizeHint, const QSizeF& ) const override;
void updateLayout() override;
private:
QColor m_color;
QGradient m_gradient;
CircularProgressBar* m_progressBar;
QskTextLabel* m_progressLabel;
// QskTextLabel* m_numberLabel;
// QskTextLabel* m_unitLabel;
};

1
examples/iot-dashboard/Usage.cpp
View File

@ -6,7 +6,6 @@
Usage::Usage( QQuickItem* parent )
: Box( "Usage", parent )
{
setBackgroundColor( Qt::transparent );
auto* content = new QskLinearBox( Qt::Vertical, this );
auto* today = new QskLinearBox( Qt::Horizontal, content );

2
examples/iot-dashboard/iot-dashboard.pro
View File

@ -11,6 +11,7 @@ SOURCES += \
MainContent.cpp \
MenuBar.cpp \
MyDevices.cpp \
NighttimeSkin.cpp \
PieChart.cpp \
PieChartPainted.cpp \
PieChartSkinlet.cpp \
@ -34,6 +35,7 @@ HEADERS += \
MainWindow.h \
MenuBar.h \
MyDevices.h \
NighttimeSkin.h \
PieChart.h \
PieChartPainted.h \
PieChartSkinlet.h \

51
examples/iot-dashboard/main.cpp
View File

@ -1,6 +1,7 @@
#include "MainWindow.h"
#include "DaytimeSkin.h"
#include "NighttimeSkin.h"
#include <SkinnyFont.h>
#include <SkinnyShortcut.h>
@ -16,29 +17,36 @@
#include <QGuiApplication>
namespace {
namespace
{
class SkinFactory : public QskSkinFactory
{
Q_OBJECT
Q_OBJECT
public:
SkinFactory( QObject* parent = nullptr ) : QskSkinFactory( parent )
{
}
QStringList skinNames() const override
{
return { "DaytimeSkin" };
}
QskSkin* createSkin( const QString& skinName ) override
{
if( skinName == "DaytimeSkin" )
public:
SkinFactory( QObject* parent = nullptr ) : QskSkinFactory( parent )
{
return new DaytimeSkin;
}
return nullptr;
}
QStringList skinNames() const override
{
return { "DaytimeSkin", "NighttimeSkin" };
}
QskSkin* createSkin( const QString& skinName ) override
{
if( skinName == "DaytimeSkin" )
{
return new DaytimeSkin;
}
if( skinName == "NighttimeSkin" )
{
return new NighttimeSkin;
}
return nullptr;
}
};
}
@ -51,6 +59,9 @@ int main( int argc, char* argv[] )
SkinFactory skinFactory;
qskSkinManager->setPluginPaths( QStringList() ); // no plugins
qskSkinManager->unregisterFactory( "materialfactory" );
qskSkinManager->unregisterFactory( "squiekfactory" );
qskSkinManager->registerFactory(
QStringLiteral( "SampleSkinFactory" ), &skinFactory );
@ -58,13 +69,13 @@ int main( int argc, char* argv[] )
// false, skinFactory, SLOT(toggleScheme()) );
// QskShortcutMap::addShortcut( QKeySequence( Qt::CTRL + Qt::Key_S ),
// false, skinFactory, SLOT(rotateSkin()) );
// true, &skinFactory, SLOT( rotateSkin() ) );
qskSetup->setSkin( "DaytimeSkin" );
// With CTRL-B you can rotate a couple of visual debug modes
SkinnyShortcut::enable( SkinnyShortcut::DebugBackground |
SkinnyShortcut::DebugStatistics | SkinnyShortcut::Quit );
SkinnyShortcut::enable( SkinnyShortcut::RotateSkin | SkinnyShortcut::DebugBackground |
SkinnyShortcut::DebugStatistics | SkinnyShortcut::Quit );
MainWindow window;
window.show();