Newer
Older
import QtQuick 2.11
import QtQuick.Controls 2.4
import QtQuick.Controls.Styles 1.4
Gus Grubba
committed
import QtQuick.Layouts 1.11
import QGroundControl.Palette 1.0
import QGroundControl.Controls 1.0
import QGroundControl.ScreenTools 1.0
Gus Grubba
committed
anchors.fill: parent
anchors.margins: ScreenTools.defaultFontPixelWidth
color: "white"
property var palette: QGCPalette { colorGroupEnabled: true }
property var enabledPalette: QGCPalette { colorGroupEnabled: true }
property var disabledPalette: QGCPalette { colorGroupEnabled: false }
function exportPaletteColors(pal) {
var objToExport = {}
for(var clrName in pal) {
if(pal[clrName].r !== undefined) {
objToExport[clrName] = pal[clrName].toString();
}
}
return objToExport;
}
function fillPalette(pal, colorsObj) {
for(var clrName in colorsObj) {
pal[clrName] = colorsObj[clrName];
}
}
function exportTheme() {
var themeObj = {"light": {}, "dark":{}}
var oldTheme = palette.globalTheme;
palette.globalTheme = QGCPalette.Light
palette.colorGroupEnabled = true
themeObj.light["enabled"] = exportPaletteColors(palette);
palette.colorGroupEnabled = false
themeObj.light["disabled"] = exportPaletteColors(palette);
palette.globalTheme = QGCPalette.Dark
palette.colorGroupEnabled = true
themeObj.dark["enabled"] = exportPaletteColors(palette);
palette.colorGroupEnabled = false
themeObj.dark["disabled"] = exportPaletteColors(palette);
palette.globalTheme = oldTheme;
palette.colorGroupEnabled = true;
var jsonString = JSON.stringify(themeObj, null, 4);
themeImportExportEdit.text = jsonString
}
function exportThemeCPP() {
var palToExport = ""
for(var i = 0; i < palette.colors.length; i++) {
var cs = palette.colors[i]
var csc = cs + 'Colors'
palToExport += 'DECLARE_QGC_COLOR(' + cs + ', \"' + palette[csc][1] + '\", \"' + palette[csc][0] + '\", \"' + palette[csc][3] + '\", \"' + palette[csc][2] + '\")\n'
}
themeImportExportEdit.text = palToExport
}
function exportThemePlugin() {
var palToExport = ""
for(var i = 0; i < palette.colors.length; i++) {
var cs = palette.colors[i]
var csc = cs + 'Colors'
if(i > 0) {
palToExport += '\nelse '
}
palToExport +=
'if (colorName == QStringLiteral(\"' + cs + '\")) {\n' +
' colorInfo[QGCPalette::Dark][QGCPalette::ColorGroupEnabled] = QColor(\"' + palette[csc][2] + '\");\n' +
' colorInfo[QGCPalette::Dark][QGCPalette::ColorGroupDisabled] = QColor(\"' + palette[csc][3] + '\");\n' +
' colorInfo[QGCPalette::Light][QGCPalette::ColorGroupEnabled] = QColor(\"' + palette[csc][0] + '\");\n' +
' colorInfo[QGCPalette::Light][QGCPalette::ColorGroupDisabled] = QColor(\"' + palette[csc][1] + '\");\n' +
'}'
}
themeImportExportEdit.text = palToExport
}
function importTheme(jsonStr) {
var jsonObj = JSON.parse(jsonStr)
var themeObj = {"light": {}, "dark":{}}
var oldTheme = palette.globalTheme;
palette.globalTheme = QGCPalette.Light
palette.colorGroupEnabled = true
fillPalette(palette, jsonObj.light.enabled)
palette.colorGroupEnabled = false
fillPalette(palette, jsonObj.light.disabled);
palette.globalTheme = QGCPalette.Dark
palette.colorGroupEnabled = true
fillPalette(palette, jsonObj.dark.enabled);
palette.colorGroupEnabled = false
fillPalette(palette, jsonObj.dark.disabled);
palette.globalTheme = oldTheme;
palette.colorGroupEnabled = true;
paletteImportExportPopup.close()
}
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
//-------------------------------------------------------------------------
//-- Export/Import
Popup {
id: paletteImportExportPopup
width: impCol.width + (ScreenTools.defaultFontPixelWidth * 4)
height: impCol.height + (ScreenTools.defaultFontPixelHeight * 2)
modal: true
focus: true
parent: Overlay.overlay
closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutside
x: Math.round((mainWindow.width - width) * 0.5)
y: Math.round((mainWindow.height - height) * 0.5)
onVisibleChanged: {
if(visible) {
exportTheme()
_jsonButton.checked = true
}
}
background: Rectangle {
anchors.fill: parent
color: palette.window
radius: ScreenTools.defaultFontPixelHeight * 0.5
border.width: 1
border.color: palette.text
}
Column {
id: impCol
spacing: ScreenTools.defaultFontPixelHeight
anchors.centerIn: parent
Row {
id: exportFormats
spacing: ScreenTools.defaultFontPixelWidth * 2
anchors.horizontalCenter: parent.horizontalCenter
QGCRadioButton {
id: _jsonButton
text: "Json"
onClicked: exportTheme()
}
QGCRadioButton {
text: "QGC"
onClicked: exportThemeCPP()
QGCRadioButton {
text: "Custom Plugin"
onClicked: exportThemePlugin()
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
}
Rectangle {
width: flick.width + (ScreenTools.defaultFontPixelWidth * 2)
height: flick.height + (ScreenTools.defaultFontPixelHeight * 2)
color: "white"
anchors.margins: 10
Flickable {
id: flick
clip: true
width: mainWindow.width * 0.666
height: mainWindow.height * 0.666
contentWidth: themeImportExportEdit.paintedWidth
contentHeight: themeImportExportEdit.paintedHeight
anchors.centerIn: parent
flickableDirection: Flickable.VerticalFlick
function ensureVisible(r)
{
if (contentX >= r.x)
contentX = r.x;
else if (contentX+width <= r.x+r.width)
contentX = r.x+r.width-width;
if (contentY >= r.y)
contentY = r.y;
else if (contentY+height <= r.y+r.height)
contentY = r.y+r.height-height;
}
TextEdit {
id: themeImportExportEdit
width: flick.width
focus: true
font.family: ScreenTools.fixedFontFamily
font.pointSize: ScreenTools.defaultFontPointSize
onCursorRectangleChanged: flick.ensureVisible(cursorRectangle)
}
}
}
Row {
spacing: ScreenTools.defaultFontPixelWidth * 2
anchors.horizontalCenter: parent.horizontalCenter
QGCButton {
id: importButton
text: "Import (Json Only)"
enabled: themeImportExportEdit.text[0] === "{" && _jsonButton.checked
onClicked: {
importTheme(themeImportExportEdit.text);
QGCButton {
text: "Close"
onClicked: {
paletteImportExportPopup.close()
}
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
//-------------------------------------------------------------------------
//-- Header
Rectangle {
id: _header
width: parent.width
height: themeChoice.height * 2
color: palette.window
anchors.top: parent.top
Row {
id: themeChoice
spacing: 20
anchors.centerIn: parent
QGCLabel {
text: qsTr("Window Color")
anchors.verticalCenter: parent.verticalCenter
}
QGCButton {
text: qsTr("Import/Export")
anchors.verticalCenter: parent.verticalCenter
onClicked: paletteImportExportPopup.open()
}
Row {
spacing: 20
anchors.verticalCenter: parent.verticalCenter
QGCRadioButton {
text: qsTr("Light")
checked: _root.palette.globalTheme === QGCPalette.Light
onClicked: {
_root.palette.globalTheme = QGCPalette.Light
Gus Grubba
committed
}
}
QGCRadioButton {
text: qsTr("Dark")
checked: _root.palette.globalTheme === QGCPalette.Dark
onClicked: {
_root.palette.globalTheme = QGCPalette.Dark
}
}
//-------------------------------------------------------------------------
//-- Main Contents
QGCFlickable {
anchors.top: _header.bottom
anchors.bottom: parent.bottom
width: parent.width
contentWidth: _rootCol.width
contentHeight: _rootCol.height
clip: true
Column {
id: _rootCol
Gus Grubba
committed
Row {
spacing: 30
// Edit theme GroupBox
GroupBox {
title: "Preview and edit theme"
Column {
id: editRoot
Gus Grubba
committed
spacing: 5
width: editRoot.cellSize.width * 2
height: editRoot.cellSize.height
text: ""
}
Text {
width: editRoot.cellSize.width; height: editRoot.cellSize.height
horizontalAlignment: Text.AlignLeft
text: qsTr("Enabled")
}
Text {
width: editRoot.cellSize.width; height: editRoot.cellSize.height
color: "black"
horizontalAlignment: Text.AlignHCenter
text: qsTr("Value")
}
Text {
width: editRoot.cellSize.width; height: editRoot.cellSize.height
color: "black"
horizontalAlignment: Text.AlignHCenter
text: qsTr("Disabled")
}
Text {
width: editRoot.cellSize.width; height: editRoot.cellSize.height
color: "black"
horizontalAlignment: Text.AlignHCenter
text: qsTr("Value")
// Populate the model with all color names in the global palette
Component.onCompleted: {
for(var colorNameStr in palette) {
if(palette[colorNameStr].r !== undefined) {
paletteColorList.append({ colorName: colorNameStr });
}
}
Gus Grubba
committed
}
Gus Grubba
committed
}
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
// Reproduce all the models
Repeater {
model: paletteColorList
delegate: Row {
spacing: 5
Text {
width: editRoot.cellSize.width * 2
height: editRoot.cellSize.height
horizontalAlignment: Text.AlignRight
verticalAlignment: Text.AlignVCenter
color: "black"
text: colorName
}
ClickableColor {
id: enabledColorPicker
color: enabledPalette[colorName]
onColorSelected: enabledPalette[colorName] = color
}
TextField {
id: enabledTextField
width: editRoot.cellSize.width; height: editRoot.cellSize.height
inputMask: "\\#>HHHHHHhh;"
horizontalAlignment: Text.AlignLeft
text: enabledPalette[colorName]
onEditingFinished: enabledPalette[colorName] = text
}
ClickableColor {
id: disabledColorPicker
color: disabledPalette[colorName]
onColorSelected: disabledPalette[colorName] = color
}
TextField {
width: editRoot.cellSize.width; height: editRoot.cellSize.height
inputMask: enabledTextField.inputMask
horizontalAlignment: Text.AlignLeft
text: disabledPalette[colorName]
onEditingFinished: disabledPalette[colorName] = text
}
}
Gus Grubba
committed
}
} // Column
} // GroupBox { title: "Preview and edit theme"
Gus Grubba
committed
// QGC controls preview
Gus Grubba
committed
Column {
id: ctlPrevColumn
property real _colWidth: ScreenTools.defaultFontPointSize * 18
property real _height: _colWidth*0.15
Gus Grubba
committed
property color _bkColor: qgcPal.window
spacing: 10
width: previewGrid.width
Grid {
id: previewGrid
columns: 3
spacing: 10
// Header row
Text {
Gus Grubba
committed
height: ctlPrevColumn._height
color: "black"
horizontalAlignment: Text.AlignHCenter
text: qsTr("QGC name")
}
Text {
Gus Grubba
committed
height: ctlPrevColumn._height
color: "black"
horizontalAlignment: Text.AlignHCenter
text: qsTr("Enabled")
}
Text {
Gus Grubba
committed
height: ctlPrevColumn._height
color: "black"
horizontalAlignment: Text.AlignHCenter
text: qsTr("Disabled")
}
// QGCLabel
Loader {
sourceComponent: ctlRowHeader
property string text: "QGCLabel"
}
Rectangle {
Gus Grubba
committed
height: ctlPrevColumn._height
color: ctlPrevColumn._bkColor
QGCLabel {
anchors.fill: parent
anchors.margins: 5
text: qsTr("Label")
}
}
Rectangle {
Gus Grubba
committed
height: ctlPrevColumn._height
color: ctlPrevColumn._bkColor
QGCLabel {
anchors.fill: parent
anchors.margins: 5
text: qsTr("Label")
enabled: false
}
}
// QGCButton
Loader {
sourceComponent: ctlRowHeader
property string text: "QGCButton"
}
QGCButton {
Gus Grubba
committed
height: ctlPrevColumn._height
text: qsTr("Button")
}
QGCButton {
Gus Grubba
committed
height: ctlPrevColumn._height
text: qsTr("Button")
enabled: false
}
// QGCButton - primary
Loader {
sourceComponent: ctlRowHeader
property string text: "QGCButton(primary)"
}
QGCButton {
Gus Grubba
committed
height: ctlPrevColumn._height
primary: true
text: qsTr("Button")
}
QGCButton {
Gus Grubba
committed
height: ctlPrevColumn._height
Gus Grubba
committed
primary: true
enabled: false
}
// QGCHoverButton
Loader {
sourceComponent: ctlRowHeader
property string text: "QGCHoverButton"
}
QGCHoverButton {
Gus Grubba
committed
height: ctlPrevColumn._height * 2
Gus Grubba
committed
radius: ScreenTools.defaultFontPointSize
imageSource: "/qmlimages/Gears.svg"
}
QGCHoverButton {
Gus Grubba
committed
height: ctlPrevColumn._height * 2
Gus Grubba
committed
radius: ScreenTools.defaultFontPointSize
imageSource: "/qmlimages/Gears.svg"
enabled: false
}
// QGCButton - menu
Loader {
sourceComponent: ctlRowHeader
property string text: "QGCButton(menu)"
}
Menu {
id: buttonMenu
MenuItem {
text: qsTr("Item 1")
}
MenuItem {
text: qsTr("Item 2")
}
MenuItem {
text: qsTr("Item 3")
}
}
QGCButton {
Gus Grubba
committed
height: ctlPrevColumn._height
text: qsTr("Button")
Gus Grubba
committed
}
QGCButton {
Gus Grubba
committed
height: ctlPrevColumn._height
text: qsTr("Button")
enabled: false
Gus Grubba
committed
}
// QGCRadioButton
Loader {
sourceComponent: ctlRowHeader
property string text: "QGCRadioButton"
}
Rectangle {
Gus Grubba
committed
height: ctlPrevColumn._height
color: ctlPrevColumn._bkColor
QGCRadioButton {
anchors.fill: parent
anchors.margins: 5
text: qsTr("Radio")
}
}
Rectangle {
Gus Grubba
committed
height: ctlPrevColumn._height
color: ctlPrevColumn._bkColor
QGCRadioButton {
anchors.fill: parent
anchors.margins: 5
text: qsTr("Radio")
enabled: false
}
}
// QGCCheckBox
Loader {
sourceComponent: ctlRowHeader
property string text: "QGCCheckBox"
}
Rectangle {
Gus Grubba
committed
height: ctlPrevColumn._height
color: ctlPrevColumn._bkColor
QGCCheckBox {
anchors.fill: parent
anchors.margins: 5
text: qsTr("Check Box")
}
}
Rectangle {
Gus Grubba
committed
height: ctlPrevColumn._height
color: ctlPrevColumn._bkColor
QGCCheckBox {
anchors.fill: parent
anchors.margins: 5
text: qsTr("Check Box")
enabled: false
}
}
// QGCTextField
Loader {
sourceComponent: ctlRowHeader
property string text: "QGCTextField"
}
QGCTextField {
Gus Grubba
committed
height: ctlPrevColumn._height
text: "QGCTextField"
}
QGCTextField {
Gus Grubba
committed
height: ctlPrevColumn._height
text: "QGCTextField"
enabled: false
}
// QGCComboBox
Loader {
sourceComponent: ctlRowHeader
property string text: "QGCComboBox"
}
QGCComboBox {
Gus Grubba
committed
height: ctlPrevColumn._height
model: [ qsTr("Item 1"), qsTr("Item 2"), qsTr("Item 3") ]
}
QGCComboBox {
Gus Grubba
committed
height: ctlPrevColumn._height
model: [ qsTr("Item 1"), qsTr("Item 2"), qsTr("Item 3") ]
enabled: false
}
// SubMenuButton
Loader {
sourceComponent: ctlRowHeader
property string text: "SubMenuButton"
}
SubMenuButton {
width: ctlPrevColumn._colWidth
height: ctlPrevColumn._colWidth/3
Gus Grubba
committed
text: qsTr("SUB MENU")
}
SubMenuButton {
width: ctlPrevColumn._colWidth
height: ctlPrevColumn._colWidth/3
Gus Grubba
committed
text: qsTr("SUB MENU")
enabled: false
}
}
Rectangle {
width: previewGrid.width
height: 60
radius: 3
color: palette.alertBackground
border.color: palette.alertBorder
Gus Grubba
committed
anchors.horizontalCenter: parent.horizontalCenter
Label {
text: "Alert Message"
Gus Grubba
committed
anchors.centerIn: parent
}
}
} // Column
} // GroupBox { title: "Controls preview"
Gus Grubba
committed
Item{
height: 10;
width: 1;
Gus Grubba
committed
Row {
spacing: 10
anchors.horizontalCenter: parent.horizontalCenter
Loader {
property color backgroundColor: qgcPal.window
sourceComponent: arbBox
}
Loader {
property color backgroundColor: qgcPal.windowShade
sourceComponent: arbBox
}
Loader {
property color backgroundColor: qgcPal.windowShadeDark
sourceComponent: arbBox
}
Gus Grubba
committed
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
Component {
id: ctlRowHeader
Rectangle {
width: ctlPrevColumn._colWidth
height: ctlPrevColumn._height
color: "white"
Text {
color: "black"
text: parent.parent.text
anchors.fill: parent
horizontalAlignment: Text.AlignRight
verticalAlignment: Text.AlignVCenter
}
}
}
Component {
id: arbBox
Rectangle {
width: arbGrid.width * 1.5
height: arbGrid.height * 1.5
color: backgroundColor
border.color: qgcPal.text
border.width: 1
anchors.horizontalCenter: parent.horizontalCenter
GridLayout {
id: arbGrid
columns: 4
rowSpacing: 10
anchors.centerIn: parent
QGCColoredImage {
color: qgcPal.colorGreen
width: ScreenTools.defaultFontPixelWidth * 2
height: width
sourceSize.height: width
mipmap: true
fillMode: Image.PreserveAspectFit
source: "/qmlimages/Gears.svg"
}
Label { text: "colorGreen"; color: qgcPal.colorGreen; }
QGCColoredImage {
color: qgcPal.colorOrange
width: ScreenTools.defaultFontPixelWidth * 2
height: width
sourceSize.height: width
mipmap: true
fillMode: Image.PreserveAspectFit
source: "/qmlimages/Gears.svg"
}
Label { text: "colorOrange"; color: qgcPal.colorOrange; }
QGCColoredImage {
color: qgcPal.colorRed
width: ScreenTools.defaultFontPixelWidth * 2
height: width
sourceSize.height: width
mipmap: true
fillMode: Image.PreserveAspectFit
source: "/qmlimages/Gears.svg"
}
Label { text: "colorRed"; color: qgcPal.colorRed; }
QGCColoredImage {
color: qgcPal.colorGrey
width: ScreenTools.defaultFontPixelWidth * 2
height: width
sourceSize.height: width
mipmap: true
fillMode: Image.PreserveAspectFit
source: "/qmlimages/Gears.svg"
}
Label { text: "colorGrey"; color: qgcPal.colorGrey; }
QGCColoredImage {
color: qgcPal.colorBlue
width: ScreenTools.defaultFontPixelWidth * 2
height: width
sourceSize.height: width
mipmap: true
fillMode: Image.PreserveAspectFit
source: "/qmlimages/Gears.svg"
}
Label { text: "colorBlue"; color: qgcPal.colorBlue; }
}
}
}