Skip to content

Commit 97ef1b0

Browse files
cppqtdevcppqtdev
authored
Add files via upload
1 parent bb5355b commit 97ef1b0

File tree

8 files changed

+1589
-0
lines changed

8 files changed

+1589
-0
lines changed

‎Car_1.pro

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
QT += quick qml
2+
3+
# You can make your code fail to compile if it uses deprecated APIs.
4+
# In order to do so, uncomment the following line.
5+
#DEFINES += QT_DISABLE_DEPRECATED_BEFORE=0x060000 # disables all the APIs deprecated before Qt 6.0.0
6+
7+
SOURCES += \
8+
main.cpp \
9+
radialbar.cpp
10+
11+
RESOURCES += qml.qrc
12+
13+
# Additional import path used to resolve QML modules in Qt Creator's code model
14+
QML_IMPORT_PATH =
15+
16+
# Additional import path used to resolve QML modules just for Qt Quick Designer
17+
QML_DESIGNER_IMPORT_PATH =
18+
19+
# Default rules for deployment.
20+
qnx: target.path = /tmp/$${TARGET}/bin
21+
else: unix:!android: target.path = /opt/$${TARGET}/bin
22+
!isEmpty(target.path): INSTALLS += target
23+
24+
HEADERS += \
25+
radialbar.h

‎Car_1.pro.user

Lines changed: 267 additions & 0 deletions
Large diffs are not rendered by default.

‎Gauge.qml

Lines changed: 161 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,161 @@
1+
import QtQuick 2.7
2+
import QtQuick.Controls 2.0
3+
import QtQuick.Controls.Styles 1.4
4+
import QtQuick.Extras 1.4
5+
import QtQuick.Layouts 1.3
6+
import QtQuick.Extras.Private 1.0
7+
import QtGraphicalEffects 1.0
8+
9+
CircularGauge {
10+
id: gauge
11+
property string speedColor: "#32D74B"
12+
function speedColorProvider(value){
13+
if(value < 60 ){
14+
return "#32D74B"
15+
} else if(value > 60 && value < 150){
16+
return "yellow"
17+
}else{
18+
return "Red"
19+
}
20+
}
21+
style: CircularGaugeStyle {
22+
labelStepSize: 10
23+
labelInset: outerRadius / 2.2
24+
tickmarkInset: outerRadius / 4.2
25+
minorTickmarkInset: outerRadius / 4.2
26+
minimumValueAngle: -144
27+
maximumValueAngle: 144
28+
29+
background: Rectangle {
30+
implicitHeight: gauge.height
31+
implicitWidth: gauge.width
32+
color: "#1E1E1E"
33+
anchors.centerIn: parent
34+
radius: 360
35+
opacity: 0.5
36+
37+
// Image {
38+
// anchors.fill: parent
39+
// source: "qrc:/assets/background.svg"
40+
// asynchronous: true
41+
// sourceSize {
42+
// width: width
43+
// }
44+
// }
45+
46+
Canvas {
47+
property int value: gauge.value
48+
49+
anchors.fill: parent
50+
onValueChanged: requestPaint()
51+
52+
function degreesToRadians(degrees) {
53+
return degrees * (Math.PI / 180);
54+
}
55+
56+
onPaint: {
57+
var ctx = getContext("2d");
58+
ctx.reset();
59+
60+
// Define the gradient colors for the filled arc
61+
var gradientColors = [
62+
"#32D74B", // Start color
63+
"yellow", // Middle color (you can add more colors for more segments)
64+
"red" // End color
65+
];
66+
67+
// Calculate the start and end angles for the filled arc
68+
var startAngle = valueToAngle(gauge.minimumValue) - 90;
69+
var endAngle = valueToAngle(gauge.value) - 90;
70+
71+
// Loop through the gradient colors and fill the arc segment with each color
72+
for (var i = 0; i < gradientColors.length; i++) {
73+
var gradientColor = speedColorProvider(gauge.value)
74+
speedColor = gradientColor
75+
var angle = startAngle + (endAngle - startAngle) * (i / gradientColors.length);
76+
77+
ctx.beginPath();
78+
ctx.lineWidth = outerRadius * 0.225;
79+
ctx.strokeStyle = gradientColor;
80+
ctx.arc(outerRadius,
81+
outerRadius,
82+
outerRadius - ctx.lineWidth / 2,
83+
degreesToRadians(angle),
84+
degreesToRadians(endAngle));
85+
ctx.stroke();
86+
}
87+
}
88+
89+
}
90+
}
91+
92+
needle: Item {
93+
visible: gauge.value.toFixed(0) > 0
94+
y: -outerRadius * 0.78
95+
height: outerRadius * 0.27
96+
Image {
97+
id: needle
98+
source: "qrc:/assets/needle.svg"
99+
height: parent.height
100+
width: height * 0.1
101+
asynchronous: true
102+
antialiasing: true
103+
}
104+
105+
Glow {
106+
anchors.fill: needle
107+
radius: 5
108+
samples: 10
109+
color: "white"
110+
source: needle
111+
}
112+
}
113+
114+
foreground: Item {
115+
ColumnLayout{
116+
anchors.centerIn: parent
117+
Label{
118+
text: gauge.value.toFixed(0)
119+
font.pixelSize: 85
120+
font.family: "Inter"
121+
color: "#01E6DE"
122+
font.bold: Font.DemiBold
123+
Layout.alignment: Qt.AlignHCenter
124+
}
125+
126+
Label{
127+
text: "MPH"
128+
font.pixelSize: 46
129+
font.family: "Inter"
130+
color: "#01E6DE"
131+
font.bold: Font.Normal
132+
Layout.alignment: Qt.AlignHCenter
133+
}
134+
}
135+
}
136+
137+
tickmarkLabel: Text {
138+
font.pixelSize: Math.max(6, outerRadius * 0.05)
139+
text: styleData.value
140+
color: styleData.value <= gauge.value ? "white" : "#777776"
141+
antialiasing: true
142+
}
143+
144+
tickmark: Image {
145+
source: "qrc:/assets/tickmark.svg"
146+
width: outerRadius * 0.018
147+
height: outerRadius * 0.15
148+
antialiasing: true
149+
asynchronous: true
150+
}
151+
152+
minorTickmark: Rectangle {
153+
implicitWidth: outerRadius * 0.01
154+
implicitHeight: outerRadius * 0.03
155+
156+
antialiasing: true
157+
smooth: true
158+
color: styleData.value <= gauge.value ? "white" : "darkGray"
159+
}
160+
}
161+
}

‎main.cpp

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
#include <QGuiApplication>
2+
#include <QQmlApplicationEngine>
3+
#include "radialbar.h"
4+
5+
int main(int argc, char *argv[])
6+
{
7+
#if QT_VERSION < QT_VERSION_CHECK(6, 0, 0)
8+
QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);
9+
#endif
10+
QGuiApplication app(argc, argv);
11+
12+
QQmlApplicationEngine engine;
13+
qmlRegisterType<RadialBar>("CustomControls", 1, 0, "RadialBar");
14+
const QUrl url(QStringLiteral("qrc:/main.qml"));
15+
QObject::connect(&engine, &QQmlApplicationEngine::objectCreated,
16+
&app, [url](QObject *obj, const QUrl &objUrl) {
17+
if (!obj && url == objUrl)
18+
QCoreApplication::exit(-1);
19+
}, Qt::QueuedConnection);
20+
engine.load(url);
21+
22+
return app.exec();
23+
}

0 commit comments

Comments
 (0)