QGroundControl
Ground Control Station for MAVLink Drones
Loading...
Searching...
No Matches
QmlTest.qml
Go to the documentation of this file.
1import QtQuick
2import QtQuick.Controls
3import QtQuick.Layouts
4
5import QGroundControl
6import QGroundControl.Controls
7
8Rectangle {
9 id: _root
10 anchors.fill: parent
11 anchors.margins: ScreenTools.defaultFontPixelWidth
12 color: "white"
13
14 QGCPalette { id: qgcPal }
15
16 property var enabledPalette: QGCPalette { colorGroupEnabled: true }
17 property var disabledPalette: QGCPalette { colorGroupEnabled: false }
18
19 function exportPaletteColors(pal) {
20 var objToExport = {}
21 for(var clrName in pal) {
22 if(pal[clrName].r !== undefined) {
23 objToExport[clrName] = pal[clrName].toString();
24 }
25 }
26 return objToExport;
27 }
28
29 function fillPalette(pal, colorsObj) {
30 for(var clrName in colorsObj) {
31 pal[clrName] = colorsObj[clrName];
32 }
33 }
34
35 function exportTheme() {
36 var themeObj = {"light": {}, "dark":{}}
37 var oldTheme = qgcPal.globalTheme;
38
39 qgcPal.globalTheme = QGCPalette.Light
40 qgcPal.colorGroupEnabled = true
41 themeObj.light["enabled"] = exportPaletteColors(qgcPal);
42 qgcPal.colorGroupEnabled = false
43 themeObj.light["disabled"] = exportPaletteColors(qgcPal);
44 qgcPal.globalTheme = QGCPalette.Dark
45 qgcPal.colorGroupEnabled = true
46 themeObj.dark["enabled"] = exportPaletteColors(qgcPal);
47 qgcPal.colorGroupEnabled = false
48 themeObj.dark["disabled"] = exportPaletteColors(qgcPal);
49
50 qgcPal.globalTheme = oldTheme;
51 qgcPal.colorGroupEnabled = true;
52
53 var jsonString = JSON.stringify(themeObj, null, 4);
54
55 themeImportExportEdit.text = jsonString
56 }
57
58 function exportThemeCPP() {
59 var palToExport = ""
60 for(var i = 0; i < qgcPal.colors.length; i++) {
61 var cs = qgcPal.colors[i]
62 var csc = cs + 'Colors'
63 palToExport += 'DECLARE_QGC_COLOR(' + cs + ', \"' + qgcPal[csc][1] + '\", \"' + qgcPal[csc][0] + '\", \"' + qgcPal[csc][3] + '\", \"' + qgcPal[csc][2] + '\")\n'
64 }
65 themeImportExportEdit.text = palToExport
66 }
67
68 function exportThemePlugin() {
69 var palToExport = ""
70 for(var i = 0; i < qgcPal.colors.length; i++) {
71 var cs = qgcPal.colors[i]
72 var csc = cs + 'Colors'
73 if(i > 0) {
74 palToExport += '\nelse '
75 }
76 palToExport +=
77 'if (colorName == QStringLiteral(\"' + cs + '\")) {\n' +
78 ' colorInfo[QGCPalette::Dark][QGCPalette::ColorGroupEnabled] = QColor(\"' + qgcPal[csc][2] + '\");\n' +
79 ' colorInfo[QGCPalette::Dark][QGCPalette::ColorGroupDisabled] = QColor(\"' + qgcPal[csc][3] + '\");\n' +
80 ' colorInfo[QGCPalette::Light][QGCPalette::ColorGroupEnabled] = QColor(\"' + qgcPal[csc][0] + '\");\n' +
81 ' colorInfo[QGCPalette::Light][QGCPalette::ColorGroupDisabled] = QColor(\"' + qgcPal[csc][1] + '\");\n' +
82 '}'
83 }
84 themeImportExportEdit.text = palToExport
85 }
86
87 function importTheme(jsonStr) {
88 var jsonObj = JSON.parse(jsonStr)
89 var themeObj = {"light": {}, "dark":{}}
90 var oldTheme = qgcPal.globalTheme;
91
92 qgcPal.globalTheme = QGCPalette.Light
93 qgcPal.colorGroupEnabled = true
94 fillPalette(qgcPal, jsonObj.light.enabled)
95 qgcPal.colorGroupEnabled = false
96 fillPalette(qgcPal, jsonObj.light.disabled);
97 qgcPal.globalTheme = QGCPalette.Dark
98 qgcPal.colorGroupEnabled = true
99 fillPalette(qgcPal, jsonObj.dark.enabled);
100 qgcPal.colorGroupEnabled = false
101 fillPalette(qgcPal, jsonObj.dark.disabled);
102
103 qgcPal.globalTheme = oldTheme;
104 qgcPal.colorGroupEnabled = true;
105
106 paletteImportExportPopup.close()
107 }
108
109 //-------------------------------------------------------------------------
110 //-- Export/Import
111 Popup {
112 id: paletteImportExportPopup
113 width: impCol.width + (ScreenTools.defaultFontPixelWidth * 4)
114 height: impCol.height + (ScreenTools.defaultFontPixelHeight * 2)
115 modal: true
116 focus: true
117 parent: Overlay.overlay
118 closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutside
119 x: Math.round((mainWindow.width - width) * 0.5)
120 y: Math.round((mainWindow.height - height) * 0.5)
121 onVisibleChanged: {
122 if(visible) {
123 exportTheme()
124 _jsonButton.checked = true
125 }
126 }
127 background: Rectangle {
128 anchors.fill: parent
129 color: qgcPal.window
130 radius: ScreenTools.defaultFontPixelHeight * 0.5
131 border.width: 1
132 border.color: qgcPal.text
133 }
134 Column {
135 id: impCol
136 spacing: ScreenTools.defaultFontPixelHeight
137 anchors.centerIn: parent
138 Row {
139 id: exportFormats
140 spacing: ScreenTools.defaultFontPixelWidth * 2
141 anchors.horizontalCenter: parent.horizontalCenter
142 QGCRadioButton {
143 id: _jsonButton
144 text: "Json"
145 onClicked: exportTheme()
146 }
147 QGCRadioButton {
148 text: "QGC"
149 onClicked: exportThemeCPP()
150 }
151 QGCRadioButton {
152 text: "Custom Plugin"
153 onClicked: exportThemePlugin()
154 }
155 }
156 Rectangle {
157 width: flick.width + (ScreenTools.defaultFontPixelWidth * 2)
158 height: flick.height + (ScreenTools.defaultFontPixelHeight * 2)
159 color: "white"
160 anchors.margins: 10
161 Flickable {
162 id: flick
163 clip: true
164 width: mainWindow.width * 0.666
165 height: mainWindow.height * 0.666
166 contentWidth: themeImportExportEdit.paintedWidth
167 contentHeight: themeImportExportEdit.paintedHeight
168 anchors.centerIn: parent
169 flickableDirection: Flickable.VerticalFlick
170
171 function ensureVisible(r)
172 {
173 if (contentX >= r.x)
174 contentX = r.x;
175 else if (contentX+width <= r.x+r.width)
176 contentX = r.x+r.width-width;
177 if (contentY >= r.y)
178 contentY = r.y;
179 else if (contentY+height <= r.y+r.height)
180 contentY = r.y+r.height-height;
181 }
182
183 TextEdit {
184 id: themeImportExportEdit
185 width: flick.width
186 focus: true
187 font.family: ScreenTools.fixedFontFamily
188 font.pointSize: ScreenTools.defaultFontPointSize
189 onCursorRectangleChanged: flick.ensureVisible(cursorRectangle)
190 }
191 }
192 }
193 Row {
194 spacing: ScreenTools.defaultFontPixelWidth * 2
195 anchors.horizontalCenter: parent.horizontalCenter
196 QGCButton {
197 id: importButton
198 text: "Import (Json Only)"
199 enabled: themeImportExportEdit.text[0] === "{" && _jsonButton.checked
200 onClicked: {
201 importTheme(themeImportExportEdit.text);
202 }
203 }
204 QGCButton {
205 text: "Close"
206 onClicked: {
207 paletteImportExportPopup.close()
208 }
209 }
210 }
211 }
212 }
213
214 //-------------------------------------------------------------------------
215 //-- Header
216 Rectangle {
217 id: _header
218 width: parent.width
219 height: themeChoice.height * 2
220 color: qgcPal.window
221 anchors.top: parent.top
222 Row {
223 id: themeChoice
224 spacing: 20
225 anchors.centerIn: parent
226 QGCLabel {
227 text: qsTr("Window Color")
228 anchors.verticalCenter: parent.verticalCenter
229 }
230 QGCButton {
231 text: qsTr("Import/Export")
232 anchors.verticalCenter: parent.verticalCenter
233 onClicked: paletteImportExportPopup.open()
234 }
235 Row {
236 spacing: 20
237 anchors.verticalCenter: parent.verticalCenter
238 QGCRadioButton {
239 text: qsTr("Light")
240 checked: qgcPal.globalTheme === QGCPalette.Light
241 onClicked: {
242 qgcPal.globalTheme = QGCPalette.Light
243 }
244 }
245 QGCRadioButton {
246 text: qsTr("Dark")
247 checked: qgcPal.globalTheme === QGCPalette.Dark
248 onClicked: {
249 qgcPal.globalTheme = QGCPalette.Dark
250 }
251 }
252 }
253 }
254 }
255 //-------------------------------------------------------------------------
256 //-- Main Contents
257 QGCFlickable {
258 anchors.top: _header.bottom
259 anchors.bottom: parent.bottom
260 width: parent.width
261 contentWidth: _rootCol.width
262 contentHeight: _rootCol.height
263 clip: true
264 Column {
265 id: _rootCol
266 Row {
267 spacing: 30
268 // Edit theme GroupBox
269 GroupBox {
270 title: "Preview and edit theme"
271 Column {
272 id: editRoot
273 spacing: 5
274 property size cellSize: "90x25"
275
276 // Header row
277 Row {
278 Text {
279 width: editRoot.cellSize.width * 2
280 height: editRoot.cellSize.height
281 text: ""
282 }
283 Text {
284 width: editRoot.cellSize.width; height: editRoot.cellSize.height
285 color: "black"
286 horizontalAlignment: Text.AlignLeft
287 text: qsTr("Enabled")
288 }
289 Text {
290 width: editRoot.cellSize.width; height: editRoot.cellSize.height
291 color: "black"
292 horizontalAlignment: Text.AlignHCenter
293 text: qsTr("Value")
294 }
295 Text {
296 width: editRoot.cellSize.width; height: editRoot.cellSize.height
297 color: "black"
298 horizontalAlignment: Text.AlignHCenter
299 text: qsTr("Disabled")
300 }
301 Text {
302 width: editRoot.cellSize.width; height: editRoot.cellSize.height
303 color: "black"
304 horizontalAlignment: Text.AlignHCenter
305 text: qsTr("Value")
306 }
307 }
308
309 // Populate the model with all color names in the global palette
310 Component.onCompleted: {
311 for(var colorNameStr in enabledPalette) {
312 if(enabledPalette[colorNameStr].r !== undefined) {
313 paletteColorList.append({ colorName: colorNameStr });
314 }
315 }
316 }
317
318 ListModel {
319 id: paletteColorList
320 }
321
322 // Reproduce all the models
323 Repeater {
324 model: paletteColorList
325 delegate: Row {
326 spacing: 5
327 Text {
328 width: editRoot.cellSize.width * 2
329 height: editRoot.cellSize.height
330 horizontalAlignment: Text.AlignRight
331 verticalAlignment: Text.AlignVCenter
332 color: "black"
333 text: colorName
334 }
335 ClickableColor {
336 id: enabledColorPicker
337 color: enabledPalette[colorName]
338 onColorSelected: enabledPalette[colorName] = color
339 }
340 TextField {
341 id: enabledTextField
342 width: editRoot.cellSize.width; height: editRoot.cellSize.height
343 inputMask: "\\#>HHHHHHhh;"
344 horizontalAlignment: Text.AlignLeft
345 text: enabledPalette[colorName]
346 onEditingFinished: enabledPalette[colorName] = text
347 }
348 ClickableColor {
349 id: disabledColorPicker
350 color: disabledPalette[colorName]
351 onColorSelected: disabledPalette[colorName] = color
352 }
353 TextField {
354 width: editRoot.cellSize.width; height: editRoot.cellSize.height
355 inputMask: enabledTextField.inputMask
356 horizontalAlignment: Text.AlignLeft
357 text: disabledPalette[colorName]
358 onEditingFinished: disabledPalette[colorName] = text
359 }
360 }
361 }
362 } // Column
363 } // GroupBox { title: "Preview and edit theme"
364
365 // QGC controls preview
366 GroupBox { title: "Controls preview"
367 Column {
368 id: ctlPrevColumn
369 property real _colWidth: ScreenTools.defaultFontPointSize * 18
370 property real _height: _colWidth*0.15
371 property color _bkColor: qgcPal.window
372 spacing: 10
373 width: previewGrid.width
374 Grid {
375 id: previewGrid
376 columns: 3
377 spacing: 10
378
379 // Header row
380 Text {
381 width: ctlPrevColumn._colWidth
382 height: ctlPrevColumn._height
383 color: "black"
384 horizontalAlignment: Text.AlignHCenter
385 text: qsTr("QGC name")
386 }
387 Text {
388 width: ctlPrevColumn._colWidth
389 height: ctlPrevColumn._height
390 color: "black"
391 horizontalAlignment: Text.AlignHCenter
392 text: qsTr("Enabled")
393 }
394 Text {
395 width: ctlPrevColumn._colWidth
396 height: ctlPrevColumn._height
397 color: "black"
398 horizontalAlignment: Text.AlignHCenter
399 text: qsTr("Disabled")
400 }
401
402 // QGCLabel
403 Loader {
404 sourceComponent: ctlRowHeader
405 property string text: "QGCLabel"
406 }
407 Rectangle {
408 width: ctlPrevColumn._colWidth
409 height: ctlPrevColumn._height
410 color: ctlPrevColumn._bkColor
411 QGCLabel {
412 anchors.fill: parent
413 anchors.margins: 5
414 text: qsTr("Label")
415 }
416 }
417 Rectangle {
418 width: ctlPrevColumn._colWidth
419 height: ctlPrevColumn._height
420 color: ctlPrevColumn._bkColor
421 QGCLabel {
422 anchors.fill: parent
423 anchors.margins: 5
424 text: qsTr("Label")
425 enabled: false
426 }
427 }
428
429 // QGCButton
430 Loader {
431 sourceComponent: ctlRowHeader
432 property string text: "QGCButton"
433 }
434 QGCButton {
435 width: ctlPrevColumn._colWidth
436 height: ctlPrevColumn._height
437 text: qsTr("Button")
438 }
439 QGCButton {
440 width: ctlPrevColumn._colWidth
441 height: ctlPrevColumn._height
442 text: qsTr("Button")
443 enabled: false
444 }
445
446 // QGCButton - primary
447 Loader {
448 sourceComponent: ctlRowHeader
449 property string text: "QGCButton(primary)"
450 }
451 QGCButton {
452 width: ctlPrevColumn._colWidth
453 height: ctlPrevColumn._height
454 primary: true
455 text: qsTr("Button")
456 }
457 QGCButton {
458 width: ctlPrevColumn._colWidth
459 height: ctlPrevColumn._height
460 text: qsTr("Button")
461 primary: true
462 enabled: false
463 }
464
465 // ToolStripHoverButton
466 Loader {
467 sourceComponent: ctlRowHeader
468 property string text: "ToolStripHoverButton"
469 }
470 ToolStripHoverButton {
471 width: ctlPrevColumn._colWidth
472 height: ctlPrevColumn._height * 2
473 text: qsTr("Hover Button")
474 radius: ScreenTools.defaultFontPointSize
475 imageSource: "/qmlimages/Gears.svg"
476 }
477 ToolStripHoverButton {
478 width: ctlPrevColumn._colWidth
479 height: ctlPrevColumn._height * 2
480 text: qsTr("Hover Button")
481 radius: ScreenTools.defaultFontPointSize
482 imageSource: "/qmlimages/Gears.svg"
483 enabled: false
484 }
485
486 // QGCButton - menu
487 Loader {
488 sourceComponent: ctlRowHeader
489 property string text: "QGCButton(menu)"
490 }
491 Menu {
492 id: buttonMenu
493 QGCMenuItem {
494 text: qsTr("Item 1")
495 }
496 QGCMenuItem {
497 text: qsTr("Item 2")
498 }
499 QGCMenuItem {
500 text: qsTr("Item 3")
501 }
502 }
503 QGCButton {
504 width: ctlPrevColumn._colWidth
505 height: ctlPrevColumn._height
506 text: qsTr("Button")
507 onClicked: buttonMenu.popup()
508 }
509 QGCButton {
510 width: ctlPrevColumn._colWidth
511 height: ctlPrevColumn._height
512 text: qsTr("Button")
513 enabled: false
514 onClicked: buttonMenu.popup()
515 }
516
517 // QGCRadioButton
518 Loader {
519 sourceComponent: ctlRowHeader
520 property string text: "QGCRadioButton"
521 }
522 Rectangle {
523 width: ctlPrevColumn._colWidth
524 height: ctlPrevColumn._height
525 color: ctlPrevColumn._bkColor
526 QGCRadioButton {
527 anchors.fill: parent
528 anchors.margins: 5
529 text: qsTr("Radio")
530 }
531 }
532 Rectangle {
533 width: ctlPrevColumn._colWidth
534 height: ctlPrevColumn._height
535 color: ctlPrevColumn._bkColor
536 QGCRadioButton {
537 anchors.fill: parent
538 anchors.margins: 5
539 text: qsTr("Radio")
540 enabled: false
541 }
542 }
543
544 // QGCCheckBox
545 Loader {
546 sourceComponent: ctlRowHeader
547 property string text: "QGCCheckBox"
548 }
549 Rectangle {
550 width: ctlPrevColumn._colWidth
551 height: ctlPrevColumn._height
552 color: ctlPrevColumn._bkColor
553 QGCCheckBox {
554 anchors.fill: parent
555 anchors.margins: 5
556 text: qsTr("Check Box")
557 }
558 }
559 Rectangle {
560 width: ctlPrevColumn._colWidth
561 height: ctlPrevColumn._height
562 color: ctlPrevColumn._bkColor
563 QGCCheckBox {
564 anchors.fill: parent
565 anchors.margins: 5
566 text: qsTr("Check Box")
567 enabled: false
568 }
569 }
570
571 // QGCCheckBoxSlider
572 Loader {
573 sourceComponent: ctlRowHeader
574 property string text: "QGCCheckBoxSlider"
575 }
576 Rectangle {
577 width: ctlPrevColumn._colWidth
578 height: ctlPrevColumn._height
579 color: ctlPrevColumn._bkColor
580 QGCCheckBoxSlider {
581 anchors.fill: parent
582 anchors.margins: 5
583 text: qsTr("Check Box Slider")
584 }
585 }
586 Rectangle {
587 width: ctlPrevColumn._colWidth
588 height: ctlPrevColumn._height
589 color: ctlPrevColumn._bkColor
590 QGCCheckBoxSlider {
591 anchors.fill: parent
592 anchors.margins: 5
593 text: qsTr("Check Box Slider")
594 enabled: false
595 }
596 }
597
598 // QGCTextField
599 Loader {
600 sourceComponent: ctlRowHeader
601 property string text: "QGCTextField"
602 }
603 QGCTextField {
604 width: ctlPrevColumn._colWidth
605 height: ctlPrevColumn._height
606 text: "QGCTextField"
607 }
608 QGCTextField {
609 width: ctlPrevColumn._colWidth
610 height: ctlPrevColumn._height
611 text: "QGCTextField"
612 enabled: false
613 }
614
615 // QGCComboBox
616 Loader {
617 sourceComponent: ctlRowHeader
618 property string text: "QGCComboBox"
619 }
620 QGCComboBox {
621 width: ctlPrevColumn._colWidth
622 height: ctlPrevColumn._height
623 model: [ qsTr("Item 1"), qsTr("Item 2"), qsTr("Item 3") ]
624 }
625 QGCComboBox {
626 width: ctlPrevColumn._colWidth
627 height: ctlPrevColumn._height
628 model: [ qsTr("Item 1"), qsTr("Item 2"), qsTr("Item 3") ]
629 enabled: false
630 }
631
632 // SubMenuButton
633 Loader {
634 sourceComponent: ctlRowHeader
635 property string text: "SubMenuButton"
636 }
637 SubMenuButton {
638 width: ctlPrevColumn._colWidth
639 height: ctlPrevColumn._colWidth/3
640 text: qsTr("SUB MENU")
641 }
642 SubMenuButton {
643 width: ctlPrevColumn._colWidth
644 height: ctlPrevColumn._colWidth/3
645 text: qsTr("SUB MENU")
646 enabled: false
647 }
648 }
649 Rectangle {
650 width: previewGrid.width
651 height: 60
652 radius: 3
653 color: qgcPal.alertBackground
654 border.color: qgcPal.alertBorder
655 border.width: 1
656 anchors.horizontalCenter: parent.horizontalCenter
657 Label {
658 text: "Alert Message"
659 color: qgcPal.alertText
660 anchors.centerIn: parent
661 }
662 }
663 } // Column
664 } // GroupBox { title: "Controls preview"
665 }
666
667 Item{
668 height: 10;
669 width: 1;
670 }
671
672 Row {
673 spacing: 10
674 anchors.horizontalCenter: parent.horizontalCenter
675 Loader {
676 property color backgroundColor: qgcPal.window
677 sourceComponent: arbBox
678 }
679 Loader {
680 property color backgroundColor: qgcPal.windowShade
681 sourceComponent: arbBox
682 }
683 Loader {
684 property color backgroundColor: qgcPal.windowShadeDark
685 sourceComponent: arbBox
686 }
687 }
688
689 Item{
690 height: 20;
691 width: 1;
692 }
693
694 // SettingsGroupLayout Test
695 GroupBox {
696 title: "SettingsGroupLayout Test"
697 anchors.horizontalCenter: parent.horizontalCenter
698
699 background: Rectangle {
700 color: qgcPal.window
701 border.color: qgcPal.text
702 border.width: 1
703 }
704
705 Column {
706 spacing: ScreenTools.defaultFontPixelHeight
707
708 // Controls for testing properties
709 Row {
710 spacing: ScreenTools.defaultFontPixelWidth * 2
711
712 QGCCheckBox {
713 id: showBorderCheck
714 text: "showBorder"
715 checked: true
716 }
717
718 QGCCheckBox {
719 id: showDividersCheck
720 text: "showDividers"
721 checked: true
722 }
723
724 QGCCheckBox {
725 id: showHeadingCheck
726 text: "Show Heading"
727 checked: true
728 }
729
730 QGCCheckBox {
731 id: showDescriptionCheck
732 text: "Show Description"
733 checked: true
734 }
735 }
736
737 Row {
738 spacing: ScreenTools.defaultFontPixelWidth * 2
739
740 QGCLabel { text: "Visibility toggles:"; font.bold: true }
741
742 QGCCheckBox {
743 id: item1Visible
744 text: "Item 1"
745 checked: true
746 }
747
748 QGCCheckBox {
749 id: item2Visible
750 text: "Item 2"
751 checked: true
752 }
753
754 QGCCheckBox {
755 id: item3Visible
756 text: "Item 3"
757 checked: true
758 }
759
760 QGCCheckBox {
761 id: item4Visible
762 text: "Item 4"
763 checked: true
764 }
765 }
766
767 Row {
768 spacing: ScreenTools.defaultFontPixelWidth * 2
769
770 QGCLabel { text: "Repeater toggles:"; font.bold: true }
771
772 QGCCheckBox {
773 id: repeaterShowDividers
774 text: "Dividers"
775 checked: true
776 }
777
778 QGCCheckBox {
779 id: repeater1Visible
780 text: "Rep 1"
781 checked: true
782 }
783
784 QGCCheckBox {
785 id: repeater2Visible
786 text: "Rep 2"
787 checked: true
788 }
789
790 QGCCheckBox {
791 id: repeater3Visible
792 text: "Rep 3"
793 checked: true
794 }
795
796 QGCCheckBox {
797 id: repeater4Visible
798 text: "Rep 4"
799 checked: true
800 }
801
802 QGCCheckBox {
803 id: repeater5Visible
804 text: "Rep 5"
805 checked: true
806 }
807 }
808
809 // Test SettingsGroupLayout with various content
810 SettingsGroupLayout {
811 width: ScreenTools.defaultFontPixelWidth * 60
812 heading: showHeadingCheck.checked ? "Test Settings Group" : ""
813 headingDescription: showDescriptionCheck.checked ? "This is a description of the settings group that explains what these settings are for." : ""
814 showBorder: showBorderCheck.checked
815 showDividers: showDividersCheck.checked
816
817 RowLayout {
818 Layout.fillWidth: true
819 visible: item1Visible.checked
820
821 QGCLabel {
822 text: "Setting 1:"
823 Layout.fillWidth: true
824 }
825 QGCTextField {
826 text: "Value 1"
827 Layout.preferredWidth: ScreenTools.defaultFontPixelWidth * 15
828 }
829 }
830
831 RowLayout {
832 Layout.fillWidth: true
833 visible: item2Visible.checked
834
835 QGCLabel {
836 text: "Setting 2:"
837 Layout.fillWidth: true
838 }
839 QGCComboBox {
840 model: ["Option 1", "Option 2", "Option 3"]
841 Layout.preferredWidth: ScreenTools.defaultFontPixelWidth * 15
842 }
843 }
844
845 RowLayout {
846 Layout.fillWidth: true
847 visible: item3Visible.checked
848
849 QGCCheckBox {
850 text: "Enable feature"
851 Layout.fillWidth: true
852 }
853 }
854
855 RowLayout {
856 Layout.fillWidth: true
857 visible: item4Visible.checked
858
859 QGCLabel {
860 text: "Setting 4:"
861 Layout.fillWidth: true
862 }
863 QGCButton {
864 text: "Configure"
865 }
866 }
867 }
868
869 // Nested SettingsGroupLayout test
870 QGCLabel {
871 text: "Nested SettingsGroupLayout:"
872 font.bold: true
873 }
874
875 SettingsGroupLayout {
876 width: ScreenTools.defaultFontPixelWidth * 60
877 heading: "Outer Group"
878 showBorder: true
879 showDividers: true
880
881 RowLayout {
882 Layout.fillWidth: true
883 QGCLabel { text: "Outer setting"; Layout.fillWidth: true }
884 QGCTextField { text: "Value" }
885 }
886
887 SettingsGroupLayout {
888 Layout.fillWidth: true
889 heading: "Inner Group"
890 headingDescription: "Nested group inside outer group"
891 showBorder: true
892 showDividers: false
893
894 QGCCheckBox {
895 text: "Inner checkbox 1"
896 Layout.fillWidth: true
897 }
898
899 QGCCheckBox {
900 text: "Inner checkbox 2"
901 Layout.fillWidth: true
902 }
903 }
904
905 RowLayout {
906 Layout.fillWidth: true
907 QGCLabel { text: "Another outer setting"; Layout.fillWidth: true }
908 QGCComboBox { model: ["A", "B", "C"] }
909 }
910 }
911
912 // Test with Repeater
913 QGCLabel {
914 text: "SettingsGroupLayout with Repeater:"
915 font.bold: true
916 }
917
918 SettingsGroupLayout {
919 width: ScreenTools.defaultFontPixelWidth * 60
920 heading: "Repeater Test"
921 showBorder: true
922 showDividers: repeaterShowDividers.checked
923
924 Repeater {
925 model: 5
926 delegate: RowLayout {
927 Layout.fillWidth: true
928 visible: {
929 switch(index) {
930 case 0: return repeater1Visible.checked
931 case 1: return repeater2Visible.checked
932 case 2: return repeater3Visible.checked
933 case 3: return repeater4Visible.checked
934 case 4: return repeater5Visible.checked
935 default: return true
936 }
937 }
938 QGCLabel {
939 text: "Repeated Item " + (index + 1) + ":"
940 Layout.fillWidth: true
941 }
942 QGCTextField {
943 text: "Value " + (index + 1)
944 Layout.preferredWidth: ScreenTools.defaultFontPixelWidth * 15
945 }
946 }
947 }
948 }
949 }
950 }
951
952 }
953
954 }
955
956 Component {
957 id: ctlRowHeader
958 Rectangle {
959 width: ctlPrevColumn._colWidth
960 height: ctlPrevColumn._height
961 color: "white"
962 Text {
963 color: "black"
964 text: parent.parent.text
965 anchors.fill: parent
966 horizontalAlignment: Text.AlignRight
967 verticalAlignment: Text.AlignVCenter
968 }
969 }
970 }
971
972 Component {
973 id: arbBox
974 Rectangle {
975 width: arbGrid.width * 1.5
976 height: arbGrid.height * 1.5
977 color: backgroundColor
978 border.color: qgcPal.text
979 border.width: 1
980 anchors.horizontalCenter: parent.horizontalCenter
981 GridLayout {
982 id: arbGrid
983 columns: 4
984 rowSpacing: 10
985 anchors.centerIn: parent
986 QGCColoredImage {
987 color: qgcPal.colorGreen
988 width: ScreenTools.defaultFontPixelWidth * 2
989 height: width
990 sourceSize.height: width
991 mipmap: true
992 fillMode: Image.PreserveAspectFit
993 source: "/qmlimages/Gears.svg"
994 }
995 Label { text: "colorGreen"; color: qgcPal.colorGreen; }
996 QGCColoredImage {
997 color: qgcPal.colorOrange
998 width: ScreenTools.defaultFontPixelWidth * 2
999 height: width
1000 sourceSize.height: width
1001 mipmap: true
1002 fillMode: Image.PreserveAspectFit
1003 source: "/qmlimages/Gears.svg"
1004 }
1005 Label { text: "colorOrange"; color: qgcPal.colorOrange; }
1006 QGCColoredImage {
1007 color: qgcPal.colorRed
1008 width: ScreenTools.defaultFontPixelWidth * 2
1009 height: width
1010 sourceSize.height: width
1011 mipmap: true
1012 fillMode: Image.PreserveAspectFit
1013 source: "/qmlimages/Gears.svg"
1014 }
1015 Label { text: "colorRed"; color: qgcPal.colorRed; }
1016 QGCColoredImage {
1017 color: qgcPal.colorGrey
1018 width: ScreenTools.defaultFontPixelWidth * 2
1019 height: width
1020 sourceSize.height: width
1021 mipmap: true
1022 fillMode: Image.PreserveAspectFit
1023 source: "/qmlimages/Gears.svg"
1024 }
1025 Label { text: "colorGrey"; color: qgcPal.colorGrey; }
1026 QGCColoredImage {
1027 color: qgcPal.colorBlue
1028 width: ScreenTools.defaultFontPixelWidth * 2
1029 height: width
1030 sourceSize.height: width
1031 mipmap: true
1032 fillMode: Image.PreserveAspectFit
1033 source: "/qmlimages/Gears.svg"
1034 }
1035 Label { text: "colorBlue"; color: qgcPal.colorBlue; }
1036 }
1037 }
1038 }
1039}