基于python qml做的汽车仪表盘界面2

最新推荐文章于 2024-06-25 15:50:13 发布
最新推荐文章于 2024-06-25 15:50:13 发布
阅读量681 收藏 9
点赞数 2
分类专栏： 嵌入式 文章标签： python 汽车 qt
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43623492/article/details/128824586
版权

基于python环境 用qml编写的 其他语言也是能用的
ps： gif录制的看起来会卡一些 实际非常流畅
效果图👇

在这里插入图片描述

运行main.py 前提是安装了PyQt5的包 命令如下👇

# 安装PyQt5包命令
pip install PyQt5

# 程序运行命令
python main.py

目录结构
在这里插入图片描述

main.py

import os
import sys
import time
import urllib, json
import PyQt5.QtQml
import threading
from PyQt5.Qt import *
from PyQt5.QtQuick import QQuickView
from PyQt5.QtCore import QAbstractListModel, Qt, QUrl,QStringListModel
from PyQt5.QtGui import QGuiApplication

from multiprocessing import Process


def qmlview(view):
    view.show()

if __name__ == '__main__':
    app = QGuiApplication(sys.argv)
    view = QQuickView()
    view.setResizeMode(QQuickView.SizeRootObjectToView)

    qml_file = os.path.join(os.path.dirname(__file__),'view.qml')
    view.setSource(QUrl.fromLocalFile(os.path.abspath(qml_file)))
    
    if view.status() == QQuickView.Error:
        print(QQuickView.Error)
        sys.exit(-1)

    view.show()
    while True:
        app.processEvents()
        time.sleep(0.02)
    del view

Vehicle_oil.qml

import QtQuick 2.9

Rectangle {
    id: control

    color: Qt.rgba(0,0,0,0.0)

    property real currentValue: 6

    onCurrentValueChanged: {
        canvas.requestPaint()
    }

    Canvas {
        id: canvas
        
        antialiasing: true
        width: parent.width
        height: parent.height
        onPaint: {
            var ctx = getContext("2d")
            ctx.reset() 

            ctx.lineWidth = 3
            ctx.strokeStyle ="white"
            ctx.save()
            ctx.beginPath()
            ctx.moveTo(40, 40)
            ctx.lineTo(31, 40)
            ctx.stroke()
            ctx.restore()  
            ctx.save()
            ctx.beginPath()
            ctx.moveTo(41, 70)
            ctx.lineTo(27, 70)
            ctx.stroke()
            ctx.restore()  
            ctx.save()
            ctx.beginPath()
            ctx.moveTo(42, 100)
            ctx.lineTo(33, 100)
            ctx.stroke()
            ctx.restore()  
            ctx.save()
            ctx.beginPath()
            ctx.moveTo(43, 130)
            ctx.lineTo(29, 130)
            ctx.stroke()
            ctx.restore()  
            ctx.save()
            ctx.beginPath()
            ctx.moveTo(44, 160)
            ctx.lineTo(35, 160)
            ctx.stroke()
            ctx.restore()  
            ctx.save()
            ctx.beginPath()
            ctx.moveTo(45, 190)
            ctx.lineTo(31, 190)
            ctx.stroke()
            ctx.restore()  
            ctx.strokeStyle ="red"
            ctx.save()
            ctx.beginPath()
            ctx.moveTo(46, 220)
            ctx.lineTo(37, 220)
            ctx.stroke()
            ctx.restore()  

            ctx.save()
            ctx.lineWidth = 5
            var gradient = context.createLinearGradient(55,0,62,250)
            gradient.addColorStop(0.0, "white")
            gradient.addColorStop(1.0, "red")
            ctx.strokeStyle = gradient
            ctx.beginPath()
            ctx.moveTo(62, 250)
            ctx.lineTo(62-control.currentValue, 250-(30*control.currentValue))
            ctx.stroke()     

            ctx.save()
            ctx.lineWidth = 10
            ctx.strokeStyle = "black"

            for(var i = 0; i < 7;i++ ){
                ctx.save()
                ctx.beginPath()
                ctx.moveTo(60-i,220-(30*i )+ 3)
                ctx.lineTo(60-i,220-(30*i )- 3)
                ctx.stroke()  
                ctx.restore()  
            }

            ctx.save()
            context.drawImage("./imgs/oilw.png",8-(control.currentValue),235-(control.currentValue*29),25,20)
            ctx.restore() 

        }

    }
    
}

Vehicle_rpm.qml

import QtQuick 2.9

Rectangle {
    id: controls
    
    color: Qt.rgba(0,0,0,0.0)

    property real radius: controls.width > controls.height ? controls.height/2-10 : controls.width/2-10
    property real currentValue: 0

    onCurrentValueChanged: {
        canvas.requestPaint()
    }

    Canvas {
        id: canvas
        antialiasing: true
        anchors.fill: parent
        width: parent.width
        height: parent.height
        onPaint: {
            var ctx = getContext("2d")
            ctx.reset() 

            ctx.lineWidth = 3
            ctx.fillStyle = Qt.rgba(0,0,0,0.0)
            ctx.strokeStyle = Qt.rgba(0,0,0,0.0)
            ctx.translate(width/2, height/2)

            ctx.save()
            ctx.beginPath()
            ctx.arc(0, 0, controls.radius, 0, Math.PI*2, true)
            ctx.closePath()
            ctx.fill()
            ctx.stroke()
            ctx.restore()

            ctx.save()
            var gradient = context.createRadialGradient(0,300,50,100,200,230)
            gradient.addColorStop(0.0, "white")
            gradient.addColorStop(0.7, "#2F75B6")
            gradient.addColorStop(1.0, "#2F65AC")
            ctx.fillStyle = "#6880E6"
            ctx.strokeStyle ="white"
            ctx.beginPath()
            ctx.arc(0, 0, controls.radius/3, 0, Math.PI*2, true)
            ctx.closePath()
            ctx.fill()
            ctx.stroke()
            ctx.restore()

            ctx.save()
            ctx.lineWidth = 2
            ctx.strokeStyle = "white"
            ctx.beginPath()
            ctx.arc(0, 0, controls.radius/3-5, 0, Math.PI*2, true)
            ctx.stroke()
            ctx.restore() 

            ctx.save()
            ctx.lineWidth = 4
            ctx.strokeStyle = "red"
            ctx.beginPath()
            ctx.arc(0, 0, controls.radius, (0.75*Math.PI), (1.25*Math.PI))
            ctx.stroke()
            ctx.restore() 

            ctx.save()
            ctx.lineWidth = 2
            ctx.strokeStyle = "white"
            ctx.beginPath()
            ctx.arc(0, 0, controls.radius-15, (1.25*Math.PI), (0.75*Math.PI))
            ctx.stroke()
            ctx.restore() 

            ctx.save()
            ctx.strokeStyle = "white"
            ctx.beginPath()
            ctx.arc(0, 0, controls.radius-30, (1.25*Math.PI), (0.75*Math.PI))
            ctx.stroke()
            ctx.restore() 

            ctx.save()
            ctx.lineWidth = 4
            ctx.strokeStyle = "white"
            ctx.fillStyle = "white"
            ctx.rotate(Math.PI/1.33)
            ctx.beginPath()
            for (var i = 0; i <= 240; i++)
            {
                if(i % 30 == 0){
                    ctx.moveTo(0, controls.radius-15)
                    ctx.lineTo(0, controls.radius-30)
                    ctx.save()
                    ctx.translate(0, controls.radius-25)
                    ctx.restore()
                }
                ctx.rotate((Math.PI*2-Math.PI/2)/240)
            }
            ctx.stroke()
            ctx.restore()  

            ctx.save()
            ctx.lineWidth = 2
            ctx.strokeStyle = "white"
            ctx.fillStyle = "white"
            ctx.rotate(Math.PI/1.33)
            ctx.beginPath()
            for (var i = 0; i <= 240; i++)
            {
                if(i > 180 && i < 195){
                    ctx.strokeStyle = "white"
                    ctx.moveTo(0, controls.radius-17)
                    ctx.lineTo(0, controls.radius-28)
                    ctx.save()
                    ctx.translate(0, controls.radius-25)
                    ctx.restore()
                }
                ctx.rotate((Math.PI*2-Math.PI/2)/240)
            }
            ctx.stroke()
            ctx.restore()  
            ctx.save()
            ctx.lineWidth = 4
            ctx.strokeStyle = "red"
            ctx.rotate(Math.PI/1.33)
            ctx.beginPath()
            for (var i = 0; i <= 240; i++)
            {
                if(i >= 195 && i < 210){
                    ctx.moveTo(0, controls.radius-16)
                    ctx.lineTo(0, controls.radius-29)
                    ctx.save()
                    ctx.translate(0, controls.radius-25)
                    ctx.restore()
                }
                ctx.rotate((Math.PI*2-Math.PI/2)/240)
            }
            ctx.stroke()
            ctx.restore()  
            ctx.save()
            ctx.lineWidth = 2
            ctx.strokeStyle = "red"
            ctx.rotate(Math.PI/1.33)
            ctx.beginPath()
            for (var i = 0; i <= 160; i++)
            {
                if(i >= 140 && i < 160){
                    ctx.moveTo(0, controls.radius-17)
                    ctx.lineTo(0, controls.radius-28)
                    ctx.save()
                    ctx.translate(0, controls.radius-25)
                    ctx.restore()
                }
                ctx.rotate((Math.PI*2-Math.PI/2)/160)
            }
            ctx.stroke()
            ctx.restore()  

            ctx.save()
            ctx.lineWidth = 3
            ctx.strokeStyle = "white"
            ctx.rotate(Math.PI/1.33)
            ctx.beginPath()
            for (var i = 0; i <= 60; i++)
            {
                if(i % 10 == 0){
                    ctx.moveTo(0, controls.radius-35)
                    ctx.lineTo(0, controls.radius-48)
                    ctx.save()
                    ctx.translate(0, controls.radius-25)
                    ctx.restore()
                }else if(i % 5 == 0){
                    ctx.moveTo(0, controls.radius-35)
                    ctx.lineTo(0, controls.radius-40)
                    ctx.save()
                    ctx.translate(0, controls.radius-25)
                    ctx.restore()
                }
                ctx.rotate((Math.PI*2-Math.PI/2)/80)
            }
            ctx.stroke()
            ctx.restore()  

            ctx.save()
            ctx.lineWidth = 3
            ctx.strokeStyle = "red"
            ctx.rotate(-Math.PI/34)
            ctx.beginPath()
            for (var i = 65; i <= 70; i++)
            {
                if(i % 10 == 0){
                    ctx.moveTo(0, controls.radius-35)
                    ctx.lineTo(0, controls.radius-48)
                    ctx.save()
                    ctx.translate(0, controls.radius-25)
                    ctx.restore()
                }else if(i % 5 == 0){
                    ctx.moveTo(0, controls.radius-35)
                    ctx.lineTo(0, controls.radius-40)
                    ctx.save()
                    ctx.translate(0, controls.radius-25)
                    ctx.restore()
                }
                ctx.rotate((Math.PI*2-Math.PI/2)/80)
            }
            ctx.stroke()
            ctx.restore()  
            
            ctx.save()
            ctx.strokeStyle = "white"
            ctx.beginPath()
            ctx.arc(0, 0, controls.radius-85, (1.25*Math.PI), (0.75*Math.PI))
            ctx.stroke()
            ctx.restore() 

            ctx.save()
            ctx.strokeStyle = "white"
            ctx.beginPath()
            ctx.arc(0, 0, controls.radius-110, (1.25*Math.PI), (0.75*Math.PI))
            ctx.stroke()
            ctx.restore() 

            ctx.save()
            ctx.lineWidth = 15
            var gradient = context.createRadialGradient(0,10,10,10,20,230)
            gradient.addColorStop(0.0, "green")
            gradient.addColorStop(0.7, "orange")
            gradient.addColorStop(1.0, "red")
            ctx.strokeStyle = gradient
            ctx.beginPath()
            if(currentValue < 40){
                ctx.arc(0, 0, controls.radius-23,(1.25*Math.PI), ((currentValue+66.7)/53.36*Math.PI))
            }else{
                ctx.arc(0, 0, controls.radius-23,(1.25*Math.PI), ((currentValue-40)/53.3*Math.PI))
            }
            
            ctx.stroke()

            ctx.save()
            ctx.lineWidth = 2
            ctx.strokeStyle = "white"
            ctx.rotate(Math.PI/1.33)
            ctx.beginPath()
            for (var i = 0; i <= currentValue; i++)
            {
                if(i < 65){
                    ctx.moveTo(0, controls.radius-35)
                    ctx.lineTo(0, controls.radius-45)
                    ctx.save()
                    ctx.translate(0, controls.radius-25)
                    ctx.restore()
                    ctx.rotate((Math.PI*2-Math.PI/2)/80)
                }
                
            }
            ctx.stroke()
            ctx.restore()

            ctx.save()
            ctx.lineWidth = 2
            ctx.strokeStyle = "red"
            ctx.rotate(Math.PI/1.33)
            ctx.beginPath()
            for (var i = 0; i <= currentValue; i++)
            {
                if(i >= 65){
                    ctx.moveTo(0, controls.radius-35)
                    ctx.lineTo(0, controls.radius-45)
                    ctx.save()
                    ctx.translate(0, controls.radius-25)
                    ctx.restore()
                }
                ctx.rotate((Math.PI*2-Math.PI/2)/80)
                
            }
            ctx.stroke()
            ctx.restore()

            ctx.save()
            ctx.lineWidth = 5 
            ctx.strokeStyle = "red"
            ctx.fillStyle = "red"
            ctx.rotate(Math.PI/1.33)
            ctx.rotate(((Math.PI*2-Math.PI/2)/80)*((controls.currentValue))) 
            ctx.beginPath()     
            ctx.lineTo(0,controls.radius/3-5)    
            ctx.lineTo(4,controls.radius/3-5)   
            ctx.lineTo(0,controls.radius-55)   
            ctx.lineTo(-4,controls.radius/3-5)  
            ctx.closePath()
            ctx.fill()
            ctx.stroke()
            ctx.restore()

        }
    }
}

Vehicle_speed.qml

import QtQuick 2.9

Rectangle {
    id: control
    
    color: Qt.rgba(0,0,0,0.0)

    property real radius: control.width > control.height ? control.height/2-10 : control.width/2-22
    property real currentValue: 0

    onCurrentValueChanged: {
        canvas.requestPaint()
    }

    Canvas {
        id: canvas
        antialiasing: true
        anchors.fill: parent
        width: parent.width
        height: parent.height
        onPaint: {
            var ctx = getContext("2d")
            ctx.reset() 
            


            ctx.lineWidth = 3
            ctx.fillStyle = Qt.rgba(0,0,0,0.0)
            ctx.strokeStyle = Qt.rgba(0,0,0,0.0)
            ctx.translate(width/2, height/2)

            ctx.save()
            ctx.fillStyle = Qt.rgba(0,0,0,0.0)
            ctx.strokeStyle ="#333333"
            ctx.beginPath()
            ctx.arc(0, 0, (parent.radius/2), 0, Math.PI*2)
            ctx.closePath()
            ctx.fill()
            ctx.stroke()
            ctx.restore()

            ctx.save()
            ctx.lineWidth = 3
            ctx.strokeStyle = "white"
            ctx.fillStyle = "white"
            ctx.rotate(-Math.PI/3)
            ctx.beginPath()
            for (var i = 0; i <= 220/2; i++)
            {
                if( i != 25 && i != 15){
                    ctx.moveTo(0, control.radius-5)
                    ctx.lineTo(0, control.radius-10)
                    ctx.save()
                    ctx.translate(0, control.radius-25)
                    ctx.restore()
                }
                ctx.rotate((Math.PI*2-Math.PI/3)/220*2)
            }
            ctx.stroke()
            ctx.restore() 

            ctx.save()
            ctx.lineWidth = 3
            ctx.strokeStyle = "#6880E6"
            ctx.fillStyle = "#6880E6"
            ctx.rotate(-Math.PI/3)
            ctx.beginPath()
            for (var i = 0; i <= control.currentValue/2; i++)
            {
                if( i != 25 && i != 15){
                    ctx.moveTo(0, control.radius-5)
                    ctx.lineTo(0, control.radius-10)
                    ctx.save()
                    ctx.translate(0, control.radius-25)
                    ctx.restore()
                }
                ctx.rotate((Math.PI*2-Math.PI/3)/220*2)
            }
            ctx.stroke()
            ctx.restore() 

 
            ctx.save()
            ctx.lineWidth = 4
            ctx.strokeStyle = "white"
            ctx.fillStyle = "white"
            ctx.rotate(-Math.PI/3)
            ctx.beginPath()
            for (var i = 0; i <= 220/2; i++)
            {
                if(i % 5 == 0 && i != 25 && i != 15){
                    ctx.moveTo(0, control.radius-5)
                    ctx.lineTo(0, control.radius-13)
                    ctx.save()
                    ctx.translate(0, control.radius-25)
                    ctx.restore()
                }
                ctx.rotate((Math.PI*2-Math.PI/3)/220*2)
            }
            ctx.stroke()
            ctx.restore()  
      
            ctx.save()
            ctx.lineWidth = 4
            ctx.strokeStyle = "red"
            ctx.fillStyle = "red"
            ctx.rotate(-Math.PI/3)
            ctx.beginPath()
            for (var i = 0; i <= 220/2; i++)
            {
                if(i == 25 || i == 15){
                    ctx.moveTo(0, control.radius-5)
                    ctx.lineTo(0, control.radius-15)
                    ctx.save()
                    ctx.translate(0, control.radius-25)
                    ctx.restore()
                }
                ctx.rotate((Math.PI*2-Math.PI/3)/220*2)
            }
            ctx.stroke()
            ctx.restore()

            ctx.save()
            ctx.strokeStyle = "#6880E6"
            ctx.beginPath()
            ctx.arc(0, 0, control.radius, (30/180*Math.PI), (330/180*Math.PI))
            ctx.stroke()
            ctx.restore() 

            ctx.save()
            ctx.strokeStyle = "#6880E6"
            ctx.beginPath()
            ctx.arc(0, 0, control.radius+20, (330/180*Math.PI), (30/180*Math.PI))
            ctx.stroke()
            ctx.restore() 

            ctx.save()
            ctx.strokeStyle = "#333333"
            ctx.beginPath()
            ctx.arc(0, 0, control.radius, (330/180*Math.PI), (30/180*Math.PI))
            ctx.stroke()
            ctx.restore() 

            ctx.save()
            ctx.lineWidth = 10
            ctx.strokeStyle = "#9BABEF"
            ctx.beginPath()
            ctx.arc(0, 0, control.radius/1.9, (30/180*Math.PI), ((control.currentValue+22)/132*Math.PI))
            ctx.stroke()

            ctx.save()
            ctx.lineWidth = 5
            ctx.strokeStyle = "white"
            ctx.fillStyle = "white"
            ctx.rotate(-Math.PI/3)
            ctx.rotate(((Math.PI*2-Math.PI/3)/220)*((control.currentValue)) )
            ctx.beginPath()     
            ctx.lineTo(0,control.radius-88)    
            ctx.lineTo(1,control.radius-88)   
            ctx.lineTo(0,control.radius-65)   
            ctx.lineTo(-1,control.radius-88)   
            ctx.closePath()
            ctx.fill()
            ctx.stroke()
            ctx.restore()

        }
    }
}

Vehicle_temp.qml

import QtQuick 2.9

Rectangle {
    id: control

    color: Qt.rgba(0,0,0,0.0)

    property real currentValue: 90

    onCurrentValueChanged: {
        canvas.requestPaint()
    }

    Canvas {
        id: canvas
        
        antialiasing: true
        width: parent.width
        height: parent.height
        onPaint: {
            var ctx = getContext("2d")
            ctx.reset() 

            ctx.lineWidth = 3
            ctx.strokeStyle ="red"
            ctx.save()
            ctx.beginPath()
            ctx.moveTo(26, 40)
            ctx.lineTo(35, 40)
            ctx.stroke()
            ctx.restore() 
            ctx.strokeStyle ="white"
            ctx.save()
            ctx.beginPath()
            ctx.moveTo(25, 70)
            ctx.lineTo(39, 70)
            ctx.stroke()
            ctx.restore() 
            ctx.save()
            ctx.beginPath()
            ctx.moveTo(24, 100)
            ctx.lineTo(33, 100)
            ctx.stroke()
            ctx.restore() 
            ctx.save()
            ctx.lineWidth = 4
            ctx.beginPath()
            ctx.moveTo(23, 130)
            ctx.lineTo(37, 130)
            ctx.stroke()
            ctx.restore()  
            ctx.save()
            ctx.lineWidth = 3
            ctx.beginPath()
            ctx.moveTo(22, 160)
            ctx.lineTo(31, 160)
            ctx.stroke()
            ctx.restore() 
            ctx.save()
            ctx.beginPath()
            ctx.moveTo(21, 190)
            ctx.lineTo(35, 190)
            ctx.stroke()
            ctx.restore() 
            ctx.save()
            ctx.beginPath()
            ctx.moveTo(20, 220)
            ctx.lineTo(29, 220)
            ctx.stroke()
            ctx.restore()  

            ctx.save()
            ctx.lineWidth = 5
            var gradient = context.createLinearGradient(5, 250, 12, 10)
            gradient.addColorStop(0.0, "blue")
            gradient.addColorStop(0.5, "white")
            gradient.addColorStop(1.0, "red")
            ctx.strokeStyle = gradient
            ctx.beginPath()
            ctx.moveTo(5, 250)
            ctx.lineTo(5+((control.currentValue-50)/10), 250-(30*((control.currentValue-50)/10)))
            ctx.stroke()     

            ctx.save()
            ctx.lineWidth = 10
            ctx.strokeStyle = "black"

            for(var i = 0; i < 7;i++ ){
                ctx.save()
                ctx.beginPath()
                ctx.moveTo(6+i,220-(30*i )+ 3)
                ctx.lineTo(6+i,220-(30*i )- 3)
                ctx.stroke()  
                ctx.restore()  
            }
            
            ctx.save()
            context.drawImage("./imgs/watertemw.png",35+((control.currentValue-50)/10),220-((control.currentValue-50)/10*27.5),25,25)
            ctx.restore() 

        }

    }
    
}

view.qml

import QtQuick 2.9
import QtQuick.Controls 2.2
import QtGraphicalEffects 1.0

Page {
    visible: true
    id: page
    width: 1920
    height: 1080

    property real singal: 0
  
    property real iconPositionY: 300
    property real iconWidth: 25
    property real iconHeight: 25
    property real iconMargin: 50
    

    Rectangle {
        id: root
        width: parent.width
        height: parent.height

        color:"black"

        Vehicle_rpm {
            id: vehicle_rpm
            x: (parent.width / 8* 5) + (parent.width/9.6)
            y: parent.height/10*3+20 + (parent.width/9.6)
            width: 0
            height: 0
            
            Text {
                id: p
                x: 157
                y: 168
                width: 89
                height: 44
                text: "P"
                style: Text.Normal
                color: Qt.rgba(0,0,0,0)
                font.weight: Font.ExtraBold
                font.capitalization: Font.MixedCase
                font.pixelSize: 60
                font.bold: true
                font.family: "Verdana"
                horizontalAlignment: Text.AlignHCenter
            }
            Text {
                id: rpm
                x: 30
                y: 130
                width: 89
                height: 44
                text: value_rpm.value
                style: Text.Normal
                color: Qt.rgba(0,0,0,0)
                font.weight: Font.ExtraBold
                font.capitalization: Font.MixedCase
                font.pixelSize: 60
                font.bold: true
                font.italic: true
                font.family: "Verdana"
                horizontalAlignment: Text.AlignHCenter
            }
            Text {
                id: rpm1000
                x: 32
                y: 230
                width: 89
                height: 44
                text: "RPM*1000"
                style: Text.Normal
                color: Qt.rgba(0,0,0,0)
                font.weight: Font.ExtraBold
                font.capitalization: Font.MixedCase
                font.pixelSize: 16
                font.bold: true
                font.italic: true
                font.family: "Verdana"
                horizontalAlignment: Text.AlignHCenter
            }
            Text {
                id: rpm0
                x: 65
                y: 93
                width: 89
                height: 44
                text: "0"
                style: Text.Normal
                color: Qt.rgba(0,0,0,0)
                font.weight: Font.ExtraBold
                font.capitalization: Font.MixedCase
                font.pixelSize: 25
                font.bold: true
                font.italic: true
                font.family: "Verdana"
                horizontalAlignment: Text.AlignHCenter
            }
            Text {
                id: rpm1
                x: 130
                y: 58
                width: 89
                height: 44
                text: "1"
                style: Text.Normal
                color: Qt.rgba(0,0,0,0)
                font.weight: Font.ExtraBold
                font.capitalization: Font.MixedCase
                font.pixelSize: 25
                font.bold: true
                font.italic: true   
                font.family: "Verdana"
                horizontalAlignment: Text.AlignHCenter
            }      
            Text {
                id: rpm2
                x: 206
                y: 66
                width: 89
                height: 44
                text: "2"
                style: Text.Normal
                color: Qt.rgba(0,0,0,0)
                font.weight: Font.ExtraBold
                font.capitalization: Font.MixedCase
                font.pixelSize: 25
                font.bold: true
                font.italic: true   
                font.family: "Verdana"
                horizontalAlignment: Text.AlignHCenter
            }  
            Text {
                id: rpm3
                x: 262
                y: 110
                width: 89
                height: 44
                text: "3"
                style: Text.Normal
                color: Qt.rgba(0,0,0,0)
                font.weight: Font.ExtraBold
                font.capitalization: Font.MixedCase
                font.pixelSize: 25
                font.bold: true
                font.italic: true   
                font.family: "Verdana"
                horizontalAlignment: Text.AlignHCenter
            }    
            Text {
                id: rpm4
                x: 286 
                y: 182
                width: 89
                height: 44
                text: "4"
                style: Text.Normal
                color: Qt.rgba(0,0,0,0)
                font.weight: Font.ExtraBold
                font.capitalization: Font.MixedCase
                font.pixelSize: 25
                font.bold: true
                font.italic: true   
                font.family: "Verdana"
                horizontalAlignment: Text.AlignHCenter
            }    
            Text {
                id: rpm5
                x: 263
                y: 255
                width: 89
                height: 44
                text: "5"
                style: Text.Normal
                color: Qt.rgba(0,0,0,0)
                font.weight: Font.ExtraBold
                font.capitalization: Font.MixedCase
                font.pixelSize: 25
                font.bold: true
                font.italic: true   
                font.family: "Verdana"
                horizontalAlignment: Text.AlignHCenter
            }  
            Text {
                id: rpm6
                x: 206 
                y: 302
                width: 89
                height: 44
                text: "6"
                style: Text.Normal
                color: Qt.rgba(0,0,0,0)
                font.weight: Font.ExtraBold
                font.capitalization: Font.MixedCase
                font.pixelSize: 25
                font.bold: true
                font.italic: true   
                font.family: "Verdana"
                horizontalAlignment: Text.AlignHCenter
            }  
            Text {
                id: rpm7
                x: 130
                y: 310
                width: 89
                height: 44
                text: "7"
                style: Text.Normal
                color: Qt.rgba(0,0,0,0)
                font.weight: Font.ExtraBold
                font.capitalization: Font.MixedCase
                font.pixelSize: 25
                font.bold: true
                font.italic: true   
                font.family: "Verdana"
                horizontalAlignment: Text.AlignHCenter
                
            }
            
            Rectangle {
                id: warn_rpm
                x: 140
                y: 140
                width: 120
                height: 120
                radius: 160
                color: Qt.rgba(0,0,0,0.0)
                border.width:5
                border.color: Qt.rgba(0,0,0,0.0)
            }      
            DropShadow {
                id: shadow_rpm
                anchors.fill: warn_rpm
                horizontalOffset: 0
                verticalOffset: 0
                radius: 1
                samples: 10
                color: Qt.rgba(0,0,0,0.0)
                source: warn_rpm
            }
            ParallelAnimation {
                id: anmi_rpm
                NumberAnimation {
                    loops: 5
                    target: shadow_rpm
                    properties: "radius"
                    from: 50
                    to: 0
                    duration: 1000
                }
            }

        }
        Vehicle_speed {
            id: vehicle_speed
            x: (parent.width / 8 * 3 - parent.width/4.8) + (parent.width/9.6)
            y: parent.height/10*3+20 + (parent.width/9.6)
            width: 0
            height: 0
            Text {
                id: speed
                x: 157
                y: 130
                width: 89
                height: 44
                text: value_speed.value
                style: Text.Normal
                color: Qt.rgba(0,0,0,0)
                font.weight: Font.ExtraBold
                font.capitalization: Font.MixedCase
                font.pixelSize: 60
                font.bold: true
                font.italic: true
                font.family: "Verdana"
                horizontalAlignment: Text.AlignHCenter
            }
            Text {
                id: km
                x: 157
                y: 220
                width: 89
                height: 44
                text: "Km/h"
                style: Text.Normal
                color: Qt.rgba(0,0,0,0)
                font.weight: Font.ExtraBold
                font.capitalization: Font.MixedCase
                font.pixelSize: 20
                font.bold: true
                font.italic: true
                font.family: "Verdana"
                horizontalAlignment: Text.AlignHCenter
            }
            Text {
                id: speed0
                x: 288
                y: 268
                width: 89
                height: 44
                text: "0"
                style: Text.Normal
                color: Qt.rgba(0,0,0,0)
                font.weight: Font.ExtraBold
                font.capitalization: Font.MixedCase
                font.pixelSize: 17
                font.bold: true
                font.family: "Verdana"
                horizontalAlignment: Text.AlignHCenter
            }
            Text {
                id: speed20
                x: 240
                y: 315  
                width: 89
                height: 44
                text: "20"
                style: Text.Normal
                color: Qt.rgba(0,0,0,0)
                font.weight: Font.ExtraBold
                font.capitalization: Font.MixedCase
                font.pixelSize: 17
                font.bold: true
                font.family: "Verdana"
                horizontalAlignment: Text.AlignHCenter
            }
            Text {
                id: speed40
                x: 172
                y: 342 
                width: 89
                height: 44
                text: "40"
                style: Text.Normal
                color: Qt.rgba(0,0,0,0)
                font.weight: Font.ExtraBold
                font.capitalization: Font.MixedCase
                font.pixelSize: 17
                font.bold: true
                font.family: "Verdana"
                horizontalAlignment: Text.AlignHCenter
            }
            Text {
                id: speed60
                x: 97
                y: 330 
                width: 89
                height: 44
                text: "60"
                style: Text.Normal
                color: Qt.rgba(0,0,0,0)
                font.weight: Font.ExtraBold
                font.capitalization: Font.MixedCase
                font.pixelSize: 17
                font.bold: true
                font.family: "Verdana"
                horizontalAlignment: Text.AlignHCenter
            }
            Text {
                id: speed80
                x: 48
                y: 295
                width: 89
                height: 44
                text: "80"
                style: Text.Normal
                color: Qt.rgba(0,0,0,0)
                font.weight: Font.ExtraBold
                font.capitalization: Font.MixedCase
                font.pixelSize: 17
                font.bold: true
                font.family: "Verdana"
                horizontalAlignment: Text.AlignHCenter
            }
            Text {
                id: speed100
                x: 18
                y: 228
                width: 89
                height: 44
                text: "100"
                style: Text.Normal
                color: Qt.rgba(0,0,0,0)
                font.weight: Font.ExtraBold
                font.capitalization: Font.MixedCase
                font.pixelSize: 17
                font.bold: true
                font.family: "Verdana"
                horizontalAlignment: Text.AlignHCenter
            }
            Text {
                id: speed120
                x: 18
                y: 148
                width: 89
                height: 44
                text: "120"
                style: Text.Normal
                color: Qt.rgba(0,0,0,0)
                font.weight: Font.ExtraBold
                font.capitalization: Font.MixedCase
                font.pixelSize: 17
                font.bold: true
                font.family: "Verdana"
                horizontalAlignment: Text.AlignHCenter
            }
            Text {
                id: speed140
                x: 51
                y: 85
                width: 89
                height: 44
                text: "140"
                style: Text.Normal
                color: Qt.rgba(0,0,0,0)
                font.weight: Font.ExtraBold
                font.capitalization: Font.MixedCase
                font.pixelSize: 17
                font.bold: true
                font.family: "Verdana"
                horizontalAlignment: Text.AlignHCenter
            }
            Text {
                id: speed160
                x: 97
                y: 49 
                width: 89
                height: 44
                text: "160"
                style: Text.Normal
                color: Qt.rgba(0,0,0,0)
                font.weight: Font.ExtraBold
                font.capitalization: Font.MixedCase
                font.pixelSize: 17
                font.bold: true
                font.family: "Verdana"
                horizontalAlignment: Text.AlignHCenter
            }
            Text {
                id: speed180
                x: 172
                y: 38 
                width: 89
                height: 44
                text: "180"
                style: Text.Normal
                color: Qt.rgba(0,0,0,0)
                font.weight: Font.ExtraBold
                font.capitalization: Font.MixedCase
                font.pixelSize: 17
                font.bold: true
                font.family: "Verdana"
                horizontalAlignment: Text.AlignHCenter
            }
            Text {
                id: speed200
                x: 235
                y: 61  
                width: 89
                height: 44
                text: "200"
                style: Text.Normal
                color: Qt.rgba(0,0,0,0)
                font.weight: Font.ExtraBold
                font.capitalization: Font.MixedCase
                font.pixelSize: 17
                font.bold: true
                font.family: "Verdana"
                horizontalAlignment: Text.AlignHCenter
            }
            Text {
                id: speed220
                x: 275
                y: 108
                width: 89
                height: 44
                text: "220"
                style: Text.Normal
                color: Qt.rgba(0,0,0,0)
                font.weight: Font.ExtraBold
                font.capitalization: Font.MixedCase
                font.pixelSize: 17
                font.bold: true
                font.family: "Verdana"
                horizontalAlignment: Text.AlignHCenter
            }
            
        }

        Vehicle_oil {
            id: vehicle_oil
            x: (parent.width / 8* 6) + 223
            y: parent.height/10*3+20 + 340
            width: 0
            height: 0
            Text {
                id: oil0
                x: -3
                y: 240
                width: 89
                height: 44
                text: "0"
                style: Text.Normal
                color: Qt.rgba(0,0,0,0)
                font.weight: Font.ExtraBold
                font.capitalization: Font.MixedCase
                font.pixelSize: 15
                font.bold: true
                font.family: "Verdana"
                horizontalAlignment: Text.AlignHCenter
            }
            Text {
                id: oil1
                x: -10
                y: 7
                width: 89
                height: 44
                text: "1"
                style: Text.Normal
                color: Qt.rgba(0,0,0,0)
                font.weight: Font.ExtraBold
                font.capitalization: Font.MixedCase
                font.pixelSize: 15
                font.bold: true 
                font.family: "Verdana"
                horizontalAlignment: Text.AlignHCenter
            }      
        }

        Vehicle_temp {
            id: vehicle_temp
            x: (parent.width / 8) - 51
            y: parent.height/10*3+20 + 340
            width: 0
            height: 0
            Text {
                id: temp50
                x: -16
                y: 240
                width: 89
                height: 44
                text: "50"
                style: Text.Normal
                color: Qt.rgba(0,0,0,0)
                font.weight: Font.ExtraBold
                font.capitalization: Font.MixedCase
                font.pixelSize: 15
                font.bold: true
                font.family: "Verdana"
                horizontalAlignment: Text.AlignHCenter
            }
            Text {
                id: temp130
                x: -5
                y: 3
                width: 89
                height: 44
                text: "130"
                style: Text.Normal
                color: Qt.rgba(0,0,0,0)
                font.weight: Font.ExtraBold
                font.capitalization: Font.MixedCase
                font.pixelSize: 15
                font.bold: true 
                font.family: "Verdana"
                horizontalAlignment: Text.AlignHCenter
            }        
        }

        Rectangle {
            id: back_border
            width: parent.width
            height: parent.height/2.5
            x: 0
            y: height / 1.5
            color: Qt.rgba(0,0,0,0)
            Image {
                id: left_border
                height:parent.height -(parent.width/10)
                width:height/2.5
                x: parent.width / 2 - 200 - width
                y: (parent.height - height) / 1.5
                source: "./imgs/left.png"
                opacity: 0
            }
            Image {
                id: right_border
                height:parent.height -(parent.width/10)
                width:height/2.5
                x: parent.width / 2 + 200
                y: (parent.height - height) / 1.5
                source: "./imgs/right.png"
                opacity: 0
            }
        }

        Rectangle {
            id: cricle
            width: 200
            height: 200
            x: (parent.width - width) / 2
            y: (parent.height - height) / 2
            radius: 100
            color: "black"
            border.width: 5
            border.color: "white"
            Image {
                id: logo
                anchors.centerIn: parent
                source: "./imgs/logo.png"
                opacity: 0
            }
        }

        DropShadow {
            id: shadow
            anchors.fill: cricle
            horizontalOffset: 0
            verticalOffset: 0
            radius: 20
            samples: 16
            color: "white"
            source: cricle
        }

        Rectangle {
            width: iconWidth
            height: iconHeight
            x: (parent.width - width) / 2
            y: iconPositionY
            radius: 25
            color: "black"
            Image {
                id: adaptivecurise
                anchors.fill: parent
                source: "./imgs/adaptivecurisey.png"
                opacity: 1
            }
        }
        Rectangle {
            width: iconWidth
            height: iconHeight
            x: (parent.width - width) / 2 + 1 * iconMargin
            y: iconPositionY
            radius: 25
            color: "black"
            Image {
                id: ab
                anchors.fill: parent
                source: "./imgs/Ab.png"
                opacity: 1
            }
        }
        Rectangle {
            width: iconWidth
            height: iconHeight
            x: (parent.width - width) / 2 - 1 * iconMargin
            y: iconPositionY
            radius: 25
            color: "black"
            Image {
                id: abs
                anchors.fill: parent
                source: "./imgs/absy.png"
                opacity: 1
            }
        }
        Rectangle {
            width: iconWidth
            height: iconHeight
            x: (parent.width - width) / 2 + 2 * iconMargin
            y: iconPositionY
            radius: 25
            color: "black"
            Image {
                id: airsac
                anchors.fill: parent
                source: "./imgs/airsacr.png"
                opacity: 1
            }
        }
        Rectangle {
            width: iconWidth
            height: iconHeight
            x: (parent.width - width) / 2 - 2 * iconMargin
            y: iconPositionY
            radius: 25
            color: "black"
            Image {
                id: alertlight
                anchors.fill: parent
                source: "./imgs/alertlighty.png"
                opacity: 1
            }
        }
        Rectangle {
            width: iconWidth
            height: iconHeight
            x: (parent.width - width) / 2 + 3 * iconMargin
            y: iconPositionY
            radius: 25
            color: "black"
            Image {
                id: breakfluide
                anchors.fill: parent
                source: "./imgs/breakfluide.png"
                opacity: 1
            }
        }
        Rectangle {
            width: iconWidth
            height: iconHeight
            x: (parent.width - width) / 2 - 3 * iconMargin
            y: iconPositionY
            radius: 25
            color: "black"
            Image {
                id: cardoor
                anchors.fill: parent
                source: "./imgs/cardoorr.png"
                opacity: 1
            }
        }
        Rectangle {
            width: iconWidth
            height: iconHeight
            x: (parent.width - width) / 2 + 4 * iconMargin
            y: iconPositionY
            radius: 25
            color: "black"
            Image {
                id: collide
                anchors.fill: parent
                source: "./imgs/collider.png"
                opacity: 1
            }
        }
        Rectangle {
            width: iconWidth
            height: iconHeight
            x: (parent.width - width) / 2 - 4 * iconMargin
            y: iconPositionY
            radius: 25
            color: "black"
            Image {
                id: cruisecontrol
                anchors.fill: parent
                source: "./imgs/cruisecontrolg.png"
                opacity: 1
            }
        }
        Rectangle {
            width: iconWidth
            height: iconHeight
            x: (parent.width - width) / 2 + 5 * iconMargin
            y: iconPositionY
            radius: 25
            color: "black"
            Image {
                id: ebd
                anchors.fill: parent
                source: "./imgs/ebdy.png"
                opacity: 1
            }
        }
        Rectangle {
            width: iconWidth
            height: iconHeight
            x: (parent.width - width) / 2 - 5 * iconMargin
            y: iconPositionY
            radius: 25
            color: "black"
            Image {
                id: eps
                anchors.fill: parent
                source: "./imgs/epsy.png"
                opacity: 1
            }
        }
        Rectangle {
            width: iconWidth
            height: iconHeight
            x: (parent.width - width) / 2 + 6 * iconMargin
            y: iconPositionY
            radius: 25
            color: "black"
            Image {
                id: espoff
                anchors.fill: parent
                source: "./imgs/espoffy.png"
                opacity: 1
            }
        }
        Rectangle {
            width: iconWidth
            height: iconHeight
            x: (parent.width - width) / 2 - 6 * iconMargin
            y: iconPositionY
            radius: 25
            color: "black"
            Image {
                id: esp
                anchors.fill: parent
                source: "./imgs/espy.png"
                opacity: 1
            }
        }
        Rectangle {
            width: iconWidth
            height: iconHeight
            x: (parent.width - width) / 2 + 7 * iconMargin
            y: iconPositionY
            radius: 25
            color: "black"
            Image {
                id: foglamp
                anchors.fill: parent
                source: "./imgs/foglampg.png"
                opacity: 1
            }
        }
        Rectangle {
            width: iconWidth
            height: iconHeight
            x: (parent.width - width) / 2 - 7 * iconMargin
            y: iconPositionY
            radius: 25
            color: "black"
            Image {
                id: gearbox
                anchors.fill: parent
                source: "./imgs/gearboxr.png"
                opacity: 1
            }
        }

        SequentialAnimation {
            id: anmi
            ParallelAnimation {
                NumberAnimation {
                    target: logo
                    properties: "opacity"
                    from: 0
                    to: 1
                    duration: 1500
                }
                NumberAnimation {
                    loops: 2
                    target: shadow
                    properties: "radius"
                    from: 30
                    to: 0
                    duration: 1000
                }
            }
            ParallelAnimation {
                NumberAnimation {
                    loops: 2
                    target: shadow
                    properties: "radius"
                    from: 30
                    to: 0
                    duration: 1000
                }
                NumberAnimation {
                    target: left_border
                    properties: "opacity"
                    from: 0
                    to: 1
                    duration: 1500
                }
                NumberAnimation {
                    target: right_border
                    properties: "opacity"
                    from: 0
                    to: 1
                    duration: 1500
                }

                NumberAnimation {
                    target: left_border
                    properties: "height"
                    to: page.height/4
                    duration: 1000
                }

                NumberAnimation {
                    target: right_border
                    properties: "height"
                    to: page.height/4
                    duration: 1000
                }
                

                NumberAnimation {
                    target: left_border
                    properties: "x"
                    to:  page.width / 2 - 100 - left_border.width
                    duration: 1000
                }

                NumberAnimation {
                    target: right_border
                    properties: "x"
                    to: page.width / 2 + 80
                    duration: 1000
                }

            }
            ParallelAnimation {
                SequentialAnimation {
                    ParallelAnimation {
                        NumberAnimation {
                            target: cricle
                            properties: "width"
                            to: 30
                            duration: 1000
                        }

                        NumberAnimation {
                            target: cricle
                            properties: "height"
                            to: 30
                            duration: 1000
                        }

                        NumberAnimation {
                            target: left_border
                            properties: "height"
                            to: page.height/2.5
                            duration: 700
                        }

                        NumberAnimation {
                            target: right_border
                            properties: "height"
                            to: page.height/2.5
                            duration: 700
                        }
                        

                        NumberAnimation {
                            target: left_border
                            properties: "x"
                            to:  page.width / 8 - page.width/25
                            duration: 700
                        }

                        NumberAnimation {
                            target: left_border
                            properties: "y"
                            to: (page.height/2.5 - left_border.height) / 3.5
                            duration: 700
                        }

                        NumberAnimation {
                            target: right_border
                            properties: "x"
                            to: page.width / 8 * 7 - right_border.width
                            duration: 700
                        }

                        NumberAnimation {
                            target: right_border
                            properties: "y"
                            to: (page.height/2.5 - right_border.height) / 3.5
                            duration: 700
                        }

                        NumberAnimation {
                            target: vehicle_rpm
                            properties: "width"
                            to: page.width/4.8
                            duration: 1000
                        }

                        NumberAnimation {
                            target: vehicle_rpm
                            properties: "height"
                            to: page.width/4.8
                            duration: 1000
                        }

                        NumberAnimation {
                            target: vehicle_rpm
                            properties: "x"
                            to:  page.width / 8 * 5
                            duration: 1000
                        }

                        NumberAnimation {
                            target: vehicle_rpm
                            properties: "y"
                            to:page.height/10*3+20
                            duration: 1000
                        }

                        NumberAnimation {
                            target: vehicle_speed
                            properties: "width"
                            to: page.width/4.8
                            duration: 1000
                        }

                        NumberAnimation {
                            target: vehicle_speed
                            properties: "height"
                            to: page.width/4.8
                            duration: 1000
                        }

                        NumberAnimation {
                            target: vehicle_speed
                            properties: "x"
                            to: page.width / 8 * 3 - page.width/4.8
                            duration: 1000
                        }

                        NumberAnimation {
                            target: vehicle_speed
                            properties: "y"
                            to: page.height/10*3+20
                            duration: 1000
                        }

                        NumberAnimation {
                            target: vehicle_oil
                            properties: "width"
                            to: 70
                            duration: 1000
                        }

                        NumberAnimation {
                            target: vehicle_oil
                            properties: "height"
                            to: 300
                            duration: 1000
                        }

                        NumberAnimation {
                            target: vehicle_oil
                            properties: "y"
                            to: page.height/10*3+20 + 90
                            duration: 1000
                        }

                        NumberAnimation {
                            target: vehicle_temp
                            properties: "width"
                            to: 70
                            duration: 1000
                        }

                        NumberAnimation {
                            target: vehicle_temp
                            properties: "height"
                            to: 300
                            duration: 1000
                        }

                        NumberAnimation {
                            target: vehicle_temp
                            properties: "y"
                            to: page.height/10*3+20 + 90
                            duration: 1000
                        }

                        NumberAnimation {
                            target: cricle
                            properties: "border.width"
                            to: 2
                            duration: 1000
                        }

                        NumberAnimation {
                            target: logo
                            properties: "opacity"
                            to: 0
                            duration: 1
                        }

                        // NumberAnimation {
                        //     target: cricle
                        //     properties: "x"
                        //     to: 100
                        //     duration: 1000
                        // }

                        NumberAnimation {
                            target: cricle
                            properties: "y"
                            to: 298
                            duration: 1000
                        }
                    }
                    ParallelAnimation{
                        NumberAnimation {
                            target: cricle
                            properties: "width"
                            to: 800
                            duration: 500
                            easing.type: "InCirc"
                        }
                        SequentialAnimation{
                            ColorAnimation {
                                target: p
                                properties: "color"
                                to: "white"
                                duration: 100
                            }
                            ColorAnimation {
                                target: rpm
                                properties: "color"
                                to: "white"
                                duration: 100
                            }
                            ColorAnimation {
                                target: rpm1000
                                properties: "color"
                                to: "white"
                                duration: 100
                            }
                            ColorAnimation {
                                target: rpm0
                                properties: "color"
                                to: "white"
                                duration: 100
                            }
                            ColorAnimation {
                                target: rpm1
                                properties: "color"
                                to: "white"
                                duration: 100
                            }
                            ColorAnimation {
                                target: rpm2
                                properties: "color"
                                to: "white"
                                duration: 100
                            }
                            ColorAnimation {
                                target: rpm3
                                properties: "color"
                                to: "white"
                                duration: 100
                            }
                            ColorAnimation {
                                target: rpm4
                                properties: "color"
                                to: "white"
                                duration: 100
                            }
                            ColorAnimation {
                                target: rpm5
                                properties: "color"
                                to: "white"
                                duration: 100
                            }
                            ColorAnimation {
                                target: rpm6
                                properties: "color"
                                to: "white"
                                duration: 100
                            }
                            ColorAnimation {
                                target: rpm7
                                properties: "color"
                                to: "red"
                                duration: 100
                            }
                        }
                        SequentialAnimation{
                            ColorAnimation {
                                target: oil0
                                properties: "color"
                                to: "red"
                                duration: 100
                            }
                            ColorAnimation {
                                target: oil1
                                properties: "color"
                                to: "white"
                                duration: 100
                            }
                            ColorAnimation {
                                target: temp50
                                properties: "color"
                                to: "white"
                                duration: 100
                            }
                            ColorAnimation {
                                target: temp130
                                properties: "color"
                                to: "red"
                                duration: 100
                            }
                        }
                        SequentialAnimation{
                            ColorAnimation {
                                target: speed
                                properties: "color"
                                to: "white"
                                duration: 100
                            }
                            ColorAnimation {
                                target: km
                                properties: "color"
                                to: "white"
                                duration: 100
                            }
                            ColorAnimation {
                                target: speed0
                                properties: "color"
                                to: "white"
                                duration: 100
                            }
                            ColorAnimation {
                                target: speed20
                                properties: "color"
                                to: "white"
                                duration: 100
                            }
                            ColorAnimation {
                                target: speed40
                                properties: "color"
                                to: "white"
                                duration: 100
                            }
                            ColorAnimation {
                                target: speed60
                                properties: "color"
                                to: "white"
                                duration: 100
                            }
                            ColorAnimation {
                                target: speed80
                                properties: "color"
                                to: "white"
                                duration: 100
                            }
                            ColorAnimation {
                                target: speed100
                                properties: "color"
                                to: "white"
                                duration: 100
                            }
                            ColorAnimation {
                                target: speed120
                                properties: "color"
                                to: "white"
                                duration: 100
                            }
                            ColorAnimation {
                                target: speed140
                                properties: "color"
                                to: "white"
                                duration: 100
                            }
                            ColorAnimation {
                                target: speed160
                                properties: "color"
                                to: "white"
                                duration: 100
                            }
                            ColorAnimation {
                                target: speed180
                                properties: "color"
                                to: "white"
                                duration: 100
                            }
                            ColorAnimation {
                                target: speed200
                                properties: "color"
                                to: "white"
                                duration: 100
                            }
                            ColorAnimation {
                                target: speed220
                                properties: "color"
                                to: "white"
                                duration: 100
                            }
                        }
                    }
                    ParallelAnimation {
                        NumberAnimation {
                            target: vehicle_rpm
                            properties: "currentValue"
                            from:0
                            to: value_rpm.value != 0 ? value_rpm.value : 80
                            duration: 700
                        }
                        NumberAnimation {
                            target: vehicle_speed
                            properties: "currentValue"
                            from:0
                            to: 220
                            duration: 700
                        }
                    }
                    ParallelAnimation {
                        NumberAnimation {
                            target: vehicle_rpm
                            properties: "currentValue"
                            from:80
                            to: 0
                            duration: 800
                        }
                        NumberAnimation {
                            target: vehicle_speed
                            properties: "currentValue"
                            from:220
                            to: 0
                            duration: 800
                        }
                    }
                }
            }
        }

        Timer {
            interval: 500
            running: true
            repeat: true
            onTriggered: {
                time.text = Qt.formatDateTime(new Date(), "yyyy-MM-dd hh:mm:ss")
                if(value_rpm.value != 0){
                    p.text = "D"
                    if(value_rpm.value > 65){
                        anmi_rpm.restart()
                        shadow_rpm.color = "red"
                        warn_rpm.border.color = "red"
                    }else{
                        anmi_rpm.stop()
                        shadow_rpm.color = Qt.rgba(0,0,0,0.0)
                        warn_rpm.border.color = Qt.rgba(0,0,0,0.0)
                    }
                }else{
                    p.text = "P"
                }
                if(singal == 0){
                    anmi.restart()
                    singal = 1
                }
            }
        }

        Text {
            id: time
            color: "white"
            font.pixelSize: 14
            anchors.centerIn: parent
        }
        Slider {
            id: value_rpm
            x:10
            y:parent.height-200
            width: 1900
            height: 20
            from: 0
            to: 80
            stepSize: 1
            value:0
            onValueChanged: {
                vehicle_rpm.currentValue = value_rpm.value
            }
        }

        Slider {
            id: value_speed
            x:10
            y:parent.height-100
            width: 1900
            height: 20
            from: 0
            to: 220
            stepSize: 1
            value:0
            onValueChanged: {
                vehicle_speed.currentValue = value_speed.value
            }
        }

        Slider {
            id: value_oil
            x:1000
            y:100
            width: 900
            height: 20
            from: 0
            to: 8
            stepSize: 1
            value:6
            onValueChanged: {
                vehicle_oil.currentValue = value_oil.value
            }
        }

        Slider {
            id: value_temp
            x:10
            y:100
            width: 900
            height: 20
            from: 50
            to: 130
            stepSize: 1
            value:90
            onValueChanged: {
                vehicle_temp.currentValue = value_temp.value
            }
        }
        
    }
}

图片放到imgs目录下，都是阿里巴巴矢量图标库下载的
在这里插入图片描述

zhangdy_plus
关注
  • 2
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
Qt/C++编写自定义控件10-云台仪表盘
Qt/C++视频监控/推流/物联网/大屏系统/自定义控件/UI定制/输入法
04-28 1677
前言 做过安防视频监控的同学都清楚，在视频监控系统软件上都可以看到一个云台控制区域，可以对球机进行下下左右等八个方位的运动控制，还可以进行复位，一般都是美工作图好，然后贴图的形式加入到软件中，好处是程序简单，界面美工，主要取决于美工的美图能力，缺点是对于各种分辨率的适应性稍微差点，需要不同的图片切图贴图，除非默认做好的是大图自适应看不出差别，可能大部分人所在的公司都是小公司，一般美工人员比较少甚至...
Qt/C++编写自定义控件49-飞机仪表盘
Qt/C++视频监控/推流/物联网/大屏系统/自定义控件/UI定制/输入法
08-12 5653
一、前言 飞行仪表是测定和表示飞机数据的工具，飞机中必不可少的一部分，飞行员根据飞行仪表表示的数据才能正确地做出判断。一般飞机仪表包括高度表+空速表+垂直速率表+姿态仪+航向指示表+转弯协调表。 这次要绘制的是其中的姿势仪，显示飞机相对于地平线的姿态，看姿态仪，飞行员能判断飞机姿态为偏左偏右，及偏上和偏下。姿态仪作用原理为一高度旋转的陀螺，不论飞机的姿态如何变化，此陀螺的定轴性在空间保持相同，因而...
用PyQt5设计汽车仪表盘——三色环表盘（一）（坐标转换，QPainter画环，画多边形）
温暖✿
08-12 5364
笔者参考了Qt侠的三色环汽车仪表盘设计图，用PyQt5写了一遍。项目涉及到很多笔者之前并不熟悉的知识点，学到不少东西，故写blog记录一下。 本篇先着重讲述仪表盘绘图部分。
基于python qml做的汽车仪表盘界面
qq_43623492的博客
12-11 1823
基于python与qml实现的汽车仪表盘界面
【PySide6】QML 与 Python 交互
最新发布
MYLK的博客
06-25 631
1. QML 中调用 Python 方法 2. Python 数据上报到 QML：信号方式
pyqt绘制仪表盘
weixin_49577420的博客
10-08 979
pyqt绘制仪表盘，练习pyqt如何绘制图像，该文章不是本人原创。
【Python】PyQt5 使用QPainter绘制简易仪表盘
qq_43950000的博客
11-12 5393
使用QPainter 制作简易仪表盘，绘制三色环、刻度线、刻度值、指针等。
qml调用python_Qml-通过python实现宏功能
weixin_39976413的博客
12-07 110
2020-08-31需求：有些情况下，共用代码应用在不同的场景下。例如C/C++可使用#define+#if+#elif+#endif组合方式。交由编译器进行处理。-- HeadFile.h...#define WIN_SC 0#define LINUX_SC 1...-- SourceFlie.cpp...#if WIN_SCprintf("WIN say hello\n");#elif LIN...
Qt/C++编写自定义控件3-速度仪表盘
Qt/C++视频监控/推流/物联网/大屏系统/自定义控件/UI定制/输入法
04-21 3382
前言 速度仪表盘，写作之初的本意是用来展示当前测试的网速用的，三色圆环+数码管显示当前速度，Qt自带了数码管控件QLCDNumber，直接集成即可，同时还带有动画功能，其实也可以用在汽车+工业领域等，展示汽车的当前速度和各种指标情况，比如生成领域的完成百分比等，控件采用纯painter绘制，自由拉伸不变形，背景透明的，贴上个背景图就会显得更漂亮。 实现的功能 1:可设置范围值,支持负数值 2:可...
Qt/C++编写自定义控件4-旋转仪表盘
Qt/C++视频监控/推流/物联网/大屏系统/自定义控件/UI定制/输入法
04-22 2972
前言 旋转仪表盘，一般用在需要触摸调节设置值的场景中，其实Qt本身就提供了QDial控件具有类似的功能，本控件最大的难点不在于绘制刻度和指针等，而在于自动计算当前用户按下处的坐标转换为当前值，这个功能想了很久，也看了QDial的源码，他里边写的非常复杂，最后还是参考的我打99分（100分留给自己未来写的书，哈哈！）的Qt书籍《c++ gui qt 4编程》中的篇章才写出来的，关键需要用到atan2...
QMLfor python pyside6
刘念卿的博客
11-30 764
QML是一种用于创建用户界面的声明性语言，它是Qt生态系统中的一部分。QML使用JavaScript语言和其独特的语法来定义用户界面组件，使得开发人员可以轻松地创建现代化、漂亮而又响应迅速的应用程序。QML是基于QtQuick技术构建的，QtQuick是一个基于OpenGL的场景图形库，它提供了高性能的渲染和动画效果。QML支持各种UI元素，如按钮、文本标签、图像、列表、表格等，并且可以轻松地在这些元素之间创建交互。
qml仪表盘.rar
10-25
qml仪表盘
Python操作qml对象过程详解
09-18
主要介绍了Python操作qml对象过程详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
QML使用Python的函数过程解析
09-18
主要介绍了QML使用Python的函数过程解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
python制作仪表盘图
2401_84003630的博客
04-12 462
set_global_opts(title_opts=opts.TitleOpts(title=“Gauge-改变轮盘内的字体”)).set_global_opts(title_opts=opts.TitleOpts(title=“半径改为 60%”))title_opts=opts.TitleOpts(title=“Gauge-分割段数-Label”),.add(“”, [(“完成率”, 66.6)], radius=“60%”)[(“完成率”, 55.5)],[(“完成率”, 66.6)],
qml调用python_QML与Python通信
weixin_39959126的博客
02-11 1286
对于Python3和QML通信，实际上就是PyQt5+QML+Python3混合编程，这是必须的，因为QML做图形界面比较容易，但是做功能实现就用Python比较好，虽然QML也能嵌入JavaScript代码进行实现，但是这样话还不如用Python来实现，代码简洁、易懂。对于以下的例子，参考了如下的连接：Connecting QML signals in PySide：PyQt 5.1.1 Ref...
Python运行QML文件的方法实现
热门推荐
生活屁颠过的博客
07-19 2万+
根元素 QML用户界面分解成一块块小的元素，每一元素都由很多组件构成。 根元素有很多，最广泛的是Item，也有Rectangle和window。 如果定义的是window ，那么qml文件必须要import QtQuick.Window ，否则会闪退。 Window根元素python调用 QML文件，命名为Qml1.qml。 由于定义的根元素的window，所以需要import import QtQuick.Window 注意：QML的文件命名第一个字母必须要大写。 import QtQuick 2.0 i
QML 与 Python 交互
YumOS的博客
06-15 3242
在 Qt 中，Python 和 QML 交互的两种方法。
QML之加速器仪表盘
huzhifei的专栏
12-12 339
QML 实现仪表盘加速器代码
使用Python和QML开发MeeGo应用
文章涵盖了从环境设置、基本的QML示例到为现有应用编写QML界面，再到打包Python应用程序的整个流程。" 在MeeGo操作系统上开发应用时，Python和QML结合提供了一种强大的工具集。Python以其易读性、丰富的库和强大的...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值