RouteDialog.qml Example File

 /****************************************************************************
 **
 ** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies).
 ** Contact: http://www.qt-project.org/
 **
 ** 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 Nokia Corporation 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.0
 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 = ""
         }
     }
 }