diff options
Diffstat (limited to 'doc/qtdesignstudio/src')
51 files changed, 6120 insertions, 0 deletions
diff --git a/doc/qtdesignstudio/src/qtbridge/qtbridge-overview.qdoc b/doc/qtdesignstudio/src/qtbridge/qtbridge-overview.qdoc new file mode 100644 index 0000000000..60a521726e --- /dev/null +++ b/doc/qtdesignstudio/src/qtbridge/qtbridge-overview.qdoc @@ -0,0 +1,65 @@ +/**************************************************************************** +** +** Copyright (C) 2019 The Qt Company Ltd. +** Contact: https://www.qt.io/licensing/ +** +** This file is part of the Qt Design Studio documentation. +** +** Commercial License Usage +** Licensees holding valid commercial Qt licenses may use this file in +** accordance with the commercial license agreement provided with the +** Software or, alternatively, in accordance with the terms contained in +** a written agreement between you and The Qt Company. For licensing terms +** and conditions see https://www.qt.io/terms-conditions. For further +** information use the contact form at https://www.qt.io/contact-us. +** +** GNU Free Documentation License Usage +** Alternatively, this file may be used under the terms of the GNU Free +** Documentation License version 1.3 as published by the Free Software +** Foundation and appearing in the file included in the packaging of +** this file. Please review the following information to ensure +** the GNU Free Documentation License version 1.3 requirements +** will be met: https://www.gnu.org/licenses/fdl-1.3.html. +** +****************************************************************************/ + +/*! + \contentspage {Qt Design Studio Manual} + \previouspage studio-getting-started.html + \page qtbridge-overview.html + \nextpage psqtbridge.html + + \title Exporting Artwork from Design Tools + + You need to use \QB for exporting the 2D assets from design tools, + whereas you can directly import 3D assets saved in widely-used 3D + graphics formats. For best results when importing 3D assets, follow + the guidelines for creating and exporting them. + + \list + + \li \l{Exporting Designs from Adobe Photoshop} + + You can use the \QBPS export tool in Adobe Photoshop to convert + artwork into Qt Quick files (.ui.qml) that you can import to + projects in \QDS. + + \li \l{Exporting Designs from Sketch} + + You can use the \QBSK export tool in Sketch to convert artwork into + Qt Quick files that you can import to projects in \QDS. + + \li \l{Exporting from Maya} + + You can export 3D graphics from Maya in the FBX format. + The necessary plugin is usually enabled by default. + + \omit + \li \l{Exporting 3D Assets} + + You can import files you created using 3D graphics applications and + stored in several widely-used formats, such as .blend, .dae, .fbx, + .glb, .gltf, .obj, .uia, or .uip. + \endomit + \endlist +*/ diff --git a/doc/qtdesignstudio/src/qtbridge/qtbridge-ps-overview.qdoc b/doc/qtdesignstudio/src/qtbridge/qtbridge-ps-overview.qdoc new file mode 100644 index 0000000000..272a045421 --- /dev/null +++ b/doc/qtdesignstudio/src/qtbridge/qtbridge-ps-overview.qdoc @@ -0,0 +1,59 @@ +/**************************************************************************** +** +** Copyright (C) 2019 The Qt Company Ltd. +** Contact: https://www.qt.io/licensing/ +** +** This file is part of the Qt Design Studio documentation. +** +** Commercial License Usage +** Licensees holding valid commercial Qt licenses may use this file in +** accordance with the commercial license agreement provided with the +** Software or, alternatively, in accordance with the terms contained in +** a written agreement between you and The Qt Company. For licensing terms +** and conditions see https://www.qt.io/terms-conditions. For further +** information use the contact form at https://www.qt.io/contact-us. +** +** GNU Free Documentation License Usage +** Alternatively, this file may be used under the terms of the GNU Free +** Documentation License version 1.3 as published by the Free Software +** Foundation and appearing in the file included in the packaging of +** this file. Please review the following information to ensure +** the GNU Free Documentation License version 1.3 requirements +** will be met: https://www.gnu.org/licenses/fdl-1.3.html. +** +****************************************************************************/ + +// Note: The \page value is hard-coded as a link in Qt Bridge for Adobe Photoshop. + +/*! + \contentspage {Qt Design Studio Manual} + \previouspage qtbridge-overview.html + \page psqtbridge.html + \nextpage qtbridge-ps-setup.html + + \title Exporting Designs from Adobe Photoshop + + You can use \QBPS to export designs from Adobe Photoshop to .ui.qml files. + + \image studio-ps-export.png + + If you would rather use Adobe Illustrator for creating artwork, you can + copy-paste your assets to Adobe Photoshop as \e {smart objects}. + + The following topics describe setting up and using \QBPS: + + \list + + \li \l{Setting Up Qt Bridge for Adobe Photoshop} + + You must install and set up the \QBPS export tool before you can use + it to convert artwork into Qt Quick files that you can import to + projects in \QDS. + + \li \l{Using Qt Bridge for Adobe Photoshop} + + To get the best results when you use \QBPS to export designs from + Photoshop to Qt Quick files, you should follow the guidelines for + working with Photoshop and organizing your assets. + \endlist +*/ diff --git a/doc/qtdesignstudio/src/qtbridge/qtbridge-ps-setup.qdoc b/doc/qtdesignstudio/src/qtbridge/qtbridge-ps-setup.qdoc new file mode 100644 index 0000000000..0268fd04af --- /dev/null +++ b/doc/qtdesignstudio/src/qtbridge/qtbridge-ps-setup.qdoc @@ -0,0 +1,116 @@ +/**************************************************************************** +** +** Copyright (C) 2019 The Qt Company Ltd. +** Contact: https://www.qt.io/licensing/ +** +** This file is part of the Qt Bridge documentation. +** +** Commercial License Usage +** Licensees holding valid commercial Qt licenses may use this file in +** accordance with the commercial license agreement provided with the +** Software or, alternatively, in accordance with the terms contained in +** a written agreement between you and The Qt Company. For licensing terms +** and conditions see https://www.qt.io/terms-conditions. For further +** information use the contact form at https://www.qt.io/contact-us. +** +** GNU Free Documentation License Usage +** Alternatively, this file may be used under the terms of the GNU Free +** Documentation License version 1.3 as published by the Free Software +** Foundation and appearing in the file included in the packaging of +** this file. Please review the following information to ensure +** the GNU Free Documentation License version 1.3 requirements +** will be met: https://www.gnu.org/licenses/fdl-1.3.html. +** +****************************************************************************/ + +/*! + + \contentspage {Qt Design Studio} + \previouspage psqtbridge.html + \page qtbridge-ps-setup.html + \nextpage qtbridge-ps-using.html + + \title Setting Up \QBPS + + \QBPS is delivered as an Adobe extension (ZXP) package and requires Adobe + Photoshop version 20.0.0, or later to be installed. The \QBPS installation + process differs depending on whether you use ZXPInstaller and whether you + are installing on Windows or \macos. + + \section1 Installing with ZXPInstaller + + To use ZXPInstaller to install \QBPS: + + \list 1 + \li Download and install \l{http://zxpinstaller.com/}{ZXPInstaller}. + \li Start ZXPInstaller. + \li Drag and drop the \QBPS ZXP package from the \c photoshop_bridge + directory in the installation directory of \QDS to ZXPInstaller. + \li Follow the instructions of the installation program. + \endlist + + \section1 Installing Without ZXPInstaller + + The \QBPS installation process differs depending on the platform you + are installing on. + + \section2 Installing on Windows + + To install \QBPS on Windows without using ZXPInstaller: + + \list 1 + \li Copy the \QBPS ZXP package from the \c photoshop_bridge directory + in the installation directory of \QDS to the \c Documents directory + in your user directory. + \li Open Windows PowerShell. + \li Enter the following commands: + \badcode + cd "$env:UserProfile\Documents" + mv .\io.qt.QtBridge.zxp .\io.qt.QtBridge.zip + expand-archive .\io.qt.QtBridge.zip + xcopy /E /I .\io.qt.QtBridge "$env:APPDATA\Adobe\CEP\extensions\io.qt.QtBridge" + \endcode + \endlist + + \section2 Installing on \macos + + To install \QBPS on \macos without using ZXPInstaller: + + \list 1 + \li Copy the \QBPS ZXP package from the \c photoshop_bridge + directory in the installation directory of \QDS to your + \c Documents directory. + \li Open Terminal. + \li Enter the following commands: + \badcode + cd ~/Documents + unzip io.qt.QtBridge.zxp -d io.qt.QtBridge + sudo mkdir -p /Library/Application\ Support/Adobe/CEP/extensions + sudo cp -R ./io.qt.QtBridge /Library/Application\ Support/Adobe/CEP/extensions + \endcode + \endlist + + \section1 Enabling Remote Connections + + To set up \QBPS: + + \list 1 + \li Once the installation is completed, restart Adobe Photoshop to make + \QBPS appear in \uicontrol Window > \uicontrol Extensions. + \li Select \uicontrol Edit > \uicontrol Preferences > + \uicontrol General > \uicontrol Plug-ins to enable a remote + connection. + \li Select the \uicontrol {Enable Remote Connections} check box and + enter a password in the \uicontrol Password field. + \li To test that the connection is working properly, start \QBPS and + select the settings icon in the top right corner. + \image qt-bridge-settings.png + \li In the \uicontrol Password field, enter the password you entered in + Adobe Photoshop and select \uicontrol {Connect}. + \li In the \uicontrol {Export Path} group, select the browse button + (\uicontrol {...}) to specify the location where \QBPS copies the + exported files. + \endlist + + Once the connection is successfully created, \QBPS is ready to use. +*/ diff --git a/doc/qtdesignstudio/src/qtbridge/qtbridge-ps-using.qdoc b/doc/qtdesignstudio/src/qtbridge/qtbridge-ps-using.qdoc new file mode 100644 index 0000000000..754a73f635 --- /dev/null +++ b/doc/qtdesignstudio/src/qtbridge/qtbridge-ps-using.qdoc @@ -0,0 +1,258 @@ +/**************************************************************************** +** +** Copyright (C) 2019 The Qt Company Ltd. +** Contact: https://www.qt.io/licensing/ +** +** This file is part of the Qt Bridge documentation. +** +** Commercial License Usage +** Licensees holding valid commercial Qt licenses may use this file in +** accordance with the commercial license agreement provided with the +** Software or, alternatively, in accordance with the terms contained in +** a written agreement between you and The Qt Company. For licensing terms +** and conditions see https://www.qt.io/terms-conditions. For further +** information use the contact form at https://www.qt.io/contact-us. +** +** GNU Free Documentation License Usage +** Alternatively, this file may be used under the terms of the GNU Free +** Documentation License version 1.3 as published by the Free Software +** Foundation and appearing in the file included in the packaging of +** this file. Please review the following information to ensure +** the GNU Free Documentation License version 1.3 requirements +** will be met: https://www.gnu.org/licenses/fdl-1.3.html. +** +****************************************************************************/ + +/*! + \contentspage {Qt Design Studio Manual} + \previouspage qtbridge-ps-setup.html + \page qtbridge-ps-using.html + \nextpage sketchqtbridge.html + + \title Using \QBPS + + \section1 Organizing Assets + + To get the best results when you use \QBPS to export designs from Adobe + Photoshop to \QDS, follow these guidelines when working with Photoshop: + + \list + \li Arrange your art into artboards and organize it into groups and + layers that are imported into \QDS as separate files, depending + on the choices you make when exporting designs. + \li Use the Type tool to make sure that all of your text labels + are exported to \l Text items. + \li Store all assets in vector format to be able to easily rescale them + for different screen sizes and resolutions. + \endlist + + If you would rather use Adobe Illustrator for creating artwork, you can + copy-paste your assets to Adobe Photoshop as \e {smart objects}. You can + then double-click the smart objects in Photoshop to open them in Illustrator + for editing. Because you use smart objects, all your changes are propagated + to all instances of the objects used in your designs in Photoshop. + + To use the fonts that you use in Photoshop also in \QDS, you need to load + them to \QDS. \QDS deploys them to devices when you preview the UI. For more + information, see \l{Using Custom Fonts}. + + \section2 Using Artboards + + The relationships between the groups and layers on an artboard are preserved + when you export designs from Adobe Photoshop and import them into \QDS. + + When you use \QBPS to export your designs, you will determine how you want + each group or layer exported: as a \e component or \e child. A component is + a single QML file that can contain other assets. A child is a single PNG + file that you can use within QML files. + + If you plan to use pieces of your artwork as separate images in the UI, + group them on an artboard as separate layers. You can then export the group + as a component and each layer within it as a child. The children are + imported to \QDS as separate PNG files that you can use as image sources. + + To use the contents of an artboard as a single image in the UI, you can + merge the groups and layers when you export them. During import, the + contents are flattened into one PNG file. The merge is done in a way that + enables you to change the groups and layers in Photoshop or Adobe + Illustrator and then export and import the artboard again. This is an easy + way to create a reference image of how the final UI should look like, for + example. + + Place different parts of the UI, such as menus and pop-ups, on separate + artboards to be able to export them as components or children and to + import them as QML and PNG files that you can drag and drop to the working + area in \QDS Design mode while creating a UI. + + \QDS offers predefined sets of UI controls that you can modify according + to your needs. You can export your own controls as QML types, Qt Quick + Controls, or Studio Components. The position and dimensions of your control + are preserved. + + However, if you want your UI controls, such as check boxes, to look exactly + like they do in Photoshop, you have to create the control in an Artboard and + use the artboard in the layers where the control instance is to be created. + \QB exports the control as a custom QML component that you can program in + \QDS. + + \section1 Exporting Assets + + Each artboard is exported automatically as a component. That is, a separate + QML file that contains all the artwork on the artboard, except layers that + are set to be skipped or exported as child items. You determine how + each group or layer in an artboard is exported: as a component or a child + item. In addition, you can merge the groups and layers of an artboard + into the parent as one item or skip layers completely. + + By default, layers are exported as follows: + + \list + \li First level group layers are exported as child items of the + artboard. + \li Second level group layers are merged to their parent. + \li Asset layers are exported as merged. + \li Text layers are always exported as child items. + \endlist + + \QBPS automatically proposes identifiers (QML ids) for all groups and layers. + The ids will be used as filenames in \QDS. You can change the ids, so that + you can easily find them in \QDS. Just keep in mind that the ids must be + unique and that they must follow some naming conventions. + + You can export assets using the default settings and make all the changes + later in \QDS. If you are familiar with the \l{QML Syntax Basics} + {QML syntax}, you can modify the settings to tailor the generated QML to + a certain degree. For example, you can specify the QML type or Studio + component to use for a component or layer. If you have drawn an arc that + you mean to animate, you can export it as an Arc Studio component to avoid + having to replace the arc image with an Arc component in \QDS. Or you could + export a button as a Qt Quick Controls 2 Button type. + + You can specify effects, such as a blur effect, to use for a group or layer. + + The QML types supported by \QDS are listed in the \uicontrol {QML Types} + tab in the \uicontrol Library in the Design mode of \QDS. For more + information, see \l{Creating Components}. + + You can also specify values for the properties of the QML type or create + \l{Property Aliases}{property aliases} to fetch the values from other + properties. + + \image qt-bridge.png + + \section2 Specifying Settings for Exporting Assets + + To export your design using \QBPS: + + \list 1 + \li \QBPS automatically proposes identifiers for all groups and layers + that you can change in the \uicontrol {QML ID} field. The ids must + be unique, they must begin with a lower-case letter or an + underscore, and they can only contain letters, numbers, and + underscore characters. For more information, see + \l {The id Attribute}. + \li In the \uicontrol {Export As} field, select the export type for the + group or layer: + \list + \li \uicontrol Component creates a separate QML file for the + selected artboard, group, or layer that contains all the + artwork in it, except layers that are set to be skipped or + exported as child items. + \li \uicontrol Child creates a separate PNG file for each asset + of the selected group or layer, with references to the + images in the component file. + \li \uicontrol Merged merges the selected groups and layers into + the parent as one item. + \li \uicontrol Skipped completely skips the selected layer. + \endlist + \li In the \uicontrol {As Artboard} field, select an artboard + to reuse. For example, you can use an artboard to define a + component, such as a button, and reuse it in other artboards. + \li In the \uicontrol {QML Type} field, specify the QML type + or Studio component to morph this layer into. The generated + component will be of this type. For example, if you drew a + rectangle, you can export it as a Rectangle Studio component. + You can provide the import statement of the module where the QML + type is defined in the \uicontrol {Add Imports} field. + \li In the \uicontrol {Add Imports} field, enter additional + import statements to have them added to the generated QML file. + For example, to use Qt Quick Controls 2.3, you need the import + statement \c {QtQuick.Controls 2.3} and to use Qt Studio + Components 1.0, you need the import statement + \c {QtQuick.Studio.Components 1.0}. You can also import a module + as an alias. + \li In the \uicontrol {QML Properties} field, specify properties for + the QML type. You can add and modify properties in \QDS. + \li Select the \uicontrol {Clip Contents} check box to enable clipping + in the type generated from the layer. The generated type will clip + its own painting, as well as the painting of its children, to its + bounding rectangle. + \li Select the \uicontrol {Create Alias} check box to export the item + generated from this layer as an alias in the parent component. + \li Select \uicontrol {Cascade properties} to apply the current set of + properties to all the children of the selected layer. + \li Select \uicontrol Export to copy your assets to the export path you + specified. + \li When the exporting is done, select \uicontrol OK. + \endlist + + All the assets and metadata are copied to the directory you specified. This + might take a little while depending on the complexity of your project. + + You can now create a project in \QDS and import the assets to it, as + described in \l {Creating Projects} and \l{Importing Designs}. + + \section1 Sanitizing Documents + + \QBPS enables removing all \QBPS related metadata from the active + document. In the \QBPS \uicontrol Settings dialog, select + \uicontrol {Sanitize Document} to sanitize the active document. + Once the sanitization is successfully done, the document will + contain no \QBPS related metadata and the \QBPS layer settings will fall + back to the \l{Exporting Assets}{default} values. + + \note The sanitization is done in memory and the document must be saved to + keep the sanitized state. + + \image qt-bridge-sanitize.png + + \section1 Extending \QBPS + You can change the default behavior of \QBPS with the help of a JSX script. One can write + specific functions in the script that are called by \QBPS with useful parameters. + + \section2 Overridable JSX Functions + You can define the following functions in the override JSX. + \list + \li preExport(document) + This function is called before the document is exported. The parameter \a document is + the PSD Document instance. This function can be used to make temporary changes in + the document before export. + \li postExport(document) + This function is called after the document is exported. The parameter \a document is the + PSD Document instance. You can undo the temporary changes done in the function + \e preExport(...). + \li customDefaultQmlId(name, instance) + The function is called for settings the default QML id of the layer. The returned value + is used for the QML id. Return \e Falsey to use the auto generated QML id instead. + The parameter \a name is the auto generated QML id by the plugin and \a instance is the + PSD layer instance. + \endlist + + \note Please refer to \l {https://www.adobe.com/devnet/photoshop/scripting.html} + {Adobe Photoshop CC Javascript} scripting guide to understand the object model and \e Document + and \e Layer instances. + + \image qt-bridge-override.png + + In the \QBPS \uicontrol Settings dialog, select \uicontrol {Override JSX Script} to set the + override JSX script. + + For more information, watch a video tutorial and webinar about using \QBPS: + + \list + \li \l{https://resources.qt.io/development-topic-ui-design/qtdesignstudio-clustertutorial-partone} + {Building an Instrument Cluster for Your Car HMI, Part 1} + \li \l{https://www.youtube.com/watch?v=ZzbucmQPU44} + {From Photoshop to Prototype with Qt Design Studio} + \endlist +*/ diff --git a/doc/qtdesignstudio/src/qtbridge/qtbridge-sketch-overview.qdoc b/doc/qtdesignstudio/src/qtbridge/qtbridge-sketch-overview.qdoc new file mode 100644 index 0000000000..dbb986aa61 --- /dev/null +++ b/doc/qtdesignstudio/src/qtbridge/qtbridge-sketch-overview.qdoc @@ -0,0 +1,56 @@ +/**************************************************************************** +** +** Copyright (C) 2019 The Qt Company Ltd. +** Contact: https://www.qt.io/licensing/ +** +** This file is part of the Qt Design Studio documentation. +** +** Commercial License Usage +** Licensees holding valid commercial Qt licenses may use this file in +** accordance with the commercial license agreement provided with the +** Software or, alternatively, in accordance with the terms contained in +** a written agreement between you and The Qt Company. For licensing terms +** and conditions see https://www.qt.io/terms-conditions. For further +** information use the contact form at https://www.qt.io/contact-us. +** +** GNU Free Documentation License Usage +** Alternatively, this file may be used under the terms of the GNU Free +** Documentation License version 1.3 as published by the Free Software +** Foundation and appearing in the file included in the packaging of +** this file. Please review the following information to ensure +** the GNU Free Documentation License version 1.3 requirements +** will be met: https://www.gnu.org/licenses/fdl-1.3.html. +** +****************************************************************************/ + +// Note: The \page value is hard-coded as a link in Qt Bridge for Sketch. + +/*! + \contentspage {Qt Design Studio Manual} + \previouspage qtbridge-ps-using.html + \page sketchqtbridge.html + \nextpage qtbridge-sketch-setup.html + + \title Exporting Designs from Sketch + + You can use \QBSK to export designs from Sketch to .ui.qml files. + + \image studio-sketch-export.png + + The following topics describe setting up and using \QBSK: + + \list + + \li \l{Setting Up Qt Bridge for Sketch} + + You must install Sketch and the \QBSK export tool before you can use + the tool to convert artwork into Qt Quick files that you can import + to projects in \QDS. + + \li \l{Using Qt Bridge for Sketch} + + To get the best results when you use \QBSK to export designs from + Sketch to Qt Quick files, you should follow the guidelines for + working with Sketch and organizing your assets. + \endlist +*/ diff --git a/doc/qtdesignstudio/src/qtbridge/qtbridge-sketch-setup.qdoc b/doc/qtdesignstudio/src/qtbridge/qtbridge-sketch-setup.qdoc new file mode 100644 index 0000000000..4c761b90d0 --- /dev/null +++ b/doc/qtdesignstudio/src/qtbridge/qtbridge-sketch-setup.qdoc @@ -0,0 +1,44 @@ +/**************************************************************************** +** +** Copyright (C) 2019 The Qt Company Ltd. +** Contact: https://www.qt.io/licensing/ +** +** This file is part of the Qt Bridge documentation. +** +** Commercial License Usage +** Licensees holding valid commercial Qt licenses may use this file in +** accordance with the commercial license agreement provided with the +** Software or, alternatively, in accordance with the terms contained in +** a written agreement between you and The Qt Company. For licensing terms +** and conditions see https://www.qt.io/terms-conditions. For further +** information use the contact form at https://www.qt.io/contact-us. +** +** GNU Free Documentation License Usage +** Alternatively, this file may be used under the terms of the GNU Free +** Documentation License version 1.3 as published by the Free Software +** Foundation and appearing in the file included in the packaging of +** this file. Please review the following information to ensure +** the GNU Free Documentation License version 1.3 requirements +** will be met: https://www.gnu.org/licenses/fdl-1.3.html. +** +****************************************************************************/ + +/*! + + \contentspage {Qt Design Studio} + \previouspage sketchqtbridge.html + \page qtbridge-sketch-setup.html + \nextpage qtbridge-sketch-using.html + + \title Setting Up \QBSK + + \QBSK is delivered with \QDS as a Sketch plugin that you can install to + Sketch. + + \note Install the Sketch app before installing the plugin. + + To install the \QBSK plugin to Sketch, double-click the \QBSK plugin in the + \c sketch_bridge directory in the installation directory of \QDS. + + The plugin is available at \uicontrol Plugins > \uicontrol {\QB}. +*/ diff --git a/doc/qtdesignstudio/src/qtbridge/qtbridge-sketch-using.qdoc b/doc/qtdesignstudio/src/qtbridge/qtbridge-sketch-using.qdoc new file mode 100644 index 0000000000..c10d4c18ae --- /dev/null +++ b/doc/qtdesignstudio/src/qtbridge/qtbridge-sketch-using.qdoc @@ -0,0 +1,196 @@ +/**************************************************************************** +** +** Copyright (C) 2019 The Qt Company Ltd. +** Contact: https://www.qt.io/licensing/ +** +** This file is part of the Qt Bridge documentation. +** +** Commercial License Usage +** Licensees holding valid commercial Qt licenses may use this file in +** accordance with the commercial license agreement provided with the +** Software or, alternatively, in accordance with the terms contained in +** a written agreement between you and The Qt Company. For licensing terms +** and conditions see https://www.qt.io/terms-conditions. For further +** information use the contact form at https://www.qt.io/contact-us. +** +** GNU Free Documentation License Usage +** Alternatively, this file may be used under the terms of the GNU Free +** Documentation License version 1.3 as published by the Free Software +** Foundation and appearing in the file included in the packaging of +** this file. Please review the following information to ensure +** the GNU Free Documentation License version 1.3 requirements +** will be met: https://www.gnu.org/licenses/fdl-1.3.html. +** +****************************************************************************/ + +/*! + \contentspage {Qt Design Studio Manual} + \previouspage qtbridge-sketch-setup.html + \page qtbridge-sketch-using.html + \nextpage exporting-from-maya.html + + \title Using \QBSK + + \section1 Organizing Assets + + To get the best results when you use \QBSK to export designs from Sketch + to \QDS, follow these guidelines when working with Sketch: + + \list + \li Arrange your sketch document in artboards, layers, and groups. The + QML code generated in \QDS corresponds to the structure of your + Sketch document. + \li \QBSK supports document \e symbols and \e {symbol overrides}. Each + symbol is exported as a QML component, and each symbol instance is + generated as a respective \e component instance in the generated + QML. The symbol overrides are exported as values of properties for + the components. For example, if you use symbol overrides to specify + the text for each button instance, it is exported as a value of the + text property. + \li Store all assets in the scalable vector graphics (SVG) format + to be able to easily rescale them for different screen sizes + and resolutions. + \endlist + + To use the fonts that you use in Sketch also in \QDS, you need to load + them to \QDS. \QDS deploys them to devices when you preview the UI. For more + information, see \l{Using Custom Fonts}. + + \section2 Using Artboards + + The relationships between artboards and layers are preserved when you export + designs from Sketch and import them into \QDS. + + An artboard can only be exported as a component. That is, a separate + QML file that contains all the artwork on the artboard, except layers that + are set to be skipped or exported as child items. + + A component is a single QML file that can contain other child items with + assets or text. + + To use the contents of an artboard as a single image in the UI, you can + merge the groups and layers when you export them. During import, the + contents are flattened into one PNG file. The merge is done in a way that + enables you to change the groups and layers in Sketch and then export and + import the artboard again. This is an easy way to create a reference image + of how the final UI should look like, for example. + + Place different parts of the UI, such as menus and pop-ups, on separate + artboards to be able to export them as components or children and to + import them as QML and PNG files that you can drag and drop to the working + area in \QDS Design mode while creating a UI. + + \section2 Using Layer and Groups + + When you use \QBSK to export your designs, you will determine how you want + each layer or group to be exported: as \e merged or as \e child. Each + layer or group represents a separate image in the UI when it is exported as + a \e child. The asset of the layer or group is merged to its parent + group or artboard if it is exported as \e merged. + + You can select the asset format and DPI to use for each image in + \uicontrol Settings > \uicontrol {Asset Settings}. + + \section1 Exporting Assets + + By default, layers are exported as follows: + + \list + \li Artboards are always exported as \e components or \e skipped. + \li Asset layers are exported as merged. + \li Text layers can only be exported as \e child or \e skipped. + \li A \e hotspot layer can only be exported as \e child or \e skipped. + It is always exported as an instance of the \l MouseArea QML type. + \li A symbol instance layer can only be exported as \e child or + \e skipped. + \endlist + + You can export assets using the default settings and make all the changes + later in \QDS. If you are familiar with the \l{QML Syntax Basics} + {QML syntax}, you can modify the settings to tailor the generated QML to + a certain degree. For example, you can specify the QML type or + \l {Studio Components}{Qt Quick Studio Component} to use for a component or + layer. If you have drawn an arc that you mean to animate, you can export it + as an \l Arc component to avoid having to replace the arc image with an Arc + component in \QDS. Or you could export a button as a Qt Quick Controls + \l Button type. + + \image qt-sketch-bridge.png + + \section2 Specifying Settings for Exporting Assets + + To export your design using \QBSK: + + \list 1 + \li \QBSK automatically proposes identifiers for all groups and layers + that you can change in the \uicontrol {QML ID} field. The ids will + be made unique when the layer and the respective artwork is imported + into \QDS. + \li In the \uicontrol {Export As} field, select the export type for the + group or layer: + \list + \li \uicontrol Component creates a separate QML file for the + selected symbol that contains all the artwork in it, except + layers or groups that are set to be skipped or exported as + child items. + \li \uicontrol Child creates a separate PNG file for each asset + of the selected group or layer, with references to the + images in the component file. + \li \uicontrol Merged merges the selected groups and layers into + the parent artboard or group as one item. + \li \uicontrol Skipped completely skips the selected layer. + \endlist + \li In the \uicontrol {QML Type} field, specify the QML type or + \l {Studio Components}{Qt Quick Studio Component} to morph this + layer into. The generated component will be of this type. For + example, if you drew a rectangle, you can export it as a + \l Rectangle component. + You can provide the import statement of the module where the QML + type is defined in the \uicontrol Imports field. + \li In the \uicontrol Imports field, enter + additional import statements to have them added to the generated QML + file. For example, to use Qt Quick Controls 2.3, you need the + import statement \c {QtQuick.Controls 2.3} and to use Qt Quick + Studio Components 1.0, you need the import statement + \c {QtQuick.Studio.Components 1.0}. You can also import a module as + an alias. + \li In the \uicontrol {Properties} field, specify properties for the QML + type. You can add and modify properties in \QDS. + \li Select the \uicontrol Alias check box to export the item generated + from this layer as an alias in the parent component. + \li Select the \uicontrol Clip check box to enable + clipping in the type generated from the layer. The generated type + will clip its own painting, as well as the painting of its children, + to its bounding rectangle. + \li Select the \uicontrol Visible check box to determine the visibility + of the layer. + \li Select \uicontrol Export to copy your assets to the export path you + specified. + \li When the exporting is done, select \uicontrol OK. + \endlist + + All the assets and metadata are copied to the directory you specified. This + might take a little while depending on the complexity of your project. + + You can now create a project in \QDS and import the assets to it, as + described in \l {Creating Projects} and \l{Importing Designs}. + + \section1 Specifying Export Path and Asset Format + + To specify export path and asset format, select \uicontrol Settings > + \uicontrol {Asset Settings}. + + \image qt-sketch-bridge-settings.png + + \list 1 + \li By default, \QBSK exports assets to a directory named after your + Sketch file located inside the parent directory of the Sketch file + being exported. You can change the export path in the + \uicontrol {Export Path} field. + \li You can select the default asset format and DPI to use for each + layer. These settings are overridden by the layer export settings + from the Sketch app. That is, if the layer is made exportable in + the Sketch app, the respective asset format and DPI settings are + preserved. + \endlist +*/ diff --git a/doc/qtdesignstudio/src/qtdesignstudio-adding-dynamics.qdoc b/doc/qtdesignstudio/src/qtdesignstudio-adding-dynamics.qdoc new file mode 100644 index 0000000000..60891e2aa3 --- /dev/null +++ b/doc/qtdesignstudio/src/qtdesignstudio-adding-dynamics.qdoc @@ -0,0 +1,70 @@ +/**************************************************************************** +** +** Copyright (C) 2019 The Qt Company Ltd. +** Contact: https://www.qt.io/licensing/ +** +** This file is part of the Qt Design Studio documentation. +** +** Commercial License Usage +** Licensees holding valid commercial Qt licenses may use this file in +** accordance with the commercial license agreement provided with the +** Software or, alternatively, in accordance with the terms contained in +** a written agreement between you and The Qt Company. For licensing terms +** and conditions see https://www.qt.io/terms-conditions. For further +** information use the contact form at https://www.qt.io/contact-us. +** +** GNU Free Documentation License Usage +** Alternatively, this file may be used under the terms of the GNU Free +** Documentation License version 1.3 as published by the Free Software +** Foundation and appearing in the file included in the packaging of +** this file. Please review the following information to ensure +** the GNU Free Documentation License version 1.3 requirements +** will be met: https://www.gnu.org/licenses/fdl-1.3.html. +** +****************************************************************************/ + +/*! + \contentspage {Qt Design Studio Manual} + \page studio-adding-dynamics.html + \previouspage studio-fonts.html + \nextpage studio-timeline.html + + \title Adding Dynamics + + You can animate the properties of UI components and create connections + between them to enable them to communicate with each other. + + \list + \li \l {Creating Animations} + + You can use a timeline and keyframe based editor in the + \uicontrol Timeline view to animate the properties of UI + components. Animating properties enables their values to + move through intermediate values at specified keyframes + instead of immediately changing to the target value. + \li \l {Adding Connections} + + You can create connections between the UI components and + the application to enable them to communicate with each other. For + example, how does the appearance of a button change on a mouse click + and which action does the application need to perform in response to + it. + + You can also create connections between UI components by + binding their properties together. This way, when the value of a + property changes in a parent component, it can be automatically + changed in all the child components, for example. + \li \l {Adding States} + + Qt Quick allows you to declare various UI states that describe + how component properties change from a base state. Therefore, + states can be a useful way of organizing your UI + logic. You can associate transitions with items to define + how their properties will animate when they change due to a state + change. + \li \l {Editing PathView Properties} + + You can use a graphical spline editor to specify \l{PathView} paths. + A path view lays out data provided by data models on a \l{Path}. + \endlist +*/ diff --git a/doc/qtdesignstudio/src/qtdesignstudio-advanced.qdoc b/doc/qtdesignstudio/src/qtdesignstudio-advanced.qdoc new file mode 100644 index 0000000000..b10c89527c --- /dev/null +++ b/doc/qtdesignstudio/src/qtdesignstudio-advanced.qdoc @@ -0,0 +1,90 @@ +/**************************************************************************** +** +** Copyright (C) 2019 The Qt Company Ltd. +** Contact: https://www.qt.io/licensing/ +** +** This file is part of the Qt Design Studio documentation. +** +** Commercial License Usage +** Licensees holding valid commercial Qt licenses may use this file in +** accordance with the commercial license agreement provided with the +** Software or, alternatively, in accordance with the terms contained in +** a written agreement between you and The Qt Company. For licensing terms +** and conditions see https://www.qt.io/terms-conditions. For further +** information use the contact form at https://www.qt.io/contact-us. +** +** GNU Free Documentation License Usage +** Alternatively, this file may be used under the terms of the GNU Free +** Documentation License version 1.3 as published by the Free Software +** Foundation and appearing in the file included in the packaging of +** this file. Please review the following information to ensure +** the GNU Free Documentation License version 1.3 requirements +** will be met: https://www.gnu.org/licenses/fdl-1.3.html. +** +****************************************************************************/ + +/*! + \contentspage {Qt Design Studio} + \previouspage qt-design-viewer.html + \page studio-advanced.html + \nextpage studio-platforms.html + + \title Advanced Topics + + \QDS attempts to meet your needs, whether you have previous experience with + QML, and coding or not. When you install \QDS, the default configuration + allows you to start designing and previewing UIs with very little effort. + + However, you might want to use the \uicontrol {Text Editor} in the Design + mode sometimes to edit your QML files or write some JavaScript to simulate + application logic and bring your UI to life. If you use JavaScript, you + might also want to debug and profile you UIs to find and fix problems in + them. + + You can also use special options to start \QC from the command line and use + it mainly from the keyboard. + + \list + \li \l{Supported Platforms} + + You can install and run \QC on several operating systems to design + UIs for multiple desktop, embedded, and mobile device platforms. + \li \l{Keyboard Shortcuts} + + \QDS provides various keyboard shortcuts to speed up your + development process. You can change the keyboard shortcuts, + as well as import and export keyboard shortcut mapping schemes. + \li \l{Coding} + + You can use the code editor in the Design mode + \uicontrol {Text Editor} view or in the Edit mode to modify QML + code. The code editor understands the QML language as code, not + just as plain text. This enables it to provide you with useful + features, such as semantic highlighting, checking code syntax, + code completion, and refactoring actions. + \li \l{Simulating Application Logic} + + You can use JavaScript to simulate application logic to bring your + UI to life. + \li \l{Debugging and Profiling} + + \QDS comes with a JavaScript debugger. In the Debug mode, you + can inspect the state of your UI while debugging. + + The memory and CPU power available on devices are limited and + you should use them carefully. The QML Profiler enables you to + profile Qt Quick UIs. + \endlist + + \section1 Related Topics + + \list + \li \l{Using External Tools} + + You can use external tools directly from \QC. lupdate and lrelease, + QML preview tools (QML Viewer and QML Scene), the default text + editor for your system, and the \c sort tool are preconfigured for + use. You can change their default configurations and configure new + tools. + \endlist +*/ diff --git a/doc/qtdesignstudio/src/qtdesignstudio-components.qdocinc b/doc/qtdesignstudio/src/qtdesignstudio-components.qdocinc new file mode 100644 index 0000000000..71857f95a7 --- /dev/null +++ b/doc/qtdesignstudio/src/qtdesignstudio-components.qdocinc @@ -0,0 +1,79 @@ +/**************************************************************************** +** +** Copyright (C) 2019 The Qt Company Ltd. +** Contact: https://www.qt.io/licensing/ +** +** This file is part of the Design Studio documentation. +** +** Commercial License Usage +** Licensees holding valid commercial Qt licenses may use this file in +** accordance with the commercial license agreement provided with the +** Software or, alternatively, in accordance with the terms contained in +** a written agreement between you and The Qt Company. For licensing terms +** and conditions see https://www.qt.io/terms-conditions. For further +** information use the contact form at https://www.qt.io/contact-us. +** +** GNU Free Documentation License Usage +** Alternatively, this file may be used under the terms of the GNU Free +** Documentation License version 1.3 as published by the Free Software +** Foundation and appearing in the file included in the packaging of +** this file. Please review the following information to ensure +** the GNU Free Documentation License version 1.3 requirements +** will be met: https://www.gnu.org/licenses/fdl-1.3.html. +** +****************************************************************************/ + +/*! +//! [studio components] + + \section1 Studio Components + + A set of ready-made studio components are available for creating differently + shaped objects, such as arcs, pies, or triangles, as well as objects with + particular abilities, such as being visibly \e flipped between their front + and back sides, like a card. The studio components are built on top of + \l {Qt Quick Shapes QML Types}, with some additional properties. + + You can drag-and-drop the following studio components from the + \uicontrol Library to the canvas or the \uicontrol Navigator: + + \list + \li \l Arc adds an arc that begins and ends at given positions. + \li \l Border adds a border with corners that you can shape + independently of each other. + \li \l Flipable provides a surface that can be flipped. + \li \l Group provides an item with the size property. + \li \l Iso adds a container for an ISO 7000 icon. + \li \l Pie adds a pie slice or a pie with a slice missing from it. + \li \l Rectangle adds a rectangle with corners that you can shape + independently of each other. + \li \l SvgPath adds an SVG path. + \li \l Triangle adds a triangle. + \endlist + +//! [studio components] + +//! [creating studio components] + + \section1 Creating Custom Controls + + You can use the project wizard to create a starting point for a custom + \l [QtQuickControls2] {Button}, \l [QtQuickControls2] {Pane}, + \l [QtQuickControls2] {StackView}{Stack View}, or + \l [QtQuickControls2] {Switch}. + + \list 1 + \li Select \uicontrol File > \uicontrol {New File or Project} > + \uicontrol {Files and Classes} > \uicontrol {Qt Quick Controls}. + \li Select the control to create, and then select \uicontrol Choose. + + \note Components are listed in the \uicontrol {QML Components} + section of the \uicontrol Library only if the filename begins + with a capital letter. + \li Edit component properties in the \uicontrol Properties pane. + + The available properties depend on the QML type. + \endlist + +//! [creating studio components] +*/ diff --git a/doc/qtdesignstudio/src/qtdesignstudio-debugging.qdoc b/doc/qtdesignstudio/src/qtdesignstudio-debugging.qdoc new file mode 100644 index 0000000000..98687a88a7 --- /dev/null +++ b/doc/qtdesignstudio/src/qtdesignstudio-debugging.qdoc @@ -0,0 +1,52 @@ +/**************************************************************************** +** +** Copyright (C) 2018 The Qt Company Ltd. +** Contact: https://www.qt.io/licensing/ +** +** This file is part of the Qt Design Studio documentation. +** +** Commercial License Usage +** Licensees holding valid commercial Qt licenses may use this file in +** accordance with the commercial license agreement provided with the +** Software or, alternatively, in accordance with the terms contained in +** a written agreement between you and The Qt Company. For licensing terms +** and conditions see https://www.qt.io/terms-conditions. For further +** information use the contact form at https://www.qt.io/contact-us. +** +** GNU Free Documentation License Usage +** Alternatively, this file may be used under the terms of the GNU Free +** Documentation License version 1.3 as published by the Free Software +** Foundation and appearing in the file included in the packaging of +** this file. Please review the following information to ensure +** the GNU Free Documentation License version 1.3 requirements +** will be met: https://www.gnu.org/licenses/fdl-1.3.html. +** +****************************************************************************/ + +/*! + \contentspage {Qt Design Studio Manual} + \previouspage studio-javascript.html + \page studio-debugging.html + \nextpage creator-debugging-qml.html + + \title Debugging and Profiling + + \list + \li \l{Debugging Qt Quick Projects} + + You can use the integrated debugger to debug JavaScript functions, + to execute JavaScript expressions to get information about the state + of the UI, and to inspect QML properties and JavaScript + variables and change them temporarily at runtime. + \li \l{Debugging a Qt Quick Example Application} + + This section uses the \l{QML Advanced Tutorial}{Same Game} example + application to illustrate how to debug Qt Quick applications in the + Debug mode. + \li \l{Profiling QML Applications} + + You can use the QML Profiler to find causes for typical performance + problems in your UIs, such as slowness, freezing, and stuttering. + The QML Profiler is installed and configured as part of \QDS. + \endlist +*/ diff --git a/doc/qtdesignstudio/src/qtdesignstudio-examples.qdoc b/doc/qtdesignstudio/src/qtdesignstudio-examples.qdoc new file mode 100644 index 0000000000..03e119d3c3 --- /dev/null +++ b/doc/qtdesignstudio/src/qtdesignstudio-examples.qdoc @@ -0,0 +1,48 @@ +/**************************************************************************** +** +** Copyright (C) 2019 The Qt Company Ltd. +** Contact: https://www.qt.io/licensing/ +** +** This file is part of the Qt Design Studio documentation. +** +** Commercial License Usage +** Licensees holding valid commercial Qt licenses may use this file in +** accordance with the commercial license agreement provided with the +** Software or, alternatively, in accordance with the terms contained in +** a written agreement between you and The Qt Company. For licensing terms +** and conditions see https://www.qt.io/terms-conditions. For further +** information use the contact form at https://www.qt.io/contact-us. +** +** GNU Free Documentation License Usage +** Alternatively, this file may be used under the terms of the GNU Free +** Documentation License version 1.3 as published by the Free Software +** Foundation and appearing in the file included in the packaging of +** this file. Please review the following information to ensure +** the GNU Free Documentation License version 1.3 requirements +** will be met: https://www.gnu.org/licenses/fdl-1.3.html. +** +****************************************************************************/ + +/*! + \contentspage {Qt Design Studio Manual} + \previouspage studio-help.html + \group studioexamples + \nextpage creator-help.html + + \title Examples and Tutorials + + In the Welcome mode, you can open examples and tutorials that illustrate + how to use \QDS. + + \section1 Video Tutorials + + The \uicontrol Tutorials tab contains links to video tutorials that provide + more information about \QDS. + + You can access the Cluster tutorial source files in the \uicontrol Examples + tab. + + \section1 Examples + + The \uicontrol Examples tab lists examples about using \QDS. +*/ diff --git a/doc/qtdesignstudio/src/qtdesignstudio-faq.qdoc b/doc/qtdesignstudio/src/qtdesignstudio-faq.qdoc new file mode 100644 index 0000000000..7667fa5a10 --- /dev/null +++ b/doc/qtdesignstudio/src/qtdesignstudio-faq.qdoc @@ -0,0 +1,40 @@ +/**************************************************************************** +** +** Copyright (C) 2018 The Qt Company Ltd. +** Contact: https://www.qt.io/licensing/ +** +** This file is part of the Qt Design Studio documentation. +** +** Commercial License Usage +** Licensees holding valid commercial Qt licenses may use this file in +** accordance with the commercial license agreement provided with the +** Software or, alternatively, in accordance with the terms contained in +** a written agreement between you and The Qt Company. For licensing terms +** and conditions see https://www.qt.io/terms-conditions. For further +** information use the contact form at https://www.qt.io/contact-us. +** +** GNU Free Documentation License Usage +** Alternatively, this file may be used under the terms of the GNU Free +** Documentation License version 1.3 as published by the Free Software +** Foundation and appearing in the file included in the packaging of +** this file. Please review the following information to ensure +** the GNU Free Documentation License version 1.3 requirements +** will be met: https://www.gnu.org/licenses/fdl-1.3.html. +** +****************************************************************************/ + +/*! + \contentspage index.html + \previouspage creator-help.html + \page studio-faq.html + \nextpage studio-terms.html + + \title Frequently Asked Questions + + This section contains answers to some frequently asked questions about \QDS. + You might also find answers to your questions in the product documentation + by searching or browsing the index in the \l{Using the Help Mode} + {Help mode}. Many questions are also answered by the + \l{Examples and Tutorials}{examples and video tutorials}. + +*/ diff --git a/doc/qtdesignstudio/src/qtdesignstudio-fonts.qdoc b/doc/qtdesignstudio/src/qtdesignstudio-fonts.qdoc new file mode 100644 index 0000000000..1ceef949d7 --- /dev/null +++ b/doc/qtdesignstudio/src/qtdesignstudio-fonts.qdoc @@ -0,0 +1,55 @@ +/**************************************************************************** +** +** Copyright (C) 2020 The Qt Company Ltd. +** Contact: https://www.qt.io/licensing/ +** +** This file is part of the Qt Design Studio documentation. +** +** Commercial License Usage +** Licensees holding valid commercial Qt licenses may use this file in +** accordance with the commercial license agreement provided with the +** Software or, alternatively, in accordance with the terms contained in +** a written agreement between you and The Qt Company. For licensing terms +** and conditions see https://www.qt.io/terms-conditions. For further +** information use the contact form at https://www.qt.io/contact-us. +** +** GNU Free Documentation License Usage +** Alternatively, this file may be used under the terms of the GNU Free +** Documentation License version 1.3 as published by the Free Software +** Foundation and appearing in the file included in the packaging of +** this file. Please review the following information to ensure +** the GNU Free Documentation License version 1.3 requirements +** will be met: https://www.gnu.org/licenses/fdl-1.3.html. +** +****************************************************************************/ + +/*! + + \contentspage {Qt Design Studio} + \previouspage qtquick-properties.html + \page studio-fonts.html + \nextpage studio-adding-dynamics.html + + \title Using Custom Fonts + + For your UI to use custom fonts when you preview it on a device, + you have to import the fonts to the project folder. \QDS deploys them to + the device along with your UI. + + \note Use fixed-width fonts if you plan to animate running numbers, so that + they do not appear to jump around the screen when they change. + + To add fonts: + + \list 1 + \li Select \uicontrol Library > \uicontrol Resources > + \uicontrol {Add New Resources}. + \li Browse to the folder that contains the font files and select them. + \li Enter the name of the directory to save the fonts. By default, \QDS + suggests the project directory. + \li Select \uicontrol OK to save the fonts. + \endlist + + The fonts are added to the list of fonts for the \uicontrol Font property + in \uicontrol Properties. +*/ diff --git a/doc/qtdesignstudio/src/qtdesignstudio-getting-started.qdoc b/doc/qtdesignstudio/src/qtdesignstudio-getting-started.qdoc new file mode 100644 index 0000000000..a9b12d1057 --- /dev/null +++ b/doc/qtdesignstudio/src/qtdesignstudio-getting-started.qdoc @@ -0,0 +1,79 @@ +/**************************************************************************** +** +** Copyright (C) 2019 The Qt Company Ltd. +** Contact: https://www.qt.io/licensing/ +** +** This file is part of the Qt Design Studio documentation. +** +** Commercial License Usage +** Licensees holding valid commercial Qt licenses may use this file in +** accordance with the commercial license agreement provided with the +** Software or, alternatively, in accordance with the terms contained in +** a written agreement between you and The Qt Company. For licensing terms +** and conditions see https://www.qt.io/terms-conditions. For further +** information use the contact form at https://www.qt.io/contact-us. +** +** GNU Free Documentation License Usage +** Alternatively, this file may be used under the terms of the GNU Free +** Documentation License version 1.3 as published by the Free Software +** Foundation and appearing in the file included in the packaging of +** this file. Please review the following information to ensure +** the GNU Free Documentation License version 1.3 requirements +** will be met: https://www.gnu.org/licenses/fdl-1.3.html. +** +****************************************************************************/ + +/*! + \contentspage {Qt Design Studio Manual} + \previouspage index.html + \page studio-getting-started.html + \nextpage qtbridge-overview.html + + \title Getting Started + + Typically, you as a designer would create artwork in imaging and design + tools, such as Adobe Photoshop, Sketch, Blender, or Maya, and then send it + to a developer for adding it to the application. With the \QB export tool, + you can convert 2D assets into \l {Qt Quick} files. You can use the export + functionality of 3D graphics tools to save your 3D assets in a format + supported by \QDS. You can import the 2D and 3D assets into \QDS for + editing, before you submit the UI to the developer for adding the + functionality to the application. + + The following image describes the workflow using \QBPS and \QDS: + + \image studio-workflow.png + + The workflow consists of the following steps: + + \list 1 + \li Export your artwork from a design tool. + \li Create a project in \QDS and import your artwork to it. + \li Create reusable components in the Design mode. + \li Animate your design with the timeline and easing curve editor. + \li Create interactions using states and connections. + \li Preview your design in real time, on the desktop or on a mobile + or an embedded device. + \endlist + + The following topics contain information that you'll need to find your + way around \QDS: + + \list + \li \l {Exporting Artwork from Design Tools} + + Describes how to export 2D and 3D assets into files that + you can import to projects in \QDS. + \li \l {User Interface} + + Describes the parts and basic features of \QDS. + \li \l{Editing QML Files in Design Mode} + + Describes the parts and basic features of the Design mode. + \li \l {Tutorials} + + Describes how to use \QDS to create a simple animated UI with some + basic UI components, such as pages, buttons, and fields. Some of + the buttons can be used for moving between the pages. + \endlist +*/ diff --git a/doc/qtdesignstudio/src/qtdesignstudio-help-overview.qdoc b/doc/qtdesignstudio/src/qtdesignstudio-help-overview.qdoc new file mode 100644 index 0000000000..8c983839f2 --- /dev/null +++ b/doc/qtdesignstudio/src/qtdesignstudio-help-overview.qdoc @@ -0,0 +1,59 @@ +/**************************************************************************** +** +** Copyright (C) 2018 The Qt Company Ltd. +** Contact: https://www.qt.io/licensing/ +** +** This file is part of the Qt Design Studio documentation. +** +** Commercial License Usage +** Licensees holding valid commercial Qt licenses may use this file in +** accordance with the commercial license agreement provided with the +** Software or, alternatively, in accordance with the terms contained in +** a written agreement between you and The Qt Company. For licensing terms +** and conditions see https://www.qt.io/terms-conditions. For further +** information use the contact form at https://www.qt.io/contact-us. +** +** GNU Free Documentation License Usage +** Alternatively, this file may be used under the terms of the GNU Free +** Documentation License version 1.3 as published by the Free Software +** Foundation and appearing in the file included in the packaging of +** this file. Please review the following information to ensure +** the GNU Free Documentation License version 1.3 requirements +** will be met: https://www.gnu.org/licenses/fdl-1.3.html. +** +****************************************************************************/ + +/*! + \contentspage index.html + \page studio-help.html + \previouspage creator-editor-external.html + \nextpage {Examples and Tutorials} + + \title Help + + \list + \li \l{Examples and Tutorials} + + A set of examples available in the Welcome mode illustrates how + to use \QDS features such as the timeline. If you would rather + be shown things than read about them, you can watch our extensive + video tutorials. + + \li \l{Using the Help Mode} + + \QDS comes fully integrated with documentation. You can use search + and index functions to find particular topics in the helps, or + request context-sensitive help by pressing \key F1 in the Design + mode. + + \li \l{Frequently Asked Questions} + + Contains answers to some frequently asked questions about \QDS. + + \li \l{Concepts and Terms} + + Describes main \QDS concepts and terms. + + \endlist + +*/ diff --git a/doc/qtdesignstudio/src/qtdesignstudio-importing-designs.qdoc b/doc/qtdesignstudio/src/qtdesignstudio-importing-designs.qdoc new file mode 100644 index 0000000000..ee7f2250f9 --- /dev/null +++ b/doc/qtdesignstudio/src/qtdesignstudio-importing-designs.qdoc @@ -0,0 +1,177 @@ +/**************************************************************************** +** +** Copyright (C) 2019 The Qt Company Ltd. +** Contact: https://www.qt.io/licensing/ +** +** This file is part of the Qt Bridge documentation. +** +** Commercial License Usage +** Licensees holding valid commercial Qt licenses may use this file in +** accordance with the commercial license agreement provided with the +** Software or, alternatively, in accordance with the terms contained in +** a written agreement between you and The Qt Company. For licensing terms +** and conditions see https://www.qt.io/terms-conditions. For further +** information use the contact form at https://www.qt.io/contact-us. +** +** GNU Free Documentation License Usage +** Alternatively, this file may be used under the terms of the GNU Free +** Documentation License version 1.3 as published by the Free Software +** Foundation and appearing in the file included in the packaging of +** this file. Please review the following information to ensure +** the GNU Free Documentation License version 1.3 requirements +** will be met: https://www.gnu.org/licenses/fdl-1.3.html. +** +****************************************************************************/ + +/*! + \contentspage {Qt Design Studio} + \previouspage creator-vcs-git.html + \page studio-importing-designs.html + \nextpage studio-importing-2d.html + + \title Importing Designs + + You can import 2D and 3D assets to \QDS projects. You need to use \QB for + exporting the 2D assets from design tools, whereas you can directly import + 3D assets saved in widely-used 3D graphics formats. + + \list + \li \l{Importing 2D Assets} + + You can import 2D assets that you exported with \QB to a \QDS + project as image and QML files and edit them in the Design mode. + \li \l{Importing 3D Assets} + + You can import 3D assets that you created using 3D graphics + applications and stored in one of the supported file formats. + You can then edit them in the Design mode. + \endlist +*/ + +/*! + \contentspage {Qt Design Studio} + \previouspage studio-importing-designs.html + \page studio-importing-2d.html + \nextpage studio-importing-3d.html + + \title Importing 2D Assets + + \image studio-imported-assets.png "Artwork imported into Qt Design Studio" + + You can import assets that you exported with \QB to a \QDS project as image + and QML files and edit them in the Design mode. If you make changes to your + design in the design tool, you can merge the changes into existing QML files + without overwriting the changes you have made in \QDS. + + \note Attempting to import assets exported on another system might fail. + + The following instructions use an empty project as an example. For more + information about the options you have, see + \l {Creating Projects}. + + To import designs to \QDS projects: + + \list 1 + \li Select \uicontrol File > \uicontrol {New File or Project} > + \uicontrol General > \uicontrol Choose, and follow the + instructions of the wizard to create an empty project. + \li In \uicontrol Projects, double-click \e Screen01.ui.qml to move to + the Design mode. + \li Select \uicontrol Library > \uicontrol Resources > + \uicontrol {Add New Resources}. + \li Select the folder where you exported the assets. + \li Select \uicontrol {Exported Assets (*.metadata)} in the dropdown + menu to filter \e .metadata files. + \li Select a \e .metadata file to import, and then select + \uicontrol Open. + \li Select \uicontrol Details next to the + \uicontrol {Metadata Import Paths} field to display the path where + the metadata is imported from. + \image studio-import-metadata.png "Asset Import dialog" + \li Select \uicontrol Details next to the + \uicontrol {QML/Asset Export Paths} field to display the paths to + copy the assets to. + \li In the \uicontrol QML field, you can change the folder to copy the + QML files to. + \li In the \uicontrol Assets field, you can change the folder to copy + the image files to. + \li Deselect the \uicontrol {Import assets} check box if you only want + to create QML files. + \li Deselect the \uicontrol {Generate QML} check box if you only + want to import assets. + \li Select the \uicontrol {Merge QML} check box if you have imported the + assets before and want to merge the changes into existing QML files + instead of overwriting the existing files. + \li Select \uicontrol Import to import the QML files and assets. This + might take a little while for complex projects. + \endlist + + The imported assets are displayed in the \uicontrol Resources tab in the + \uicontrol Library as PNG images. The components that you specified in + the design tool are displayed in the \uicontrol {My QML Components} tab, + as well as in the \uicontrol Project tab of the \uicontrol Navigator as + separate QML files. + + \note The layer that was the bottom layer in the design tool becames the top + layer in the \uicontrol Navigator to reflect the QML code model. You + can view the QML code in the \uicontrol {Text Editor} tab. + + If asset importer conflicts, warnings, and errors are displayed in the + \uicontrol {Asset Import} dialog while importing, fix the issues in + design tool and export the assets again. + + \section1 \QB Videos + + For more information about importing assets from Adobe Photoshop, watch a + video tutorial and webinar about using \QB: + + \list + \li \l{https://resources.qt.io/development-topic-ui-design/qtdesignstudio-clustertutorial-partone} + {Building an Instrument Cluster for Your Car HMI, Part 1} + \li \l{https://www.youtube.com/watch?v=ZzbucmQPU44} + {From Photoshop to Prototype with Qt Design Studio} + \endlist +*/ + +/*! + \contentspage {Qt Design Studio} + \previouspage studio-importing-2d.html + \page studio-importing-3d.html + \nextpage quick-converting-ui-projects.html + + \title Importing 3D Assets + + You can import files you created using 3D graphics applications and stored + in several widely-used formats, such as .blend, .dae, .fbx, .glb, .gltf, + .obj, .uia, or .uip. For a list of formats supported by each \l{Qt Quick 3D} + version, see the module documentation. + + For more information about exporting 3D graphics from Maya, see + \l{Exporting from Maya}. + + During the import, you can optimize the files for \QDS. You can remove + components from meshes to reduce the cache size, find and fix issues in + the files, optimize graphs and meshes, and so on. The available options + depend on whether you are importing files that you created with Qt 3D Studio + or with other 3D graphics tools. See the tooltips in the options dialog + for more information about a particular option. + + \image studio-import-3d.png + + To import 3D assets to \QDS projects: + + \list 1 + \li In the Design mode, select \uicontrol Library > \uicontrol Resources + > \uicontrol {Add New Resources}. + \li Select \uicontrol {3D Assets} in the dropdown menu to filter 3D + graphics files. + \li Select a file to import, and then select \uicontrol Open. + \li In the \uicontrol {3D Scene Options} tab, select options for + importing the file. + \li Select \uicontrol Import to import the 3D graphics file. + \li When the import is done, select \uicontrol Close. + \endlist + + You can open the imported files in the Design mode for editing in the + \l{Editing 3D Scenes}{3D editor}. +*/ diff --git a/doc/qtdesignstudio/src/qtdesignstudio-javascript.qdoc b/doc/qtdesignstudio/src/qtdesignstudio-javascript.qdoc new file mode 100644 index 0000000000..a0e5926adb --- /dev/null +++ b/doc/qtdesignstudio/src/qtdesignstudio-javascript.qdoc @@ -0,0 +1,152 @@ +/**************************************************************************** +** +** Copyright (C) 2018 The Qt Company Ltd. +** Contact: https://www.qt.io/licensing/ +** +** This file is part of the Design Studio documentation. +** +** Commercial License Usage +** Licensees holding valid commercial Qt licenses may use this file in +** accordance with the commercial license agreement provided with the +** Software or, alternatively, in accordance with the terms contained in +** a written agreement between you and The Qt Company. For licensing terms +** and conditions see https://www.qt.io/terms-conditions. For further +** information use the contact form at https://www.qt.io/contact-us. +** +** GNU Free Documentation License Usage +** Alternatively, this file may be used under the terms of the GNU Free +** Documentation License version 1.3 as published by the Free Software +** Foundation and appearing in the file included in the packaging of +** this file. Please review the following information to ensure +** the GNU Free Documentation License version 1.3 requirements +** will be met: https://www.gnu.org/licenses/fdl-1.3.html. +** +****************************************************************************/ + +/*! + \contentspage {Qt Design Studio} + \previouspage creator-editor-options-text.html + \page studio-javascript.html + \nextpage studio-debugging.html + + \title Simulating Application Logic + + You can use JavaScript to simulate application logic that brings your UI to + life. + + You will need the following files: + + \list + \li Qt Quick file that will specify the API of the UI + \li JavaScript file that generates mock data for the UI. + For more information about using JavaScript, see + \l{Integrating QML and JavaScript}. + \li Module definition file (\e qmldir) that declares the QML type + you specify in the Qt Quick file. For more information, see + \l {Module Definition qmldir Files}. + \endlist + + Here, you will need to write some C++ code. Namely, the Qt Quick file will + contain a QObject-derived class that is registered with the QML type system + as a \e singleton type. This enables the use of global property values in + the UI. + + You can find a video tutorial about creating JavaScript for generating mock + data for a UI + \l{https://resources.qt.io/development-topic-ui-design/qtdesignstudio-clustertutorial-partfour} + {here}. + + To create the necessary files: + + \list 1 + \li In the File Explorer, create a folder for the JavaScript files + (for example, \e backend) and another one for the mock data + (for example, \e Data) in your project folder. + \note Make sure to capitalize the data folder name, because you + will need to import it as a QML type later, and QML type names must + be capitalized. + \li In \QDS, open the project file (.qmlproject) to add the backend + folder to the list of plugin directories passed to the QML runtime: + \code + importPaths: [ "imports", "backend" ] + \endcode + \li Select \uicontrol File > \uicontrol {New File or Project} > + \uicontrol {Files and Classes} > \uicontrol {Qt Quick Files} > + \uicontrol {Qt Quick File} > \uicontrol Choose to add a Qt + Quick file that will specify the API of the UI. + \li Follow the instructions of the wizard to create the Qt Quick file + in the data folder. In these instructions, the file is called + \e Values.qml. + \note Make sure to capitalize the filename, because it will become + a custom QML type. + \li Select \uicontrol File > \uicontrol {New File or Project} > + \uicontrol {Files and Classes} > \uicontrol {JavaScript} > + \uicontrol {JavaScript File} > \uicontrol Choose to create a + JavaScript file that generates mock data for the UI. + \li Follow the instructions of the wizard to create the JavaScript file + in the data folder. In these instructions, the file is called + \e {simulation.js}. + \li Delete the template text in JavaScript file and save the file. + \li In a text editor such as Notepad, create a module definition file + called \e qmldir with the following contents and place it in the + data directory: + \code + singleton Values 1.0 Values.qml + \endcode + \li Open \e Values.qml in the \uicontrol {Text Editor} tab for editing. + \li Add the following code to the top of the file to register the + QObject-derived class that you will use to expose the global + properties as a singleton type: + \code + pragma Singleton + \endcode + \li Add the following import statement to import the \e {simulation.js} + file to use the functionality that it provides: + \code + #import simulation.js as JS + \endcode + \li Add the following code to create a QObject-derived class that will + list the global properties you want to simulate and their default + values: + \code + QObject { + id: values + + // property values to simulate + property int name1: default1 + property string name2: default2 + property real name3: default3 + + } + \endcode + \note You must export the properties as aliases by selecting + \uicontrol {Export Property as Alias} in the + \inlineimage icons/action-icon.png + (\uicontrol Actions) menu of the property in the + \uicontrol Properties view. Exported properties are listed in + \uicontrol Connections > \uicontrol Properties, where you can + change their names. + \li Add the following code to use a \l Timer type to specify a range of + values for the property: + \code + property Timer name1Timer: Timer{ + running: true + repeat: true + onTriggered: JS.name1Timer() + interval: 10 + \endcode + \note You must add the JavaScript method to the JavaScript file. + \li Open the main UI file of the project and add the following code to + import the data folder as a QML module: + \code + #import Data 1.0 as Data + \endcode + \li Select \uicontrol {Set Binding} in the \uicontrol Settings menu of the + property to bind the property value to the value defined in the + values file. For example, you would set the following expression for + \e name1: + \code + Data.Values.name1 + \endcode + \endlist +*/ diff --git a/doc/qtdesignstudio/src/qtdesignstudio-platforms.qdoc b/doc/qtdesignstudio/src/qtdesignstudio-platforms.qdoc new file mode 100644 index 0000000000..2f48bdf68d --- /dev/null +++ b/doc/qtdesignstudio/src/qtdesignstudio-platforms.qdoc @@ -0,0 +1,55 @@ +/**************************************************************************** +** +** Copyright (C) 2019 The Qt Company Ltd. +** Contact: https://www.qt.io/licensing/ +** +** This file is part of the Qt Design Studio documentation. +** +** Commercial License Usage +** Licensees holding valid commercial Qt licenses may use this file in +** accordance with the commercial license agreement provided with the +** Software or, alternatively, in accordance with the terms contained in +** a written agreement between you and The Qt Company. For licensing terms +** and conditions see https://www.qt.io/terms-conditions. For further +** information use the contact form at https://www.qt.io/contact-us. +** +** GNU Free Documentation License Usage +** Alternatively, this file may be used under the terms of the GNU Free +** Documentation License version 1.3 as published by the Free Software +** Foundation and appearing in the file included in the packaging of +** this file. Please review the following information to ensure +** the GNU Free Documentation License version 1.3 requirements +** will be met: https://www.gnu.org/licenses/fdl-1.3.html. +** +****************************************************************************/ + +/*! + \contentspage {Qt Design Studio} + \previouspage studio-advanced.html + \page studio-platforms.html + \nextpage creator-keyboard-shortcuts.html + + \title Supported Platforms + + You can install and run \QDS on several operating systems to create + applications for multiple desktop, embedded, and mobile device platforms. + + \section1 Development Platforms + + \QDS is available in binary packages for the following operating systems: + + \list + \li \macos 10.13 and 10.14.x + \li Ubuntu Linux 18.04 + \li Windows 10 + \endlist + + \section1 Design Tools + + \QB is available for the following design tools: + + \list + \li Adobe Photoshop version 20.0.0 + \li Sketch 55.1 + \endlist +*/ diff --git a/doc/qtdesignstudio/src/qtdesignstudio-projects-overview.qdoc b/doc/qtdesignstudio/src/qtdesignstudio-projects-overview.qdoc new file mode 100644 index 0000000000..6f313d6688 --- /dev/null +++ b/doc/qtdesignstudio/src/qtdesignstudio-projects-overview.qdoc @@ -0,0 +1,73 @@ +/**************************************************************************** +** +** Copyright (C) 2019 The Qt Company Ltd. +** Contact: https://www.qt.io/licensing/ +** +** This file is part of the Qt Design Studio documentation. +** +** Commercial License Usage +** Licensees holding valid commercial Qt licenses may use this file in +** accordance with the commercial license agreement provided with the +** Software or, alternatively, in accordance with the terms contained in +** a written agreement between you and The Qt Company. For licensing terms +** and conditions see https://www.qt.io/terms-conditions. For further +** information use the contact form at https://www.qt.io/contact-us. +** +** GNU Free Documentation License Usage +** Alternatively, this file may be used under the terms of the GNU Free +** Documentation License version 1.3 as published by the Free Software +** Foundation and appearing in the file included in the packaging of +** this file. Please review the following information to ensure +** the GNU Free Documentation License version 1.3 requirements +** will be met: https://www.gnu.org/licenses/fdl-1.3.html. +** +****************************************************************************/ + +/*! + \contentspage {Qt Design Studio Manual} + \previouspage {Tutorials} + \page studio-projects-managing.html + \nextpage studio-projects.html + + \title Managing Projects + + One of the major advantages of \QDS is that it allows a team of designers + and developers to share a project across different development platforms + with a common tool for design, development, profiling, and debugging. + + \list + + \li \l {Creating Projects} + + You must add your exported files to a new project that you create + in \QDS. Setting up a new project in \QDS is aided by a wizard that + guides you step-by-step through the project creation process, + creates the necessary files, and specifies settings depending + on the choices you make. + + You can use wizards to create projects for the desktop or embedded + Linux and Android devices. In addition, you can add individual QML + files, components, font loaders, and JavaScript files to your + projects. + + \li \l{Using Git} + + You can add the project files to the Git version control, so that + the developers can keep up with your changes. Store and edit only + project source files and configuration files. Do not store generated + files. + + \li \l{Importing Designs} + + You can import assets that you exported from Adobe Photoshop to a + \QDS project and edit them in the Design mode to create a UI. + + \li \l {Converting UI Projects to Applications} + + \QDS projects are useful for creating UIs. To use them + for application development in Qt Creator, you have to convert them + to Qt Quick Application projects that contain .pro, .cpp, and .qrc + files. + + \endlist +*/ diff --git a/doc/qtdesignstudio/src/qtdesignstudio-projects.qdoc b/doc/qtdesignstudio/src/qtdesignstudio-projects.qdoc new file mode 100644 index 0000000000..570f2c8eb0 --- /dev/null +++ b/doc/qtdesignstudio/src/qtdesignstudio-projects.qdoc @@ -0,0 +1,159 @@ +/**************************************************************************** +** +** Copyright (C) 2019 The Qt Company Ltd. +** Contact: https://www.qt.io/licensing/ +** +** This file is part of the Qt Design Studio documentation. +** +** Commercial License Usage +** Licensees holding valid commercial Qt licenses may use this file in +** accordance with the commercial license agreement provided with the +** Software or, alternatively, in accordance with the terms contained in +** a written agreement between you and The Qt Company. For licensing terms +** and conditions see https://www.qt.io/terms-conditions. For further +** information use the contact form at https://www.qt.io/contact-us. +** +** GNU Free Documentation License Usage +** Alternatively, this file may be used under the terms of the GNU Free +** Documentation License version 1.3 as published by the Free Software +** Foundation and appearing in the file included in the packaging of +** this file. Please review the following information to ensure +** the GNU Free Documentation License version 1.3 requirements +** will be met: https://www.gnu.org/licenses/fdl-1.3.html. +** +****************************************************************************/ + +/*! + + \contentspage {Qt Design Studio Manual} + \previouspage studio-projects-managing.html + \page studio-projects.html + \nextpage creator-vcs-git.html + + \title Creating Projects + + Creating a project enables you to: + + \list + \li Group files together + \li Include forms and resource files + \li Specify settings for previewing UIs + \endlist + + Setting up a new project in \QDS is aided by a wizard that guides you + step-by-step through the project creation process. The wizards prompt you + to enter the settings needed for that particular type of project and create + the necessary files for you. + + Studio projects are useful for creating UIs. You cannot use + them for application development, because they do not contain: + + \list + \li C++ code + \li Resource files (.qrc) + \li Code needed for deploying applications to devices. + \endlist + + Because the UIs do not contain any C++ code, you do not need + to build them. To test how well your designs work, you can preview the + UIs on the desktop or embedded Linux devices. For more + information, see \l{Previewing}. + + \image studio-project-wizards.png "A list of project wizards" + + You can export designs from other design tools and import them to projects + or create them from scratch using the following wizards: + + \list + \li \uicontrol General generates projects that are suitable for all + target platforms. + \omit + \li \uicontrol Embedded generates projects that work well on embedded + Linux devices. + \endomit + \li \uicontrol Mobile generates projects that work well on mobile + devices. + \li \uicontrol Desktop generates projects that work well on the desktop. + \endlist + + \section1 Using Project Wizards + + \list 1 + \li Select \uicontrol File > \uicontrol {New File or Project}. + \li Select the type of your project, and then select \uicontrol Choose. + \li In the \uicontrol Name field, enter a name for the project. + \li In the \uicontrol {Create in} field, enter the path for the project + files, and then select \uicontrol Next (or \uicontrol Continue on + \macos). + \li In the \uicontrol {Screen resolution} field, select the screen + resolution for previewing the UI on the desktop or on a device. + \li In the \uicontrol {Qt Quick Controls Style} field, select one of + the predefined \l{Styling Qt Quick Controls}{UI styles} to use, + and then select \uicontrol Finish (or \uicontrol Done on \macos). + \endlist + + \QDS creates the following files and folders: + + \list + \li .qmlproject project file defines that all QML, JavaScript, and image + files in the project folder belong to the project. Therefore, you do + not need to individually list all the files in the project. + \li .qml file defines a UI item, such as a component, screen, or the + whole UI. + \li ui.qml file defines a form for the UI. + \li qtquickcontrols2.conf file specifies the preferred style and some + style-specific arguments. + \li \e imports folder contains a \e {Constants.qml} file that specifies + a font loader for the Arial font and a \e qmldir module definition + file that declares the Constant QML type. For more information, see + \l {Module Definition qmldir Files}. In addition, the \e QtQuick + subfolder contains the Studio components and effects QML types. + \endlist + + To use JavaScript and image files in the UI, copy them to the + project folder. + + \section1 Adding Files to Projects + + You can use wizards also to add individual files to your projects. + You can create the following types of files: + + \list + \li \uicontrol {Qt Quick Files} + \list + \li \uicontrol {Qt Quick File} generates a QML type with one + of the following types as the root item: \l Item, + \l Rectangle, \l Image, \l BorderImage, \l Flickable, + \l Row, \l Column, \l Flow, or \li Grid. + \li \uicontrol {Qt Quick UI File} generates a UI form with one + of the above types as the root item. + \li \uicontrol {Qt Quick Views} generates a \l GridView or a + \l ListView. + \endlist + \li \uicontrol {Qt Quick Controls} + \list + \li \l [Qt Quick Controls 2] {Button}{Custom Button} creates a + push button with a text label. + \li \l [Qt Quick Controls 2] {Switch}{Custom Switch} creates a + switch with on and off states. + \li \l [Qt Quick Controls 2] {Pane} provides a background that + matches the UI style and theme. + \li \l [Qt Quick Controls 2] { StackView} provides a stack-based + navigation model. + \li \l [Qt Quick Controls 2] {SwipeView} enables users to + navigate pages by swiping sideways. + \endlist + \li \uicontrol {QML Files} + \list + \li \l FontLoader imports custom fonts to the project for + deployment to devices. For more information, see + \l {Using Custom Fonts}. + \li \l ListModel adds a list model to the project. + \endlist + \li \uicontrol {JavaScript File} generates files that you can use to + write the application logic. This is useful for testing the + application before the developers implement the application logic + in C++, for example. For more information, see + \l {Simulating Application Logic}. + \endlist +*/ diff --git a/doc/qtdesignstudio/src/qtdesignstudio-prototyping.qdoc b/doc/qtdesignstudio/src/qtdesignstudio-prototyping.qdoc new file mode 100644 index 0000000000..df42f2fca0 --- /dev/null +++ b/doc/qtdesignstudio/src/qtdesignstudio-prototyping.qdoc @@ -0,0 +1,91 @@ +/**************************************************************************** +** +** Copyright (C) 2019 The Qt Company Ltd. +** Contact: https://www.qt.io/licensing/ +** +** This file is part of the Qt Design Studio documentation. +** +** Commercial License Usage +** Licensees holding valid commercial Qt licenses may use this file in +** accordance with the commercial license agreement provided with the +** Software or, alternatively, in accordance with the terms contained in +** a written agreement between you and The Qt Company. For licensing terms +** and conditions see https://www.qt.io/terms-conditions. For further +** information use the contact form at https://www.qt.io/contact-us. +** +** GNU Free Documentation License Usage +** Alternatively, this file may be used under the terms of the GNU Free +** Documentation License version 1.3 as published by the Free Software +** Foundation and appearing in the file included in the packaging of +** this file. Please review the following information to ensure +** the GNU Free Documentation License version 1.3 requirements +** will be met: https://www.gnu.org/licenses/fdl-1.3.html. +** +****************************************************************************/ + +/*! + \contentspage {Qt Design Studio Manual} + \previouspage quick-converting-ui-projects.html + \page studio-prototyping.html + \nextpage quick-components.html + + \title Creating UIs + + When you install \QDS, everything you'll need to design UIs + using \l{Qt Quick} and to preview them on the desktop or on Android or + embedded Linux devices is automatically installed and configured correctly + for you. + + Qt Quick enables you to build UIs around the behavior of + \e components and how they connect with one another. You + create components using Qt Quick and QML types that are available in + the Design mode. You can specify values for the \e properties of a + component to change its appearance and behavior. All QML types have a + set of predefined properties, some of which control things that are + visible to users, while others are used behind the scene. + + While it is useful to learn the basics of Qt Quick, you can also rely on + \QDS to write the code for you when you drag-and-drop the ready-made + components to the working area and change them to your liking by modifying + their properties in the Design mode. You can always check up details in + the extensive Qt Quick documentation by pressing \key F1. + + \list + + \li \l {Creating Components} + + In addition to your imported artwork, you can use the Design + mode to customize ready-made components or design any custom form + and shape directly as QML types. You can import visual assets in + various formats, such as PNG, JPG, and SVG for use in the + components. + + \li \l {Managing Item Hierarchy} + + You can manage the items in the current QML file and their + relationships in the \uicontrol Navigator. + + \li \l {Specifying Item Properties} + + You can specify values for the properties of a component to change + its appearance and behavior. All QML types have a set of predefined + properties. Some properties, such as position, size, and visibility, + are common to all QML types, whereas others are specific to the QML + type. You can specify properties for your components in the + \uicontrol Properties pane. + + \li \l {Using Custom Fonts} + + You can load custom fonts to \QDS and use them in your designs. + \endlist + + \section1 Related Topics + + \list + \li \l{Qt Quick UI Forms} + + Some of the wizards create Qt Quick projects that contain UI forms + (.ui.qml files). The forms use a purely declarative subset of the + QML language and you can edit them in the Design mode. + \endlist +*/ diff --git a/doc/qtdesignstudio/src/qtdesignstudio-terms.qdoc b/doc/qtdesignstudio/src/qtdesignstudio-terms.qdoc new file mode 100644 index 0000000000..5bb5b2f2de --- /dev/null +++ b/doc/qtdesignstudio/src/qtdesignstudio-terms.qdoc @@ -0,0 +1,90 @@ +/**************************************************************************** +** +** Copyright (C) 2018 The Qt Company Ltd. +** Contact: https://www.qt.io/licensing/ +** +** This file is part of the Qt Design Studio documentation. +** +** Commercial License Usage +** Licensees holding valid commercial Qt licenses may use this file in +** accordance with the commercial license agreement provided with the +** Software or, alternatively, in accordance with the terms contained in +** a written agreement between you and The Qt Company. For licensing terms +** and conditions see https://www.qt.io/terms-conditions. For further +** information use the contact form at https://www.qt.io/contact-us. +** +** GNU Free Documentation License Usage +** Alternatively, this file may be used under the terms of the GNU Free +** Documentation License version 1.3 as published by the Free Software +** Foundation and appearing in the file included in the packaging of +** this file. Please review the following information to ensure +** the GNU Free Documentation License version 1.3 requirements +** will be met: https://www.gnu.org/licenses/fdl-1.3.html. +** +****************************************************************************/ + +/*! + \contentspage index.html + \page studio-terms.html + \previouspage studio-faq.html + \nextpage creator-acknowledgements.html + + \title Concepts and Terms + + This topic describes main \QDS concepts and terms. + + \section1 Component + \target glossary-component + + An instantiable QML definition, typically contained in a .qml file. + For example, a Button component may be defined in Button.qml. The + QML runtime may instantiate this Button component to create Button + objects. Alternatively, a component may be defined inside a + \l{Component} QML type. + + \section1 Deploy Configuration + \target glossary-deploy-config + + Handles the packaging and copying of the necessary files to a location + you want to preview the UI at. The files can be copied to a location in + the file system of the development PC or a \l{glossary-device}{device}. + + \section1 Device + \target glossary-device + + An embedded device or an Anroid device. + + \section1 Kit + \target glossary-buildandrun-kit + + \QDS groups run settings as kits to make cross-platform development easier. + Each kit consists of a set of values that define one environment, such as a + \l{glossary-device} {device} to preview the UI on. + + \section1 Mode + \target glossary-mode + + Adapts the \QDS UI to the different UI design + tasks at hand. Each mode has its own view that shows only the information + required for performing a particular task, and provides only the most + relevant features and functions related to it. As a result, the majority + of the \QDS window area is always dedicated to the actual task. + + \section1 Project + \target glossary-project + + Groups together a set of files, images, and other assets that you + can deploy and run on different desktop and \l{glossary-device}{device} + platforms, as specified by a \e {deploy configuration} and + \e {run configuration}. + + \section1 Run Configuration + \target glossary-run-config + + Starts the UI in the location where it was copied by the + \e {deploy configuration}. By default, when you run a project, \QDS + deploys it to the \l{glossary-device}{device} specified in the + selected \l{glossary-buildandrun-kit}{kit}, and runs it there. However, + if you have not made any changes to the project since you last deployed + it, \QC simply runs it again. +*/ diff --git a/doc/qtdesignstudio/src/qtdesignstudio-toc.qdoc b/doc/qtdesignstudio/src/qtdesignstudio-toc.qdoc new file mode 100644 index 0000000000..4c7af21e01 --- /dev/null +++ b/doc/qtdesignstudio/src/qtdesignstudio-toc.qdoc @@ -0,0 +1,160 @@ +/**************************************************************************** +** +** Copyright (C) 2019 The Qt Company Ltd. +** Contact: https://www.qt.io/licensing/ +** +** This file is part of the Qt Design Studio documentation. +** +** Commercial License Usage +** Licensees holding valid commercial Qt licenses may use this file in +** accordance with the commercial license agreement provided with the +** Software or, alternatively, in accordance with the terms contained in +** a written agreement between you and The Qt Company. For licensing terms +** and conditions see https://www.qt.io/terms-conditions. For further +** information use the contact form at https://www.qt.io/contact-us. +** +** GNU Free Documentation License Usage +** Alternatively, this file may be used under the terms of the GNU Free +** Documentation License version 1.3 as published by the Free Software +** Foundation and appearing in the file included in the packaging of +** this file. Please review the following information to ensure +** the GNU Free Documentation License version 1.3 requirements +** will be met: https://www.gnu.org/licenses/fdl-1.3.html. +** +****************************************************************************/ + +/*! + \contentspage {Qt Design Studio} + \page qtdesignstudio-toc.html + + \title All Topics + + \list + \li \l{Getting Started} + \list + \li \l{Exporting Artwork from Design Tools} + \list + \li \l{Exporting Designs from Adobe Photoshop} + \list + \li \l{Setting Up Qt Bridge for Adobe Photoshop} + \li \l{Using Qt Bridge for Adobe Photoshop} + \endlist + \li \l{Exporting Designs from Sketch} + \list + \li \l{Setting Up Qt Bridge for Sketch} + \li \l{Using Qt Bridge for Sketch} + \endlist + \li \l{Exporting from Maya} + \endlist + \li \l{User Interface} + \list + \li \l{Selecting Modes} + \li \l{Browsing Project Contents} + \li \l{Viewing Output} + \endlist + \li \l{Editing QML Files in Design Mode} + \li \l{Tutorials} + \endlist + \li \l{Managing Projects} + \list + \li \l{Creating Projects} + \li \l{Using Git} + \li \l{Importing Designs} + \list + \li \l{Importing 2D Assets} + \li \l{Importing 3D Assets} + \endlist + \li \l{Converting UI Projects to Applications} + \endlist + \li \l{Creating UIs} + \list + \li \l{Creating Components} + \list + \li \l{Creating Buttons} + \li \l{Creating Scalable Buttons and Borders} + \endlist + \li \l{Managing Item Hierarchy} + \li \l{Specifying Item Properties} + \li \l{Using Custom Fonts} + \li \l{Qt Quick UI Forms} + \endlist + \li \l {Adding Dynamics} + \list + \li \l{Creating Animations} + \li \l{Adding Connections} + \list + \li\l{Connecting Objects to Signals} + \li\l{Specifying Dynamic Properties} + \li\l{Adding Bindings Between Properties} + \endlist + \li \l{Adding States} + \li \l{Editing PathView Properties} + \endlist + \li \b {\l{Editing 3D Scenes}} + \list + \li \l{Editing 3D Assets in Design Mode} + \li \l{Working in the 3D Editor} + \li \l{Adding 3D Views} + \li \l{Using 3D Components} + \list + \li \l{Setting Node Properties} + \li \l{Adding Models} + \li \l{Using Materials and Shaders} + \li \l{Attaching Textures to Materials} + \li \l{Using Lights} + \li \l{Using Scene Camera} + \li \l{Setting Scene Environment} + \endlist + \endlist + \li \l{Previewing} + \list + \li \l{Previewing on Desktop} + \li \l{Previewing on Devices} + \li \l{Previewing in Browsers} + \endlist + \li \l{Advanced Topics} + \list + \li \l{Supported Platforms} + \li \l{Keyboard Shortcuts} + \li \l{Coding} + \list + \li \l{Writing Code} + \list + \li \l{Working in Edit Mode} + \li \l{Semantic Highlighting} + \li \l{Checking Code Syntax} + \li \l{Completing Code} + \li \l{Indenting Text or Code} + \li \l{Using Qt Quick Toolbars} + \li \l{Comparing Files} + \endlist + \li \l{Finding} + \list + \li \l{Finding and Replacing} + \li \l{Searching with the Locator} + \endlist + \li \l{Refactoring} + \li \l{Configuring the Editor} + \list + \li \l{Specifying Text Editor Settings} + \endlist + \endlist + \li \l{Simulating Application Logic} + \li \l{Debugging and Profiling} + \list + \li \l{Debugging Qt Quick Projects} + \li \l{Debugging a Qt Quick Example Application} + \li \l{Profiling QML Applications} + \endlist + \li \l{Using External Tools} + \endlist + \li \l{Help} + \list + \li \l{Examples and Tutorials} + \li \l{Using the Help Mode} + \li \l{Frequently Asked Questions} + \li \l{Concepts and Terms} + \endlist + \li \l{Acknowledgements} + \endlist +*/ diff --git a/doc/qtdesignstudio/src/qtdesignstudio-tutorials.qdoc b/doc/qtdesignstudio/src/qtdesignstudio-tutorials.qdoc new file mode 100644 index 0000000000..da98ee0690 --- /dev/null +++ b/doc/qtdesignstudio/src/qtdesignstudio-tutorials.qdoc @@ -0,0 +1,53 @@ +/**************************************************************************** +** +** Copyright (C) 2019 The Qt Company Ltd. +** Contact: https://www.qt.io/licensing/ +** +** This file is part of the Qt Design Studio documentation. +** +** Commercial License Usage +** Licensees holding valid commercial Qt licenses may use this file in +** accordance with the commercial license agreement provided with the +** Software or, alternatively, in accordance with the terms contained in +** a written agreement between you and The Qt Company. For licensing terms +** and conditions see https://www.qt.io/terms-conditions. For further +** information use the contact form at https://www.qt.io/contact-us. +** +** GNU Free Documentation License Usage +** Alternatively, this file may be used under the terms of the GNU Free +** Documentation License version 1.3 as published by the Free Software +** Foundation and appearing in the file included in the packaging of +** this file. Please review the following information to ensure +** the GNU Free Documentation License version 1.3 requirements +** will be met: https://www.gnu.org/licenses/fdl-1.3.html. +** +****************************************************************************/ + +/*! + \contentspage {Qt Design Studio Manual} + \previouspage creator-using-qt-quick-designer.html + \group gstutorials + \nextpage studio-projects-managing.html + + \title Tutorials + + \image loginui4.gif "Log In UI" + + You can follow a set of hands-on tutorials that build on each other to + illustrate how to use the features of \QDS. In addition, the tutorials + provide additional information about the features of QML and Qt Quick + that are relevant to the task at hand. Even if you plan to export your + designs from a design tool, it is useful to first create a small UI from + scratch to learn the basic concepts of \QDS. In particular, Part 1 + describes the terms and concepts that you will run into when exporting + designs with \QB. + + Before you start, take a look at the following topics to familiarize + yourself with the parts of \QDS in general, and the Design mode in + particular: \l{User Interface} and \l{Editing QML Files in Design Mode}. + + In addition to these entry-level tutorials, \QDS comes with examples + and video tutorials that you can open from the \uicontrol Examples and + \uicontrol Tutorials tabs in the \uicontrol Welcome mode. For more + information, see \l {Examples and Tutorials}. +*/ diff --git a/doc/qtdesignstudio/src/qtdesignstudio-visual-effects.qdocinc b/doc/qtdesignstudio/src/qtdesignstudio-visual-effects.qdocinc new file mode 100644 index 0000000000..e373dc80a8 --- /dev/null +++ b/doc/qtdesignstudio/src/qtdesignstudio-visual-effects.qdocinc @@ -0,0 +1,104 @@ +/**************************************************************************** +** +** Copyright (C) 2019 The Qt Company Ltd. +** Contact: https://www.qt.io/licensing/ +** +** This file is part of the Qt Design Studio documentation. +** +** Commercial License Usage +** Licensees holding valid commercial Qt licenses may use this file in +** accordance with the commercial license agreement provided with the +** Software or, alternatively, in accordance with the terms contained in +** a written agreement between you and The Qt Company. For licensing terms +** and conditions see https://www.qt.io/terms-conditions. For further +** information use the contact form at https://www.qt.io/contact-us. +** +** GNU Free Documentation License Usage +** Alternatively, this file may be used under the terms of the GNU Free +** Documentation License version 1.3 as published by the Free Software +** Foundation and appearing in the file included in the packaging of +** this file. Please review the following information to ensure +** the GNU Free Documentation License version 1.3 requirements +** will be met: https://www.gnu.org/licenses/fdl-1.3.html. +** +****************************************************************************/ + +/*! +//! [qml visual effects] + + \section1 Applying Visual Effects + + \QDS provides a set of Qt Quick Studio effects that inherit the types in the + \l {Qt Graphical Effects} module. To apply a visual effect to a component, + you must place the component inside the effect. First drag-and-drop an + effect from \uicontrol Library > \uicontrol Effects to the the canvas or + the \uicontrol Navigator, and then drag-and-drop the component to the + effect. For some effects, you need two source components. + + The following table summarizes the available effects and contains links to + the documentation of the inherited QML type. + + \table + \header + \li Qt Quick Studio Effect + \li Description + \row + \li \l [QML] {Blend} + \li Merges two source components by using a blend mode. + + The default mode is \c subtract, where the pixel value from the + component that is going to be blended over the source component + is subtracted from the source and written. + + For a list of possible values and examples of their use, see + \l{Blend::mode}{Blend.mode}. + \row + \li \l {FastBlur}{Blur} + \li Applies a fast blur effect to one or more source components. + \row + \li \l {BrightnessContrast}{Brightness Contrast} + \li Adjusts brightness and contrast. + \row + \li \l {ColorOverlay}{Color Overlay} + \li Alters the colors of the source component by applying an overlay + color. + \row + \li \l Colorize + \li Sets the color in the HSL color space. + \row + \li \l {DirectionalBlur}{Directional Blur} + \li Applies blur effect to the specified direction. + \row + \li \l {DropShadow}{Drop Shadow} + \li Generates a soft shadow behind the source component. + \row + \li \l [QML] {Glow} + \li Generates a halo-like glow around the source component. + \row + \li \l {HueSaturation}{Hue Saturation} + \li Alters the source component colors in the HSL color space. + \row + \li \l {OpacityMask}{Mask} + \li Masks the source component with another component. + \row + \li \l {MaskedBlur}{Masked Blur} + \li Applies a blur effect with a varying intesity. + The \l GradientStop type is used to specify the color used at a + given position in a gradient, as represented by a gradient stop. + The default positions for the stops are 0.20, 0.50, 0.80, and 1.00. + The default color is black. + \row + \li \l {RadialBlur}{Radial Blur} + \li Applies directional blur in a circular direction around the + component's center point. + \row + \li \l {Desaturate}{Saturation} + \li Reduces the saturation of the colors. + \row + \li \l {ZoomBlur}{Zoom Blur} + \li Applies directional blur effect towards source component's center + point. + \endtable + +//! [qml visual effects] +*/ diff --git a/doc/qtdesignstudio/src/qtdesignstudio.qdoc b/doc/qtdesignstudio/src/qtdesignstudio.qdoc new file mode 100644 index 0000000000..f69cd066c6 --- /dev/null +++ b/doc/qtdesignstudio/src/qtdesignstudio.qdoc @@ -0,0 +1,119 @@ +/**************************************************************************** +** +** Copyright (C) 2019 The Qt Company Ltd. +** Contact: https://www.qt.io/licensing/ +** +** This file is part of the Qt Design Studio documentation. +** +** Commercial License Usage +** Licensees holding valid commercial Qt licenses may use this file in +** accordance with the commercial license agreement provided with the +** Software or, alternatively, in accordance with the terms contained in +** a written agreement between you and The Qt Company. For licensing terms +** and conditions see https://www.qt.io/terms-conditions. For further +** information use the contact form at https://www.qt.io/contact-us. +** +** GNU Free Documentation License Usage +** Alternatively, this file may be used under the terms of the GNU Free +** Documentation License version 1.3 as published by the Free Software +** Foundation and appearing in the file included in the packaging of +** this file. Please review the following information to ensure +** the GNU Free Documentation License version 1.3 requirements +** will be met: https://www.gnu.org/licenses/fdl-1.3.html. +** +****************************************************************************/ + +/*! + \contentspage{index.html}{Qt Design Studio} + \page index.html + \nextpage studio-getting-started.html + + \title Qt Design Studio Manual + + \QDS is a UI design and development environment for creating animated UIs + and previewing them on the desktop or on Android and embedded Linux devices. + It provides you with tools for accomplishing your tasks throughout the whole + process, from design to production. + + \table + \row + \li \inlineimage studio-gs.png + \li \inlineimage studio-projects.png + \li \inlineimage studio-components.png + \li \inlineimage studio-animation.png + \row + \li \l{Getting Started} + \list + \li \l{Exporting Artwork from Design Tools} + \li \l{User Interface} + \li \l{Editing QML Files in Design Mode} + \li \l{Tutorials} + \endlist + \li \b {\l{Managing Projects}} + \list + \li \l{Creating Projects} + \li \l{Using Git} + \li \l{Importing Designs} + \li \l{Converting UI Projects to Applications} + \endlist + \li \b {\l{Creating UIs}} + \list + \li \l{Creating Components} + \li \l{Managing Item Hierarchy} + \li \l{Specifying Item Properties} + \li \l{Using Custom Fonts} + \endlist + \li \b {\l{Adding Dynamics}} + \list + \li \l{Creating Animations} + \li \l{Adding Connections} + \li \l{Adding States} + \li \l{Editing PathView Properties} + \endlist + \row + \li \inlineimage studio-3d-scenes.png + \li \inlineimage studio-preview.png + \li \inlineimage studio-settings.png + \li \inlineimage studio-help.png + \row + \li \b {\l{Editing 3D Scenes}} + \list + \li \l{Editing 3D Assets in Design Mode} + \li \l{Working in the 3D Editor} + \li \l{Adding 3D Views} + \li \l{Using 3D Components} + \endlist + \li \b {\l{Previewing}} + \list + \li \l{Previewing on Desktop} + \li \l{Previewing on Devices} + \li \l{Previewing in Browsers} + \endlist + \li \b {\l{Advanced Topics}} + \list + \li \l{Supported Platforms} + \li \l{Keyboard Shortcuts} + \li \l{Coding} + \li \l{Simulating Application Logic} + \li \l{Debugging and Profiling} + \endlist + \li \b {\l{Help}} + \list + \li \l{Examples and Tutorials} + \li \l{Using the Help Mode} + \li \l{Frequently Asked Questions} + \li \l{Concepts and Terms} + \endlist + \row + \li {4,1} \l{All Topics} + \row + \li {4,1} \note To report bugs and suggestions to the Qt Bug + Tracker, select \uicontrol {Help > Report Bug}. + To copy and paste detailed information about your system to the + bug report, select \uicontrol Help > + \uicontrol {System Information}. + + For credits and a list of third-party libraries, see + \l {Acknowledgements}. + \endtable +*/ diff --git a/doc/qtdesignstudio/src/qtquick3d-editor/exporting-3d/exporting-from-maya.qdoc b/doc/qtdesignstudio/src/qtquick3d-editor/exporting-3d/exporting-from-maya.qdoc new file mode 100644 index 0000000000..53d3009a78 --- /dev/null +++ b/doc/qtdesignstudio/src/qtquick3d-editor/exporting-3d/exporting-from-maya.qdoc @@ -0,0 +1,57 @@ +/**************************************************************************** +** +** Copyright (C) 2019 The Qt Company Ltd. +** Contact: https://www.qt.io/licensing/ +** +** This file is part of Qt Design Studio. +** +** $QT_BEGIN_LICENSE:FDL$ +** Commercial License Usage +** Licensees holding valid commercial Qt licenses may use this file in +** accordance with the commercial license agreement provided with the +** Software or, alternatively, in accordance with the terms contained in +** a written agreement between you and The Qt Company. For licensing terms +** and conditions see https://www.qt.io/terms-conditions. For further +** information use the contact form at https://www.qt.io/contact-us. +** +** GNU Free Documentation License Usage +** Alternatively, this file may be used under the terms of the GNU Free +** Documentation License version 1.3 as published by the Free Software +** Foundation and appearing in the file included in the packaging of +** this file. Please review the following information to ensure +** the GNU Free Documentation License version 1.3 requirements +** will be met: https://www.gnu.org/licenses/fdl-1.3.html. +** $QT_END_LICENSE$ +** +****************************************************************************/ + +/*! + \contentspage {Qt Design Studio Manual} + \page exporting-from-maya.html + \previouspage qtbridge-sketch-using.html + \nextpage creator-quick-tour.html + + \title Exporting from Maya + + You can export graphics from Maya in the FBX format. The necessary plugin is + usually enabled by default, but you can check that in the plugin manager. + + To export graphics from Maya: + + \list 1 + \li Select \uicontrol Window > \uicontrol Settings/Preferences > + \uicontrol {Plug-in Manager} and check that the fbxmaya.mll + plugin is enabled. + \li Select \uicontrol File > \uicontrol {Export All}. + \image maya-export-options.png "Export options in Maya" + \li In the \uicontrol {File name} field, enter a name for the export + file. + \li In the \uicontrol {Files of type} field, select + \uicontrol {FBX export}. + \li In \uicontrol Presets > \uicontrol {Current Preset}, select + \uicontrol {Autodesk Media & Entertainment}. + \li In \uicontrol Geometry > \uicontrol {Convert NURBS surface to}, + select \uicontrol {Interactive Display Mesh}. + \li To export files, select \uicontrol {Export All}. + \endlist +*/ diff --git a/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-camera.qdoc b/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-camera.qdoc new file mode 100644 index 0000000000..0c33b4bc20 --- /dev/null +++ b/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-camera.qdoc @@ -0,0 +1,113 @@ +/**************************************************************************** +** +** Copyright (C) 2019 The Qt Company Ltd. +** Contact: https://www.qt.io/licensing/ +** +** This file is part of Qt Design Studio. +** +** $QT_BEGIN_LICENSE:FDL$ +** Commercial License Usage +** Licensees holding valid commercial Qt licenses may use this file in +** accordance with the commercial license agreement provided with the +** Software or, alternatively, in accordance with the terms contained in +** a written agreement between you and The Qt Company. For licensing terms +** and conditions see https://www.qt.io/terms-conditions. For further +** information use the contact form at https://www.qt.io/contact-us. +** +** GNU Free Documentation License Usage +** Alternatively, this file may be used under the terms of the GNU Free +** Documentation License version 1.3 as published by the Free Software +** Foundation and appearing in the file included in the packaging of +** this file. Please review the following information to ensure +** the GNU Free Documentation License version 1.3 requirements +** will be met: https://www.gnu.org/licenses/fdl-1.3.html. +** $QT_END_LICENSE$ +** +****************************************************************************/ + +/*! + \contentspage {Qt Design Studio Manual} + \page studio-3d-camera.html + \previouspage studio-3d-lights.html + \nextpage studio-3d-scene-environment.html + + \title Using Scene Camera + + A camera is always necessary to view the content of a 3D scene. A camera + defines how to project the content of a 3D scene into a 2D coordinate space, + which can then be used on a 2D surface. When a camera is present in the + scene, it can be used to direct what is displayed in a 3D view. + + You can use the following 3D QML types to determine camera projection: + + \list + \li \l{PerspectiveCamera}{Camera Perspective} - is the standard camera + type, which uses field of view and near and far clip planes to + specify the projection. + \li \l{OrthographicCamera}{Camera Orthographic} - renders all contents + with no perspective. It is ideal for rendering 2D elements, because + your images are guaranteed to be the right size on the screen, and + you can use the z position of components to bring them closer to or + take them farther from the camera (\e z-sorting) with no + foreshortening artifacts. + \li \l{FrustumCamera}{Camera Frustum} - enables finer grain control of + how the frustum is defined, by setting the number of degrees between + the top and bottom or left and right edges of the camera frustum. + This is useful when creating asymmetrical frustums. + \li \l{CustomCamera}{Camera Custom} - provides full control over how + the projection matrix is created. + \endlist + + You can position the camera in the scene and set the direction it is facing. + The default direction of the camera is such that the forward vector is + looking up the +z axis, and the up direction vector is up the +y axis. You + can apply transforms to the camera and its parent types to define + exactly where your camera is located and in which direction it is facing. + + The second part of determining the projection of the camera is defining the + field of view (\e frustum) of the camera that defines which parts of the + scene are visible, as well as how they are visible. + + You can edit the camera properties in the \uicontrol Properties view. + + \section1 Setting Camera Field of View + + The camera frustum can be obtained by taking a frustum (that is, a + truncation with parallel planes) of the cone of vision that a camera or eye + would have to the rectangular viewports typically used in computer graphics. + The shape of the cone depends on the camera lens that is being simulated. + Typically, it is a rectangular pyramid with the top cut off. + + The planes that cut the frustum perpendicular to the viewing direction are + called the \e {near plane} and the \e {far plane}. Components in front of + the near plane or behind the far plane are not drawn. + + The \uicontrol {Clip near} and \uicontrol {Clip far} properties determine + the position of the near plane and the far plane. We recommend that + you place the near and far planes as close to each other as possible to + optimize depth accuracy. Components are clipped at pixel level instead of + element level. This means that a model crossing a plane may be only + partially rendered. + + The \uicontrol {Field of view} (FOV) property specifies the number of + degrees between the edges of the camera frustum. The larger the value, + the stronger the sense of 3D in your scene. By default, the + \uicontrol {FOV orientation} property is set to use the vertical FOV. + This value is the number of degrees between the top and bottom edges + of the camera frustum. + + The horizontal FOV determines the number of degrees between the left and + right edges of the camera frustum. It is automatically calculated based on + the aspect ratio of the scene when the FOV orientation is set to vertical. + You can set the orientation to horizontal to translate FOV values from + graphics tools such as Maya and Blender, which use horizontal FOV by + default. + + The default values are intended to cause anything within the view + of the camera to be rendered. Aside from special clipping effects, you + may need to adjust these values to more closely contain your content for + better results with ambient occlusion or with effects that use the depth + buffer of the camera, such as the \e {depth of field} effect. + + \note Orthographic cameras don't have the FOV property. +*/ diff --git a/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-components.qdoc b/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-components.qdoc new file mode 100644 index 0000000000..38a71a1b53 --- /dev/null +++ b/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-components.qdoc @@ -0,0 +1,76 @@ +/**************************************************************************** +** +** Copyright (C) 2019 The Qt Company Ltd. +** Contact: https://www.qt.io/licensing/ +** +** This file is part of the Qt Design Studio documentation. +** +** Commercial License Usage +** Licensees holding valid commercial Qt licenses may use this file in +** accordance with the commercial license agreement provided with the +** Software or, alternatively, in accordance with the terms contained in +** a written agreement between you and The Qt Company. For licensing terms +** and conditions see https://www.qt.io/terms-conditions. For further +** information use the contact form at https://www.qt.io/contact-us. +** +** GNU Free Documentation License Usage +** Alternatively, this file may be used under the terms of the GNU Free +** Documentation License version 1.3 as published by the Free Software +** Foundation and appearing in the file included in the packaging of +** this file. Please review the following information to ensure +** the GNU Free Documentation License version 1.3 requirements +** will be met: https://www.gnu.org/licenses/fdl-1.3.html. +** +****************************************************************************/ + +/*! + \contentspage {Qt Design Studio Manual} + \page studio-3d-components.html + \previouspage studio-3d-view.html + \nextpage studio-3d-node.html + + \title Using 3D Components + + To add 3D components to the scene, drag and drop a them from + \uicontrol Library > \uicontrol {QML Types} > \uicontrol {Qt Quick 3D} to + the scene or to a 3D view in the \uicontrol Navigator. + + To edit 3D components, select the component in the 3D editor or in the + \uicontrol Navigator and set its properties in the \uicontrol Properties + view. + + \list + \li \l {Setting Node Properties} + + You can set the opacity, visibility, and transform properties + of all 3D components. + \li \l {Adding Models} + + You can use the model component to load static mesh data from + storage or one of the built-in primitive types: cube, cone, + cylinder, rectangle, or sphere. You can attach materials to + meshes and sub-meshes. + \li \l {Using Materials and Shaders} + + You can use materials and shaders to define how object surfaces + are rendered in a scene and during live preview. + \li \l {Attaching Textures to Materials} + + You can use a Texture component to specify an image and how it is + mapped to meshes in a 3D scene. Texture components can use image + data either from a file or a Qt Quick QML type. + \li \l{Using Lights} + + You can use several light types as the source of lighting in a + scene and set their properties. + \li \l {Using Scene Camera} + + To project a 3D scene to a 2D viewport, it is necessary to view + the scene from a camera. You can select the camera type and set + its properties. + \li \l {Setting Scene Environment} + + You can use the SceneEnvironment type to specify how the scene is + rendered globally. + \endlist +*/ diff --git a/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-design-mode.qdoc b/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-design-mode.qdoc new file mode 100644 index 0000000000..e214c544f2 --- /dev/null +++ b/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-design-mode.qdoc @@ -0,0 +1,88 @@ +/**************************************************************************** +** +** Copyright (C) 2019 The Qt Company Ltd. +** Contact: https://www.qt.io/licensing/ +** +** This file is part of the Qt Design Studio documentation. +** +** Commercial License Usage +** Licensees holding valid commercial Qt licenses may use this file in +** accordance with the commercial license agreement provided with the +** Software or, alternatively, in accordance with the terms contained in +** a written agreement between you and The Qt Company. For licensing terms +** and conditions see https://www.qt.io/terms-conditions. For further +** information use the contact form at https://www.qt.io/contact-us. +** +** GNU Free Documentation License Usage +** Alternatively, this file may be used under the terms of the GNU Free +** Documentation License version 1.3 as published by the Free Software +** Foundation and appearing in the file included in the packaging of +** this file. Please review the following information to ensure +** the GNU Free Documentation License version 1.3 requirements +** will be met: https://www.gnu.org/licenses/fdl-1.3.html. +** +****************************************************************************/ + +/*! + \contentspage {Qt Design Studio} + \previouspage studio-3d.html + \page studio-3d-design-mode.html + \nextpage studio-3d-editor.html + + \title Editing 3D Assets in Design Mode + + \QDS opens QML files that contain 3D scenes in the Design mode and the + scenes in the 3D editor. You can add imported 3D assets as resources + to projects and edit them to create scenes and states, as well as the + transitions between them. + + \image studio-editing-3d-scenes.png "3D assets in Design mode" + + To edit 3D scenes in the Design mode: + + \list + \li \uicontrol {3D Editor} (1) is the working area where you create the + scene, position the model, light and camera, as well as move and + scale items. + \li \uicontrol {3D View} (2) is where you see the scene projected by the + camera. + \li The sidebars contain views where you can select QML types to use in + the scene, specify properties for them, and view them in a tree + structure, as well as to create connections and browse projects and + files. You can select the content of the sidebars in the sidebar + menu: + \list + \li \uicontrol {Library} (3) displays the building blocks that you + can use to create scenes: predefined Qt Quick 3D Components, + Qt Quick Controls, your own 3D assets that you import to the + project, and other resources. For more information, see + \l {Adding 3D Views}. + \li \uicontrol {Navigator} (4) displays the items in the current QML + file as a tree structure. For more information, see + \l {Managing Item Hierarchy}. + \li \uicontrol {Properties} (5) organizes the properties of the + selected item. You can change the properties also in the + \uicontrol {Text Editor}. For more information, see + \l {Specifying Item Properties}. + \li \uicontrol Connections enables you to create connections + between objects, signals, and object properties. For more + information, see \l{Adding Connections}. + \li \uicontrol {File System} shows all files in the currently + selected directory. For more information, see + \l{Viewing the File System}. + \li \uicontrol {Open Documents} shows currently open files. + \li \uicontrol {Projects} shows a list of projects open in the + current session. For more information, see + \l{Viewing Project Files}. + \endlist + \li \uicontrol {States} displays the different states of the + item. QML states typically describe user interface configurations, + such as the UI controls, their properties and behavior and the + available actions. For more information, see \l{Adding States}. + \li \uicontrol Timeline (6) provides a timeline and keyframe based + editor that enables you to animate the properties of components. + \endlist + + To close the 3D editor, select \uicontrol 2D in the list on the toolbar (7). + To reopen it, select \uicontrol {2D/3D}. +*/ diff --git a/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-editor.qdoc b/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-editor.qdoc new file mode 100644 index 0000000000..034a4817ab --- /dev/null +++ b/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-editor.qdoc @@ -0,0 +1,176 @@ +/**************************************************************************** +** +** Copyright (C) 2019 The Qt Company Ltd. +** Contact: https://www.qt.io/licensing/ +** +** This file is part of the Qt Design Studio documentation. +** +** Commercial License Usage +** Licensees holding valid commercial Qt licenses may use this file in +** accordance with the commercial license agreement provided with the +** Software or, alternatively, in accordance with the terms contained in +** a written agreement between you and The Qt Company. For licensing terms +** and conditions see https://www.qt.io/terms-conditions. For further +** information use the contact form at https://www.qt.io/contact-us. +** +** GNU Free Documentation License Usage +** Alternatively, this file may be used under the terms of the GNU Free +** Documentation License version 1.3 as published by the Free Software +** Foundation and appearing in the file included in the packaging of +** this file. Please review the following information to ensure +** the GNU Free Documentation License version 1.3 requirements +** will be met: https://www.gnu.org/licenses/fdl-1.3.html. +** +****************************************************************************/ + +/*! + \contentspage {Qt Design Studio} + \previouspage studio-3d-design-mode.html + \page studio-3d-editor.html + \nextpage studio-3d-view.html + + \title Working in the 3D Editor + + To project a 3D scene to a 2D viewport, it is necessary to view the scene + from a \l{Using Scene Camera}{camera}. Select the \uicontrol {Toggle + Perspective/Orthographic Projection} button (1) on the 3D editor toolbar to + switch between a \e {perspective camera} and an \e {orthographic camera}. + A perspective camera uses field of view and near and far clip planes to + specify the projection, whereas an orthographic camera can be thought of + as a 2D camera. Both of them are free-form cameras that you can use to + orbit around the scene. + + When you import 3D scenes from files that you exported from 3D graphics + tools, you also import the camera, light, model, and materials. If your + scene did not contain them, you can add the corresponding Qt Quick 3D + types from the \uicontrol Library. + + You can use the manipulator mode toolbar buttons (2) to show the move, rotate, + or scale manipulator in the rendered scene when an item is selected and + to determine what happens when you drag the selected item. Select the + \uicontrol {Toggle Local/Global Orientation} button (3) to determine whether + the manipulators affect only the local transforms of the item or whether + they transform with respect to the global space. + + \image studio-3d-editor.png "3D Editor" + + For example, in local orientation mode, selecting an unrotated cube inside + a rotated group in the move mode shows rotated axes. Dragging on the red + arrow of the move manipulator affects only the x position of the item. + + In global mode, the manipulators always transform with respect to the global + space. In the example above, switching to global mode will show the red + arrow for the move manipulator aligned with the screen (assuming an + unrotated camera). Dragging on the red arrow may affect two or three of the + position values for the selected item in order to move it in global space. + + \section1 Controlling the Edit View Camera + + You can add 3D camera types to the scene to project the view you see in + the View3D type in the application. While editing scenes, you can use + a separate \e {edit view camera} (4) to project the scene to the 3D edit + view in the Design mode. + + You can navigate the scene by rotating, panning, and zooming the edit view + camera. + + To zoom, use the mouse wheel or press \key Alt and right-click anywhere in + the rendered view to zoom the view in or out as you drag up or down. + + To pan, press \key Alt and use the middle mouse button to click anywhere in + the rendered view to slide the view around. + + To orbit, press \key Alt and click anywhere in the rendered view to rotate + the view. + + To scale the edit view camera and to focus it on the selected items, select + \uicontrol {Fit Selected} button or press \key F. + + The world axis helper (5) shows the direction of the world axes in respect + to the edit view camera. To point the camera at the currently selected + component in the direction of an axis, click the axis. If no component + is selected, the camera is pointed at the world origin. This does not + affect the camera zoom level. + + For more information about using the cameras in the scene, the available + 3D camera types, and their properties, see \l{Using Scene Camera}. + + \section1 Selecting Items + + To move, rotate, or scale items in the scene, you need to select them first. + The selection mode buttons determine how items are selected when you click + them in the 3D editor. + + \list + \li In the \inlineimage item_selection_selected.png + (\uicontrol {Select Item}) mode, a single item is selected. + \li In the \inlineimage group_selection_selected.png + (\uicontrol {Select Group}) mode, the top level parent of the item + is selected. This enables you to move, rotate, or scale a group of + items. + \endlist + + To toggle the selection mode, press \key Q. + + \section1 Moving Items + + \image studio-3d-editor-move.png "3D editor in move mode" + + You can move items in relation to their coordinate system, along the x, y, + or z view axis or on the top, bottom, left, and right clip planes of the + render camera. + + To move items, select \inlineimage move_selected.png + or press \key W. + + To move items along an axis, click the axis and drag the item along the + axis. + + To move items on a plane, select the plane handle and drag the item on + the plane. + + To move an item freely in the editor, select the handle at the center of + the item. + + \section1 Rotating Items + + You can rotate items around the view axes of the camera. + + \image studio-3d-editor-rotate.png "3D editor in rotate mode" + + To rotate items, select \inlineimage rotate_selected.png + or press \key E. + + To rotate an item around an axis, select the axis and drag in the direction + you want to rotate the item in. + + To freely rotate the item, select the gray circle. + + \section1 Scaling Items + + \image studio-3d-editor-scale.png "3D editor in scale mode" + + To scale items, select \inlineimage scale_selected.png + or press \key R. + + You can use the scale handles to adjust the local x, y, or z scale of an + item. You can ajust the scale across one, two, or three axes, depending + on the handle. + + To adjust the scale across one axis, select the scale handle attached to + the axis. To uniformly scale an item across all axes, select the handle + at the center of the item. + + To adjust the scale across a plane, select the plane handle and drag the + item on the plane. + + \section1 Using Edit View Light + + You use 3D light types to light the models in the scene. While editing + scenes, you can use a separate \e {edit view light} to illuminate the + portions of the scene that the scene lights do not hit. To switch the edit + view light on and off, select the \uicontrol {Toggle Edit Light} button (6). + + For more information about the available scene light types and their + properties, see \l{Using Lights}. +*/ diff --git a/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-lights.qdoc b/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-lights.qdoc new file mode 100644 index 0000000000..a247785f03 --- /dev/null +++ b/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-lights.qdoc @@ -0,0 +1,165 @@ +/**************************************************************************** +** +** Copyright (C) 2019 The Qt Company Ltd. +** Contact: https://www.qt.io/licensing/ +** +** This file is part of Qt Design Studio. +** +** $QT_BEGIN_LICENSE:FDL$ +** Commercial License Usage +** Licensees holding valid commercial Qt licenses may use this file in +** accordance with the commercial license agreement provided with the +** Software or, alternatively, in accordance with the terms contained in +** a written agreement between you and The Qt Company. For licensing terms +** and conditions see https://www.qt.io/terms-conditions. For further +** information use the contact form at https://www.qt.io/contact-us. +** +** GNU Free Documentation License Usage +** Alternatively, this file may be used under the terms of the GNU Free +** Documentation License version 1.3 as published by the Free Software +** Foundation and appearing in the file included in the packaging of +** this file. Please review the following information to ensure +** the GNU Free Documentation License version 1.3 requirements +** will be met: https://www.gnu.org/licenses/fdl-1.3.html. +** $QT_END_LICENSE$ +** +****************************************************************************/ + +/*! + \contentspage {Qt Design Studio Manual} + \page studio-3d-lights.html + \previouspage studio-3d-texture.html + \nextpage studio-3d-camera.html + + \title Using Lights + + Light components are the primary source of lighting in a \QDS scene. + As a secondary light source, you can use \l{Using Image-based Lighting} + {image-based lighting}. + + By default, all imported scenes are created with one directional light. + You can use the following \l{Qt Quick 3D} components to add lights: + + \list + \li \l{DirectionalLight}{Light Directional} + \li \l{PointLight}{Light Point} + \li \l{AreaLight}{Light Area} + \endlist + + \note Each additional light negatively effects the rendering performance + of your scene. Keep scenes as simple as possible and use lights sparingly. + Use a \l{SceneEnvironment}{Scene Environment} component to apply image-based + lighting that can produce soft and subtle lighting. + + You can edit light properties in the \uicontrol Properties view. The + \uicontrol Scope property specifies which node, with it's children, + is illuminated by a light. + + Set the \uicontrol {Color} property to specify the color applied to models + illuminated by a light. Set the \uicontrol {Ambient color} property to + specify the ambient color applied to materials before being illuminated by + the light. + + You can animate light properties in the \uicontrol Timeline view. + + \section1 Directional Light + + A directional light emits light in one direction from a unidentifiable + source located infinitely far away. This is similar to sunlight. + + \image studio-3d-directional-light.png "Models lit by a dirctional light" + + If the \uicontrol {Casts shadow} property is enabled, shadows are positioned + parallel to the light direction. A directional light has infinite range and + does not diminish. + + Moving a directional light does not have any effect. The light will always + be emitted in the direction of the light's z axis. Rotating the light along + its x or y axis will change the direction in which the light is emitted. + + Scaling a directional light will only have an effect in the following cases: + + \list + \li If the z scale is set to a negative number, the light will be + emitted in the opposite direction. + \li If the scale of any axis is set to 0, the light will be emitted + along the world's z axis. Rotating the light has no effect. + \endlist + + \section1 Point Light + + A point light can be described as a sphere, emitting light with equal + strength in all directions from the center of the light. This is similar + to the way a light bulb emits light. + + \image studio-3d-point-light.png "Models lit by a point light" + + Lighting is applied outwards from the center of a point light, becoming + increasingly dim away from the center. Moving a point light changes the + position from where the light is emitted. Rotating or scaling a point + light does not have any effect. + + To specify an overall multiplier for a point light's effects, set the + \uicontrol Brightness property. + + To control the fade-off and range of a point light, set the + \uicontrol {Constant fade}, \uicontrol {Linear fade}, and + \uicontrol {Quadratic fade} properties. Constant fade is the constant + factor of the \e attenuation term of the light. Attenuation refers to + the reduction in the intensity of light as it travels through a medium + due to absorption or scattering of photons. + + Turn up the linear fade value to increase the rate at which the lighting + effect dims the light in proportion to the distance to the light. The value + 0.0 means that the light doesn't have linear fade. + + Turn up the quadratic fade to increase the rate at which the lighting effect + dims on surfaces that are far away from the light. The value 1.0 means that + the point light fade exactly follows the inverse square law. For example, + when the distance to an object doubles, the light intensity decreases to one + fourth. + + Aside from fade, a point light has the same properties as a directional + light. + + \section1 Area Light + + An area light is similar to the directional light. However, instead of + emitting an equally bright light across the whole scene, the area light + emits directional light from a rectangle shaped object. You can set the + \uicontrol Width and \uicontrol Height properties to determine the size + of the area light. + + Aside from the size, an area light has the same properties as a directional + light. + + The image below shows an example on how to light an object with different + colors using two different area lights. + + \image area-light.png + + You can rotate, scale, and move area lights. + + \section1 Shadows + + To simulate shadows using this light, enable the \uicontrol {Cast shadows} + check box. Cast shadows work best with area or point lights. + + To specify the darkness of the shadows, set the \uicontrol {Shadow factor} + property. The value 0 means no shadows are cast. + + To specify the amount of blur applied to the shadows, set the + \uicontrol {Shadow filter} property. + + Tweak the \uicontrol {Shadow bias} property value by small amounts + if you see objects casting shadows on themselves. + + To specify the quality of the shadow map created for shadow rendering, set + the \uicontrol {Shadow map quality} property. Lower quality uses less + resources, but produces lower quality shadows, while higher quality uses + more resources to produce better quality shadows. + + To specify the maximum distance for the shadow map, set the + \uicontrol {Shadow map far} property value. Using smaller values + may improve the precision and effects of the map. +*/ diff --git a/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-materials-shaders.qdoc b/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-materials-shaders.qdoc new file mode 100644 index 0000000000..ecbef398dc --- /dev/null +++ b/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-materials-shaders.qdoc @@ -0,0 +1,229 @@ +/**************************************************************************** +** +** Copyright (C) 2019 The Qt Company Ltd. +** Contact: https://www.qt.io/licensing/ +** +** This file is part of Qt Desing Studio. +** +** $QT_BEGIN_LICENSE:FDL$ +** Commercial License Usage +** Licensees holding valid commercial Qt licenses may use this file in +** accordance with the commercial license agreement provided with the +** Software or, alternatively, in accordance with the terms contained in +** a written agreement between you and The Qt Company. For licensing terms +** and conditions see https://www.qt.io/terms-conditions. For further +** information use the contact form at https://www.qt.io/contact-us. +** +** GNU Free Documentation License Usage +** Alternatively, this file may be used under the terms of the GNU Free +** Documentation License version 1.3 as published by the Free Software +** Foundation and appearing in the file included in the packaging of +** this file. Please review the following information to ensure +** the GNU Free Documentation License version 1.3 requirements +** will be met: https://www.gnu.org/licenses/fdl-1.3.html. +** $QT_END_LICENSE$ +** +****************************************************************************/ + +/*! + \contentspage {Qt Design Studio Manual} + \page studio-3d-materials.html + \previouspage studio-3d-model.html + \nextpage studio-3d-texture.html + + \title Using Materials and Shaders + + \image materials.png + + Materials and shaders define how object surfaces are rendered in \QDS and + live preview. As you change the properties of materials, new shaders are + generated accordingly, and the property values are bound. The complexity of + a shader depends on a combination of the properties that are set on it, and + the context of the scene itself. + + The materials that you used in your imported scenes are imported to \QDS + as \l{Qt Quick 3D} components. When you add a View3D component, it contains + a DefaultMaterial component. You can use the following predefined Qt Quick + 3D components to add materials to models: + + \list + \li Default material + \li Principled material + \li Texture + \endlist + + Before a model can be rendered in a scene, it must have at least one + material to define how the mesh is shaded. The DefaultMaterial component + is the easiest way to define such a material. The PrincipledMaterial + component specifies the minimum amount of properties. + + You can use the \l Texture component to apply textures to materials. It + defines an image and how the image is mapped to meshes in a 3D scene. To + use image data from a file, set the \uicontrol Source property of the + Texture component in the \uicontrol Properties view. + + To have the material use vertex colors from the mesh, select the + \uicontrol {Enable vertex colors} check box. These are multiplied + by any other colors specified for the material. + + You can modify material properties in the \uicontrol Properties view, as + instructed in the following sections. The availability of the properties + depends on the material type. + + You can animate material properties in the \uicontrol Timeline view, as + instructed in \l {Creating Animations}. + + \section1 Blending Colors + + To determine how the colors of a model blend with the colors of the models + behind it, set the \uicontrol {Blend mode} property. To make opaque objects + occlude the objects behind them, select \uicontrol {SourceOver}. + + For a lighter result, select \uicontrol Screen to blend colors using an + inverted multiply or \uicontrol ColorDodge to blend them by inverted + division. Color dodge procudes an even lighter result than screen. + + For a darker result, select \uicontrol Multiply to blend colors using a + multiply or \uicontrol ColorBurn to blend them by inverted division, where + the result also is inverted. Color burn produces an even darker result than + multiply. + + The screen and multiply modes are order-independent, so select them to + avoid \e popping, which can happen when using semi-opaque objects and + sorting the back and front faces or models. + + For a result with higher contrast, select \uicontrol Overlay, which is a mix + of the multiply and screen modes. + + \section1 Lighting Materials + + To set the lighting method for generating a material, use the + \uicontrol Lighting property. Select \uicontrol {Fragment lighting} to + calculate diffuse and specular lighting for each rendered pixel. Some + effects, such as Fresnel or a bump map, require fragment lighting. + + To skip lighting calculation, select \uicontrol {No lighting}. This is very + fast and quite effective when using image maps that do not need to be shaded + by lighting. + + To set the base color for the material, use the \uicontrol {Diffuse Color} + property. You can either use the color picker or specify a RBG value. Set + the diffuse color to black to create purely-specular materials, such as + metals or mirrors. To apply a texture to a material, set it as the value of + the \uicontrol {Diffuse map} property. Using a texture with transparency + also applies the alpha channel as an \uicontrol {Opacity map}. You can set + the opacity of the material independently of the model as the value of the + \uicontrol Opacity property. + + \section1 Self-Illuminating Materials + + To set the color and amount of self-illumination for a material, use the + \uicontrol {Emissive color} and \uicontrol {Emissive factor} properties. In + a scene with black ambient lighting, a material with an emissive factor of 0 + is black where the light does not shine on it. Setting the emissive factor + to 1 shows the material in its diffuse color instead. + + To use a Texture for specifying the emissive factor for different parts of + the material, set the \uicontrol {Emissive map} property. Using a grayscale + image does not affect the color of the result, while using a color image + produces glowing regions with the color affected by the emissive map. + + \section1 Using Highlights and Reflections + + You can control the highlights and reflections on a material by setting the + properties in the \uicontrol Specular group. You can use the color picker + or set a RGB value to specify the color used to adjust specular reflections. + Use white for no effect + + To use a color texture to modulate the amount and the color of specularity + across the surface of a material, set the \uicontrol {Specular map} + property. Set the \uicontrol {Specular amount} property to specify the + strength of specularity. This property does not affect the specular + reflection map, but it does affect the amount of reflections from a scene's + light probe. + + \note Unless your mesh is high-resolution, you may need to use fragment + lighting to get good specular highlights from scene lights. + + To determine how to calculate specular highlights for lights in the scene, + set the \uicontrol {Specular model}. In addition to the default mode, you + can use the GGX or Ward lighting model. + + To use a Texture for specular highlighting on a material, set the + \uicontrol {Reflection map} property. When the texture is applied using + environmental mapping (not UV mapping), the map appears to be reflecting + from the environment as you rotate the model. Specular reflection maps are + an easy way to add a high-quality look at a relatively low cost. + + To specify an image to use as the specular reflection map, set the + \uicontrol {Light probe} property + + Crisp images cause your material to look very glossy. The more you + blur your image, the softer your material appears. + + To decrease head-on reflections (looking directly at the surface) + while maintaining reflections seen at grazing angles, set the + \uicontrol {Fresnel power} property. To select the angles to control, + set the \uicontrol {Index of refraction} property. + + To control the size of the specular highlights generated from lights and the + clarity of reflections in general, set the \uicontrol {Specular roughness} + property. Larger values increase the roughness, while softening specular + highlights and blurring reflections. To control the specular roughness of + the material using a Texture, set the \uicontrol {Roughness map property}. + + \section1 Simulating Geometry Displacement + + Specify the properties in the \uicontrol {Bump/Normal} group to simulate + fine geometry displacement across the surface of the material. Set the + \uicontrol {Bump map} property to use a grayscale texture for the + simulation. Brighter pixels indicate raised regions. + + To use a RGB image for simulation, set the \uicontrol {Normal map} property. + The RGB channels indicate XYZ normal deviations. + + The amount of displacement is controlled by the \uicontrol {Bump amount} + property. + + Bump and normal maps do not affect the silhouette of a model. To affect the + silhouette, set the \uicontrol {Displacement map} property. It specifies a + grayscale image used to offset the vertices of geometry across the surface + of the material. The \uicontrol {Displacement amount} property specifies the + offset amount. + + \section1 Specifying Material Translucency + + Set the properties in the \uicontrol Translucency group to control how much + light can pass through the material from behind. To use a grayscale texture, + specify it as the value of the \uicontrol {Translucency map} property. + + To specify the amount of light wrap for the translucency map, set the + \uicontrol {Diffuse light wrap} property. A value of 0 does not wrap the + light at all, while a value of 1 wraps the light all around the object. + + To specify the amount of falloff for the translucency based on + the angle of the normals of the object to the light source, set + the \uicontrol {Translucency falloff} property. + + \section1 Culling Faces + + Set the \uicontrol {Culling mode} property to determine whether the front + and back faces of a model are rendered. Culling modes check whether the + points in the polygon appear in clockwise or counter-clockwise order when + projected onto the screen. If front-facing polygons have a clockwise + winding, but the polygon projected on the screen has a counter-clockwise + winding, the projected polygon is rotated to face away from the camera and + is not rendered. Culling makes rendering objects quicker and more efficient + by reducing the number of polygons to draw. + + \section1 Applying Materials to Models + + To apply materials to models: + + \list 1 + \li Drag and drop a material component from the \uicontrol Library to a + Model component in the \uicontrol Navigator or 3D editor. + \li Edit the properties of the material in the \uicontrol Properties + view. + \endlist +*/ diff --git a/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-model.qdoc b/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-model.qdoc new file mode 100644 index 0000000000..4fa05b6463 --- /dev/null +++ b/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-model.qdoc @@ -0,0 +1,77 @@ +/**************************************************************************** +** +** Copyright (C) 2019 The Qt Company Ltd. +** Contact: https://www.qt.io/licensing/ +** +** This file is part of Qt Design Studio. +** +** $QT_BEGIN_LICENSE:FDL$ +** Commercial License Usage +** Licensees holding valid commercial Qt licenses may use this file in +** accordance with the commercial license agreement provided with the +** Software or, alternatively, in accordance with the terms contained in +** a written agreement between you and The Qt Company. For licensing terms +** and conditions see https://www.qt.io/terms-conditions. For further +** information use the contact form at https://www.qt.io/contact-us. +** +** GNU Free Documentation License Usage +** Alternatively, this file may be used under the terms of the GNU Free +** Documentation License version 1.3 as published by the Free Software +** Foundation and appearing in the file included in the packaging of +** this file. Please review the following information to ensure +** the GNU Free Documentation License version 1.3 requirements +** will be met: https://www.gnu.org/licenses/fdl-1.3.html. +** $QT_END_LICENSE$ +** +****************************************************************************/ + +/*! + \contentspage {Qt Design Studio Manual} + \page studio-3d-model.html + \previouspage studio-3d-node.html + \nextpage studio-3d-materials.html + + \title Adding Models + + A Model component loads mesh data from a file. You can modify how the + component is shaded by adding materials to the model. + + A model can load static meshes from storage or one of the built-in primitive + types: cube, cone, cylinder, rectangle, or sphere. You can select the model + type in the \uicontrol Source field in the \uicontrol Properties field. + Select the \inlineimage plus.png + button to add custom model types to the list. + + To enable picking the model against the scene, select the + \uicontrol Pickable check box. Picking transforms the screen + space x and y coordinates to a ray cast towards the specified + position in scene space. + + To use the geometry of this model when rendering to shadow maps, select the + \uicontrol {Casts shadows} check box. To allow casting shadows on the model, + select the \uicontrol {Receives shadows} check box. + + \section1 Tessellation + + To dynamically generate additional geometry for the model, select the + tiling mode in the \uicontrol {Tessellation mode} filed. Tessellation + is useful when using a displacement map with geometry, or to generate a + smoother silhouette when zooming in. You can select either a Phong or + an NPatch tessellation generator. + + Specify an edge multiplier to the tessellation generator in the + \uicontrol {Edge tessellation} field and an inner multiplier in + the \uicontrol {Inner tessellation} field. + + To display a wireframe that highlights the additional geometry created by + the tessellation generator, select the \uicontrol {Enable wireframe mode} + check box. + + \section1 Adding Materials to Sub-Meshes + + A model can consist of several sub-meshes, each of which can have its own + material. Select the material from the list in the \uicontrol {Materials} + field. Select the \inlineimage plus.png + button to add materials to the list. For more information about materials, + see \l {Using Materials and Shaders}. +*/ diff --git a/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-node.qdoc b/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-node.qdoc new file mode 100644 index 0000000000..a13bb46725 --- /dev/null +++ b/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-node.qdoc @@ -0,0 +1,82 @@ +/**************************************************************************** +** +** Copyright (C) 2019 The Qt Company Ltd. +** Contact: https://www.qt.io/licensing/ +** +** This file is part of the Qt Design Studio documentation. +** +** Commercial License Usage +** Licensees holding valid commercial Qt licenses may use this file in +** accordance with the commercial license agreement provided with the +** Software or, alternatively, in accordance with the terms contained in +** a written agreement between you and The Qt Company. For licensing terms +** and conditions see https://www.qt.io/terms-conditions. For further +** information use the contact form at https://www.qt.io/contact-us. +** +** GNU Free Documentation License Usage +** Alternatively, this file may be used under the terms of the GNU Free +** Documentation License version 1.3 as published by the Free Software +** Foundation and appearing in the file included in the packaging of +** this file. Please review the following information to ensure +** the GNU Free Documentation License version 1.3 requirements +** will be met: https://www.gnu.org/licenses/fdl-1.3.html. +** +****************************************************************************/ + +/*! + \contentspage {Qt Design Studio} + \previouspage studio-3d-components.html + \page studio-3d-node.html + \nextpage studio-3d-model.html + + \title Setting Node Properties + + You can set the opacity, visibility, and transform properties of a 3D + component in the \uicontrol Properties view. + + \section1 Setting Component Opacity and Visibility + + All components have an \uicontrol Opacity value applied to them. The opacity + of 100 makes a component fully opaque, while the opacity of 0 prevents a + component from rendering at all. + + Just as modifying the position or rotation of a parent component affects + all child components, opacity is multiplicatively cumulative through + the transform hierarchy. A cube that is 50\% opaque inside a group that + is 80\% opaque renders with an equivalent apperance of 40\% opacity + (\c{0.8 * 0.5 = 0.4}). Setting the opacity of a group to 0 prevents + any descendants within the group from rendering. + + The \uicontrol Visibility property provides an alternative way to hide and + show components. It is useful when you want to show a component in a + particular state, but hide it in another state, for example. + + \section1 Setting Transform Properties + + The value of the \uicontrol Translation property contains the position + translation of the component in the local coordinate space established by + the parent component. The \uicontrol Orientation property specifies whether + the left-handed or right-handed coordinate system is used. + + In the y-up left-handed coordinate system, increasing the value of x + moves the component to the right, as seen from the default camera location, + whereas increasing the value of y moves the component up. Increasing the + value of z moves the component away from the camera. + + The value of the \uicontrol Rotation parameter sets the local rotation of + the component in the space established by the parent component. The + \uicontrol {Rotation order} property specifies whether the left-handed or + right-handed (the values with \e r) rotation about the x, y, and z axes + is applied, and the order in which the rotation is applied on each axis. + + The value of the \uicontrol Scale property sets the local scale of the + component in the space established by the parent component. An odd number + of negative scale values causes the component to render \e {inside-out}, + which cannot be seen due to backface-culling. + + The value of the \uicontrol Pivot property sets the local pivot offset for + the component. You can think of the pivot as offsetting the geometry for the + component away from the origin, allowing a component to rotate and scale + around a point other than its local origin. Pivot values are applied before + scaling and rotation values. +*/ diff --git a/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-scene-environment.qdoc b/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-scene-environment.qdoc new file mode 100644 index 0000000000..0951110886 --- /dev/null +++ b/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-scene-environment.qdoc @@ -0,0 +1,156 @@ +/**************************************************************************** +** +** Copyright (C) 2019 The Qt Company Ltd. +** Contact: https://www.qt.io/licensing/ +** +** This file is part of Qt Design Studio. +** +** $QT_BEGIN_LICENSE:FDL$ +** Commercial License Usage +** Licensees holding valid commercial Qt licenses may use this file in +** accordance with the commercial license agreement provided with the +** Software or, alternatively, in accordance with the terms contained in +** a written agreement between you and The Qt Company. For licensing terms +** and conditions see https://www.qt.io/terms-conditions. For further +** information use the contact form at https://www.qt.io/contact-us. +** +** GNU Free Documentation License Usage +** Alternatively, this file may be used under the terms of the GNU Free +** Documentation License version 1.3 as published by the Free Software +** Foundation and appearing in the file included in the packaging of +** this file. Please review the following information to ensure +** the GNU Free Documentation License version 1.3 requirements +** will be met: https://www.gnu.org/licenses/fdl-1.3.html. +** $QT_END_LICENSE$ +** +****************************************************************************/ + +/*! + \contentspage {Qt Design Studio Manual} + \page studio-3d-scene-environment.html + \previouspage studio-3d-camera.html + \nextpage creator-live-preview.html + + \title Setting Scene Environment + + You can use the SceneEnvironment type to specify how the scene is rendered + globally. You can specify settings for antialiasing, scene background, + ambient occlusion, and image based lighting in the \uicontrol Properties + view. + + \section1 Antialiasing + + You can apply temporal, progressive, or multisample antialiasing to + scenes. Temporal and progressive antialiasing jiggle the camera very + slightly between frames and blend the result of each new frame with + the previous frames, while multisample antialiasing super-samples + the edges of geometry. + + Temporal antialiasing finds real details that would otherwise be lost + and has a low impact on performance, but fast-moving objects cause + one-frame ghosting. To enable temporal antialiasing, select the + \uicontrol {Temporal AA} check box. + + Progressive antialiasing jiggles the camera after all the content of the + scene has stopped moving. The more frames you accumulate, the better the + result looks. This provides detailed static images with no performance cost, + but does not take effect if any visual changes are occurring. + + To apply progressive antialiasing, set the number of frames to use for the + final image in the \uicontrol {Progressive AA} field. Note that at the + value of 8x, progressive antialiasing takes one eighth of a second to finish + rendering at 60 FTPS, which may be noticeable. + + Multisample antialiasing results in smoother silhouettes, but has no effect + on the materials inside geometry. It provides good results on geometry + silhouettes, where aliasing is often most noticeable and works smoothly with + fast animation. However, it can be expensive to use and does not help with + texture or reflection issues. + + To apply multisample antialiasing, set the number of samples to use per + pixel in the \uicontrol {Multisample AA} field. + + \section1 Clearing the Scene Background + + To clear the background of the scene to be transparent, select + \uicontrol Transparent in the \uicontrol {Background mode} field. + To clear the background using a color, select \uicontrol Color, + and select the color in the \uicontrol {Clear Color} field. + + To leave the scene uncleared, select \uicontrol {Unspecified}. + + \section1 Blending Scene Colors + + To determine how colors are blended, select a blend mode in the + \uicontrol {Blend mode} field. For more information on the options, + see \uicontrol {Blending Colors}. + + \section1 Performing Depth Tests + + You can perform depth tests to optimize the scene environment. To skip depth + tests, deselect the \uicontrol {Enable depth test} checkbox. Note that + skipping the tests can cause rendering errors. + + To have the renderer write to the depth buffer as part of the color pass, + deselect the \uicontrol {Enable depth prepass} checkbox. Disable depth + prepass on GPU's that use a tiled rendering architecture. + + \section1 Ambient Occlusion + + Ambient occlusion is a form of approximated global illumination that causes + non-directional self-shadowing where objects are close together. + + You can set the strength of the shadows in the \uicontrol {AO strength} + field. A value of 100 causes full darkness shadows, while lower values + cause the shadowing to appear lighter. A value of 0 disables ambient + occlusion entirely, improving performance at a cost to the visual realism + of 3D objects rendered in the scene. All values other than 0 have the same + impact on performance. + + To specify roughly how far ambient occlusion shadows spread away from + objects, select the distance in \uicontrol {AO distance} field. Greater + distances cause increasing impact to performance. + + To prevent components from exhibiting ambient occlusion at close distances, + set the cutoff distance in the \uicontrol {AO bias} field. The higher the + value, the greater the distance that is required between objects before + ambient occlusion occurs. + + \note If you see ambient occlusion shadowing on objects where there should + be no shadowing, increase the value slightly to clip away close results. + + To specify how smooth the edges of the ambient occlusion shading are, set + the softness in the \uicontrol {AO softness} field. To improve smoothness at + the risk of sometimes producing obvious patterned artifacts, you can scatter + the edges of the ambient occlusion shadow bands by selecting the + \uicontrol {AO dither} check box. + + To specify the ambient occlusion quality, at the expense of performance, + select the number of shades of gray to use in the + \uicontrol {AO sample rate} field. + + \note Large distances between the clipping planes of your camera may cause + problems with ambient occlusion. If you are seeing odd banding in ambient + occlusion, try adjusting the value in the \uicontrol {Clip far} field in + the \l{Using Scene Camera}{scene camera} properties. + + \section1 Using Image-based Lighting + + In the material properties, you can specify an image (preferably + a high-dynamic range image) to use to light the scene, either + instead of or in addition to \l{Using Lights}{scene lights}. In the + \uicontrol {Probe brightness} field, you can modify the amount of + light emitted by the light probe. + + To take shortcuts to approximate the light contributes of the light + probe at the expense of quality, select the \uicontrol {Fast IBL} + check box. + + To add darkness (black) to the bottom half of the environment, force + the lighting to come predominantly from the top of the image, and + remove specific reflections from the lower half, increase the value + of the \uicontrol {Probe horizon} field. + + To specify the image source field of view when using a camera source as + the light probe, set the angle in the \uicontrol {Probe FOV} field. +*/ diff --git a/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-texture.qdoc b/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-texture.qdoc new file mode 100644 index 0000000000..6e3ba22275 --- /dev/null +++ b/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-texture.qdoc @@ -0,0 +1,111 @@ +/**************************************************************************** +** +** Copyright (C) 2019 The Qt Company Ltd. +** Contact: https://www.qt.io/licensing/ +** +** This file is part of Qt Design Studio. +** +** $QT_BEGIN_LICENSE:FDL$ +** Commercial License Usage +** Licensees holding valid commercial Qt licenses may use this file in +** accordance with the commercial license agreement provided with the +** Software or, alternatively, in accordance with the terms contained in +** a written agreement between you and The Qt Company. For licensing terms +** and conditions see https://www.qt.io/terms-conditions. For further +** information use the contact form at https://www.qt.io/contact-us. +** +** GNU Free Documentation License Usage +** Alternatively, this file may be used under the terms of the GNU Free +** Documentation License version 1.3 as published by the Free Software +** Foundation and appearing in the file included in the packaging of +** this file. Please review the following information to ensure +** the GNU Free Documentation License version 1.3 requirements +** will be met: https://www.gnu.org/licenses/fdl-1.3.html. +** $QT_END_LICENSE$ +** +****************************************************************************/ + +/*! + \contentspage {Qt Design Studio Manual} + \page studio-3d-texture.html + \previouspage studio-3d-materials.html + \nextpage studio-3d-lights.html + + \title Attaching Textures to Materials + + You can use the Texture 3D QML type to attach textures to materials. + You specify an image and how it is mapped to meshes in a 3D scene. + + \section1 Selecting the Mapping Method + + To specify the method of mapping to use when sampling a texture, select + \uicontrol UV, \uicontrol Environment, or \uicontrol LightProbe in the + \uicontrol {Texture mapping} field. + + UV mapping is the process of projecting 2D images to the surface of a + 3D model for texture mapping. The letters \e U and \e V denote the axes + of the 2D texture, because x, y, and z are already used to denote the + axes of the 3D object in the model space. You can paint the polygons that + make up a 3D object with color and other surface attributes from a UV + texture map. Pixels in the image are assigned to surface mappings on the + polygon. Usually this is done by programmatically copying a triangular + piece of the image map and pasting it onto a triangle on the object. + + UV mapping is used by default for diffuse and opacity maps. It sticks the + image to the mesh, so that a particular same portion of the image always + appears on a particular vertex, unless you animate the UV properties. + + Environment mapping is used by default for specular reflection. It + \e projects the image onto the material as though it is being reflected + from the material. Using Environmental mapping for diffuse maps provides a + mirror effect. + + Light probe mapping is used by default for HDRI sphere maps of + light probes. For more information about light probes, see + \l {Using Highlights and Reflections}. + + To use image data from a file, specify the path to the file in the + \uicontrol Source field. To use a 2D Qt Quick QML type as the source, + specify the type in the \uicontrol {Source item} field. The type is + rendered as an offscreen layer. If you specify the source item, any + image you might specify as a source is ignored. + + \note Currently, there is no way to forward input events to the Item + used as a texture source. + + \section1 UV Scaling + + The \uicontrol {U scale} and \uicontrol {V scale} properties define how + to scale the U and V texture coordinates when mapping to a mesh's UV + coordinates. + + Scaling the U value when using horizontal tiling specifies how many times + the texture is repeated from left to right, while scaling the V value when + using vertical tiling specifies the repetition from bottom to top. + + To control how the texture is mapped when the U scaling value is greater + than 1, set the horizontal tiling mode in the \uicontrol {U tiling} field. + To control how the texture is mapped when the V scaling value is greater + than 1, set the vertical tiling mode in the \uicontrol {V tiling} field. + + To specify that the texture is not tiled, but the value on the edge is used + instead, select \uicontrol ClampToEdge. To repeat the texture and mirrored + it over the x or y axis, select \uicontrol MirroredRepeat. To repeat the + texture over the x or y axis, select \uicontrol Repeat. + + \section1 Setting UV Transform Properties + + To offset the U coordinate mapping from left to right, set the position of + the component in the \uicontrol {U position} field. To offset the mapping + from bottom to top, set it in the \uicontrol {V position} field. + + Specify the U and V pivot point in the \uicontrol {U pivot} and + \uicontrol {V pivot} fields. + + To rotate the texture around the pivot point, specify rotation as degrees + in the \uicontrol {UV rotation} field. A positive value indicates clockwise + rotation. + + For more information about rotating and pivoting components in the local + coordinate space, see \l {Setting Transform Properties}. +*/ diff --git a/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-view.qdoc b/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-view.qdoc new file mode 100644 index 0000000000..4c61d12a12 --- /dev/null +++ b/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-view.qdoc @@ -0,0 +1,54 @@ +/**************************************************************************** +** +** Copyright (C) 2019 The Qt Company Ltd. +** Contact: https://www.qt.io/licensing/ +** +** This file is part of the Qt Design Studio documentation. +** +** Commercial License Usage +** Licensees holding valid commercial Qt licenses may use this file in +** accordance with the commercial license agreement provided with the +** Software or, alternatively, in accordance with the terms contained in +** a written agreement between you and The Qt Company. For licensing terms +** and conditions see https://www.qt.io/terms-conditions. For further +** information use the contact form at https://www.qt.io/contact-us. +** +** GNU Free Documentation License Usage +** Alternatively, this file may be used under the terms of the GNU Free +** Documentation License version 1.3 as published by the Free Software +** Foundation and appearing in the file included in the packaging of +** this file. Please review the following information to ensure +** the GNU Free Documentation License version 1.3 requirements +** will be met: https://www.gnu.org/licenses/fdl-1.3.html. +** +****************************************************************************/ + +/*! + \contentspage {Qt Design Studio} + \previouspage studio-3d-editor.html + \page studio-3d-view.html + \nextpage studio-3d-components.html + + \title Adding 3D Views + + To add a 3D view to the scene, drag and drop a \uicontrol {View 3D} + component from \uicontrol Library > \uicontrol {QML Types} > + \uicontrol {Qt Quick 3D} to the 3D editor or to the \uicontrol Navigator. + A 3D view contains a reference node that specifies a scene light, camera, + and model. A default material is attached to the model. You can attach + textures to materials. + + By default, a directional light and a perspective camera are used. + To use other light and camera types, change the type of the component in + the \uicontrol Type field in the \uicontrol Properties view. For example, + to use a point light, enter \e {PointLight}. + + \image studio-3d-properties-type.png "Type field in Properties view" + + To edit component properties, select the component in the 3D editor + or in the \uicontrol Navigator and modify the property values in the + \uicontrol Properties view. + + For more information about the available components and their properties, + see \l{Using 3D Components}. +*/ diff --git a/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d.qdoc b/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d.qdoc new file mode 100644 index 0000000000..0256759f85 --- /dev/null +++ b/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d.qdoc @@ -0,0 +1,67 @@ +/**************************************************************************** +** +** Copyright (C) 2019 The Qt Company Ltd. +** Contact: https://www.qt.io/licensing/ +** +** This file is part of the Qt Design Studio documentation. +** +** Commercial License Usage +** Licensees holding valid commercial Qt licenses may use this file in +** accordance with the commercial license agreement provided with the +** Software or, alternatively, in accordance with the terms contained in +** a written agreement between you and The Qt Company. For licensing terms +** and conditions see https://www.qt.io/terms-conditions. For further +** information use the contact form at https://www.qt.io/contact-us. +** +** GNU Free Documentation License Usage +** Alternatively, this file may be used under the terms of the GNU Free +** Documentation License version 1.3 as published by the Free Software +** Foundation and appearing in the file included in the packaging of +** this file. Please review the following information to ensure +** the GNU Free Documentation License version 1.3 requirements +** will be met: https://www.gnu.org/licenses/fdl-1.3.html. +** +****************************************************************************/ + +/*! + \contentspage {Qt Design Studio Manual} + \page studio-3d.html + \previouspage qmldesigner-pathview-editor.html + \nextpage studio-3d-design-mode.html + + \title Editing 3D Scenes + + You can use the 3D editor in the Design mode to edit files you created + using 3D graphics applications and stored in one of the supported formats. + You cannot create 3D models or other assets in the editor, but you can + \l{Importing 3D Assets}{import} the assets you need and work with them to + create scenes and states, as well as the transitions between them. + + When you import 3D scenes from files that you exported from 3D graphics + tools, you also import the camera, light, model, and materials as 3D + components. If your scene did not contain them, you can add predefined + Qt Quick 3D components to it and edit their properties to fit your needs. + + The following topics contain information about working with Qt Quick 3D: + + \list + \li \l {Editing 3D Assets in Design Mode} + + \QDS opens QML files that contain 3D scenes in the Design mode and + the scenes in the 3D editor. You can add imported 3D assets as + resources to projects as 3D components. + \li \l {Working in the 3D Editor} + + You can select 3D components in the 3D editor to move, rotate, and + scale them in the scene projected by the camera. + \li \l{Adding 3D Views} + + You can drag and drop 3D components from the \uicontrol Library + to the scene or to the \uicontrol Navigator. You must add all + 3D components into a 3D view. + \li \l {Using 3D Components} + + You can speficy properties for 3D components, such as cameras, + lights, materials, and shaders, in the \uicontrol Properties view. + \endlist +*/ diff --git a/doc/qtdesignstudio/src/qtquickdesigner-components/components/qqs-components-arc.qdoc b/doc/qtdesignstudio/src/qtquickdesigner-components/components/qqs-components-arc.qdoc new file mode 100644 index 0000000000..37af1be548 --- /dev/null +++ b/doc/qtdesignstudio/src/qtquickdesigner-components/components/qqs-components-arc.qdoc @@ -0,0 +1,350 @@ +/**************************************************************************** +** +** Copyright (C) 2019 The Qt Company Ltd. +** Contact: https://www.qt.io/licensing/ +** +** This file is part of the Qt Design Studio documentation. +** +** Commercial License Usage +** Licensees holding valid commercial Qt licenses may use this file in +** accordance with the commercial license agreement provided with the +** Software or, alternatively, in accordance with the terms contained in +** a written agreement between you and The Qt Company. For licensing terms +** and conditions see https://www.qt.io/terms-conditions. For further +** information use the contact form at https://www.qt.io/contact-us. +** +** GNU Free Documentation License Usage +** Alternatively, this file may be used under the terms of the GNU Free +** Documentation License version 1.3 as published by the Free Software +** Foundation and appearing in the file included in the packaging of +** this file. Please review the following information to ensure +** the GNU Free Documentation License version 1.3 requirements +** will be met: https://www.gnu.org/licenses/fdl-1.3.html. +** +****************************************************************************/ + +/*! + \qmltype Arc + \inqmlmodule QtQuick.Studio.Components + \since QtQuick.Studio.Components 1.0 + \inherits ShapePath + \ingroup qtquickstudio-components + + \brief An arc that ends at the specified position and uses the specified + radius. + + An arc is specified by setting values in degrees for the \l begin and + \l end properties. The arc can be just a line or a filled outline. + The \l strokeColor, \l strokeWidth, and \l strokeStyle properties specify + the appearance of the line or outline. The \l dashPattern and \l dashOffset + properties specify the appearance of dashed lines. + + The area between the arc's start and end points or the area inside the + outline are painted using either a solid fill color, specified using the + \l fillColor property, or a gradient, defined using one of the + \l ShapeGradient subtypes and set using the \l gradient property. + If both a color and a gradient are specified, the gradient is used. + + To create an arc with an outline, set the \l outlineArc property to \c true. + The \l arcWidth property specifies the width of the arc outline, including + the stroke. The \l arcWidthBegin and \l arcWidthEnd properties can be used + to specify the width of the start and end points of the outline separately. + The width of the outline between the start and end points is calculated + automatically. The inner and outer curves or the outline can be adjusted by + specifying values for the \l radiusInnerAdjust and \l radiusOuterAdjust + properties. + + The \l round, \l roundBegin, and \l roundEnd properties specify whether the + end points of the arc outline have rounded caps. For an arc that does not + have an outline, the \l capStyle property specifies whether the line ends + are square or rounded. + + Because an arc has curves, it may be appropriate to set the \l antialiasing + property to improve its appearance. + + \section2 Example Usage + + You can use the Arc component in \QDS to create different kinds of arcs. + + \image studio-arc.png + + The QML code looks as follows: + + \code + ArcItem { + id: arc + x: 31 + y: 31 + capStyle: 32 + end: 180 + strokeWidth: 6 + strokeColor: "#000000" + } + + ArcItem { + id: arcOutline + strokeColor: "gray" + arcWidth: 13 + end: 180 + fillColor: "light gray" + antialiasing: true + round: true + outlineArc: true + } + + ArcItem { + id: circle + end: 360 + strokeWidth: 5 + strokeColor: "#000000" + } + + ArcItem { + id: circleOutline + outlineArc: true + round: true + strokeColor: "gray" + fillColor: "light gray" + strokeWidth: 1 + end: 360 + } + \endcode +*/ + +/*! + \qmlproperty enumeration Arc::capStyle + + The cap style of the line if the arc does not have an outline. + + \value ShapePath.FlatCap + A square line end that does not cover the end point of the line. + \value ShapePath.SquareCap + A square line end that covers the end point and extends beyond it + by half the line width. This is the default value. + \value ShapePath.RoundCap + A rounded line end. + + \sa round, roundBegin, roundEnd, Qt::PenCapStyle +*/ + +/*! + \qmlproperty ShapePath Arc::dashOffset + + The starting point of the dash pattern for the arc or arc outline. + + The offset is measured in terms of the units used to specify the dash + pattern. For example, a pattern where each stroke is four units long, + followed by a gap of two units, will begin with the stroke when drawn + as a line. However, if the dash offset is set to 4.0, any line drawn + will begin with the gap. Values of the offset up to 4.0 will cause part + of the stroke to be drawn first, and values of the offset between 4.0 and + 6.0 will cause the line to begin with part of the gap. + + The default value is 0. + + \sa QPen::setDashOffset() +*/ + +/*! + \qmlproperty ShapePath Arc::dashPattern + + The dash pattern of the arc or arc outline specified as the dashes and the + gaps between them. + + The dash pattern is specified in units of the pen's width. That is, a dash + with the length 5 and width 10 is 50 pixels long. + + Each dash is also subject to cap styles, and therefore a dash of 1 with + square cap set will extend 0.5 pixels out in each direction resulting in + a total width of 2. + + The default \l capStyle is \c {ShapePath.SquareCap}, meaning that a square + line end covers the end point and extends beyond it by half the line width. + + The default value is (4, 2), meaning a dash of 4 * \l strokeWidth pixels + followed by a space of 2 * \l strokeWidth pixels. + + \sa QPen::setDashPattern() +*/ + +/*! + \qmlproperty ShapePath Arc::fillColor + + The arc fill color. + + If the arc is just a line, the area between its \l begin and \l end + points is filled. + + If the arc has an outline, the area within the outline is filled. + + A gradient for the fill can be specified by using \l gradient. If both a + color and a gradient are specified, the gradient is used. + + When set to \c transparent, no filling occurs. + + The default value is \c white. +*/ + +/*! + \qmlproperty ShapePath Arc::gradient + + The gradient of the arc fill color. + + By default, no gradient is enabled and the value is null. In this case, the + fill uses a solid color based on the value of \l fillColor. + + When set, \l fillColor is ignored and filling is done using one of the + \l ShapeGradient subtypes. + + \note The \l Gradient type cannot be used here. Rather, prefer using one of + the advanced subtypes, like \l LinearGradient. +*/ + +/*! + \qmlproperty ShapePath Arc::strokeColor + + The color of the arc line or outline. + + When set to \c transparent, no line is drawn. + + The default value is \c white. + + \sa QColor +*/ + +/*! + \qmlproperty enumeration Arc::strokeStyle + + The style of the arc line or outline. + + \value ShapePath.SolidLine + A solid line. This is the default value. + \value ShapePath.DashLine + Dashes separated by a few pixels. + The \l dashPattern property specifies the dash pattern. + + \sa Qt::PenStyle +*/ + +/*! + \qmlproperty ShapePath Arc::strokeWidth + + The width of the arc line or outline. + + When set to a negative value, no line is drawn. + + The default value is 1. + + The total width of an arc that has an outline (that is, the outline and the + fill) is specified by \l arcWidth. +*/ + +/*! + \qmlproperty real Arc::begin + + The position in degrees where the arc begins. + + The default value is 0. + + To create a circle, set the value of this property to 0 and the value of the + \l end property to 360. +*/ + +/*! + \qmlproperty real Arc::end + + The position in degrees where the arc ends. + + To create a circle, set the value of this property to 360 and the value of + the \l begin property to 0. +*/ + +/*! + \qmlproperty real Arc::arcWidth + + The total width of an arc that has an outline, including the outline and + fill. + + \sa arcWidthBegin, arcWidthEnd, strokeWidth +*/ + +/*! + \qmlproperty real Arc::arcWidthBegin + + The width of the beginning of an arc outline. + + \sa arcWidthEnd, arcWidth +*/ + +/*! + \qmlproperty real Arc::arcWidthEnd + + The width of the end of an arc outline. + + \sa arcWidthBegin, arcWidth +*/ + +/*! + \qmlproperty real Arc::radiusInnerAdjust + + The radius of the inside edge of the arc outline. + + This property can be used to adjust the inner curve of the arc outline. +*/ + +/*! + \qmlproperty real Arc::radiusOuterAdjust + + The radius of the outside edge of the arc outline. + + This property can be used to adjust the outer curve of the arc outline. +*/ + +/*! + \qmlproperty real Arc::alpha + + The area between the \l begin and \l end points of the arc. +*/ + +/*! + \qmlproperty bool Arc::antialiasing + + Whether the arc should be antialiased. + + Antialiasing might require more memory and slow down drawing the type. +*/ + +/*! + \qmlproperty bool Arc::outlineArc + + Whether the arc has an outline. + + \sa arcWidth, arcWidthBegin, arcWidthEnd, round, roundBegin, roundEnd, + +*/ + +/*! + \qmlproperty bool Arc::round + + Whether the arc outline end points have round caps. + + The \l roundBegin and \l roundEnd properties can be used to specify the + caps separately for the end points. + +*/ + +/*! + \qmlproperty bool Arc::roundBegin + + Whether the arc outline begins with a round cap. + + \sa Qt::PenCapStyle, round, roundEnd +*/ + +/*! + \qmlproperty bool Arc::roundEnd + + Whether the arc outline ends with a round cap. + + \sa Qt::PenCapStyle, round, roundBegin +*/ diff --git a/doc/qtdesignstudio/src/qtquickdesigner-components/components/qqs-components-border.qdoc b/doc/qtdesignstudio/src/qtquickdesigner-components/components/qqs-components-border.qdoc new file mode 100644 index 0000000000..0f00044dd1 --- /dev/null +++ b/doc/qtdesignstudio/src/qtquickdesigner-components/components/qqs-components-border.qdoc @@ -0,0 +1,315 @@ +/**************************************************************************** +** +** Copyright (C) 2019 The Qt Company Ltd. +** Contact: https://www.qt.io/licensing/ +** +** This file is part of the Qt Design Studio documentation. +** +** Commercial License Usage +** Licensees holding valid commercial Qt licenses may use this file in +** accordance with the commercial license agreement provided with the +** Software or, alternatively, in accordance with the terms contained in +** a written agreement between you and The Qt Company. For licensing terms +** and conditions see https://www.qt.io/terms-conditions. For further +** information use the contact form at https://www.qt.io/contact-us. +** +** GNU Free Documentation License Usage +** Alternatively, this file may be used under the terms of the GNU Free +** Documentation License version 1.3 as published by the Free Software +** Foundation and appearing in the file included in the packaging of +** this file. Please review the following information to ensure +** the GNU Free Documentation License version 1.3 requirements +** will be met: https://www.gnu.org/licenses/fdl-1.3.html. +** +****************************************************************************/ + +/*! + \qmltype Border + \inqmlmodule QtQuick.Studio.Components + \since QtQuick.Studio.Components 1.0 + \inherits ShapePath + \ingroup qtquickstudio-components + + \brief A border drawn in four segments: left, top right, and bottom. + + The Border type is used to create borders out of four segments: left, + top, right, and bottom. The \l drawLeft, \l drawTop, \l drawRight, and + \l drawBottom properties can be used to determine whether each of the + segments is visible. + + The \l borderMode property determines whether the border is drawn along + the inside or outside edge of the item, or on top of the edge. + + The \l radius property specifies whether the border corners are rounded. + The radius can also be specified separately for each corner. Because this + introduces curved edges to the corners, it may be appropriate to set the + \l antialiasing property to improve the appearance of the border. + + The \l joinStyle property specifies how to connect two border line segments. + + The \l strokeColor, \l strokeWidth, and \l strokeStyle, properties specify + the appearance of the border line. The \l dashPattern and \l dashOffset + properties specify the appearance of dashed lines. + + The \l capStyle property specifies whether line ends are square or + rounded. + + \section2 Example Usage + + You can use the Border component in \QDS to create different kinds of + borders. + + \image studio-border.png + + The QML code looks as follows: + + \code + BorderItem { + id: openLeft + width: 99 + height: 99 + antialiasing: true + drawLeft: false + strokeColor: "gray" + } + + BorderItem { + id: openTop + width: 99 + height: 99 + antialiasing: true + strokeColor: "#808080" + drawTop: false + } + + BorderItem { + id: asymmetricalCorners + width: 99 + height: 99 + antialiasing: true + bottomLeftRadius: 0 + topRightRadius: 0 + strokeColor: "#808080" + } + + BorderItem { + id: dashedBorder + width: 99 + height: 99 + antialiasing: true + strokeStyle: 4 + strokeColor: "#808080" + } + \endcode +*/ + +/*! + \qmlproperty int Border::radius + + The radius used to draw rounded corners. + + If radius is non-zero, the corners will be rounded, otherwise they will + be sharp. The radius can also be specified separately for each corner by + using the \l bottomLeftRadius, \l bottomRightRadius, \l topLeftRadius, and + \l topRightRadius properties. +*/ + +/*! + \qmlproperty int Border::bottomLeftRadius + + The radius of the bottom left border corner. + + \sa radius +*/ + +/*! + \qmlproperty int Border::bottomRightRadius + + The radius of the bottom right border corner. + + \sa radius +*/ + +/*! + \qmlproperty int Border::topLeftRadius + + The radius of the top left border corner. + + \sa radius +*/ + +/*! + \qmlproperty int Border::topRightRadius + + The radius of the top right border corner. + + \sa radius +*/ + +/*! + \qmlproperty enumeration Border::capStyle + + The cap style of the line. + + \value ShapePath.FlatCap + A square line end that does not cover the end point of the line. + \value ShapePath.SquareCap + A square line end that covers the end point and extends beyond it + by half the line width. This is the default value. + \value ShapePath.RoundCap + A rounded line end. + + \sa Qt::PenCapStyle +*/ + +/*! + \qmlproperty ShapePath Border::dashOffset + + The starting point of the dash pattern for the border line. + + The offset is measured in terms of the units used to specify the dash + pattern. For example, a pattern where each stroke is four units long, + followed by a gap of two units, will begin with the stroke when drawn + as a line. However, if the dash offset is set to 4.0, any line drawn + will begin with the gap. Values of the offset up to 4.0 will cause part + of the stroke to be drawn first, and values of the offset between 4.0 and + 6.0 will cause the line to begin with part of the gap. + + The default value is 0. + + \sa QPen::setDashOffset() +*/ + +/*! + \qmlproperty ShapePath Border::dashPattern + + The dash pattern of the border line specified as the dashes and the gaps + between them. + + The dash pattern is specified in units of the pen's width. That is, a dash + with the length 5 and width 10 is 50 pixels long. + + Each dash is also subject to cap styles, and therefore a dash of 1 with + square cap set will extend 0.5 pixels out in each direction resulting in + a total width of 2. + + The default \l capStyle is \c {ShapePath.SquareCap}, meaning that a square + line end covers the end point and extends beyond it by half the line width. + + The default value is (4, 2), meaning a dash of 4 * \l strokeWidth pixels + followed by a space of 2 * \l strokeWidth pixels. + + \sa QPen::setDashPattern() +*/ + +/*! + \qmlproperty enumeration Border::joinStyle + + The join style used to connect two border line segments. + + \value ShapePath.MiterJoin + The outer edges of the lines are extended to meet at an angle, and + this area is filled. + \value ShapePath.BevelJoin + The triangular notch between the two lines is filled. + This is the default value. + \value ShapePath.RoundJoin + A circular arc between the two lines is filled. + + \sa Qt::PenJoinStyle +*/ + +/*! + \qmlproperty ShapePath Border::strokeColor + + The color of the border line. + + When set to \c transparent, no line is drawn. + + The default value is \c white. + + \sa QColor +*/ + +/*! + \qmlproperty enumeration Border::strokeStyle + + The style of the border line. + + \value ShapePath.SolidLine + A solid line. This is the default value. + \value ShapePath.DashLine + Dashes separated by a few pixels. + The \l dashPattern property specifies the dash pattern. + + \sa Qt::PenStyle +*/ + +/*! + \qmlproperty ShapePath Border::strokeWidth + + The width of the border line. + + When set to a negative value, no line is drawn. + + The default value is 1. +*/ + +/*! + \qmlproperty bool Border::drawBottom + + Whether the bottom border is visible. + + The border segment is drawn if this property is set to \c true. +*/ + +/*! + \qmlproperty bool Border::drawLeft + + Whether the left border is visible. + + The border segment is drawn if this property is set to \c true. +*/ + +/*! + \qmlproperty bool Border::drawRight + + Whether the right border is visible. + + The border segment is drawn if this property is set to \c true. +*/ + +/*! + \qmlproperty bool Border::drawTop + + Whether the top border is visible. + + The border segment is drawn if this property is set to \c true. +*/ + +/*! + \qmlproperty bool Border::antialiasing + + Whether the border should be antialiased. + + Antialiasing might require more memory and slow down drawing the type. +*/ + +/*! + \qmlproperty enumeration Border::borderMode + + Where the border is drawn. + + \value Border.Inside + The border is drawn along the inside edge of the item and does not + affect the item width. + This is the default value. + \value Border.Middle + The border is drawn over the edge of the item and does not + affect the item width. + \value Border.Outside + The border is drawn along the outside edge of the item and increases + the item width by the value of \l strokeWidth. + + \sa strokeWidth +*/ diff --git a/doc/qtdesignstudio/src/qtquickdesigner-components/components/qqs-components-flipable.qdoc b/doc/qtdesignstudio/src/qtquickdesigner-components/components/qqs-components-flipable.qdoc new file mode 100644 index 0000000000..92fcb6ba14 --- /dev/null +++ b/doc/qtdesignstudio/src/qtquickdesigner-components/components/qqs-components-flipable.qdoc @@ -0,0 +1,125 @@ +/**************************************************************************** +** +** Copyright (C) 2019 The Qt Company Ltd. +** Contact: https://www.qt.io/licensing/ +** +** This file is part of the Qt Design Studio documentation. +** +** Commercial License Usage +** Licensees holding valid commercial Qt licenses may use this file in +** accordance with the commercial license agreement provided with the +** Software or, alternatively, in accordance with the terms contained in +** a written agreement between you and The Qt Company. For licensing terms +** and conditions see https://www.qt.io/terms-conditions. For further +** information use the contact form at https://www.qt.io/contact-us. +** +** GNU Free Documentation License Usage +** Alternatively, this file may be used under the terms of the GNU Free +** Documentation License version 1.3 as published by the Free Software +** Foundation and appearing in the file included in the packaging of +** this file. Please review the following information to ensure +** the GNU Free Documentation License version 1.3 requirements +** will be met: https://www.gnu.org/licenses/fdl-1.3.html. +** +****************************************************************************/ + +/*! + \qmltype Flipable + \inqmlmodule QtQuick.Studio.Components + \since QtQuick.Studio.Components 1.0 + \ingroup qtquickstudio-components + + \brief Provides a surface that can be flipped. + + A Flipable type can be visibly \e flipped between its front and back sides, + like a card. The front and back sides are specified by using any two types + inside the Flipable type. The type with the higher z-order is the front + side. The \l opacityFront and \l opacityBack properties are used to hide + and show either the front or back side of the flipable item at a time. + + The \l flipAngle property is used to animate the angle of the type to + produce the flipping effect. The \l xAxis or \l yAxis property is set + to 1 to determine which axis the type is rotated around. + + \section2 Example Usage + + You can use the Flipable component in \QDS to create a flipable item. In + this example, the two sides of the flipable show ISO 7000 icons. + + \image studio-flipable.png + + The QML code looks as follows: + + \code + FlipableItem { + id: flipable + width: 90 + height: 89 + opacityBack: 0 + + IsoItem { + id: arrowIsoIcon + color: "#808080" + anchors.fill: parent + source: "./iso-icons/iso_grs_7000_4_0251.dat" + } + + IsoItem { + id: questionIsoIcon + color: "#808080" + anchors.fill: parent + source: "./iso-icons/iso_grs_7000_4_0435.dat" + } + } + \endcode +*/ + +/*! + \qmlproperty Rotation Flipable::flipAngle + + The flip angle in degrees. + + The minimum value is -360 and the maximum value is 360 degrees. +*/ + +/*! + \qmlproperty real Flipable::opacityBack + + The opacity of the back side of the flipable type. + + The opacity can be set between 0 and 1 to hide or show the items on the + back side of the flipable type. +*/ + +/*! + \qmlproperty real Flipable::opacityFront + + The opacity of the front side of the flipable type. + + The opacity can be set between 0 and 1 to hide or show the items on the + front side of the flipable type. +*/ + +/*! + \qmlproperty int Flipable::xAxis + + Whether the type is rotated around the x-axis. + + This property is set to 1 to rotate the flipable type around the x-axis. +*/ + +/*! + \qmlproperty int Flipable::yAxis + + Whether the type is rotated around the y-axis. + + This property is set to 1 to rotate the flipable type around the y-axis. +*/ + +/*! + \qmlproperty bool Flipable::flipped + + Whether the flipable type has been flipped. + + This property is set to \c true when the type is flipped. +*/ diff --git a/doc/qtdesignstudio/src/qtquickdesigner-components/components/qqs-components-group.qdoc b/doc/qtdesignstudio/src/qtquickdesigner-components/components/qqs-components-group.qdoc new file mode 100644 index 0000000000..cca7a56eb8 --- /dev/null +++ b/doc/qtdesignstudio/src/qtquickdesigner-components/components/qqs-components-group.qdoc @@ -0,0 +1,67 @@ +/**************************************************************************** +** +** Copyright (C) 2019 The Qt Company Ltd. +** Contact: https://www.qt.io/licensing/ +** +** This file is part of the Qt Design Studio documentation. +** +** Commercial License Usage +** Licensees holding valid commercial Qt licenses may use this file in +** accordance with the commercial license agreement provided with the +** Software or, alternatively, in accordance with the terms contained in +** a written agreement between you and The Qt Company. For licensing terms +** and conditions see https://www.qt.io/terms-conditions. For further +** information use the contact form at https://www.qt.io/contact-us. +** +** GNU Free Documentation License Usage +** Alternatively, this file may be used under the terms of the GNU Free +** Documentation License version 1.3 as published by the Free Software +** Foundation and appearing in the file included in the packaging of +** this file. Please review the following information to ensure +** the GNU Free Documentation License version 1.3 requirements +** will be met: https://www.gnu.org/licenses/fdl-1.3.html. +** +****************************************************************************/ + +/*! + \qmltype Group + \inqmlmodule QtQuick.Studio.Components + \since QtQuick.Studio.Components 1.0 + \inherits Item + \ingroup qtquickstudio-components + + \brief A group item that gets its size from its children. + + The Group type is an \l Item type extended with the size property. The value + of size is automatically calculated to fit the children of the group. + + \section2 Example Usage + + You can use the Group type to specify the size of one or several items. + + \image studio-group.png + + The QML code looks as follows: + + \code + GroupItem { + id: group + + Rectangle { + id: rectangle + width: 200 + height: 200 + color: "#c2c2c2" + } + + Rectangle { + id: rectangle1 + x: 140 + y: 140 + width: 200 + height: 200 + color: "#000000" + } + } + \endcode +*/ diff --git a/doc/qtdesignstudio/src/qtquickdesigner-components/components/qqs-components-iso.qdoc b/doc/qtdesignstudio/src/qtquickdesigner-components/components/qqs-components-iso.qdoc new file mode 100644 index 0000000000..6fb8ed4feb --- /dev/null +++ b/doc/qtdesignstudio/src/qtquickdesigner-components/components/qqs-components-iso.qdoc @@ -0,0 +1,67 @@ +/**************************************************************************** +** +** Copyright (C) 2019 The Qt Company Ltd. +** Contact: https://www.qt.io/licensing/ +** +** This file is part of the Qt Design Studio documentation. +** +** Commercial License Usage +** Licensees holding valid commercial Qt licenses may use this file in +** accordance with the commercial license agreement provided with the +** Software or, alternatively, in accordance with the terms contained in +** a written agreement between you and The Qt Company. For licensing terms +** and conditions see https://www.qt.io/terms-conditions. For further +** information use the contact form at https://www.qt.io/contact-us. +** +** GNU Free Documentation License Usage +** Alternatively, this file may be used under the terms of the GNU Free +** Documentation License version 1.3 as published by the Free Software +** Foundation and appearing in the file included in the packaging of +** this file. Please review the following information to ensure +** the GNU Free Documentation License version 1.3 requirements +** will be met: https://www.gnu.org/licenses/fdl-1.3.html. +** +****************************************************************************/ + +/*! + \qmltype Iso + \inqmlmodule QtQuick.Studio.Components + \since QtQuick.Studio.Components 1.0 + \inherits ShapePath + \ingroup qtquickstudio-components + + \brief An ISO 7000 icon. + + The Iso type specifies an icon from an ISO 7000 icon library as a + \l [QtQuickExtras] {Picture} + type. The icon to use for the type and its color can be specified. + + \section2 Example Usage + + You can use the Iso type in \QDS to add ISO 7000 icons. + + \image studio-flipable.png + + The QML code looks as follows: + + \code + IsoItem { + id: arrowIsoIcon + color: "#808080" + anchors.fill: parent + source: "./iso-icons/iso_grs_7000_4_0251.dat" + } + \endcode + + To select an icon in the \uicontrol {ISO Icon Browser} in \QDS, select + the ISO icon in the \uicontrol Navigator or on the canvas, and then + select \uicontrol {Choose Icon} in the context menu. + + \image iso-icon-browser.png +*/ + +/*! + \qmlproperty color Iso::iconColor + + The color of an ISO 7000 icon. +*/ diff --git a/doc/qtdesignstudio/src/qtquickdesigner-components/components/qqs-components-pie.qdoc b/doc/qtdesignstudio/src/qtquickdesigner-components/components/qqs-components-pie.qdoc new file mode 100644 index 0000000000..e09e6038f2 --- /dev/null +++ b/doc/qtdesignstudio/src/qtquickdesigner-components/components/qqs-components-pie.qdoc @@ -0,0 +1,254 @@ +/**************************************************************************** +** +** Copyright (C) 2019 The Qt Company Ltd. +** Contact: https://www.qt.io/licensing/ +** +** This file is part of the Qt Design Studio documentation. +** +** Commercial License Usage +** Licensees holding valid commercial Qt licenses may use this file in +** accordance with the commercial license agreement provided with the +** Software or, alternatively, in accordance with the terms contained in +** a written agreement between you and The Qt Company. For licensing terms +** and conditions see https://www.qt.io/terms-conditions. For further +** information use the contact form at https://www.qt.io/contact-us. +** +** GNU Free Documentation License Usage +** Alternatively, this file may be used under the terms of the GNU Free +** Documentation License version 1.3 as published by the Free Software +** Foundation and appearing in the file included in the packaging of +** this file. Please review the following information to ensure +** the GNU Free Documentation License version 1.3 requirements +** will be met: https://www.gnu.org/licenses/fdl-1.3.html. +** +****************************************************************************/ + +/*! + \qmltype Pie + \inqmlmodule QtQuick.Studio.Components + \since QtQuick.Studio.Components 1.0 + \inherits ShapePath + \ingroup qtquickstudio-components + + \brief A pie. + + The Pie type is used to create a pie slice, a pie that is missing slices, + or just the pie rind (similar to an \l Arc), depending on the \l begin and + \l end property values and the \l hideLine value. + + The filling of the pie is painted using either a solid fill color, specified + using the \l fillColor property, or a gradient, defined using one of the + \l ShapeGradient subtypes and set using the \l gradient property. + If both a color and a gradient are specified, the gradient is used. + + The \l strokeColor, \l strokeWidth, and \l strokeStyle, properties specify + the appearance of the pie outline. The \l dashPattern and \l dashOffset + properties specify the appearance of dashed lines. + + The \l capStyle property specifies whether line ends are square or + rounded. + + Because a pie has curved edges, it may be appropriate to set the + \l antialiasing property to improve its appearance. + + \section2 Example Usage + + You can use the Pie component in \QDS to create different kinds of pies. + + \image studio-pie.png + + The QML code looks as follows: + + \code + PieItem { + id: pieSlice + antialiasing: true + strokeColor: "gray" + fillColor: "light gray" + } + + PieItem { + id: pie + end: 300 + fillColor: "#d3d3d3" + strokeColor: "#808080" + antialiasing: true + } + + PieItem { + id: pieRind + strokeWidth: 4 + capStyle: 32 + hideLine: true + end: 300 + strokeColor: "#808080" + antialiasing: true + } + \endcode +*/ + +/*! + \qmlproperty ShapePath Pie::capStyle + + The cap style of the line. + + \value ShapePath.FlatCap + A square line end that does not cover the end point of the line. + \value ShapePath.SquareCap + A square line end that covers the end point and extends beyond it + by half the line width. This is the default value. + \value ShapePath.RoundCap + A rounded line end. + + \sa Qt::PenCapStyle +*/ + +/*! + \qmlproperty ShapePath Pie::dashOffset + + The starting point of the dash pattern for the line. + + The offset is measured in terms of the units used to specify the dash + pattern. For example, a pattern where each stroke is four units long, + followed by a gap of two units, will begin with the stroke when drawn + as a line. However, if the dash offset is set to 4.0, any line drawn + will begin with the gap. Values of the offset up to 4.0 will cause part + of the stroke to be drawn first, and values of the offset between 4.0 and + 6.0 will cause the line to begin with part of the gap. + + The default value is 0. + + \sa QPen::setDashOffset() +*/ + +/*! + \qmlproperty ShapePath Pie::dashPattern + + The dash pattern of the line specified as the dashes and the gaps between + them. + + The dash pattern is specified in units of the pen's width. That is, a dash + with the length 5 and width 10 is 50 pixels long. + + Each dash is also subject to cap styles, and therefore a dash of 1 with + square cap set will extend 0.5 pixels out in each direction resulting in + a total width of 2. + + The default \l capStyle is \c {ShapePath.SquareCap}, meaning that a square + line end covers the end point and extends beyond it by half the line width. + + The default value is (4, 2), meaning a dash of 4 * \l strokeWidth pixels + followed by a space of 2 * \l strokeWidth pixels. + + \sa QPen::setDashPattern() +*/ + +/*! + \qmlproperty ShapePath Pie::fillColor + + The pie fill color. + + If \l hideLine is \c false, a pie slice is drawn using the values of the + \l begin and \l end properties and filled with this color. + + If \l hideLine is \c true, just the pie rind is drawn and the area between + the \l begin and \l end points is filled. + + A gradient for the fill can be specified by using \l gradient. If both a + color and a gradient are specified, the gradient is used. + + When set to \c transparent, no filling occurs. + + The default value is \c white. +*/ + +/*! + \qmlproperty ShapePath Pie::gradient + + The gradient of the pie fill color. + + By default, no gradient is enabled and the value is null. In this case, the + fill uses a solid color based on the value of \l fillColor. + + When set, \l fillColor is ignored and filling is done using one of the + \l ShapeGradient subtypes. + + \note The \l Gradient type cannot be used here. Rather, prefer using one of + the advanced subtypes, like \l LinearGradient. +*/ + +/*! + \qmlproperty ShapePath Pie::strokeColor + + The color of the line. + + When set to \c transparent, no line is drawn. + + The default value is \c white. + + \sa QColor +*/ + +/*! + \qmlproperty ShapePath Pie::strokeStyle + + The style of the border line. + + \value ShapePath.SolidLine + A solid line. This is the default value. + \value ShapePath.DashLine + Dashes separated by a few pixels. + The \l dashPattern property specifies the dash pattern. + + \sa Qt::PenStyle +*/ + +/*! + \qmlproperty ShapePath Pie::strokeWidth + + The width of the line. + + When set to a negative value, no line is drawn. + + The default value is 1. +*/ + +/*! + \qmlproperty real Pie::begin + + The position in degrees where the pie begins. + + The default value is 0. + + To create a circle, set the value of this property to 0 and the value of the + \l end property to 360. +*/ + +/*! + \qmlproperty real Pie::end + + The position in degrees where the pie ends. + + To create a circle, set the value of this property to 360 and the value of + the \l begin property to 0. +*/ + +/*! + \qmlproperty real Pie::alpha + + The area between \l begin and \l end. +*/ + +/*! + \qmlproperty bool Pie::antialiasing + + Whether the pie should be antialiased. + + Antialiasing might require more memory and slow down drawing the type. +*/ + +/*! + \qmlproperty bool Pie::hideLine + + Whether to draw a pie slice or just the pie rind (similar to an \l Arc). +*/ diff --git a/doc/qtdesignstudio/src/qtquickdesigner-components/components/qqs-components-rectangle.qdoc b/doc/qtdesignstudio/src/qtquickdesigner-components/components/qqs-components-rectangle.qdoc new file mode 100644 index 0000000000..dc792addb4 --- /dev/null +++ b/doc/qtdesignstudio/src/qtquickdesigner-components/components/qqs-components-rectangle.qdoc @@ -0,0 +1,283 @@ +/**************************************************************************** +** +** Copyright (C) 2019 The Qt Company Ltd. +** Contact: https://www.qt.io/licensing/ +** +** This file is part of the Qt Design Studio documentation. +** +** Commercial License Usage +** Licensees holding valid commercial Qt licenses may use this file in +** accordance with the commercial license agreement provided with the +** Software or, alternatively, in accordance with the terms contained in +** a written agreement between you and The Qt Company. For licensing terms +** and conditions see https://www.qt.io/terms-conditions. For further +** information use the contact form at https://www.qt.io/contact-us. +** +** GNU Free Documentation License Usage +** Alternatively, this file may be used under the terms of the GNU Free +** Documentation License version 1.3 as published by the Free Software +** Foundation and appearing in the file included in the packaging of +** this file. Please review the following information to ensure +** the GNU Free Documentation License version 1.3 requirements +** will be met: https://www.gnu.org/licenses/fdl-1.3.html. +** +****************************************************************************/ + +/*! + \qmltype Rectangle + \inqmlmodule QtQuick.Studio.Components + \since QtQuick.Studio.Components 1.0 + \inherits ShapePath + \ingroup qtquickstudio-components + + \brief A filled rectangle with an optional border. + + Rectangle items are used to fill areas with solid color or gradients and + to provide a rectangular border. + + Each Rectangle item is painted using either a solid fill color, specified + using the \l fillColor property, or a gradient, defined using one of the + \l ShapeGradient subtypes and set using the \l gradient property. + If both a color and a gradient are specified, the gradient is used. + + An optional border can be added to a rectangle with its own color and + thickness by setting the \l strokeColor and \l strokeWidth properties. + Setting the color to \c transparent creates a border without a fill color. + + Rounded rectangles can be drawn using the \l radius property. The radius + can also be specified separately for each corner. Because this introduces + curved edges to the corners of a rectangle, it may be appropriate to set + the \l antialiasing property to improve the appearance of the rectangle. + + \section2 Example Usage + + You can use the Rectangle component in \QDS to create different kinds of + rectangles. + + \image studio-rectangle.png + + The QML code looks as follows: + + \code + RectangleItem { + id: rectangle + gradient: RadialGradient { + focalRadius: 0 + centerY: 38.5 + focalY: 38.5 + centerX: 51.5 + centerRadius: 38.5 + GradientStop { + position: 0 + color: "#ffffff" + } + + GradientStop { + position: 1 + color: "#000000" + } + focalX: 51.5 + } + bottomRightRadius: 0 + topLeftRadius: 0 + strokeColor: "gray" + } + + RectangleItem { + id: rectangle1 + gradient: LinearGradient { + y1: 0 + y2: 77 + x2: 103 + x1: 0 + GradientStop { + position: 0 + color: "#ffffff" + } + + GradientStop { + position: 1 + color: "#000000" + } + } + topRightRadius: 0 + bottomLeftRadius: 0 + strokeColor: "#808080" + } + + RectangleItem { + id: rectangle2 + topLeftRadius: 0 + bottomRightRadius: 0 + fillColor: "#d3d3d3" + strokeColor: "#808080" + } + + RectangleItem { + id: rectangle3 + fillColor: "#000000" + gradient: LinearGradient { + y1: 0 + y2: 77 + x2: 103 + x1: 0 + GradientStop { + position: 0 + color: "#000000" + } + + GradientStop { + position: 1 + color: "#fdf9f9" + } + } + topRightRadius: 0 + bottomLeftRadius: 0 + strokeColor: "#808080" + } + \endcode +*/ + +/*! + \qmlproperty int Rectangle::radius + + The radius used to draw rounded corners. + + If radius is non-zero, the corners will be rounded, otherwise they will + be sharp. The radius can also be specified separately for each corner by + using the \l bottomLeftRadius, \l bottomRightRadius, \l topLeftRadius, and + \l topRightRadius properties. +*/ + +/*! + \qmlproperty int Rectangle::bottomLeftRadius + + The radius of the bottom left rectangle corner. +*/ + +/*! + \qmlproperty int Rectangle::bottomRightRadius + + The radius of the bottom right rectangle corner. +*/ + +/*! + \qmlproperty int Rectangle::topLeftRadius + + The radius of the top left rectangle corner. +*/ + +/*! + \qmlproperty int Rectangle::topRightRadius + + The radius of the top right rectangle corner. +*/ + +/*! + \qmlproperty ShapePath Rectangle::dashOffset + + The starting point of the dash pattern for the rectangle border. + + The offset is measured in terms of the units used to specify the dash + pattern. For example, a pattern where each stroke is four units long, + followed by a gap of two units, will begin with the stroke when drawn + as a line. However, if the dash offset is set to 4.0, any line drawn + will begin with the gap. Values of the offset up to 4.0 will cause part + of the stroke to be drawn first, and values of the offset between 4.0 and + 6.0 will cause the line to begin with part of the gap. + + The default value is 0. + + \sa QPen::setDashOffset() +*/ + +/*! + \qmlproperty ShapePath Rectangle::dashPattern + + The dash pattern of the rectangle border specified as the dashes and the + gaps between them. + + The dash pattern is specified in units of the pen's width. That is, a dash + with the length 5 and width 10 is 50 pixels long. + + The default value is (4, 2), meaning a dash of 4 * \l strokeWidth pixels + followed by a space of 2 * \l strokeWidth pixels. + + \sa QPen::setDashPattern() +*/ + +/*! + \qmlproperty ShapePath Rectangle::fillColor + + The rectangle fill color. + + A gradient for the fill can be specified by using \l gradient. If both a + color and a gradient are specified, the gradient is used. + + When set to \c transparent, no filling occurs. + + The default value is \c white. +*/ + +/*! + \qmlproperty ShapePath Rectangle::gradient + + The gradient of the rectangle fill color. + + By default, no gradient is enabled and the value is null. In this case, the + fill uses a solid color based on the value of \l fillColor. + + When set, \l fillColor is ignored and filling is done using one of the + \l ShapeGradient subtypes. + + \note The \l Gradient type cannot be used here. Rather, prefer using one of + the advanced subtypes, like \l LinearGradient. +*/ + +/*! + \qmlproperty ShapePath Rectangle::strokeColor + + The color used to draw the border of the rectangle. + + When set to \c transparent, no line is drawn. + + The default value is \c white. + + \sa QColor +*/ + +/*! + \qmlproperty ShapePath Rectangle::strokeStyle + + The style of the rectangle border. + + \value ShapePath.SolidLine + A solid line. This is the default value. + \value ShapePath.DashLine + Dashes separated by a few pixels. + The \l dashPattern property specifies the dash pattern. + + \sa Qt::PenStyle +*/ + +/*! + \qmlproperty ShapePath Rectangle::strokeWidth + + The width of the border of the rectangle. + + A width of 1 creates a thin line. For no line, use a negative value or a + transparent color. + + \note The width of the rectangle's border does not affect the geometry of + the rectangle itself or its position relative to other items if anchors are + used. + + The border is rendered within the rectangle's boundaries. +*/ + +/*! + \qmlproperty bool Rectangle::antialiasing + + Whether the Rectangle should be antialiased. Antialiasing might + require more memory and slow down drawing the type. +*/ diff --git a/doc/qtdesignstudio/src/qtquickdesigner-components/components/qqs-components-svgPath.qdoc b/doc/qtdesignstudio/src/qtquickdesigner-components/components/qqs-components-svgPath.qdoc new file mode 100644 index 0000000000..3a460382b2 --- /dev/null +++ b/doc/qtdesignstudio/src/qtquickdesigner-components/components/qqs-components-svgPath.qdoc @@ -0,0 +1,212 @@ +/**************************************************************************** +** +** Copyright (C) 2019 The Qt Company Ltd. +** Contact: https://www.qt.io/licensing/ +** +** This file is part of the Qt Design Studio documentation. +** +** Commercial License Usage +** Licensees holding valid commercial Qt licenses may use this file in +** accordance with the commercial license agreement provided with the +** Software or, alternatively, in accordance with the terms contained in +** a written agreement between you and The Qt Company. For licensing terms +** and conditions see https://www.qt.io/terms-conditions. For further +** information use the contact form at https://www.qt.io/contact-us. +** +** GNU Free Documentation License Usage +** Alternatively, this file may be used under the terms of the GNU Free +** Documentation License version 1.3 as published by the Free Software +** Foundation and appearing in the file included in the packaging of +** this file. Please review the following information to ensure +** the GNU Free Documentation License version 1.3 requirements +** will be met: https://www.gnu.org/licenses/fdl-1.3.html. +** +****************************************************************************/ + +/*! + \qmltype SvgPath + \inqmlmodule QtQuick.Studio.Components + \since QtQuick.Studio.Components 1.0 + \inherits ShapePath + \ingroup qtquickstudio-components + + \brief A path defined using an SVG path data string. + + The SvgPath type uses an SVG path data string to draw a path as a line. + + The \l strokeColor, \l strokeWidth, and \l strokeStyle, properties specify + the appearance of the path. The \l dashPattern and \l dashOffset properties + specify the appearance of dashed lines. + + The \l capStyle property specifies whether line ends are square or + rounded. + + The \l joinStyle property specifies how to connect two path segments. + If the path segments enclose areas, they can be painted using either + a solid fill color, specified using the \l fillColor property, or a + gradient, defined using one of the \l ShapeGradient subtypes and set + using the \l gradient property. If both a color and a gradient are + specified, the gradient is used. + + If the path has curves, it may be appropriate to set the \l antialiasing + property to improve its appearance. + + \note Mixing SvgPath with other types of elements is not always supported. + For example, when \l Shape is backed by \c GL_NV_path_rendering, a + \l ShapePath can contain one or more SvgPath elements, or one or more + elements of other types, but not both. +*/ + +/*! + \qmlproperty ShapePath SvgPath::capStyle + + The cap style of the line. + + \value ShapePath.FlatCap + A square line end that does not cover the end point of the line. + \value ShapePath.SquareCap + A square line end that covers the end point and extends beyond it + by half the line width. This is the default value. + \value ShapePath.RoundCap + A rounded line end. + + \sa Qt::PenCapStyle +*/ + +/*! + \qmlproperty ShapePath SvgPath::dashOffset + + The starting point of the dash pattern for the line. + + The offset is measured in terms of the units used to specify the dash + pattern. For example, a pattern where each stroke is four units long, + followed by a gap of two units, will begin with the stroke when drawn + as a line. However, if the dash offset is set to 4.0, any line drawn + will begin with the gap. Values of the offset up to 4.0 will cause part + of the stroke to be drawn first, and values of the offset between 4.0 and + 6.0 will cause the line to begin with part of the gap. + + The default value is 0. + + \sa QPen::setDashOffset() +*/ + +/*! + \qmlproperty ShapePath SvgPath::dashPattern + + The dash pattern of the line specified as the dashes and the gaps between + them. + + The dash pattern is specified in units of the pen's width. That is, a dash + with the length 5 and width 10 is 50 pixels long. + + Each dash is also subject to cap styles, and therefore a dash of 1 with + square cap set will extend 0.5 pixels out in each direction resulting in + a total width of 2. + + The default \l capStyle is \c {ShapePath.SquareCap}, meaning that a square + line end covers the end point and extends beyond it by half the line width. + + The default value is (4, 2), meaning a dash of 4 * \l strokeWidth pixels + followed by a space of 2 * \l strokeWidth pixels. + + \sa QPen::setDashPattern() +*/ + +/*! + \qmlproperty ShapePath SvgPath::fillColor + + The fill color of enclosed path segments. + + A gradient for the fill can be specified by using \l gradient. If both a + color and a gradient are specified, the gradient is used. + + When set to \c transparent, no filling occurs. + + The default value is \c white. +*/ + +/*! + \qmlproperty ShapePath SvgPath::gradient + + The gradient of the fill color. + + By default, no gradient is enabled and the value is null. In this case, the + fill uses a solid color based on the value of \l fillColor. + + When set, \l fillColor is ignored and filling is done using one of the + \l ShapeGradient subtypes. + + \note The \l Gradient type cannot be used here. Rather, prefer using one of + the advanced subtypes, like \l LinearGradient. +*/ + +/*! + \qmlproperty ShapePath SvgPath::joinStyle + + The join style used to connect two path segments. + + \value ShapePath.MiterJoin + The outer edges of the lines are extended to meet at an angle, and + this area is filled. + \value ShapePath.BevelJoin + The triangular notch between the two lines is filled. + This is the default value. + \value ShapePath.RoundJoin + A circular arc between the two lines is filled. + + \sa Qt::PenJoinStyle +*/ + +/*! + \qmlproperty ShapePath SvgPath::strokeColor + + The color of the line. + + When set to \c transparent, no line is drawn. + + The default value is \c white. + + \sa QColor +*/ + +/*! + \qmlproperty ShapePath SvgPath::strokeStyle + + The style of the line. + + \value ShapePath.SolidLine + A solid line. This is the default value. + \value ShapePath.DashLine + Dashes separated by a few pixels. + The \l dashPattern property specifies the dash pattern. + + \sa Qt::PenStyle +*/ + +/*! + \qmlproperty ShapePath SvgPath::strokeWidth + + The width of the line. + + When set to a negative value, no line is drawn. + + The default value is 1. +*/ + +/*! + \qmlproperty string SvgPath::path + + The SVG path data string specifying the path. + + For more information, see \l{https://www.w3.org/TR/SVG/paths.html#PathData} + {W3C SVG Path Data}. +*/ + +/*! + \qmlproperty bool SvgPath::antialising + + Whether the path should be antialiased. + + Antialiasing might require more memory and slow down drawing the type. +*/ diff --git a/doc/qtdesignstudio/src/qtquickdesigner-components/components/qqs-components-triangle.qdoc b/doc/qtdesignstudio/src/qtquickdesigner-components/components/qqs-components-triangle.qdoc new file mode 100644 index 0000000000..a8431b2f06 --- /dev/null +++ b/doc/qtdesignstudio/src/qtquickdesigner-components/components/qqs-components-triangle.qdoc @@ -0,0 +1,287 @@ +/**************************************************************************** +** +** Copyright (C) 2019 The Qt Company Ltd. +** Contact: https://www.qt.io/licensing/ +** +** This file is part of the Qt Design Studio documentation. +** +** Commercial License Usage +** Licensees holding valid commercial Qt licenses may use this file in +** accordance with the commercial license agreement provided with the +** Software or, alternatively, in accordance with the terms contained in +** a written agreement between you and The Qt Company. For licensing terms +** and conditions see https://www.qt.io/terms-conditions. For further +** information use the contact form at https://www.qt.io/contact-us. +** +** GNU Free Documentation License Usage +** Alternatively, this file may be used under the terms of the GNU Free +** Documentation License version 1.3 as published by the Free Software +** Foundation and appearing in the file included in the packaging of +** this file. Please review the following information to ensure +** the GNU Free Documentation License version 1.3 requirements +** will be met: https://www.gnu.org/licenses/fdl-1.3.html. +** +****************************************************************************/ + +/*! + \qmltype Triangle + \inqmlmodule QtQuick.Studio.Components + \since QtQuick.Studio.Components 1.0 + \inherits ShapePath + \ingroup qtquickstudio-components + + \brief A triangle. + + The Triangle type can be used to draw triangles with different dimensions + and shapes. The type is enclosed in an invisible \l Rectangle type. The size + of the triagle is determined by the size of the bounding rectangle. The + dimensions of the triangle can be changed to make it elongated or squatter + with space around it by using the \l leftMargin, \l topMargin, + \l rightMargin, and \l bottomMargin properties. The margins are set between + the triangle and the edges of the parent rectangle. + + Each Triangle item is painted using either a solid fill color, specified + using the \l fillColor property, or a gradient, defined using one of the + \l ShapeGradient subtypes and set using the \l gradient property. + If both a color and a gradient are specified, the gradient is used. + + An optional border can be added to a triangle with its own color and + thickness by setting the \l strokeColor and \l strokeWidth properties. + Setting the color to \c transparent creates a border without a fill color. + + \section2 Example Usage + + You can use the Triangle component in \QDS to create triangles in different + shapes and colors. + + \image studio-triangle.png + + The QML code looks as follows: + + \code + TriangleItem { + id: triangle + strokeColor: "gray" + fillColor: "light gray" + } + + TriangleItem { + id: squatTriangle + bottomMargin: 10 + topMargin: 30 + fillColor: "#d3d3d3" + strokeColor: "#808080" + } + + TriangleItem { + id: elongatedTriangle + leftMargin: 15 + rightMargin: 15 + fillColor: "#d3d3d3" + strokeColor: "#808080" + } + + TriangleItem { + id: pear + radius: 20 + fillColor: "light gray" + bottomMargin: 10 + arcRadius: 20 + strokeColor: "#808080" + } + \endcode +*/ + +/*! + \qmlproperty ShapePath Triangle::dashOffset + + The starting point of the dash pattern for the triangle border. + + The offset is measured in terms of the units used to specify the dash + pattern. For example, a pattern where each stroke is four units long, + followed by a gap of two units, will begin with the stroke when drawn + as a line. However, if the dash offset is set to 4.0, any line drawn + will begin with the gap. Values of the offset up to 4.0 will cause part + of the stroke to be drawn first, and values of the offset between 4.0 and + 6.0 will cause the line to begin with part of the gap. + + The default value is 0. + + \sa QPen::setDashOffset() +*/ + +/*! + \qmlproperty ShapePath Triangle::dashPattern + + The dash pattern of the triangle border specified as the dashes and the + gaps between them. + + The dash pattern is specified in units of the pen's width. That is, a dash + with the length 5 and width 10 is 50 pixels long. + + The default value is (4, 2), meaning a dash of 4 * \l strokeWidth pixels + followed by a space of 2 * \l strokeWidth pixels. + + \sa QPen::setDashPattern() +*/ + +/*! + \qmlproperty ShapePath Triangle::fillColor + + The triangle fill color. + + A gradient for the fill can be specified by using \l gradient. If both a + color and a gradient are specified, the gradient is used. + + When set to \c transparent, no filling occurs. + + The default value is \c white. +*/ + +/*! + \qmlproperty ShapePath Triangle::gradient + + The gradient of the triangle fill color. + + By default, no gradient is enabled and the value is null. In this case, the + fill uses a solid color based on the value of \l fillColor. + + When set, \l fillColor is ignored and filling is done using one of the + \l ShapeGradient subtypes. + + \note The \l Gradient type cannot be used here. Rather, prefer using one of + the advanced subtypes, like \l LinearGradient. +*/ + +/*! + \qmlproperty enumeration Triangle::joinStyle + + The join style used to connect two triangle line segments. + + \value ShapePath.MiterJoin + The outer edges of the lines are extended to meet at an angle, and + this area is filled. + \value ShapePath.BevelJoin + The triangular notch between the two lines is filled. + This is the default value. + \value ShapePath.RoundJoin + A circular arc between the two lines is filled. + + \sa Qt::PenJoinStyle +*/ + +/*! + \qmlproperty ShapePath Triangle::strokeColor + + The color used to draw the border of the triangle. + + When set to \c transparent, no line is drawn. + + The default value is \c white. + + \sa QColor +*/ + +/*! + \qmlproperty ShapePath Triangle::strokeStyle + + The style of the triangle border. + + \value ShapePath.SolidLine + A solid line. This is the default value. + \value ShapePath.DashLine + Dashes separated by a few pixels. + The \l dashPattern property specifies the dash pattern. + + \sa Qt::PenStyle +*/ + +/*! + \qmlproperty ShapePath Triangle::strokeWidth + + The width of the border of the rectangle. + + A width of 1 creates a thin line. For no line, use a negative value or a + transparent color. + + \note The width of the rectangle's border does not affect the geometry of + the rectangle itself or its position relative to other items if anchors are + used. + + The border is rendered within the rectangle's boundaries. +*/ + +/*! + \qmlproperty int Triangle::radius + + Defines the rotation of the triangle in degrees. The default value is 0. + + This property can be used together with the \l radius property to + determine the shape of the triangle. + + \sa arcRadius +*/ + +/*! + \qmlproperty real Triangle::arcRadius + + The radius used to draw rounded corners. + + If radius is non-zero, the corners will be rounded, otherwise they will + be sharp. + + This property can be used together with the \l radius property to + determine the shape of the triangle. +*/ + +/*! + \qmlproperty real Triangle::leftMargin + + The left margin between the triangle and the bounding rectangle. + + Setting the left and right margins makes the triangle thinner and moves it + away from the edge. + + \sa rightMargin, topMargin, bottomMargin +*/ + +/*! + \qmlproperty real Triangle::topMargin + + The top margin between the triangle and the bounding rectangle. + + Setting the top and bottom margins makes the triangle lower and moves it + away from the edge. + + \sa bottomMargin, leftMargin, rightMargin +*/ + +/*! + \qmlproperty real Triangle::rightMargin + + The left margin between the triangle and the bounding rectangle. + + Setting the left and right margins makes the triangle thinner and moves it + away from the edge. + + \sa leftMargin, topMargin, bottomMargin +*/ + +/*! + \qmlproperty real Triangle::bottomMargin + + The top margin between the triangle and the bounding rectangle. + + Setting the top and bottom margins makes the triangle shorter and moves it + away from the edge. + + \sa topMargin, leftMargin, rightMargin +*/ + +/*! + \qmlproperty bool Triangel::antialiasing + + Whether the triangle should be antialiased. + + Antialiasing might require more memory and slow down drawing the type. +*/ diff --git a/doc/qtdesignstudio/src/qtquickdesigner-components/qtquickdesigner-components.qdoc b/doc/qtdesignstudio/src/qtquickdesigner-components/qtquickdesigner-components.qdoc new file mode 100644 index 0000000000..82eef3cae7 --- /dev/null +++ b/doc/qtdesignstudio/src/qtquickdesigner-components/qtquickdesigner-components.qdoc @@ -0,0 +1,52 @@ +/**************************************************************************** +** +** Copyright (C) 2019 The Qt Company Ltd. +** Contact: https://www.qt.io/licensing/ +** +** This file is part of the Qt Design Studio documentation. +** +** Commercial License Usage +** Licensees holding valid commercial Qt licenses may use this file in +** accordance with the commercial license agreement provided with the +** Software or, alternatively, in accordance with the terms contained in +** a written agreement between you and The Qt Company. For licensing terms +** and conditions see https://www.qt.io/terms-conditions. For further +** information use the contact form at https://www.qt.io/contact-us. +** +** GNU Free Documentation License Usage +** Alternatively, this file may be used under the terms of the GNU Free +** Documentation License version 1.3 as published by the Free Software +** Foundation and appearing in the file included in the packaging of +** this file. Please review the following information to ensure +** the GNU Free Documentation License version 1.3 requirements +** will be met: https://www.gnu.org/licenses/fdl-1.3.html. +** +****************************************************************************/ + +/*! + \contentspage {Qt Design Studio Manual} + \page qtquickdesigner-components-overview.html + + \title Qt Quick Studio Components + + The Qt Quick Studio Components module provides sets of components and + effects enhanced for creating animated UIs. The components inherit + \l {Qt Quick Shapes QML Types}. The effects inherit the types in the + \l {Qt Graphical Effects} module. + + \section1 Using Studio Components + + A set of ready-made studio components are available for creating differently + shaped objects, such as arcs, pies, or triangles, as well as objects with + particular abilities, such as being visibly \e flipped between their front + and back sides, like a card. The studio components are built on top of + \l {Qt Quick Shapes QML Types}, with some additional properties. + + The following table summarizes the available studio components and contains + links to their documentation. + + \annotatedlist qtquickstudio-components + + \include qtdesignstudio-visual-effects.qdocinc qml visual effects + +*/ diff --git a/doc/qtdesignstudio/src/qtquickdesigner-components/qtquickstudiocomponents-qmlmodule.qdoc b/doc/qtdesignstudio/src/qtquickdesigner-components/qtquickstudiocomponents-qmlmodule.qdoc new file mode 100644 index 0000000000..7f67c3daf2 --- /dev/null +++ b/doc/qtdesignstudio/src/qtquickdesigner-components/qtquickstudiocomponents-qmlmodule.qdoc @@ -0,0 +1,58 @@ +/**************************************************************************** +** +** Copyright (C) 2019 The Qt Company Ltd. +** Contact: https://www.qt.io/licensing/ +** +** This file is part of the documentation of the Qt Toolkit. +** +** $QT_BEGIN_LICENSE:FDL$ +** Commercial License Usage +** Licensees holding valid commercial Qt licenses may use this file in +** accordance with the commercial license agreement provided with the +** Software or, alternatively, in accordance with the terms contained in +** a written agreement between you and The Qt Company. For licensing terms +** and conditions see https://www.qt.io/terms-conditions. For further +** information use the contact form at https://www.qt.io/contact-us. +** +** GNU Free Documentation License Usage +** Alternatively, this file may be used under the terms of the GNU Free +** Documentation License version 1.3 as published by the Free Software +** Foundation and appearing in the file included in the packaging of +** this file. Please review the following information to ensure +** the GNU Free Documentation License version 1.3 requirements +** will be met: https://www.gnu.org/licenses/fdl-1.3.html. +** $QT_END_LICENSE$ +** +****************************************************************************/ + +/*! + \qmlmodule QtQuick.Studio.Components 1.0 + \title Qt Quick Studio Components QML Types + \ingroup qmlmodules + \brief Provides components enhanced for creating animated UIs. + + A set of ready-made studio components are available for creating differently + shaped objects, such as arcs, pies, or triangles, as well as objects with + particular abilities, such as being visibly \e flipped between their front + and back sides, like a card. The studio components are built on top of + \l {Qt Quick Shapes QML Types}, with some additional properties. + + The QML types can be imported into your application using the following + import statements in your .qml file: + + \badcode + import QtQuick.Studio.Components 1.0 + \endcode + + \omit + \\ TODO: Include the omitted text when the module becomes a Qt module. + Currently, the components are a part of Qt Design Studio. + + To link against the module, add the following QT variable to your qmake .pro + file: + + \badcode + QT += studiocomponents + \endcode + \endomit +*/ |