Chevron buttons in Main Tool Bar

qgroundcontrol.qrc

@@ -247,13 +247,11 @@
     <qresource prefix="/qml">
         <file alias="test.qml">src/test.qml</file>
         <file alias="QmlTest.qml">src/QmlControls/QmlTest.qml</file>
-
         <file alias="QGroundControl/FactControls/qmldir">src/FactSystem/FactControls/qmldir</file>
         <file alias="QGroundControl/FactControls/FactLabel.qml">src/FactSystem/FactControls/FactLabel.qml</file>
         <file alias="QGroundControl/FactControls/FactTextField.qml">src/FactSystem/FactControls/FactTextField.qml</file>
         <file alias="QGroundControl/FactControls/FactCheckBox.qml">src/FactSystem/FactControls/FactCheckBox.qml</file>
         <file alias="QGroundControl/FactControls/FactComboBox.qml">src/FactSystem/FactControls/FactComboBox.qml</file>
-
         <file alias="QGroundControl/Controls/qmldir">src/QmlControls/qmldir</file>
         <file alias="QGroundControl/Controls/SubMenuButton.qml">src/QmlControls/SubMenuButton.qml</file>
         <file alias="QGroundControl/Controls/IndicatorButton.qml">src/QmlControls/IndicatorButton.qml</file>
@@ -265,26 +263,21 @@
         <file alias="QGroundControl/Controls/QGCTextField.qml">src/QmlControls/QGCTextField.qml</file>
         <file alias="QGroundControl/Controls/QGCComboBox.qml">src/QmlControls/QGCComboBox.qml</file>
         <file alias="QGroundControl/Controls/QGCColoredImage.qml">src/QmlControls/QGCColoredImage.qml</file>
-
         <file alias="QGroundControl/Controls/arrow-down.png">src/QmlControls/arrow-down.png</file>
-
+        <file alias="QGroundControl/Controls/QGCToolBarButton.qml">src/QmlControls/QGCToolBarButton.qml</file>
         <file alias="octo_x.png">files/images/px4/airframes/octo_x.png</file>
         <file alias="px4fmu_2.x.png">files/images/px4/boards/px4fmu_2.x.png</file>
-
         <file alias="SetupViewButtons.qml">src/VehicleSetup/SetupViewButtons.qml</file>
         <file alias="VehicleSummary.qml">src/VehicleSetup/VehicleSummary.qml</file>
         <file alias="FirmwareUpgrade.qml">src/VehicleSetup/FirmwareUpgrade.qml</file>
-
         <file alias="SafetyComponent.qml">src/AutoPilotPlugins/PX4/SafetyComponent.qml</file>
         <file alias="SensorsComponent.qml">src/AutoPilotPlugins/PX4/SensorsComponent.qml</file>
-
         <file alias="SafetyComponentSummary.qml">src/AutoPilotPlugins/PX4/SafetyComponentSummary.qml</file>
         <file alias="SensorsComponentSummary.qml">src/AutoPilotPlugins/PX4/SensorsComponentSummary.qml</file>
         <file alias="SensorsComponentSummaryFixedWing.qml">src/AutoPilotPlugins/PX4/SensorsComponentSummaryFixedWing.qml</file>
         <file alias="RadioComponentSummary.qml">src/AutoPilotPlugins/PX4/RadioComponentSummary.qml</file>
         <file alias="FlightModesComponentSummary.qml">src/AutoPilotPlugins/PX4/FlightModesComponentSummary.qml</file>
         <file alias="AirframeComponentSummary.qml">src/AutoPilotPlugins/PX4/AirframeComponentSummary.qml</file>
-
         <file alias="SafetyComponentTree.png">src/AutoPilotPlugins/PX4/Images/SafetyComponentTree.png</file>
         <file alias="SafetyComponentHome.png">src/AutoPilotPlugins/PX4/Images/SafetyComponentHome.png</file>
         <file alias="SafetyComponentArrowDown.png">src/AutoPilotPlugins/PX4/Images/SafetyComponentArrowDown.png</file>
@@ -295,7 +288,6 @@
         <file alias="VehicleRight.png">src/AutoPilotPlugins/PX4/Images/VehicleRight.png</file>
         <file alias="VehicleNoseDown.png">src/AutoPilotPlugins/PX4/Images/VehicleNoseDown.png</file>
         <file alias="VehicleTailDown.png">src/AutoPilotPlugins/PX4/Images/VehicleTailDown.png</file>
-
         <file alias="QGroundControl/Controls/subMenuButtonImage.png">files/Setup/cogwheels.png</file>
         <file alias="QGroundControl/Controls/SensorsComponentIcon.png">src/AutoPilotPlugins/PX4/Images/SensorsComponentIcon.png</file>
         <file alias="QGroundControl/Controls/RadioComponentIcon.png">src/AutoPilotPlugins/PX4/Images/RadioComponentIcon.png</file>
@@ -304,7 +296,6 @@
         <file alias="QGroundControl/Controls/SafetyComponentIcon.png">src/AutoPilotPlugins/PX4/Images/SafetyComponentIcon.png</file>
         <file alias="QGroundControl/Controls/FirmwareUpgradeIcon.png">src/VehicleSetup/FirmwareUpgradeIcon.png</file>
         <file alias="QGroundControl/Controls/VehicleSummaryIcon.png">src/VehicleSetup/VehicleSummaryIcon.png</file>
-
         <file alias="MainToolBar.qml">src/ui/toolbar/MainToolBar.qml</file>
     </qresource>
     <qresource prefix="/AutoPilotPlugins/PX4">

src/QmlControls/QGCToolBarButton.qml

@@ -0,0 +1,58 @@
+import QtQuick 2.2
+import QtQuick.Controls 1.2
+import QtQuick.Controls.Styles 1.2
+import QtQuick.Controls.Private 1.0
+
+import QGroundControl.Palette 1.0
+
+Button {
+    id: button
+    property bool repaintChevron: false
+    property var  __qgcPal: QGCPalette { colorGroupEnabled: enabled }
+    style: ButtonStyle {
+        background: Item {
+            anchors.margins: 3
+            Canvas {
+                id: chevron
+                anchors.fill: parent
+                antialiasing: true
+                Connections {
+                    target: button
+                    onHoveredChanged: chevron.requestPaint()
+                    onPressedChanged: chevron.requestPaint()
+                    onCheckedChanged: chevron.requestPaint()
+                    onRepaintChevronChanged: {
+                        if(repaintChevron) {
+                            chevron.requestPaint()
+                            repaintChevron = false;
+                        }
+                    }
+                }
+                onPaint: {
+                    var vMiddle = height / 2;
+                    var context = getContext("2d");
+                    context.reset();
+                    context.beginPath();
+                    context.lineWidth = 6;
+                    context.beginPath();
+                    context.moveTo(0, 0);
+                    context.lineTo(width - 12 - 3, 0);
+                    context.lineTo(width - 3, vMiddle);
+                    context.lineTo(width - 12 - 3, height);
+                    context.lineTo(0, height);
+                    context.closePath();
+                    context.strokeStyle = __qgcPal.windowShade
+                    context.fillStyle = (button.hovered && !button.pressed) ? __qgcPal.buttonHighlight : (button.checked ? __qgcPal.buttonHighlight : __qgcPal.button);
+                    context.stroke();
+                    context.fill();
+                }
+            }
+        }
+        label: Label {
+            text: button.text
+            horizontalAlignment: Text.AlignHCenter
+            verticalAlignment: Text.AlignVCenter
+            color: (button.hovered && !button.pressed) ? __qgcPal.buttonHighlightText : (button.checked ? __qgcPal.primaryButtonText : __qgcPal.buttonText)
+        }
+    }
+}

src/QmlControls/qmldir

@@ -7,6 +7,7 @@ QGCCheckBox 1.0 QGCCheckBox.qml
 QGCTextField 1.0 QGCTextField.qml
 QGCComboBox 1.0 QGCComboBox.qml
 QGCColoredImage 1.0 QGCColoredImage.qml
+QGCToolBarButton 1.0 QGCToolBarButton.qml
 
 SubMenuButton 1.0 SubMenuButton.qml
 IndicatorButton 1.0 IndicatorButton.qml

src/ui/MainWindow.cc

@@ -1373,3 +1373,21 @@ void MainWindow::_showQmlTestWidget(void)
 }
 #endif
 
+// There is a bug in Qt where a Canvas element inside a QQuickWidget does not
+// receive update requests. We hook into this event and notify the tool bar
+// to update its canvas elements. If other QQuickWidgets start using Canvas
+// and this bug is not fixed, this should be turned into a signal emited by
+// MainWindow and the various QQuickWidgets that need it should connect to it.
+bool MainWindow::event(QEvent* e)
+{
+    bool result = true;
+    switch (e->type()) {
+        case QEvent::Paint:
+            result = QMainWindow::event(e);
+            _mainToolBar->updateCanvas();
+            return result;
+        default:
+            break;
+    }
+    return QMainWindow::event(e);
+}

src/ui/MainWindow.h

@@ -219,6 +219,8 @@ public:
 
 protected:
 
+    bool event(QEvent *);
+
     typedef enum _VIEW_SECTIONS
     {
         VIEW_ENGINEER,         // Engineering/Analyze view mode. Used for analyzing data and modifying onboard parameters

src/ui/toolbar/MainToolBar.cc

@@ -655,3 +655,8 @@ void MainToolBar::_setSatLoc(UASInterface*, int fix)
         emit satelliteLockChanged(_satelliteLock);
     }
 }
+
+void MainToolBar::updateCanvas()
+{
+    emit repaintRequestedChanged();
+}

src/ui/toolbar/MainToolBar.h

@@ -98,6 +98,7 @@ public:
     Q_PROPERTY(bool          showMav            READ showMav            NOTIFY showMavChanged)
     Q_PROPERTY(bool          showMessages       READ showMessages       NOTIFY showMessagesChanged)
     Q_PROPERTY(bool          showBattery        READ showBattery        NOTIFY showBatteryChanged)
+    Q_PROPERTY(bool          repaintRequested   READ repaintRequested   NOTIFY repaintRequestedChanged)
 
     int           connectionCount        () { return _connectionCount; }
     double        batteryVoltage         () { return _batteryVoltage; }
@@ -122,9 +123,11 @@ public:
     bool          showMav                () { return _showMav; }
     bool          showMessages           () { return _showMessages; }
     bool          showBattery            () { return _showBattery; }
+    bool          repaintRequested       () { return true; }
 
     void          setCurrentView         (int currentView);
     void          viewStateChanged       (const QString& key, bool value);
+    void          updateCanvas           ();
 
 signals:
     void connectionCountChanged         (int count);
@@ -150,6 +153,7 @@ signals:
     void showMavChanged                 (bool value);
     void showMessagesChanged            (bool value);
     void showBatteryChanged             (bool value);
+    void repaintRequestedChanged        ();
 
 private slots:
     void _setActiveUAS                  (UASInterface* active);

src/ui/toolbar/MainToolBar.qml

@@ -120,15 +120,31 @@ Rectangle {
         id:                     row1
         height:                 cellHeight
         anchors.left:           parent.left
-        spacing:      cellSpacerSize
+        spacing:                4
         anchors.verticalCenter: parent.verticalCenter
         anchors.leftMargin:     10
 
+        Row {
+            id:                     row11
+            height:                 cellHeight
+            spacing:                -12
+            anchors.verticalCenter: parent.verticalCenter
+
+            Connections {
+                target: mainToolBar
+                onRepaintRequestedChanged: {
+                    setupButton.repaintChevron = true;
+                    planButton.repaintChevron = true;
+                    flyButton.repaintChevron = true;
+                    analyzeButton.repaintChevron = true;
+                }
+            }
+
             ExclusiveGroup { id: mainActionGroup }
 
-        QGCButton {
+            QGCToolBarButton {
                 id: setupButton
-            width: 90
+                width: 100
                 height: cellHeight
                 exclusiveGroup: mainActionGroup
                 text: qsTr("1. Setup")
@@ -137,11 +153,12 @@ Rectangle {
                 onClicked: {
                     mainToolBar.onSetupView();
                 }
+                z: 1000
             }
 
-        QGCButton {
+            QGCToolBarButton {
                 id: planButton
-            width: 90
+                width: 100
                 height: cellHeight
                 exclusiveGroup: mainActionGroup
                 text: qsTr("2. Plan")
@@ -150,11 +167,12 @@ Rectangle {
                 onClicked: {
                     mainToolBar.onPlanView();
                 }
+                z: 900
             }
 
-        QGCButton {
+            QGCToolBarButton {
                 id: flyButton
-            width: 90
+                width: 100
                 height: cellHeight
                 exclusiveGroup: mainActionGroup
                 text: qsTr("3. Fly")
@@ -163,11 +181,12 @@ Rectangle {
                 onClicked: {
                     mainToolBar.onFlyView();
                 }
+                z: 800
             }
 
-        QGCButton {
+            QGCToolBarButton {
                 id: analyzeButton
-            width: 90
+                width: 100
                 height: cellHeight
                 exclusiveGroup: mainActionGroup
                 text: qsTr("4. Analyze")
@@ -176,19 +195,20 @@ Rectangle {
                 onClicked: {
                     mainToolBar.onAnalyzeView();
                 }
+                z: 700
             }
 
-        Rectangle {
-            width: 4
-            height: cellHeight
-            color: "#00000000"
-            border.color: "#00000000"
-            border.width: 0
         }
 
+        Row {
+            id:                     row12
+            height:                 cellHeight
+            spacing:                cellSpacerSize
+            anchors.verticalCenter: parent.verticalCenter
+
             Rectangle {
                 id: messages
-            width: (mainToolBar.newMessageCount > 99) ? 70 : 60
+                width: (mainToolBar.messageCount > 99) ? 70 : 60
                 height: cellHeight
                 visible: (mainToolBar.connectionCount > 0) && (mainToolBar.showMessages)
                 anchors.verticalCenter: parent.verticalCenter
@@ -215,7 +235,7 @@ Rectangle {
                     width: messages.width - messageIcon.width
                     Text {
                         id: messageText
-                    text: (mainToolBar.newMessageCount > 0) ? mainToolBar.newMessageCount : ''
+                        text: (mainToolBar.messageCount > 0) ? mainToolBar.messageCount : ''
                         font.pointSize: 14 * dpiFactor
                         font.weight: Font.DemiBold
                         anchors.verticalCenter: parent.verticalCenter
@@ -253,12 +273,10 @@ Rectangle {
                         mouseOffTimer.start();
                     }
                     onClicked: {
-                    if(mainToolBar.messageCount > 0) {
                         var p = mapToItem(toolBarHolder, mouseX, mouseY);
                         mainToolBar.onEnterMessageArea(p.x, p.y);
                     }
                 }
-            }
 
             }
 
@@ -322,7 +340,7 @@ Rectangle {
                 height: cellHeight
                 visible: showMavStatus() && (mainToolBar.showBattery)
                 anchors.verticalCenter: parent.verticalCenter
-            color:  (mainToolBar.batteryPercent > 40.0 || mainToolBar.batteryPercent < 0.01) ? colorGreen : colorRed
+                color:  (mainToolBar.batteryPercent > 40.0 || mainToolBar.batteryPercent < 0.01) ? colorBlue : colorRed
                 radius: cellRadius
                 border.color: "#00000000"
                 border.width: 0
@@ -372,7 +390,7 @@ Rectangle {
                         font.pointSize: 12 * dpiFactor
                         font.weight: Font.DemiBold
                         anchors.centerIn: parent
-                    color: (mainToolBar.systemArmed) ? colorRed : colorGreenText
+                        color: (mainToolBar.systemArmed) ? colorRed : colorGreen
                     }
                 }
 
@@ -391,7 +409,7 @@ Rectangle {
                         font.pointSize: 12 * dpiFactor
                         font.weight: Font.DemiBold
                         anchors.centerIn: parent
-                    color: (mainToolBar.currentState === "STANDBY") ? colorGreenText : colorRed
+                        color: (mainToolBar.currentState === "STANDBY") ? colorGreen : colorRed
                     }
                 }
 
@@ -438,6 +456,7 @@ Rectangle {
                 }
             }
         }
+    }
 
     Row {
         id: row2