RouteDialog.qml Example File

mapviewer/content/dialogs/RouteDialog.qml
/****************************************************************************
**
** Copyright (C) 2013 Digia Plc and/or its subsidiary(-ies).
** Contact: http://www.qt-project.org/legal
**
** This file is part of the examples of the Qt Toolkit.
**
** $QT_BEGIN_LICENSE:BSD$
** You may use this file under the terms of the BSD license as follows:
**
** "Redistribution and use in source and binary forms, with or without
** modification, are permitted provided that the following conditions are
** met:
**   * Redistributions of source code must retain the above copyright
**     notice, this list of conditions and the following disclaimer.
**   * Redistributions in binary form must reproduce the above copyright
**     notice, this list of conditions and the following disclaimer in
**     the documentation and/or other materials provided with the
**     distribution.
**   * Neither the name of Digia Plc and its Subsidiary(-ies) nor the names
**     of its contributors may be used to endorse or promote products derived
**     from this software without specific prior written permission.
**
**
** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
**
** $QT_END_LICENSE$
**
****************************************************************************/

import QtQuick 2.0
import QtLocation 5.3
import QtLocation.examples 5.0

Dialog {
    id: dialog

    title: "Route"
    gap: 6

    property alias startLatitude: latFrom.text
    property alias startLongitude: longFrom.text
    property alias endLatitude: latTo.text
    property alias endLongitude: longTo.text
    property alias startStreet: streetFrom.text
    property alias startCity: cityFrom.text
    property alias startCountry: countryFrom.text
    property alias endStreet: streetTo.text
    property alias endCity: cityTo.text
    property alias endCountry: countryTo.text
    property alias byCoordinates: coord.enabled

    property int travelMode: RouteQuery.CarTravel             // CarTravel, PedestrianTravel, BicycleTravel, PublicTransitTravel, TruckTravel
    property int routeOptimization: RouteQuery.FastestRoute   // ShortestRoute, FastestRoute, MostEconomicRoute, MostScenicRoute
    property variant features: []                             // NoFeature, TollFeature, HighwayFeature, PublicTransitFeature, FerryFeature, TunnelFeature, DirtRoadFeature, ParksFeature, MotorPoolLaneFeature
    property color fontColorNormal: "#242424"
    property color fontColorDisabled: "lightgrey"
    property color backgroundColorNormal: "#ECECEC"
    property color backgroundColorEnabled: "#98D0FC"
    property color backgroundColorDisabled: "grey"

    item: Flickable {
        id: f

        clip: true
        interactive: height + gap < contentHeight
        implicitHeight: contentItem.height
        contentHeight: contentItem.height
        contentWidth: contentItem.width

        Item {
            id: contentItem
            width: f.width
            height: childrenRect.height

            Column {
                id: options
                spacing: gap
                width: parent.width

                states: [
                    State {
                        name: "Address"
                        PropertyChanges { target: coord; enabled: false }
                        PropertyChanges { target: address; enabled: true }
                    }
                ]

                //by coordinates
                Row {
                    id: row1
                    spacing: gap
                    Image {
                        id: optionButtonCoord
                        anchors.verticalCenter:parent.verticalCenter
                        source: coord.enabled ? "../../resources/option_button_selected.png" : "../../resources/option_button.png"
                        MouseArea {
                            anchors.fill: parent
                            onClicked: { options.state = "" }
                        }
                    }

                    Rectangle {
                        id: coord
                        color: enabled ? backgroundColorEnabled : backgroundColorDisabled
                        radius: 5
                        width:options.width - optionButtonCoord.width - row1.spacing
                        height: longTo.y + longTo.height + gap
                        enabled: true

                        //start point
                        Text {
                            id: fromLabel;
                            font.bold: true;
                            enabled: coord.enabled
                            anchors {
                                top: latFrom.top
                                topMargin:latFrom.height + gap/6 - fromLabel.height/2
                                left: parent.left;
                                leftMargin: gap
                            }
                            text: "From"
                            color: enabled ? fontColorNormal : fontColorDisabled
                            font.pixelSize: 14
                        }

                        TextWithLabel {
                            id: latFrom
                            width: parent.width - fromLabel.width - gap*3
                            text: "-27.575"
                            label: "latitude"
                            enabled: coord.enabled
                            anchors {
                                left: fromLabel.right
                                leftMargin: gap
                                top: parent.top
                                topMargin:gap
                            }
                        }

                        TextWithLabel {
                            id: longFrom
                            width: latFrom.width
                            text: "153.088"
                            label: "longitude"
                            enabled: coord.enabled
                            anchors {
                                left: latFrom.left
                                top: latFrom.bottom
                                topMargin:gap/3
                            }
                        }

                        //end point
                        Text {
                            id: toLabel;
                            font.bold: true;
                            width: fromLabel.width
                            enabled: coord.enabled
                            anchors {
                                top: latTo.top
                                topMargin:latTo.height + gap/6 - toLabel.height/2
                                left: parent.left;
                                leftMargin: gap;
                            }
                            text: "To"
                            color: enabled ? fontColorNormal : fontColorDisabled
                            font.pixelSize: 14
                        }

                        TextWithLabel {
                            id: latTo
                            width: latFrom.width
                            text: "-27.465"
                            label: "latitude"
                            enabled: coord.enabled
                            anchors {
                                left: toLabel.right
                                leftMargin: gap
                                top: longFrom.bottom
                                topMargin:gap
                            }
                        }

                        TextWithLabel {
                            id: longTo
                            width: latTo.width
                            text: "153.023"
                            label: "longitude"
                            enabled: coord.enabled
                            anchors {
                                left: latTo.left
                                top: latTo.bottom
                                topMargin:gap/3
                            }
                        }
                    }
                }

                //by address
                Row {
                    id: row2
                    spacing: gap

                    Image {
                        id: optionButtonAddress
                        source: address.enabled ? "../../resources/option_button_selected.png" : "../../resources/option_button.png"
                        anchors.verticalCenter: parent.verticalCenter
                        MouseArea {
                            anchors.fill: parent
                            onClicked: { options.state = "Address" }
                        }
                    }

                    Rectangle {
                        id: address
                        color: enabled ? backgroundColorEnabled : backgroundColorDisabled
                        radius: 5
                        width:coord.width
                        height: countryTo.y + countryTo.height + gap
                        enabled: false

                        //start point
                        Text {
                            id: fromLabel2;
                            font.bold: true;
                            enabled: address.enabled
                            anchors {
                                top: cityFrom.top
                                left: parent.left;
                                leftMargin: gap
                            }
                            text: "From"
                            color: enabled ? fontColorNormal : fontColorDisabled
                            font.pixelSize: 14
                        }

                        TextWithLabel {
                            id: streetFrom
                            width: parent.width - fromLabel2.width - gap*3
                            text: "Brandl st"
                            label: "street"
                            enabled: address.enabled
                            anchors {
                                left: fromLabel2.right
                                leftMargin: gap
                                top: parent.top
                                topMargin:gap
                            }
                        }

                        TextWithLabel {
                            id: cityFrom
                            width: streetFrom.width
                            text: "Eight Mile Plains"
                            label: "city"
                            enabled: address.enabled
                            anchors {
                                left: streetFrom.left
                                top: streetFrom.bottom
                                topMargin:gap/3
                            }
                        }

                        TextWithLabel {
                            id: countryFrom
                            width: streetFrom.width
                            text: "Australia"
                            label: "country"
                            enabled: address.enabled
                            anchors {
                                left: streetFrom.left
                                top: cityFrom.bottom
                                topMargin:gap/3
                            }
                        }

                        //end point
                        Text {
                            id: toLabel2;
                            font.bold: true;
                            enabled: address.enabled
                            anchors {
                                top: cityTo.top
                                left: parent.left;
                                leftMargin: gap
                            }
                            text: "To"
                            color: enabled ? fontColorNormal : fontColorDisabled
                            font.pixelSize: 14
                        }

                        TextWithLabel {
                            id: streetTo
                            width: parent.width - fromLabel2.width - gap*3
                            text: "Heal st"
                            label: "street"
                            enabled: address.enabled
                            anchors {
                                left: fromLabel2.right
                                leftMargin: gap
                                top: countryFrom.bottom
                                topMargin:gap
                            }
                        }

                        TextWithLabel {
                            id: cityTo
                            width: streetTo.width
                            text: "New Farm"
                            label: "city"
                            enabled: address.enabled
                            anchors {
                                left: streetTo.left
                                top: streetTo.bottom
                                topMargin:gap/3
                            }
                        }

                        TextWithLabel {
                            id: countryTo
                            width: streetTo.width
                            text: "Australia"
                            label: "country"
                            enabled: address.enabled
                            anchors {
                                left: streetTo.left
                                top: cityTo.bottom
                                topMargin:gap/3
                            }
                        }
                    }
                }
            }

            Row {
                id: routeOptions
                anchors.top: options.bottom
                anchors.topMargin: gap
                anchors.left: parent.left
                anchors.leftMargin: gap
                width: parent.width - gap*2
                height: checkboxToll.height*2 + gap
                spacing: 0
                Column {//travel mode
                    spacing: gap/3
                    height: parent.height
                    width: parent.width*0.325
                    Optionbutton {
                        id: optionbuttonVehicle
                        width: parent.width
                        text: "Vehicle"
                        selected: true
                        onClicked: {
                            travelMode = RouteQuery.CarTravel
                            optionbuttonPedestrian.selected = false
                        }
                    }
                    Optionbutton {
                        id: optionbuttonPedestrian
                        width: parent.width
                        text: "Pedestrian"
                        onClicked: {
                            travelMode = RouteQuery.PedestrianTravel
                            optionbuttonVehicle.selected = false
                        }
                    }
                }

                Column {//Optimization
                    spacing: gap/3
                    height: parent.height
                    width: parent.width*0.275
                    Optionbutton {
                        id: optionbuttonFastest
                        width: parent.width
                        text: "Fastest"
                        selected: true
                        onClicked: {
                            routeOptimization = RouteQuery.FastestRoute
                            optionbuttonShortest.selected = false
                        }
                    }
                    Optionbutton {
                        id: optionbuttonShortest
                        width: parent.width
                        text: "Shortest"
                        onClicked: {
                            routeOptimization = RouteQuery.ShortestRoute
                            optionbuttonFastest.selected = false
                        }
                    }
                }

                Column {//Route features
                    id: routeFeatures
                    spacing: gap/3
                    height: parent.height
                    width: parent.width*0.4
                    Checkbox {
                        id: checkboxToll
                        width: parent.width
                        text: "Avoid toll roads"
                        onSelectedChanged: {routeFeatures.updateRouteFeatures()}
                    }

                    Checkbox {
                        id: checkboxHighways
                        width: parent.width
                        text: "Avoid highways"
                        onSelectedChanged: {routeFeatures.updateRouteFeatures()}
                    }

                    function updateRouteFeatures(){
                        features = []
                        var myArray = new Array

                        if (checkboxToll.selected) myArray.push(RouteQuery.TollFeature)
                        if (checkboxHighways.selected) myArray.push(RouteQuery.HighwayFeature)

                        features = myArray
                    }
                }
            }
        }
    }

    onClearButtonClicked: {
        if (byCoordinates == true){
            latFrom.text = ""
            longFrom.text = ""
            latTo.text = ""
            longTo.text = ""
        }
        else {
            streetFrom.text = ""
            cityFrom.text = ""
            countryFrom.text = ""
            streetTo.text = ""
            cityTo.text = ""
            countryTo.text = ""
        }
    }
}

© 2015 The Qt Company Ltd. Documentation contributions included herein are the copyrights of their respective owners. The documentation provided herein is licensed under the terms of the GNU Free Documentation License version 1.3 as published by the Free Software Foundation. Qt and respective logos are trademarks of The Qt Company Ltd in Finland and/or other countries worldwide. All other trademarks are property of their respective owners.