diff options
author | Sami Nurmenniemi <sami.nurmenniemi@qt.io> | 2017-10-24 17:02:43 +0300 |
---|---|---|
committer | Sami Nurmenniemi <sami.nurmenniemi@qt.io> | 2017-11-22 10:43:19 +0000 |
commit | c48368aa9db97c5ae28fa91d31f15cc1d52f8f10 (patch) | |
tree | b50a56ef846080a8fda1c6178cea112f424cd904 | |
parent | 87f8ec0b9fb1619f2f064c6d5ba59e39e2c45ba0 (diff) |
Match application loader animation to UI specs
Also simplify circularindicator to match what's needed in the demo.
Task-number: QTBUG-60089
Change-Id: Ia8136e59c48c43d27f701e715abdfa5806041b3f
Reviewed-by: Kari Oikarinen <kari.oikarinen@qt.io>
-rw-r--r-- | qml/BootScreen.qml | 9 | ||||
-rw-r--r-- | qml/BusyIndicator.qml | 63 | ||||
-rw-r--r-- | qml/ViewSettings.qml | 1 | ||||
-rw-r--r-- | src/circularindicator.cpp | 159 | ||||
-rw-r--r-- | src/circularindicator.h | 31 |
5 files changed, 92 insertions, 171 deletions
diff --git a/qml/BootScreen.qml b/qml/BootScreen.qml index 4d4615d..cab6838 100644 --- a/qml/BootScreen.qml +++ b/qml/BootScreen.qml @@ -35,7 +35,6 @@ Rectangle { Column { anchors.centerIn: parent - spacing: viewSettings.pageMargin BusyIndicator { anchors.horizontalCenter: parent.horizontalCenter @@ -44,16 +43,18 @@ Rectangle { Text { anchors.horizontalCenter: parent.horizontalCenter + font.family: viewSettings.appFont font.pixelSize: bootScreen.height * 0.05 color: "white" - text: "Loading" + text: qsTr("Loading") } Text { anchors.horizontalCenter: parent.horizontalCenter - font.pixelSize: bootScreen.height * 0.06 + font.family: viewSettings.appFont + font.pixelSize: bootScreen.height * 0.05 + font.styleName: "Bold" color: "white" text: engine.applicationName - font.bold: true } } } diff --git a/qml/BusyIndicator.qml b/qml/BusyIndicator.qml index d3d75d1..f2c9d80 100644 --- a/qml/BusyIndicator.qml +++ b/qml/BusyIndicator.qml @@ -31,44 +31,53 @@ import Circle 1.0 CircularIndicator { id: circularIndicator - //anchors.fill: parent height: width - startAngle: 0 //speedometer.minValueAngle - endAngle: 360 //speedometer.maxValueAngle - minimumValue: 0 - maximumValue: 360//speedometer.maximumValue - value: 180//speedometer.value padding: 23 backgroundColor: viewSettings.loaderBackgroundColor progressColor: viewSettings.loaderForegroundColor - lineWidth: width * 0.1 - SequentialAnimation { running: true - loops: Animation.Infinite - NumberAnimation { - target: circularIndicator - property: "value" - from: 0 - to: 360 - duration: 1000 - } + + // Fill 1/5 of the circle before starting looping NumberAnimation { target: circularIndicator - property: "startAngle" + property: "endAngle" from: 0 - to: 360 - duration: 1000 + to: 72 + duration: 200 } - ScriptAction { - script: circularIndicator.startAngle = 0 + + SequentialAnimation { + loops: Animation.Infinite + + // Fill rest of the circle + NumberAnimation { + target: circularIndicator + property: "endAngle" + from: 72 + to: 360 + duration: 800 + } + + // Fill 1/5 of the circle and clear previous fill + ParallelAnimation { + NumberAnimation { + target: circularIndicator + property: "startAngle" + from: -360 + to: 0 + duration: 200 + onStopped: circularIndicator.startAngle = 0 + } + NumberAnimation { + target: circularIndicator + property: "endAngle" + from: 360 + to: 72 + duration: 200 + } + } } } - RotationAnimator on rotation{ - loops: Animation.Infinite - duration: 5000 - from: 0 - to: 360 - } } diff --git a/qml/ViewSettings.qml b/qml/ViewSettings.qml index 53af6b5..3798e68 100644 --- a/qml/ViewSettings.qml +++ b/qml/ViewSettings.qml @@ -33,6 +33,7 @@ Item { property real pageMargin: 0.03 * Math.min(window.width, window.height) property real headerHeight: 3 * pageMargin + property real spacing: pageMargin * 0.5 property real demoHeaderHeight: 2.5 * pageMargin property string appFont: "TitilliumWeb" property int stateDelay: 200; diff --git a/src/circularindicator.cpp b/src/circularindicator.cpp index a3ec477..d923b68 100644 --- a/src/circularindicator.cpp +++ b/src/circularindicator.cpp @@ -30,15 +30,12 @@ CircularIndicator::CircularIndicator(QQuickItem *parent) : QQuickPaintedItem(parent) - , mStartAngle(0) - , mEndAngle(360) - , mMinimumValue(0.0) - , mMaximumValue(360.0) - , mValue(0.0) - , mLineWidth(10) - , mProgressColor(QColor(255, 0, 0)) - , mBackgroundColor(QColor(240, 240, 240)) - , mPadding(1) + , m_startAngle(0) + , m_endAngle(360) + , m_lineWidth(10) + , m_progressColor(QColor(255, 0, 0)) + , m_backgroundColor(QColor(240, 240, 240)) + , m_padding(1) { } @@ -48,156 +45,91 @@ CircularIndicator::~CircularIndicator() int CircularIndicator::startAngle() const { - return mStartAngle; + return m_startAngle; } void CircularIndicator::setStartAngle(int angle) { - if (angle == mStartAngle) + if (angle == m_startAngle) return; - mStartAngle = angle; - emit startAngleChanged(mStartAngle); + m_startAngle = angle; + emit startAngleChanged(m_startAngle); update(); } int CircularIndicator::endAngle() const { - return mEndAngle; + return m_endAngle; } void CircularIndicator::setEndAngle(int angle) { - if (angle == mEndAngle) + if (angle == m_endAngle) return; - mEndAngle = angle; - emit endAngleChanged(mEndAngle); - update(); -} - -qreal CircularIndicator::minimumValue() const -{ - return mMinimumValue; -} - -void CircularIndicator::setMinimumValue(qreal value) -{ - if (qFuzzyCompare(value, mMinimumValue)) - return; - - if (value > mMaximumValue) { - qWarning() << this << "\nMinimum value can't exceed maximum value."; - return; - } - - mMinimumValue = value; - emit minimumValueChanged(mMinimumValue); - update(); -} - -qreal CircularIndicator::maximumValue() const -{ - return mMaximumValue; -} - -void CircularIndicator::setMaximumValue(qreal value) -{ - if (qFuzzyCompare(value, mMaximumValue)) - return; - - if (value < mMinimumValue) { - qWarning() << this << "\nMaximum value can't be less than minimum value."; - return; - } - - mMaximumValue = value; - emit maximumValueChanged(value); - update(); -} - -qreal CircularIndicator::value() const -{ - return mValue; -} - -void CircularIndicator::setValue(qreal value) -{ - if (qFuzzyCompare(value, mValue)) - return; - - if (value < mMinimumValue) { - qWarning() << this << "\nValue can't be less than minimum value."; - return; - } - - if (value > mMaximumValue) { - qWarning() << this << "\nValue can't exceed maximum value."; - return; - } - - mValue = value; - emit valueChanged(mValue); + m_endAngle = angle; + emit endAngleChanged(m_endAngle); update(); } int CircularIndicator::lineWidth() const { - return mLineWidth; + return m_lineWidth; } void CircularIndicator::setLineWidth(int width) { - if (width == mLineWidth) + if (width == m_lineWidth) return; - mLineWidth = width; - emit lineWidthChanged(mLineWidth); + m_lineWidth = width; + emit lineWidthChanged(m_lineWidth); update(); } QColor CircularIndicator::progressColor() const { - return mProgressColor; + return m_progressColor; } -void CircularIndicator::setProgressColor(QColor color) +void CircularIndicator::setProgressColor(const QColor &color) { - if (color == mProgressColor) + if (color == m_progressColor) return; - mProgressColor = color; - emit progressColorChanged(mProgressColor); + m_progressColor = color; + emit progressColorChanged(m_progressColor); update(); } QColor CircularIndicator::backgroundColor() const { - return mBackgroundColor; + return m_backgroundColor; } -void CircularIndicator::setBackgroundColor(QColor color) +void CircularIndicator::setBackgroundColor(const QColor &color) { - if (color == mBackgroundColor) + if (color == m_backgroundColor) return; - mBackgroundColor = color; - emit backgroundColorChanged(mBackgroundColor); + m_backgroundColor = color; + emit backgroundColorChanged(m_backgroundColor); update(); } int CircularIndicator::padding() const { - return mPadding; + return m_padding; } void CircularIndicator::setPadding(int padding) { - if (padding == mPadding) + if (padding == m_padding) return; - mPadding = padding; - emit paddingChanged(mPadding); + m_padding = padding; + emit paddingChanged(m_padding); update(); } @@ -205,7 +137,7 @@ void CircularIndicator::paint(QPainter *painter) { painter->setRenderHint(QPainter::Antialiasing); - int indicatorSize = qMin(width(), height()) - mPadding * 2 - mLineWidth; + const int indicatorSize = qMin(width(), height()) - m_padding * 2 - m_lineWidth; if (indicatorSize <= 0) return; @@ -216,26 +148,19 @@ void CircularIndicator::paint(QPainter *painter) indicatorSize); QPen pen; - pen.setCapStyle(Qt::FlatCap); - pen.setWidth(mLineWidth); - pen.setColor(mBackgroundColor); - painter->setPen(pen); - - int endAngle = (qAbs(mEndAngle) > 360) ? mEndAngle % 360 : mEndAngle; - - // See http://doc.qt.io/qt-5/qpainter.html#drawArc for details - int minimumAngle = (90 - mStartAngle) * 16; - int maximumAngle = (90 - endAngle) * 16 - minimumAngle; + pen.setCapStyle(Qt::RoundCap); + pen.setWidth(m_lineWidth); + // Draw the background + pen.setColor(m_backgroundColor); + painter->setPen(pen); painter->drawArc(indicatorRect, 0, 360 * 16); - if (qFuzzyCompare(mValue, mMinimumValue)) + if (m_startAngle == m_endAngle) return; - pen.setColor(mProgressColor); + // Draw the foreground + pen.setColor(m_progressColor); painter->setPen(pen); - - int currentAngle = ((mValue - mMinimumValue) / (mMaximumValue - mMinimumValue)) * maximumAngle; - - painter->drawArc(indicatorRect, minimumAngle, currentAngle); + painter->drawArc(indicatorRect, (90 - m_startAngle) * 16, -m_endAngle * 16); } diff --git a/src/circularindicator.h b/src/circularindicator.h index f9adcdc..9131317 100644 --- a/src/circularindicator.h +++ b/src/circularindicator.h @@ -37,9 +37,6 @@ class CircularIndicator : public QQuickPaintedItem Q_OBJECT Q_PROPERTY(int startAngle READ startAngle WRITE setStartAngle NOTIFY startAngleChanged) Q_PROPERTY(int endAngle READ endAngle WRITE setEndAngle NOTIFY endAngleChanged) - Q_PROPERTY(qreal minimumValue READ minimumValue WRITE setMinimumValue NOTIFY minimumValueChanged) - Q_PROPERTY(qreal maximumValue READ maximumValue WRITE setMaximumValue NOTIFY maximumValueChanged) - Q_PROPERTY(qreal value READ value WRITE setValue NOTIFY valueChanged) Q_PROPERTY(int lineWidth READ lineWidth WRITE setLineWidth NOTIFY lineWidthChanged) Q_PROPERTY(QColor progressColor READ progressColor WRITE setProgressColor NOTIFY progressColorChanged) Q_PROPERTY(QColor backgroundColor READ backgroundColor WRITE setBackgroundColor NOTIFY backgroundColorChanged) @@ -51,9 +48,6 @@ public: int startAngle() const; int endAngle() const; - qreal minimumValue() const; - qreal maximumValue() const; - qreal value() const; int lineWidth() const; QColor progressColor() const; QColor backgroundColor() const; @@ -62,20 +56,14 @@ public: public slots: void setStartAngle(int angle); void setEndAngle(int angle); - void setMinimumValue(qreal value); - void setMaximumValue(qreal value); - void setValue(qreal value); void setLineWidth(int width); - void setProgressColor(QColor color); - void setBackgroundColor(QColor color); + void setProgressColor(const QColor &color); + void setBackgroundColor(const QColor &color); void setPadding(int padding); signals: void startAngleChanged(int); void endAngleChanged(int); - void minimumValueChanged(qreal); - void maximumValueChanged(qreal); - void valueChanged(qreal); void lineWidthChanged(int); void progressColorChanged(QColor); void backgroundColorChanged(QColor); @@ -85,15 +73,12 @@ protected: void paint(QPainter *painter); private: - int mStartAngle; - int mEndAngle; - qreal mMinimumValue; - qreal mMaximumValue; - qreal mValue; - int mLineWidth; - QColor mProgressColor; - QColor mBackgroundColor; - int mPadding; + int m_startAngle; + int m_endAngle; + int m_lineWidth; + QColor m_progressColor; + QColor m_backgroundColor; + int m_padding; }; #endif // CIRCULARINDICATOR_H |