Flickr (QML)

The Flickr example shows how to use the user's current location to fetch local content from a web service.

This is a small example, illustrating one of the very core parts of the Qt Location API: the ability to retrieve and use the user's current geographic location.

Key QML elements shown in this example:

• PositionSource
• XmlListModel

Retrieving the Current Location

Retrieving the user's current location is achieved using the PositionSource element. In this example, we instantiate the PositionSource as part of the GeoTab component (the floating "window" describing current location and status).

     PositionSource {
         id: positionSource
         onPositionChanged: { planet.source = "images/sun.png"; }
     }

When the "Locate and update" button is pressed, we first interrogate the PositionSource to check if it has an available backend for positioning data. If it does not, we fall back to using a pre-recorded NMEA log for demonstration. We then instruct the PositionSource to update.

     Button {
         id: locateButton
         text: "Locate & update"
         onClicked: {
             if (positionSource.supportedPositioningMethod ==
                     PositionSource.NoPositioningMethod) {
                 positionSource.nmeaSource = "nmealog.txt";
                 sourceText.text = "(filesource): " + printableMethod(positionSource.supportedPositioningMethod);
             }
             positionSource.update();
         }
     }

To share the new position data with the rest of the application, we use properties that we have created on the GeoTab component:

     property double latitude
     property double longitude
     latitude: positionSource.position.coordinate.latitude
     longitude: positionSource.position.coordinate.longitude

The longitude and latitude values retrieved here are eventually set on in properties on the RestModel component. The RestModel is an XmlListModel, which retrieves XML data from a URL and creates a data model by performing XPath queries on it.

In this case, it retrieves data from the Flickr REST API online, based on our current location

 XmlListModel {
     property double latitude: 0
     property double longitude: 0

     source: "http://api.flickr.com/services/rest/?" +
             "min_taken_date=2000-01-01+0:00:00&" +
             "extras=date_taken&" +
             "method=flickr.photos.search&" +
             "per_page=30&" +
             "sort=date-taken-desc&" +
             "api_key=e36784df8a03fea04c22ed93318b291c&" +
             "lat=" + latitude + "&lon=" + longitude;
     query: "/rsp/photos/photo"

     XmlRole { name: "title"; query: "@title/string()" }
     XmlRole { name: "datetaken"; query: "@datetaken/string()" }
     XmlRole { name: "farm"; query: "@farm/string()" }
     XmlRole { name: "server"; query: "@server/string()" }
     XmlRole { name: "id"; query: "@id/string()" }
     XmlRole { name: "secret"; query: "@secret/string()" }
 }

This model data is then shown in a variety of Qt Quick views to produce the example application.

Files:

• declarative/flickr/flickr-90.qml
• declarative/flickr/flickr.qml
• declarative/flickr/qmllocationflickr.cpp
• declarative/flickr/flickrcommon/Progress.qml
• declarative/flickr/flickrcommon/RestModel.qml
• declarative/flickr/flickrcommon/ScrollBar.qml
• declarative/flickr/flickrcommon/Slider.qml
• declarative/flickr/flickrmobile/Button.qml
• declarative/flickr/flickrmobile/GeoTab.qml
• declarative/flickr/flickrmobile/GridDelegate.qml
• declarative/flickr/flickrmobile/ImageDetails.qml
• declarative/flickr/flickrmobile/ListDelegate.qml
• declarative/flickr/flickrmobile/TitleBar.qml
• declarative/flickr/flickrmobile/ToolBar.qml
• declarative/flickr/flickr.pro
• declarative/flickr/flickr.qmlproject
• declarative/flickr/flickr.qrc