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

using QskGraphiclabel::panel

Browse Source
This commit is contained in:
Uwe Rathmann 2021-08-26 15:24:13 +02:00
parent 26710da0b3
commit 2951e25de6
7 changed files with 68 additions and 119 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
examples/iotdashboard/BoxWithButtons.cpp
View File

@ -44,9 +44,9 @@ BoxWithButtons::BoxWithButtons( const QString& title, const QString& value,
auto* layout = new QskLinearBox( Qt::Horizontal, this );
layout->setSpacing( 20 );
QString iconFile = title.toLower();
iconFile = iconFile.replace( ' ', '-' );
new RoundedIcon( iconFile, isBright, false, layout );
auto iconLabel = new RoundedIcon( isBright, layout );
iconLabel->setIcon( title );
iconLabel->setFixedSize( 68, 68 );
auto titleAndValue = new QskLinearBox( Qt::Vertical, layout );
titleAndValue->setPanel( true );
@ -58,5 +58,7 @@ BoxWithButtons::BoxWithButtons( const QString& title, const QString& value,
auto valueLabel = new QskTextLabel( value, titleAndValue );
valueLabel->setSubcontrolProxy( QskTextLabel::Text, ValueText );
layout->addStretch( 1 );
new UpAndDownBox( layout );
}

40
examples/iotdashboard/MyDevices.cpp
View File

@ -21,48 +21,18 @@ namespace
public:
Device( const QString& name, bool isBright, QQuickItem* parent )
: QskLinearBox( Qt::Vertical, parent )
, m_name( name )
{
setDefaultAlignment( Qt::AlignCenter );
setAutoAddChildren( false );
m_icon = new RoundedIcon( QString(), isBright, true, this );
m_icon->setSkinState( m_icon->skinState() | RoundedIcon::Small );
m_icon->setOpacity( 0.15 );
addItem( m_icon );
auto icon = new RoundedIcon( isBright, this );
icon->setPale( true );
icon->setIcon( name );
icon->setFixedSize( 68, 68 );
auto* textLabel = new QskTextLabel( name, this );
auto textLabel = new QskTextLabel( name, this );
textLabel->setFontRole( QskSkin::TinyFont );
textLabel->setAlignment( Qt::AlignHCenter );
addItem( textLabel );
auto fileName = name.toLower();
fileName.replace( ' ', '-' );
fileName = ":/images/" + fileName + ".png";
QImage image( fileName );
auto graphic = QskGraphic::fromImage( image );
m_graphicLabel = new QskGraphicLabel( graphic, this );
}
protected:
void updateLayout() override
{
QskLinearBox::updateLayout();
// We cannot use the icon from RoundedIcon here because
// it would inherit the transparency
const qreal size = metric( RoundedIcon::Icon | QskAspect::Size );
const qreal x = m_icon->x() + ( m_icon->width() - m_graphicLabel->width() ) / 2;
const qreal y = ( m_icon->y() + m_icon->height() - m_graphicLabel->height() ) / 2;
m_graphicLabel->setGeometry( x, y, size, size );
}
private:
QString m_name;
RoundedIcon* m_icon;
QskGraphicLabel* m_graphicLabel;
};
}

63
examples/iotdashboard/RoundedIcon.cpp
View File

@ -5,69 +5,42 @@
#include "RoundedIcon.h"
#include <QskBoxShapeMetrics.h>
#include <QskGraphic.h>
#include <QskGraphicLabel.h>
#include <QImage>
#include <QFile>
QSK_SUBCONTROL( RoundedIcon, Panel )
QSK_SUBCONTROL( RoundedIcon, Icon )
QSK_SUBCONTROL( RoundedIcon, PalePanel )
QSK_STATE( RoundedIcon, Bright, ( QskAspect::FirstUserState << 1 ) )
QSK_STATE( RoundedIcon, Small, ( QskAspect::FirstUserState << 2 ) )
RoundedIcon::RoundedIcon( const QString& iconName,
bool isBright, bool isSmall, QQuickItem* parent )
: QskBox( parent )
RoundedIcon::RoundedIcon( bool isBright, QQuickItem* parent )
: QskGraphicLabel( parent )
{
setPanel( true );
setPolishOnResize( true );
setSubcontrolProxy( QskBox::Panel, Panel );
if( isSmall )
{
setSkinState( skinState() | Small );
}
setSizePolicy( QskSizePolicy::Minimum, QskSizePolicy::Constrained );
const qreal size = metric( RoundedIcon::Panel | QskAspect::Size );
setFixedWidth( size );
setAlignment( Qt::AlignCenter );
setFillMode( QskGraphicLabel::Pad );
if( isBright )
{
setSkinState( Bright );
}
const QString fileName( ":/images/" + iconName + ".png" );
if( QFile::exists( fileName ) )
{
QImage image( fileName );
auto graphic = QskGraphic::fromImage( image );
m_graphicLabel = new QskGraphicLabel( graphic, this );
}
setPanel( true );
setPale( false );
}
void RoundedIcon::updateLayout()
void RoundedIcon::setPale( bool on )
{
if( m_graphicLabel )
{
const auto size = metric( Icon | QskAspect::Size );
QRectF r( 0.0, 0.0, size, size );
r.moveCenter( rect().center() );
m_graphicLabel->setGeometry( r );
}
setSubcontrolProxy( QskGraphicLabel::Panel, on ? PalePanel : Panel );
}
QSizeF RoundedIcon::contentsSizeHint( Qt::SizeHint /*which*/, const QSizeF& size ) const
void RoundedIcon::setIcon( const QString& iconName )
{
QSizeF ret = size;
ret.setHeight( size.width() );
// we should use a graphic provider, TODO ...
return ret;
QString fileName = ":/images/";
fileName += iconName.toLower().replace( ' ', '-' );
fileName += ".png";
const QImage image( fileName );
setGraphic( QskGraphic::fromImage( image ) );
}
#include "moc_RoundedIcon.cpp"

19
examples/iotdashboard/RoundedIcon.h
View File

@ -5,25 +5,20 @@
#pragma once
#include <QskBox.h>
#include <QskGraphicLabel.h>
class QskGraphicLabel;
class RoundedIcon : public QskBox
class RoundedIcon : public QskGraphicLabel
{
Q_OBJECT
public:
QSK_SUBCONTROLS( Panel, Icon )
QSK_STATES( Bright, Small ) // to differentiate between orange and purple and small vs. big
QSK_SUBCONTROLS( Panel, PalePanel )
QSK_STATES( Bright ) // to differentiate between orange and purple
RoundedIcon( const QString& iconName,
bool isBright, bool isSmall, QQuickItem* parent = nullptr );
RoundedIcon( bool isBright, QQuickItem* parent = nullptr );
protected:
void updateLayout() override;
QSizeF contentsSizeHint( Qt::SizeHint, const QSizeF& ) const override;
private:
QskGraphicLabel* m_graphicLabel = nullptr;
void setIcon( const QString& );
void setPale( bool );
};

35
examples/iotdashboard/Skin.cpp
View File

@ -127,7 +127,7 @@ void Skin::initHints( const Palette& palette )
ed.setPadding( Box::Panel, 15 );
ed.setMetric( ShadowPositioner::Panel | QskAspect::Size, 15 );
ed.setBoxShape( ShadowPositioner::Panel, {6, 6, 6, 6} );
ed.setBoxShape( ShadowPositioner::Panel, 6 );
// content in boxes (indoor temperature, humidity etc.):
@ -136,24 +136,35 @@ void Skin::initHints( const Palette& palette )
ed.setPadding( BoxWithButtons::Panel, 8 );
ed.setBoxShape( RoundedIcon::Panel, 6 );
ed.setVGradient( RoundedIcon::Panel | RoundedIcon::Bright, "#ff7d34", "#ff3122" );
ed.setVGradient( RoundedIcon::Panel, "#6776FF", "#6100FF" );
ed.setMetric( RoundedIcon::Panel | QskAspect::Size, 68 );
ed.setMetric( RoundedIcon::Panel | RoundedIcon::Small | QskAspect::Size, 60 );
ed.setMetric( RoundedIcon::Icon | QskAspect::Size, 36 );
for ( auto subControl : { RoundedIcon::Panel, RoundedIcon::PalePanel } )
{
ed.setBoxShape( subControl, 6 );
QskGradient normal( QskGradient::Vertical, "#6776FF", "#6100FF" );
QskGradient bright( QskGradient::Vertical, "#ff7d34", "#ff3122" );
if ( subControl == RoundedIcon::PalePanel )
{
const uint alpha = 38;
normal.setAlpha( alpha );
bright.setAlpha( alpha );
}
ed.setGradient( subControl, normal );
ed.setGradient( subControl | RoundedIcon::Bright, bright );
}
ed.setFontRole( BoxWithButtons::ValueText, QskSkin::HugeFont );
ed.setColor( BoxWithButtons::ValueText, "#929cb2" );
ed.setPadding( BoxWithButtons::ValuePanel, {0, 10, 0, 0} );
ed.setPadding( BoxWithButtons::ValuePanel, 0, 10, 0, 0 );
ed.setStrutSize( RoundButton::Panel, {27, 38} );
ed.setBoxShape( RoundButton::Panel, {0, 0, 30, 30} );
ed.setBoxShape( RoundButton::Panel | RoundButton::Top, {30, 30, 0, 0} );
ed.setStrutSize( RoundButton::Panel, 27, 38 );
ed.setBoxShape( RoundButton::Panel, 0, 0, 30, 30 );
ed.setBoxShape( RoundButton::Panel | RoundButton::Top, 30, 30, 0, 0 );
// diagram:
ed.setBoxBorderMetrics( UsageDiagramBox::DaysBox, {0, 0, 3, 3} );
ed.setBoxBorderMetrics( UsageDiagramBox::DaysBox, 0, 0, 3, 3 );
ed.setFontRole( UsageDiagramBox::DayText, QskSkin::TinyFont );
ed.setStrutSize( UsageDiagramLegend::Symbol, 8, 8 );

2
examples/iotdashboard/TopBar.cpp
View File

@ -84,7 +84,7 @@ TopBar::TopBar( QQuickItem* parent )
setPanel( true );
setSubcontrolProxy( QskBox::Panel, Panel );
setSizePolicy( QskSizePolicy::Preferred, QskSizePolicy::Fixed );
initSizePolicy( QskSizePolicy::Preferred, QskSizePolicy::Fixed );
const QStringList itemStrings = { "Living Room", "Bedroom", "Bathroom", "Kitchen" };
const int progressValues[] = {25, 45, 15, 86};

20
examples/iotdashboard/UsageBox.cpp
View File

@ -27,32 +27,30 @@ namespace
UsageBox::UsageBox( QQuickItem* parent )
: Box( "Usage", parent )
{
auto* content = new QskLinearBox( Qt::Vertical, this );
auto* today = new QskLinearBox( Qt::Horizontal, content );
auto* todayText = new QskTextLabel( "Usage today", today );
auto today = new QskLinearBox( Qt::Horizontal, this );
auto todayText = new QskTextLabel( "Usage today", today );
todayText->setFontRole( QskSkin::SmallFont );
new SeparatorLabel( today );
auto* todayValue = new QskTextLabel( "0,5 kwH", today );
auto todayValue = new QskTextLabel( "0,5 kwH", today );
todayValue->setFontRole( QskSkin::SmallFont );
auto* month = new QskLinearBox( Qt::Horizontal, content );
auto* monthText = new QskTextLabel( "Usage this month", month );
auto month = new QskLinearBox( Qt::Horizontal, this );
auto monthText = new QskTextLabel( "Usage this month", month );
monthText->setFontRole( QskSkin::SmallFont );
new SeparatorLabel( month );
auto* monthValue = new QskTextLabel( "66 kwH", month );
auto monthValue = new QskTextLabel( "66 kwH", month );
monthValue->setFontRole( QskSkin::SmallFont );
auto* total = new QskLinearBox( Qt::Horizontal, content );
auto* totalText = new QskTextLabel( "Total working hours", total );
auto total = new QskLinearBox( Qt::Horizontal, this );
auto totalText = new QskTextLabel( "Total working hours", total );
totalText->setFontRole( QskSkin::SmallFont );
new SeparatorLabel( total );
auto* totalValue = new QskTextLabel( "125 hrs", total );
auto totalValue = new QskTextLabel( "125 hrs", total );
totalValue->setFontRole( QskSkin::SmallFont );
}