├── .gitignore ├── Components ├── Footer.qml ├── Header.qml ├── Icon.qml ├── IconButton.qml ├── LaunchPadControl.qml ├── LauncherButton.qml ├── StepperControl.qml ├── TopLeftButtonIconColumn.qml ├── TopLeftControl.qml ├── TopMiddleControl.qml └── TopRightControl.qml ├── Fonts └── Unitext Regular.ttf ├── LayoutManager.js ├── Map ├── CarMarker.png └── LocationMarker.png ├── NavigationMapHelperScreen.qml ├── NavigationMapScreen.qml ├── Nunito_Sans ├── NunitoSans-Black.ttf ├── NunitoSans-BlackItalic.ttf ├── NunitoSans-Bold.ttf ├── NunitoSans-BoldItalic.ttf ├── NunitoSans-ExtraBold.ttf ├── NunitoSans-ExtraBoldItalic.ttf ├── NunitoSans-ExtraLight.ttf ├── NunitoSans-ExtraLightItalic.ttf ├── NunitoSans-Italic.ttf ├── NunitoSans-Light.ttf ├── NunitoSans-LightItalic.ttf ├── NunitoSans-Regular.ttf ├── NunitoSans-SemiBold.ttf └── NunitoSans-SemiBoldItalic.ttf ├── README.md ├── Style.qml ├── Tesla_Dashboard_UI.pro ├── animIcons ├── icons8-car.gif └── icons8-destination.gif ├── driving_icons ├── Recording.svg ├── Sentry.svg ├── child safety.svg ├── mirror.svg └── steer wheel position.svg ├── icons ├── app_icons │ ├── bluetooth.svg │ ├── calendar.svg │ ├── caraoke.svg │ ├── dashcam.svg │ ├── front-defrost.svg │ ├── messages.svg │ ├── model-3.svg │ ├── music.svg │ ├── phone.svg │ ├── radio.svg │ ├── rear-defrost.svg │ ├── recording.svg │ ├── seat-warmer.svg │ ├── seat.svg │ ├── spotify.svg │ ├── steering-wheel-warmer.svg │ ├── toybox.svg │ ├── tunein.svg │ ├── video.svg │ ├── volume.svg │ ├── wiper.svg │ └── zoom.svg ├── car_action_icons │ ├── Power.svg │ ├── dark │ │ ├── Power.svg │ │ └── lock.svg │ └── lock.svg ├── dark │ ├── Power.svg │ ├── background_image.png │ ├── lock.svg │ └── sidebar-light.png ├── light │ ├── background_image.png │ └── sidebar.png ├── main control bar.svg ├── stepper_icons │ ├── left-arrow.svg │ └── right-arrow.svg └── top_header_icons │ ├── Sentry.svg │ ├── airbag_.svg │ ├── battery.svg │ ├── dark │ ├── Sentry.svg │ ├── icons.svg │ └── lock.svg │ ├── icons.svg │ └── lock.svg ├── light-icons ├── Headlight2.svg ├── Headlights.svg ├── Icons.svg ├── Icons │ └── headlight │ │ └── white.svg ├── Property 1=Default.svg ├── Property 1=Variant2.svg └── Seatbelt.svg ├── main.cpp ├── main.qml ├── network_icons ├── Dark Mode=Off.svg ├── Dark Mode=On.svg ├── icon=alar, color=light.svg ├── icon=alarm, color=dark.svg ├── icon=bluetooth, color=dark.svg ├── icon=bluetooth, color=light.svg ├── icon=notification, color=dark.svg ├── icon=notification, color=light.svg ├── icon=software, color=dark.svg ├── icon=software, color=light.svg ├── icon=wifi, color=dark.svg └── icon=wifi, color=light.svg ├── other_icons ├── Icon=chevron down, Color=white.svg ├── Icon=chevron up, Color=white.svg ├── Icon=controls, Color=white.svg ├── Icon=display, Color=white.svg ├── Icon=eye, Color=white.svg ├── Icon=lights, Color=white.svg ├── Icon=lock, Color=white.svg ├── Icon=model-3, Color=white.svg ├── Icon=navigation, Color=white.svg ├── Icon=point, Color=white.svg ├── Icon=power, Color=white.svg ├── Icon=search, Color=white.svg ├── Icon=security, Color=white.svg ├── Icon=service, Color=white.svg ├── Icon=shop, Color=white.svg ├── Icon=software, Color=white.svg ├── Icon=steering wheel, Color=white.svg ├── Icon=trip, Color=white.svg └── Icon=unlocked, Color=dark.svg ├── qml.qrc └── screenshot ├── 1.png ├── 2.png ├── 3.png ├── 4.png ├── 5.png ├── 6.png └── Main Menu.png /.gitignore: -------------------------------------------------------------------------------- 1 | # This file is used to ignore files which are generated 2 | # ---------------------------------------------------------------------------- 3 | 4 | *~ 5 | *.autosave 6 | *.a 7 | *.core 8 | *.moc 9 | *.o 10 | *.obj 11 | *.orig 12 | *.rej 13 | *.so 14 | *.so.* 15 | *_pch.h.cpp 16 | *_resource.rc 17 | *.qm 18 | .#* 19 | *.*# 20 | core 21 | !core/ 22 | tags 23 | .DS_Store 24 | .directory 25 | *.debug 26 | Makefile* 27 | *.prl 28 | *.app 29 | moc_*.cpp 30 | ui_*.h 31 | qrc_*.cpp 32 | Thumbs.db 33 | *.res 34 | *.rc 35 | /.qmake.cache 36 | /.qmake.stash 37 | 38 | # qtcreator generated files 39 | *.pro.user* 40 | CMakeLists.txt.user* 41 | 42 | # xemacs temporary files 43 | *.flc 44 | 45 | # Vim temporary files 46 | .*.swp 47 | 48 | # Visual Studio generated files 49 | *.ib_pdb_index 50 | *.idb 51 | *.ilk 52 | *.pdb 53 | *.sln 54 | *.suo 55 | *.vcproj 56 | *vcproj.*.*.user 57 | *.ncb 58 | *.sdf 59 | *.opensdf 60 | *.vcxproj 61 | *vcxproj.* 62 | 63 | # MinGW generated files 64 | *.Debug 65 | *.Release 66 | 67 | # Python byte code 68 | *.pyc 69 | 70 | # Binaries 71 | # -------- 72 | *.dll 73 | *.exe 74 | 75 | -------------------------------------------------------------------------------- /Components/Footer.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.9 2 | import QtQuick.Controls 2.5 3 | import QtQuick.Layouts 1.3 4 | import Style 1.0 5 | import QtGraphicalEffects 1.15 6 | 7 | Item { 8 | height: 120 9 | width: parent.width 10 | signal openLauncher() 11 | LinearGradient { 12 | anchors.fill: parent 13 | start: Qt.point(0, 0) 14 | end: Qt.point(0, 1000) 15 | gradient: Gradient { 16 | GradientStop { position: 0.0; color: Style.black } 17 | GradientStop { position: 1.0; color: Style.black60 } 18 | } 19 | } 20 | 21 | Icon{ 22 | id: leftControl 23 | icon.source: "qrc:/icons/app_icons/model-3.svg" 24 | anchors.verticalCenter: parent.verticalCenter 25 | anchors.left: parent.left 26 | anchors.leftMargin: 36 27 | onClicked: openLauncher() 28 | } 29 | 30 | Item { 31 | height: parent.height 32 | anchors.left: leftControl.right 33 | anchors.right: middleLayout.left 34 | anchors.verticalCenter: parent.verticalCenter 35 | 36 | StepperControl { 37 | anchors.centerIn: parent 38 | value: 72 39 | } 40 | } 41 | 42 | RowLayout { 43 | id: middleLayout 44 | anchors.centerIn: parent 45 | spacing: 20 46 | 47 | Icon{ 48 | icon.source: "qrc:/icons/app_icons/phone.svg" 49 | } 50 | 51 | Icon{ 52 | icon.source: "qrc:/icons/app_icons/radio.svg" 53 | } 54 | 55 | Icon{ 56 | icon.source: "qrc:/icons/app_icons/bluetooth.svg" 57 | } 58 | 59 | Icon{ 60 | icon.source: "qrc:/icons/app_icons/spotify.svg" 61 | } 62 | 63 | Icon{ 64 | icon.source: "qrc:/icons/app_icons/dashcam.svg" 65 | } 66 | 67 | Icon{ 68 | icon.source: "qrc:/icons/app_icons/video.svg" 69 | } 70 | 71 | Icon{ 72 | icon.source: "qrc:/icons/app_icons/tunein.svg" 73 | } 74 | } 75 | 76 | Item { 77 | height: parent.height 78 | anchors.right: rightControl.left 79 | anchors.left: middleLayout.right 80 | anchors.verticalCenter: parent.verticalCenter 81 | 82 | StepperControl { 83 | anchors.centerIn: parent 84 | value: 72 85 | } 86 | } 87 | 88 | StepperControl { 89 | id: rightControl 90 | anchors.verticalCenter: parent.verticalCenter 91 | anchors.right: parent.right 92 | anchors.rightMargin: 36 93 | value: 72 94 | icon: "qrc:/icons/app_icons/volume.svg" 95 | } 96 | } 97 | -------------------------------------------------------------------------------- /Components/Header.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.9 2 | import QtQuick.Controls 2.5 3 | import QtQuick.Layouts 1.3 4 | import Style 1.0 5 | import QtGraphicalEffects 1.15 6 | 7 | Item { 8 | height: 54 9 | width: parent.width 10 | 11 | TopLeftControl { 12 | anchors.left: parent.left 13 | anchors.leftMargin: 24 14 | anchors.verticalCenter: parent.verticalCenter 15 | } 16 | 17 | TopMiddleControl { 18 | anchors.centerIn: parent 19 | } 20 | 21 | TopRightControl { 22 | anchors.right: parent.right 23 | anchors.verticalCenter: parent.verticalCenter 24 | anchors.rightMargin: 24 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /Components/Icon.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.9 2 | import QtQuick.Controls 2.5 3 | import QtQuick.Layouts 1.3 4 | import Style 1.0 5 | import QtGraphicalEffects 1.15 6 | 7 | Button { 8 | id: control 9 | property string setIcon : "" 10 | property bool isGlow: false 11 | scale: 1 12 | 13 | contentItem: Image { 14 | horizontalAlignment: Image.AlignHCenter 15 | verticalAlignment: Image.AlignVCenter 16 | source: control.icon.source 17 | scale: control.pressed ? 0.9 : control.scale 18 | Behavior on scale { NumberAnimation { duration: 200; } } 19 | } 20 | 21 | background: Rectangle { 22 | anchors.fill: parent 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.2 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 | -------------------------------------------------------------------------------- /Components/IconButton.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.9 2 | import QtQuick.Controls 2.5 3 | import QtQuick.Layouts 1.3 4 | import Style 1.0 5 | import QtGraphicalEffects 1.15 6 | 7 | Button { 8 | id: control 9 | property string setIcon : "" 10 | property bool isGlow: false 11 | implicitHeight: isGlow ? 50 : 44 12 | implicitWidth: isGlow ? 50 : 44 13 | 14 | Image{ 15 | anchors.centerIn: parent 16 | source: setIcon 17 | scale: control.pressed ? 0.9 : 1.0 18 | Behavior on scale { NumberAnimation { duration: 200; } } 19 | } 20 | 21 | background: Rectangle { 22 | implicitWidth: control.width 23 | implicitHeight: control.height 24 | Layout.fillWidth: true 25 | radius: width 26 | color: "transparent" 27 | border.width: 0 28 | border.color: "transparent" 29 | visible: false 30 | Behavior on color { 31 | ColorAnimation { 32 | duration: 200; 33 | easing.type: Easing.Linear; 34 | } 35 | } 36 | 37 | Rectangle { 38 | id: indicator 39 | property int mx 40 | property int my 41 | x: mx - width / 2 42 | y: my - height / 2 43 | height: width 44 | radius: width / 2 45 | color: isGlow ? Qt.lighter("#29BEB6") : Qt.lighter("#B8FF01") 46 | } 47 | } 48 | 49 | Rectangle { 50 | id: mask 51 | radius: width 52 | anchors.fill: parent 53 | visible: false 54 | } 55 | 56 | OpacityMask { 57 | anchors.fill: background 58 | source: background 59 | maskSource: mask 60 | } 61 | 62 | MouseArea { 63 | id: mouseArea 64 | hoverEnabled: true 65 | acceptedButtons: Qt.NoButton 66 | cursorShape: Qt.PointingHandCursor 67 | anchors.fill: parent 68 | } 69 | 70 | ParallelAnimation { 71 | id: anim 72 | NumberAnimation { 73 | target: indicator 74 | property: 'width' 75 | from: 0 76 | to: control.width * 1.5 77 | duration: 200 78 | } 79 | NumberAnimation { 80 | target: indicator; 81 | property: 'opacity' 82 | from: 0.9 83 | to: 0 84 | duration: 200 85 | } 86 | } 87 | 88 | onPressed: { 89 | indicator.mx = mouseArea.mouseX 90 | indicator.my = mouseArea.mouseY 91 | anim.restart(); 92 | } 93 | } 94 | -------------------------------------------------------------------------------- /Components/LaunchPadControl.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.9 2 | import QtQuick.Controls 2.5 3 | import QtQuick.Layouts 1.3 4 | import Style 1.0 5 | import QtGraphicalEffects 1.15 6 | 7 | Popup { 8 | width: 1104 9 | height: 445 10 | background: Rectangle { 11 | anchors.fill: parent 12 | radius: 9 13 | color: Style.alphaColor(Style.black,0.8) 14 | } 15 | 16 | contentItem: ColumnLayout { 17 | spacing: 8 18 | anchors.fill: parent 19 | RowLayout { 20 | Layout.leftMargin: 24 21 | Layout.alignment: Qt.AlignTop | Qt.AlignLeft 22 | spacing: 24 23 | LauncherButton { 24 | Layout.alignment: Qt.AlignVCenter | Qt.AlignHCenter 25 | icon.source: "qrc:/icons/app_icons/front-defrost.svg" 26 | text: "Front Defrost" 27 | } 28 | LauncherButton { 29 | Layout.alignment: Qt.AlignVCenter | Qt.AlignHCenter 30 | icon.source: "qrc:/icons/app_icons/rear-defrost.svg" 31 | text: "Rear Defrost" 32 | } 33 | LauncherButton { 34 | Layout.alignment: Qt.AlignVCenter | Qt.AlignHCenter 35 | icon.source: "qrc:/icons/app_icons/seat.svg" 36 | text: "Left Seat" 37 | } 38 | LauncherButton { 39 | Layout.alignment: Qt.AlignVCenter | Qt.AlignHCenter 40 | icon.source: "qrc:/icons/app_icons/steering-wheel-warmer.svg" 41 | text: "Heated Steering" 42 | } 43 | LauncherButton { 44 | Layout.alignment: Qt.AlignVCenter | Qt.AlignHCenter 45 | icon.source: "qrc:/icons/app_icons/wiper.svg" 46 | text: "Wipers" 47 | } 48 | } 49 | 50 | Rectangle { 51 | Layout.alignment: Qt.AlignTop | Qt.AlignHCenter 52 | width: parent.width - 48 53 | height: 1 54 | color: Style.black30 55 | } 56 | 57 | RowLayout { 58 | Layout.leftMargin: 24 59 | Layout.alignment: Qt.AlignTop | Qt.AlignLeft 60 | spacing: 24 61 | LauncherButton { 62 | Layout.alignment: Qt.AlignVCenter | Qt.AlignHCenter 63 | icon.source: "qrc:/icons/app_icons/dashcam.svg" 64 | text: "Dashcam" 65 | } 66 | LauncherButton { 67 | Layout.alignment: Qt.AlignVCenter | Qt.AlignHCenter 68 | icon.source: "qrc:/icons/app_icons/calendar.svg" 69 | text: "Calendar" 70 | } 71 | LauncherButton { 72 | Layout.alignment: Qt.AlignVCenter | Qt.AlignHCenter 73 | icon.source: "qrc:/icons/app_icons/messages.svg" 74 | text: "Messages" 75 | } 76 | LauncherButton { 77 | Layout.alignment: Qt.AlignVCenter | Qt.AlignHCenter 78 | icon.source: "qrc:/icons/app_icons/zoom.svg" 79 | text: "Zoom" 80 | } 81 | LauncherButton { 82 | Layout.alignment: Qt.AlignVCenter | Qt.AlignHCenter 83 | icon.source: "qrc:/icons/app_icons/video.svg" 84 | text: "Theater" 85 | } 86 | LauncherButton { 87 | Layout.alignment: Qt.AlignVCenter | Qt.AlignHCenter 88 | icon.source: "qrc:/icons/app_icons/toybox.svg" 89 | text: "Toybox" 90 | } 91 | LauncherButton { 92 | Layout.alignment: Qt.AlignVCenter | Qt.AlignHCenter 93 | icon.source: "qrc:/icons/app_icons/spotify.svg" 94 | text: "Spotify" 95 | } 96 | } 97 | 98 | RowLayout { 99 | Layout.leftMargin: 24 100 | Layout.alignment: Qt.AlignTop | Qt.AlignLeft 101 | spacing: 24 102 | LauncherButton { 103 | Layout.alignment: Qt.AlignVCenter | Qt.AlignHCenter 104 | icon.source: "qrc:/icons/app_icons/caraoke.svg" 105 | text: "Caraoke" 106 | } 107 | LauncherButton { 108 | Layout.alignment: Qt.AlignVCenter | Qt.AlignHCenter 109 | icon.source: "qrc:/icons/app_icons/tunein.svg" 110 | text: "TuneIn" 111 | } 112 | LauncherButton { 113 | Layout.alignment: Qt.AlignVCenter | Qt.AlignHCenter 114 | icon.source: "qrc:/icons/app_icons/radio.svg" 115 | text: "Music" 116 | } 117 | } 118 | } 119 | } 120 | -------------------------------------------------------------------------------- /Components/LauncherButton.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.9 2 | import QtQuick.Controls 2.5 3 | import QtQuick.Layouts 1.3 4 | import Style 1.0 5 | import QtGraphicalEffects 1.15 6 | Button { 7 | id: control 8 | property bool isGlow: false 9 | property color textColor: Style.white 10 | implicitHeight: 128 11 | implicitWidth: 128 12 | 13 | contentItem: ColumnLayout { 14 | anchors.centerIn: parent 15 | spacing: 10 16 | 17 | Item { Layout.fillHeight: true } 18 | 19 | Image { 20 | horizontalAlignment: Image.AlignHCenter 21 | verticalAlignment: Image.AlignVCenter 22 | Layout.alignment: Qt.AlignVCenter | Qt.AlignHCenter 23 | source: control.icon.source 24 | scale: control.pressed ? 0.9 : 1.0 25 | Behavior on scale { NumberAnimation { duration: 200; } } 26 | } 27 | 28 | Text { 29 | Layout.alignment: Qt.AlignVCenter | Qt.AlignHCenter 30 | text: control.text 31 | font: control.font 32 | color: textColor 33 | } 34 | 35 | Item { Layout.fillHeight: true } 36 | } 37 | 38 | background: Rectangle { 39 | anchors.fill: parent 40 | radius: width 41 | color: "transparent" 42 | border.width: 0 43 | border.color: "transparent" 44 | visible: false 45 | Behavior on color { 46 | ColorAnimation { 47 | duration: 200; 48 | easing.type: Easing.Linear; 49 | } 50 | } 51 | 52 | Rectangle { 53 | id: indicator 54 | property int mx 55 | property int my 56 | x: mx - width / 2 57 | y: my - height / 2 58 | height: width 59 | radius: width / 2 60 | color: isGlow ? Qt.lighter("#29BEB6") : Qt.lighter("#B8FF01") 61 | } 62 | } 63 | 64 | Rectangle { 65 | id: mask 66 | radius: width 67 | anchors.fill: parent 68 | visible: false 69 | } 70 | 71 | OpacityMask { 72 | anchors.fill: background 73 | source: background 74 | maskSource: mask 75 | } 76 | 77 | MouseArea { 78 | id: mouseArea 79 | hoverEnabled: true 80 | acceptedButtons: Qt.NoButton 81 | cursorShape: Qt.PointingHandCursor 82 | anchors.fill: parent 83 | } 84 | 85 | ParallelAnimation { 86 | id: anim 87 | NumberAnimation { 88 | target: indicator 89 | property: 'width' 90 | from: 0 91 | to: control.width * 1.2 92 | duration: 200 93 | } 94 | NumberAnimation { 95 | target: indicator; 96 | property: 'opacity' 97 | from: 0.9 98 | to: 0 99 | duration: 200 100 | } 101 | } 102 | 103 | onPressed: { 104 | indicator.mx = mouseArea.mouseX 105 | indicator.my = mouseArea.mouseY 106 | anim.restart(); 107 | } 108 | } 109 | 110 | -------------------------------------------------------------------------------- /Components/StepperControl.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.9 2 | import QtQuick.Controls 2.5 3 | import QtQuick.Layouts 1.3 4 | import Style 1.0 5 | 6 | Control { 7 | id: control 8 | background: null 9 | property int value: 0 10 | property int maximumValue: 100 11 | property int minimumValue: 0 12 | property string icon: "" 13 | 14 | contentItem: RowLayout { 15 | spacing: 10 16 | anchors.centerIn: parent 17 | IconButton { 18 | Layout.alignment: Qt.AlignLeft | Qt.AlignVCenter 19 | icon.source: "qrc:/icons/stepper_icons/right-arrow.svg" 20 | enabled: value > minimumValue 21 | onClicked: { 22 | if(value > minimumValue) { 23 | value -= 1 24 | } 25 | } 26 | } 27 | 28 | Text { 29 | Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter 30 | text: value 31 | font.pixelSize: 42 32 | font.family: Style.fontFamily 33 | color: Style.black50 34 | visible: !icon 35 | } 36 | 37 | Image { 38 | visible: icon 39 | Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter 40 | source: icon 41 | } 42 | 43 | IconButton { 44 | Layout.alignment: Qt.AlignRight | Qt.AlignVCenter 45 | icon.source: "qrc:/icons/stepper_icons/left-arrow.svg" 46 | enabled: value < maximumValue 47 | onClicked: { 48 | if(value < maximumValue) { 49 | value += 1 50 | } 51 | } 52 | } 53 | } 54 | } 55 | -------------------------------------------------------------------------------- /Components/TopLeftButtonIconColumn.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.9 2 | import QtQuick.Controls 2.5 3 | import QtQuick.Layouts 1.3 4 | import Style 1.0 5 | 6 | ColumnLayout { 7 | spacing: 3 8 | Icon { 9 | Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter 10 | icon.source: "qrc:/light-icons/Headlight2.svg" 11 | } 12 | Icon { 13 | Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter 14 | icon.source: "qrc:/light-icons/Property 1=Default.svg" 15 | } 16 | Icon { 17 | Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter 18 | icon.source: "qrc:/light-icons/Headlights.svg" 19 | } 20 | Icon { 21 | Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter 22 | icon.source: "qrc:/light-icons/Seatbelt.svg" 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /Components/TopLeftControl.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.9 2 | import QtQuick.Controls 2.5 3 | import QtQuick.Layouts 1.3 4 | import Style 1.0 5 | 6 | RowLayout { 7 | id: root 8 | property int index: 0 9 | property int batteryPercentage: 90 10 | spacing: 51 11 | RowLayout { 12 | Layout.alignment: Qt.AlignLeft | Qt.AlignVCenter 13 | spacing: 4 14 | Text { 15 | Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter 16 | property bool current: root.index === 0 17 | color: current ? Style.isDark ? Style.white : "#171717" : Style.black20 18 | text: "P" 19 | font.family: "Inter" 20 | font.bold: Font.Bold 21 | font.pixelSize: 18 22 | } 23 | Text { 24 | Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter 25 | property bool current: root.index === 1 26 | color: current ? "#171717" : Style.black20 27 | text: "R" 28 | font.family: "Inter" 29 | font.bold: Font.Bold 30 | font.pixelSize: 18 31 | } 32 | Text { 33 | Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter 34 | property bool current: root.index === 2 35 | color: current ? "#171717" : Style.black20 36 | text: "N" 37 | font.family: "Inter" 38 | font.bold: Font.Bold 39 | font.pixelSize: 18 40 | } 41 | Text { 42 | Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter 43 | property bool current: root.index === 3 44 | color: current ? "#171717" : Style.black20 45 | text: "D" 46 | font.family: "Inter" 47 | font.bold: Font.Bold 48 | font.pixelSize: 18 49 | } 50 | } 51 | 52 | RowLayout { 53 | Layout.alignment: Qt.AlignRight | Qt.AlignVCenter 54 | Image { 55 | Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter 56 | source: "qrc:/icons/top_header_icons/battery.svg" 57 | } 58 | Text { 59 | Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter 60 | color: Style.isDark ? Style.white : Style.black10 61 | text: qsTr("%0 %").arg(batteryPercentage) 62 | font.family: "Inter" 63 | font.bold: Font.Bold 64 | font.pixelSize: 18 65 | } 66 | } 67 | } 68 | -------------------------------------------------------------------------------- /Components/TopMiddleControl.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.9 2 | import QtQuick.Controls 2.5 3 | import QtQuick.Layouts 1.3 4 | import Style 1.0 5 | 6 | RowLayout { 7 | spacing: 32 8 | 9 | Icon { 10 | Layout.alignment: Qt.AlignLeft | Qt.AlignVCenter 11 | icon.source: Style.isDark ? "qrc:/icons/top_header_icons/dark/lock.svg" : "qrc:/icons/top_header_icons/lock.svg" 12 | onClicked: Style.mapAreaVisible = ! Style.mapAreaVisible 13 | } 14 | 15 | RowLayout { 16 | Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter 17 | spacing: 15 18 | Image { 19 | Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter 20 | sourceSize: Qt.size(42,42) 21 | source: Style.isDark ? "qrc:/icons/top_header_icons/dark/icons.svg" : "qrc:/icons/top_header_icons/icons.svg" 22 | } 23 | Text { 24 | Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter 25 | font.pixelSize: 18 26 | font.bold: Font.DemiBold 27 | font.family: "Inter" 28 | color: Style.isDark ? Style.white : Style.black20 29 | text: qsTr("Easy Entry") 30 | } 31 | } 32 | 33 | Icon { 34 | Layout.alignment: Qt.AlignRight | Qt.AlignVCenter 35 | scale: 0.95 36 | icon.source: Style.isDark ? "qrc:/icons/top_header_icons/dark/Sentry.svg" : "qrc:/icons/top_header_icons/Sentry.svg" 37 | onClicked: Style.isDark = !Style.isDark 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /Components/TopRightControl.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.9 2 | import QtQuick.Controls 2.5 3 | import QtQuick.Layouts 1.3 4 | import Style 1.0 5 | 6 | RowLayout { 7 | spacing: 48 8 | property int temp: 72 9 | property bool airbagOn: false 10 | Text { 11 | Layout.alignment: Qt.AlignLeft | Qt.AlignVCenter 12 | text: "12:00pm" 13 | font.family: "Inter" 14 | font.pixelSize: 18 15 | font.bold: Font.DemiBold 16 | color: Style.isDark ? Style.white : Style.black20 17 | } 18 | 19 | Text { 20 | Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter 21 | text: "%0ºF".arg(temp) 22 | font.family: "Inter" 23 | font.pixelSize: 18 24 | font.bold: Font.DemiBold 25 | color: Style.isDark ? Style.white : Style.black20 26 | } 27 | 28 | Control { 29 | Layout.alignment: Qt.AlignRight | Qt.AlignVCenter 30 | implicitHeight: 38 31 | background: Rectangle { 32 | color: Style.isDark ? Style.alphaColor(Style.black,0.55) : Style.black20 33 | radius: 7 34 | } 35 | contentItem: RowLayout { 36 | spacing: 10 37 | anchors.centerIn: parent 38 | Image { 39 | Layout.alignment: Qt.AlignLeft | Qt.AlignVCenter 40 | Layout.leftMargin: 10 41 | source: "qrc:/icons/top_header_icons/airbag_.svg" 42 | } 43 | Text { 44 | Layout.alignment: Qt.AlignRight | Qt.AlignVCenter 45 | Layout.rightMargin: 10 46 | text: airbagOn ? "PASSENGER\nAIRBAG ON" : "PASSENGER\nAIRBAG OFF" 47 | font.family: Style.fontFamily 48 | font.bold: Font.Bold 49 | font.pixelSize: 12 50 | color: Style.white 51 | } 52 | } 53 | } 54 | } 55 | -------------------------------------------------------------------------------- /Fonts/Unitext Regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cppqtdev/Tesla-Dashboard-UI-3/070ab34ae56d81b9f6e36e35ffc1f563aaf2f19a/Fonts/Unitext Regular.ttf -------------------------------------------------------------------------------- /LayoutManager.js: -------------------------------------------------------------------------------- 1 | function AdaptiveLayoutManager(originalWidth,originalHeight,newWidth,newHeight) { 2 | this.originalWidth = originalWidth; 3 | this.originalHeight = originalHeight; 4 | this.newWidth = newWidth; 5 | this.newHeight = newHeight; 6 | } 7 | 8 | AdaptiveLayoutManager.prototype.updateWindowWidth = function(width) { 9 | this.newWidth = width; 10 | } 11 | 12 | AdaptiveLayoutManager.prototype.updateWindowHeight = function(height) { 13 | this.newHeight = height; 14 | } 15 | 16 | AdaptiveLayoutManager.prototype.width = function(width) { 17 | var factor = width / this.originalWidth; 18 | var adaptiveWidth = factor * this.newWidth; 19 | return adaptiveWidth; 20 | } 21 | 22 | AdaptiveLayoutManager.prototype.height = function(height) { 23 | var factor = height / this.originalHeight; 24 | var adaptiveHeight = factor * this.newHeight; 25 | return adaptiveHeight; 26 | } 27 | 28 | AdaptiveLayoutManager.prototype.average = function(avg) { 29 | var adaptiveAvg = ( this.height(avg) + this.width(avg)) /2 30 | return adaptiveAvg; 31 | } 32 | -------------------------------------------------------------------------------- /Map/CarMarker.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cppqtdev/Tesla-Dashboard-UI-3/070ab34ae56d81b9f6e36e35ffc1f563aaf2f19a/Map/CarMarker.png -------------------------------------------------------------------------------- /Map/LocationMarker.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cppqtdev/Tesla-Dashboard-UI-3/070ab34ae56d81b9f6e36e35ffc1f563aaf2f19a/Map/LocationMarker.png -------------------------------------------------------------------------------- /NavigationMapHelperScreen.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.9 2 | import QtLocation 5.6 3 | import QtQml 2.3 4 | import QtQuick.Controls 2.5 5 | import QtGraphicalEffects 1.0 6 | import QtPositioning 5.6 7 | 8 | 9 | Rectangle{ 10 | 11 | property bool runMenuAnimation: false 12 | color: "black" 13 | visible: true 14 | clip: true 15 | 16 | // Main stack view of application 17 | StackView{ 18 | id: mainApplicationStackView 19 | anchors.fill: parent 20 | 21 | // Sliding in animation 22 | pushEnter: Transition { 23 | NumberAnimation { 24 | properties: "x" 25 | from: mainApplicationStackView.width 26 | to: 0 27 | duration: 1000 // Milliseconds for push animation 28 | easing.type: Easing.InOutQuad 29 | } 30 | } 31 | 32 | // Sliding out animation 33 | pushExit: Transition { 34 | NumberAnimation { 35 | properties: "x" 36 | from: 0 37 | to: -mainApplicationStackView.width 38 | duration: 1000 // Milliseconds for push animation 39 | easing.type: Easing.InOutQuad 40 | } 41 | } 42 | } 43 | 44 | // Map Page 45 | NavigationMapScreen { 46 | id: pageMap 47 | enableGradient: true 48 | visible: false 49 | } 50 | 51 | Component.onCompleted: { 52 | mainApplicationStackView.push(pageMap) 53 | pageMap.startAnimation() 54 | } 55 | } 56 | -------------------------------------------------------------------------------- /NavigationMapScreen.qml: -------------------------------------------------------------------------------- 1 | // ****************************************** 2 | // ** Map and Route Simulation Page ** 3 | // ****************************************** 4 | // 5 | // This QML page simulates a map and route functionality using Mapbox and OpenStreetMap. It 6 | // demonstrates the journey from a current location to a destination by animating a car marker 7 | // along the calculated route. The animation includes tilting and rotating the map. 8 | // 9 | // Key Features: 10 | // - Visualization of a map with a route line. 11 | // - Animated car marker to simulate route traversal. 12 | // - Map tilting and rotating animations. 13 | // - GeoModel to find destination coordinates. 14 | // - RouteModel to calculate the route. 15 | // 16 | // This page is intended for demonstration purposes and can be customized to fit your 17 | // application's needs for displaying routes and geolocation data. 18 | // 19 | // ****************************************** 20 | 21 | import QtQuick 2.9 22 | import QtLocation 5.6 23 | import QtQml 2.3 24 | import QtQuick.Controls 2.5 25 | import QtGraphicalEffects 1.0 26 | import QtPositioning 5.6 27 | import Style 1.0 28 | 29 | Page { 30 | id: pageMap 31 | 32 | property var currentLoc: QtPositioning.coordinate(28.4595, 77.0266) // current location 33 | property bool isRoutingStart: false 34 | property bool runMapAnimation: false 35 | property bool enableGradient: true 36 | padding: 0 37 | 38 | function startAnimation (){ 39 | geoModel.update() 40 | } 41 | 42 | // Gradient to give fading effect on edges 43 | RadialGradient { 44 | z: 1 45 | visible: enableGradient 46 | anchors.fill: parent 47 | gradient: Gradient { 48 | GradientStop { 49 | position: 0.0 50 | color: "#00000000" 51 | } 52 | GradientStop { 53 | position: 0.72 54 | color: "#000000" 55 | } 56 | } 57 | } 58 | 59 | // Main map 60 | Map { 61 | id: map 62 | 63 | anchors.fill: parent 64 | copyrightsVisible: false 65 | center: QtPositioning.coordinate(28.4595, 77.0266) 66 | zoomLevel: 13.3 67 | bearing: -80 68 | 69 | plugin: Plugin { 70 | name: "mapboxgl" 71 | 72 | PluginParameter { name: "mapboxgl.access_token"; value: "pk.eyJ1IjoiaGFzZWVidGFyaXExOTk4IiwiYSI6ImNsbGw4cXQ3YTFsdXkzanBxaG1rZDZrYTgifQ.8M9sbj-GM8oDrhAfCMUasw"} 73 | PluginParameter { name: "mapboxgl.mapping.additional_style_urls"; value: "mapbox://styles/haseebtariq1998/clm1o9olf00rf01qxb3nr9n82"} 74 | } 75 | 76 | 77 | // Route line, to show route from current location to destination 78 | MapItemView{ 79 | id: mapRouteLine 80 | 81 | model: routeModel 82 | delegate: Component { 83 | MapRoute{ 84 | route: routeData 85 | line.color: "aqua" 86 | line.width: adaptive.width(7) 87 | } 88 | } 89 | } 90 | 91 | // Current location marker 92 | MapQuickItem{ 93 | id: currentLocationMarker 94 | 95 | coordinate: QtPositioning.coordinate(28.4595, 77.0266) 96 | visible: false 97 | z: 1 98 | 99 | onCoordinateChanged: 100 | { 101 | if(isRoutingStart) 102 | map.center = coordinate 103 | } 104 | 105 | sourceItem: Rectangle{ 106 | width: adaptive.width(100) * (map.zoomLevel / 17) 107 | height: adaptive.height(100) * (map.zoomLevel / 17) 108 | color: "transparent" 109 | anchors.centerIn: parent 110 | radius: 180 111 | 112 | Image { 113 | id: car 114 | width: adaptive.width(100) * (map.zoomLevel / 17) 115 | height: adaptive.height(100) * (map.zoomLevel / 17) 116 | source: "qrc:/Map/CarMarker.png" 117 | anchors.centerIn: parent 118 | } 119 | } 120 | 121 | Behavior on coordinate { 122 | PropertyAnimation { 123 | duration: 5000 124 | } 125 | } 126 | } 127 | 128 | 129 | // Destination marker 130 | MapQuickItem{ 131 | id: destinationMarker 132 | 133 | visible: false 134 | z: 1 135 | 136 | sourceItem: Rectangle{ 137 | width: adaptive.width(50) * (map.zoomLevel / 17) 138 | height: adaptive.height(50) * (map.zoomLevel / 17) 139 | color: "transparent" 140 | anchors.centerIn: parent 141 | radius: 180 142 | 143 | AnimatedImage { 144 | width: adaptive.width(50) * (map.zoomLevel / 17) 145 | height: adaptive.height(50) * (map.zoomLevel / 17) 146 | source: "qrc:/animIcons/icons8-destination.gif" 147 | anchors.centerIn: parent 148 | } 149 | } 150 | } 151 | 152 | // Departure location marker 153 | MapQuickItem{ 154 | id: startMarker 155 | 156 | visible: false 157 | z: 1 158 | sourceItem: Rectangle{ 159 | width: adaptive.width(50) * (map.zoomLevel / 17) 160 | height: adaptive.height(50) * (map.zoomLevel / 17) 161 | color: "transparent" 162 | anchors.centerIn: parent 163 | radius: 180 164 | 165 | Image { 166 | width: adaptive.width(50) * (map.zoomLevel / 17) 167 | height: adaptive.height(50) * (map.zoomLevel / 17) 168 | source: "qrc:/Map/LocationMarker.png" 169 | anchors.centerIn: parent 170 | } 171 | } 172 | } 173 | 174 | 175 | 176 | // Route model to calculate route 177 | RouteModel{ 178 | id : routeModel 179 | 180 | plugin: geoModel.plugin 181 | query: RouteQuery{ 182 | id: routeQuery 183 | } 184 | 185 | onRoutesChanged: { 186 | map.center = routeModel.get(0).path[ (routeModel.get(0).path.length/2).toFixed(0) ] 187 | destinationMarker.coordinate = QtPositioning.coordinate(26.2124,78.1772) //routeModel.get(0).path[ routeModel.get(0).path.length -1 ] 188 | startMarker.coordinate = currentLoc 189 | destinationMarker.visible = true 190 | startMarker.visible = true 191 | animationTimer.running = true 192 | } 193 | } 194 | 195 | 196 | // Timer to start car driving animation 197 | Timer{ 198 | id: animationTimer 199 | 200 | interval: 3000 201 | onTriggered: { 202 | startMarker.visible = false 203 | currentLocationMarker.visible = true 204 | isRoutingStart = true 205 | simulateDrive.path = routeModel.get(0).path 206 | 207 | routeStartAnimation.running = true 208 | simulateDrive.running = true 209 | } 210 | } 211 | 212 | // To simulate car driving on route 213 | Timer{ 214 | id: simulateDrive 215 | 216 | property var path 217 | property int index 218 | 219 | interval: 1000 220 | repeat: true 221 | onTriggered: { 222 | if(path.length > index) 223 | { 224 | currentLocationMarker.coordinate = path[index] 225 | index++ 226 | } 227 | else{ 228 | simulateDrive.stop() 229 | } 230 | 231 | } 232 | } 233 | 234 | // To find coordinate of destination location 235 | GeocodeModel{ 236 | id: geoModel 237 | 238 | plugin: Plugin 239 | { 240 | name: "osm" 241 | PluginParameter { 242 | name: "osm.mapping.custom.host" 243 | value: "https://cartodb-basemaps-{s}.global.ssl.fastly.net/dark_all/{z}/{x}/{y}.png" 244 | } 245 | } 246 | query: "Gwalior" 247 | 248 | onLocationsChanged: { 249 | if(count) 250 | { 251 | routeQuery.addWaypoint(currentLoc) 252 | routeQuery.addWaypoint(get(0).coordinate) 253 | routeModel.update() 254 | } 255 | } 256 | } 257 | } 258 | 259 | 260 | // Animation to show at start where map tilts and rotates 261 | SequentialAnimation{ 262 | id: routeStartAnimation 263 | 264 | PropertyAnimation { 265 | id: centeranimation 266 | 267 | duration: 1000 268 | target: map 269 | property: "center" 270 | to: currentLoc 271 | } 272 | NumberAnimation{ 273 | id: zoomAnimation 274 | 275 | target: map 276 | duration: 6000 277 | properties: "zoomLevel" 278 | from: map.zoomLevel 279 | to: 18 280 | } 281 | 282 | NumberAnimation{ 283 | id: tiltAnimation 284 | 285 | target: map 286 | duration: 1000 287 | properties: "tilt" 288 | from: 0 289 | to: map.maximumTilt 290 | } 291 | 292 | NumberAnimation{ 293 | id: rotationAnimation 294 | 295 | target: map 296 | duration: 5000 297 | properties: "bearing" 298 | from: -80 299 | to: 0 300 | } 301 | } 302 | } 303 | -------------------------------------------------------------------------------- /Nunito_Sans/NunitoSans-Black.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cppqtdev/Tesla-Dashboard-UI-3/070ab34ae56d81b9f6e36e35ffc1f563aaf2f19a/Nunito_Sans/NunitoSans-Black.ttf -------------------------------------------------------------------------------- /Nunito_Sans/NunitoSans-BlackItalic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cppqtdev/Tesla-Dashboard-UI-3/070ab34ae56d81b9f6e36e35ffc1f563aaf2f19a/Nunito_Sans/NunitoSans-BlackItalic.ttf -------------------------------------------------------------------------------- /Nunito_Sans/NunitoSans-Bold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cppqtdev/Tesla-Dashboard-UI-3/070ab34ae56d81b9f6e36e35ffc1f563aaf2f19a/Nunito_Sans/NunitoSans-Bold.ttf -------------------------------------------------------------------------------- /Nunito_Sans/NunitoSans-BoldItalic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cppqtdev/Tesla-Dashboard-UI-3/070ab34ae56d81b9f6e36e35ffc1f563aaf2f19a/Nunito_Sans/NunitoSans-BoldItalic.ttf -------------------------------------------------------------------------------- /Nunito_Sans/NunitoSans-ExtraBold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cppqtdev/Tesla-Dashboard-UI-3/070ab34ae56d81b9f6e36e35ffc1f563aaf2f19a/Nunito_Sans/NunitoSans-ExtraBold.ttf -------------------------------------------------------------------------------- /Nunito_Sans/NunitoSans-ExtraBoldItalic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cppqtdev/Tesla-Dashboard-UI-3/070ab34ae56d81b9f6e36e35ffc1f563aaf2f19a/Nunito_Sans/NunitoSans-ExtraBoldItalic.ttf -------------------------------------------------------------------------------- /Nunito_Sans/NunitoSans-ExtraLight.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cppqtdev/Tesla-Dashboard-UI-3/070ab34ae56d81b9f6e36e35ffc1f563aaf2f19a/Nunito_Sans/NunitoSans-ExtraLight.ttf -------------------------------------------------------------------------------- /Nunito_Sans/NunitoSans-ExtraLightItalic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cppqtdev/Tesla-Dashboard-UI-3/070ab34ae56d81b9f6e36e35ffc1f563aaf2f19a/Nunito_Sans/NunitoSans-ExtraLightItalic.ttf -------------------------------------------------------------------------------- /Nunito_Sans/NunitoSans-Italic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cppqtdev/Tesla-Dashboard-UI-3/070ab34ae56d81b9f6e36e35ffc1f563aaf2f19a/Nunito_Sans/NunitoSans-Italic.ttf -------------------------------------------------------------------------------- /Nunito_Sans/NunitoSans-Light.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cppqtdev/Tesla-Dashboard-UI-3/070ab34ae56d81b9f6e36e35ffc1f563aaf2f19a/Nunito_Sans/NunitoSans-Light.ttf -------------------------------------------------------------------------------- /Nunito_Sans/NunitoSans-LightItalic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cppqtdev/Tesla-Dashboard-UI-3/070ab34ae56d81b9f6e36e35ffc1f563aaf2f19a/Nunito_Sans/NunitoSans-LightItalic.ttf -------------------------------------------------------------------------------- /Nunito_Sans/NunitoSans-Regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cppqtdev/Tesla-Dashboard-UI-3/070ab34ae56d81b9f6e36e35ffc1f563aaf2f19a/Nunito_Sans/NunitoSans-Regular.ttf -------------------------------------------------------------------------------- /Nunito_Sans/NunitoSans-SemiBold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cppqtdev/Tesla-Dashboard-UI-3/070ab34ae56d81b9f6e36e35ffc1f563aaf2f19a/Nunito_Sans/NunitoSans-SemiBold.ttf -------------------------------------------------------------------------------- /Nunito_Sans/NunitoSans-SemiBoldItalic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cppqtdev/Tesla-Dashboard-UI-3/070ab34ae56d81b9f6e36e35ffc1f563aaf2f19a/Nunito_Sans/NunitoSans-SemiBoldItalic.ttf -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Tesla Dashboard UI using QT QML 2 | ![Tesla Home Screen](https://github.com/cppqtdev/Tesla-Dashboard-UI-3/blob/main/screenshot/Main%20Menu.png) 3 | ![Tesla Home Screen](https://github.com/cppqtdev/Tesla-Dashboard-UI-3/blob/main/screenshot/1.png) 4 | ![Tesla Home Screen](https://github.com/cppqtdev/Tesla-Dashboard-UI-3/blob/main/screenshot/2.png) 5 | ![Tesla Home Screen](https://github.com/cppqtdev/Tesla-Dashboard-UI-3/blob/main/screenshot/3.png) 6 | ![Tesla Home Screen](https://github.com/cppqtdev/Tesla-Dashboard-UI-3/blob/main/screenshot/4.png?raw=true) 7 | ![Tesla Home Screen](https://github.com/cppqtdev/Tesla-Dashboard-UI-3/blob/main/screenshot/5.png) 8 | ![Tesla Home Screen](https://github.com/cppqtdev/Tesla-Dashboard-UI-3/blob/main/screenshot/6.png) 9 | 10 | -------------------------------------------------------------------------------- /Style.qml: -------------------------------------------------------------------------------- 1 | pragma Singleton 2 | import QtQuick 2.15 3 | 4 | QtObject { 5 | readonly property color textColor: "#000000" 6 | 7 | readonly property color blueMedium: "#2E78FF" 8 | readonly property color blueLight: "#A8C3F4" 9 | readonly property color red: "#B74134" 10 | readonly property color redLight: "#ED4E3B" 11 | readonly property color yellow: "#FFBD0A" 12 | readonly property color green: "#25CB55" 13 | 14 | readonly property color black: "#000000" 15 | readonly property color black10: "#414141" 16 | readonly property color black20: "#757575" 17 | readonly property color black30: "#A2A3A5" 18 | readonly property color black40: "#D0D2D0" 19 | readonly property color black50: "#D0D1D2" 20 | readonly property color black60: "#E0E0E0" 21 | readonly property color black80: "#F0F0F0" 22 | readonly property color white: "#FFFFFF" 23 | readonly property string fontFamily: nunitoSans.name 24 | 25 | readonly property FontLoader nunitoSans: FontLoader{ 26 | source: "qrc:/Nunito_Sans/NunitoSans-Regular.ttf" 27 | } 28 | 29 | 30 | property bool isDark: true 31 | property bool mapAreaVisible: false 32 | property string theme: isDark ? "dark" : "light" 33 | 34 | function getImageBasedOnTheme() { 35 | return `qrc:/icons/${theme}/background_image.png`; 36 | } 37 | 38 | function alphaColor(color, alpha) { 39 | let actualColor = Qt.darker(color, 1) 40 | actualColor.a = alpha 41 | return actualColor 42 | } 43 | } 44 | -------------------------------------------------------------------------------- /Tesla_Dashboard_UI.pro: -------------------------------------------------------------------------------- 1 | QT += quick concurrent 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 | -------------------------------------------------------------------------------- /animIcons/icons8-car.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cppqtdev/Tesla-Dashboard-UI-3/070ab34ae56d81b9f6e36e35ffc1f563aaf2f19a/animIcons/icons8-car.gif -------------------------------------------------------------------------------- /animIcons/icons8-destination.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cppqtdev/Tesla-Dashboard-UI-3/070ab34ae56d81b9f6e36e35ffc1f563aaf2f19a/animIcons/icons8-destination.gif -------------------------------------------------------------------------------- /driving_icons/Recording.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /driving_icons/Sentry.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /driving_icons/child safety.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /driving_icons/mirror.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /driving_icons/steer wheel position.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /icons/app_icons/bluetooth.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | -------------------------------------------------------------------------------- /icons/app_icons/calendar.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /icons/app_icons/caraoke.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /icons/app_icons/dashcam.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | 120 | 121 | 122 | 123 | 124 | 125 | 126 | 127 | 128 | 129 | 130 | 131 | 132 | 133 | 134 | 135 | 136 | 137 | 138 | -------------------------------------------------------------------------------- /icons/app_icons/front-defrost.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /icons/app_icons/messages.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /icons/app_icons/model-3.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /icons/app_icons/music.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /icons/app_icons/phone.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /icons/app_icons/radio.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /icons/app_icons/rear-defrost.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /icons/app_icons/recording.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | 120 | 121 | 122 | 123 | 124 | 125 | 126 | 127 | 128 | 129 | 130 | 131 | 132 | 133 | 134 | 135 | 136 | 137 | 138 | 139 | 140 | 141 | 142 | 143 | 144 | 145 | 146 | 147 | 148 | 149 | 150 | 151 | -------------------------------------------------------------------------------- /icons/app_icons/seat-warmer.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /icons/app_icons/seat.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /icons/app_icons/spotify.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /icons/app_icons/steering-wheel-warmer.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /icons/app_icons/toybox.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /icons/app_icons/tunein.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /icons/app_icons/video.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | -------------------------------------------------------------------------------- /icons/app_icons/volume.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /icons/app_icons/wiper.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /icons/app_icons/zoom.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | -------------------------------------------------------------------------------- /icons/car_action_icons/Power.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /icons/car_action_icons/dark/Power.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /icons/car_action_icons/dark/lock.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /icons/car_action_icons/lock.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /icons/dark/Power.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /icons/dark/background_image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cppqtdev/Tesla-Dashboard-UI-3/070ab34ae56d81b9f6e36e35ffc1f563aaf2f19a/icons/dark/background_image.png -------------------------------------------------------------------------------- /icons/dark/lock.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /icons/dark/sidebar-light.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cppqtdev/Tesla-Dashboard-UI-3/070ab34ae56d81b9f6e36e35ffc1f563aaf2f19a/icons/dark/sidebar-light.png -------------------------------------------------------------------------------- /icons/light/background_image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cppqtdev/Tesla-Dashboard-UI-3/070ab34ae56d81b9f6e36e35ffc1f563aaf2f19a/icons/light/background_image.png -------------------------------------------------------------------------------- /icons/light/sidebar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cppqtdev/Tesla-Dashboard-UI-3/070ab34ae56d81b9f6e36e35ffc1f563aaf2f19a/icons/light/sidebar.png -------------------------------------------------------------------------------- /icons/main control bar.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /icons/stepper_icons/left-arrow.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /icons/stepper_icons/right-arrow.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /icons/top_header_icons/Sentry.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /icons/top_header_icons/airbag_.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /icons/top_header_icons/battery.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /icons/top_header_icons/dark/Sentry.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /icons/top_header_icons/dark/icons.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /icons/top_header_icons/dark/lock.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /icons/top_header_icons/icons.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /icons/top_header_icons/lock.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /light-icons/Headlight2.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /light-icons/Headlights.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /light-icons/Icons.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /light-icons/Icons/headlight/white.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /light-icons/Property 1=Default.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /light-icons/Property 1=Variant2.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /light-icons/Seatbelt.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /main.cpp: -------------------------------------------------------------------------------- 1 | #include 2 | #include 3 | 4 | int main(int argc, char *argv[]) 5 | { 6 | #if QT_VERSION < QT_VERSION_CHECK(6, 0, 0) 7 | QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling); 8 | #endif 9 | QGuiApplication app(argc, argv); 10 | 11 | QQmlApplicationEngine engine; 12 | const QUrl url(QStringLiteral("qrc:/main.qml")); 13 | qmlRegisterSingletonType(QUrl(QStringLiteral("qrc:/Style.qml")), "Style", 1, 0, "Style"); 14 | QObject::connect( 15 | &engine, 16 | &QQmlApplicationEngine::objectCreated, 17 | &app, 18 | [url](QObject *obj, const QUrl &objUrl) { 19 | if (!obj && url == objUrl) 20 | QCoreApplication::exit(-1); 21 | }, 22 | Qt::QueuedConnection); 23 | engine.load(url); 24 | 25 | return app.exec(); 26 | } 27 | -------------------------------------------------------------------------------- /main.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.9 2 | import QtQuick.Controls 2.5 3 | import QtQuick.Layouts 1.3 4 | import Style 1.0 5 | import QtGraphicalEffects 1.15 6 | import "Components" 7 | import "qrc:/LayoutManager.js" as Responsive 8 | 9 | ApplicationWindow { 10 | id: root 11 | width: 1920 12 | height: 1200 13 | maximumHeight: height 14 | minimumHeight: height 15 | maximumWidth: width 16 | minimumWidth: width 17 | visible: true 18 | title: qsTr("Tesla Model 3") 19 | onWidthChanged: { 20 | if(adaptive) 21 | adaptive.updateWindowWidth(root.width) 22 | } 23 | 24 | onHeightChanged: { 25 | if(adaptive) 26 | adaptive.updateWindowHeight(root.height) 27 | } 28 | property var adaptive: new Responsive.AdaptiveLayoutManager(root.width,root.height, root.width,root.height) 29 | 30 | FontLoader { 31 | id: uniTextFont 32 | source: "qrc:/Fonts/Unitext Regular.ttf" 33 | } 34 | 35 | background: Loader { 36 | anchors.fill: parent 37 | sourceComponent: Style.mapAreaVisible ? backgroundRect : backgroundImage 38 | } 39 | 40 | Header { 41 | z: 99 42 | id: headerLayout 43 | } 44 | 45 | footer: Footer{ 46 | id: footerLayout 47 | onOpenLauncher: launcher.open() 48 | } 49 | 50 | TopLeftButtonIconColumn { 51 | z: 99 52 | anchors.left: parent.left 53 | anchors.top: headerLayout.bottom 54 | anchors.leftMargin: 18 55 | } 56 | 57 | RowLayout { 58 | id: mapLayout 59 | visible: Style.mapAreaVisible 60 | spacing: 0 61 | anchors.fill: parent 62 | Item { 63 | Layout.preferredWidth: 620 64 | Layout.fillHeight: true 65 | Image { 66 | anchors.centerIn: parent 67 | source: Style.isDark ? "qrc:/icons/light/sidebar.png" : "qrc:/icons/dark/sidebar-light.png" 68 | } 69 | } 70 | 71 | NavigationMapHelperScreen { 72 | Layout.fillWidth: true 73 | Layout.fillHeight: true 74 | runMenuAnimation: true 75 | } 76 | } 77 | 78 | LaunchPadControl { 79 | id: launcher 80 | y: (root.height - height) / 2 + (footerLayout.height) 81 | x: (root.width - width ) / 2 82 | } 83 | 84 | Component { 85 | id: backgroundRect 86 | Rectangle { 87 | color: "#171717" 88 | anchors.fill: parent 89 | } 90 | } 91 | 92 | Component { 93 | id: backgroundImage 94 | Image { 95 | source: Style.getImageBasedOnTheme() 96 | Icon { 97 | icon.source: Style.isDark ? "qrc:/icons/car_action_icons/dark/lock.svg" : "qrc:/icons/car_action_icons/lock.svg" 98 | anchors.horizontalCenter: parent.horizontalCenter 99 | anchors.verticalCenter: parent.verticalCenter 100 | anchors.verticalCenterOffset: - 350 101 | anchors.horizontalCenterOffset: 37 102 | } 103 | 104 | Icon { 105 | icon.source: Style.isDark ? "qrc:/icons/car_action_icons/dark/Power.svg" : "qrc:/icons/car_action_icons/Power.svg" 106 | anchors.horizontalCenter: parent.horizontalCenter 107 | anchors.verticalCenter: parent.verticalCenter 108 | anchors.verticalCenterOffset: - 77 109 | anchors.horizontalCenterOffset: 550 110 | } 111 | 112 | ColumnLayout { 113 | anchors.horizontalCenter: parent.horizontalCenter 114 | anchors.verticalCenter: parent.verticalCenter 115 | anchors.verticalCenterOffset: - 230 116 | anchors.horizontalCenterOffset: 440 117 | 118 | Text { 119 | Layout.alignment: Qt.AlignVCenter | Qt.AlignHCenter 120 | text: "Trunk" 121 | font.family: "Inter" 122 | font.pixelSize: 14 123 | font.bold: Font.DemiBold 124 | color: Style.black20 125 | } 126 | Text { 127 | Layout.alignment: Qt.AlignVCenter | Qt.AlignHCenter 128 | text: "Open" 129 | font.family: "Inter" 130 | font.pixelSize: 16 131 | font.bold: Font.Bold 132 | color: Style.isDark ? Style.white : "#171717" 133 | } 134 | } 135 | 136 | ColumnLayout { 137 | anchors.horizontalCenter: parent.horizontalCenter 138 | anchors.verticalCenter: parent.verticalCenter 139 | anchors.verticalCenterOffset: - 180 140 | anchors.horizontalCenterOffset: - 350 141 | 142 | Text { 143 | Layout.alignment: Qt.AlignVCenter | Qt.AlignHCenter 144 | text: "Frunk" 145 | font.family: "Inter" 146 | font.pixelSize: 14 147 | font.bold: Font.DemiBold 148 | color: Style.black20 149 | } 150 | Text { 151 | Layout.alignment: Qt.AlignVCenter | Qt.AlignHCenter 152 | text: "Open" 153 | font.family: "Inter" 154 | font.pixelSize: 16 155 | font.bold: Font.Bold 156 | color: Style.isDark ? Style.white : "#171717" 157 | } 158 | } 159 | } 160 | } 161 | } 162 | -------------------------------------------------------------------------------- /network_icons/Dark Mode=Off.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /network_icons/Dark Mode=On.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /network_icons/icon=alar, color=light.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /network_icons/icon=alarm, color=dark.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /network_icons/icon=bluetooth, color=dark.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /network_icons/icon=bluetooth, color=light.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /network_icons/icon=notification, color=dark.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /network_icons/icon=notification, color=light.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /network_icons/icon=software, color=dark.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /network_icons/icon=software, color=light.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /network_icons/icon=wifi, color=dark.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /network_icons/icon=wifi, color=light.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /other_icons/Icon=chevron down, Color=white.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /other_icons/Icon=chevron up, Color=white.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /other_icons/Icon=controls, Color=white.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /other_icons/Icon=display, Color=white.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /other_icons/Icon=eye, Color=white.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /other_icons/Icon=lights, Color=white.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /other_icons/Icon=lock, Color=white.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /other_icons/Icon=model-3, Color=white.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /other_icons/Icon=navigation, Color=white.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /other_icons/Icon=point, Color=white.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /other_icons/Icon=power, Color=white.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /other_icons/Icon=search, Color=white.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /other_icons/Icon=security, Color=white.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /other_icons/Icon=service, Color=white.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /other_icons/Icon=shop, Color=white.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /other_icons/Icon=software, Color=white.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /other_icons/Icon=steering wheel, Color=white.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /other_icons/Icon=trip, Color=white.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /other_icons/Icon=unlocked, Color=dark.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /qml.qrc: -------------------------------------------------------------------------------- 1 | 2 | 3 | main.qml 4 | icons/light/background_image.png 5 | Style.qml 6 | icons/dark/background_image.png 7 | icons/main control bar.svg 8 | icons/app_icons/zoom.svg 9 | icons/app_icons/wiper.svg 10 | icons/app_icons/rear-defrost.svg 11 | icons/app_icons/bluetooth.svg 12 | icons/app_icons/calendar.svg 13 | icons/app_icons/caraoke.svg 14 | icons/app_icons/dashcam.svg 15 | icons/app_icons/seat-warmer.svg 16 | icons/app_icons/seat.svg 17 | icons/app_icons/front-defrost.svg 18 | icons/app_icons/spotify.svg 19 | icons/app_icons/steering-wheel-warmer.svg 20 | icons/app_icons/messages.svg 21 | icons/app_icons/model-3.svg 22 | icons/app_icons/toybox.svg 23 | icons/app_icons/tunein.svg 24 | icons/app_icons/music.svg 25 | icons/app_icons/phone.svg 26 | icons/app_icons/video.svg 27 | icons/app_icons/volume.svg 28 | icons/app_icons/radio.svg 29 | Components/IconButton.qml 30 | Components/Icon.qml 31 | Components/StepperControl.qml 32 | driving_icons/child safety.svg 33 | driving_icons/mirror.svg 34 | driving_icons/Recording.svg 35 | driving_icons/Sentry.svg 36 | driving_icons/steer wheel position.svg 37 | icons/app_icons/recording.svg 38 | light-icons/Icons/headlight/white.svg 39 | light-icons/Headlight2.svg 40 | light-icons/Headlights.svg 41 | light-icons/Icons.svg 42 | light-icons/Property 1=Default.svg 43 | light-icons/Property 1=Variant2.svg 44 | light-icons/Seatbelt.svg 45 | network_icons/Dark Mode=Off.svg 46 | network_icons/Dark Mode=On.svg 47 | network_icons/icon=alar, color=light.svg 48 | network_icons/icon=alarm, color=dark.svg 49 | network_icons/icon=bluetooth, color=dark.svg 50 | network_icons/icon=bluetooth, color=light.svg 51 | network_icons/icon=notification, color=dark.svg 52 | network_icons/icon=notification, color=light.svg 53 | network_icons/icon=software, color=dark.svg 54 | network_icons/icon=software, color=light.svg 55 | network_icons/icon=wifi, color=dark.svg 56 | network_icons/icon=wifi, color=light.svg 57 | other_icons/Icon=chevron down, Color=white.svg 58 | other_icons/Icon=chevron up, Color=white.svg 59 | other_icons/Icon=controls, Color=white.svg 60 | other_icons/Icon=display, Color=white.svg 61 | other_icons/Icon=eye, Color=white.svg 62 | other_icons/Icon=lights, Color=white.svg 63 | other_icons/Icon=lock, Color=white.svg 64 | other_icons/Icon=model-3, Color=white.svg 65 | other_icons/Icon=navigation, Color=white.svg 66 | other_icons/Icon=point, Color=white.svg 67 | other_icons/Icon=power, Color=white.svg 68 | other_icons/Icon=search, Color=white.svg 69 | other_icons/Icon=security, Color=white.svg 70 | other_icons/Icon=service, Color=white.svg 71 | other_icons/Icon=shop, Color=white.svg 72 | other_icons/Icon=software, Color=white.svg 73 | other_icons/Icon=steering wheel, Color=white.svg 74 | other_icons/Icon=trip, Color=white.svg 75 | other_icons/Icon=unlocked, Color=dark.svg 76 | icons/stepper_icons/left-arrow.svg 77 | icons/stepper_icons/right-arrow.svg 78 | Nunito_Sans/NunitoSans-Black.ttf 79 | Nunito_Sans/NunitoSans-BlackItalic.ttf 80 | Nunito_Sans/NunitoSans-Bold.ttf 81 | Nunito_Sans/NunitoSans-BoldItalic.ttf 82 | Nunito_Sans/NunitoSans-ExtraBold.ttf 83 | Nunito_Sans/NunitoSans-ExtraBoldItalic.ttf 84 | Nunito_Sans/NunitoSans-ExtraLight.ttf 85 | Nunito_Sans/NunitoSans-ExtraLightItalic.ttf 86 | Nunito_Sans/NunitoSans-Italic.ttf 87 | Nunito_Sans/NunitoSans-Light.ttf 88 | Nunito_Sans/NunitoSans-LightItalic.ttf 89 | Nunito_Sans/NunitoSans-Regular.ttf 90 | Nunito_Sans/NunitoSans-SemiBold.ttf 91 | Nunito_Sans/NunitoSans-SemiBoldItalic.ttf 92 | Components/Footer.qml 93 | Components/Header.qml 94 | Components/TopLeftButtonIconColumn.qml 95 | icons/top_header_icons/airbag_.svg 96 | icons/top_header_icons/battery.svg 97 | icons/top_header_icons/icons.svg 98 | icons/top_header_icons/lock.svg 99 | icons/top_header_icons/Sentry.svg 100 | Components/TopMiddleControl.qml 101 | Components/TopLeftControl.qml 102 | Components/TopRightControl.qml 103 | icons/car_action_icons/lock.svg 104 | icons/car_action_icons/Power.svg 105 | Components/LaunchPadControl.qml 106 | Components/LauncherButton.qml 107 | NavigationMapScreen.qml 108 | NavigationMapHelperScreen.qml 109 | LayoutManager.js 110 | Map/CarMarker.png 111 | Map/LocationMarker.png 112 | Fonts/Unitext Regular.ttf 113 | icons/light/sidebar.png 114 | icons/car_action_icons/dark/Power.svg 115 | icons/car_action_icons/dark/lock.svg 116 | icons/top_header_icons/dark/icons.svg 117 | icons/top_header_icons/dark/lock.svg 118 | icons/top_header_icons/dark/Sentry.svg 119 | animIcons/icons8-car.gif 120 | animIcons/icons8-destination.gif 121 | icons/dark/sidebar-light.png 122 | 123 | 124 | -------------------------------------------------------------------------------- /screenshot/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cppqtdev/Tesla-Dashboard-UI-3/070ab34ae56d81b9f6e36e35ffc1f563aaf2f19a/screenshot/1.png -------------------------------------------------------------------------------- /screenshot/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cppqtdev/Tesla-Dashboard-UI-3/070ab34ae56d81b9f6e36e35ffc1f563aaf2f19a/screenshot/2.png -------------------------------------------------------------------------------- /screenshot/3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cppqtdev/Tesla-Dashboard-UI-3/070ab34ae56d81b9f6e36e35ffc1f563aaf2f19a/screenshot/3.png -------------------------------------------------------------------------------- /screenshot/4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cppqtdev/Tesla-Dashboard-UI-3/070ab34ae56d81b9f6e36e35ffc1f563aaf2f19a/screenshot/4.png -------------------------------------------------------------------------------- /screenshot/5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cppqtdev/Tesla-Dashboard-UI-3/070ab34ae56d81b9f6e36e35ffc1f563aaf2f19a/screenshot/5.png -------------------------------------------------------------------------------- /screenshot/6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cppqtdev/Tesla-Dashboard-UI-3/070ab34ae56d81b9f6e36e35ffc1f563aaf2f19a/screenshot/6.png -------------------------------------------------------------------------------- /screenshot/Main Menu.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cppqtdev/Tesla-Dashboard-UI-3/070ab34ae56d81b9f6e36e35ffc1f563aaf2f19a/screenshot/Main Menu.png --------------------------------------------------------------------------------