├── Car_5.pro
├── Car_5.pro.user
├── MyButton.qml
├── README.md
├── SideGauge.qml
├── icons
├── Background.png
├── Base.svg
├── Car.svg
├── Car_icon.svg
├── Headlights.svg
├── Navigation.png
├── Navigation.svg
├── Top Navigation.svg
├── Vector 1.svg
├── Vector 2.svg
├── Vector.svg
├── bxs_music.svg
├── car.png
├── clarity_settings-solid.svg
├── entypo_home.svg
├── ep_menu.svg
├── eva_phone-call-fill.svg
├── icons.txt
└── light
│ ├── Car_Icon.svg
│ ├── bxs_music.svg
│ ├── clarity_settings-solid.svg
│ ├── entypo_home.svg
│ ├── ep_menu.svg
│ ├── eva_phone-call-fill.svg
│ └── light.txt
├── img
├── Ellipse 1.svg
├── Ellipse 5.svg
├── Ellipse 6.svg
├── Model 3.png
├── Rectangle 4.svg
├── Subtract.svg
├── background.png
├── background.svg
├── cirlcle.svg
├── img.txt
├── maxLimit.svg
├── needle.svg
├── ring.svg
├── sub.svg
└── tickmark.svg
├── main.cpp
├── main.qml
├── qml.qrc
└── screenshot
├── Screenshot 2023-08-13 212900.png
└── img.txt
/Car_5.pro:
--------------------------------------------------------------------------------
1 | QT += quick
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 |
10 | RESOURCES += qml.qrc
11 |
12 | # Additional import path used to resolve QML modules in Qt Creator's code model
13 | QML_IMPORT_PATH =
14 |
15 | # Additional import path used to resolve QML modules just for Qt Quick Designer
16 | QML_DESIGNER_IMPORT_PATH =
17 |
18 | # Default rules for deployment.
19 | qnx: target.path = /tmp/$${TARGET}/bin
20 | else: unix:!android: target.path = /opt/$${TARGET}/bin
21 | !isEmpty(target.path): INSTALLS += target
22 |
--------------------------------------------------------------------------------
/Car_5.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\Documents\Car_5\..\build-Car_5-Desktop_Qt_5_15_12_MSVC2019_32bit-Debug
99 | C:/Users/ADMIN/Documents/build-Car_5-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\Documents\Car_5\..\build-Car_5-Desktop_Qt_5_15_12_MSVC2019_32bit-Release
138 | C:/Users/ADMIN/Documents/build-Car_5-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\Documents\Car_5\..\build-Car_5-Desktop_Qt_5_15_12_MSVC2019_32bit-Profile
179 | C:/Users/ADMIN/Documents/build-Car_5-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/Documents/Car_5/Car_5.pro
241 | C:/Users/ADMIN/Documents/Car_5/Car_5.pro
242 | false
243 | true
244 | true
245 | false
246 | true
247 | C:/Users/ADMIN/Documents/build-Car_5-Desktop_Qt_5_15_12_MSVC2019_32bit-Debug
248 |
249 | 1
250 |
251 |
252 |
253 | ProjectExplorer.Project.TargetCount
254 | 1
255 |
256 |
257 | ProjectExplorer.Project.Updater.FileVersion
258 | 22
259 |
260 |
261 | Version
262 | 22
263 |
264 |
265 |
--------------------------------------------------------------------------------
/MyButton.qml:
--------------------------------------------------------------------------------
1 | import QtQuick 2.9
2 | import QtQuick.Controls 2.5
3 | import QtQuick.Layouts 1.3
4 | import QtGraphicalEffects 1.15
5 | Button {
6 | id: control
7 | property string setIcon : ""
8 | property bool isGlow: false
9 | implicitHeight: isGlow ? 50 : 44
10 | implicitWidth: isGlow ? 50 : 44
11 |
12 | Image{
13 | anchors.centerIn: parent
14 | source: setIcon
15 | scale: control.pressed ? 0.9 : 1.0
16 | Behavior on scale { NumberAnimation { duration: 200; } }
17 | }
18 |
19 | background: Rectangle {
20 | implicitWidth: control.width
21 | implicitHeight: control.height
22 | Layout.fillWidth: true
23 | radius: width
24 | color: "transparent"
25 | border.width: 0
26 | border.color: "transparent"
27 | visible: false
28 | Behavior on color {
29 | ColorAnimation {
30 | duration: 200;
31 | easing.type: Easing.Linear;
32 | }
33 | }
34 |
35 | Rectangle {
36 | id: indicator
37 | property int mx
38 | property int my
39 | x: mx - width / 2
40 | y: my - height / 2
41 | height: width
42 | radius: width / 2
43 | color: isGlow ? Qt.lighter("#29BEB6") : Qt.lighter("#B8FF01")
44 | }
45 | }
46 |
47 | Rectangle {
48 | id: mask
49 | radius: width
50 | anchors.fill: parent
51 | visible: false
52 | }
53 |
54 | OpacityMask {
55 | anchors.fill: background
56 | source: background
57 | maskSource: mask
58 | }
59 |
60 | MouseArea {
61 | id: mouseArea
62 | hoverEnabled: true
63 | acceptedButtons: Qt.NoButton
64 | cursorShape: Qt.PointingHandCursor
65 | anchors.fill: parent
66 | }
67 |
68 | ParallelAnimation {
69 | id: anim
70 | NumberAnimation {
71 | target: indicator
72 | property: 'width'
73 | from: 0
74 | to: control.width * 1.5
75 | duration: 200
76 | }
77 | NumberAnimation {
78 | target: indicator;
79 | property: 'opacity'
80 | from: 0.9
81 | to: 0
82 | duration: 200
83 | }
84 | }
85 |
86 | onPressed: {
87 | indicator.mx = mouseArea.mouseX
88 | indicator.my = mouseArea.mouseY
89 | anim.restart();
90 | }
91 | }
92 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # modern-car-dashboard-
2 | Modern Newly Created Car Dashboard using QT QML
3 | # Racing-Car-Dashboard
4 | Racing Car Dashboard
5 | ## Demo Screen 1
6 | 
7 |
8 |
9 | 👩💻 Aksh Singh 👩💻
10 |
11 |
12 |
13 | Embedded Software Engineer (QT| C++)
14 |
15 |
16 |
17 | I live in Gurugram, India and work at VVDN Technology
18 |
19 |
20 |
21 |
22 | 
23 | 
24 | 
25 |
26 |
27 |
28 | # Car-Gauge-
29 | Dynamic Car Dashboard Gauge with Qt QML
30 |
31 | ## Table of Contents
32 | - [Overview](#overview)
33 | - [Demo](#demo)
34 | - [Features](#features)
35 | - [Getting Started](#getting-started)
36 | - [Usage](#usage)
37 | - [Contributing](#contributing)
38 | - [License](#license)
39 |
40 | ## Overview
41 | 🚗 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
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/modern-car-dashboard-.git
61 |
62 |
63 |
--------------------------------------------------------------------------------
/SideGauge.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 | property string speedColor: "yellow"
13 |
14 | // Define the radius and angle for the arc
15 | property real arcAngle: 180 // Angle in degrees
16 | property real arcRadius: 90
17 |
18 | style: CircularGaugeStyle {
19 | labelStepSize: 10
20 | labelInset: outerRadius / 2.2
21 | tickmarkInset: outerRadius / 4.2
22 |
23 | minorTickmarkInset: outerRadius / 4.2
24 | minimumValueAngle: -155
25 | maximumValueAngle: 155
26 |
27 | background:Rectangle {
28 | implicitHeight: gauge.height
29 | implicitWidth: gauge.width
30 | color: "transparent"
31 | anchors.centerIn: parent
32 | radius: 360
33 |
34 | // Create a Rotation item to move the Image along the arc
35 | // Image to move along the arc
36 | Image {
37 | sourceSize: Qt.size(16, 17)
38 | source: "qrc:/img/maxLimit.svg"
39 |
40 | // Translate the Image along the arc
41 | x: arcRadius * Math.cos(Math.PI * arcAngle / 180)
42 | y: arcRadius * Math.sin(Math.PI * arcAngle / 180)
43 |
44 | // Set the pivot to the bottom center of the Image
45 | anchors.bottom: circularCanva.top
46 | anchors.horizontalCenter: parent.horizontalCenter
47 | }
48 | Canvas {
49 | id:circularCanva
50 | property int value: gauge.value
51 |
52 | anchors.fill: parent
53 |
54 | Component.onCompleted: requestPaint()
55 |
56 | function degreesToRadians(degrees) {
57 | return degrees * (Math.PI / 180);
58 | }
59 |
60 | function createLinearGradient(ctx, start, end, colors) {
61 | var gradient = ctx.createLinearGradient(start.x, start.y, end.x, end.y);
62 | for (var i = 0; i < colors.length; i++) {
63 | gradient.addColorStop(i / (colors.length - 1), colors[i]);
64 | }
65 | return gradient;
66 | }
67 |
68 | onPaint: {
69 | var ctx = getContext("2d");
70 | ctx.reset();
71 |
72 | // Define the gradient colors for the filled arc
73 | var gradientColors = [
74 | "#B8FF01",// Start color
75 | "#B8FF01", // End color
76 | ];
77 |
78 | // Calculate the start and end angles for the filled arc
79 | var startAngle = valueToAngle(gauge.minimumValue) - 90;
80 | var endAngle = valueToAngle(250) - 90;
81 |
82 | // Create a linear gradient
83 | var gradient = createLinearGradient(ctx, { x: 0, y: 0 }, { x: outerRadius * 2, y: 0 }, gradientColors);
84 | // Loop through the gradient colors and fill the arc segment with each color
85 | for (var i = 0; i < gradientColors.length; i++) {
86 | var gradientColor = gradientColors[i];
87 | var angle = startAngle + (endAngle - startAngle) * (i / (gradientColors.length - 1));
88 |
89 | ctx.beginPath();
90 | ctx.lineWidth = 1.5;
91 | ctx.strokeStyle = gradient;
92 | ctx.arc(outerRadius,
93 | outerRadius,
94 | outerRadius - 57,
95 | degreesToRadians(angle),
96 | degreesToRadians(endAngle));
97 | ctx.stroke();
98 | }
99 | }
100 | }
101 |
102 | Canvas {
103 | property int value: gauge.value
104 |
105 | anchors.fill: parent
106 | Component.onCompleted: requestPaint()
107 |
108 | function degreesToRadians(degrees) {
109 | return degrees * (Math.PI / 180);
110 | }
111 |
112 | function createLinearGradient(ctx, start, end, colors) {
113 | var gradient = ctx.createLinearGradient(start.x, start.y, end.x, end.y);
114 | for (var i = 0; i < colors.length; i++) {
115 | gradient.addColorStop(i / (colors.length - 1), colors[i]);
116 | }
117 | return gradient;
118 | }
119 |
120 | onPaint: {
121 | var ctx = getContext("2d");
122 | ctx.reset();
123 |
124 | // Define the gradient colors for the filled arc
125 | var gradientColors = [
126 | "#163546",// Start color
127 | "#163546", // End color
128 | ];
129 |
130 | // Calculate the start and end angles for the filled arc
131 | var startAngle = valueToAngle(gauge.minimumValue) - 90;
132 | var endAngle = valueToAngle(250) - 90;
133 |
134 | // Create a linear gradient
135 | var gradient = createLinearGradient(ctx, { x: 0, y: 0 }, { x: outerRadius * 2, y: 0 }, gradientColors);
136 |
137 | // Loop through the gradient colors and fill the arc segment with each color
138 | for (var i = 0; i < gradientColors.length; i++) {
139 | var gradientColor = gradientColors[i];
140 | var angle = startAngle + (endAngle - startAngle) * (i / (gradientColors.length - 1));
141 |
142 | ctx.beginPath();
143 | ctx.lineWidth = outerRadius * 0.15;
144 | ctx.strokeStyle = gradient;
145 | ctx.arc(outerRadius,
146 | outerRadius,
147 | outerRadius - 75,
148 | degreesToRadians(angle),
149 | degreesToRadians(endAngle));
150 | ctx.stroke();
151 | }
152 | }
153 | }
154 |
155 |
156 | Canvas {
157 | property int value: gauge.value
158 |
159 | anchors.fill: parent
160 | onValueChanged: requestPaint()
161 |
162 | function degreesToRadians(degrees) {
163 | return degrees * (Math.PI / 180);
164 | }
165 |
166 | function createLinearGradient(ctx, start, end, colors) {
167 | var gradient = ctx.createLinearGradient(start.x, start.y, end.x, end.y);
168 | for (var i = 0; i < colors.length; i++) {
169 | gradient.addColorStop(i / (colors.length - 1), colors[i]);
170 | }
171 | return gradient;
172 | }
173 |
174 | onPaint: {
175 | var ctx = getContext("2d");
176 | ctx.reset();
177 |
178 | // Define the gradient colors for the filled arc
179 | var gradientColors = [
180 | "#6369FF",// Start color
181 | "#63FFFF", // End color
182 | "#FFFF00",
183 | "#FF0000"
184 | ];
185 |
186 | // Calculate the start and end angles for the filled arc
187 | var startAngle = valueToAngle(gauge.minimumValue) - 90;
188 | var endAngle = valueToAngle(gauge.value) - 90;
189 |
190 | // Create a linear gradient
191 | var gradient = createLinearGradient(ctx, { x: 0, y: 0 }, { x: outerRadius * 2, y: 0 }, gradientColors);
192 |
193 | // Loop through the gradient colors and fill the arc segment with each color
194 | for (var i = 0; i < gradientColors.length; i++) {
195 | var gradientColor = gradientColors[i];
196 | var angle = startAngle + (endAngle - startAngle) * (i / (gradientColors.length - 1));
197 |
198 | ctx.beginPath();
199 | ctx.lineWidth = outerRadius * 0.15;
200 | ctx.strokeStyle = gradient;
201 | ctx.arc(outerRadius,
202 | outerRadius,
203 | outerRadius - 75,
204 | degreesToRadians(angle),
205 | degreesToRadians(endAngle));
206 | ctx.stroke();
207 | }
208 | }
209 | }
210 |
211 | }
212 |
213 |
214 | needle: Item {
215 | y: -outerRadius * 0.70
216 | height: outerRadius * 0.02
217 | Image {
218 | id: needle
219 | source: "qrc:/img/Rectangle 4.svg"
220 | width: height * 0.06
221 | asynchronous: true
222 | antialiasing: true
223 | }
224 |
225 | Glow {
226 | anchors.fill: needle
227 | radius: 5
228 | samples: 10
229 | color: "white"
230 | source: needle
231 | }
232 | }
233 |
234 | foreground: Item {
235 | anchors.centerIn: parent
236 | Image{
237 | anchors.centerIn: parent
238 | source: "qrc:/img/Ellipse 1.svg"
239 |
240 | Image {
241 | sourceSize: Qt.size(203,203)
242 | anchors.centerIn: parent
243 | source: "qrc:/img/Subtract.svg"
244 |
245 | Image {
246 | z:2
247 | sourceSize: Qt.size(147,147)
248 | anchors.centerIn: parent
249 | source: "qrc:/img/Ellipse 6.svg"
250 |
251 |
252 | ColumnLayout{
253 | anchors.centerIn: parent
254 | Label{
255 | text: gauge.value.toFixed(0)
256 | font.pixelSize: 65
257 | font.family: "Inter"
258 | color: "#FFFFFF"
259 | font.bold: Font.DemiBold
260 | Layout.alignment: Qt.AlignHCenter
261 | }
262 |
263 | Label{
264 | text: "km/h"
265 | font.pixelSize: 18
266 | font.family: "Inter"
267 | color: "#FFFFFF"
268 | opacity: 0.4
269 | font.bold: Font.Normal
270 | Layout.alignment: Qt.AlignHCenter
271 | }
272 | }
273 | }
274 | }
275 | }
276 | }
277 |
278 | tickmarkLabel: Text {
279 | visible: false
280 | font.pixelSize: Math.max(6, outerRadius * 0.05)
281 | text: styleData.value
282 | color: styleData.value <= gauge.value ? "white" : "#777776"
283 | antialiasing: true
284 | }
285 |
286 | tickmark:Rectangle {
287 | implicitWidth: outerRadius * 0.008
288 | implicitHeight: outerRadius * 0.05
289 |
290 | antialiasing: true
291 | smooth: true
292 | color: styleData.value <= gauge.value ? "white" : "darkGray"
293 | }
294 | minorTickmark: Rectangle {
295 | implicitWidth: outerRadius * 0.008
296 | implicitHeight: outerRadius * 0.05
297 |
298 | antialiasing: true
299 | smooth: true
300 | color: styleData.value <= gauge.value ? "white" : "darkGray"
301 | }
302 | }
303 | }
304 |
--------------------------------------------------------------------------------
/icons/Background.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cppqtdev/Modern-Car-Dashboard/b67ece1c9cca44a1a90e023c7ccbff8562d95548/icons/Background.png
--------------------------------------------------------------------------------
/icons/Base.svg:
--------------------------------------------------------------------------------
1 |
32 |
--------------------------------------------------------------------------------
/icons/Car.svg:
--------------------------------------------------------------------------------
1 |
76 |
--------------------------------------------------------------------------------
/icons/Car_icon.svg:
--------------------------------------------------------------------------------
1 |
4 |
--------------------------------------------------------------------------------
/icons/Headlights.svg:
--------------------------------------------------------------------------------
1 |
25 |
--------------------------------------------------------------------------------
/icons/Navigation.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cppqtdev/Modern-Car-Dashboard/b67ece1c9cca44a1a90e023c7ccbff8562d95548/icons/Navigation.png
--------------------------------------------------------------------------------
/icons/Top Navigation.svg:
--------------------------------------------------------------------------------
1 |
10 |
--------------------------------------------------------------------------------
/icons/Vector 1.svg:
--------------------------------------------------------------------------------
1 |
22 |
--------------------------------------------------------------------------------
/icons/Vector 2.svg:
--------------------------------------------------------------------------------
1 |
10 |
--------------------------------------------------------------------------------
/icons/Vector.svg:
--------------------------------------------------------------------------------
1 |
13 |
--------------------------------------------------------------------------------
/icons/bxs_music.svg:
--------------------------------------------------------------------------------
1 |
4 |
--------------------------------------------------------------------------------
/icons/car.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cppqtdev/Modern-Car-Dashboard/b67ece1c9cca44a1a90e023c7ccbff8562d95548/icons/car.png
--------------------------------------------------------------------------------
/icons/clarity_settings-solid.svg:
--------------------------------------------------------------------------------
1 |
11 |
--------------------------------------------------------------------------------
/icons/entypo_home.svg:
--------------------------------------------------------------------------------
1 |
4 |
--------------------------------------------------------------------------------
/icons/ep_menu.svg:
--------------------------------------------------------------------------------
1 |
4 |
--------------------------------------------------------------------------------
/icons/eva_phone-call-fill.svg:
--------------------------------------------------------------------------------
1 |
5 |
--------------------------------------------------------------------------------
/icons/icons.txt:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/icons/light/Car_Icon.svg:
--------------------------------------------------------------------------------
1 |
4 |
--------------------------------------------------------------------------------
/icons/light/bxs_music.svg:
--------------------------------------------------------------------------------
1 |
4 |
--------------------------------------------------------------------------------
/icons/light/clarity_settings-solid.svg:
--------------------------------------------------------------------------------
1 |
11 |
--------------------------------------------------------------------------------
/icons/light/entypo_home.svg:
--------------------------------------------------------------------------------
1 |
4 |
--------------------------------------------------------------------------------
/icons/light/ep_menu.svg:
--------------------------------------------------------------------------------
1 |
4 |
--------------------------------------------------------------------------------
/icons/light/eva_phone-call-fill.svg:
--------------------------------------------------------------------------------
1 |
5 |
--------------------------------------------------------------------------------
/icons/light/light.txt:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/img/Ellipse 1.svg:
--------------------------------------------------------------------------------
1 |
12 |
--------------------------------------------------------------------------------
/img/Ellipse 5.svg:
--------------------------------------------------------------------------------
1 |
25 |
--------------------------------------------------------------------------------
/img/Ellipse 6.svg:
--------------------------------------------------------------------------------
1 |
30 |
--------------------------------------------------------------------------------
/img/Model 3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cppqtdev/Modern-Car-Dashboard/b67ece1c9cca44a1a90e023c7ccbff8562d95548/img/Model 3.png
--------------------------------------------------------------------------------
/img/Rectangle 4.svg:
--------------------------------------------------------------------------------
1 |
4 |
--------------------------------------------------------------------------------
/img/Subtract.svg:
--------------------------------------------------------------------------------
1 |
28 |
--------------------------------------------------------------------------------
/img/background.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cppqtdev/Modern-Car-Dashboard/b67ece1c9cca44a1a90e023c7ccbff8562d95548/img/background.png
--------------------------------------------------------------------------------
/img/background.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
1100 |
--------------------------------------------------------------------------------
/img/cirlcle.svg:
--------------------------------------------------------------------------------
1 |
4 |
--------------------------------------------------------------------------------
/img/img.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 |
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 | const QUrl url(QStringLiteral("qrc:/main.qml"));
14 | QObject::connect(&engine, &QQmlApplicationEngine::objectCreated,
15 | &app, [url](QObject *obj, const QUrl &objUrl) {
16 | if (!obj && url == objUrl)
17 | QCoreApplication::exit(-1);
18 | }, Qt::QueuedConnection);
19 | engine.load(url);
20 |
21 | return app.exec();
22 | }
23 |
--------------------------------------------------------------------------------
/main.qml:
--------------------------------------------------------------------------------
1 | import QtQuick 2.15
2 | import QtQuick.Window 2.15
3 | import QtQuick.Controls 2.5
4 | import QtQuick.Layouts 1.3
5 | ApplicationWindow {
6 | id:root
7 | width: 1600
8 | height: 1200
9 | visible: true
10 | title: qsTr("Car Dashboard By Aksh")
11 | color: "#000000"
12 |
13 | //background
14 | background: Image{
15 | anchors.fill:parent
16 | source: "qrc:/icons/Background.png"
17 | }
18 |
19 | // Base Layer
20 |
21 | Image {
22 | anchors.centerIn: parent
23 | sourceSize: Qt.size(1492,717)
24 | source: "qrc:/icons/Base.svg"
25 |
26 |
27 |
28 | Image{
29 | id:topNavigation
30 | anchors{
31 | bottom:navigation_car.top
32 | bottomMargin: 50
33 | horizontalCenter: parent.horizontalCenter
34 | }
35 |
36 | source: "qrc:/icons/Top Navigation.svg"
37 |
38 | RowLayout{
39 | anchors.centerIn: parent
40 | spacing: 60
41 | MyButton{
42 | setIcon: isGlow ? "qrc:/icons/light/bxs_music.svg" : "qrc:/icons/bxs_music.svg"
43 | onClicked: isGlow = !isGlow
44 | }
45 | MyButton{
46 | setIcon: isGlow ? "qrc:/icons/light/ep_menu.svg" : "qrc:/icons/ep_menu.svg"
47 | onClicked: isGlow = !isGlow
48 | }
49 | MyButton{
50 | isGlow : true
51 | setIcon: isGlow ? "qrc:/icons/light/Car_Icon.svg" : "qrc:/icons/Car_icon.svg"
52 | onClicked: isGlow = !isGlow
53 | }
54 |
55 | MyButton{
56 | setIcon: isGlow ? "qrc:/icons/light/eva_phone-call-fill.svg" : "qrc:/icons/eva_phone-call-fill.svg"
57 | onClicked: isGlow = !isGlow
58 | }
59 | MyButton{
60 | setIcon: isGlow ? "qrc:/icons/light/clarity_settings-solid.svg" : "qrc:/icons/clarity_settings-solid.svg"
61 | onClicked: isGlow = !isGlow
62 | }
63 | }
64 | }
65 |
66 |
67 | SideGauge {
68 | id:leftGauge
69 | anchors{
70 | verticalCenter: parent.verticalCenter
71 | left: parent.left
72 | leftMargin: parent.width / 11
73 | }
74 | property bool accelerating
75 | width: 400
76 | height: 400
77 | value: accelerating ? maximumValue : 0
78 | maximumValue: 250
79 | Component.onCompleted: forceActiveFocus()
80 | Behavior on value { NumberAnimation { duration: 1000 }}
81 |
82 | Keys.onSpacePressed: accelerating = true
83 | Keys.onReturnPressed: rightGauge.accelerating = true
84 | Keys.onReleased: {
85 | if (event.key === Qt.Key_Space) {
86 | accelerating = false;
87 | event.accepted = true;
88 | }else if(event.key === Qt.Key_Return){
89 | rightGauge.accelerating = false;
90 | event.accepted = true;
91 | }
92 | }
93 | }
94 |
95 | Image {
96 | id:navigation_car
97 | visible: false
98 | anchors.centerIn: parent
99 | source: "qrc:/icons/Navigation.png"
100 | }
101 |
102 | RowLayout{
103 | id:speedLimit
104 | spacing: 20
105 | anchors.horizontalCenter: parent.horizontalCenter
106 | anchors.bottom: parent.bottom
107 | anchors.bottomMargin: 26.50 + 65
108 | Label{
109 | text: "P"
110 | font.pixelSize: 32
111 | font.family: "Inter"
112 | font.bold: Font.Normal
113 | font.capitalization: Font.AllUppercase
114 | color: "#FFFFFF"
115 | }
116 |
117 | Label{
118 | text: "R"
119 | font.pixelSize: 32
120 | font.family: "Inter"
121 | font.bold: Font.Normal
122 | font.capitalization: Font.AllUppercase
123 | opacity: 0.2
124 | color: "#FFFFFF"
125 | }
126 | Label{
127 | text: "N"
128 | font.pixelSize: 32
129 | font.family: "Inter"
130 | font.bold: Font.Normal
131 | font.capitalization: Font.AllUppercase
132 | opacity: 0.2
133 | color: "#FFFFFF"
134 | }
135 | Label{
136 | text: "D"
137 | font.pixelSize: 32
138 | font.family: "Inter"
139 | font.bold: Font.Normal
140 | font.capitalization: Font.AllUppercase
141 | opacity: 0.2
142 | color: "#FFFFFF"
143 | }
144 | }
145 |
146 | Image {
147 | anchors{
148 | bottom: car.top
149 | bottomMargin: 60
150 | horizontalCenter:car.horizontalCenter
151 | }
152 | source: "qrc:/img/Model 3.png"
153 | }
154 |
155 | Image {
156 | anchors{
157 | bottom: car.top
158 | bottomMargin: -60
159 | horizontalCenter:car.horizontalCenter
160 | }
161 | source: "qrc:/icons/Headlights.svg"
162 | }
163 |
164 | Image {
165 | id:car
166 | anchors{
167 | bottom: speedLimit.top
168 | bottomMargin: 40
169 | horizontalCenter:speedLimit.horizontalCenter
170 | }
171 | source: "qrc:/icons/Car.svg"
172 | }
173 |
174 | // IMGonline.com.ua ==> Compress Image With
175 |
176 |
177 | /*
178 | Left Road
179 | */
180 |
181 | Image {
182 | id: leftRoad
183 | width: 127
184 | height: 397
185 | anchors{
186 | left: speedLimit.left
187 | leftMargin: 100
188 | bottom: parent.bottom
189 | bottomMargin: 26.50 + 50
190 | }
191 |
192 | source: "qrc:/icons/Vector 2.svg"
193 | }
194 |
195 | RowLayout{
196 | spacing: 20
197 |
198 | anchors{
199 | left: parent.left
200 | leftMargin: 250
201 | bottom: parent.bottom
202 | bottomMargin: 26.50 + 65
203 | }
204 |
205 | RowLayout{
206 | spacing: 1
207 | Layout.topMargin: 10
208 | Rectangle{
209 | width: 20
210 | height: 15
211 | color: leftGauge.value.toFixed(0) > 31.25 ? leftGauge.speedColor : "#01E6DC"
212 | }
213 | Rectangle{
214 | width: 20
215 | height: 15
216 | color: leftGauge.value.toFixed(0) > 62.5 ? leftGauge.speedColor : "#01E6DC"
217 | }
218 | Rectangle{
219 | width: 20
220 | height: 15
221 | color: leftGauge.value.toFixed(0) > 93.75 ? leftGauge.speedColor : "#01E6DC"
222 | }
223 | Rectangle{
224 | width: 20
225 | height: 15
226 | color: leftGauge.value.toFixed(0) > 125.25 ? leftGauge.speedColor : "#01E6DC"
227 | }
228 | Rectangle{
229 | width: 20
230 | height: 15
231 | color: leftGauge.value.toFixed(0) > 156.5 ? leftGauge.speedColor : "#01E6DC"
232 | }
233 | Rectangle{
234 | width: 20
235 | height: 15
236 | color: leftGauge.value.toFixed(0) > 187.75 ? leftGauge.speedColor : "#01E6DC"
237 | }
238 | Rectangle{
239 | width: 20
240 | height: 15
241 | color: leftGauge.value.toFixed(0) > 219 ? leftGauge.speedColor : "#01E6DC"
242 | }
243 | }
244 |
245 | Label{
246 | text: leftGauge.value.toFixed(0) + " MPH "
247 | font.pixelSize: 32
248 | font.family: "Inter"
249 | font.bold: Font.Normal
250 | font.capitalization: Font.AllUppercase
251 | color: "#FFFFFF"
252 | }
253 | }
254 |
255 | /*
256 | Right Road
257 | */
258 |
259 | Image {
260 | id: rightRoad
261 | width: 127
262 | height: 397
263 | anchors{
264 | right: speedLimit.right
265 | rightMargin: 100
266 | bottom: parent.bottom
267 | bottomMargin: 26.50 + 50
268 | }
269 |
270 | source: "qrc:/icons/Vector 1.svg"
271 | }
272 |
273 |
274 | SideGauge {
275 | id:rightGauge
276 | anchors{
277 | verticalCenter: parent.verticalCenter
278 | right: parent.right
279 | rightMargin: parent.width /11
280 | }
281 | property bool accelerating
282 | width: 400
283 | height: 400
284 | value: accelerating ? maximumValue : 0
285 | maximumValue: 250
286 | Behavior on value { NumberAnimation { duration: 1000 }}
287 | }
288 | }
289 | }
290 |
--------------------------------------------------------------------------------
/qml.qrc:
--------------------------------------------------------------------------------
1 |
2 |
3 | main.qml
4 | icons/Base.svg
5 | icons/entypo_home.svg
6 | icons/Navigation.svg
7 | icons/Top Navigation.svg
8 | icons/Vector.svg
9 | icons/Background.png
10 | icons/car.png
11 | icons/Navigation.png
12 | icons/bxs_music.svg
13 | icons/clarity_settings-solid.svg
14 | icons/ep_menu.svg
15 | icons/eva_phone-call-fill.svg
16 | img/background.png
17 | img/background.svg
18 | img/cirlcle.svg
19 | img/Ellipse 1.svg
20 | img/Ellipse 5.svg
21 | img/Ellipse 6.svg
22 | img/maxLimit.svg
23 | img/needle.svg
24 | img/Rectangle 4.svg
25 | img/ring.svg
26 | img/sub.svg
27 | img/Subtract.svg
28 | img/tickmark.svg
29 | SideGauge.qml
30 | icons/Car.svg
31 | icons/Vector 1.svg
32 | icons/Vector 2.svg
33 | img/Model 3.png
34 | icons/light/bxs_music.svg
35 | icons/light/clarity_settings-solid.svg
36 | icons/light/entypo_home.svg
37 | icons/light/ep_menu.svg
38 | icons/light/eva_phone-call-fill.svg
39 | MyButton.qml
40 | icons/Headlights.svg
41 | icons/light/Car_Icon.svg
42 | icons/Car_icon.svg
43 |
44 |
45 |
--------------------------------------------------------------------------------
/screenshot/Screenshot 2023-08-13 212900.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cppqtdev/Modern-Car-Dashboard/b67ece1c9cca44a1a90e023c7ccbff8562d95548/screenshot/Screenshot 2023-08-13 212900.png
--------------------------------------------------------------------------------
/screenshot/img.txt:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------