Cyjan's Blog

I don't know why are you here, but enjoy.


Epstein didn't kill himself | Design | General
Politically Incorrect | Raspberry PI | Technologic
btw I'm using Ubuntu Touch

Timer in Qt - Ubuntu Touch clicker

July 21, 2020 | btw I'm using Ubuntu Touch

In the previous post, we have added one missing feature - database, so we can close our app and not lose progress. But still, there's a lot of things that we can do, for example creating items that can gain clicks over time, and you've guessed it correctly! That's what I've done in this video, and what I'll explain in this post. If you have not followed tutorials, grab this source code.

p.s. I need to warn you, this code is ugly, I've added everything to one file qml/Main.qml and few changes to qml/scripts/db.js but that's only because I want to clean up code next time.

Let's start with this qml/scripts/db.js file.

in function get(id, callback) { I've changed sql("SELECT val FROM keyval WHERE id = ?", [id], callback) into something more complicated, that returns exact value, instead of query result, so we don't have to do res.rows.item(0).val in our callback function. We are also returning 0 on any error, so if something doesn't exist, it is equal to 0.

Then I've made changes to qml/Main.qml

property var item_cat: 0

First, I've introduced a new property for our cat, that will produce 1 dogecoin every second.

Then I've created new Button {...} with id catbuybtn, that doesn't differ from the previous one (clickbtn), but its onClicked function is something new.

DB.get('doge', function (res) {

First, it fetches 'doge' value from the database and runs a callback function with the result

if (res < 100) {
    console.log(i18n.tr("You can't but Cat! You don't have enough money"))
    return
}

If 100 is a higher number than the result of DB.get function prints debug information to console, and returns.

But otherwise, it continues:

DB.set('doge', doge-100)
doge = doge-100;

And removes 100 from the value of doge in both, property and database.

DB.set('item_cat', ++item_cat)

Then it increases item_cat by one, in property, and in database. (++item_cat works like: "Add one to item_cat and return new value", while item_cat++ works like: "Add one to item_cat and return old value")

After that, I've almost rewritten Component.onCompleted function.
I've replaced res.rows.item(0).val with res because we have updated get function.
Then we have added:

DB.get('item_cat', function (res) {
    item_cat = Math.round(Number(res))
})

To fetch 'item_cat' from the database, and set it to the property named exactly the same.

In the end, we have added timer to add clicks, that are produced by cats.

function Timer() {
    return Qt.createQmlObject("import QtQuick 2.0; Timer {}", root);
}
var timer = new Timer();
timer.interval = 1000;
timer.repeat = true;
timer.triggered.connect(function () {
    doge += item_cat*1
})
timer.start();

It creates a new Timer element and runs doge += item_cat*1 inside of it every second.