Skip navigation
All Places > AppStudio for ArcGIS > Blog > 2017 > September
2017

In this tutorial, you will learn how to quickly create a native app that loads a public Web Map and display current device location on a map using AppStudio for ArcGIS. We will take advantage of ArcGIS Runtime for the mapping, one of the five ready-to-use Material Design Layouts available for the app and device GPS for location.  

 

Time required: 10 - 20 mins (if the prerequisite software is installed)

 

You will create an app that looks like the illustration below, the main features of this app include:

  • Load a public Web Map
  • Tap on the Add button to display Web Map name on a pop-up
  • Tap on the Home button to return to the initial Web Map extent
  • Tap on the Location button to display the current device location

 

Final result:

 

Code behind:

 

Getting ready:

  1. You will need AppStudio Desktop (Standard). If you are new or have not yet licensed AppStudio Standard please watch this tutorial to get started with a trial account.
  2. You will need to download resources (attachment) to follow the tutorial.

 

Step 0. Create a new App:

Let’s start from one of the readily available layouts in the AppStudio Desktop called "Simple Layout(Material Design)".

  • Open AppStudio Desktop
  • Click on the New App Button
  • Click on the Layout tab
  • Choose Simple Layout (Material Design) and click on the Create button
  • Once the app is created, click on the Edit Title icon on the top of the side panel to rename the app.  We can call it "My first app", click on the Save Changes icon.  
  • Click on the Edit icon on the side panel to open the Qt Creator IDE
  • By default, the first QML file used by the app will be loaded into the Editor (MyApp.qml)

 

Step1. Import statements

You can tell the app which modules, components, or plugins you want to use by adding an import statement. For example, to use the material style in the app, we need to add the import statement import QtQuick.Controls.Material 2.1.  In this step, you need to add three more import statements in order to use ArcGIS Runtime as well as enable location-based function.

 

//ArcGIS Runtime
import Esri.ArcGISRuntime 100.1

//GPS
import QtPositioning 5.8
import QtSensors 5.2

 

Step 2. Change primary color property. 

Material primary color can be used to develop your branding color. Material accent color holds the accent of the theme, it can be same as the primary color.  In this step, let’s change the primary color from "#3F51B5" to "#8f499c"

 

    readonly property color primaryColor: "#8f499c"

Keyboard shortcuts to save changes

Windows: Ctrl + S

MacOS: command + S

 

Keyboard shortcuts to run apps in Qt Creator 

Windows: Shift + Alt + R

MacOS: shift + option + R

 

Your app should look like this at this point  

Step 3. Header

The Simple Material Design Layout already has a header on it, therefore, we do not need to add any additional code in this step. I want to point out that ToolBar QML type is used to define the header.  The header height is 56 units and the background color is Material.Primary color.  Inside the ToolBar, RowLayout QML type was used to position the contents.

 

Step 4. Load a Public Web Map

In this step we will be adding a map to the app using ArcGIS Runtime. Remember that the import was added earlier in Step 1.

 

The MapView is a virtual class from the ArcGIS Runtime that renders data in a map and allows users to interact with the map. The initUrl property inside the Map QML type is used to initialize the web map. The initUrl can be item details page url, map view page url, or sharing data url.  

 

Please add the following code below the comment // TODO:-Add Code here to the MyApp.qml file

under the comment.// TODO:-
Add Code here
under the comment.// TODO:-
Add Code here
under the comment.// TODO:-
Add Code hereto MyApp.qml file

 

        MapView{
            id:mapView
            anchors.fill: parent
            Map{
                id:map
                initUrl: "http://www.arcgis.com/home/item.html?id=7811ccdb71c84635a7a42eb020403615"
            }
        }

 

Step 5. Add Web Map Name to the Pop-Up

Let us replace the default text shown while clicking on the Add icon with the Web Map title. To do this, go to Dialog component and replace the Label text property with the following code. Note that the value is a property binding to the item title of the webmap as loaded by the Map (this is really awesome and so convenient. QML rocks!!!)

 

text: qsTr(mapView.map.item.title)

 

            

 

Your app should look like this at this point 

Step 6. Add Float Action Button Component

Now let's change gears a bit and try to structure our app by using re-usable components for the UI like buttons.

 

In QML, any snippet of code may become a reusable component. A file-based component is created by putting a QML element into a separate QML file. The file name is the element name and you can use the component by calling its file name. I have created a file-based reusable float action button component for Home button and Location button. The attached folder contains reusable component file FloatActionButton.qml. Once you have downloaded the attachment, you can add this file to the app project.  To do this, go to AppStudio Desktop and choose the app that you are working on

  • Click on the Files icon on the side panel
  • Create a new folder and name it “controls”
  • Copy and Paste FloatActionButton.qml file to the “controls” folder

You should be able to see this in the Qt Creator

 

 

Now that the FloatArctionButton component is added to the project, you might wonder how to use it? First of all, you need to add the import statement.  After that, you can directly call the file name which is same as the component name FloatActionButton in the main file (MyApp.qml) to use the Float Action Button component.

import "controls"

 

Step 7. Add Home Button and location Button Image

The next step is adding the Home button and Location button image to this project. (please find images in the attached folder) To do this,

  • Go to AppStudio Desktop and choose the app that we are working on.
  • Click on the Files icon on the side panel
  • Copy and paste home.png and location.png to the assets folder.

You should see this in the Qt Creator

 

 

Step 8. Add Home Button

We will use a positioning elements ColumnLayout to arrange Home button and Location button by stacking them on top of each other. Let’s add the following syntax inside the MapView QML type and below the Map QML type.

 

            ColumnLayout{
                anchors{
                    right: parent.right
                    rightMargin: 16 * scaleFactor
                    verticalCenter: parent.verticalCenter
                }
            }

 

Inside the ColumnLayout QML type, let’s add the Home button by calling the Float Action Button component name  FloatActionButton.  Please add the following code.  Note that when clicking on the Home button, we will call the setViewpointWithAnimationCurve method, it is used to return to initial Web Map extent. The first parameter of this method map.initialViewpoint sets the viewpoint, the second parameter 1.0 is the number of animation seconds, and the last parameter Enums.AnimationCurveEaseInOutCubic is a type of animation. 

 

                FloatActionButton{
                    id:homeButton
                    imageSource: "./assets/home.png"
                    onIced: {
                        mapView.setViewpointWithAnimationCurve(map.initialViewpoint, 1.0, Enums.AnimationCurveEaseInOutCubic)
                    }
                }

 

 

 

Your app should look like this at this point 

 

Step 9. Set Up Location Source

In this step, we need to set up location source by adding LocationDisplay QML Type.  PositionSource is used to provide the device’s current position.  The import for this was already added in Step 1. Please insert the following code below the ColumnLayout QML type.

 

            locationDisplay {
                positionSource: PositionSource {
                }
            }

 

Step 10. Add Location Button

The last step is to add a Location button below the Home button by adding the following code.  Note that there are three different location display modes in the ArcGIS Runtime. In this case, we are using Enums.LocationDisplayAutoPanModeRecenter.

 

                FloatActionButton{
                    id:locationButton
                    imageSource: "./assets/location.png"
                       onIced: {
                          if (!mapView.locationDisplay.started) {
                              mapView.locationDisplay.start()
                              mapView.locationDisplay.autoPanMode = Enums.LocationDisplayAutoPanModeRecenter
                              colorOverlay.color = "steelblue"
                          }else {
                              mapView.locationDisplay.stop()
                              colorOverlay.color = "#4c4c4c"
                        }
                    }
                }

 

 

 

Since this is an ArcGIS Runtime based app do not forget to add a free lite license (check the tip below, it's pretty easy)

To set a free Runtime Lite license (remove watermark from the map):

1. Click on the Settings icon on the side panel

2. Click on the Advanced button

3. Click on the Set Lite License button and Close Advanced Settings

4. Click on the Apply button

 

And that it, it is that easy to create your own mapping application with AppStudio. Now you can use AppStudio Player to test the app on different devices and also use Cloud Make to build executables of your app to distribute them in the store or within your own enterprise/business.

 

Interested to learn more about how to write similar apps as in this tutorial or even more advanced desktop or mobile apps with AppStudio, then you will not want to miss watching and learning from the recent recordings from the two-day workshop (Yes its free ).  Here is the link for about 12 hours of content to become an expert in writing apps. Happy coding!

 

                                

 

Summary 

 

Text to Speech module enables applications created with AppStudio to support accessibility features such as text-to-speech with voice modulation on four speech attributes: volume, pitch, speech rate and locale. Text to Speech module is useful for providing audio feedback to end users. The most common use case where text-to-speech comes in handy is when the end-user is driving while the app is navigating the direction, in this scenario, the navigation application can read out the turn-by-turn directions.  

 

Text to Speech functionality was first introduced as a Beta feature in AppFramework as part of AppStudio 1.4. What this means is we are looking for your feedback, use cases and what you want us to improve on. Future changes may affect your app and may require additional changes to support it. 

 

Since then, we have been adding a lot of new features to Text to Speech functionality but it is still in Beta. In AppStudio 2.0, you can

  • Convert text into speech 
  • Control voice modulation such as volume, pitch and rate/speed
  • Choose the locale and language of the speech
  • Choose the voice engine used 

 

To get a taste of the Text to Speech functionality, we will be covering the following

  1. How to add Text to Speech functionality in your app
  2. Minimal app - Text to Speech sample
  3. Voice Modulation control: volume, pitch, rate
  4. Locales and language
  5. Voice engine

 

1. How to add Text to Speech functionality in your app

 

...
import ArcGIS.AppFramework.Speech 1.0

...


TextToSpeech {
        id: textToSpeech
        ....
}

...


Button {

        onClicked: {
                textToSpeech.say("This text will be converted in to speech");
        }
}
....

 

2. Minimal app - Text to Speech sample

 

This minimal working sample enables user to enter any text in the text area, and click on the button "Say It", and the text will be converted to speech. It shows the animation while the it is talking and you can adjust the volume of the voice using the Volume slider. 

 

This sample is available in AppStudio Desktop, you can find it by clicking on the "New App" button and search for "Text to Speech". The source code is available in AppStudio Samples GitHub Page, Github - esri/app-studio-samples - Text to Speech.

 

 

3. Voice Modulation control: volume, pitch, rate

 

You can also control the voice modulation such as the volume, pitch and rate or the speed of the speech. 

 

PropertySlider {
            id: pitchSlider

            onValueChanged: {
                textToSpeech.pitch = value;
            }
}

PropertySlider {
            id: rateSlider

            onValueChanged: {
                textToSpeech.rate = value;
            }
        }

PropertySlider {
            id: volumeSlider

            onValueChanged: {
                textToSpeech.volume = value;
            }
}

 

4. Locales and Language

 

You can set the locales and language setting 

 

textToSpeech.locales = locales;

 

5. Voice Engine

 

You can also choose from available Voice Engines  

ComboBox {
       model: Speech.availableEngines
}

 

References: