Use Battery QML demo, add DF fonts.

Heavy_QML_example.pro.user

 <?xml version="1.0" encoding="UTF-8"?>
 <!DOCTYPE QtCreatorProject>
-<!-- Written by QtCreator 4.8.0, 2018-12-13T10:03:53. -->
+<!-- Written by QtCreator 4.8.0, 2018-12-14T11:36:39. -->
 <qtcreator>
  <data>
   <variable>EnvironmentId</variable>
@@ -292,12 +292,15 @@
      <value type="int">14</value>
     </valuelist>
     <value type="int" key="PE.EnvironmentAspect.Base">2</value>
-    <valuelist type="QVariantList" key="PE.EnvironmentAspect.Changes"/>
+    <valuelist type="QVariantList" key="PE.EnvironmentAspect.Changes">
+     <value type="QString">QML_DISABLE_DISK_CACHE=0</value>
+     <value type="QString">QT_LOGGING_RULES=qt.scenegraph.time.glyph=true</value>
+    </valuelist>
     <value type="QString" key="ProjectExplorer.ProjectConfiguration.DefaultDisplayName">Heavy_QML_example</value>
     <value type="QString" key="ProjectExplorer.ProjectConfiguration.DisplayName"></value>
     <value type="QString" key="ProjectExplorer.ProjectConfiguration.Id">Qt4ProjectManager.Qt4RunConfiguration:/home/dan/projects/Heavy_QML_example/Heavy_QML_example.pro</value>
     <value type="QString" key="Qt4ProjectManager.Qt4RunConfiguration.ProFile">Heavy_QML_example.pro</value>
-    <value type="QString" key="RunConfiguration.Arguments"></value>
+    <value type="QString" key="RunConfiguration.Arguments">--df</value>
     <value type="uint" key="RunConfiguration.QmlDebugServerPort">3768</value>
     <value type="bool" key="RunConfiguration.UseCppDebugger">false</value>
     <value type="bool" key="RunConfiguration.UseCppDebuggerAuto">true</value>

QUItBattery.qml

+import QtQuick 2.0
+import QtQuick.Particles 2.0
+
+Item {
+    id: root
+
+    // Value between 0 (0%) and 1 (100%)
+    property real value: 0.5
+    // Battery is being charged
+    property bool charging: false
+    // Setting a max rotation, 0 means non-liquid
+    property real maxLiquidRotation: 50
+
+    /* Private */
+    property real __smoothedValue: value
+    // True when battery is running low
+    property bool __batteryLow: root.value <= 0.2
+    // Battery liquid rotation
+    property real __bRotation: Math.max(-maxLiquidRotation, Math.min(root.rotation+90, maxLiquidRotation))
+
+    width: batteryImage.width
+    height: batteryImage.height
+
+    Behavior on __bRotation {
+        SmoothedAnimation {
+            velocity: 3.0
+            duration: 500
+        }
+    }
+
+    Image {
+        id: batteryBar
+        source: "images/battery_bar.png"
+        visible: false
+    }
+
+    ParticleSystem {
+        id: particlesItem
+        anchors.fill: batteryBar
+
+        ImageParticle {
+            source: "images/particle.png"
+            rotationVariation: 180
+            color:"#ffffff"
+            colorVariation: 0.2
+        }
+
+        Emitter {
+            width: 8
+            height: parent.height
+            x: 20
+            emitRate: root.charging ? 20 + 50*root.value : 2 + 5*root.value
+            lifeSpan: 3500
+            size: 32
+            sizeVariation: 24
+            velocity: PointDirection{ x: 5+100*root.value; xVariation: x*0.5; yVariation: 6 }
+            endSize: 8
+
+        }
+        Turbulence {
+            width: parent.width
+            height: parent.height
+            strength: 32
+        }
+    }
+
+    ShaderEffectSource {
+        id: particlesShaderSource
+        anchors.fill: particlesItem
+        sourceItem: particlesItem
+        hideSource: true
+        visible: false
+    }
+
+    ShaderEffect {
+        id: shaderEffectItem
+        anchors.fill: particlesShaderSource
+
+        property variant source: batteryBar
+        property variant source2: particlesShaderSource
+        property real value: 0.10 + root.__smoothedValue*0.78
+        property real rot: root.__bRotation
+
+        fragmentShader: "
+            uniform sampler2D source;
+            uniform sampler2D source2;
+            uniform lowp float qt_Opacity;
+            varying highp vec2 qt_TexCoord0;
+            uniform highp float value;
+            uniform highp float rot;
+            void main() {
+                lowp vec4 pix = texture2D(source, qt_TexCoord0);
+                lowp vec4 pix2 = texture2D(source2, qt_TexCoord0);
+                highp float r = qt_TexCoord0.y*(rot*0.008) - 0.0042*rot + abs(rot)*(value-0.5)*0.006;
+                highp float isVis = smoothstep(qt_TexCoord0.x-0.02-r, qt_TexCoord0.x+0.02-r, value);
+                highp vec4 color = vec4(1.0 - value, value, 0.0, 1.0);
+                highp vec4 light =  color * isVis * pix;
+                gl_FragColor = (isVis * pix.a * pix2 + light) * qt_Opacity;
+            }"
+    }
+
+    Item {
+        id: clipper
+        anchors.fill: parent
+        anchors.leftMargin: 40
+        anchors.rightMargin: 40
+        clip: true
+
+        Image {
+            id: levelImage
+            source: "images/bar_level2.png"
+            x: shaderEffectItem.value * root.width + (Math.abs(-root.__bRotation)*(shaderEffectItem.value-0.5)*2.9) - 75
+            visible: false
+        }
+
+        ShaderEffect {
+            id: levelImageShaderEffect
+            anchors.fill: levelImage
+            opacity: 0.5
+            transform: [
+                Rotation {
+                    origin.x: 32
+                    origin.y: 135
+                    angle: -root.__bRotation
+                }, Scale {
+                    origin.x: 32
+                    origin.y: 134
+                    yScale: 1 + root.__bRotation*root.__bRotation*0.00021
+                }
+            ]
+
+            property variant source: levelImage
+            property real value: shaderEffectItem.value
+
+            fragmentShader: "
+            uniform sampler2D source;
+            uniform lowp float qt_Opacity;
+            varying highp vec2 qt_TexCoord0;
+            uniform highp float value;
+            void main() {
+                lowp vec4 pix = texture2D(source, qt_TexCoord0);
+                highp vec4 color = vec4(1.0 - value, value, 0.2, 1.0);
+                gl_FragColor = pix * color * qt_Opacity;
+            }"
+        }
+    }
+
+    ParticleSystem {
+        anchors.fill: batteryBar
+        running: root.charging || !empty
+        ImageParticle {
+            groups: ["first", "second"]
+            source: "images/lightning.png"
+            rotationVariation: 20
+            color:"#ffffff"
+            colorVariation: 0.1
+            opacity: 0.5
+        }
+        Emitter {
+            group: "first"
+            width: 8
+            height: 8
+            anchors.verticalCenter: parent.verticalCenter
+            emitRate: 100
+            lifeSpan: 1400
+            lifeSpanVariation: 500
+            size: 32
+            sizeVariation: 16
+            velocity: PointDirection{ x: 200; xVariation: x*0.5; yVariation: 30 }
+            endSize: 8
+            enabled: root.charging
+        }
+        GroupGoal {
+            groups: ["first"]
+            x: shaderEffectItem.value * parent.width
+            height: parent.height
+            width: 100
+            goalState: "second"
+            jump: true
+        }
+        Gravity {
+            groups: ["second"]
+            magnitude: 200
+            angle: -180
+        }
+    }
+
+    Text {
+        anchors.verticalCenter: parent.verticalCenter
+        x: 60
+        font.pixelSize: 26
+        color: "#404040"
+        style: Text.Outline
+        styleColor: "#ffffff"
+        opacity: root.charging ? 0.6 : 0
+        text: "Charging"
+        Behavior on opacity {
+            NumberAnimation { duration: 500; easing.type: Easing.InOutQuad }
+        }
+    }
+
+    Image {
+        id: batteryImage
+        source: "images/battery2.png"
+    }
+
+    Text {
+        anchors.centerIn: parent
+        y: 22
+        font.pixelSize: 48
+        style: Text.Outline
+        color: root.__batteryLow && !root.charging ? "#802020" : "#404040"
+        styleColor: "#ffffff"
+        font.bold: true
+        rotation: -root.rotation
+        text: (root.value*100).toFixed(0) + "%"
+        SequentialAnimation on opacity {
+            running: root.__batteryLow && !root.charging
+            loops: Animation.Infinite
+            alwaysRunToEnd: true
+            NumberAnimation { to: 0.5; duration: 200; easing.type: Easing.InOutQuad }
+            NumberAnimation { to: 1.0; duration: 200; easing.type: Easing.InOutQuad }
+        }
+    }
+}

Slider.qml

+import QtQuick 2.0
+
+Item {
+    id: root
+    width: 200
+    height: 112
+
+    property real value: 0
+    property real maximum: 1
+    property real minimum: 0
+    property int xMax: width - handle.width - 4
+    property alias text: sliderText.text
+
+    onValueChanged: updatePos();
+    onXMaxChanged: updatePos();
+    onMinimumChanged: updatePos();
+
+    function updatePos() {
+        if (maximum > minimum) {
+            var pos = 2 + (value - minimum) * root.xMax / (maximum - minimum);
+            pos = Math.min(pos, width - handle.width - 2);
+            pos = Math.max(pos, 2);
+            handle.x = pos;
+        } else {
+            handle.x = 2;
+        }
+    }
+
+    Rectangle {
+        id: backgroundBar
+        anchors.fill: parent
+        anchors.topMargin: 40
+        anchors.bottomMargin: 40
+        border.width: 1
+        border.color: "white"
+        opacity: 0.2
+        gradient: Gradient {
+            GradientStop { position: 0.0; color: "lightgray" }
+            GradientStop { position: 1.0; color: "gray" }
+        }
+    }
+
+    Rectangle {
+        id: filler
+        anchors.left: parent.left
+        anchors.right: handle.horizontalCenter
+        anchors.top: backgroundBar.top
+        anchors.bottom: backgroundBar.bottom
+        border.width: 1
+        border.color: "#202020"
+        gradient: Gradient {
+            GradientStop { position: 0.0; color: "#f0f0f0" }
+            GradientStop { position: 1.0; color: "#404040" }
+        }
+    }
+
+    Item {
+        id: handle
+        width: 80
+        height: parent.height
+        Image {
+            anchors.centerIn: parent
+            source: "images/handle.png"
+        }
+        Image {
+            id: handleHighlight
+            anchors.centerIn: parent
+            source: "images/toggle.png"
+            opacity: mouseArea.pressed ? 0.6 : 0
+            Behavior on opacity {
+                NumberAnimation { duration: 200 }
+            }
+        }
+        MouseArea {
+            id: mouseArea
+            anchors.fill: parent
+            anchors.margins: -20
+            drag.target: parent
+            drag.axis: Drag.XAxis
+            drag.minimumX: 2
+            drag.maximumX: root.xMax+2
+            onPositionChanged: {
+                value = (maximum - minimum) * (handle.x-2) / root.xMax + minimum;
+            }
+        }
+    }
+
+    Text {
+        id: sliderText
+        anchors.centerIn: parent
+        font.pixelSize: 28
+        style: Text.Outline
+        styleColor: "white"
+        color: "black"
+        opacity: 0.4
+    }
+}

ToggleButton.qml

+import QtQuick 2.0
+
+Item {
+    id: root
+    width: 112
+    height: 112
+
+    property bool checked: false
+    property alias icon: buttonIcon.source
+
+    signal toggled
+
+    Image {
+        id: handle
+        anchors.verticalCenter: parent.verticalCenter
+        source: "images/handle.png"
+    }
+
+    Image {
+        id: toggle
+        anchors.centerIn: parent
+        source: "images/toggle.png"
+        opacity: checked ? 0.6 : 0
+        Behavior on opacity {
+            NumberAnimation { duration: 200 }
+        }
+    }
+
+    Image {
+        id: buttonIcon
+        anchors.centerIn: parent
+    }
+
+    MouseArea {
+        anchors.fill: parent
+        onClicked: {
+            checked = !checked
+            root.toggled();
+        }
+    }
+}

benchmark.cpp

@@ -24,6 +24,7 @@ void Benchmark::countFrame(){
         printf("frame.");
         //No need to handle this. We probably just rendered extra frames before finished() completed.
     }
+    //printf("%d,%d\n", frame, thisframe);
     qDebug() << "frame " << frame << ": " << thisframe << " ms";
     frame+=1;
     if (frame >= maxframes){

benchmark.h

@@ -24,7 +24,7 @@ class Benchmark: public QObject{
         QElapsedTimer timer;
         int frame = 0;
         int lastframetotal;
-        static const int maxframes = 120;
+        static const int maxframes = 15;
         int frametimes [maxframes];
         void finished();
         void startTimer();

main.qml

-import QtQuick 2.6
+import QtQuick 2.7
 import QtQuick.Window 2.2
-
+import QtQuick.Controls 2.0
+import QtQuick.Layouts 1.3
 
 Window {
-    id: window
+
+    width: 800
+    height: 600
+    id: mainView
     visible: true
-    width: 640
-    height: 480
-    title: qsTr("Hello World")
-
-    Rectangle {
-        id: xmovingBox
-        width: 50
-        height: 50
-        color: "lightsteelblue"
-        XAnimator {
-            target: xmovingBox;
-            from: 590;
-            to: 0;
-            duration: 30000
-            running: true
+
+    property int pixelSize: mainView.height / 8
+
+    function fontSource()
+    {
+        var s = "DejaVuSans"
+        var suffix = ""
+        for (var i = 0; i < Qt.application.arguments.length; ++i) {
+            if (Qt.application.arguments[i] === "--complex-latin")
+                s = "HVD_Peace"
+            else if (Qt.application.arguments[i] === "--chinese")
+                s = "WCL-02"
+            else if (Qt.application.arguments[i] === "--df")
+                suffix = "_df"
+        }
+
+        console.debug(s + suffix)
+
+        return "file:/home/dan/projects/Heavy_QML_example/" + s + suffix + ".ttf"
+    }
+
+    FontLoader {
+        id: myFont
+        source: fontSource()
+    }
+
+    function textSample()
+    {
+        for (var i = 0; i < Qt.application.arguments.length; ++i) {
+            if (Qt.application.arguments[i] === "--chinese")
+                return "紙開逮落供整間止並人主最人負村鳥線原。止天由子件要思学掲児治移混。想一垣祐化信位資会文探協融無歯。写惑山権手写負報見海毎光見燃。考表載取常人金呼将紙割席通試。電続長部撮一暗協出豊記愛提速本仕。暮分友当均娘要記欠発企勢深在個勝。場執時民迎就挙載対乗補稿対暮提。受撮柴針両別譜謙国後村治。続谿強校視扱就授科告絞報覧埼忌前信。南供低属書期面表案政付図一生細夏枝期返。基道注迅三著車興済川達受報期半豊講。荘弱住上含題豊格国再紙増休里部先民議后。図建旅村所械属断守目不変負。字教員将投広学催護所将到国報疑起彦象。追景始望上入最善樹培摘数目際練。映福投研生戦日新先扱横載映読海。間貢経陸罪鹿実飾写著社都弥融州冬一体断家。来止選豊祉紙地上書極談悩立今。尉忘掲一写岐国俊付期講勢危撤昇図院水。回問供首模分性少直覧触目能円側学聞年政。話第務葉著知総承小担供米第。約危毎低骨完竹知役容車子応。救析期未来虐迎方闘視格置触肥。速夜入相医聞県作上先達京。除浩著花員向律社中企能辛品日芸空質北需。面関相国第域治援土護択差東田比副新。属捕校術権単提追麿止角用鹿動。優次俗旧族港広宣転法中大手強樹団検。効行紀分済決隆情連場取説西。野画男子品無会等活日償道熱載出修国本。問共季秋関延毎囲訪熱暮伝織聞。予載当整衝輸小穏契独基常融矛序学。谷量部撃投断人震止期必風場徒格試哲。回品他関気間縦年法集更短案。決阪逃載原要平央改近固金征供着。南子申残帯列通話禁歩宅由。家健野兼牝安康選鉱枚露真断思貴。務文乳域放宮作藤洋杯郵番談内用弥。宝副半創書不野井民奈連先目無後主。暮携鎖処岡入秩声込来万江岸。床樹種少信手遺需村市不活見能正適切前掲氷。上情帰意株産工表受熱画聞遇応務。編原実産住崎杏本岩中龍現米布由鳥戦買。務割望海挙明放慮産上観尾変情公競田聞。対院転禁苫経最手礎辺装座入示覧重意術念。際雪域疑混士組探校報崎管古。問夫辞希印毎後開短民真見開接名将。川諸命早断任来数問安会神向鹿嘉政緩。界理展聞化資一質金津客沢社学稿多氏真属。定売葉者周戦入統品日亡司供正朝情共明。況活処証中何著阜択過意護著芸容。主館南明圧極政設慮集布意近全点投。転港比井庫台属格責勢低稿冠。聞株減辺安暮井賞質属嘉四畿辺視子皇。者定予境上敗測覚準囲競押替加県染高戦練。許月始盛駐年禁努大縄我目選際。乳心萩試方共探相肪報権嫌撃収話市族転。政突聞早際意作記企庁喫近身宰部。横菱記現指一書放賞都送広雲尊画民。覧保賞維参細雪台録正推金掲。問弘向問万屋新転野高任普治。始続派捕客参豆応同最使頭治詳取利阪。会面力真方単健見町佐座事陽。格務有部核削語生蓄郭談備記社除花日。座査品左替律説寄定尽多問遺民。軍当定覧間井真孫庁況提求緯都昨及長。費知制内門語介親較割景報。図信育世工任初掲消組映関。再別月月努奏天本内午山武石増戸携。目際開田行庁済断津指込医太転屋枝。携問供能大写戦縄外暮論打井。不身景志万散故砂演続策刺話動数切約。勝性以貞創剃犯績稿短形中量明報森所。陸南調賞田掲聞供整提子医部場。混面本挙江応百季誕男最世嶋次役竹。鳥新病転春無法無団生訪緊生豊転静。東河建康査芝応転活申院者朗内。格義状容森札学栃側利務所葉抽庫出普。責雄玲准期短肝拡共医勢下関毎中舞第祥。任福企図発神連供力月文原川東投部油。営探町領課負幅教人頼功明大退切省。禁座治著塾全提夏転蔟青発芳埼談。想管載触立有愛座能日初康場内。渓思代試斉事川禁界崎訟日支売経島氏氏。車南社外英適報幡疑写善校禁影者。三山面座洋江備補規視行芸浮体練読。提写人著銀第属宿主算起無健。楽野野給職個入新公否本総立小万。米訴並故資闘小賞芸後著都茨絶霞求旅部写眠。塗充題無朝勢内道掲路建布説馬。水果作括政教応大後画腰融川義以活。共巨対事有刀殺囲競失計農読癒系集。出質個賠語円宙解遺活意瞬若負案時兆女上一。"
         }
+
+        return "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefijklmnopqrstuvwxyz"
+
     }
+
+    Image {
+        anchors.fill: parent
+        source: "images/background2.jpg"
+    }
+
+
+    ColumnLayout
+    {
+        anchors.fill: parent
+
+        QUItBattery {
+            id: battery
+            anchors.centerIn: parent
+            charging: true
+            maxLiquidRotation: 0
+            rotation: 0
+            value: 0.0
+
+            SequentialAnimation on value {
+                running: true
+                loops: Animation.Infinite
+                NumberAnimation { to: 1.0; duration: 5000; loops: Animation.Infinite; easing.type: Easing.OutQuad }
+            }
+        }
+    }
+
+    Text {
+        id: text1
+        text: textSample()
+        font.pixelSize: 16
+
+        wrapMode: Text.WrapAtWordBoundaryOrAnywhere
+        anchors.fill: parent
+        font.family: myFont.name
+        renderType: Text.QtRendering
+
+        ColorAnimation on color {
+            from: "black"
+            to: "#42f450"
+            duration: 5000
+        }
+    }
+
 }

qml.qrc

 <RCC>
     <qresource prefix="/">
         <file>main.qml</file>
-        <file>timer.qml</file>
+        <file>QUItBattery.qml</file>
+        <file>images/background2.jpg</file>
+        <file>images/bar_level2.png</file>
+        <file>images/battery_bar.png</file>
+        <file>images/lightning.png</file>
+        <file>images/particle.png</file>
+        <file>images/battery2.png</file>
     </qresource>
 </RCC>

qtquickcontrols2.conf

+ This file can be edited to change the style of the application
+; See Styling Qt Quick Controls 2 in the documentation for details:
+; http://doc.qt.io/qt-5/qtquickcontrols2-styles.html
+
+[Controls]
+Style=Default
+
+[Universal]
+Theme=Light
+;Accent=Steel
+
+[Material]
+Theme=Light
+;Accent=BlueGrey
+;Primary=BlueGray