qml: Add connection animation to block clock

Author: jarolrod

src/qml/components/BlockClock.qml

@@ -30,6 +30,7 @@ Item {
         timeRatioList: chainModel.timeRatioList
         verificationProgress: nodeModel.verificationProgress
         paused: root.paused
+        connected: root.connected
         synced: nodeModel.verificationProgress > 0.999
         backgroundColor: Theme.color.neutral2
         timeTickColor: Theme.color.neutral5

src/qml/components/blockclockdial.cpp

@@ -4,8 +4,10 @@
 
 #include <qml/components/blockclockdial.h>
 
+#include <QBrush>
 #include <QColor>
 #include <QPainterPath>
+#include <QConicalGradient>
 #include <QPen>
 #include <QtMath>
 
@@ -18,6 +20,26 @@ BlockClockDial::BlockClockDial(QQuickItem *parent)
 {
 }
 
+void BlockClockDial::setupConnectingGradient(const QPen & pen) 
+{
+    m_connecting_gradient.setCenter(getBoundsForPen(pen).center());
+    m_connecting_gradient.setAngle(m_connecting_start_angle);
+    m_connecting_gradient.setColorAt(0, m_confirmation_colors[5]);
+    m_connecting_gradient.setColorAt(0.5, m_confirmation_colors[5]);
+    m_connecting_gradient.setColorAt(0.6, m_confirmation_colors[4]);
+    m_connecting_gradient.setColorAt(0.7, m_confirmation_colors[3]);
+    m_connecting_gradient.setColorAt(1, m_background_color);
+}
+
+qreal BlockClockDial::decrementGradientAngle(qreal angle)
+{
+    if (angle == -360) {
+        return 0;
+    } else {
+        return angle -= 4;
+    }
+}
+
 void BlockClockDial::setTimeRatioList(QVariantList new_list)
 {
     m_time_ratio_list = new_list;
@@ -30,6 +52,12 @@ void BlockClockDial::setVerificationProgress(double progress)
     update();
 }
 
+void BlockClockDial::setConnected(bool connected)
+{
+    m_is_connected = connected;
+    update();
+}
+
 void BlockClockDial::setSynced(bool synced)
 {
     m_is_synced = synced;
@@ -139,6 +167,20 @@ void BlockClockDial::paintProgress(QPainter * painter)
     painter->drawArc(bounds, startAngle * 16, spanAngle * 16);
 }
 
+void BlockClockDial::paintConnectingAnimation(QPainter * painter)
+{
+    QPen pen;
+    pen.setWidthF(4);
+    setupConnectingGradient(pen);
+    pen.setBrush(QBrush(m_connecting_gradient));
+    pen.setCapStyle(Qt::RoundCap);
+    const QRectF bounds = getBoundsForPen(pen);
+    painter->setPen(pen);
+    painter->drawArc(bounds, m_connecting_start_angle * 16, m_connecting_end_angle * 16);
+    m_connecting_start_angle = decrementGradientAngle(m_connecting_start_angle);
+    update();
+}
+
 void BlockClockDial::paintBackground(QPainter * painter)
 {
     QPen pen(m_background_color);
@@ -186,6 +228,11 @@ void BlockClockDial::paint(QPainter * painter)
 
     if (paused()) return;
 
+    if (!(connected())) {
+        paintConnectingAnimation(painter);
+        return;
+    }
+
     if (synced()) {
         paintBlocks(painter);
     } else {

src/qml/components/blockclockdial.h

@@ -6,13 +6,15 @@
 #define BITCOIN_QML_COMPONENTS_BLOCKCLOCKDIAL_H
 
 #include <QQuickPaintedItem>
+#include <QConicalGradient>
 #include <QPainter>
 
 class BlockClockDial : public QQuickPaintedItem
 {
     Q_OBJECT
     Q_PROPERTY(QVariantList timeRatioList READ timeRatioList WRITE setTimeRatioList)
     Q_PROPERTY(double verificationProgress READ verificationProgress WRITE setVerificationProgress)
+    Q_PROPERTY(bool connected READ connected WRITE setConnected)
     Q_PROPERTY(bool synced READ synced WRITE setSynced)
     Q_PROPERTY(bool paused READ paused WRITE setPaused)
     Q_PROPERTY(QColor backgroundColor READ backgroundColor WRITE setBackgroundColor)
@@ -25,6 +27,7 @@ class BlockClockDial : public QQuickPaintedItem
 
     QVariantList timeRatioList() const { return m_time_ratio_list; };
     double verificationProgress() const { return m_verification_progress; };
+    bool connected() const { return m_is_connected; };
     bool synced() const { return m_is_synced; };
     bool paused() const { return m_is_paused; };
     QColor backgroundColor() const { return m_background_color; };
@@ -34,25 +37,33 @@ class BlockClockDial : public QQuickPaintedItem
 public Q_SLOTS:
     void setTimeRatioList(QVariantList new_time);
     void setVerificationProgress(double progress);
+    void setConnected(bool connected);
     void setSynced(bool synced);
     void setPaused(bool paused);
     void setBackgroundColor(QColor color);
     void setConfirmationColors(QList<QColor> colorList);
     void setTimeTickColor(QColor color);
 
 private:
+    void paintConnectingAnimation(QPainter * painter);
     void paintProgress(QPainter * painter);
     void paintBlocks(QPainter * painter);
     void paintBackground(QPainter * painter);
     void paintTimeTicks(QPainter * painter);
     QRectF getBoundsForPen(const QPen & pen);
     double degreesPerPixel();
+    void setupConnectingGradient(const QPen & pen);
+    qreal decrementGradientAngle(qreal angle);
 
     QVariantList m_time_ratio_list;
     double m_verification_progress;
+    bool m_is_connected;
     bool m_is_synced;
     bool m_is_paused;
     QColor m_background_color;
+    QConicalGradient m_connecting_gradient;
+    qreal m_connecting_start_angle = 90;
+    const qreal m_connecting_end_angle = -180;
     QList<QColor> m_confirmation_colors;
     QColor m_time_tick_color;
 };