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

/*!
    \page qtdesignstudio-mcu-treadmill-example.html
    \ingroup studioexamples

    \title MCU Treadmill
    \brief Illustrates how to import and use the MCU Treadmill design from Figma to \QDS.

    \image {mcu-treadmill-overview.webp}{MCU Treadmill overview}

    MCU Treadmill is designed in Figma. You can bring the design to \QDS and create
    a responsive MCU Treadmill application.

    You should have these prerequisites available:
    \list
        \li \QDS Enterprise license.
        \li \QDS 4.7 or above.
    \endlist

    \section1 Getting the MCU Treadmill design to Figma

    \list 1
        \li Get the optimized MCU Treadmill for Figma design from \l {https://git.qt.io/public-demos/qtdesign-studio/-/blob/master/examples/TreadmillMcuDemo/figmadesign/McuDemo.fig} {here}.
        \li Go to \l {https://www.figma.com/}{Figma} and log in.
        \li Open the downloaded MCU Treadmill design in Figma.
    \endlist

    \section1 Importing the MCU Treadmill design from Figma

    To import the MCU Treadmill design for \QDS, first set up \l {Setting up Qt Bridge for Figma} {\QBF}.

    \list 1
        \li Select the MCU Trademill project in Figma.
        \li Select \uicontrol {Main Menu} > \uicontrol Plugins > \uicontrol {\QBF}.
            \image {figma-qtbridge-plugin.webp}{\QBF plugin}.

        \li Select \uicontrol Export, then \uicontrol Save. By default, the \c .qtbridge
            file is saved as \c mcuDemo.qtbridge.
            \image {figma-qtbridge-export.webp}{Export Figma design with \QBF}

        \li Select \uicontrol Close, then exit Figma.
    \endlist

    \section1 Getting the MCU Treadmill design in \QDS

    After importing the MCU Treadmill design from Figma:
    \list 1
        \li Create a new \QDS project for MCU.
            \image {qds-new-mcu-project.webp} {Create new MCU project in \QDS}

        \li Drag the \c .qtbridge file (\c mcuDemo.qtbridge) to the \uicontrol 2D view.
            \image {qtbridge-mcu-import-warning.webp}{Qt Bridge asset import warning in \QDS}

        \li Select \uicontrol Yes, then select \uicontrol Import.
            \image {qtbridge-mcu-asset-import.webp}{Qt Bridge asset import in \QDS}

        \li In the following notification, select \uicontrol No. This replaces the existing
            \c Screen01.ui.qml file with the imported file.
            \image {qt-mcu-import-conflict.webp}{Import file conflict notifcation}

        \li After a successful import, select \uicontrol Close.
    \endlist

    \note Install this \l {https://fonts.google.com/specimen/Exo}{font}
        on your system to match the font used in the Figma design.

    With the design in place, you can now add desired functionalities to the imported
    components with connection, state, timeline animation, \c QML, and \c Javascript.
    Find a fully functional example in the Examples section on the Qt Design Studio homepage.

    \section1 Running the MCU Treadmill example

    \list 1
        \li Open \QDS, then select \uicontrol Examples.
        \li Download the MCU Treadmill example.
        \li Select the downloaded project to open it in \QDS.
        \li Select \uicontrol {Run App}, then select \imagerunproject.
            \image {mcu-treadmill-running.webp}{MCU Treadmill demo running}
    \endlist

    To find the logic and animations of this example, check these files in the \uicontrol Code
    view:
    \table
        \header
            \li File name
            \li Description
        \row
            \li \c SplashScreen.ui.qml
            \li Defines the home screen animation of the MCU Treadmill example.
        \row
            \li \c TrackView.ui.qml
            \li Defines the track animation of the MCU Treadmill example.
        \row
            \li \c TreadmillMcuDemo.qml
            \li Defines the logical functionalities of the MCU Treadmill example.
    \endtable

*/
