InstrumentValueEditDialog.qml 20.8 KB
Newer Older
1 2 3 4 5 6 7 8 9 10 11 12 13 14
/****************************************************************************
 *
 * (c) 2009-2020 QGROUNDCONTROL PROJECT <http://www.qgroundcontrol.org>
 *
 * QGroundControl is licensed according to the terms in the file
 * COPYING.md in the root of the source code directory.
 *
 ****************************************************************************/

import QtQuick          2.12
import QtQuick.Dialogs  1.3
import QtQuick.Layouts  1.2
import QtQuick.Controls 2.5

15
import QGroundControl               1.0
16 17 18 19 20 21 22 23 24 25 26 27
import QGroundControl.Controls      1.0
import QGroundControl.ScreenTools   1.0
import QGroundControl.FactSystem    1.0
import QGroundControl.FactControls  1.0
import QGroundControl.Controllers   1.0
import QGroundControl.Palette       1.0

QGCPopupDialog {
    id:         root
    title:      qsTr("Value Display")
    buttons:    StandardButton.Close

28 29 30 31
    property var instrumentValueData: dialogProperties.instrumentValueData

    QGCPalette { id: qgcPal; colorGroupEnabled: parent.enabled }
    QGCPalette { id: qgcPalDisabled; colorGroupEnabled: false }
32 33 34 35

    GridLayout {
        rowSpacing:     _margins
        columnSpacing:  _margins
36
        columns:        2
37 38

        QGCComboBox {
39 40 41
            id:                     factGroupCombo
            Layout.fillWidth:       true
            model:                  instrumentValueData.factGroupNames
42
            sizeToContents:         true
43
            Component.onCompleted:  currentIndex = find(instrumentValueData.factGroupName)
44
            onActivated: {
45 46 47 48 49 50 51
                instrumentValueData.setFact(currentText, "")
                instrumentValueData.icon = ""
                instrumentValueData.text = instrumentValueData.fact.shortDescription
            }
            Connections {
                target: instrumentValueData
                onFactGroupNameChanged: factGroupCombo.currentIndex = factGroupCombo.find(instrumentValueData.factGroupName)
52 53 54 55
            }
        }

        QGCComboBox {
56 57 58
            id:                     factNamesCombo
            Layout.fillWidth:       true
            model:                  instrumentValueData.factValueNames
59
            sizeToContents:         true
60
            Component.onCompleted:  currentIndex = find(instrumentValueData.factName)
61
            onActivated: {
62 63 64 65 66 67 68
                instrumentValueData.setFact(instrumentValueData.factGroupName, currentText)
                instrumentValueData.icon = ""
                instrumentValueData.text = instrumentValueData.fact.shortDescription
            }
            Connections {
                target: instrumentValueData
                onFactNameChanged: factNamesCombo.currentIndex = factNamesCombo.find(instrumentValueData.factName)
69 70 71 72
            }
        }

        QGCRadioButton {
73
            id:                     iconRadio
74
            text:                   qsTr("Icon")
75
            Component.onCompleted:  checked = instrumentValueData.icon != ""
76
            onClicked: {
77
                instrumentValueData.text = ""
78
                instrumentValueData.icon = instrumentValueData.factValueGrid.iconNames[0]
79
                var updateFunction = function(icon){ instrumentValueData.icon = icon }
80
                mainWindow.showPopupDialogFromComponent(iconPickerDialog, { iconNames: instrumentValueData.factValueGrid.iconNames, icon: instrumentValueData.icon, updateIconFunction: updateFunction })
81 82 83 84
            }
        }

        QGCColoredImage {
85
            id:                 valueIcon
86
            Layout.alignment:   Qt.AlignHCenter
87
            height:             ScreenTools.implicitComboBoxHeight
88
            width:              height
89
            source:             "/InstrumentValueIcons/" + (instrumentValueData.icon ? instrumentValueData.icon : instrumentValueData.factValueGrid.iconNames[0])
90 91 92 93 94
            sourceSize.height:  height
            fillMode:           Image.PreserveAspectFit
            mipmap:             true
            smooth:             true
            color:              enabled ? qgcPal.text : qgcPalDisabled.text
95
            enabled:            iconRadio.checked
96 97 98 99

            MouseArea {
                anchors.fill:   parent
                onClicked: {
100
                    var updateFunction = function(icon){ instrumentValueData.icon = icon }
101
                    mainWindow.showPopupDialogFromComponent(iconPickerDialog, { iconNames: instrumentValueData.factValueGrid.iconNames, icon: instrumentValueData.icon, updateIconFunction: updateFunction })
102 103 104
                }
            }

105 106 107 108 109 110
            Rectangle {
                anchors.fill:   valueIcon
                color:          qgcPal.text
                visible:        valueIcon.status === Image.Error
            }
        }
111 112

        QGCRadioButton {
113
            id:                     textRadio
114
            text:                   qsTr("Text")
115
            Component.onCompleted:  checked = instrumentValueData.icon == ""
116
            onClicked: {
117 118
                instrumentValueData.icon = ""
                instrumentValueData.text = instrumentValueData.fact ? instrumentValueData.fact.shortDescription : qsTr("Label")
119 120 121 122
            }
        }

        QGCTextField {
123 124 125 126 127 128
            id:                     labelTextField
            Layout.fillWidth:       true
            Layout.preferredWidth:  ScreenTools.defaultFontPixelWidth * 10
            text:                   instrumentValueData.text
            enabled:                textRadio.checked
            onEditingFinished:      instrumentValueData.text = text
129 130 131 132 133 134
        }

        QGCLabel { text: qsTr("Size") }

        QGCComboBox {
            id:                 fontSizeCombo
135
            Layout.fillWidth:   true
136 137
            model:              instrumentValueData.factValueGrid.fontSizeNames
            currentIndex:       instrumentValueData.factValueGrid.fontSize
138
            sizeToContents:     true
139
            onActivated:        instrumentValueData.factValueGrid.fontSize = index
140 141 142
        }

        QGCCheckBox {
143
            Layout.columnSpan:  2
144
            text:               qsTr("Show Units")
145 146
            checked:            instrumentValueData.showUnits
            onClicked:          instrumentValueData.showUnits = checked
147 148 149 150 151 152
        }

        QGCLabel { text: qsTr("Range") }

        QGCComboBox {
            id:                 rangeTypeCombo
153 154 155
            Layout.fillWidth:   true
            model:              instrumentValueData.rangeTypeNames
            currentIndex:       instrumentValueData.rangeType
156
            sizeToContents:     true
157
            onActivated:        instrumentValueData.rangeType = index
158 159 160 161
        }

        Loader {
            id:                     rangeLoader
162
            Layout.columnSpan:      2
163 164 165 166
            Layout.fillWidth:       true
            Layout.preferredWidth:  item ? item.width : 0
            Layout.preferredHeight: item ? item.height : 0

167
            property var instrumentValueData: root.instrumentValueData
168 169

            function updateSourceComponent() {
170 171
                switch (instrumentValueData.rangeType) {
                case InstrumentValueData.NoRangeInfo:
172 173
                    sourceComponent = undefined
                    break
174
                case InstrumentValueData.ColorRange:
175 176
                    sourceComponent = colorRangeDialog
                    break
177
                case InstrumentValueData.OpacityRange:
178 179
                    sourceComponent = opacityRangeDialog
                    break
180
                case InstrumentValueData.IconSelectRange:
181 182 183 184 185 186 187 188
                    sourceComponent = iconRangeDialog
                    break
                }
            }

            Component.onCompleted: updateSourceComponent()

            Connections {
189
                target:             instrumentValueData
190 191 192 193 194 195 196 197 198 199 200 201 202 203
                onRangeTypeChanged: rangeLoader.updateSourceComponent()
            }

        }
    }

    Component {
        id: colorRangeDialog

        Item {
            width:  childrenRect.width
            height: childrenRect.height

            function updateRangeValue(index, text) {
204
                var newValues = instrumentValueData.rangeValues
205
                newValues[index] = parseFloat(text)
206
                instrumentValueData.rangeValues = newValues
207 208 209
            }

            function updateColorValue(index, color) {
210
                var newColors = instrumentValueData.rangeColors
211
                newColors[index] = color
212
                instrumentValueData.rangeColors = newColors
213 214 215 216 217
            }

            ColorDialog {
                id:             colorPickerDialog
                modality:       Qt.ApplicationModal
218
                currentColor:   instrumentValueData.rangeColors.length ? instrumentValueData.rangeColors[colorIndex] : "white"
219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242
                onAccepted:     updateColorValue(colorIndex, color)

                property int colorIndex: 0
            }

            Column {
                id:         mainColumn
                spacing:    ScreenTools.defaultFontPixelHeight / 2

                QGCLabel {
                    width:      rowLayout.width
                    text:       qsTr("Specify the color you want to apply based on value ranges. The color will be applied to the icon if available, otherwise to the value itself.")
                    wrapMode:   Text.WordWrap
                }

                Row {
                    id:         rowLayout
                    spacing:    _margins

                    Column {
                        anchors.verticalCenter: parent.verticalCenter
                        spacing:                _margins

                        Repeater {
243
                            model: instrumentValueData.rangeValues.length
244 245 246 247 248

                            QGCButton {
                                width:      ScreenTools.implicitTextFieldHeight
                                height:     width
                                text:       qsTr("-")
249
                                onClicked:  instrumentValueData.removeRangeValue(index)
250 251 252 253 254 255 256 257 258
                            }
                        }
                    }

                    Column {
                        anchors.verticalCenter: parent.verticalCenter
                        spacing:                _margins

                        Repeater {
259
                            model: instrumentValueData.rangeValues.length
260 261

                            QGCTextField {
262
                                text:               instrumentValueData.rangeValues[index]
263 264 265 266 267 268 269 270
                                onEditingFinished:  updateRangeValue(index, text)
                            }
                        }
                    }

                    Column {
                        spacing: _margins
                        Repeater {
271
                            model: instrumentValueData.rangeColors
272 273 274

                            QGCCheckBox {
                                height:     ScreenTools.implicitTextFieldHeight
275 276
                                checked:    instrumentValueData.isValidColor(instrumentValueData.rangeColors[index])
                                onClicked:  updateColorValue(index, checked ? "green" : instrumentValueData.invalidColor())
277 278 279 280 281 282 283
                            }
                        }
                    }

                    Column {
                        spacing: _margins
                        Repeater {
284
                            model: instrumentValueData.rangeColors
285 286 287 288 289

                            Rectangle {
                                width:          ScreenTools.implicitTextFieldHeight
                                height:         width
                                border.color:   qgcPal.text
290
                                color:          instrumentValueData.isValidColor(modelData) ? modelData : qgcPal.text
291 292 293 294 295 296 297 298 299 300 301 302 303 304 305

                                MouseArea {
                                    anchors.fill: parent
                                    onClicked: {
                                        colorPickerDialog.colorIndex = index
                                        colorPickerDialog.open()
                                    }
                                }
                            }
                        }
                    }
                }

                QGCButton {
                    text:       qsTr("Add Row")
306
                    onClicked:  instrumentValueData.addRangeValue()
307 308 309 310 311 312 313 314 315 316 317 318 319
                }
            }
        }
    }

    Component {
        id: iconRangeDialog

        Item {
            width:  childrenRect.width
            height: childrenRect.height

            function updateRangeValue(index, text) {
320
                var newValues = instrumentValueData.rangeValues
321
                newValues[index] = parseFloat(text)
322
                instrumentValueData.rangeValues = newValues
323 324 325
            }

            function updateIconValue(index, icon) {
326
                var newIcons = instrumentValueData.rangeIcons
327
                newIcons[index] = icon
328
                instrumentValueData.rangeIcons = newIcons
329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349
            }

            Column {
                id:         mainColumn
                spacing:    ScreenTools.defaultFontPixelHeight / 2

                QGCLabel {
                    width:      rowLayout.width
                    text:       qsTr("Specify the icon you want to display based on value ranges.")
                    wrapMode:   Text.WordWrap
                }

                Row {
                    id:         rowLayout
                    spacing:    _margins

                    Column {
                        anchors.verticalCenter: parent.verticalCenter
                        spacing:                _margins

                        Repeater {
350
                            model: instrumentValueData.rangeValues.length
351 352 353 354 355

                            QGCButton {
                                width:      ScreenTools.implicitTextFieldHeight
                                height:     width
                                text:       qsTr("-")
356
                                onClicked:  instrumentValueData.removeRangeValue(index)
357 358 359 360 361 362 363 364 365
                            }
                        }
                    }

                    Column {
                        anchors.verticalCenter: parent.verticalCenter
                        spacing:                _margins

                        Repeater {
366
                            model: instrumentValueData.rangeValues.length
367 368

                            QGCTextField {
369
                                text:               instrumentValueData.rangeValues[index]
370 371 372 373 374 375 376 377 378
                                onEditingFinished:  updateRangeValue(index, text)
                            }
                        }
                    }

                    Column {
                        spacing: _margins

                        Repeater {
379
                            model: instrumentValueData.rangeIcons
380 381 382 383 384 385 386 387 388 389 390 391 392 393 394

                            QGCColoredImage {
                                height:             ScreenTools.implicitTextFieldHeight
                                width:              height
                                source:             "/InstrumentValueIcons/" + modelData
                                sourceSize.height:  height
                                fillMode:           Image.PreserveAspectFit
                                mipmap:             true
                                smooth:             true
                                color:              qgcPal.text

                                MouseArea {
                                    anchors.fill:   parent
                                    onClicked: {
                                        var updateFunction = function(icon){ updateIconValue(index, icon) }
395
                                        mainWindow.showPopupDialogFromComponent(iconPickerDialog, { iconNames: instrumentValueData.factValueGrid.iconNames, icon: modelData, updateIconFunction: updateFunction })
396 397 398 399 400 401 402 403 404
                                    }
                                }
                            }
                        }
                    }
                }

                QGCButton {
                    text:       qsTr("Add Row")
405
                    onClicked:  instrumentValueData.addRangeValue()
406 407 408 409 410 411 412 413 414 415 416 417 418
                }
            }
        }
    }

    Component {
        id: opacityRangeDialog

        Item {
            width:  childrenRect.width
            height: childrenRect.height

            function updateRangeValue(index, text) {
419
                var newValues = instrumentValueData.rangeValues
420
                newValues[index] = parseFloat(text)
421
                instrumentValueData.rangeValues = newValues
422 423 424
            }

            function updateOpacityValue(index, opacity) {
425
                var newOpacities = instrumentValueData.rangeOpacities
426
                newOpacities[index] = opacity
427
                instrumentValueData.rangeOpacities = newOpacities
428 429 430 431 432 433 434 435 436 437 438 439 440 441 442 443 444 445 446 447 448
            }

            Column {
                id:         mainColumn
                spacing:    ScreenTools.defaultFontPixelHeight / 2

                QGCLabel {
                    width:      rowLayout.width
                    text:       qsTr("Specify the icon opacity you want based on value ranges.")
                    wrapMode:   Text.WordWrap
                }

                Row {
                    id:         rowLayout
                    spacing:    _margins

                    Column {
                        anchors.verticalCenter: parent.verticalCenter
                        spacing:                _margins

                        Repeater {
449
                            model: instrumentValueData.rangeValues.length
450 451 452 453 454

                            QGCButton {
                                width:      ScreenTools.implicitTextFieldHeight
                                height:     width
                                text:       qsTr("-")
455
                                onClicked:  instrumentValueData.removeRangeValue(index)
456 457 458 459 460 461 462 463 464
                            }
                        }
                    }

                    Column {
                        anchors.verticalCenter: parent.verticalCenter
                        spacing:                _margins

                        Repeater {
465
                            model: instrumentValueData.rangeValues
466 467 468 469 470 471 472 473 474 475 476 477

                            QGCTextField {
                                text:               modelData
                                onEditingFinished:  updateRangeValue(index, text)
                            }
                        }
                    }

                    Column {
                        spacing: _margins

                        Repeater {
478
                            model: instrumentValueData.rangeOpacities
479 480 481 482 483 484 485 486 487 488 489

                            QGCTextField {
                                text:               modelData
                                onEditingFinished:  updateOpacityValue(index, text)
                            }
                        }
                    }
                }

                QGCButton {
                    text:       qsTr("Add Row")
490
                    onClicked:  instrumentValueData.addRangeValue()
491 492 493 494 495 496 497 498 499 500 501 502 503 504 505 506 507 508 509 510 511 512 513 514 515 516 517 518 519 520 521 522 523 524 525 526 527 528 529 530 531 532 533 534 535 536 537 538 539 540 541 542 543 544 545 546 547 548
                }
            }
        }
    }

    Component {
        id: iconPickerDialog

        QGCPopupDialog {
            property var     iconNames:             dialogProperties.iconNames
            property string  icon:                  dialogProperties.icon
            property var     updateIconFunction:    dialogProperties.updateIconFunction

            title:      qsTr("Select Icon")
            buttons:    StandardButton.Close

            GridLayout {
                columns:        10
                columnSpacing:  0
                rowSpacing:     0

                Repeater {
                    model: iconNames

                    Rectangle {
                        height: ScreenTools.minTouchPixels
                        width:  height
                        color:  currentSelection ? qgcPal.text  : qgcPal.window

                        property bool currentSelection: icon == modelData

                        QGCColoredImage {
                            anchors.centerIn:   parent
                            height:             parent.height * 0.75
                            width:              height
                            source:             "/InstrumentValueIcons/" + modelData
                            sourceSize.height:  height
                            fillMode:           Image.PreserveAspectFit
                            mipmap:             true
                            smooth:             true
                            color:              currentSelection ? qgcPal.window : qgcPal.text

                            MouseArea {
                                anchors.fill:   parent
                                onClicked:  {
                                    icon = modelData
                                    updateIconFunction(modelData)
                                    hideDialog()
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}