![Peter Hartmann](/assets/img/avatar_default.png)
* Add IOT dashboard example * Add images * more content * add pie chart * Add skin factories etc. * more work on the pie chart * Try to use quick shapes * Revert "Try to use quick shapes" This reverts commit df6b5b22a339173d2a70ed85744b598811c26b30. Doesn't work that easily unfortunately. * implement design * Add fonts; for now as a resource We should use fontconfig of course later * improve menu bar * implement top bar * use QNanoPainter for circular graphs * Revert "use QNanoPainter for circular graphs" This reverts commit ba0263cb1c19462cc41063ec7087c95e176c8293. Try with QQuickPaintedItem instead for now. * use painted items for circular bar graphs (for now) * use different colors * use some gradients all of this is very hackish still * add to top bar * fix fonts and time display * implement usage * implement indoor temperature * implement Humidity * implement My Devices * fix opacity issue with devices * make icons quadratic with some quick fixes as usual * Add diagram * try to smooth out curves * Add diagram caption * use tiny font * make caption smaller * add wekdays * add grid lines * fix my devices * add light intensity * add box around each section * rename Card to Box * Put indoor temperature inside a box * put Humidity in a box * put the rest in a box * some small stuff * add kirigami code * something works somehow * maybe we don't need our own class still some work to do, but the main thing works * add shadow from outside ... because the class is not a QskControl * fine-tune the layout * cross compilation: Make sure examples find libraries at link time * fix compilation for embedded target * add night time skin * add new button class to better style it * more hints for the night time skin * change hints for dimmer * change hints for progress bars * Use animator for light dimmer * use animator for progress bars * Add Kirigami code It was on oversight that this was forgotten earlier. We could of course strip this down a lot to the part that we are actually using (i.e. the shadowed rectangle). * fix build with new QSkinny version * fix paddings, something in the API changed * fix stretch factors * fix build with new version * clang tidy fixes * fix unused parameter warnings should clean this up properly * beautify example * use astyle * style menu bar properly * fix warning * more size hints * refactor skins * more skin hints * graphic label skin hints * menu item states instead of own API * main grid box styling * top bar styling * fix build * style round progress bars * style time * style indoor temperature and humidity * simplify temperature and humidity * style some more * style My Devices section * style My Devices some more * fix styles when switching between them * style diagram * style more elements inside diagram * more diagram style * fix skin changes * style light intensity * Fix Humidity * fix light intensity layout and other stuff * style light intensity * style button value label * style round button * style button boxes some more * style menu bar top label * style menu bar icons * remove ShadowBox, it is not used * style shadow boxes * remove QskShadowedRectangle We are not using it * style usage spacer * fine tune * Refactor diagram before replacing it * Add Diagram drawn with OpenGL * use new Diagram class * Support more than one data point in a diagram * change data points and colors a bit * position caption box * adapt the spline to show nice curves * remove boost::math dependency We just hardcode the values here so we can get rid of the dependency. * Remove kirigami code that we don't need We only need the shadow * move kirigami code * rename header guards * add license headers * rename some classes
217 lines
8.0 KiB
C++
217 lines
8.0 KiB
C++
/****************************************************************************
|
|
**
|
|
** Copyright 2021 Edelhirsch Software GmbH. All rights reserved.
|
|
**
|
|
** Redistribution and use in source and binary forms, with or without
|
|
** modification, are permitted provided that the following conditions are
|
|
** met:
|
|
**
|
|
** * Redistributions of source code must retain the above copyright
|
|
** notice, this list of conditions and the following disclaimer.
|
|
** * Redistributions in binary form must reproduce the above copyright
|
|
** notice, this list of conditions and the following disclaimer in
|
|
** the documentation and/or other materials provided with the
|
|
** distribution.
|
|
** * Neither the name of the copyright holder nor the names of its
|
|
** contributors may be used to endorse or promote products derived
|
|
** from this software without specific prior written permission.
|
|
**
|
|
** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
|
|
** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
|
|
** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
|
|
** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
|
|
** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
|
|
** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
|
|
** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
|
|
** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
|
|
** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
|
|
** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
|
|
** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
|
|
**
|
|
****************************************************************************/
|
|
|
|
#include "Skin.h"
|
|
|
|
#include "Box.h"
|
|
#include "BoxWithButtons.h"
|
|
#include "Diagram.h"
|
|
#include "DiagramSkinlet.h"
|
|
#include "LightIntensity.h"
|
|
#include "MainContent.h"
|
|
#include "MenuBar.h"
|
|
#include "PieChartPainted.h"
|
|
#include "TopBar.h"
|
|
#include "UpAndDownButton.h"
|
|
#include "Usage.h"
|
|
#include "UsageDiagram.h"
|
|
|
|
#include <QskBoxBorderMetrics.h>
|
|
#include <QskBoxBorderColors.h>
|
|
#include <QskFunctions.h>
|
|
#include <QskSkinHintTableEditor.h>
|
|
#include <QskTextLabel.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;
|
|
}
|
|
|
|
}
|
|
|
|
Skin::Skin( const Palette& palette, QObject* parent ) : QskSkin( parent )
|
|
{
|
|
declareSkinlet< Diagram, DiagramSkinlet >();
|
|
|
|
initHints( palette );
|
|
}
|
|
|
|
Skin::~Skin()
|
|
{
|
|
}
|
|
|
|
void Skin::initHints( const Palette& palette )
|
|
{
|
|
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( Skin::TitleFont, qskFont( 10, true ) );
|
|
|
|
QskSkinHintTableEditor ed( &hintTable() );
|
|
|
|
ed.setPadding( MainContentGridBox::Panel, {19, 0, 27, 24} );
|
|
|
|
|
|
// menu bar:
|
|
ed.setPadding( MenuBar::Panel, {0, 35, 0, 12} );
|
|
|
|
ed.setStrutSize( MenuItem::Panel | QskAspect::Size, {140, 40} );
|
|
ed.setPadding( MenuItem::Panel, {30, 0, 30, 0} );
|
|
QColor color( Qt::white );
|
|
color.setAlphaF( 0.09 );
|
|
ed.setGradient( MenuItem::Panel | QskControl::Hovered, color );
|
|
color.setAlphaF( 0.14 );
|
|
ed.setGradient( MenuItem::Panel | MenuItem::Active, color );
|
|
|
|
ed.setColor( MenuBarLabel::Text, Qt::white );
|
|
ed.setFontRole( MenuBarLabel::Text, QskSkin::SmallFont );
|
|
|
|
ed.setMargin( MenuBarTopLabel::Graphic, { 50, 0, 50, 54 } );
|
|
|
|
ed.setMetric( MenuBarGraphicLabel::Graphic | QskAspect::Size, 14 );
|
|
ed.setAlignment( MenuBarGraphicLabel::Graphic, Qt::AlignCenter );
|
|
|
|
|
|
// top bar:
|
|
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.setFontRole( TimeTitleLabel::Text, Skin::TitleFont );
|
|
|
|
ed.setFontRole( TimeLabel::Text, QskSkin::HugeFont );
|
|
ed.setColor( TimeLabel::Text, "#6776FF" );
|
|
|
|
|
|
// boxes (including shadow):
|
|
ed.setPadding( Box::Panel, 15 );
|
|
|
|
ed.setMetric( ShadowPositioner::Panel | QskAspect::Size, 15 );
|
|
ed.setBoxShape( ShadowPositioner::Panel, {6, 6, 6, 6} );
|
|
|
|
|
|
// content in boxes (indoor temperature, humidity etc.):
|
|
ed.setFontRole( UsageSpacer::Text, QskSkin::SmallFont );
|
|
ed.setColor( UsageSpacer::Text, "#dddddd" );
|
|
|
|
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 );
|
|
|
|
ed.setFontRole( ButtonValueLabel::Text, QskSkin::HugeFont );
|
|
ed.setColor( ButtonValueLabel::Text, "#929cb2" );
|
|
|
|
ed.setPadding( TitleAndValueBox::Panel, {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} );
|
|
|
|
|
|
// diagram:
|
|
ed.setBoxBorderMetrics( WeekdayBox::Panel, {0, 0, 3, 3} );
|
|
|
|
ed.setMetric( CaptionColorBox::Panel | QskAspect::Size, 8 );
|
|
ed.setBoxShape( CaptionColorBox::Panel | QskAspect::Size, 4 );
|
|
ed.setGradient( CaptionColorBox::Panel | CaptionItem::Water, {"#6776ff"} );
|
|
ed.setGradient( CaptionColorBox::Panel | CaptionItem::Electricity, {"#ff3122"} );
|
|
ed.setGradient( CaptionColorBox::Panel | CaptionItem::Gas, {"#ff7d34"} );
|
|
|
|
ed.setPadding( UsageDiagram::Panel, 0 );
|
|
|
|
ed.setFontRole( WeekdayLabel::Text, QskSkin::TinyFont );
|
|
ed.setPadding( WeekdayLabel::Panel, {0, 5, 0, 10} );
|
|
ed.setAlignment( WeekdayLabel::Text, Qt::AlignCenter );
|
|
|
|
ed.setPadding( CaptionBox::Panel, {10, 10, 20, 0} );
|
|
|
|
|
|
// new diagram:
|
|
ed.setColor( Diagram::ChartArea1, "#666776ff" );
|
|
ed.setColor( Diagram::ChartArea2, "#66ff3122" );
|
|
ed.setColor( Diagram::ChartArea3, "#66ff7d34" );
|
|
|
|
|
|
// light intensity:
|
|
ed.setGradient( LightDisplay::ColdPart, { Qt::Horizontal, "#a7b0ff", "#6776ff" } );
|
|
ed.setGradient( LightDisplay::WarmPart, { Qt::Horizontal, "#feeeb7", "#ff3122" } );
|
|
ed.setFontRole( LightIntensityValueLabel::Text, QskSkin::LargeFont );
|
|
ed.setColor( LightIntensityValueLabel::Text, "#929cb2" );
|
|
|
|
|
|
// palette dependent skin hints:
|
|
ed.setGradient( MenuBar::Panel, palette.menuBar );
|
|
ed.setGradient( MainContent::Panel, palette.mainContent );
|
|
ed.setGradient( Box::Panel, palette.box );
|
|
ed.setGradient( BoxWithButtons::Panel, palette.box );
|
|
ed.setGradient( UsageDiagram::Panel, palette.box );
|
|
ed.setColor( LightDisplay::Panel, palette.lightDisplay );
|
|
ed.setColor( PieChartPainted::Panel, palette.pieChart );
|
|
ed.setGradient( RoundButton::Panel, palette.roundButton );
|
|
ed.setBoxBorderColors( WeekdayBox::Panel, palette.weekdayBox );
|
|
ed.setColor( QskTextLabel::Text, palette.text );
|
|
ed.setColor( WeekdayLabel::Text, palette.text );
|
|
ed.setColor( ShadowPositioner::Panel, palette.shadow );
|
|
}
|