Modify UI to fit latest designer sketches

qgroundcontrol.qrc

@@ -269,6 +269,12 @@
         <file alias="AirframeComponentSummary.qml">src/AutoPilotPlugins/PX4/AirframeComponentSummary.qml</file>
 
         <file alias="QGroundControl/Controls/setupButtonImage.png">files/Setup/cogwheels.png</file>
+        <file alias="QGroundControl/Controls/SensorsComponentIcon.png">src/AutoPilotPlugins/PX4/SensorsComponentIcon.png</file>
+        <file alias="QGroundControl/Controls/RadioComponentIcon.png">src/AutoPilotPlugins/PX4/RadioComponentIcon.png</file>
+        <file alias="QGroundControl/Controls/FlightModesComponentIcon.png">src/AutoPilotPlugins/PX4/FlightModesComponentIcon.png</file>
+        <file alias="QGroundControl/Controls/AirframeComponentIcon.png">src/AutoPilotPlugins/PX4/AirframeComponentIcon.png</file>
+        <file alias="QGroundControl/Controls/FirmwareUpgradeIcon.png">src/VehicleSetup/FirmwareUpgradeIcon.png</file>
+        <file alias="QGroundControl/Controls/VehicleSummaryIcon.png">src/VehicleSetup/VehicleSummaryIcon.png</file>
 
     </qresource>
 

src/AutoPilotPlugins/PX4/AirframeComponent.cc

@@ -133,9 +133,9 @@ QString AirframeComponent::description(void) const
               "This will in turn set up the various tuning values for flight paramters.");
 }
 
-QString AirframeComponent::icon(void) const
+QString AirframeComponent::iconResource(void) const
 {
-    return ":/files/images/px4/menu/plane.png";
+    return "AirframeComponentIcon.png";
 }
 
 bool AirframeComponent::requiresSetup(void) const

src/AutoPilotPlugins/PX4/AirframeComponent.h

@@ -43,7 +43,7 @@ public:
     // Virtuals from VehicleComponent
     virtual QString name(void) const;
     virtual QString description(void) const;
-    virtual QString icon(void) const;
+    virtual QString iconResource(void) const;
     virtual bool requiresSetup(void) const;
     virtual bool setupComplete(void) const;
     virtual QString setupStateDescription(void) const;

src/AutoPilotPlugins/PX4/AirframeComponentSummary.qml

 import QtQuick 2.2
 import QtQuick.Controls 1.2
 import QtQuick.Controls.Styles 1.2
+
 import QGroundControl.FactSystem 1.0
-import QGroundControl.FactControls 1.0
+import QGroundControl.Controls 1.0
 
 Column {
     anchors.fill: parent
@@ -11,8 +12,8 @@ Column {
     Row {
         width: parent.width
 
-        Text { id: systemId; text: "System ID:" }
-        Text {
+        QGCLabel { id: systemId; text: "System ID:" }
+        QGCLabel {
             horizontalAlignment: Text.AlignRight
             width: parent.width - systemId.contentWidth
             text: autopilot.parameters["MAV_SYS_ID"].value
@@ -22,8 +23,8 @@ Column {
     Row {
         width: parent.width
 
-        Text { id: airframe; text: "Airframe:" }
-        Text {
+        QGCLabel { id: airframe; text: "Airframe:" }
+        QGCLabel {
             horizontalAlignment: Text.AlignRight
             width: parent.width - airframe.contentWidth
             text: autopilot.parameters["SYS_AUTOSTART"].value == 0 ? "Setup required" : autopilot.parameters["SYS_AUTOSTART"].value

src/AutoPilotPlugins/PX4/FlightModesComponent.cc

@@ -63,9 +63,9 @@ QString FlightModesComponent::description(void) const
               "At a minimum the Main Mode Switch must be assigned prior to flight.");
 }
 
-QString FlightModesComponent::icon(void) const
+QString FlightModesComponent::iconResource(void) const
 {
-    return ":/files/images/px4/menu/toggle_switch.png";
+    return "FlightModesComponentIcon.png";
 }
 
 bool FlightModesComponent::requiresSetup(void) const

src/AutoPilotPlugins/PX4/FlightModesComponent.h

@@ -43,7 +43,7 @@ public:
     // Virtuals from VehicleComponent
     virtual QString name(void) const;
     virtual QString description(void) const;
-    virtual QString icon(void) const;
+    virtual QString iconResource(void) const;
     virtual bool requiresSetup(void) const;
     virtual bool setupComplete(void) const;
     virtual QString setupStateDescription(void) const;

src/AutoPilotPlugins/PX4/FlightModesComponentSummary.qml

 import QtQuick 2.2
 import QtQuick.Controls 1.2
 import QtQuick.Controls.Styles 1.2
+
 import QGroundControl.FactSystem 1.0
-import QGroundControl.FactControls 1.0
+import QGroundControl.Controls 1.0
 
 Column {
     anchors.fill: parent
@@ -11,8 +12,8 @@ Column {
     Row {
         width: parent.width
 
-        Text { id: mode; text: "Mode switch:" }
-        Text {
+        QGCLabel { id: mode; text: "Mode switch:" }
+        QGCLabel {
             horizontalAlignment: Text.AlignRight
             width: parent.width - mode.contentWidth
             text: autopilot.parameters["RC_MAP_MODE_SW"].value == 0 ? "Setup required" : autopilot.parameters["RC_MAP_MODE_SW"].value
@@ -22,8 +23,8 @@ Column {
     Row {
         width: parent.width
 
-        Text { id: posctl; text: "Position Ctl switch:" }
-        Text {
+        QGCLabel { id: posctl; text: "Position Ctl switch:" }
+        QGCLabel {
             horizontalAlignment: Text.AlignRight
             width: parent.width - posctl.contentWidth
             text: autopilot.parameters["RC_MAP_POSCTL_SW"].value == 0 ? "Not mapped" : autopilot.parameters["RC_MAP_POSCTL_SW"].value
@@ -33,8 +34,8 @@ Column {
     Row {
         width: parent.width
 
-        Text { id: loiter; text: "Loiter switch:" }
-        Text {
+        QGCLabel { id: loiter; text: "Loiter switch:" }
+        QGCLabel {
             horizontalAlignment: Text.AlignRight
             width: parent.width - loiter.contentWidth
             text: autopilot.parameters["RC_MAP_LOITER_SW"].value == 0 ? "Not mapped" : autopilot.parameters["RC_MAP_LOITER_SW"].value
@@ -44,8 +45,8 @@ Column {
     Row {
         width: parent.width
 
-        Text { id: rtl; text: "Return switch:" }
-        Text {
+        QGCLabel { id: rtl; text: "Return switch:" }
+        QGCLabel {
             horizontalAlignment: Text.AlignRight
             width: parent.width - rtl.contentWidth
             text: autopilot.parameters["RC_MAP_RETURN_SW"].value == 0 ? "Not mapped" : autopilot.parameters["RC_MAP_RETURN_SW"].value

src/AutoPilotPlugins/PX4/RadioComponent.cc

@@ -49,9 +49,9 @@ QString RadioComponent::description(void) const
               "Prior to flight you must also calibrate the extents for all of your channels.");
 }
 
-QString RadioComponent::icon(void) const
+QString RadioComponent::iconResource(void) const
 {
-    return ":/files/images/px4/menu/remote.png";
+    return "RadioComponentIcon.png";
 }
 
 bool RadioComponent::requiresSetup(void) const

src/AutoPilotPlugins/PX4/RadioComponent.h

@@ -44,7 +44,7 @@ public:
     // Virtuals from VehicleComponent
     virtual QString name(void) const;
     virtual QString description(void) const;
-    virtual QString icon(void) const;
+    virtual QString iconResource(void) const;
     virtual bool requiresSetup(void) const;
     virtual bool setupComplete(void) const;
     virtual QString setupStateDescription(void) const;

src/AutoPilotPlugins/PX4/RadioComponentSummary.qml

 import QtQuick 2.2
 import QtQuick.Controls 1.2
 import QtQuick.Controls.Styles 1.2
+
 import QGroundControl.FactSystem 1.0
-import QGroundControl.FactControls 1.0
+import QGroundControl.Controls 1.0
 
 Column {
     anchors.fill: parent
@@ -11,8 +12,8 @@ Column {
     Row {
         width: parent.width
 
-        Text { id: roll; text: "Roll:" }
-        Text {
+        QGCLabel { id: roll; text: "Roll:" }
+        QGCLabel {
             horizontalAlignment: Text.AlignRight
             width: parent.width - roll.contentWidth
             text: autopilot.parameters["RC_MAP_ROLL"].value == 0 ? "Setup required" : autopilot.parameters["RC_MAP_ROLL"].value
@@ -22,8 +23,8 @@ Column {
     Row {
         width: parent.width
 
-        Text { id: pitch; text: "Pitch:" }
-        Text {
+        QGCLabel { id: pitch; text: "Pitch:" }
+        QGCLabel {
             horizontalAlignment: Text.AlignRight
             width: parent.width - pitch.contentWidth
             text: autopilot.parameters["RC_MAP_PITCH"].value == 0 ? "Setup required" : autopilot.parameters["RC_MAP_PITCH"].value
@@ -33,8 +34,8 @@ Column {
     Row {
         width: parent.width
 
-        Text { id: yaw; text: "Yaw:" }
-        Text {
+        QGCLabel { id: yaw; text: "Yaw:" }
+        QGCLabel {
             horizontalAlignment: Text.AlignRight
             width: parent.width - yaw.contentWidth
             text: autopilot.parameters["RC_MAP_YAW"].value == 0 ? "Setup required" : autopilot.parameters["RC_MAP_YAW"].value
@@ -44,8 +45,8 @@ Column {
     Row {
         width: parent.width
 
-        Text { id: throttle; text: "Throttle:" }
-        Text {
+        QGCLabel { id: throttle; text: "Throttle:" }
+        QGCLabel {
             horizontalAlignment: Text.AlignRight
             width: parent.width - throttle.contentWidth
             text: autopilot.parameters["RC_MAP_THROTTLE"].value == 0 ? "Setup required" : autopilot.parameters["RC_MAP_THROTTLE"].value
@@ -55,8 +56,8 @@ Column {
     Row {
         width: parent.width
 
-        Text { id: mode; text: "Mode switch:" }
-        Text {
+        QGCLabel { id: mode; text: "Mode switch:" }
+        QGCLabel {
             horizontalAlignment: Text.AlignRight
             width: parent.width - mode.contentWidth
             text: autopilot.parameters["RC_MAP_MODE_SW"].value == 0 ? "Setup required" : autopilot.parameters["RC_MAP_MODE_SW"].value

src/AutoPilotPlugins/PX4/SafetyComponent.cc

@@ -48,9 +48,10 @@ QString SafetyComponent::description(void) const
     return tr("The Safety Component is used to setup triggers for Return to Land as well as the settings for Return to Land itself.");
 }
 
-QString SafetyComponent::icon(void) const
+QString SafetyComponent::iconResource(void) const
 {
-    return ":/files/images/px4/menu/remote.png";
+    // FIXME: Need real icon
+    return "setupButtonImage.png";
 }
 
 bool SafetyComponent::requiresSetup(void) const

src/AutoPilotPlugins/PX4/SafetyComponent.h

@@ -44,7 +44,7 @@ public:
     // Virtuals from VehicleComponent
     virtual QString name(void) const;
     virtual QString description(void) const;
-    virtual QString icon(void) const;
+    virtual QString iconResource(void) const;
     virtual bool requiresSetup(void) const;
     virtual bool setupComplete(void) const;
     virtual QString setupStateDescription(void) const;

src/AutoPilotPlugins/PX4/SafetyComponentSummary.qml

 import QtQuick 2.2
 import QtQuick.Controls 1.2
 import QtQuick.Controls.Styles 1.2
+
 import QGroundControl.FactSystem 1.0
-import QGroundControl.FactControls 1.0
+import QGroundControl.Controls 1.0
 
 Column {
     anchors.fill: parent
@@ -11,8 +12,8 @@ Column {
     Row {
         width: parent.width
 
-        Text { id: rtlMinAlt; text: "RTL min alt:" }
-        Text {
+        QGCLabel { id: rtlMinAlt; text: "RTL min alt:" }
+        QGCLabel {
             horizontalAlignment: Text.AlignRight;
             width: parent.width - rtlMinAlt.contentWidth;
             text: autopilot.parameters["RTL_RETURN_ALT"].valueString
@@ -22,8 +23,8 @@ Column {
     Row {
         width: parent.width
 
-        Text { id: rtlHomeAlt; text: "RTL home alt:" }
-        Text {
+        QGCLabel { id: rtlHomeAlt; text: "RTL home alt:" }
+        QGCLabel {
             horizontalAlignment: Text.AlignRight;
             width: parent.width - rtlHomeAlt.contentWidth;
             text: autopilot.parameters["RTL_DESCEND_ALT"].valueString
@@ -33,8 +34,8 @@ Column {
     Row {
         width: parent.width
 
-        Text { id: rtlLoiter; text: "RTL loiter delay:" }
-        Text {
+        QGCLabel { id: rtlLoiter; text: "RTL loiter delay:" }
+        QGCLabel {
             horizontalAlignment: Text.AlignRight;
             width: parent.width - rtlLoiter.contentWidth;
             text: autopilot.parameters["RTL_LAND_DELAY"].value < 0 ? "Disabled" : autopilot.parameters["RTL_LAND_DELAY"].valueString
@@ -44,19 +45,19 @@ Column {
     Row {
         width: parent.width
 
-        Text { id: commLoss; text: "Telemetry loss RTL:" }
-        Text {
+        QGCLabel { id: commLoss; text: "Telemetry loss RTL:" }
+        QGCLabel {
             horizontalAlignment: Text.AlignRight;
             width: parent.width - commLoss.contentWidth;
-            text: autopilot.parameters["COM_DL_LOSS_EN"].value != 1 ? "Disabled" : autopilot.parameters["NAV_DLL_N"].valueString
+            text: autopilot.parameters["COM_DL_LOSS_EN"].value != 1 ? "Disabled" : autopilot.parameters["COM_DL_LOSS_T"].valueString
         }
     }
 
     Row {
         width: parent.width
 
-        Text { id: rcLoss; text: "RC loss RTL (seconds):" }
-        Text {
+        QGCLabel { id: rcLoss; text: "RC loss RTL (seconds):" }
+        QGCLabel {
             horizontalAlignment: Text.AlignRight;
             width: parent.width - rcLoss.contentWidth;
             text: autopilot.parameters["COM_RC_LOSS_T"].valueString

src/AutoPilotPlugins/PX4/SensorsComponent.cc

@@ -55,9 +55,9 @@ QString SensorsComponent::description(void) const
               "Prior to flight you must calibrate the Magnetometer, Gyroscope and Accelerometer.");
 }
 
-QString SensorsComponent::icon(void) const
+QString SensorsComponent::iconResource(void) const
 {
-    return ":/files/images/px4/menu/sensors.png";
+    return "SensorsComponentIcon.png";
 }
 
 bool SensorsComponent::requiresSetup(void) const

src/AutoPilotPlugins/PX4/SensorsComponent.h

@@ -43,7 +43,7 @@ public:
     // Virtuals from VehicleComponent
     virtual QString name(void) const;
     virtual QString description(void) const;
-    virtual QString icon(void) const;
+    virtual QString iconResource(void) const;
     virtual bool requiresSetup(void) const;
     virtual bool setupComplete(void) const;
     virtual QString setupStateDescription(void) const;

src/AutoPilotPlugins/PX4/SensorsComponentSummary.qml

 import QtQuick 2.2
 import QtQuick.Controls 1.2
 import QtQuick.Controls.Styles 1.2
+
 import QGroundControl.FactSystem 1.0
-import QGroundControl.FactControls 1.0
+import QGroundControl.Controls 1.0
 
 Column {
     anchors.fill: parent
@@ -11,8 +12,8 @@ Column {
     Row {
         width: parent.width
 
-        Text { id: compass; text: "Compass:" }
-        Text {
+        QGCLabel { id: compass; text: "Compass:" }
+        QGCLabel {
             horizontalAlignment: Text.AlignRight;
             width: parent.width - compass.contentWidth;
             property bool setupRequiredValue: autopilot.parameters["SENS_MAG_XOFF"] ? autopilot.parameters["SENS_MAG_XOFF"].value : autopilot.parameters["CAL_MAG0_ID"].value
@@ -23,8 +24,8 @@ Column {
     Row {
         width: parent.width
 
-        Text { id: gyro; text: "Gyro:" }
-        Text {
+        QGCLabel { id: gyro; text: "Gyro:" }
+        QGCLabel {
             horizontalAlignment: Text.AlignRight;
             width: parent.width - gyro.contentWidth;
             property bool setupRequiredValue: autopilot.parameters["SENS_GYRO_XOFF"] ? autopilot.parameters["SENS_GYRO_XOFF"].value : autopilot.parameters["CAL_GYRO0_ID"].value
@@ -35,8 +36,8 @@ Column {
     Row {
         width: parent.width
 
-        Text { id: accel; text: "Accelerometer:" }
-        Text {
+        QGCLabel { id: accel; text: "Accelerometer:" }
+        QGCLabel {
             horizontalAlignment: Text.AlignRight;
             width: parent.width - accel.contentWidth;
             property bool setupRequiredValue: autopilot.parameters["SENS_ACC_XOFF"] ? autopilot.parameters["SENS_ACC_XOFF"].value : autopilot.parameters["CAL_ACC0_ID"].value
@@ -47,8 +48,8 @@ Column {
     Row {
         width: parent.width
 
-        Text { id: airspeed; text: "Airspeed:" }
-        Text {
+        QGCLabel { id: airspeed; text: "Airspeed:" }
+        QGCLabel {
             horizontalAlignment: Text.AlignRight;
             width: parent.width - airspeed.contentWidth;
             text: autopilot.parameters["SENS_DPRES_OFF"].value == 0.0 ? "Setup required" : "Ready"

src/QGCPalette.cc

@@ -63,14 +63,24 @@ QColor QGCPalette::_window[QGCPalette::_cThemes][QGCPalette::_cColorGroups] = {
     { QColor(0x22, 0x22, 0x22), QColor(0x22, 0x22, 0x22), QColor(0x22, 0x22, 0x22) }
 };
 
+QColor QGCPalette::_windowShade[QGCPalette::_cThemes][QGCPalette::_cColorGroups] = {
+    { QColor(255, 235, 211), QColor(255, 235, 211), QColor(255, 235, 211) },
+    { QColor(51, 51, 51), QColor(51, 51, 51), QColor(51, 51, 51) }
+};
+
+QColor QGCPalette::_windowShadeDark[QGCPalette::_cThemes][QGCPalette::_cColorGroups] = {
+    { QColor(216, 216, 216), QColor(216, 216, 216), QColor(216, 216, 216) },
+    { QColor(40, 40, 40), QColor(40, 40, 40), QColor(40, 40, 40) }
+};
+
 QColor QGCPalette::_windowText[QGCPalette::_cThemes][QGCPalette::_cColorGroups] = {
     { QColor(0x58, 0x58, 0x58), QColor(0, 0, 0), QColor(0, 0, 0) },
     { QColor(0x58, 0x58, 0x58), QColor(0xFF, 0xFF, 0xFF), QColor(0xFF, 0xFF, 0xFF) }
 };
 
 QColor QGCPalette::_buttonHighlight[QGCPalette::_cThemes][QGCPalette::_cColorGroups] = {
-    { QColor(0x58, 0x58, 0x58), QColor(0xee, 0xe3, 0x33), QColor(0xee, 0xe3, 0x33) },
-    { QColor(0x58, 0x58, 0x58), QColor(0xee, 0xe3, 0x33), QColor(0xee, 0xe3, 0x33) },
+    { QColor(0x58, 0x58, 0x58), QColor(238, 227, 51), QColor(238, 227, 51) },
+    { QColor(0x58, 0x58, 0x58), QColor(238, 227, 51), QColor(238, 227, 51) },
 };
 
 QGCPalette::QGCPalette(QObject* parent) :

src/QGCPalette.h

@@ -54,6 +54,14 @@ class QGCPalette : public QObject
     /// The buttonHighlight color identifies the button background color when hovered or selected.
     Q_PROPERTY(QColor buttonHighlight READ buttonHighlight NOTIFY paletteChanged)
 
+    /// The windowShade color should be a color somewhere between window and button. It is used to shade window
+    /// areas.
+    Q_PROPERTY(QColor windowShade READ windowShade NOTIFY paletteChanged)
+    
+    /// The windowShadeDark color should be a color somewhere between window and windowShade. It is used to shade window
+    /// darker areas.
+    Q_PROPERTY(QColor windowShadeDark READ windowShadeDark NOTIFY paletteChanged)
+    
 public:
     enum ColorGroup {
         Disabled = 0,
@@ -78,6 +86,8 @@ public:
     QColor buttonText(void) const { return _buttonText[_theme][_colorGroup]; }
     QColor text(void) const { return _text[_theme][_colorGroup]; }
     QColor window(void) const { return _window[_theme][_colorGroup]; }
+    QColor windowShade(void) const { return _windowShade[_theme][_colorGroup]; }
+    QColor windowShadeDark(void) const { return _windowShadeDark[_theme][_colorGroup]; }
     QColor windowText(void) const { return _windowText[_theme][_colorGroup]; }
     QColor buttonHighlight(void) const { return _buttonHighlight[_theme][_colorGroup]; }
     
@@ -100,6 +110,8 @@ private:
     static QColor _buttonText[_cThemes][_cColorGroups];
     static QColor _text[_cThemes][_cColorGroups];
     static QColor _window[_cThemes][_cColorGroups];
+    static QColor _windowShade[_cThemes][_cColorGroups];
+    static QColor _windowShadeDark[_cThemes][_cColorGroups];
     static QColor _windowText[_cThemes][_cColorGroups];
     static QColor _buttonHighlight[_cThemes][_cColorGroups];
     

src/QmlControls/QGCButton.qml

@@ -11,7 +11,7 @@ Button {
             background: Rectangle {
                 implicitWidth: 100
                 implicitHeight: 25
-                color: control.hovered ? control.__qgcPal.buttonHighlight : control.__qgcPal.button
+                color: control.pressed ? control.__qgcPal.buttonHighlight : control.__qgcPal.button
             }
 
             label: Text {

src/QmlControls/QmlTest.qml

@@ -210,6 +210,46 @@ Rectangle {
                 sourceComponent: colorSquare
             }
 
+            Loader {
+                sourceComponent: rowHeader
+                property var text: "windowShade"
+            }
+            Loader {
+                property var palette: QGCPalette { colorGroup: QGCPalette.Disabled }
+                property var color: palette.windowShade
+                sourceComponent: colorSquare
+            }
+            Loader {
+                property var palette: QGCPalette { colorGroup: QGCPalette.Active }
+                property var color: palette.windowShade
+                sourceComponent: colorSquare
+            }
+            Loader {
+                property var palette: QGCPalette { colorGroup: QGCPalette.Inactive }
+                property var color: palette.windowShade
+                sourceComponent: colorSquare
+            }
+
+            Loader {
+                sourceComponent: rowHeader
+                property var text: "windowShadeDark"
+            }
+            Loader {
+                property var palette: QGCPalette { colorGroup: QGCPalette.Disabled }
+                property var color: palette.windowShadeDark
+                sourceComponent: colorSquare
+            }
+            Loader {
+                property var palette: QGCPalette { colorGroup: QGCPalette.Active }
+                property var color: palette.windowShadeDark
+                sourceComponent: colorSquare
+            }
+            Loader {
+                property var palette: QGCPalette { colorGroup: QGCPalette.Inactive }
+                property var color: palette.windowShadeDark
+                sourceComponent: colorSquare
+            }
+
             Loader {
                 sourceComponent: rowHeader
                 property var text: "windowText"

src/QmlControls/SetupButton.qml

@@ -12,11 +12,12 @@ Button {
     text: "Button"
     property bool setupComplete: true
     property bool setupIndicator: true
+    property string imageResource: "setupButtonImage.png"
 
     style: ButtonStyle {
         id: buttonStyle
 
-        property var __qgcpal: QGCPalette {
+        property var __qgcPal: QGCPalette {
             colorGroup: control.enabled ? QGCPalette.Active : QGCPalette.Disabled
         }
 
@@ -24,10 +25,7 @@ Button {
             id: innerRect
             readonly property real titleHeight: 20
 
-            border.color: control.checked ? "#eee333" : "#676767"
-            radius: 10
-
-            color: control.checked ? "#eee333" : "#343434"
+            color: control.pressed ? __qgcPal.buttonHighlight : (control.checked ? __qgcPal.buttonHighlight : __qgcPal.button)
 
             Text {
                 id: titleBar
@@ -40,7 +38,7 @@ Button {
 
                 text: control.text
                 font.pixelSize: 12
-                color: control.checked ? "black" : "white"
+                color: __qgcPal.buttonText
 
                 Rectangle {
                     id: setupIndicator
@@ -53,7 +51,7 @@ Button {
                     height: indicatorRadius * 2
 
                     radius: indicatorRadius
-                    color: control.setupIndicator ? (control.setupComplete ? "green" : "red") : innerRect.color
+                    color: control.setupIndicator ? (control.setupComplete ? "#00d932" : "red") : innerRect.color
                 }
             }
 
@@ -63,12 +61,11 @@ Button {
 
                 y: parent.titleHeight
 
-                color: __qgcpal.window
-                border.color: control.checked ? "#eee333" : "#676767"
+                color: __qgcPal.windowShade
 
                 Image {
                     id: buttonImage
-                    source: "setupButtonImage.png"
+                    source: control.imageResource
                     sourceSize: Qt.size(parent.width - 20, parent.height - 20)
                     anchors.horizontalCenter: parent.horizontalCenter
                     anchors.verticalCenter: parent.verticalCenter
@@ -79,7 +76,7 @@ Button {
                 ColorOverlay {
                     anchors.fill: buttonImage
                     source: buttonImage
-                    color: control.checked ? "#eee333" : "#58585a"
+                    color: control.pressed ? __qgcPal.buttonHighlight : (control.checked ? __qgcPal.buttonHighlight : __qgcPal.button)
                 }
             }
         }

src/VehicleSetup/FirmwareUpgrade.qml

@@ -95,9 +95,10 @@ Rectangle {
             width: parent.width
             height: 300
             readOnly: true
+            frameVisible: false
             style: TextAreaStyle {
                 textColor: qgcPal.windowText
-                backgroundColor: qgcPal.window
+                backgroundColor: qgcPal.windowShade
             }
         }
     }

src/VehicleSetup/SetupView.ui

@@ -14,6 +14,18 @@
    <string>Form</string>
   </property>
   <layout class="QHBoxLayout" name="horizontalLayout">
+      <property name="leftMargin">
+          <number>0</number>
+      </property>
+      <property name="topMargin">
+          <number>0</number>
+      </property>
+      <property name="rightMargin">
+          <number>0</number>
+      </property>
+      <property name="bottomMargin">
+          <number>0</number>
+      </property>
    <item>
     <widget class="QGCQuickWidget" name="buttonHolder">
      <property name="sizePolicy">

src/VehicleSetup/SetupViewButtons.qml

@@ -21,12 +21,11 @@ Rectangle {
         Column {
             anchors.fill: parent
 
-            spacing: 10
-
             SetupButton {
                 id: firmwareButton; objectName: "firmwareButton"
                 width: parent.width
                 text: "FIRMWARE"
+                imageResource: "FirmwareUpgradeIcon.png"
                 setupIndicator: false
                 exclusiveGroup: setupButtonGroup
                 onClicked: controller.firmwareButtonClicked()
@@ -40,12 +39,11 @@ Rectangle {
         Column {
             anchors.fill: parent
 
-            spacing: 10
-
             SetupButton {
                 id: summaryButton; objectName: "summaryButton"
                 width: parent.width
                 text: "SUMMARY"
+                imageResource: "VehicleSummaryIcon.png"
                 setupIndicator: false
                 exclusiveGroup: setupButtonGroup
                 onClicked: controller.summaryButtonClicked()
@@ -55,6 +53,7 @@ Rectangle {
                 id: firmwareButton; objectName: "firmwareButton"
                 width: parent.width
                 text: "FIRMWARE"
+                imageResource: "FirmwareUpgradeIcon.png"
                 setupIndicator: false
                 exclusiveGroup: setupButtonGroup
                 onClicked: controller.firmwareButtonClicked()
@@ -66,6 +65,7 @@ Rectangle {
                 SetupButton {
                     width: parent.width
                     text: modelData.name.toUpperCase()
+                    imageResource: modelData.iconResource
                     setupComplete: modelData.setupComplete
                     exclusiveGroup: setupButtonGroup
                     onClicked: controller.setupButtonClicked(modelData)

src/VehicleSetup/VehicleComponent.h

@@ -47,7 +47,7 @@ class VehicleComponent : public QObject
     Q_PROPERTY(bool requiresSetup READ requiresSetup CONSTANT)
     Q_PROPERTY(bool setupComplete READ setupComplete STORED false NOTIFY setupCompleteChanged)
     Q_PROPERTY(QString setupStateDescription READ setupStateDescription STORED false)
-    Q_PROPERTY(QString icon READ icon CONSTANT)
+    Q_PROPERTY(QString iconResource READ iconResource CONSTANT)
     Q_PROPERTY(QWidget* setupWidget READ setupWidget STORED false)
     Q_PROPERTY(QUrl summaryQmlSource READ summaryQmlSource CONSTANT);
     Q_PROPERTY(QString prerequisiteSetup READ prerequisiteSetup)
@@ -58,7 +58,7 @@ public:
     
     virtual QString name(void) const = 0;
     virtual QString description(void) const = 0;
-    virtual QString icon(void) const = 0;
+    virtual QString iconResource(void) const = 0;
     virtual bool requiresSetup(void) const = 0;
     virtual bool setupComplete(void) const = 0;
     virtual QString setupStateDescription(void) const = 0;

src/VehicleSetup/VehicleSummary.qml

@@ -9,101 +9,81 @@ Rectangle {
     width: 600
     height: 400
 
-    QGCPalette { id: palette; colorGroup: QGCPalette.Active }
+    property var qgcPal: QGCPalette { id: palette; colorGroup: QGCPalette.Active }
 
     id: topLevel
     objectName: "topLevel"
 
-    color: palette.window
-    Image {
-        anchors.fill: parent
-        fillMode: Image.PreserveAspectFit
-        smooth: true
-        source: autopilot.setupBackgroundImage;
-    }
-    Column {
-        anchors.margins: 20
-        anchors.fill: parent
-        spacing: 5
+    color: qgcPal.window
 
-        Flow {
-            width: parent.width;
-            height: parent.height
-            spacing: 5
-
-            Repeater {
-                model: autopilot.components
+    Flow {
+        anchors.fill: parent
+        spacing: 10
 
-                Button {
-                    width: 250
-                    height: 200
+        Repeater {
+            model: autopilot.components
 
-                    property var summaryQmlSource: modelData.summaryQmlSource
-                    text: modelData.name
-                    property bool setupComplete: modelData.setupComplete
+            Button {
+                width: 250
+                height: 200
 
-                    style: ButtonStyle {
-                        id: buttonStyle
-                        background: Rectangle {
-                            id: innerRect
-                            readonly property real titleHeight: 30
+                property var summaryQmlSource: modelData.summaryQmlSource
+                text: modelData.name
+                property bool setupComplete: modelData.setupComplete
 
-                            border.color: "#888"
-                            radius: 10
+                style: ButtonStyle {
+                    id: buttonStyle
+                    background: Rectangle {
+                        id: innerRect
+                        readonly property real titleHeight: 30
 
-                            color: "white"
-                            opacity: 0.8
+                        color: qgcPal.windowShadeDark
 
-                            Text {
-                                id: titleBar
+                        Text {
+                            id: titleBar
 
-                                width: parent.width
-                                height: parent.titleHeight
+                            width: parent.width
+                            height: parent.titleHeight
 
-                                verticalAlignment: TextEdit.AlignVCenter
-                                horizontalAlignment: TextEdit.AlignHCenter
+                            verticalAlignment: TextEdit.AlignVCenter
+                            horizontalAlignment: TextEdit.AlignHCenter
 
-                                text: control.text
-                                font.pixelSize: 12
+                            text: control.text.toUpperCase()
+                            color: qgcPal.buttonText
+                            font.pixelSize: 12
 
-                                Rectangle {
-                                    id: setupIndicator
+                            Rectangle {
+                                id: setupIndicator
 
-                                    property bool setupComplete: true
-                                    readonly property real indicatorRadius: 6
+                                property bool setupComplete: true
+                                readonly property real indicatorRadius: 6
 
-                                    x: parent.width - (indicatorRadius * 2) - 5
-                                    y: (parent.height - (indicatorRadius * 2)) / 2
-                                    width: indicatorRadius * 2
-                                    height: indicatorRadius * 2
+                                x: parent.width - (indicatorRadius * 2) - 5
+                                y: (parent.height - (indicatorRadius * 2)) / 2
+                                width: indicatorRadius * 2
+                                height: indicatorRadius * 2
 
-                                    radius: indicatorRadius
-                                    color: control.setupComplete ? "green" : "red"
-                                }
+                                radius: indicatorRadius
+                                color: control.setupComplete ? "#00d932" : "red"
                             }
+                        }
 
-                            Rectangle {
-                                width: parent.width
-                                height: parent.height - parent.titleHeight
-
-                                y: parent.titleHeight
+                        Rectangle {
+                            width: parent.width
+                            height: parent.height - parent.titleHeight
 
-                                border.color: "#888"
+                            y: parent.titleHeight
 
-                                gradient: Gradient {
-                                    GradientStop { position: 0; color: "#ffffff" }
-                                    GradientStop { position: 1; color: "#000000" }
-                                }
+                            color: qgcPal.windowShade
 
-                                Loader {
-                                    anchors.fill: parent
-                                    source: summaryQmlSource
-                                }
+                            Loader {
+                                anchors.fill: parent
+                                source: summaryQmlSource
                             }
                         }
-
-                    label: Item {}
                     }
+
+                label: Item {}
                 }
             }
         }