| misc

A small guide that explains how to contribute to Monero by being an UX developer. In short; monero-gui is a Qt5 application and as such QML is used to draw stuff on the screen. QML is very easy to learn if you have a background in CSS/HTML - if not, it’s still quite easy.

This small introduction will show you how to modify menu buttons.

Foreword

This guide will take you through the following steps:

  • Ensuring we have the right compiler versions (gcc, g++, cmake, qmake)
  • Installing system dependencies
  • Cloning the monero-gui project from git and verifying that we can build it
  • Downloading Qt Creator (Editor for QML and Qt applications)
  • Configuring Qt Creator to run our monero-gui project
  • Making a change to the QML!

Note: This guide is for Debian 9. If you have anything else, this guide cannot be copied 1:1.

Dependencies

Before we begin, make sure to update/upgrade apt.

$ sudo apt update
$ sudo apt upgrade

Verify versions.

$ cat /etc/debian_version 
9.2

$ gcc --version
gcc (Debian 6.3.0-18) 6.3.0 20170516

$ g++ --version
g++ (Debian 6.3.0-18) 6.3.0 20170516

$ qmake --version
QMake version 3.0
Using Qt version 5.7.1 in /usr/lib/x86_64-linux-gnu

Install system dependencies.

$ sudo apt install build-essential libboost-all-dev git libzmq3-dev miniupnpc libunbound-dev graphviz doxygen libunwind8-dev pkg-config libssl-dev

cmake

I choose to install the latest version, 3.10.0, manually.

$ cd /tmp
$ wget https://cmake.org/files/v3.10/cmake-3.10.0-rc5.tar.gz
$ tar zxvf cmake-3.10.0-rc5.tar.gz
$ ./bootstrap
$ make -j4
$ sudo make install

This should yield:

$ cmake --version
cmake version 3.10.0-rc5

If you don’t feel like building from source: sudo apt install cmake .. your mileage may vary.

building monero-gui

To verify if we have all the dependencies; clone and build the monero-gui project.

$ cd ~/
$ git clone https://github.com/monero-project/monero-gui.git
$ cd monero-gui
$ ./build.sh

This takes a while but it should build without error.

If it errors; pay close attention to what exactly went wrong. It could be many things, some of which are listed below:

  • Boost version too old (might have to manually install this one)
  • QT5 is too old
  • gcc / g++ are too old
  • libzmq3-dev not present
  • libreadline-dev not present
  • An error related to OpenGL (sudo apt-get install libgl1-mesa-dev && sudo ln -s /usr/lib/libGL.so.1 /usr/lib/libGl.so && sudo ln -s /usr/lib/libGL.so.1 /usr/lib/libGL.so might fix that)

Note: after each failed build, please run rm -rf monero build to clean the install.

wow

QtCreator

Fetch Qt Creator from the official website.

cd /tmp
wget http://download.qt.io/official_releases/online_installers/qt-unified-linux-x64-online.run
chmod +x qt-unified-linux-x64-online.run
sudo ./qt-unified-linux-x64-online.run

In the following installation screens:

  • Specify directory where Qt will be installed: /usr/share/qt5-prop
  • Check Qt 5.* under preview
  • Check Qt Creator 4.* under preview

wow

Click Next a couple of times and let it install.

Configuring Qt Creator

You should now be able to start Qt Creator from your applications menu under ‘Programming’, depending on the desktop enviromment that you use.

On startup, press ‘Open Project’ and open monero-gui/monero-wallet-gui.pro, then press ‘Configure Project’.

In the toolbar, go to Build->Build All. Click the tab ‘Compile Output’ to see the compilation progress. It should finish with something like:

20:48:38: The process "/usr/bin/make" exited normally.
20:48:38: Elapsed time: 00:51.

You can now run the wallet by pressing CTRL-R. On first startup, it’ll ask you to create a wallet. Make sure to enable Testnet on the second screen.

Note: The daemon most likely fail to start, which is fine.

Close the wallet for now.

Changing the menu button color

Screens/panels, UI components, colors, margins, graphics, layout and more can be found by browsing the QML files under Projects->monero-wallet-gui.

wow

Lets change the color of the menu buttons text. Open components/MenuButton.qml and search for:

    Text {
        id: label
        anchors.verticalCenter: parent.verticalCenter
        anchors.left: parent.left
        anchors.leftMargin: parent.getOffset() + 50 * scaleRatio
        font.family: "Arial"
        font.pixelSize: 18 * scaleRatio
        color: parent.checked ? "#000000" : "#FFFFFF"
    }

This code draws text on the menu button. There is a ternary operator on the color property, meaning, the color will be black if the button is checked, else, it will be white.

Lets change it to:

color: parent.checked ? "green" : "red"

Save the file CTRL-S and re-run the wallet CTRL-R. It should show the color change:

wow

Pretty cool.

Suppressing start-up dialog boxes

Everytime you start the GUI, it will start whining about creating/opening a wallet. To suppress these dialogs for debugging/development purposes:

Open main.qml and search for:

passwordDialog.open(walletName);

comment it out:

//passwordDialog.open(walletName);

Next up, search for function startDaemon(flags) and comment out its content:

    function startDaemon(flags){
//        Pause refresh while starting daemon
//        currentWallet.pauseRefresh();

//        appWindow.showProcessingSplash(qsTr("Waiting for daemon to start..."))
//        daemonManager.start(flags, persistentSettings.testnet, persistentSettings.blockchainDataDir);
//        persistentSettings.daemonFlags = flags
    }

Save the file CTRL-S and re-run the wallet CTRL-R. No more dialog boxes, hooray.

Handy resources

For help building monero:

  • irc.freenode.org #monero
  • Monero stack exchange: https://monero.stackexchange.com/

For coordinating with other GUI developers: development IRC channel provided upon request.