├── Car Dashboard Guage.gif
├── Gauge.qml
├── Gauge2.qml
├── README
├── README.md
├── Screenshot 2023-08-12 184803.png
├── gauge-example.pro
├── gauge-example.pro.user
├── img
├── Ellipse 1.svg
├── Ellipse 5.svg
├── Ellipse 6.svg
├── Rectangle 4.svg
├── Subtract.svg
├── background.png
├── background.svg
├── cirlcle.svg
├── images.txt
├── maxLimit.svg
├── needle.svg
├── ring.svg
├── sub.svg
└── tickmark.svg
├── main.cpp
├── main.qml
└── qml.qrc
/Car Dashboard Guage.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cppqtdev/Car-Speedometer/363e03361cc2bf2c01192aaaf311cc7dbdecef58/Car Dashboard Guage.gif
--------------------------------------------------------------------------------
/Gauge.qml:
--------------------------------------------------------------------------------
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 | function speedColor(value){
12 | if(value < 60 ){
13 | return "green"
14 | } else if(value > 60 && value < 150){
15 | return "yellow"
16 | }else{
17 | return "Red"
18 | }
19 | }
20 | style: CircularGaugeStyle {
21 | labelStepSize: 10
22 | labelInset: outerRadius / 2.2
23 | tickmarkInset: outerRadius / 4.2
24 | minorTickmarkInset: outerRadius / 4.2
25 | minimumValueAngle: -144
26 | maximumValueAngle: 144
27 |
28 | background: Rectangle {
29 | implicitHeight: gauge.height
30 | implicitWidth: gauge.width
31 | color: "#1E1E1E"
32 | anchors.centerIn: parent
33 | radius: 360
34 |
35 | // Image {
36 | // anchors.fill: parent
37 | // source: "qrc:/img/background.svg"
38 | // asynchronous: true
39 | // sourceSize {
40 | // width: width
41 | // }
42 | // }
43 |
44 | Canvas {
45 | property int value: gauge.value
46 |
47 | anchors.fill: parent
48 | onValueChanged: requestPaint()
49 |
50 | function degreesToRadians(degrees) {
51 | return degrees * (Math.PI / 180);
52 | }
53 |
54 | onPaint: {
55 | var ctx = getContext("2d");
56 | ctx.reset();
57 |
58 | // Define the gradient colors for the filled arc
59 | var gradientColors = [
60 | "green", // Start color
61 | "yellow", // Middle color (you can add more colors for more segments)
62 | "red" // End color
63 | ];
64 |
65 | // Calculate the start and end angles for the filled arc
66 | var startAngle = valueToAngle(gauge.minimumValue) - 90;
67 | var endAngle = valueToAngle(gauge.value) - 90;
68 |
69 | // Loop through the gradient colors and fill the arc segment with each color
70 | for (var i = 0; i < gradientColors.length; i++) {
71 | var gradientColor = speedColor(gauge.value)
72 | var angle = startAngle + (endAngle - startAngle) * (i / gradientColors.length);
73 |
74 | ctx.beginPath();
75 | ctx.lineWidth = outerRadius * 0.225;
76 | ctx.strokeStyle = gradientColor;
77 | ctx.arc(outerRadius,
78 | outerRadius,
79 | outerRadius - ctx.lineWidth / 2,
80 | degreesToRadians(angle),
81 | degreesToRadians(endAngle));
82 | ctx.stroke();
83 | }
84 | }
85 |
86 | }
87 | }
88 |
89 | needle: Item {
90 | y: -outerRadius * 0.78
91 | height: outerRadius * 0.27
92 | Image {
93 | id: needle
94 | source: "qrc:/img/needle.svg"
95 | height: parent.height
96 | width: height * 0.1
97 | asynchronous: true
98 | antialiasing: true
99 | }
100 |
101 | Glow {
102 | anchors.fill: needle
103 | radius: 5
104 | samples: 10
105 | color: "white"
106 | source: needle
107 | }
108 | }
109 |
110 | foreground: Item {
111 |
112 | ColumnLayout{
113 | anchors.centerIn: parent
114 | Label{
115 | text: gauge.value.toFixed(0)
116 | font.pixelSize: 85
117 | font.family: "Inter"
118 | color: "#01E6DE"
119 | font.bold: Font.DemiBold
120 | Layout.alignment: Qt.AlignHCenter
121 | }
122 |
123 | Label{
124 | text: "MPH"
125 | font.pixelSize: 46
126 | font.family: "Inter"
127 | color: "#01E6DE"
128 | font.bold: Font.Normal
129 | Layout.alignment: Qt.AlignHCenter
130 | }
131 | }
132 | }
133 |
134 | tickmarkLabel: Text {
135 | font.pixelSize: Math.max(6, outerRadius * 0.05)
136 | text: styleData.value
137 | color: styleData.value <= gauge.value ? "white" : "#777776"
138 | antialiasing: true
139 | }
140 |
141 | tickmark: Image {
142 | source: "qrc:/img/tickmark.svg"
143 | width: outerRadius * 0.018
144 | height: outerRadius * 0.15
145 | antialiasing: true
146 | asynchronous: true
147 | }
148 |
149 | minorTickmark: Rectangle {
150 | implicitWidth: outerRadius * 0.01
151 | implicitHeight: outerRadius * 0.03
152 |
153 | antialiasing: true
154 | smooth: true
155 | color: styleData.value <= gauge.value ? "white" : "darkGray"
156 | }
157 | }
158 | }
159 |
--------------------------------------------------------------------------------
/Gauge2.qml:
--------------------------------------------------------------------------------
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 |
12 | // Define the radius and angle for the arc
13 | property real arcAngle: 180 // Angle in degrees
14 | property real arcRadius: 90
15 |
16 | function speedColor(value){
17 | if(value < 60 ){
18 | return "green"
19 | } else if(value > 60 && value < 150){
20 | return "yellow"
21 | }else{
22 | return "Red"
23 | }
24 | }
25 |
26 | style: CircularGaugeStyle {
27 | labelStepSize: 10
28 | labelInset: outerRadius / 2.2
29 | tickmarkInset: outerRadius / 4.2
30 |
31 | minorTickmarkInset: outerRadius / 4.2
32 | minimumValueAngle: -155
33 | maximumValueAngle: 155
34 |
35 | background:Rectangle {
36 | implicitHeight: gauge.height
37 | implicitWidth: gauge.width
38 | color: "#000000"
39 | anchors.centerIn: parent
40 | radius: 360
41 |
42 | // Create a Rotation item to move the Image along the arc
43 | // Image to move along the arc
44 | Image {
45 | sourceSize: Qt.size(16, 17)
46 | source: "qrc:/img/maxLimit.svg"
47 |
48 | // Translate the Image along the arc
49 | x: arcRadius * Math.cos(Math.PI * arcAngle / 180)
50 | y: arcRadius * Math.sin(Math.PI * arcAngle / 180)
51 |
52 | // Set the pivot to the bottom center of the Image
53 | anchors.bottom: circularCanva.top
54 | anchors.horizontalCenter: parent.horizontalCenter
55 | }
56 | Canvas {
57 | id:circularCanva
58 | property int value: gauge.value
59 |
60 | anchors.fill: parent
61 |
62 | Component.onCompleted: requestPaint()
63 |
64 | function degreesToRadians(degrees) {
65 | return degrees * (Math.PI / 180);
66 | }
67 |
68 | function createLinearGradient(ctx, start, end, colors) {
69 | var gradient = ctx.createLinearGradient(start.x, start.y, end.x, end.y);
70 | for (var i = 0; i < colors.length; i++) {
71 | gradient.addColorStop(i / (colors.length - 1), colors[i]);
72 | }
73 | return gradient;
74 | }
75 |
76 | onPaint: {
77 | var ctx = getContext("2d");
78 | ctx.reset();
79 |
80 | // Define the gradient colors for the filled arc
81 | var gradientColors = [
82 | "#AAFFFF",// Start color
83 | "#AAFFFF", // End color
84 | ];
85 |
86 | // Calculate the start and end angles for the filled arc
87 | var startAngle = valueToAngle(gauge.minimumValue) - 90;
88 | var endAngle = valueToAngle(250) - 90;
89 |
90 | // Create a linear gradient
91 | var gradient = createLinearGradient(ctx, { x: 0, y: 0 }, { x: outerRadius * 2, y: 0 }, gradientColors);
92 |
93 | // Loop through the gradient colors and fill the arc segment with each color
94 | for (var i = 0; i < gradientColors.length; i++) {
95 | var gradientColor = gradientColors[i];
96 | var angle = startAngle + (endAngle - startAngle) * (i / (gradientColors.length - 1));
97 |
98 | ctx.beginPath();
99 | ctx.lineWidth = 1.5;
100 | ctx.strokeStyle = gradient;
101 | ctx.arc(outerRadius,
102 | outerRadius,
103 | outerRadius - 57,
104 | degreesToRadians(angle),
105 | degreesToRadians(endAngle));
106 | ctx.stroke();
107 | }
108 | }
109 | }
110 |
111 | Canvas {
112 | property int value: gauge.value
113 |
114 | anchors.fill: parent
115 | Component.onCompleted: requestPaint()
116 |
117 | function degreesToRadians(degrees) {
118 | return degrees * (Math.PI / 180);
119 | }
120 |
121 | function createLinearGradient(ctx, start, end, colors) {
122 | var gradient = ctx.createLinearGradient(start.x, start.y, end.x, end.y);
123 | for (var i = 0; i < colors.length; i++) {
124 | gradient.addColorStop(i / (colors.length - 1), colors[i]);
125 | }
126 | return gradient;
127 | }
128 |
129 | onPaint: {
130 | var ctx = getContext("2d");
131 | ctx.reset();
132 |
133 | // Define the gradient colors for the filled arc
134 | var gradientColors = [
135 | "#163546",// Start color
136 | "#163546", // End color
137 | ];
138 |
139 | // Calculate the start and end angles for the filled arc
140 | var startAngle = valueToAngle(gauge.minimumValue) - 90;
141 | var endAngle = valueToAngle(250) - 90;
142 |
143 | // Create a linear gradient
144 | var gradient = createLinearGradient(ctx, { x: 0, y: 0 }, { x: outerRadius * 2, y: 0 }, gradientColors);
145 |
146 | // Loop through the gradient colors and fill the arc segment with each color
147 | for (var i = 0; i < gradientColors.length; i++) {
148 | var gradientColor = gradientColors[i];
149 | var angle = startAngle + (endAngle - startAngle) * (i / (gradientColors.length - 1));
150 |
151 | ctx.beginPath();
152 | ctx.lineWidth = outerRadius * 0.15;
153 | ctx.strokeStyle = gradient;
154 | ctx.arc(outerRadius,
155 | outerRadius,
156 | outerRadius - 75,
157 | degreesToRadians(angle),
158 | degreesToRadians(endAngle));
159 | ctx.stroke();
160 | }
161 | }
162 | }
163 |
164 |
165 | Canvas {
166 | property int value: gauge.value
167 |
168 | anchors.fill: parent
169 | onValueChanged: requestPaint()
170 |
171 | function degreesToRadians(degrees) {
172 | return degrees * (Math.PI / 180);
173 | }
174 |
175 | function createLinearGradient(ctx, start, end, colors) {
176 | var gradient = ctx.createLinearGradient(start.x, start.y, end.x, end.y);
177 | for (var i = 0; i < colors.length; i++) {
178 | gradient.addColorStop(i / (colors.length - 1), colors[i]);
179 | }
180 | return gradient;
181 | }
182 |
183 | onPaint: {
184 | var ctx = getContext("2d");
185 | ctx.reset();
186 |
187 | // Define the gradient colors for the filled arc
188 | var gradientColors = [
189 | "#6369FF",// Start color
190 | "#63FFFF", // End color
191 | "#FFFF00",
192 | "#FF0000"
193 | ];
194 |
195 | // Calculate the start and end angles for the filled arc
196 | var startAngle = valueToAngle(gauge.minimumValue) - 90;
197 | var endAngle = valueToAngle(gauge.value) - 90;
198 |
199 | // Create a linear gradient
200 | var gradient = createLinearGradient(ctx, { x: 0, y: 0 }, { x: outerRadius * 2, y: 0 }, gradientColors);
201 |
202 | // Loop through the gradient colors and fill the arc segment with each color
203 | for (var i = 0; i < gradientColors.length; i++) {
204 | var gradientColor = gradientColors[i];
205 | var angle = startAngle + (endAngle - startAngle) * (i / (gradientColors.length - 1));
206 |
207 | ctx.beginPath();
208 | ctx.lineWidth = outerRadius * 0.15;
209 | ctx.strokeStyle = gradient;
210 | ctx.arc(outerRadius,
211 | outerRadius,
212 | outerRadius - 75,
213 | degreesToRadians(angle),
214 | degreesToRadians(endAngle));
215 | ctx.stroke();
216 | }
217 | }
218 | }
219 |
220 | }
221 |
222 |
223 | needle: Item {
224 | y: -outerRadius * 0.70
225 | height: outerRadius * 0.02
226 | Image {
227 | id: needle
228 | source: "qrc:/img/Rectangle 4.svg"
229 | width: height * 0.06
230 | asynchronous: true
231 | antialiasing: true
232 | }
233 |
234 | Glow {
235 | anchors.fill: needle
236 | radius: 5
237 | samples: 10
238 | color: "white"
239 | source: needle
240 | }
241 | }
242 |
243 | foreground: Item {
244 | anchors.centerIn: parent
245 | Image{
246 | anchors.centerIn: parent
247 | source: "qrc:/img/Ellipse 1.svg"
248 |
249 | Image {
250 | sourceSize: Qt.size(203,203)
251 | anchors.centerIn: parent
252 | source: "qrc:/img/Subtract.svg"
253 |
254 | Image {
255 | z:2
256 | sourceSize: Qt.size(147,147)
257 | anchors.centerIn: parent
258 | source: "qrc:/img/Ellipse 6.svg"
259 |
260 |
261 | ColumnLayout{
262 | anchors.centerIn: parent
263 | Label{
264 | text: gauge.value.toFixed(0)
265 | font.pixelSize: 65
266 | font.family: "Inter"
267 | color: "#FFFFFF"
268 | font.bold: Font.DemiBold
269 | Layout.alignment: Qt.AlignHCenter
270 | }
271 |
272 | Label{
273 | text: "km/h"
274 | font.pixelSize: 18
275 | font.family: "Inter"
276 | color: "#FFFFFF"
277 | opacity: 0.4
278 | font.bold: Font.Normal
279 | Layout.alignment: Qt.AlignHCenter
280 | }
281 | }
282 | }
283 | }
284 | }
285 | }
286 |
287 | tickmarkLabel: Text {
288 | visible: false
289 | font.pixelSize: Math.max(6, outerRadius * 0.05)
290 | text: styleData.value
291 | color: styleData.value <= gauge.value ? "white" : "#777776"
292 | antialiasing: true
293 | }
294 |
295 | tickmark:Rectangle {
296 | implicitWidth: outerRadius * 0.008
297 | implicitHeight: outerRadius * 0.05
298 |
299 | antialiasing: true
300 | smooth: true
301 | color: styleData.value <= gauge.value ? "white" : "darkGray"
302 | }
303 | minorTickmark: Rectangle {
304 | implicitWidth: outerRadius * 0.008
305 | implicitHeight: outerRadius * 0.05
306 |
307 | antialiasing: true
308 | smooth: true
309 | color: styleData.value <= gauge.value ? "white" : "darkGray"
310 | }
311 | }
312 | }
313 |
--------------------------------------------------------------------------------
/README:
--------------------------------------------------------------------------------
1 | LICENSE:
2 |
3 | Use free for anything you want as long as you mention:
4 |
5 | Marko Mattila, marko.a.mattila@gmail.com
6 |
7 | as an author. Also note that some bits might originate from Qt documentation.
8 |
9 | CIRCULAR GAUGE EXAMPLE
10 |
11 | Gauge example shows how you can create a custom style for CircularGauge in QML.
12 |
13 | VIDEO:
14 |
15 | You can check how this example works from the video:
16 |
17 | https://youtu.be/2EELMhsc69I
18 |
19 |
20 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 |
2 |
3 | 
4 |
5 |
6 | 👩💻 Aksh Singh 👩💻
7 |
8 |
9 |
10 | Embedded Software Engineer (QT| C++)
11 |
12 |
13 |
14 | I live in Gurugram, India and work at VVDN Technology
15 |
16 |
17 |
18 |
19 | 
20 | 
21 | 
22 |
23 |
24 |
25 | # Car-Gauge-
26 | Dynamic Car Dashboard Gauge with Qt QML
27 |
28 | ## Table of Contents
29 | - [Overview](#overview)
30 | - [Demo](#demo)
31 | - [Features](#features)
32 | - [Getting Started](#getting-started)
33 | - [Usage](#usage)
34 | - [Contributing](#contributing)
35 | - [License](#license)
36 |
37 | ## Overview
38 | 🚗 In this step-by-step Qt QML tutorial, we'll show you how to create a dynamic car dashboard gauge from scratch. We'll use Qt Quick to design and implement the gauge, complete with smooth animations and a realistic appearance. Learn how to customize the gauge, add needle movement, and create a polished user interface for your car dashboard application. Whether you're a beginner or an experienced QML developer, this tutorial will help you enhance your UI skills and create stunning visual elements for your automotive projects
39 |
40 | ## Demo
41 | Provide a link to a demo if available. Include screenshots or gifs if possible.
42 | 
43 | ## Features
44 | List the key features or functionalities of your project.
45 |
46 | ## Getting Started
47 | Key Points:
48 |
49 | Introduction to Qt QML and its capabilities for creating rich user interfaces.
50 | Setting up the QML project and designing the gauge components.
51 | Implementing the dynamic needle movement based on real-time data.
52 | Enhancing the visual appeal with realistic graphics and animations.
53 | Tips for optimizing performance and ensuring a smooth user experience.
54 | Completing the car dashboard look and integrating the gauge into your application.
55 | Share your finished project with us and let us know what other QML UI elements you'd like to learn about!
56 | Remember to showcase your process, provide clear explanations, and engage with your audience. This title and description should give viewers a good overview of what to expect from your tutorial. Best of luck with your YouTube video! 🎥👍
57 |
58 | ```bash
59 | # Example code block
60 | git clone git@github.com:cppqtdev/Car-Gauge-.git
61 |
62 |
--------------------------------------------------------------------------------
/Screenshot 2023-08-12 184803.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cppqtdev/Car-Speedometer/363e03361cc2bf2c01192aaaf311cc7dbdecef58/Screenshot 2023-08-12 184803.png
--------------------------------------------------------------------------------
/gauge-example.pro:
--------------------------------------------------------------------------------
1 | QT += qml quick
2 |
3 | CONFIG += c++11
4 |
5 | SOURCES += main.cpp
6 |
7 | RESOURCES += qml.qrc
8 |
9 | # Additional import path used to resolve QML modules in Qt Creator's code model
10 | QML_IMPORT_PATH =
11 |
12 | # Default rules for deployment.
13 | qnx: target.path = /tmp/$${TARGET}/bin
14 | else: unix:!android: target.path = /opt/$${TARGET}/bin
15 | !isEmpty(target.path): INSTALLS += target
16 |
17 | DISTFILES += \
18 | main.qml \
19 | Gauge.qml
20 |
--------------------------------------------------------------------------------
/gauge-example.pro.user:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | EnvironmentId
7 | {3e63a3ef-a1cd-4024-b3f8-39181fc9e94a}
8 |
9 |
10 | ProjectExplorer.Project.ActiveTarget
11 | 0
12 |
13 |
14 | ProjectExplorer.Project.EditorSettings
15 |
16 | true
17 | false
18 | true
19 |
20 | Cpp
21 |
22 | CppGlobal
23 |
24 |
25 |
26 | QmlJS
27 |
28 | QmlJSGlobal
29 |
30 |
31 | 2
32 | UTF-8
33 | false
34 | 4
35 | false
36 | 80
37 | true
38 | true
39 | 1
40 | false
41 | true
42 | false
43 | 0
44 | true
45 | true
46 | 0
47 | 8
48 | true
49 | false
50 | 1
51 | true
52 | true
53 | true
54 | *.md, *.MD, Makefile
55 | false
56 | true
57 | true
58 |
59 |
60 |
61 | ProjectExplorer.Project.PluginSettings
62 |
63 |
64 | true
65 | false
66 | true
67 | true
68 | true
69 | true
70 |
71 |
72 | 0
73 | true
74 |
75 | true
76 | true
77 | Builtin.DefaultTidyAndClazy
78 | 4
79 |
80 |
81 |
82 | true
83 |
84 |
85 |
86 |
87 | ProjectExplorer.Project.Target.0
88 |
89 | Desktop
90 | Desktop Qt 5.15.12 MSVC2019 32bit
91 | Desktop Qt 5.15.12 MSVC2019 32bit
92 | qt.qt5.51512.win32_msvc2019_kit
93 | 0
94 | 0
95 | 0
96 |
97 | 0
98 | C:\Users\ADMIN\Downloads\qt-examples-master\qt-examples-master\gauge-example\..\build-gauge-example-Desktop_Qt_5_15_12_MSVC2019_32bit-Debug
99 | C:/Users/ADMIN/Downloads/qt-examples-master/qt-examples-master/build-gauge-example-Desktop_Qt_5_15_12_MSVC2019_32bit-Debug
100 |
101 |
102 | true
103 | QtProjectManager.QMakeBuildStep
104 | false
105 |
106 |
107 |
108 | true
109 | Qt4ProjectManager.MakeStep
110 |
111 | 2
112 | Build
113 | Build
114 | ProjectExplorer.BuildSteps.Build
115 |
116 |
117 |
118 | true
119 | Qt4ProjectManager.MakeStep
120 | clean
121 |
122 | 1
123 | Clean
124 | Clean
125 | ProjectExplorer.BuildSteps.Clean
126 |
127 | 2
128 | false
129 |
130 | false
131 |
132 | Debug
133 | Qt4ProjectManager.Qt4BuildConfiguration
134 | 2
135 |
136 |
137 | C:\Users\ADMIN\Downloads\qt-examples-master\qt-examples-master\gauge-example\..\build-gauge-example-Desktop_Qt_5_15_12_MSVC2019_32bit-Release
138 | C:/Users/ADMIN/Downloads/qt-examples-master/qt-examples-master/build-gauge-example-Desktop_Qt_5_15_12_MSVC2019_32bit-Release
139 |
140 |
141 | true
142 | QtProjectManager.QMakeBuildStep
143 | false
144 |
145 |
146 |
147 | true
148 | Qt4ProjectManager.MakeStep
149 |
150 | 2
151 | Build
152 | Build
153 | ProjectExplorer.BuildSteps.Build
154 |
155 |
156 |
157 | true
158 | Qt4ProjectManager.MakeStep
159 | clean
160 |
161 | 1
162 | Clean
163 | Clean
164 | ProjectExplorer.BuildSteps.Clean
165 |
166 | 2
167 | false
168 |
169 | false
170 |
171 | Release
172 | Qt4ProjectManager.Qt4BuildConfiguration
173 | 0
174 | 0
175 |
176 |
177 | 0
178 | C:\Users\ADMIN\Downloads\qt-examples-master\qt-examples-master\gauge-example\..\build-gauge-example-Desktop_Qt_5_15_12_MSVC2019_32bit-Profile
179 | C:/Users/ADMIN/Downloads/qt-examples-master/qt-examples-master/build-gauge-example-Desktop_Qt_5_15_12_MSVC2019_32bit-Profile
180 |
181 |
182 | true
183 | QtProjectManager.QMakeBuildStep
184 | false
185 |
186 |
187 |
188 | true
189 | Qt4ProjectManager.MakeStep
190 |
191 | 2
192 | Build
193 | Build
194 | ProjectExplorer.BuildSteps.Build
195 |
196 |
197 |
198 | true
199 | Qt4ProjectManager.MakeStep
200 | clean
201 |
202 | 1
203 | Clean
204 | Clean
205 | ProjectExplorer.BuildSteps.Clean
206 |
207 | 2
208 | false
209 |
210 | false
211 |
212 | Profile
213 | Qt4ProjectManager.Qt4BuildConfiguration
214 | 0
215 | 0
216 | 0
217 |
218 | 3
219 |
220 |
221 | 0
222 | Deploy
223 | Deploy
224 | ProjectExplorer.BuildSteps.Deploy
225 |
226 | 1
227 |
228 | false
229 | ProjectExplorer.DefaultDeployConfiguration
230 |
231 | 1
232 |
233 | true
234 | C:\Users\ADMIN\Downloads\qmltrash.qzt
235 | true
236 | true
237 |
238 | 2
239 |
240 | Qt4ProjectManager.Qt4RunConfiguration:C:/Users/ADMIN/Downloads/qt-examples-master/qt-examples-master/gauge-example/gauge-example.pro
241 | C:/Users/ADMIN/Downloads/qt-examples-master/qt-examples-master/gauge-example/gauge-example.pro
242 | false
243 | true
244 | true
245 | false
246 | true
247 | C:/Users/ADMIN/Downloads/qt-examples-master/qt-examples-master/build-gauge-example-Desktop_Qt_5_15_12_MSVC2019_32bit-Debug
248 |
249 | 1
250 |
251 |
252 |
253 | ProjectExplorer.Project.Target.1
254 |
255 | Desktop
256 | SSL Qt 5.15.7 MSVC2019 32bit
257 | SSL Qt 5.15.7 MSVC2019 32bit
258 | {71fd47a7-564b-4527-8658-73146d56da9d}
259 | 0
260 | 0
261 | 0
262 |
263 | 0
264 | C:\Users\ADMIN\Downloads\qt-examples-master\qt-examples-master\gauge-example\..\build-gauge-example-SSL_Qt_5_15_7_MSVC2019_32bit-Debug
265 | C:/Users/ADMIN/Downloads/qt-examples-master/qt-examples-master/build-gauge-example-SSL_Qt_5_15_7_MSVC2019_32bit-Debug
266 |
267 |
268 | true
269 | QtProjectManager.QMakeBuildStep
270 | false
271 |
272 |
273 |
274 | true
275 | Qt4ProjectManager.MakeStep
276 |
277 | 2
278 | Build
279 | Build
280 | ProjectExplorer.BuildSteps.Build
281 |
282 |
283 |
284 | true
285 | Qt4ProjectManager.MakeStep
286 | clean
287 |
288 | 1
289 | Clean
290 | Clean
291 | ProjectExplorer.BuildSteps.Clean
292 |
293 | 2
294 | false
295 |
296 | false
297 |
298 | Debug
299 | Qt4ProjectManager.Qt4BuildConfiguration
300 | 2
301 |
302 |
303 | C:\Users\ADMIN\Downloads\qt-examples-master\qt-examples-master\gauge-example\..\build-gauge-example-SSL_Qt_5_15_7_MSVC2019_32bit-Release
304 | C:/Users/ADMIN/Downloads/qt-examples-master/qt-examples-master/build-gauge-example-SSL_Qt_5_15_7_MSVC2019_32bit-Release
305 |
306 |
307 | true
308 | QtProjectManager.QMakeBuildStep
309 | false
310 |
311 |
312 |
313 | true
314 | Qt4ProjectManager.MakeStep
315 |
316 | 2
317 | Build
318 | Build
319 | ProjectExplorer.BuildSteps.Build
320 |
321 |
322 |
323 | true
324 | Qt4ProjectManager.MakeStep
325 | clean
326 |
327 | 1
328 | Clean
329 | Clean
330 | ProjectExplorer.BuildSteps.Clean
331 |
332 | 2
333 | false
334 |
335 | false
336 |
337 | Release
338 | Qt4ProjectManager.Qt4BuildConfiguration
339 | 0
340 | 0
341 |
342 |
343 | 0
344 | C:\Users\ADMIN\Downloads\qt-examples-master\qt-examples-master\gauge-example\..\build-gauge-example-SSL_Qt_5_15_7_MSVC2019_32bit-Profile
345 | C:/Users/ADMIN/Downloads/qt-examples-master/qt-examples-master/build-gauge-example-SSL_Qt_5_15_7_MSVC2019_32bit-Profile
346 |
347 |
348 | true
349 | QtProjectManager.QMakeBuildStep
350 | false
351 |
352 |
353 |
354 | true
355 | Qt4ProjectManager.MakeStep
356 |
357 | 2
358 | Build
359 | Build
360 | ProjectExplorer.BuildSteps.Build
361 |
362 |
363 |
364 | true
365 | Qt4ProjectManager.MakeStep
366 | clean
367 |
368 | 1
369 | Clean
370 | Clean
371 | ProjectExplorer.BuildSteps.Clean
372 |
373 | 2
374 | false
375 |
376 | false
377 |
378 | Profile
379 | Qt4ProjectManager.Qt4BuildConfiguration
380 | 0
381 | 0
382 | 0
383 |
384 | 3
385 |
386 |
387 | 0
388 | Deploy
389 | Deploy
390 | ProjectExplorer.BuildSteps.Deploy
391 |
392 | 1
393 |
394 | false
395 | ProjectExplorer.DefaultDeployConfiguration
396 |
397 | 1
398 |
399 | true
400 | C:\Users\ADMIN\Downloads\qmltrash.qzt
401 | true
402 | true
403 |
404 | 2
405 |
406 | Qt4ProjectManager.Qt4RunConfiguration:C:/Users/ADMIN/Downloads/qt-examples-master/qt-examples-master/gauge-example/gauge-example.pro
407 | C:/Users/ADMIN/Downloads/qt-examples-master/qt-examples-master/gauge-example/gauge-example.pro
408 | false
409 | true
410 | true
411 | false
412 | true
413 |
414 | 1
415 |
416 |
417 |
418 | ProjectExplorer.Project.TargetCount
419 | 2
420 |
421 |
422 | ProjectExplorer.Project.Updater.FileVersion
423 | 22
424 |
425 |
426 | Version
427 | 22
428 |
429 |
430 |
--------------------------------------------------------------------------------
/img/Ellipse 1.svg:
--------------------------------------------------------------------------------
1 |
12 |
--------------------------------------------------------------------------------
/img/Ellipse 5.svg:
--------------------------------------------------------------------------------
1 |
25 |
--------------------------------------------------------------------------------
/img/Ellipse 6.svg:
--------------------------------------------------------------------------------
1 |
30 |
--------------------------------------------------------------------------------
/img/Rectangle 4.svg:
--------------------------------------------------------------------------------
1 |
4 |
--------------------------------------------------------------------------------
/img/Subtract.svg:
--------------------------------------------------------------------------------
1 |
28 |
--------------------------------------------------------------------------------
/img/background.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cppqtdev/Car-Speedometer/363e03361cc2bf2c01192aaaf311cc7dbdecef58/img/background.png
--------------------------------------------------------------------------------
/img/background.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
1100 |
--------------------------------------------------------------------------------
/img/cirlcle.svg:
--------------------------------------------------------------------------------
1 |
4 |
--------------------------------------------------------------------------------
/img/images.txt:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/img/maxLimit.svg:
--------------------------------------------------------------------------------
1 |
10 |
--------------------------------------------------------------------------------
/img/needle.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
76 |
--------------------------------------------------------------------------------
/img/ring.svg:
--------------------------------------------------------------------------------
1 |
4 |
--------------------------------------------------------------------------------
/img/sub.svg:
--------------------------------------------------------------------------------
1 |
28 |
--------------------------------------------------------------------------------
/img/tickmark.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
93 |
--------------------------------------------------------------------------------
/main.cpp:
--------------------------------------------------------------------------------
1 | #include
2 | #include
3 |
4 | int main(int argc, char *argv[])
5 | {
6 | QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);
7 | QGuiApplication app(argc, argv);
8 |
9 | QQmlApplicationEngine engine;
10 | engine.load(QUrl(QLatin1String("qrc:/main.qml")));
11 |
12 | return app.exec();
13 | }
14 |
--------------------------------------------------------------------------------
/main.qml:
--------------------------------------------------------------------------------
1 | import QtQuick 2.7
2 | import QtQuick.Controls 2.0
3 | import QtQuick.Layouts 1.3
4 | ApplicationWindow {
5 | id: window
6 | width: 1060
7 | height: 635
8 | visible: true
9 | color: "#000000"
10 | title: "Car Speed Guage"
11 |
12 |
13 |
14 | RowLayout{
15 | anchors.centerIn:parent
16 | spacing: 100
17 |
18 | Gauge2 {
19 | id:leftGuage
20 | property bool accelerating
21 | width: 400
22 | height: 400
23 | value: accelerating ? maximumValue : 0
24 | maximumValue: 250
25 | Component.onCompleted: forceActiveFocus()
26 | Behavior on value { NumberAnimation { duration: 1000 }}
27 | Keys.onSpacePressed: leftGuage.accelerating = true
28 | Keys.onEnterPressed: rightGuage.accelerating = true
29 | Keys.onReturnPressed: rightGuage.accelerating = true
30 |
31 | Keys.onReleased: {
32 | if (event.key === Qt.Key_Return || event.key === Qt.Key_Enter) {
33 | rightGuage.accelerating = false;
34 | event.accepted = true;
35 | }else if (event.key === Qt.Key_Space) {
36 | leftGuage.accelerating = false;
37 | event.accepted = true;
38 | }
39 | }
40 | }
41 |
42 | Gauge2 {
43 | id:rightGuage
44 | property bool accelerating
45 | width: 400
46 | height: 400
47 | value: accelerating ? maximumValue : 0
48 | maximumValue: 100
49 | Component.onCompleted: forceActiveFocus()
50 | Behavior on value { NumberAnimation { duration: 1000 }}
51 | Keys.onSpacePressed: leftGuage.accelerating = true
52 | Keys.onEnterPressed: rightGuage.accelerating = true
53 | Keys.onReturnPressed: rightGuage.accelerating = true
54 |
55 | Keys.onReleased: {
56 | if (event.key === Qt.Key_Return || event.key === Qt.Key_Enter) {
57 | rightGuage.accelerating = false;
58 | event.accepted = true;
59 | }else if (event.key === Qt.Key_Space) {
60 | leftGuage.accelerating = false;
61 | event.accepted = true;
62 | }
63 | }
64 | }
65 | }
66 |
67 | // Gauge2 {
68 | // visible: false
69 | // property bool accelerating
70 | // width: 400
71 | // height: 400
72 | // value: accelerating ? maximumValue : 0
73 | // maximumValue: 250
74 | // Component.onCompleted: forceActiveFocus()
75 | // Behavior on value { NumberAnimation { duration: 1000 }}
76 |
77 | // Keys.onSpacePressed: accelerating = true
78 | // Keys.onReleased: {
79 | // if (event.key === Qt.Key_Space) {
80 | // accelerating = false;
81 | // event.accepted = true;
82 | // }
83 | // }
84 | // }
85 | }
86 |
--------------------------------------------------------------------------------
/qml.qrc:
--------------------------------------------------------------------------------
1 |
2 |
3 | main.qml
4 | Gauge.qml
5 | img/background.svg
6 | img/needle.svg
7 | img/tickmark.svg
8 | img/Rectangle 4.svg
9 | Gauge2.qml
10 | img/Ellipse 6.svg
11 | img/Subtract.svg
12 | img/sub.svg
13 | img/Ellipse 1.svg
14 | img/ring.svg
15 | img/cirlcle.svg
16 | img/Ellipse 5.svg
17 | img/maxLimit.svg
18 |
19 |
20 |
--------------------------------------------------------------------------------