Advertisement
Meistermosher

Dashboard.qml

Nov 23rd, 2021 (edited)
1,732
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
QML 9.13 KB | None | 0 0
  1. import QtQuick 2.0
  2. import QtQuick.Controls 2.12
  3. import QtMultimedia 5.12
  4.  
  5. Item {
  6.     id: dash
  7.     visible: true
  8.     anchors.fill: parent
  9.  
  10.     property string m_gear: "0"
  11.     property double m_consumption: 0
  12.     property double m_odometer: 0
  13.     property double m_speed: 0
  14.     property double m_rpm: 0
  15.     property string m_error: "Alles Gut"
  16.     property double m_tankanz: 0
  17.  
  18.     function openRearView()
  19.     {
  20.         // Need a (valid) camera when starting the application! Switching inbetween is not supported!
  21.  
  22.         if(camera.cameraStatus == 8){
  23.             // Camera is available and provides image!
  24.             rearView.open();
  25.             fallbackImage.visible = false;
  26.         }
  27.  
  28.         else if(camera.cameraStatus == 1){
  29.             // No Webcam attached (Camera is already used by other application)
  30.             rearView.open();
  31.             fallbackImage.visible = true;
  32.         }
  33.     }
  34.  
  35.     function closeRearView()
  36.     {
  37.         // Best to put it into a state. This way we need to turn it off everytime the gear is shifted
  38.         rearView.close();
  39.     }
  40.  
  41.     function blinkLeft()
  42.     {
  43.         // Turns the blinker(s) on / off. But each one seperately. Should be possible to put it into one function.
  44.         if(!blinking_L.running){
  45.             blinking_R.stop();
  46.             blRightImg.opacity = 0
  47.             blinking_L.start();
  48.         }
  49.  
  50.         else if(blinking_L.running){
  51.             blinking_L.stop();
  52.             blLeftImg.opacity = 0;
  53.         }
  54.     }
  55.  
  56.     function blinkRight()
  57.     {
  58.         if(!blinking_R.running){
  59.             blinking_L.stop();
  60.             blLeftImg.opacity = 0
  61.             blinking_R.start();
  62.         }
  63.  
  64.         else if(blinking_R.running){
  65.             blinking_R.stop();
  66.             blRightImg.opacity = 0;
  67.         }
  68.     }
  69.  
  70.     Rectangle{
  71.         id: bckgrnd
  72.         anchors.fill: parent
  73.         color: "black"
  74.     }
  75.  
  76.  
  77.     // ++++ SPEED ++++
  78.  
  79.     Rectangle{
  80.         id: speedDisp
  81.         height: dash.height
  82.         width:  600
  83.         anchors{
  84.             left: dash.left
  85.             bottom: dash.bottom
  86.             leftMargin: 70
  87.         }
  88.         color: "transparent"
  89.         Dial{
  90.             id: speedDial
  91.             height: dash.height -50
  92.             value: dash.m_speed
  93.             width: 550
  94.             anchors.centerIn: parent
  95.             from: 0
  96.             to: 220      // km/h
  97.             Text {
  98.                 anchors.centerIn: parent
  99.                 font.pointSize: 100
  100.                 color: "white"
  101.                 text: Math.round(speedDial.value)
  102.             }
  103.         }
  104.     }
  105.  
  106.     // ++++ RPM ++++
  107.  
  108.     Rectangle{
  109.         id: rpmDisp
  110.         height: dash.height
  111.         width:  600
  112.         anchors{
  113.             right: dash.right
  114.             bottom: dash.bottom
  115.             rightMargin: 70
  116.         }
  117.         color: "transparent"
  118.  
  119.         Dial{
  120.             id: rpmDial
  121.             height: dash.height -50
  122.             value: dash.m_rpm
  123.             width: 550
  124.             anchors.centerIn: parent
  125.             from: 0
  126.             to: 10000
  127.             Text {
  128.                 id: rpmText
  129.                 anchors.centerIn: parent
  130.                 font.pointSize: 70
  131.                 color: "white"
  132.                 text: Math.round(rpmDial.value)
  133.             }
  134.             Timer {
  135.                 interval: 100; running: true; repeat: true;
  136.                 onTriggered: {
  137.                     var rpm = Math.round(rpmDial.value);
  138.                     rpmText.text = rpm;
  139.                     if(rpm < 5000){
  140.                         rpmText.color = "white"
  141.                     }
  142.                     else if(rpm > 4000){
  143.                         rpmText.color = "red"
  144.                     }
  145.                 }
  146.             }
  147.         }
  148.     }
  149.  
  150.  
  151.     // ++++ CENTER INFO ++++
  152.  
  153.     Column{
  154.         id: centerInfo
  155.         anchors{
  156.             bottom: dash.bottom
  157.             leftMargin: 10
  158.             rightMargin: 10
  159.             bottomMargin: 10
  160.             horizontalCenter: dash.horizontalCenter
  161.         }
  162.         spacing: 10
  163.  
  164.         Row{
  165.             spacing: 300
  166.             anchors.horizontalCenter: parent.horizontalCenter
  167.  
  168.             Rectangle{
  169.                 height: 60
  170.                 width: 60
  171.                 color: "transparent"
  172.  
  173.                 Image{
  174.                     id: blLeftImg
  175.                     opacity: 0
  176.                     width: 100
  177.                     height: 100
  178.                     mirror: true
  179.                     anchors.centerIn: parent
  180.                     anchors.verticalCenterOffset: -10
  181.                     source: "/arrow.png"
  182.                 }
  183.             }
  184.  
  185.             Rectangle{
  186.                 height: 60
  187.                 width: 60
  188.                 color: "transparent"
  189.  
  190.                 Image{
  191.                     id: blRightImg
  192.                     opacity: 0
  193.                     width: 100
  194.                     height: 100
  195.                     anchors.centerIn: parent
  196.                     anchors.verticalCenterOffset: -10
  197.                     source: "/arrow.png"
  198.                 }
  199.             }
  200.         }
  201.  
  202.         // ++++ BLINKING ANIMATION LEFT ++++
  203.  
  204.         SequentialAnimation{
  205.             id: blinking_L
  206.             loops: Animation.Infinite
  207.             running: false
  208.  
  209.             NumberAnimation{
  210.                 target: blLeftImg
  211.                 property: "opacity";
  212.                 to: 1
  213.                 duration: 250
  214.                 easing.type: Easing.OutQuad
  215.             }
  216.  
  217.             PauseAnimation {
  218.                 duration: 300
  219.             }
  220.             NumberAnimation{
  221.                 target: blLeftImg
  222.                 property: "opacity";
  223.                 to: 0
  224.                 duration: 250
  225.                 easing.type: Easing.OutQuad
  226.             }
  227.             PauseAnimation {
  228.                 duration: 300
  229.             }
  230.         }
  231.  
  232.         // ++++ BLINKING ANIMATION RIGHT ++++
  233.  
  234.         SequentialAnimation{
  235.             id: blinking_R
  236.             loops: Animation.Infinite
  237.             running: false
  238.  
  239.             NumberAnimation{
  240.                 target: blRightImg
  241.                 property: "opacity";
  242.                 to: 1
  243.                 duration: 250
  244.                 easing.type: Easing.OutQuad
  245.             }
  246.  
  247.             PauseAnimation {
  248.                 duration: 300
  249.             }
  250.             NumberAnimation{
  251.                 target: blRightImg
  252.                 property: "opacity";
  253.                 to: 0
  254.                 duration: 250
  255.                 easing.type: Easing.OutQuad
  256.             }
  257.             PauseAnimation {
  258.                 duration: 300
  259.             }
  260.         }
  261.  
  262.         // ++++ FURTHER DISPLAY INFORMATION ++++
  263.  
  264.         Text{
  265.             id: clock
  266.             anchors.horizontalCenter: parent.horizontalCenter
  267.             font.pointSize: 20
  268.             color: "white"
  269.  
  270.             Image{
  271.                 anchors{
  272.                     bottom: clock.bottom
  273.                     right: clock.left
  274.                     verticalCenter: clock.verticalCenter
  275.                     rightMargin: 10
  276.                 }
  277.                 width: 30
  278.                 height: 30
  279.                 source: "/clockIcon"
  280.             }
  281.         }
  282.  
  283.         Timer {
  284.             // sets current real world time
  285.             interval: 100; running: true; repeat: true;
  286.             onTriggered: clock.text = new Date().toLocaleTimeString("hh::mm")
  287.         }
  288.  
  289.         Text{
  290.             id: gear
  291.             anchors.horizontalCenter: parent.horizontalCenter
  292.             text: "Gang: " + dash.m_gear
  293.             font.pointSize: 20
  294.             color: "white"
  295.         }
  296.         Text{
  297.             id: consumption
  298.             anchors.horizontalCenter: parent.horizontalCenter
  299.             text: {
  300.                 if(dash.m_speed < 0.1){
  301.                     dash.m_consumption + " Liter/h";
  302.                 }
  303.                 else{
  304.                     dash.m_consumption + " Liter/100km";
  305.                 }
  306.             }
  307.             font.pointSize: 20
  308.             color: "white"
  309.         }
  310.  
  311.         Text{
  312.             id: odometer
  313.             anchors.horizontalCenter: parent.horizontalCenter
  314.             text: dash.m_odometer + " km"
  315.             font.pointSize: 20
  316.             color: "white"
  317.         }
  318.  
  319.         Text{
  320.             id: tankanzeige
  321.             anchors.horizontalCenter: parent.horizontalCenter
  322.             text: dash.m_tankanz + " %"
  323.             font.pointSize: 20
  324.             color: "white"
  325.         }
  326.  
  327.         Text{
  328.             id: errLog
  329.             anchors.horizontalCenter: parent.horizontalCenter
  330.             text: dash.m_error
  331.             font.pointSize: 20
  332.             color: "red"
  333.         }
  334.     }
  335.  
  336.  
  337.     // ++++ REARVIEW CAMERA ++++
  338.  
  339.     Popup{
  340.         // Popup isn't centered to provide complete overview
  341.         id: rearView
  342.         x: 680
  343.         y: 30
  344.         width: 440
  345.         height: 330
  346.  
  347.         Camera{
  348.             id: camera
  349.         }
  350.         VideoOutput{
  351.             id: vo
  352.             anchors.fill: parent
  353.             source: camera
  354.         }
  355.         Image{
  356.             id: fallbackImage
  357.             anchors.fill: parent
  358.             source: "/Bomber"
  359.         }
  360.     }
  361. }
  362.  
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement