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

IOT example: Use shadows from the system

Browse Source 
... and not our own ones.

Resolves #201
This commit is contained in:
Peter Hartmann 2022-08-31 09:22:31 +02:00 committed by uwerat
parent bfab362bbb
commit 4216775891
10 changed files with 27 additions and 299 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
examples/iotdashboard/Box.cpp
View File

@ -8,9 +8,14 @@
#include <QskTextLabel.h> #include <QskTextLabel.h>
QSK_SUBCONTROL( Box, Panel )
Box::Box( const QString& title, QQuickItem* parent ) Box::Box( const QString& title, QQuickItem* parent )
: ShadowedBox( Qt::Vertical, parent ) : QskLinearBox( Qt::Vertical, parent )
{ {
setPanel( true );
setSubcontrolProxy( QskBox::Panel, Panel );
if ( !title.isEmpty() ) if ( !title.isEmpty() )
{ {
auto label = new QskTextLabel( title, this ); auto label = new QskTextLabel( title, this );

6
examples/iotdashboard/Box.h
View File

@ -5,12 +5,14 @@
#pragma once #pragma once
#include "ShadowedBox.h" #include <QskLinearBox.h>
class Box : public ShadowedBox class Box : public QskLinearBox
{ {
Q_OBJECT Q_OBJECT
public: public:
QSK_SUBCONTROLS( Panel )
Box( const QString& title, QQuickItem* parent = nullptr ); Box( const QString& title, QQuickItem* parent = nullptr );
}; };

172
examples/iotdashboard/ShadowedBox.cpp
View File

@ -1,172 +0,0 @@
/******************************************************************************
* QSkinny - Copyright (C) 2016 Uwe Rathmann
* This file may be used under the terms of the 3-clause BSD License
*****************************************************************************/
#include "ShadowedBox.h"
#include <QskBoxNode.h>
#include <QskBoxShadowNode.h>
#include <QskSGNode.h>
#include <QskBoxBorderMetrics.h>
#include <QskBoxBorderColors.h>
#include <QskGradient.h>
#include <QskSkinlet.h>
namespace
{
class Skinlet : public QskSkinlet
{
public:
enum NodeRole { ShadowRole, PanelRole };
Skinlet()
{
setOwnedBySkinnable( true );
setNodeRoles( { ShadowRole, PanelRole } );
}
QRectF subControlRect( const QskSkinnable*,
const QRectF& contentsRect, QskAspect::Subcontrol subControl ) const override
{
if ( subControl == ShadowedBox::Panel )
{
return contentsRect;
}
return QRectF();
}
QSGNode* updateSubNode( const QskSkinnable* skinnable,
quint8 nodeRole, QSGNode* node ) const override
{
const auto box = static_cast< const ShadowedBox* >( skinnable );
const auto r = box->subControlRect( ShadowedBox::Panel );
if ( r.isEmpty() )
return nullptr;
switch ( nodeRole )
{
case ShadowRole:
{
const auto& shadowMetrics = box->shadow();
auto shadowNode = QskSGNode::ensureNode< QskBoxShadowNode >( node );
shadowNode->setShadowData( shadowMetrics.shadowRect( r ),
box->shape(), shadowMetrics.blurRadius(), box->shadowColor() );
return shadowNode;
}
case PanelRole:
{
const auto r = box->subControlRect( ShadowedBox::Panel );
auto boxNode = QskSGNode::ensureNode< QskBoxNode >( node );
boxNode->setBoxData( r, box->shape(), box->borderWidth(),
box->borderColor(), box->gradient() );
return boxNode;
}
}
return nullptr;
}
};
}
QSK_SUBCONTROL( ShadowedBox, Panel )
ShadowedBox::ShadowedBox(Qt::Orientation orientation, QQuickItem* parentItem )
: QskLinearBox( orientation, parentItem )
{
setFlag( QQuickItem::ItemHasContents, true );
setSkinlet( new Skinlet() );
// ### move to Skin:
setGradient( Qt::white );
setShadow( { 0, 10 } );
setShadowColor( 0xe5e5e5 );
setShape( 6 );
}
ShadowedBox::~ShadowedBox()
{
}
void ShadowedBox::setShadow( const QskShadowMetrics& shadow )
{
m_shadow = shadow;
update();
}
const QskShadowMetrics& ShadowedBox::shadow() const
{
return m_shadow;
}
void ShadowedBox::setShadowColor( const QColor& color )
{
m_shadowColor = color;
update();
}
QColor ShadowedBox::shadowColor() const
{
return m_shadowColor;
}
QRectF ShadowedBox::layoutRectForSize( const QSizeF& size ) const
{
auto padding = paddingHint( Panel );
return { padding.left() / 2, padding.top() / 2,
size.width() - padding.right(), size.height() - padding.bottom() };
}
void ShadowedBox::setGradient( const QskGradient& gradient )
{
m_gradient = gradient;
update();
}
const QskGradient& ShadowedBox::gradient() const
{
return m_gradient;
}
void ShadowedBox::setShape( const QskBoxShapeMetrics& shape )
{
m_shape = shape;
update();
}
const QskBoxShapeMetrics& ShadowedBox::shape() const
{
return m_shape;
}
void ShadowedBox::setBorderWidth( qreal width )
{
m_borderWidth = qMax( width, 0.0 );
update();
}
qreal ShadowedBox::borderWidth() const
{
return m_borderWidth;
}
void ShadowedBox::setBorderColor( const QColor& color )
{
m_borderColor = color;
update();
}
QColor ShadowedBox::borderColor() const
{
return m_borderColor;
}
#include "moc_ShadowedBox.cpp"

53
examples/iotdashboard/ShadowedBox.h
View File

@ -1,53 +0,0 @@
/******************************************************************************
* QSkinny - Copyright (C) 2016 Uwe Rathmann
* This file may be used under the terms of the 3-clause BSD License
*****************************************************************************/
#pragma once
#include <QskLinearBox.h>
#include <QskBoxShapeMetrics.h>
#include <QskShadowMetrics.h>
class QskGradient;
class ShadowedBox : public QskLinearBox
{
Q_OBJECT
public:
QSK_SUBCONTROLS( Panel )
ShadowedBox( Qt::Orientation orientation, QQuickItem* parent = nullptr );
~ShadowedBox() override;
void setShadow( const QskShadowMetrics& );
const QskShadowMetrics& shadow() const;
void setGradient( const QskGradient& );
const QskGradient& gradient() const;
void setShadowColor( const QColor& );
QColor shadowColor() const;
QRectF layoutRectForSize( const QSizeF& size ) const override;
void setShape( const QskBoxShapeMetrics& );
const QskBoxShapeMetrics& shape() const;
void setBorderWidth( qreal width );
qreal borderWidth() const;
void setBorderColor( const QColor& );
QColor borderColor() const;
private:
QskShadowMetrics m_shadow;
QColor m_shadowColor = Qt::black;
QskGradient m_gradient;
QskBoxShapeMetrics m_shape;
qreal m_borderWidth = 0.0;
QColor m_borderColor = Qt::black;
};

20
examples/iotdashboard/Skin.cpp
View File

@ -16,10 +16,8 @@
#include "LightDisplaySkinlet.h" #include "LightDisplaySkinlet.h"
#include "DashboardPage.h" #include "DashboardPage.h"
#include "MenuBar.h" #include "MenuBar.h"
#include "PieChartPainted.h"
#include "RoundedIcon.h" #include "RoundedIcon.h"
#include "RoundButton.h" #include "RoundButton.h"
#include "ShadowedBox.h"
#include "TopBar.h" #include "TopBar.h"
#include "UsageBox.h" #include "UsageBox.h"
#include "UsageDiagram.h" #include "UsageDiagram.h"
@ -29,6 +27,7 @@
#include <QskBoxBorderMetrics.h> #include <QskBoxBorderMetrics.h>
#include <QskBoxBorderColors.h> #include <QskBoxBorderColors.h>
#include <QskFunctions.h> #include <QskFunctions.h>
#include <QskShadowMetrics.h>
#include <QskSkinHintTableEditor.h> #include <QskSkinHintTableEditor.h>
#include <QskTextLabel.h> #include <QskTextLabel.h>
@ -129,8 +128,8 @@ void Skin::initHints( const Palette& palette )
ed.setFontRole( TimeLabel::Text, QskSkin::HugeFont ); ed.setFontRole( TimeLabel::Text, QskSkin::HugeFont );
ed.setColor( TimeLabel::Text, "#6776FF" ); ed.setColor( TimeLabel::Text, "#6776FF" );
// boxes (including shadow): // boxes:
ed.setPadding( ShadowedBox::Panel, 15 ); ed.setPadding( Box::Panel, 8 );
// content in boxes (indoor temperature, humidity etc.): // content in boxes (indoor temperature, humidity etc.):
ed.setFontRole( UsageBox::Separator, QskSkin::SmallFont ); ed.setFontRole( UsageBox::Separator, QskSkin::SmallFont );
@ -220,9 +219,20 @@ void Skin::initHints( const Palette& palette )
// palette dependent skin hints: // palette dependent skin hints:
ed.setGradient( MenuBar::Panel, palette.menuBar ); ed.setGradient( MenuBar::Panel, palette.menuBar );
ed.setGradient( DashboardPage::Panel, palette.mainContent ); ed.setGradient( DashboardPage::Panel, palette.mainContent );
ed.setGradient( Box::Panel, palette.box );
ed.setColor( Box::Panel, palette.box.startColor() );
QskShadowMetrics shadowMetrics( 0, 10 );
ed.setShadowMetrics( Box::Panel, shadowMetrics );
ed.setShadowColor( Box::Panel, palette.shadow );
ed.setGradient( BoxWithButtons::Panel, palette.box ); ed.setGradient( BoxWithButtons::Panel, palette.box );
ed.setShadowMetrics( BoxWithButtons::Panel, shadowMetrics );
ed.setShadowColor( BoxWithButtons::Panel, palette.shadow );
ed.setGradient( UsageDiagramBox::Panel, palette.box ); ed.setGradient( UsageDiagramBox::Panel, palette.box );
ed.setShadowMetrics( UsageDiagramBox::Panel, shadowMetrics );
ed.setShadowColor( UsageDiagramBox::Panel, palette.shadow );
ed.setGradient( LightDisplay::Panel, palette.box ); ed.setGradient( LightDisplay::Panel, palette.box );
ed.setGradient( LightDisplay::Knob, palette.box ); ed.setGradient( LightDisplay::Knob, palette.box );
ed.setGradient( RoundButton::Panel, palette.roundButton ); ed.setGradient( RoundButton::Panel, palette.roundButton );

4
examples/iotdashboard/Skin.h
View File

@ -59,7 +59,7 @@ class DaytimeSkin : public Skin
DaytimeSkin( QObject* parent = nullptr ) DaytimeSkin( QObject* parent = nullptr )
: Skin( : Skin(
Skin::Palette( {"#6D7BFB"}, {"#fbfbfb"}, {"#ffffff"}, Skin::Palette( {"#6D7BFB"}, {"#fbfbfb"}, {"#ffffff"},
"#ffffff", {"#f7f7f7"}, {"#f4f4f4"}, Qt::black, Qt::black, "#ffffff", {"#f7f7f7"}, {"#f4f4f4"}, Qt::black, 0xffe5e5e5,
{ QskGradient::Vertical, { { 0.0, 0xffc4c4c4 }, { 0.5, 0xfff8f8f8 }, { 1.0, 0xffc4c4c4 } } } ) { QskGradient::Vertical, { { 0.0, 0xffc4c4c4 }, { 0.5, 0xfff8f8f8 }, { 1.0, 0xffc4c4c4 } } } )
, parent ) , parent )
{ {
@ -72,7 +72,7 @@ class NighttimeSkin : public Skin
NighttimeSkin( QObject* parent = nullptr ) NighttimeSkin( QObject* parent = nullptr )
: Skin( : Skin(
Skin::Palette( {"#2937A7"}, {"#040404"}, {"#000000"}, Skin::Palette( {"#2937A7"}, {"#040404"}, {"#000000"},
"#000000", {"#0a0a0a"}, {"#0c0c0c"}, Qt::white, Qt::white, "#000000", {"#0a0a0a"}, {"#0c0c0c"}, Qt::white, 0xff1a1a1a,
{ QskGradient::Vertical, { { 0.0, 0xff666666 }, { 0.5, 0xff222222 }, { 1.0, 0xff333333 } } } ) { QskGradient::Vertical, { { 0.0, 0xff666666 }, { 0.5, 0xff222222 }, { 1.0, 0xff333333 } } } )
, parent ) , parent )
{ {

2
examples/iotdashboard/iotdashboard.pro
View File

@ -23,7 +23,6 @@ SOURCES += \
PieChartSkinlet.cpp \ PieChartSkinlet.cpp \
RoomsPage.cpp \ RoomsPage.cpp \
RoundedIcon.cpp \ RoundedIcon.cpp \
ShadowedBox.cpp \
Skin.cpp \ Skin.cpp \
TopBar.cpp \ TopBar.cpp \
RoundButton.cpp \ RoundButton.cpp \
@ -58,7 +57,6 @@ HEADERS += \
PieChartSkinlet.h \ PieChartSkinlet.h \
RoomsPage.h \ RoomsPage.h \
RoundedIcon.h \ RoundedIcon.h \
ShadowedBox.h \
Skin.h \ Skin.h \
TopBar.h \ TopBar.h \
RoundButton.h \ RoundButton.h \

7
examples/iotdashboard/shaders.qrc
View File

@ -1,7 +0,0 @@
<!DOCTYPE RCC>
<RCC version="1.0">
<qresource prefix="/iotdashboard">
<file>shaders/boxshadow.vert</file>
<file>shaders/boxshadow.frag</file>
</qresource>
</RCC>

42
examples/iotdashboard/shaders/boxshadow.frag
View File

@ -1,42 +0,0 @@
uniform lowp float opacity;
uniform lowp float blurExtent;
uniform lowp vec4 radius;
uniform lowp vec4 color;
uniform lowp vec2 aspect;
varying lowp vec2 coord;
lowp float effectiveRadius( in lowp vec4 radii, in lowp vec2 point )
{
if ( point.x > 0.0 )
return ( point.y > 0.0) ? radii.x : radii.y;
else
return ( point.y > 0.0) ? radii.z : radii.w;
}
void main()
{
lowp vec4 col = vec4(0.0);
if ( opacity > 0.0 )
{
const lowp float minRadius = 0.05;
lowp float e2 = 0.5 * blurExtent;
lowp float r = 2.0 * effectiveRadius( radius, coord );
lowp float f = minRadius / max( r, minRadius );
r += e2 * f;
lowp vec2 d = r + blurExtent - aspect * ( 1.0 - abs( 2.0 * coord ) );
lowp float l = min( max(d.x, d.y), 0.0) + length( max(d, 0.0) );
lowp float shadow = l - r;
lowp float v = smoothstep( -e2, e2, shadow );
col = mix( color, vec4(0.0), v ) * opacity;
}
gl_FragColor = col;
}

13
examples/iotdashboard/shaders/boxshadow.vert
View File

@ -1,13 +0,0 @@
uniform highp mat4 matrix;
uniform lowp vec2 aspect;
attribute highp vec4 in_vertex;
attribute mediump vec2 in_coord;
varying mediump vec2 coord;
void main()
{
coord = in_coord;
gl_Position = matrix * in_vertex;
}