// Copyright (C) 2017 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only

/*!
    \example wearable
    \keyword Qt Quick Controls - Wearable Demo
    \title Qt Quick Controls - Wearable Demo
    \keyword Qt Quick Controls 2 - Wearable Demo
    \ingroup qtquickcontrols-examples
    \examplecategory {Embedded}
    \examplecategory {Mobile}
    \brief Demonstrates an application launcher designed for wearable devices.

    \image qtquickcontrols-wearable.png

    The \e {Wearable Demo} consists of an application launcher and a collection
    of small and simple example applications aimed at wearable devices.

    \section1 Structure

    The main .qml file, \c wearable.qml, consists of an ApplicationWindow, a StackView
    for a stack-based navigation model, and buttons for interactive navigation.

    \snippet wearable/Wearable/Main.qml window start
    \dots 4
    \snippet wearable/Wearable/Main.qml stackview start
    \dots 8
    \snippet wearable/Wearable/Main.qml onLaunched connection
    \dots 8
    \snippet wearable/Wearable/Main.qml stackview end
    \snippet wearable/Wearable/Main.qml DemoMode
    \snippet wearable/Wearable/Main.qml DemoModeIndicator
    \snippet wearable/Wearable/Main.qml MouseArea
    \snippet wearable/Wearable/Main.qml window end

    \section1 Styling

    The demo uses a custom \l {Styling Qt Quick Controls}{Qt Quick Controls 2 style}
    embedded into the demo's resources. The custom style is implemented for a
    few controls only, as it is specific to this particular demo. It uses a
    singleton type for various styling attributes, such as fonts and colors.

    \list
        \li \c WearableStyle/PageIndicator.qml
        \li \c WearableStyle/Slider.qml
        \li \c WearableStyle/Switch.qml
        \li \c WearableStyle/UIStyle.qml
    \endlist

    The style is applied in \c main() in \c wearable.cpp:

    \snippet wearable/wearable.cpp style

    The main benefit of using the built-in styling system is that the style
    selection is fully transparent to the application code. There is no need
    to import a specific folder that contains the styled controls. This way,
    the application can be run with other styles too.

    \section1 Launcher Page

    The application launcher is implemented using a circular PathView in
    \c LauncherPage.qml. Each application is in a separate .qml file,
    which are added to the ListModel on the launcher page. For some applications
    a fallback option is provided to handle optional dependencies like QtLocation.

    \snippet wearable/Wearable/LauncherPage.qml LauncherPage start
    \dots 4
    \snippet wearable/Wearable/LauncherPage.qml Model start
    \snippet wearable/Wearable/LauncherPage.qml Model mid
    \dots 8
    \snippet wearable/Wearable/LauncherPage.qml Model end
    \snippet wearable/Wearable/LauncherPage.qml Delegate start
    \dots 8
    \snippet wearable/Wearable/LauncherPage.qml Delegate mid
    \dots 8
    \snippet wearable/Wearable/LauncherPage.qml Delegate end
    \dots 4
    \snippet wearable/Wearable/LauncherPage.qml LauncherPage end

    \section1 Applications

    The applications are designed for touch input based on what input methods
    or communication means are typically offered by wearable devices.

    Most applications have their own JavaScript files that act as dummy
    application backends. They demonstrate how to fetch and manipulate or
    convert external data. For example, the \c Weather application reads data
    from local files using \l XMLHttpRequest. These files were generated by
    storing responses from remote servers in JSON format. This code can be
    easily modified to acquire data from remote servers.

    \section2 Navigation

    This application uses the QtLocation module to display a route within Oslo.
    If QtLocation is not installed, it shows a static image as the map and route
    information based on a JSON file. Currently, it is not possible to specify
    the source and destination from within the application, but it can be added
    based on the device's capabilities. For example, you can collect necessary
    info. using one of the following methods:
    \list
    \li Implement additional screens to collect input from user
    \li Communicate with another device (smart phone or PC)
        over Bluetooth or WiFi channels.
    \endlist

    \section2 Weather

    This application displays weather information such as temperature, sunrise
    and sunset times, air pressure, and so on. This information is obtained
    from \l {https://openweathermap.org/} using its REST API. The API response is
    in JSON format, which is parsed using JavaScript by the application. This
    application can also be modified by adding screens to obtain weather data for
    a given location.

    \section2 World Clock

    This application displays a world clock for different cities. As of now, the
    list of cities is hard-coded in the application, but that can be changed based
    on the input capabilities of the device.

    \section2 Others

    The remaining applications return static data for now, but they can be
    modified to process response data obtained from respective services.

    \include examples-run.qdocinc
*/
