The Block Clock #220

johnny9 · 2023-01-19T23:19:28Z

This is a continuation of #148. The goal of this PR is to get the working features from #148 merged in using a QQuickPainterItem implementation of the dial instead of the javascript canvas. Connection state as well as the animating icon will be implemented in a later PR. Refactoring and clean up from the removal of the Canvas code still remains.

- This method would allow to get the blocktime value of the block at the given height.

johnny9 · 2023-01-19T23:27:31Z

Update from 90469cb to e9b5dd:

Replace tabs with spaces

johnny9 · 2023-01-19T23:54:08Z

Update branch from e9b5ddd to 96e47f8:

Fix painting of last block. index 0 of timeRatioList is actually the current time.

johnny9 · 2023-01-20T01:26:04Z

Update from 96e47f8 to 63792bf:

Fix Makefile includes

johnny9 · 2023-01-20T02:42:42Z

Update branch from 37b6257 to 8515fdf:

Added comment for calculating the "gap" between painted blocks.

johnny9 · 2023-01-20T13:53:32Z

I noticed that these changes require the QtGraphicalEffects module (qml-module-graphicaleffects ubuntu package). I'll likely have to update the depends to include that module or change how the icon is forced into a specific color. Looking for an opinion one way or the other.

src/qml/chainmodel.cpp

jarolrod

concept ack

jarolrod

Let's squash some of the history to have a clean commit record, but also I'm seeing some slight misalignment with the design file.

Below, the more visible layer is the design file, and below that is this PR on signet (hence diff block heights). Looks like the block height, the words "Blocktime" and peers indicator should be a bit higher up. Also fine with leaving this fixup for a follow-up!

johnny9 · 2023-01-27T23:09:24Z

Update branch from 8ecfae6 to 76a504e:

Squashed all BlockClock control commits into one

johnny9 · 2023-01-28T15:57:19Z

Update branch from 76a504e to 2e5a0d8:

Adjusted alignment of labels to better match the figma spec

johnny9 · 2023-01-28T16:25:09Z

Update. Remove a missed trailing whitespace

johnny9 · 2023-01-28T18:11:10Z

Update from 3fd696d to 33eb4af:

Fixed potential initialization error in ChainModel, possible root cause of an issue Jarol discovered with the dial not lining up with 12 o'clock.

Additional properties to Header will allow configuring Header's description color and bold values as well as Header's header-text bold value. Co-authored-by: shaavan <[email protected]>

The properties will allow the gui to show an estimate for the time remaining before the node is synced. Co-authored-by: shaavan <[email protected]>

The ChainModel is responsible for managing the block information that the gui components need to show. In this case, the ChainModel will provide a list of ratios for the block times of the last 12 hours to be rendered on the block clock's dial. Co-authored-by: shaavan <[email protected]>

Implements a few of the BlockClock dial states. Sync progress while downloading, rendering blocks after sync, and pausing/unpausing the node. An additional Model is added, ChainModel, to provide the dial block information. Changes to NodeModel are also made to support the pausing/unpausing Dial feature. Co-authored-by: shaavan <[email protected]>

johnny9 · 2023-01-29T02:12:30Z

Update branch to 6701ad2:

Fixed code style issue in blockclock.cpp/.h
Moved BlockClock.qml to components
Split BlockClock commit up to clarify history

jarolrod

ACK 6701ad2

This works, with improvements to be made in follow-ups

jarolrod · 2023-01-29T02:41:36Z

src/qml/components/blockclockdial.cpp

+    const QRectF bounds = getBoundsForPen(pen);
+    painter->setPen(pen);
+
+    QColor confirmationColors[] = {


in a follow-up all of these colors should be defined in our theme.qml, because the colors would actually be slightly different when on dark or light mode. We'll circle back with @GBKS about these values.

jarolrod · 2023-01-29T04:53:23Z

src/qml/components/BlockClock.qml

+
+    states: [
+        State {
+            name: "intialBlockDownload"; when: !synced && !paused && conns


I'd prefer all caps short names for states. in the codebase like, can be changed afterwards

"IBD"

"BLOCKCLOCK"

"PAUSED"

"CONNECTING"

jarolrod · 2023-01-29T05:07:21Z

src/qml/components/blockclockdial.cpp

+    // Paint blocks
+    for (int i = 1; i < numberOfBlocks; i++) {
+        if (numberOfBlocks - i <= 6) {
+            QPen pen(confirmationColors[numberOfBlocks - i - 1]);


can this be initialized outside of the loop, then have its properties updated?

jarolrod · 2023-01-29T05:09:26Z

src/qml/components/blockclockdial.cpp

+
+    // The gap is calculated here and is used to create a
+    // one pixel spacing between each block
+    double gap = degreesPerPixel();


does this need to be calculated each time the paintBlocks function is called, or can it be cached when the object is constructed?

jarolrod · 2023-01-29T05:26:16Z

src/qml/components/blockclockdial.cpp

+    update();
+}
+
+QRectF BlockClockDial::getBoundsForPen(const QPen & pen)


I think this could be simplified into:

QRectF BlockClockDial::getBoundsForPen(const QPen & pen) { const QRectF bounds = boundingRect(); QRectF rect = bounds.marginsRemoved(QMarginsF(pen.widthF() / 2.0, pen.widthF() / 2.0, pen.widthF() / 2.0, pen.widthF() / 2.0)); return rect.toAlignedRect(); }

This PR My Suggestion

jarolrod · 2023-01-29T06:07:49Z

src/qml/components/BlockClock.qml

+    }
+
+    MouseArea {
+        anchors.fill: dial


could add, since the paused state is implemented

Suggested change

anchors.fill: dial

anchors.fill: dial

cursorShape: Qt.PointingHandCursor

jarolrod · 2023-01-29T06:12:20Z

src/qml/nodemodel.cpp

@@ -27,14 +28,60 @@ void NodeModel::setBlockTipHeight(int new_height)
    }
 }

+void NodeModel::setRemainingSyncTime(double new_progress)


This function is pretty confusing in general, we'll heavily change this in follow-ups

should probably do an early test on new_progress to make sure it's a valid value

jarolrod · 2023-01-29T06:14:18Z

src/qml/nodemodel.cpp

+        int timeDelta = 0;
+        int remainingMSecs = 0;
+        double remainingProgress = 1.0 - new_progress;
+        for (int i = 1; i < m_block_process_time.size(); i++) {


starting from 1, isn't it skipping the first value in the list?

jarolrod · 2023-01-29T06:17:13Z

src/qml/nodemodel.cpp

+        for (int i = 1; i < m_block_process_time.size(); i++) {
+            QPair<int, double> sample = m_block_process_time[i];
+
+            // take first sample after 500 seconds or last available one


but currentTime was set in milliseconds in line 33, now we're doing math with seconds values?

jarolrod · 2023-01-29T06:18:30Z

src/qml/nodemodel.cpp

+        }
+        static const int MAX_SAMPLES = 5000;
+        if (m_block_process_time.count() > MAX_SAMPLES) {
+            m_block_process_time.remove(1, m_block_process_time.count() - 1);


not sure why we're removing the first element here; but in follow-ups its better if this is a queue, instead of a vector that we manually remove elements from

759d2f0 qml: move BlockClock confirmation colors into Theme.qml (jarolrod) 0b6d32e qml: capitalize the BlockClock component's state names (jarolrod) fd40538 qml: set BlockClock mouseArea cursorShape to pointing cursor (jarolrod) Pull request description: This implements the following review comments from #220 (review) - Make cursor into pointing cursor when over the BlockClock to make the BlockClock look like it's clickable #220 (comment) - Make BlockClock state names capital #220 (comment) - Move out BlockClock confirmation colors into our Theme.qml #220 (comment) [![Windows](https://img.shields.io/badge/OS-Windows-green)](https://api.cirrus-ci.com/v1/artifact/github/bitcoin-core/gui-qml/win64/insecure_win_gui.zip?branch=pull/250) [![Intel macOS](https://img.shields.io/badge/OS-Intel%20macOS-green)](https://api.cirrus-ci.com/v1/artifact/github/bitcoin-core/gui-qml/macos/insecure_mac_gui.zip?branch=pull/250) [![Apple Silicon macOS](https://img.shields.io/badge/OS-Apple%20Silicon%20macOS-green)](https://api.cirrus-ci.com/v1/artifact/github/bitcoin-core/gui-qml/macos_arm64/insecure_mac_arm64_gui.zip?branch=pull/250) [![ARM64 Android](https://img.shields.io/badge/OS-Android-green)](https://api.cirrus-ci.com/v1/artifact/github/bitcoin-core/gui-qml/android/insecure_android_apk.zip?branch=pull/250) ACKs for top commit: johnny9: ACK 759d2f0 Tree-SHA512: 7a7919a47f65872656a63fd7cac7cc94d95cfe60bf714d09295995296fd81b11c10e58ff4e7280c67bc74f6df7f3f1aa5c09975fa04e9c71d947fffc3df4b50b

- This method would allow to get the blocktime value of the block at the given height. Github-Pull: bitcoin-core#220 Rebased-From: 1fce853

Github-Pull: bitcoin-core#220 Rebased-From: 094a2c4 Co-authored-by: shaavan <[email protected]>

Additional properties to Header will allow configuring Header's description color and bold values as well as Header's header-text bold value. Github-Pull: bitcoin-core#220 Rebased-From: 8db7f0f Co-authored-by: shaavan <[email protected]>

The properties will allow the gui to show an estimate for the time remaining before the node is synced. Github-Pull: bitcoin-core#220 Rebased-From: eb945ac Co-authored-by: shaavan <[email protected]>

The ChainModel is responsible for managing the block information that the gui components need to show. In this case, the ChainModel will provide a list of ratios for the block times of the last 12 hours to be rendered on the block clock's dial. Github-Pull: bitcoin-core#220 Rebased-From: 60bd8cb Co-authored-by: shaavan <[email protected]>

Implements a few of the BlockClock dial states. Sync progress while downloading, rendering blocks after sync, and pausing/unpausing the node. An additional Model is added, ChainModel, to provide the dial block information. Changes to NodeModel are also made to support the pausing/unpausing Dial feature. Github-Pull: bitcoin-core#220 Rebased-From: 6701ad2 Co-authored-by: shaavan <[email protected]>

- This method would allow to get the blocktime value of the block at the given height. Github-Pull: bitcoin-core#220 Rebased-From: 1fce853

Github-Pull: bitcoin-core#220 Rebased-From: 094a2c4 Co-authored-by: shaavan <[email protected]>

Additional properties to Header will allow configuring Header's description color and bold values as well as Header's header-text bold value. Github-Pull: bitcoin-core#220 Rebased-From: 8db7f0f Co-authored-by: shaavan <[email protected]>

The properties will allow the gui to show an estimate for the time remaining before the node is synced. Github-Pull: bitcoin-core#220 Rebased-From: eb945ac Co-authored-by: shaavan <[email protected]>

The ChainModel is responsible for managing the block information that the gui components need to show. In this case, the ChainModel will provide a list of ratios for the block times of the last 12 hours to be rendered on the block clock's dial. Github-Pull: bitcoin-core#220 Rebased-From: 60bd8cb Co-authored-by: shaavan <[email protected]>

Implements a few of the BlockClock dial states. Sync progress while downloading, rendering blocks after sync, and pausing/unpausing the node. An additional Model is added, ChainModel, to provide the dial block information. Changes to NodeModel are also made to support the pausing/unpausing Dial feature. Github-Pull: bitcoin-core#220 Rebased-From: 6701ad2 Co-authored-by: shaavan <[email protected]>

- This method would allow to get the blocktime value of the block at the given height. Github-Pull: bitcoin-core#220 Rebased-From: 1fce853

Github-Pull: bitcoin-core#220 Rebased-From: 094a2c4 Co-authored-by: shaavan <[email protected]>

Additional properties to Header will allow configuring Header's description color and bold values as well as Header's header-text bold value. Github-Pull: bitcoin-core#220 Rebased-From: 8db7f0f Co-authored-by: shaavan <[email protected]>

The properties will allow the gui to show an estimate for the time remaining before the node is synced. Github-Pull: bitcoin-core#220 Rebased-From: eb945ac Co-authored-by: shaavan <[email protected]>

The ChainModel is responsible for managing the block information that the gui components need to show. In this case, the ChainModel will provide a list of ratios for the block times of the last 12 hours to be rendered on the block clock's dial. Github-Pull: bitcoin-core#220 Rebased-From: 60bd8cb Co-authored-by: shaavan <[email protected]>

Implements a few of the BlockClock dial states. Sync progress while downloading, rendering blocks after sync, and pausing/unpausing the node. An additional Model is added, ChainModel, to provide the dial block information. Changes to NodeModel are also made to support the pausing/unpausing Dial feature. Github-Pull: bitcoin-core#220 Rebased-From: 6701ad2 Co-authored-by: shaavan <[email protected]>

Add getBlockTime interface method in src/interfaces/chain.h

1fce853

- This method would allow to get the blocktime value of the block at the given height.

johnny9 marked this pull request as draft January 19, 2023 23:20

johnny9 force-pushed the the-block-clock branch 2 times, most recently from 90469cb to e9b5ddd Compare January 19, 2023 23:26

johnny9 force-pushed the the-block-clock branch from e9b5ddd to 96e47f8 Compare January 19, 2023 23:51

johnny9 force-pushed the the-block-clock branch from 96e47f8 to 63792bf Compare January 20, 2023 01:25

johnny9 force-pushed the the-block-clock branch 2 times, most recently from 37b6257 to 8515fdf Compare January 20, 2023 02:17

johnny9 marked this pull request as ready for review January 20, 2023 12:44

johnny9 force-pushed the the-block-clock branch 3 times, most recently from fa214b0 to 26d57ff Compare January 20, 2023 13:01

johnny9 commented Jan 21, 2023

View reviewed changes

src/qml/chainmodel.cpp Outdated Show resolved Hide resolved

johnny9 force-pushed the the-block-clock branch from f0cb6dd to 021cbb2 Compare January 21, 2023 16:33

jarolrod reviewed Jan 23, 2023

View reviewed changes

jarolrod reviewed Jan 25, 2023

View reviewed changes

hebasto mentioned this pull request Jan 25, 2023

Introduce the BlockClock control #148

Closed

johnny9 force-pushed the the-block-clock branch from 8ecfae6 to 76a504e Compare January 27, 2023 23:08

johnny9 force-pushed the the-block-clock branch from 76a504e to 2e5a0d8 Compare January 28, 2023 15:51

johnny9 force-pushed the the-block-clock branch from 2e5a0d8 to 3fd696d Compare January 28, 2023 16:11

johnny9 force-pushed the the-block-clock branch from 3fd696d to 33eb4af Compare January 28, 2023 18:09

qml: add additional properties in Header

8db7f0f

Additional properties to Header will allow configuring Header's description color and bold values as well as Header's header-text bold value. Co-authored-by: shaavan <[email protected]>

johnny9 force-pushed the the-block-clock branch from 33eb4af to 4872577 Compare January 29, 2023 02:05

johnny9 and others added 3 commits January 28, 2023 21:06

qml: add sync time related properties to NodeModel

eb945ac

The properties will allow the gui to show an estimate for the time remaining before the node is synced. Co-authored-by: shaavan <[email protected]>

johnny9 force-pushed the the-block-clock branch from 4872577 to 6701ad2 Compare January 29, 2023 02:06

jarolrod approved these changes Jan 29, 2023

View reviewed changes

hebasto merged commit a56361d into bitcoin-core:main Jan 29, 2023

jarolrod mentioned this pull request Feb 6, 2023

Various BlockClock followups #250

Merged

johnny9 mentioned this pull request Mar 4, 2023

Verification BTCMedia/Open-Source-Program#241

Open

hebasto pushed a commit to hebasto/gui-qml that referenced this pull request Jun 8, 2025

qml: add ability to pause NodeModel

b343587

Github-Pull: bitcoin-core#220 Rebased-From: 094a2c4 Co-authored-by: shaavan <[email protected]>

hebasto pushed a commit to hebasto/gui-qml that referenced this pull request Jun 9, 2025

qml: add ability to pause NodeModel

5c6ed49

Github-Pull: bitcoin-core#220 Rebased-From: 094a2c4 Co-authored-by: shaavan <[email protected]>

hebasto pushed a commit to hebasto/gui-qml that referenced this pull request Jun 9, 2025

qml: add ability to pause NodeModel

3060217

Github-Pull: bitcoin-core#220 Rebased-From: 094a2c4 Co-authored-by: shaavan <[email protected]>

	anchors.fill: dial
	anchors.fill: dial
	cursorShape: Qt.PointingHandCursor

The Block Clock #220

The Block Clock #220

Uh oh!

Conversation

johnny9 commented Jan 19, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

johnny9 commented Jan 19, 2023

Uh oh!

johnny9 commented Jan 19, 2023

Uh oh!

johnny9 commented Jan 20, 2023

Uh oh!

johnny9 commented Jan 20, 2023

Uh oh!

johnny9 commented Jan 20, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

jarolrod left a comment

Choose a reason for hiding this comment

Uh oh!

jarolrod left a comment

Choose a reason for hiding this comment

Uh oh!

johnny9 commented Jan 27, 2023

Uh oh!

johnny9 commented Jan 28, 2023

Uh oh!

johnny9 commented Jan 28, 2023

Uh oh!

johnny9 commented Jan 28, 2023

Uh oh!

johnny9 commented Jan 29, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

jarolrod left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

johnny9 commented Jan 19, 2023 •

edited

Loading

johnny9 commented Jan 20, 2023 •

edited

Loading

johnny9 commented Jan 29, 2023 •

edited

Loading