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

style round progress bars

This commit is contained in:
Peter Hartmann 2021-03-31 10:25:50 +02:00
parent 2dfc071398
commit 639b5583c8
7 changed files with 76 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -2,11 +2,18 @@
#include <QPainter>
CircularProgressBar::CircularProgressBar( const QGradient& gradient, int progress, QQuickItem* parent )
CircularProgressBar::CircularProgressBar( const QskGradient& gradient, int progress, QQuickItem* parent )
: QQuickPaintedItem( parent )
, m_gradient( gradient )
, m_progress( progress )
{
// This is a bit hackish, but let's do this properly
// once QSkinny has an arch renderer in place
QLinearGradient g( 0, 0, 30, 0 );
QGradientStop stop1( 0.0, gradient.colorAt( 0 ) );
QGradientStop stop2( 1.0, gradient.colorAt( 1 ) );
g.setStops( {stop1, stop2} );
m_gradient = g;
connect( this, &QQuickPaintedItem::contentsSizeChanged, [this]()
{
auto size = contentsSize();

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

@ -1,13 +1,15 @@
#ifndef CIRCULARPROGRESSBAR_H
#define CIRCULARPROGRESSBAR_H
#include <QskGradient.h>
#include <QGradient>
#include <QQuickPaintedItem>
class CircularProgressBar : public QQuickPaintedItem
{
public:
CircularProgressBar( const QGradient& gradient, int progress, QQuickItem* parent = nullptr );
CircularProgressBar( const QskGradient& gradient, int progress, QQuickItem* parent = nullptr );
virtual void paint( QPainter* painter ) override;

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

@ -73,7 +73,7 @@ class ProgressBarAnimator : public QskAnimator
CircularProgressBar* m_progressBar;
};
PieChartPainted::PieChartPainted( const QColor& color, const QGradient& gradient, int progress, int /*value*/, QQuickItem* parent )
PieChartPainted::PieChartPainted( const QColor& color, const QskGradient& gradient, int progress, int /*value*/, QQuickItem* parent )
: QskControl( parent )
, m_color( color )
, m_gradient( gradient )

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

@ -15,7 +15,7 @@ class PieChartPainted : public QskControl
public:
QSK_SUBCONTROLS( Panel )
PieChartPainted( const QColor& color, const QGradient& gradient, int progress, int value, QQuickItem* parent = nullptr );
PieChartPainted( const QColor& color, const QskGradient& gradient, int progress, int value, QQuickItem* parent = nullptr );
QskAspect::Subcontrol effectiveSubcontrol(
QskAspect::Subcontrol subControl ) const override final;
@ -25,7 +25,7 @@ class PieChartPainted : public QskControl
private:
QColor m_color;
QGradient m_gradient;
QskGradient m_gradient;
CircularProgressBar* m_progressBar;
QskTextLabel* m_progressLabel;
ProgressBarAnimator* m_animator;

13
examples/iot-dashboard/Skin.cpp
View File

@ -76,12 +76,23 @@ void Skin::initHints( const Palette& palette )
ed.setPadding( TopBar::Panel, {25, 35, 25, 0} );
ed.setColor( TopBarItem::Item1 | QskAspect::TextColor, "#ff3122" );
ed.setColor( TopBarItem::Item2 | QskAspect::TextColor, "#6776ff" );
ed.setColor( TopBarItem::Item3 | QskAspect::TextColor, "#f99055" );
ed.setColor( TopBarItem::Item4 | QskAspect::TextColor, "#6776ff" );
ed.setGradient( TopBarItem::Item1, { Qt::Horizontal, "#FF5C00", "#FF3122" } );
ed.setGradient( TopBarItem::Item2, { Qt::Horizontal, "#6776FF", "#6100FF" } );
ed.setGradient( TopBarItem::Item3, { Qt::Horizontal, "#FFCE50", "#FF3122" } );
ed.setGradient( TopBarItem::Item4, { Qt::Horizontal, "#6776FF", "#6100FF" } );
ed.setColor( MenuBarLabel::Text, Qt::white );
ed.setFontRole( MenuBarLabel::Text, QskSkin::SmallFont );
ed.setAlignment( MenuBarGraphicLabel::Graphic, Qt::AlignCenter );
// palette dependent skin hints:
ed.setGradient( MenuBar::Panel, palette.menuBar );
ed.setGradient( MainContent::Panel, palette.mainContent );
ed.setGradient( Box::Panel, palette.box );

50
examples/iot-dashboard/TopBar.cpp
View File

@ -6,9 +6,35 @@
#include <QTime>
QSK_SUBCONTROL( TopBarItem, Item1 )
QSK_SUBCONTROL( TopBarItem, Item2 )
QSK_SUBCONTROL( TopBarItem, Item3 )
QSK_SUBCONTROL( TopBarItem, Item4 )
QSK_SUBCONTROL( TopBar, Panel )
TopBarItem::TopBarItem( const QString& name, const QColor& textColor, const QGradient& gradient, int progress, int value, QQuickItem* parent ) : QskLinearBox( Qt::Vertical, parent ),
namespace
{
QskAspect::Subcontrol subcontrolForIndex( int index )
{
switch( index )
{
case 0:
return TopBarItem::Item1;
case 1:
return TopBarItem::Item2;
case 2:
return TopBarItem::Item3;
default:
return TopBarItem::Item4;
}
}
}
TopBarItem::TopBarItem( int index, const QString& name, const QskGradient& gradient, int progress, int value, QQuickItem* parent ) : QskLinearBox( Qt::Vertical, parent ),
m_name( name )
{
setAutoLayoutChildren( true );
@ -16,10 +42,13 @@ TopBarItem::TopBarItem( const QString& name, const QColor& textColor, const QGra
setSpacing( 15 );
auto* textLabel = new QskTextLabel( name, this );
textLabel->setFontRole( QskSkin::SmallFont ); // ### style
textLabel->setFontRole( QskSkin::SmallFont );
auto* pieChartAndDisplay = new QskLinearBox( Qt::Horizontal, this );
pieChartAndDisplay->setSpacing( 10 );
QskAspect::Subcontrol subcontrol = subcontrolForIndex( index );
QColor textColor = color( subcontrol | QskAspect::TextColor );
/*auto* pieChart =*/ new PieChartPainted( textColor, gradient, progress, value, pieChartAndDisplay );
auto* display = new QskLinearBox( Qt::Vertical, pieChartAndDisplay );
display->setSpacing( 0 );
@ -40,25 +69,16 @@ TopBar::TopBar( QQuickItem* parent ) : QskLinearBox( Qt::Horizontal, parent )
setSizePolicy( QskSizePolicy::Preferred, QskSizePolicy::Fixed );
QStringList itemStrings = { "Living Room", "Bedroom", "Bathroom", "Kitchen" };
QColor textColors[] = {"#ff3122", "#6776ff", "#f99055", "#6776ff"};
QColor gradientColors[] = {"#FF5C00", "#FF3122",
"#6776FF", "#6100FF",
"#FFCE50", "#FF3122",
// "#00ff00", "#ffffff", // ### remove
"#6776FF", "#6100FF"
};
int progressValues[] = {25, 45, 15, 86};
int values[] = {175, 205, 115, 289};
for( int a = 0; a < itemStrings.count(); a++ )
for( int i = 0; i < itemStrings.count(); i++ )
{
QLinearGradient gradient( 0, 0, 30, 0 ); // ### do this properly and dependent on the size
QGradientStop stop1( 0.0, gradientColors[2 * a] );
QGradientStop stop2( 1.0, gradientColors[2 * a + 1] );
gradient.setStops( {stop1, stop2} );
QskAspect::Subcontrol subcontrol = subcontrolForIndex( i );
QskGradient gradient = gradientHint( subcontrol );
auto* item = new TopBarItem( itemStrings.at( a ), textColors[a], gradient, progressValues[a], values[a], this );
auto* item = new TopBarItem( i, itemStrings.at( i ), gradient, progressValues[i], values[i], this );
m_entries.append( item );
}

15
examples/iot-dashboard/TopBar.h
View File

@ -8,7 +8,20 @@ class TopBarItem : public QskLinearBox
Q_OBJECT
public:
TopBarItem( const QString& name, const QColor& textColor, const QGradient& gradient, int progress, int value, QQuickItem* parent );
QSK_SUBCONTROLS( Item1, Item2, Item3, Item4 )
TopBarItem( int index, const QString& name, const QskGradient& gradient, int progress, int value, QQuickItem* parent );
QskAspect::Subcontrol effectiveSubcontrol(
QskAspect::Subcontrol subControl ) const override final
{
if( subControl == QskLinearBox::Panel )
{
return Panel;
}
return subControl;
}
private:
QString m_name;