The bulk of the code is largely copied from an official QML example from QT.
I wanted to play with motion/animation; in this case, a sweeping second hand was my main aim, but there are performance problems with SFOS SDK/Emulator and devices compared to Community QtCreator 5.15.2
I have tried using ITEM, RECTANGLE and IMAGE for the clock hands, there is hardly any performance difference, CPU usage is quite high and causes lagging and stuttering when run on Emulator or mobile device, making the sweeping action more like a fake Rolex, it looks like poop! With or without smoothing and/or antialiasing, it is still jerky on SFOS
High CPU usage
----------
community qtcreator 5.15.2
CPU usage - 1% > 3%
fan is quiet
sailfish qtcreator via emulator (latest)
CPU usage 25% > 45%
fan is racing
SFOS 4.3
CPU usage similar to above on Xperia 10 ii and Jolla1
The code shown below is currently for ‘community QtCreator’ but can easily be changed to run on SFOS SDK;
import QtQml 2.12
import QtQuick 2.2
import QtQuick.Controls 2.12 // Sailfish.Silica 1.0
import QtGraphicalEffects 1.0
Item {
id: clock
property int hours
property int minutes
property int seconds
function timeChanged() {
var date = new Date;
hours = date.getHours();
minutes = date.getMinutes();
seconds = date.getSeconds()
}
Timer {
id: changed
interval: 1000
running: true
repeat: true;
onTriggered: {
clock.timeChanged()
}
}
Image {
id: myFace
source: "graphic-clock-face-5.png" // without file extension for sfos
anchors.centerIn: parent
Rectangle {
color: "#66666666"
radius: width/2
width: 412
height: 412
anchors.centerIn: parent
}
Rectangle {
id: hour
x: 195
y: 101
width: 10
height: 100
color: "green"
transform: Rotation {
id: hourRotation
origin.x: 5
origin.y: 99
angle: (clock.hours * 30) + (clock.minutes * 0.5)
Behavior on angle {
SpringAnimation { spring: 2; damping: 0.2; modulus: 360 }
}
}
antialiasing: true
}
Rectangle {
id: minute
x: 197
y: 52
width: 6
height: 150
color: "blue"
transform: Rotation {
id: minuteRotation
origin.x: 3
origin.y: 148
angle: clock.minutes * 6
Behavior on angle {
SpringAnimation { spring: 2; damping: 0.2; modulus: 360 }
}
}
antialiasing: true
}
Rectangle {
id: second
x: 199
y: 50
width: 2
height: 150
color: "#00000000"
transform: Rotation {
id: secondRotation
origin.x: 1
origin.y: 150
angle: clock.seconds * 6
Behavior on angle {
RotationAnimation {
duration: 1000
direction: RotationAnimation.Clockwise
}
}
}
antialiasing: true
Image {
z: 2000
id: fish
source: "icon-m-sailfish.png" // without file extension for sfos
rotation: -secondRotation.angle
anchors { top: second.top; horizontalCenter: second.horizontalCenter }
sourceSize {
width: 45
height: 45
}
smooth: true
antialiasing: true
}
}
}
}