1/****************************************************************************
2**
3** Copyright (C) 2017 The Qt Company Ltd.
4** Contact: https://www.qt.io/licensing/
5**
6** This file is part of the examples of the Qt Toolkit.
7**
8** $QT_BEGIN_LICENSE:BSD$
9** Commercial License Usage
10** Licensees holding valid commercial Qt licenses may use this file in
11** accordance with the commercial license agreement provided with the
12** Software or, alternatively, in accordance with the terms contained in
13** a written agreement between you and The Qt Company. For licensing terms
14** and conditions see https://www.qt.io/terms-conditions. For further
15** information use the contact form at https://www.qt.io/contact-us.
16**
17** BSD License Usage
18** Alternatively, you may use this file under the terms of the BSD license
19** as follows:
20**
21** "Redistribution and use in source and binary forms, with or without
22** modification, are permitted provided that the following conditions are
23** met:
24**   * Redistributions of source code must retain the above copyright
25**     notice, this list of conditions and the following disclaimer.
26**   * Redistributions in binary form must reproduce the above copyright
27**     notice, this list of conditions and the following disclaimer in
28**     the documentation and/or other materials provided with the
29**     distribution.
30**   * Neither the name of The Qt Company Ltd nor the names of its
31**     contributors may be used to endorse or promote products derived
32**     from this software without specific prior written permission.
33**
34**
35** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
36** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
37** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
38** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
39** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
40** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
41** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
42** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
43** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
44** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
45** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
46**
47** $QT_END_LICENSE$
48**
49****************************************************************************/
50
51import QtQuick 2.6
52import QtQuick.Controls 1.4
53import QtQuick.Controls.Styles 1.4
54import QtQuick.Controls 2.0 as C2
55
56Row {
57    id: containerRow
58
59    property var mapSource
60    property real fontSize : 14
61    property color labelBackground : "transparent"
62    property int edge: Qt.RightEdge
63    property alias expanded: sliderToggler.checked
64
65    function rightEdge() {
66        return (containerRow.edge === Qt.RightEdge);
67    }
68
69    layoutDirection: rightEdge() ? Qt.LeftToRight : Qt.RightToLeft
70    anchors.top: parent.top
71    anchors.bottom: parent.bottom
72    anchors.right: rightEdge() ? parent.right : undefined
73    anchors.left: rightEdge() ? undefined : parent.left
74
75    Button {
76        id: sliderToggler
77        width: 32
78        height: 96
79        checkable: true
80        checked: true
81        anchors.verticalCenter: parent.verticalCenter
82
83        transform:  Scale {
84                        origin.x: rightEdge() ? 0 : sliderToggler.width / 2
85                        xScale: rightEdge() ? 1 : -1
86                    }
87
88        style:  ButtonStyle {
89                    background: Rectangle {
90                        color: "transparent"
91                    }
92                }
93
94        property real shear: 0.333
95        property real buttonOpacity: 0.5
96        property real mirror : rightEdge() ? 1.0 : -1.0
97
98        Rectangle {
99            width: 16
100            height: 48
101            color: "seagreen"
102            antialiasing: true
103            opacity: sliderToggler.buttonOpacity
104            anchors.top: parent.top
105            anchors.left: sliderToggler.checked ?  parent.left : parent.horizontalCenter
106            transform: Matrix4x4 {
107                property real d : sliderToggler.checked ? 1.0 : -1.0
108                matrix:    Qt.matrix4x4(1.0,  d * sliderToggler.shear,    0.0,    0.0,
109                                        0.0,    1.0,    0.0,    0.0,
110                                        0.0,    0.0,    1.0,    0.0,
111                                        0.0,    0.0,    0.0,    1.0)
112            }
113        }
114
115        Rectangle {
116            width: 16
117            height: 48
118            color: "seagreen"
119            antialiasing: true
120            opacity: sliderToggler.buttonOpacity
121            anchors.top: parent.verticalCenter
122            anchors.right: sliderToggler.checked ?  parent.right : parent.horizontalCenter
123            transform: Matrix4x4 {
124                property real d : sliderToggler.checked ? -1.0 : 1.0
125                matrix:    Qt.matrix4x4(1.0,  d * sliderToggler.shear,    0.0,    0.0,
126                                        0.0,    1.0,    0.0,    0.0,
127                                        0.0,    0.0,    1.0,    0.0,
128                                        0.0,    0.0,    0.0,    1.0)
129            }
130        }
131    }
132
133    Rectangle {
134        id: sliderContainer
135        height: parent.height
136        width: sliderRow.width + 10
137        visible: sliderToggler.checked
138        color: Qt.rgba( 0, 191 / 255.0, 255 / 255.0, 0.07)
139
140        property var labelBorderColor: "transparent"
141        property var slidersHeight : sliderContainer.height
142                                     - rowSliderValues.height
143                                     - rowSliderLabels.height
144                                     - sliderColumn.spacing * 2
145                                     - sliderColumn.topPadding
146                                     - sliderColumn.bottomPadding
147
148        Column {
149            id: sliderColumn
150            spacing: 10
151            topPadding: 16
152            bottomPadding: 48
153            anchors.centerIn: parent
154
155            // the sliders value labels
156            Row {
157                id: rowSliderValues
158                spacing: sliderRow.spacing
159                width: sliderRow.width
160                height: 32
161                property real entryWidth: zoomSlider.width
162
163                Rectangle{
164                    color: labelBackground
165                    height: parent.height
166                    width: parent.entryWidth
167                    border.color: sliderContainer.labelBorderColor
168                    Label {
169                        id: labelZoomValue
170                        text: zoomSlider.value.toFixed(3)
171                        font.pixelSize: fontSize
172                        rotation: -90
173                        anchors.centerIn: parent
174                    }
175                }
176                Rectangle{
177                    color: labelBackground
178                    height: parent.height
179                    width: parent.entryWidth
180                    border.color: sliderContainer.labelBorderColor
181                    Label {
182                        id: labelBearingValue
183                        text: bearingSlider.value.toFixed(2)
184                        font.pixelSize: fontSize
185                        rotation: -90
186                        anchors.centerIn: parent
187                    }
188                }
189                Rectangle{
190                    color: labelBackground
191                    height: parent.height
192                    width: parent.entryWidth
193                    border.color: sliderContainer.labelBorderColor
194                    Label {
195                        id: labelTiltValue
196                        text: tiltSlider.value.toFixed(2)
197                        font.pixelSize: fontSize
198                        rotation: -90
199                        anchors.centerIn: parent
200                    }
201                }
202                Rectangle{
203                    color: labelBackground
204                    height: parent.height
205                    width: parent.entryWidth
206                    border.color: sliderContainer.labelBorderColor
207                    Label {
208                        id: labelFovValue
209                        text: fovSlider.value.toFixed(2)
210                        font.pixelSize: fontSize
211                        rotation: -90
212                        anchors.centerIn: parent
213                    }
214                }
215            } // rowSliderValues
216
217            // The sliders row
218            Row {
219                spacing: -10
220                id: sliderRow
221                height: sliderContainer.slidersHeight
222
223                C2.Slider {
224                    id: zoomSlider
225                    height: parent.height
226                    orientation : Qt.Vertical
227                    from : containerRow.mapSource.minimumZoomLevel
228                    to : containerRow.mapSource.maximumZoomLevel
229                    value : containerRow.mapSource.zoomLevel
230                    onValueChanged: {
231                            containerRow.mapSource.zoomLevel = value
232                    }
233                }
234                C2.Slider {
235                    id: bearingSlider
236                    height: parent.height
237                    from: 0
238                    to: 360
239                    orientation : Qt.Vertical
240                    value: containerRow.mapSource.bearing
241                    onValueChanged: {
242                        containerRow.mapSource.bearing = value;
243                    }
244                }
245                C2.Slider {
246                    id: tiltSlider
247                    height: parent.height
248                    orientation : Qt.Vertical
249                    from: containerRow.mapSource.minimumTilt;
250                    to: containerRow.mapSource.maximumTilt
251                    value: containerRow.mapSource.tilt
252                    onValueChanged: {
253                        containerRow.mapSource.tilt = value;
254                    }
255                }
256                C2.Slider {
257                    id: fovSlider
258                    height: parent.height
259                    orientation : Qt.Vertical
260                    from: containerRow.mapSource.minimumFieldOfView
261                    to: containerRow.mapSource.maximumFieldOfView
262                    value: containerRow.mapSource.fieldOfView
263                    onValueChanged: {
264                        containerRow.mapSource.fieldOfView = value;
265                    }
266                }
267            } // Row sliders
268
269            // The labels row
270            Row {
271                id: rowSliderLabels
272                spacing: sliderRow.spacing
273                width: sliderRow.width
274                property real entryWidth: zoomSlider.width
275                property real entryHeight: 64
276
277                Rectangle{
278                    color: labelBackground
279                    height: parent.entryHeight
280                    width: parent.entryWidth
281                    border.color: sliderContainer.labelBorderColor
282                    Label {
283                        id: labelZoom
284                        text: "Zoom"
285                        font.pixelSize: fontSize
286                        rotation: -90
287                        anchors.centerIn: parent
288                    }
289                }
290
291                Rectangle{
292                    color: labelBackground
293                    height: parent.entryHeight
294                    width: parent.entryWidth
295                    border.color: sliderContainer.labelBorderColor
296                    Label {
297                        id: labelBearing
298                        text: "Bearing"
299                        font.pixelSize: fontSize
300                        rotation: -90
301                        anchors.centerIn: parent
302                    }
303                }
304                Rectangle{
305                    color: labelBackground
306                    height: parent.entryHeight
307                    width: parent.entryWidth
308                    border.color: sliderContainer.labelBorderColor
309                    Label {
310                        id: labelTilt
311                        text: "Tilt"
312                        font.pixelSize: fontSize
313                        rotation: -90
314                        anchors.centerIn: parent
315                    }
316                }
317                Rectangle{
318                    color: labelBackground
319                    height: parent.entryHeight
320                    width: parent.entryWidth
321                    border.color: sliderContainer.labelBorderColor
322                    Label {
323                        id: labelFov
324                        text: "FoV"
325                        font.pixelSize: fontSize
326                        rotation: -90
327                        anchors.centerIn: parent
328                    }
329                }
330            } // rowSliderLabels
331        } // Column
332    } // sliderContainer
333} // containerRow
334