MissionItemIndexLabel.qml 6.27 KB
Newer Older
DonLakeFlyer's avatar
DonLakeFlyer committed
1 2
import QtQuick          2.3
import QtQuick.Controls 1.2
3 4

import QGroundControl.ScreenTools 1.0
5
import QGroundControl.Palette     1.0
6

7 8
Canvas {
    id:     root
9

DonLakeFlyer's avatar
DonLakeFlyer committed
10
    width:  _width
11
    height: _height
12

13
    signal clicked
14 15 16
    signal released
    signal entered
    signal exited
17

18 19
    property string label                           ///< Label to show to the side of the index indicator
    property int    index:                  0       ///< Index to show in the indicator, 0 will show single char label instead, -1 first char of label in indicator full label to the side
20
    property bool   checked:                false
21
    property bool   small:                  !checked
22
    property bool   child:                  false
23
    property bool   highlightSelected:      false
24
    property var    color:                  checked ? "green" : (child ? qgcPal.mapIndicatorChild : qgcPal.mapIndicator)
25 26
    property real   anchorPointX:           _height / 2
    property real   anchorPointY:           _height / 2
27
    property bool   specifiesCoordinate:    true
DonLakeFlyer's avatar
DonLakeFlyer committed
28 29 30
    property real   gimbalYaw
    property real   vehicleYaw
    property bool   showGimbalYaw:          false
31
    property bool   showSequenceNumbers:    true
32

DonLakeFlyer's avatar
DonLakeFlyer committed
33
    property real   _width:             showGimbalYaw ? Math.max(_gimbalYawWidth, labelControl.visible ? labelControl.width : indicator.width) : (labelControl.visible ? labelControl.width : indicator.width)
34 35 36
    property real   _height:            showGimbalYaw ? _gimbalYawWidth : (labelControl.visible ? labelControl.height : indicator.height)
    property real   _gimbalYawRadius:   ScreenTools.defaultFontPixelHeight
    property real   _gimbalYawWidth:    _gimbalYawRadius * 2
37 38 39 40 41
    property real   _smallRadiusRaw:    Math.ceil((ScreenTools.defaultFontPixelHeight * ScreenTools.smallFontPointRatio) / 2)
    property real   _smallRadius:       _smallRadiusRaw + ((_smallRadiusRaw % 2 == 0) ? 1 : 0) // odd number for better centering
    property real   _normalRadiusRaw:   Math.ceil(ScreenTools.defaultFontPixelHeight * 0.66)
    property real   _normalRadius:      _normalRadiusRaw + ((_normalRadiusRaw % 2 == 0) ? 1 : 0)
    property real   _indicatorRadius:   small ? _smallRadius : _normalRadius
42 43 44
    property real   _gimbalRadians:     degreesToRadians(vehicleYaw + gimbalYaw - 90)
    property real   _labelMargin:       2
    property real   _labelRadius:       _indicatorRadius + _labelMargin
45
    property string _label:             label.length > 1 ? label : ""
46
    property string _index:             index === 0 || index === -1 ? label.charAt(0) : (showSequenceNumbers ? index : "")
47

DonLakeFlyer's avatar
DonLakeFlyer committed
48 49 50 51
    onColorChanged:         requestPaint()
    onShowGimbalYawChanged: requestPaint()
    onGimbalYawChanged:     requestPaint()
    onVehicleYawChanged:    requestPaint()
52 53 54

    QGCPalette { id: qgcPal }

DonLakeFlyer's avatar
DonLakeFlyer committed
55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72
    function degreesToRadians(degrees) {
        return (Math.PI/180)*degrees
    }

    function paintGimbalYaw(context) {
        if (showGimbalYaw) {
            context.save()
            context.globalAlpha = 0.75
            context.beginPath()
            context.moveTo(anchorPointX, anchorPointY)
            context.arc(anchorPointX, anchorPointY, _gimbalYawRadius,  _gimbalRadians + degreesToRadians(45), _gimbalRadians + degreesToRadians(-45), true /* clockwise */)
            context.closePath()
            context.fillStyle = "white"
            context.fill()
            context.restore()
        }
    }

73 74
    onPaint: {
        var context = getContext("2d")
DonLakeFlyer's avatar
DonLakeFlyer committed
75 76
        context.clearRect(0, 0, width, height)
        paintGimbalYaw(context)
77 78
    }

79 80
    Behavior on _indicatorRadius { PropertyAnimation {} }

81
    Rectangle {
DonLakeFlyer's avatar
DonLakeFlyer committed
82 83 84 85 86 87 88
        id:                     labelControl
        anchors.leftMargin:     -((_labelMargin * 2) + indicator.width)
        anchors.rightMargin:    -(_labelMargin * 2)
        anchors.fill:           labelControlLabel
        color:                  "white"
        opacity:                0.5
        radius:                 _labelRadius
89
        visible:                _label.length !== 0 && !small
90 91
    }

92
    QGCLabel {
93
        id:                     labelControlLabel
DonLakeFlyer's avatar
DonLakeFlyer committed
94 95 96 97 98 99
        anchors.topMargin:      -_labelMargin
        anchors.bottomMargin:   -_labelMargin
        anchors.leftMargin:     _labelMargin
        anchors.left:           indicator.right
        anchors.top:            indicator.top
        anchors.bottom:         indicator.bottom
100
        color:                  "black"
101
        text:                   _label
DonLakeFlyer's avatar
DonLakeFlyer committed
102 103
        verticalAlignment:      Text.AlignVCenter
        visible:                labelControl.visible
104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122
    }

    Rectangle {
        id:                             indicator
        anchors.horizontalCenter:       parent.left
        anchors.verticalCenter:         parent.top
        anchors.horizontalCenterOffset: anchorPointX
        anchors.verticalCenterOffset:   anchorPointY
        width:                          _indicatorRadius * 2
        height:                         width
        color:                          root.color
        radius:                         _indicatorRadius

        QGCLabel {
            anchors.fill:           parent
            horizontalAlignment:    Text.AlignHCenter
            verticalAlignment:      Text.AlignVCenter
            color:                  "white"
            font.pointSize:         ScreenTools.defaultFontPointSize
123
            fontSizeMode:           Text.Fit
124 125
            text:                   _index
        }
126
    }
127

128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146
    // Extra circle to indicate selection
    Rectangle {
        width:          indicator.width * 2
        height:         width
        radius:         width * 0.5
        color:          Qt.rgba(0,0,0,0)
        border.color:   Qt.rgba(1,1,1,0.5)
        border.width:   1
        visible:        checked && highlightSelected
        anchors.centerIn: indicator
    }

    // The mouse click area is always the size of a normal indicator
    Item {
        id:                 mouseAreaFill
        anchors.margins:    small ? -(_normalRadius - _smallRadius) : 0
        anchors.fill:       indicator
    }

147
    QGCMouseArea {
148
        fillItem:   mouseAreaFill
149 150 151 152
        onClicked: {
            focus = true
            parent.clicked()
        }
153 154 155 156 157 158 159 160 161
        onReleased: {
            parent.released()
        }
        onEntered: {
            parent.entered()
        }
        onExited: {
            parent.exited()
        }
162
    }
163
}