Exemple de prévisions météorologiques

Cet exemple est conçu pour ressembler à une application de prévisions météo pour l'Europe. Il illustre plusieurs façons dont l'API « QtQuick.Shapes » peut s'avérer utile dans une application, et montre comment différentes propriétés peuvent influencer la qualité et les performances du rendu.

Tous les graphiques de l'exemple proviennent à l'origine de fichiers « .svg » qui sont automatiquement convertis en QML à l'aide de l'outil svgtoqml lors de la compilation.

qt_target_qml_from_svg(weatherforecastexample
    OPTIMIZE_PATHS
    ASYNCHRONOUS_SHAPES
    TYPE_NAME "DemoShape"
    COPYRIGHT_STATEMENT "Copyright © 2023 Framework7\\nSPDX-License-Identifier: MIT"
    FILES
        assets/gear-alt-stroke.svg
    OUTPUTS
        Gear_generated.qml
)

Les fichiers QML générés peuvent être utilisés dans le code de l’application comme n’importe quel autre.

Différents types de formes

Le module QtQuick.Shapes fournit des API permettant de rendre des graphiques vectoriels dans une application Qt Quick. Il s’agit d’une alternative à l’utilisation d’une Image de type raster pour les graphiques 2D, et s’avère utile lorsque la taille cible de l’image n’est pas connue à l’avance. Avec une image de type « Image », la pixmap rastérisée est pré-créée à une taille spécifique et le redimensionnement de l’image entraîne soit l’ajout, soit la suppression d’informations. Cela se traduit par une pixellisation ou un flou, selon que la propriété « smooth » est activée ou non.

Avec QtQuick.Shapes, les formes sont décrites mathématiquement, sous la forme d’un ensemble de courbes et de segments de droite, et peuvent donc être redimensionnées à volonté sans introduire d’artefacts.

Dans l’exemple des prévisions météorologiques, les formes sont principalement utilisées de trois façons :

• Les icônes de l’interface utilisateur, telles que les symboles météo et la roue dentée du bouton « Paramètres ».
• La carte générale de l’Europe.
• Les libellés des noms de pays visibles lors du zoom sur la carte.

Icônes de l’interface utilisateur

Bien qu’il soit généralement préférable d’utiliser des images matricielles de taille appropriée pour les icônes, pour des raisons de performances, cela peut s’avérer peu pratique si la même application cible de nombreuses tailles d’écran différentes. Pour que les icônes s’affichent nettement sur tous les écrans, il faut pré-générer un vaste ensemble de tailles différentes. QtQuick.Shapes permet à l’application d’effectuer cette adaptation à l’exécution, en intégrant les icônes sous forme de formes et en les affichant à une taille adaptée à la taille actuelle de l’écran.

Lorsque vous exécutez l’exemple « Weather Forecast » sur un ordinateur de bureau, vous pouvez le constater en agrandissant ou en réduisant la fenêtre de l’application. Les symboles météorologiques s’adaptent à la taille de la fenêtre sans perte de qualité.

De plus, des effets animés, tels que des zooms, peuvent être ajoutés sans perte de qualité. Vous pouvez le constater en survolant les symboles météo.

Ainsi, pour tout cas d’utilisation où la taille cible est inconnue, ou lorsque le nombre de possibilités est si important que la création de pixmaps spécifiques pour chacune d’entre elles serait peu pratique, l’utilisation de formes pour les icônes peut s’avérer utile et justifier le coût en termes de performances lié à la rastérisation des formes lors de l’exécution.

Carte de l’Europe

L’exemple « Prévisions météo » utilise également une carte vectorisée de l’Europe. Cela facilite la création d’effets tels que le zoom sur la carte lorsque l’on souhaite mettre en avant un pays spécifique. De plus, chaque pays étant une sous-forme distincte, il est possible de leur appliquer indépendamment des remplissages et des contours différents.

Cliquez sur la carte pour zoomer sur un pays. L'échelle sera ajustée de manière à ce que la forme du pays occupe toute la fenêtre et que la couleur de remplissage soit légèrement plus foncée.

Libellés des noms de pays

Lorsque vous zoomez sur un pays, son nom apparaît sur la forme du pays. Cette étiquette est également créée avec QtQuick.Shapes, à l’aide du type de composant PathText qui convertit une chaîne de caractères en forme affichable.

Ce n’est pas la méthode habituelle pour créer des libellés de texte dans Qt Quick. Dans la plupart des cas, l’utilisation de l’élément Text est l’approche la plus efficace et la plus pratique. Cependant, certains effets de visualisation pris en charge par QtQuick.Shapes ne le sont pas par l’élément Text standard. Les dégradés de remplissage en font partie.

                        ShapePath {
                            strokeColor:  "transparent"
                            strokeWidth: 1
                            joinStyle: ShapePath.RoundJoin
                            fillRule: ShapePath.WindingFill

                            fillGradient: RadialGradient {
                                centerX: textShape.width / 2
                                centerY: textShape.height / 2
                                centerRadius: textShape.width / 2
                                focalX: centerX; focalY: centerY
                                GradientStop { position: 0; color: "#b0ab9d7f" }
                                GradientStop { position: 1; color: "#5cab9d7f" }
                            }
                            PathText {
                                id: textPath
                                text: textLayer.label
                                font.family: workSansRegular.font.family
                                font.pixelSize: 64
                            }
                        }

Pour illustrer cela, l’exemple « Prévisions météorologiques » applique un dégradé radial subtil à l’opacité des libellés des pays, ce qui donne l’impression qu’ils se fondent dans la carte sur les bords.

Différents types de moteurs de rendu

L’exemple « Prévisions météo » illustre plusieurs cas d’utilisation différents de QtQuick.Shapes. De plus, il permet de mettre en évidence les avantages et les inconvénients des différents moteurs de rendu pris en charge par le module.

Cliquez sur la roue dentée dans le coin supérieur gauche pour ouvrir un panneau de paramètres, où vous pouvez sélectionner différentes approches de rastérisation.

QtQuick.Shapes preferredRendererType prend en charge deux moteurs de rendu différents, sélectionnables via la propriété ` `. Le moteur de rendu privilégié dans cet exemple est ` `. Celui-ci prend en charge les courbes accélérées par le matériel et l'anticrénelage intégré. Il ne s'agit pas du moteur de rendu par défaut dans ` `, mais dans cet exemple, il est automatiquement sélectionné au démarrage. CurveRenderer QtQuick.Shapes

Le moteur de rendu par défaut dans « Qt Quick Shapes » est « GeometryRenderer ». Celui-ci aplatit les courbes de la forme en très petites lignes droites et dessine la forme sous forme de polygone. Le redessin de la forme est plus efficace qu’avec « CurveRenderer », mais à certaines échelles, le fait que les courbes soient approximées par des lignes sera visible.

De plus, la fonction « GeometryRenderer » ne prend pas en charge l’anticrénelage ; vous devrez donc généralement activer le multi-échantillonnage lorsque vous l’utilisez. Pour ce faire, il suffit de rendre les formes dans des calques et d’activer le multi-échantillonnage sur ceux-ci. Comme, dans ce mode, nous allons rendre les formes dans des tampons hors écran, cela consomme davantage de mémoire graphique et nécessite un passage de rendu supplémentaire pour chaque forme.

        layer.enabled: msaaCheckBox.checked
        layer.samples: 4

Le panneau de paramètres offre également la possibilité d’utiliser l’ GeometryRenderer avec un multi-échantillonnage 4x, ce qui permet de comparer sa qualité à celle de l’anticrénelage intégré à l’ CurveRenderer.

Exécution de l'exemple

Vous pouvez exécuter l’exemple à partir de :

• Qt Creator

  Ouvrez le mode « Welcome » et sélectionnez l’exemple dans Examples. Pour plus d’informations, consultez Qt Creator: Tutoriel : Compiler et exécuter.

• Qt Extension for Visual Studio Code

  Exécutez la commande « Qt: Open Qt examples » à partir de Command Palette, puis sélectionnez l’exemple dans la liste. Pour plus d’informations, consultez Qt Extension for Visual Studio Code: Tutoriel : Compiler et exécuter.

Exemple de projet sur code.qt.io