New set of Qml Controls

Controls respect QGCPalette settings. Also added test window.

qgroundcontrol.pro

@@ -208,8 +208,6 @@ ReleaseBuild {
     }
 }
 
-QML_IMPORT_PATH = $$BASEDIR/qml
-
 # qextserialport should not be used by general QGroundControl code. Use QSerialPort instead. This is only
 # here to support special case Firmware Upgrade code.
 include(libs/qextserialport/src/qextserialport.pri)
@@ -681,7 +679,8 @@ HEADERS += \
     src/qgcunittest/MavlinkLogTest.h \
     src/FactSystem/FactSystemTestBase.h \
     src/FactSystem/FactSystemTestPX4.h \
-    src/FactSystem/FactSystemTestGeneric.h
+    src/FactSystem/FactSystemTestGeneric.h \
+    src/QmlControls/QmlTestWidget.h \
 
 SOURCES += \
     src/qgcunittest/UnitTest.cc \
@@ -705,7 +704,9 @@ SOURCES += \
     src/qgcunittest/MavlinkLogTest.cc \
     src/FactSystem/FactSystemTestBase.cc \
     src/FactSystem/FactSystemTestPX4.cc \
-    src/FactSystem/FactSystemTestGeneric.cc
+    src/FactSystem/FactSystemTestGeneric.cc \
+    src/QmlControls/QmlTestWidget.cc \
+
 }
 
 #

qgroundcontrol.qrc

@@ -239,20 +239,26 @@
     <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">qml/QGroundControl/FactControls/qmldir</file>
-        <file alias="QGroundControl/FactControls/FactLabel.qml">qml/QGroundControl/FactControls/FactLabel.qml</file>
-        <file alias="QGroundControl/FactControls/FactTextField.qml">qml/QGroundControl/FactControls/FactTextField.qml</file>
-        <file alias="QGroundControl/FactControls/FactCheckBox.qml">qml/QGroundControl/FactControls/FactCheckBox.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/Controls/qmldir">qml/QGroundControl/Controls/qmldir</file>
-        <file alias="QGroundControl/Controls/SetupButton.qml">qml/QGroundControl/Controls/SetupButton.qml</file>
+        <file alias="QGroundControl/Controls/qmldir">src/QmlControls/qmldir</file>
+        <file alias="QGroundControl/Controls/SetupButton.qml">src/QmlControls/SetupButton.qml</file>
+        <file alias="QGroundControl/Controls/QGCButton.qml">src/QmlControls/QGCButton.qml</file>
+        <file alias="QGroundControl/Controls/QGCRadioButton.qml">src/QmlControls/QGCRadioButton.qml</file>
+        <file alias="QGroundControl/Controls/QGCCheckBox.qml">src/QmlControls/QGCCheckBox.qml</file>
+        <file alias="QGroundControl/Controls/QGCLabel.qml">src/QmlControls/QGCLabel.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>
 

src/QGCPalette.cc

@@ -49,13 +49,13 @@ QColor QGCPalette::_button[QGCPalette::_cThemes][QGCPalette::_cColorGroups] = {
 };
 
 QColor QGCPalette::_buttonText[QGCPalette::_cThemes][QGCPalette::_cColorGroups] = {
-    { QColor(0, 0, 0), QColor(0xFF, 0xFF, 0xFF), QColor(0xFF, 0xFF, 0xFF) },
-    { QColor(0, 0, 0), QColor(0xFF, 0xFF, 0xFF), QColor(0xFF, 0xFF, 0xFF) },
+    { QColor(0x2c, 0x2c, 0x2c), QColor(0xFF, 0xFF, 0xFF), QColor(0xFF, 0xFF, 0xFF) },
+    { QColor(0x2c, 0x2c, 0x2c), QColor(0xFF, 0xFF, 0xFF), QColor(0xFF, 0xFF, 0xFF) },
 };
 
 QColor QGCPalette::_text[QGCPalette::_cThemes][QGCPalette::_cColorGroups] = {
-    { QColor(0, 0, 0), QColor(0, 0, 0), QColor(0, 0, 0) },
-    { QColor(0xFF, 0xFF, 0xFF), QColor(0xFF, 0xFF, 0xFF), QColor(0xFF, 0xFF, 0xFF) }
+    { 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::_window[QGCPalette::_cThemes][QGCPalette::_cColorGroups] = {
@@ -64,8 +64,13 @@ QColor QGCPalette::_window[QGCPalette::_cThemes][QGCPalette::_cColorGroups] = {
 };
 
 QColor QGCPalette::_windowText[QGCPalette::_cThemes][QGCPalette::_cColorGroups] = {
-    { QColor(0, 0, 0), QColor(0, 0, 0), QColor(0, 0, 0) },
-    { QColor(0xFF, 0xFF, 0xFF), QColor(0xFF, 0xFF, 0xFF), QColor(0xFF, 0xFF, 0xFF) }
+    { 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) },
 };
 
 QGCPalette::QGCPalette(QObject* parent) :

src/QGCPalette.h

@@ -50,6 +50,9 @@ class QGCPalette : public QObject
     Q_PROPERTY(QColor text READ text NOTIFY paletteChanged)
     Q_PROPERTY(QColor window READ window NOTIFY paletteChanged)
     Q_PROPERTY(QColor windowText READ windowText NOTIFY paletteChanged)
+    
+    /// The buttonHighlight color identifies the button background color when hovered or selected.
+    Q_PROPERTY(QColor buttonHighlight READ buttonHighlight NOTIFY paletteChanged)
 
 public:
     enum ColorGroup {
@@ -76,6 +79,7 @@ public:
     QColor text(void) const { return _text[_theme][_colorGroup]; }
     QColor window(void) const { return _window[_theme][_colorGroup]; }
     QColor windowText(void) const { return _windowText[_theme][_colorGroup]; }
+    QColor buttonHighlight(void) const { return _buttonHighlight[_theme][_colorGroup]; }
     
     static Theme globalTheme(void) { return _theme; }
     static void setGlobalTheme(Theme newTheme);
@@ -97,6 +101,7 @@ private:
     static QColor _text[_cThemes][_cColorGroups];
     static QColor _window[_cThemes][_cColorGroups];
     static QColor _windowText[_cThemes][_cColorGroups];
+    static QColor _buttonHighlight[_cThemes][_cColorGroups];
     
     void _themeChanged(void);
     

src/QmlControls/QGCButton.qml

+import QtQuick 2.2
+import QtQuick.Controls 1.2
+import QtQuick.Controls.Styles 1.2
+
+import QGroundControl.Palette 1.0
+
+Button {
+    property var __qgcPal: QGCPalette { colorGroup: enabled ? QGCPalette.Active : QGCPalette.Disabled }
+
+    style: ButtonStyle {
+            background: Rectangle {
+                implicitWidth: 100
+                implicitHeight: 25
+                color: control.hovered ? control.__qgcPal.buttonHighlight : control.__qgcPal.button
+            }
+
+            label: Text {
+                width: parent.width
+                height: parent.height
+
+                verticalAlignment: TextEdit.AlignVCenter
+                horizontalAlignment: TextEdit.AlignHCenter
+
+                text: control.text
+                color: control.__qgcPal.buttonText
+            }
+        }
+}

src/QmlControls/QGCCheckBox.qml

+import QtQuick 2.2
+import QtQuick.Controls 1.2
+import QtQuick.Controls.Styles 1.2
+
+import QGroundControl.Palette 1.0
+
+CheckBox {
+    property var __qgcPal: QGCPalette { colorGroup: enabled ? QGCPalette.Active : QGCPalette.Disabled }
+
+    style: CheckBoxStyle {
+        label: Item {
+            implicitWidth: text.implicitWidth + 2
+            implicitHeight: text.implicitHeight
+            baselineOffset: text.baselineOffset
+            Rectangle {
+                anchors.fill: text
+                anchors.margins: -1
+                anchors.leftMargin: -3
+                anchors.rightMargin: -3
+                visible: control.activeFocus
+                height: 6
+                radius: 3
+                color: "#224f9fef"
+                border.color: "#47b"
+                opacity: 0.6
+            }
+            Text {
+                id: text
+                text: control.text
+                anchors.centerIn: parent
+                color: control.__qgcPal.windowText
+            }
+        }
+    }
+}

src/QmlControls/QGCLabel.qml

+import QtQuick 2.2
+import QtQuick.Controls 1.2
+import QtQuick.Controls.Styles 1.2
+
+import QGroundControl.Palette 1.0
+
+Text {
+    property var __palette: QGCPalette { colorGroup: enabled ? QGCPalette.Active : QGCPalette.Disabled }
+    property bool enabled: true
+
+    color: __palette.windowText
+}

src/QmlControls/QGCRadioButton.qml

+import QtQuick 2.2
+import QtQuick.Controls 1.2
+import QtQuick.Controls.Styles 1.2
+
+import QGroundControl.Palette 1.0
+
+RadioButton {
+    property var __qgcPal: QGCPalette { colorGroup: enabled ? QGCPalette.Active : QGCPalette.Disabled }
+
+    style: RadioButtonStyle {
+        label: Item {
+            implicitWidth: text.implicitWidth + 2
+            implicitHeight: text.implicitHeight
+            baselineOffset: text.y + text.baselineOffset
+            Rectangle {
+                anchors.fill: text
+                anchors.margins: -1
+                anchors.leftMargin: -3
+                anchors.rightMargin: -3
+                visible: control.activeFocus
+                height: 6
+                radius: 3
+                color: "#224f9fef"
+                border.color: "#47b"
+                opacity: 0.6
+            }
+            Text {
+                id: text
+                text: control.text
+                anchors.centerIn: parent
+                color: control.__qgcPal.windowText
+            }
+        }
+    }
+}

src/QmlControls/QmlTestWidget.cc

+/*=====================================================================
+ 
+ QGroundControl Open Source Ground Control Station
+ 
+ (c) 2009 - 2014 QGROUNDCONTROL PROJECT <http://www.qgroundcontrol.org>
+ 
+ This file is part of the QGROUNDCONTROL project
+ 
+ QGROUNDCONTROL is free software: you can redistribute it and/or modify
+ it under the terms of the GNU General Public License as published by
+ the Free Software Foundation, either version 3 of the License, or
+ (at your option) any later version.
+ 
+ QGROUNDCONTROL is distributed in the hope that it will be useful,
+ but WITHOUT ANY WARRANTY; without even the implied warranty of
+ MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ GNU General Public License for more details.
+ 
+ You should have received a copy of the GNU General Public License
+ along with QGROUNDCONTROL. If not, see <http://www.gnu.org/licenses/>.
+ 
+ ======================================================================*/
+
+/// @file
+///     @author Don Gagne <don@thegagnes.com>
+
+#include "QmlTestWidget.h"
+
+QmlTestWidget::QmlTestWidget(void)
+{
+    setAttribute(Qt::WA_DeleteOnClose);
+    resize(500, 500);
+    setVisible(true);
+    setSource(QUrl::fromUserInput("qrc:qml/QmlTest.qml"));
+}

src/QmlControls/QmlTestWidget.h

+/*=====================================================================
+ 
+ QGroundControl Open Source Ground Control Station
+ 
+ (c) 2009 - 2014 QGROUNDCONTROL PROJECT <http://www.qgroundcontrol.org>
+ 
+ This file is part of the QGROUNDCONTROL project
+ 
+ QGROUNDCONTROL is free software: you can redistribute it and/or modify
+ it under the terms of the GNU General Public License as published by
+ the Free Software Foundation, either version 3 of the License, or
+ (at your option) any later version.
+ 
+ QGROUNDCONTROL is distributed in the hope that it will be useful,
+ but WITHOUT ANY WARRANTY; without even the implied warranty of
+ MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ GNU General Public License for more details.
+ 
+ You should have received a copy of the GNU General Public License
+ along with QGROUNDCONTROL. If not, see <http://www.gnu.org/licenses/>.
+ 
+ ======================================================================*/
+
+#ifndef QmlTestWidget_h
+#define QmlTestWidget_h
+
+/// @file
+///     @author Don Gagne <don@thegagnes.com>
+
+#include "QGCQmlWidgetHolder.h"
+
+/// This is used to create widgets which are implemented in QML.
+
+class QmlTestWidget : public QGCQmlWidgetHolder
+{
+    Q_OBJECT
+
+public:
+    QmlTestWidget(void);
+};
+
+#endif

src/QmlControls/qmldir

+Module QGroundControl.Controls
+SetupButton 1.0 SetupButton.qml
+QGCLabel 1.0 QGCLabel.qml
+QGCButton 1.0 QGCButton.qml
+QGCRadioButton 1.0 QGCRadioButton.qml
+QGCCheckBox 1.0 QGCCheckBox.qml

src/test.qml

 import QtQuick 2.2
 import QtQuick.Controls 1.2
 import QtQuick.Controls.Styles 1.2
+
 import QGroundControl.FactControls 1.0
+import QGroundControl.Palette 1.0
 
 
 Rectangle {