├── code2.png ├── assets ├── car.png ├── Dashboard.svg ├── icons.txt ├── Vector 2.svg ├── Group 28.svg ├── fuel.svg ├── Vector 1.svg ├── Vector 70.svg ├── SecondRightIcon.svg ├── thirdRightIcon.svg ├── speedometer.svg ├── FirstRightIcon.svg ├── Low beam headlights.svg ├── Parking lights.svg ├── Rare fog lights.svg ├── Lights.svg └── FourthRightIcon.svg ├── Code_Screen.png ├── Figma_Screen.png ├── README.md ├── main.cpp ├── Car_1.pro ├── qml.qrc ├── radialbar.h ├── radialbar.cpp ├── main.qml └── Car_1.pro.user /code2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cppqtdev/Car-HMI-Dashboard-UI/HEAD/code2.png -------------------------------------------------------------------------------- /assets/car.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cppqtdev/Car-HMI-Dashboard-UI/HEAD/assets/car.png -------------------------------------------------------------------------------- /Code_Screen.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cppqtdev/Car-HMI-Dashboard-UI/HEAD/Code_Screen.png -------------------------------------------------------------------------------- /Figma_Screen.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cppqtdev/Car-HMI-Dashboard-UI/HEAD/Figma_Screen.png -------------------------------------------------------------------------------- /assets/Dashboard.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /assets/icons.txt: -------------------------------------------------------------------------------- 1 | ## QML Car Dashboard 2 | ![alt text](https://github.com/cppqtdev/Car-Dashboard/blob/main/Code_Screen.png) 3 | 4 | ##Figma Screen Design 5 | https://www.figma.com/community/file/1233515265201858861/Car-Dashboard?preview=fullscreen 6 | ![alt text](https://github.com/cppqtdev/Car-Dashboard/blob/main/Figma_Screen.png) 7 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Car-Dashboard 2 | Car Dashboard Using Qt QML 3 | 4 | ## QML Car Dashboard 5 | ![alt text](https://github.com/cppqtdev/Car-Dashboard/blob/main/code2.png) 6 | 7 | ##Figma Screen Design 8 | https://www.figma.com/community/file/1233515265201858861/Car-Dashboard?preview=fullscreen 9 | ![alt text](https://github.com/cppqtdev/Car-Dashboard/blob/main/Figma_Screen.png) 10 | -------------------------------------------------------------------------------- /assets/Vector 2.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /main.cpp: -------------------------------------------------------------------------------- 1 | #include 2 | #include 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("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 | } 24 | -------------------------------------------------------------------------------- /Car_1.pro: -------------------------------------------------------------------------------- 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 26 | -------------------------------------------------------------------------------- /assets/Group 28.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /qml.qrc: -------------------------------------------------------------------------------- 1 | 2 | 3 | main.qml 4 | assets/Dashboard.svg 5 | assets/Vector 70.svg 6 | assets/Low beam headlights.svg 7 | assets/Vector 1.svg 8 | assets/Vector 2.svg 9 | assets/FirstRightIcon.svg 10 | assets/FourthRightIcon.svg 11 | assets/Lights.svg 12 | assets/Parking lights.svg 13 | assets/Rare fog lights.svg 14 | assets/SecondRightIcon.svg 15 | assets/thirdRightIcon.svg 16 | assets/car.png 17 | assets/fuel.svg 18 | assets/Group 28.svg 19 | assets/speedometer.svg 20 | 21 | 22 | -------------------------------------------------------------------------------- /assets/fuel.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /assets/Vector 1.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /assets/Vector 70.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /assets/SecondRightIcon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /assets/thirdRightIcon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /assets/speedometer.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /assets/FirstRightIcon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /assets/Low beam headlights.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /assets/Parking lights.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /assets/Rare fog lights.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /assets/Lights.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /radialbar.h: -------------------------------------------------------------------------------- 1 | #ifndef RADIALBAR_H 2 | #define RADIALBAR_H 3 | 4 | #include 5 | 6 | class RadialBar : public QQuickPaintedItem 7 | { 8 | Q_OBJECT 9 | 10 | Q_PROPERTY(qreal size READ getSize WRITE setSize NOTIFY sizeChanged) 11 | Q_PROPERTY(qreal startAngle READ getStartAngle WRITE setStartAngle NOTIFY startAngleChanged) 12 | Q_PROPERTY(qreal spanAngle READ getSpanAngle WRITE setSpanAngle NOTIFY spanAngleChanged) 13 | Q_PROPERTY(qreal minValue READ getMinValue WRITE setMinValue NOTIFY minValueChanged) 14 | Q_PROPERTY(qreal maxValue READ getMaxValue WRITE setMaxValue NOTIFY maxValueChanged) 15 | Q_PROPERTY(qreal value READ getValue WRITE setValue NOTIFY valueChanged) 16 | Q_PROPERTY(int dialWidth READ getDialWidth WRITE setDialWidth NOTIFY dialWidthChanged) 17 | Q_PROPERTY(QColor backgroundColor READ getBackgroundColor WRITE setBackgroundColor NOTIFY backgroundColorChanged) 18 | Q_PROPERTY(QColor foregroundColor READ getForegroundColor WRITE setForegroundColor NOTIFY foregroundColorChanged) 19 | Q_PROPERTY(QColor progressColor READ getProgressColor WRITE setProgressColor NOTIFY progressColorChanged) 20 | Q_PROPERTY(QColor textColor READ getTextColor WRITE setTextColor NOTIFY textColorChanged) 21 | Q_PROPERTY(QString suffixText READ getSuffixText WRITE setSuffixText NOTIFY suffixTextChanged) 22 | Q_PROPERTY(bool showText READ isShowText WRITE setShowText) 23 | Q_PROPERTY(Qt::PenCapStyle penStyle READ getPenStyle WRITE setPenStyle NOTIFY penStyleChanged) 24 | Q_PROPERTY(DialType dialType READ getDialType WRITE setDialType NOTIFY dialTypeChanged) 25 | Q_PROPERTY(QFont textFont READ getTextFont WRITE setTextFont NOTIFY textFontChanged) 26 | 27 | public: 28 | RadialBar(QQuickItem *parent = 0); 29 | void paint(QPainter *painter); 30 | 31 | enum DialType { 32 | FullDial, 33 | MinToMax, 34 | NoDial 35 | }; 36 | Q_ENUM(DialType) 37 | 38 | qreal getSize() {return m_Size;} 39 | qreal getStartAngle() {return m_StartAngle;} 40 | qreal getSpanAngle() {return m_SpanAngle;} 41 | qreal getMinValue() {return m_MinValue;} 42 | qreal getMaxValue() {return m_MaxValue;} 43 | qreal getValue() {return m_Value;} 44 | int getDialWidth() {return m_DialWidth;} 45 | QColor getBackgroundColor() {return m_BackgroundColor;} 46 | QColor getForegroundColor() {return m_DialColor;} 47 | QColor getProgressColor() {return m_ProgressColor;} 48 | QColor getTextColor() {return m_TextColor;} 49 | QString getSuffixText() {return m_SuffixText;} 50 | bool isShowText() {return m_ShowText;} 51 | Qt::PenCapStyle getPenStyle() {return m_PenStyle;} 52 | DialType getDialType() {return m_DialType;} 53 | QFont getTextFont() {return m_TextFont;} 54 | 55 | void setSize(qreal size); 56 | void setStartAngle(qreal angle); 57 | void setSpanAngle(qreal angle); 58 | void setMinValue(qreal value); 59 | void setMaxValue(qreal value); 60 | void setValue(qreal value); 61 | void setDialWidth(qreal width); 62 | void setBackgroundColor(QColor color); 63 | void setForegroundColor(QColor color); 64 | void setProgressColor(QColor color); 65 | void setTextColor(QColor color); 66 | void setSuffixText(QString text); 67 | void setShowText(bool show); 68 | void setPenStyle(Qt::PenCapStyle style); 69 | void setDialType(DialType type); 70 | void setTextFont(QFont font); 71 | 72 | signals: 73 | void sizeChanged(); 74 | void startAngleChanged(); 75 | void spanAngleChanged(); 76 | void minValueChanged(); 77 | void maxValueChanged(); 78 | void valueChanged(); 79 | void dialWidthChanged(); 80 | void backgroundColorChanged(); 81 | void foregroundColorChanged(); 82 | void progressColorChanged(); 83 | void textColorChanged(); 84 | void suffixTextChanged(); 85 | void penStyleChanged(); 86 | void dialTypeChanged(); 87 | void textFontChanged(); 88 | 89 | private: 90 | qreal m_Size; 91 | qreal m_StartAngle; 92 | qreal m_SpanAngle; 93 | qreal m_MinValue; 94 | qreal m_MaxValue; 95 | qreal m_Value; 96 | int m_DialWidth; 97 | QColor m_BackgroundColor; 98 | QColor m_DialColor; 99 | QColor m_ProgressColor; 100 | QColor m_TextColor; 101 | QString m_SuffixText; 102 | bool m_ShowText; 103 | Qt::PenCapStyle m_PenStyle; 104 | DialType m_DialType; 105 | QFont m_TextFont; 106 | }; 107 | 108 | #endif // RADIALBAR_H 109 | -------------------------------------------------------------------------------- /assets/FourthRightIcon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /radialbar.cpp: -------------------------------------------------------------------------------- 1 | #include 2 | #include "radialbar.h" 3 | 4 | RadialBar::RadialBar(QQuickItem *parent) 5 | : QQuickPaintedItem(parent), 6 | m_Size(200), 7 | m_StartAngle(40), 8 | m_SpanAngle(280), 9 | m_MinValue(0), 10 | m_MaxValue(100), 11 | m_Value(50), 12 | m_DialWidth(15), 13 | m_BackgroundColor(Qt::transparent), 14 | m_DialColor(QColor(80,80,80)), 15 | m_ProgressColor(QColor(135,26,5)), 16 | m_TextColor(QColor(0, 0, 0)), 17 | m_SuffixText(""), 18 | m_ShowText(true), 19 | m_PenStyle(Qt::FlatCap), 20 | m_DialType(DialType::MinToMax) 21 | { 22 | setWidth(200); 23 | setHeight(200); 24 | setSmooth(true); 25 | setAntialiasing(true); 26 | } 27 | 28 | void RadialBar::paint(QPainter *painter) 29 | { 30 | double startAngle; 31 | double spanAngle; 32 | qreal size = qMin(this->width(), this->height()); 33 | setWidth(size); 34 | setHeight(size); 35 | QRectF rect = this->boundingRect(); 36 | painter->setRenderHint(QPainter::Antialiasing); 37 | QPen pen = painter->pen(); 38 | pen.setCapStyle(m_PenStyle); 39 | 40 | startAngle = -90 - m_StartAngle; 41 | if(FullDial != m_DialType) 42 | { 43 | spanAngle = 0 - m_SpanAngle; 44 | } 45 | else 46 | { 47 | spanAngle = -360; 48 | } 49 | 50 | //Draw outer dial 51 | painter->save(); 52 | pen.setWidth(m_DialWidth); 53 | pen.setColor(m_DialColor); 54 | painter->setPen(pen); 55 | qreal offset = m_DialWidth / 2; 56 | if(m_DialType == MinToMax) 57 | { 58 | painter->drawArc(rect.adjusted(offset, offset, -offset, -offset), startAngle * 16, spanAngle * 16); 59 | } 60 | else if(m_DialType == FullDial) 61 | { 62 | painter->drawArc(rect.adjusted(offset, offset, -offset, -offset), -90 * 16, -360 * 16); 63 | } 64 | else 65 | { 66 | //do not draw dial 67 | } 68 | painter->restore(); 69 | 70 | //Draw background 71 | painter->save(); 72 | painter->setBrush(m_BackgroundColor); 73 | painter->setPen(m_BackgroundColor); 74 | qreal inner = offset * 2; 75 | painter->drawEllipse(rect.adjusted(inner, inner, -inner, -inner)); 76 | painter->restore(); 77 | 78 | //Draw progress text with suffix 79 | painter->save(); 80 | painter->setFont(m_TextFont); 81 | pen.setColor(m_TextColor); 82 | painter->setPen(pen); 83 | if(m_ShowText) 84 | { 85 | painter->drawText(rect.adjusted(offset, offset, -offset, -offset), Qt::AlignCenter,QString::number(m_Value) + m_SuffixText); 86 | } 87 | else 88 | { 89 | painter->drawText(rect.adjusted(offset, offset, -offset, -offset), Qt::AlignCenter, m_SuffixText); 90 | } 91 | painter->restore(); 92 | 93 | //Draw progress bar 94 | painter->save(); 95 | pen.setWidth(m_DialWidth); 96 | pen.setColor(m_ProgressColor); 97 | qreal valueAngle = ((m_Value - m_MinValue)/(m_MaxValue - m_MinValue)) * spanAngle; //Map value to angle range 98 | painter->setPen(pen); 99 | painter->drawArc(rect.adjusted(offset, offset, -offset, -offset), startAngle * 16, valueAngle * 16); 100 | painter->restore(); 101 | } 102 | 103 | void RadialBar::setSize(qreal size) 104 | { 105 | if(m_Size == size) 106 | return; 107 | m_Size = size; 108 | emit sizeChanged(); 109 | } 110 | 111 | void RadialBar::setStartAngle(qreal angle) 112 | { 113 | if(m_StartAngle == angle) 114 | return; 115 | m_StartAngle = angle; 116 | emit startAngleChanged(); 117 | } 118 | 119 | void RadialBar::setSpanAngle(qreal angle) 120 | { 121 | if(m_SpanAngle == angle) 122 | return; 123 | m_SpanAngle = angle; 124 | emit spanAngleChanged(); 125 | } 126 | 127 | void RadialBar::setMinValue(qreal value) 128 | { 129 | if(m_MinValue == value) 130 | return; 131 | m_MinValue = value; 132 | emit minValueChanged(); 133 | } 134 | 135 | void RadialBar::setMaxValue(qreal value) 136 | { 137 | if(m_MaxValue == value) 138 | return; 139 | m_MaxValue = value; 140 | emit maxValueChanged(); 141 | } 142 | 143 | void RadialBar::setValue(qreal value) 144 | { 145 | if(m_Value == value) 146 | return; 147 | m_Value = value; 148 | update(); //update the radialbar 149 | emit valueChanged(); 150 | } 151 | 152 | void RadialBar::setDialWidth(qreal width) 153 | { 154 | if(m_DialWidth == width) 155 | return; 156 | m_DialWidth = width; 157 | emit dialWidthChanged(); 158 | } 159 | 160 | void RadialBar::setBackgroundColor(QColor color) 161 | { 162 | if(m_BackgroundColor == color) 163 | return; 164 | m_BackgroundColor = color; 165 | emit backgroundColorChanged(); 166 | } 167 | 168 | void RadialBar::setForegroundColor(QColor color) 169 | { 170 | if(m_DialColor == color) 171 | return; 172 | m_DialColor = color; 173 | emit foregroundColorChanged(); 174 | } 175 | 176 | void RadialBar::setProgressColor(QColor color) 177 | { 178 | if(m_ProgressColor == color) 179 | return; 180 | m_ProgressColor = color; 181 | emit progressColorChanged(); 182 | } 183 | 184 | void RadialBar::setTextColor(QColor color) 185 | { 186 | if(m_TextColor == color) 187 | return; 188 | m_TextColor = color; 189 | emit textColorChanged(); 190 | } 191 | 192 | void RadialBar::setSuffixText(QString text) 193 | { 194 | if(m_SuffixText == text) 195 | return; 196 | m_SuffixText = text; 197 | emit suffixTextChanged(); 198 | } 199 | 200 | void RadialBar::setShowText(bool show) 201 | { 202 | if(m_ShowText == show) 203 | return; 204 | m_ShowText = show; 205 | } 206 | 207 | void RadialBar::setPenStyle(Qt::PenCapStyle style) 208 | { 209 | if(m_PenStyle == style) 210 | return; 211 | m_PenStyle = style; 212 | emit penStyleChanged(); 213 | } 214 | 215 | void RadialBar::setDialType(RadialBar::DialType type) 216 | { 217 | if(m_DialType == type) 218 | return; 219 | m_DialType = type; 220 | emit dialTypeChanged(); 221 | } 222 | 223 | void RadialBar::setTextFont(QFont font) 224 | { 225 | if(m_TextFont == font) 226 | return; 227 | m_TextFont = font; 228 | emit textFontChanged(); 229 | } 230 | -------------------------------------------------------------------------------- /main.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.15 2 | import CustomControls 1.0 3 | import QtQuick.Window 2.15 4 | import QtQuick.Layouts 1.3 5 | import QtQuick.Controls 2.5 6 | ApplicationWindow { 7 | width: 1920 8 | height: 960 9 | visible: true 10 | title: qsTr("Car DashBoard") 11 | color: "#1E1E1E" 12 | visibility: "FullScreen" 13 | property int nextSpeed: 60 14 | 15 | function generateRandom(maxLimit = 70){ 16 | let rand = Math.random() * maxLimit; 17 | rand = Math.floor(rand); 18 | return rand; 19 | } 20 | 21 | Timer{ 22 | repeat: true 23 | interval: 3000 24 | running: true 25 | onTriggered: { 26 | nextSpeed = generateRandom() 27 | } 28 | } 29 | 30 | Timer{ 31 | id:speedTimer 32 | repeat: true 33 | interval: 500 34 | running: true 35 | onTriggered: { 36 | var currentSpeed = speedLabel.text 37 | if(nextSpeed > currentSpeed){ 38 | for(let i = currentSpeed; i< nextSpeed ;i++){ 39 | speedLabel.text = i 40 | } 41 | }else{ 42 | for(let j = nextSpeed; j< currentSpeed ;j++){ 43 | speedLabel.text = j 44 | } 45 | } 46 | } 47 | } 48 | 49 | Shortcut { 50 | sequence: StandardKey.Quit 51 | context: Qt.ApplicationShortcut 52 | onActivated: Qt.quit() 53 | } 54 | 55 | 56 | Image { 57 | id: dashboard 58 | width: parent.width 59 | height: parent.height 60 | anchors.centerIn: parent 61 | source: "qrc:/assets/Dashboard.svg" 62 | 63 | /* 64 | Top Bar Of Screen 65 | */ 66 | 67 | Image { 68 | id: topBar 69 | width: 1357 70 | height: 115 71 | source: "qrc:/assets/Vector 70.svg" 72 | 73 | anchors{ 74 | top: parent.top 75 | topMargin: 26.50 76 | horizontalCenter: parent.horizontalCenter 77 | } 78 | 79 | Image { 80 | id: headLight 81 | width: 42.5 82 | height: 38.25 83 | anchors{ 84 | top: parent.top 85 | topMargin: 10 86 | leftMargin: 230 87 | left: parent.left 88 | } 89 | 90 | source: "qrc:/assets/Low beam headlights.svg" 91 | } 92 | 93 | Label{ 94 | text: "19:30" 95 | font.pixelSize: 32 96 | font.family: "Inter" 97 | font.bold: Font.DemiBold 98 | color: "#FFFFFF" 99 | anchors.top: parent.top 100 | anchors.topMargin: 10 101 | anchors.horizontalCenter: parent.horizontalCenter 102 | } 103 | 104 | Label{ 105 | text: "02/08/2022" 106 | font.pixelSize: 32 107 | font.family: "Inter" 108 | font.bold: Font.DemiBold 109 | color: "#FFFFFF" 110 | anchors.right: parent.right 111 | anchors.rightMargin: 230 112 | anchors.top: parent.top 113 | anchors.topMargin: 10 114 | } 115 | } 116 | 117 | 118 | 119 | /* 120 | Speed Label 121 | */ 122 | 123 | Label{ 124 | id:speedLabel 125 | text: "68" 126 | font.pixelSize: 134 127 | font.family: "Inter" 128 | color: "#01E6DE" 129 | font.bold: Font.DemiBold 130 | anchors.top: parent.top 131 | anchors.topMargin:Math.floor(parent.height * 0.35) 132 | anchors.horizontalCenter: parent.horizontalCenter 133 | } 134 | 135 | Label{ 136 | text: "MPH" 137 | font.pixelSize: 46 138 | font.family: "Inter" 139 | color: "#01E6DE" 140 | font.bold: Font.Normal 141 | anchors.top:speedLabel.bottom 142 | anchors.horizontalCenter: parent.horizontalCenter 143 | } 144 | 145 | 146 | /* 147 | Speed Limit Label 148 | */ 149 | 150 | Rectangle{ 151 | id:speedLimit 152 | width: 130 153 | height: 130 154 | radius: height/2 155 | color: "#D9D9D9" 156 | border.color: "#CD0303" 157 | border.width: 10 158 | 159 | anchors.horizontalCenter: parent.horizontalCenter 160 | anchors.bottom: parent.bottom 161 | anchors.bottomMargin: 50 162 | 163 | Label{ 164 | text: "70" 165 | font.pixelSize: 52 166 | font.family: "Inter" 167 | font.bold: Font.Bold 168 | color: "#171717" 169 | anchors.centerIn: parent 170 | } 171 | } 172 | 173 | 174 | 175 | Image { 176 | anchors{ 177 | bottom: speedLimit.top 178 | bottomMargin: 30 179 | horizontalCenter:speedLimit.horizontalCenter 180 | } 181 | source: "qrc:/assets/car.png" 182 | } 183 | 184 | // IMGonline.com.ua ==> Compress Image With 185 | 186 | 187 | /* 188 | Left Road 189 | */ 190 | 191 | Image { 192 | id: leftRoad 193 | width: 127 194 | height: 397 195 | anchors{ 196 | left: speedLimit.left 197 | leftMargin: 100 198 | bottom: parent.bottom 199 | bottomMargin: 26.50 200 | } 201 | 202 | source: "qrc:/assets/Vector 2.svg" 203 | } 204 | 205 | RowLayout{ 206 | spacing: 20 207 | 208 | anchors{ 209 | left: parent.left 210 | leftMargin: 250 211 | bottom: parent.bottom 212 | bottomMargin: 26.50 + 65 213 | } 214 | 215 | RowLayout{ 216 | spacing: 3 217 | Label{ 218 | text: "100.6" 219 | font.pixelSize: 32 220 | font.family: "Inter" 221 | font.bold: Font.Normal 222 | font.capitalization: Font.AllUppercase 223 | color: "#FFFFFF" 224 | } 225 | 226 | Label{ 227 | text: "°F" 228 | font.pixelSize: 32 229 | font.family: "Inter" 230 | font.bold: Font.Normal 231 | font.capitalization: Font.AllUppercase 232 | opacity: 0.2 233 | color: "#FFFFFF" 234 | } 235 | } 236 | 237 | RowLayout{ 238 | spacing: 1 239 | Layout.topMargin: 10 240 | Rectangle{ 241 | width: 20 242 | height: 15 243 | color: "#32D74B" 244 | } 245 | Rectangle{ 246 | width: 20 247 | height: 15 248 | color: "#32D74B" 249 | } 250 | Rectangle{ 251 | width: 20 252 | height: 15 253 | color: "#32D74B" 254 | } 255 | Rectangle{ 256 | width: 20 257 | height: 15 258 | color: "#01E6DC" 259 | } 260 | Rectangle{ 261 | width: 20 262 | height: 15 263 | color: "#01E6DC" 264 | } 265 | Rectangle{ 266 | width: 20 267 | height: 15 268 | color: "#01E6DC" 269 | } 270 | Rectangle{ 271 | width: 20 272 | height: 15 273 | color: "#01E6DC" 274 | } 275 | } 276 | 277 | Label{ 278 | text: "78mph" 279 | font.pixelSize: 32 280 | font.family: "Inter" 281 | font.bold: Font.Normal 282 | font.capitalization: Font.AllUppercase 283 | color: "#FFFFFF" 284 | } 285 | } 286 | 287 | /* 288 | Right Road 289 | */ 290 | 291 | Image { 292 | id: rightRoad 293 | width: 127 294 | height: 397 295 | anchors{ 296 | right: speedLimit.right 297 | rightMargin: 100 298 | bottom: parent.bottom 299 | bottomMargin: 26.50 300 | } 301 | 302 | source: "qrc:/assets/Vector 1.svg" 303 | } 304 | 305 | /* 306 | Right Side gear 307 | */ 308 | 309 | RowLayout{ 310 | spacing: 20 311 | anchors{ 312 | right: parent.right 313 | rightMargin: 350 314 | bottom: parent.bottom 315 | bottomMargin: 26.50 + 65 316 | } 317 | 318 | Label{ 319 | text: "Ready" 320 | font.pixelSize: 32 321 | font.family: "Inter" 322 | font.bold: Font.Normal 323 | font.capitalization: Font.AllUppercase 324 | color: "#32D74B" 325 | } 326 | 327 | Label{ 328 | text: "P" 329 | font.pixelSize: 32 330 | font.family: "Inter" 331 | font.bold: Font.Normal 332 | font.capitalization: Font.AllUppercase 333 | color: "#FFFFFF" 334 | } 335 | 336 | Label{ 337 | text: "R" 338 | font.pixelSize: 32 339 | font.family: "Inter" 340 | font.bold: Font.Normal 341 | font.capitalization: Font.AllUppercase 342 | opacity: 0.2 343 | color: "#FFFFFF" 344 | } 345 | Label{ 346 | text: "N" 347 | font.pixelSize: 32 348 | font.family: "Inter" 349 | font.bold: Font.Normal 350 | font.capitalization: Font.AllUppercase 351 | opacity: 0.2 352 | color: "#FFFFFF" 353 | } 354 | Label{ 355 | text: "D" 356 | font.pixelSize: 32 357 | font.family: "Inter" 358 | font.bold: Font.Normal 359 | font.capitalization: Font.AllUppercase 360 | opacity: 0.2 361 | color: "#FFFFFF" 362 | } 363 | } 364 | 365 | /*Left Side Icons*/ 366 | Image { 367 | id:forthLeftIndicator 368 | width: 72 369 | height: 62 370 | anchors{ 371 | left: parent.left 372 | leftMargin: 175 373 | bottom: thirdLeftIndicator.top 374 | bottomMargin: 25 375 | } 376 | source: "qrc:/assets/Parking lights.svg" 377 | } 378 | 379 | Image { 380 | id:thirdLeftIndicator 381 | width: 52 382 | height: 70.2 383 | anchors{ 384 | left: parent.left 385 | leftMargin: 145 386 | bottom: secondLeftIndicator.top 387 | bottomMargin: 25 388 | } 389 | source: "qrc:/assets/Lights.svg" 390 | } 391 | 392 | Image { 393 | id:secondLeftIndicator 394 | width: 51 395 | height: 51 396 | anchors{ 397 | left: parent.left 398 | leftMargin: 125 399 | bottom: firstLeftIndicator.top 400 | bottomMargin: 30 401 | } 402 | source: "qrc:/assets/Low beam headlights.svg" 403 | } 404 | 405 | Image { 406 | id:firstLeftIndicator 407 | width: 51 408 | height: 51 409 | anchors{ 410 | left: parent.left 411 | leftMargin: 100 412 | verticalCenter: speedLabel.verticalCenter 413 | } 414 | source: "qrc:/assets/Rare fog lights.svg" 415 | } 416 | 417 | /*Right Side Icons*/ 418 | 419 | Image { 420 | id:forthRightIndicator 421 | width: 56.83 422 | height: 36.17 423 | anchors{ 424 | right: parent.right 425 | rightMargin: 195 426 | bottom: thirdRightIndicator.top 427 | bottomMargin: 50 428 | } 429 | opacity: 0.4 430 | source: "qrc:/assets/FourthRightIcon.svg" 431 | } 432 | 433 | Image { 434 | id:thirdRightIndicator 435 | width: 56.83 436 | height: 36.17 437 | anchors{ 438 | right: parent.right 439 | rightMargin: 155 440 | bottom: secondRightIndicator.top 441 | bottomMargin: 50 442 | } 443 | opacity: 0.4 444 | source: "qrc:/assets/thirdRightIcon.svg" 445 | } 446 | 447 | Image { 448 | id:secondRightIndicator 449 | width: 56.83 450 | height: 36.17 451 | anchors{ 452 | right: parent.right 453 | rightMargin: 125 454 | bottom: firstRightIndicator.top 455 | bottomMargin: 50 456 | } 457 | opacity: 0.4 458 | source: "qrc:/assets/SecondRightIcon.svg" 459 | } 460 | 461 | Image { 462 | id:firstRightIndicator 463 | width: 36 464 | height: 45 465 | anchors{ 466 | right: parent.right 467 | rightMargin: 100 468 | verticalCenter: speedLabel.verticalCenter 469 | } 470 | source: "qrc:/assets/FirstRightIcon.svg" 471 | } 472 | 473 | // Progress Bar 474 | RadialBar { 475 | id:radialBar 476 | anchors{ 477 | verticalCenter: parent.verticalCenter 478 | left: parent.left 479 | leftMargin: parent.width / 6 480 | } 481 | 482 | width: 338 483 | height: 338 484 | penStyle: Qt.RoundCap 485 | dialType: RadialBar.NoDial 486 | progressColor: "#01E4E0" 487 | backgroundColor: "transparent" 488 | dialWidth: 17 489 | startAngle: 270 490 | spanAngle: 3.6 * value 491 | minValue: 0 492 | maxValue: 100 493 | value: 97 494 | textFont { 495 | family: "inter" 496 | italic: false 497 | bold: Font.Medium 498 | pixelSize: 60 499 | } 500 | showText: false 501 | suffixText: "" 502 | textColor: "#FFFFFF" 503 | 504 | ColumnLayout{ 505 | anchors.centerIn: parent 506 | Label{ 507 | text: radialBar.value + "%" 508 | font.pixelSize: 65 509 | font.family: "Inter" 510 | font.bold: Font.Normal 511 | color: "#FFFFFF" 512 | Layout.alignment: Qt.AlignHCenter 513 | } 514 | 515 | Label{ 516 | text: "Battery charge" 517 | font.pixelSize: 28 518 | font.family: "Inter" 519 | font.bold: Font.Normal 520 | opacity: 0.8 521 | color: "#FFFFFF" 522 | Layout.alignment: Qt.AlignHCenter 523 | } 524 | } 525 | } 526 | 527 | ColumnLayout{ 528 | spacing: 40 529 | 530 | anchors{ 531 | verticalCenter: parent.verticalCenter 532 | right: parent.right 533 | rightMargin: parent.width / 6 534 | } 535 | 536 | RowLayout{ 537 | spacing: 30 538 | Image { 539 | width: 90 540 | height: 50 541 | source: "qrc:/assets/Group 28.svg" 542 | } 543 | 544 | ColumnLayout{ 545 | Label{ 546 | text: "188 KM" 547 | font.pixelSize: 30 548 | font.family: "Inter" 549 | font.bold: Font.Normal 550 | opacity: 0.8 551 | color: "#FFFFFF" 552 | } 553 | Label{ 554 | text: "Distance" 555 | font.pixelSize: 20 556 | font.family: "Inter" 557 | font.bold: Font.Normal 558 | opacity: 0.8 559 | color: "#FFFFFF" 560 | } 561 | } 562 | } 563 | RowLayout{ 564 | spacing: 30 565 | Image { 566 | width: 72 567 | height: 78 568 | source: "qrc:/assets/fuel.svg" 569 | } 570 | 571 | ColumnLayout{ 572 | Label{ 573 | text: "34 mpg" 574 | font.pixelSize: 30 575 | font.family: "Inter" 576 | font.bold: Font.Normal 577 | opacity: 0.8 578 | color: "#FFFFFF" 579 | } 580 | Label{ 581 | text: "Avg. Fuel Usage" 582 | font.pixelSize: 20 583 | font.family: "Inter" 584 | font.bold: Font.Normal 585 | opacity: 0.8 586 | color: "#FFFFFF" 587 | } 588 | } 589 | } 590 | RowLayout{ 591 | spacing: 30 592 | Image { 593 | width: 78.72 594 | height: 78.68 595 | source: "qrc:/assets/speedometer.svg" 596 | } 597 | 598 | ColumnLayout{ 599 | Label{ 600 | text: "78 mph" 601 | font.pixelSize: 30 602 | font.family: "Inter" 603 | font.bold: Font.Normal 604 | opacity: 0.8 605 | color: "#FFFFFF" 606 | } 607 | Label{ 608 | text: "Avg. Speed" 609 | font.pixelSize: 20 610 | font.family: "Inter" 611 | font.bold: Font.Normal 612 | opacity: 0.8 613 | color: "#FFFFFF" 614 | } 615 | } 616 | } 617 | } 618 | } 619 | } 620 | -------------------------------------------------------------------------------- /Car_1.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_1\..\build-Car_1-Desktop_Qt_5_15_12_MSVC2019_32bit-Debug 99 | C:/Users/ADMIN/Documents/build-Car_1-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_1\..\build-Car_1-Desktop_Qt_5_15_12_MSVC2019_32bit-Release 138 | C:/Users/ADMIN/Documents/build-Car_1-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_1\..\build-Car_1-Desktop_Qt_5_15_12_MSVC2019_32bit-Profile 179 | C:/Users/ADMIN/Documents/build-Car_1-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_1/Car_1.pro 241 | C:/Users/ADMIN/Documents/Car_1/Car_1.pro 242 | false 243 | true 244 | true 245 | false 246 | true 247 | C:/Users/ADMIN/Documents/build-Car_1-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 | --------------------------------------------------------------------------------