Équations mathématiques

La section «Équations mathématiques » explique comment visualiser des équations mathématiques en QML à l’aide de tous les types de graphiques disponibles. Elle montre également comment intégrer une scè QtQuick3D dans un graphique et comment ajuster l’apparence de ce dernier à l’aide de ExtendedSceneEnvironment.

Pour plus d’informations sur les fonctionnalités de base des applications QML, consultez la section « Graphique de dispersion simple ».

Exécution de l'exemple

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

• Qt Creator

  Ouvrez le mode « Welcome » et sélectionnez l’exemple à l’adresse 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.

Configuration

Les données de tous les types de graphiques peuvent être stockées dans un fichier commun ListModel:

ListModel {
    id: dataModel
}

Le modèle est défini pour chaque type de graphique dans la série de graphiques :

Surface3DSeries {
    id: surfaceSeries
    itemLabelFormat: "(@xLabel, @zLabel): @yLabel"

    ItemModelSurfaceDataProxy {
        itemModel: dataModel
        columnRole: "xPos"
        yPosRole: "yPos"
        rowRole: "zPos"
    }
}
...
Bar3DSeries {
    id: barSeries
    itemLabelFormat: "@colLabel, @rowLabel: @valueLabel"

    ItemModelBarDataProxy {
        itemModel: dataModel
        columnRole: "xPos"
        valueRole: "yPos"
        rowRole: "zPos"
    }
}
...
Scatter3DSeries {
    id: scatterSeries
    itemLabelFormat: "(@xLabel, @zLabel): @yLabel"
    mesh: Abstract3DSeries.Mesh.Point

    ItemModelScatterDataProxy {
        itemModel: dataModel
        xPosRole: "xPos"
        yPosRole: "yPos"
        zPosRole: "zPos"
    }
}

La définition des rôles permet de mapper automatiquement les données du modèle aux axes correspondants.

Analyse de l'équation

L'équation peut être saisie dans le champ de texte à l'aide des opérateurs et fonctions mathématiques suivants, ainsi que des caractères requis pour utiliser ces fonctions :

Les formats x et y sont pris en charge comme paramètres, car les données traitées comportent deux axes et une valeur. L'équation peut comporter des espaces autour des opérateurs ; les deux styles suivants sont donc valables :

• x²+y²
• x ^ 2 + y ^ 2

L'équation est analysée à l'aide d'un analyseur d'équations et d'une calculatrice JavaScript, importés dans QML :

import "calculator.js" as Calc

La calculatrice a été publiée sur Stack Overflow par tanguy_k en TypeScript, puis convertie en JavaScript pour être utilisable depuis QML.

Les paramètres de l’équation sont renseignés à chaque fois que l’équation change ou que le nombre de colonnes ou de lignes est mis à jour.

Boucle sur les lignes et les colonnes :

for (i = xValues.first.value; i <= xValues.second.value; ++i) {
    for (j = zValues.first.value; j <= zValues.second.value; ++j)
        addDataPoint(i, j)
}

Remplissage des valeurs pour x et y:

function addDataPoint(i, j) {
    var filledEquation = equation.text.replace("x", i)
    filledEquation = filledEquation.replace("y", j)
    ...

L’équation est ensuite transmise à la calculatrice JavaScript pour obtenir le résultat, qui est ensuite ajouté au modèle de données en l’insérant dans les rôles définis :

try {
    var result = Calc.calculate(filledEquation)
    dataModel.append({"xPos": i, "yPos": result, "zPos": j})
}

En cas d’erreur ou d’opérateur ou de fonction mathématique inconnu dans l’équation, l’erreur générée par la calculatrice est interceptée et une boîte de dialogue d’erreur s’affiche :

MessageDialog {
    id : messageDialog
    title: qsTr("Error")
    text: qsTr("Undefined behavior")
    ...

Affichage du message d’erreur de la calculatrice :

catch(msg) {
    messageDialog.informativeText = msg.toString()
    messageDialog.open()
}

Graphiques

Le même modèle de données est utilisé pour les trois types de graphiques. Il existe toutefois quelques différences dans la configuration des graphiques.

Surface

Le graphique de surface sert à afficher les données sans aucune modification particulière. Il représente l’équation à chaque ligne et colonne avec le résultat du calcul.

Les seules modifications apportées concernent le nombre de segments par axe :

axisX.segmentCount: 10
axisZ.segmentCount: 10
axisY.segmentCount: 10

Un dégradé de plage est défini pour le thème afin de mettre en évidence les valeurs hautes et basses :

theme : GraphsTheme {
    id: surfaceTheme
    colorStyle: GraphsTheme.ColorStyle.RangeGradient
    baseGradients: [ gradient1 ]
    plotAreaBackgroundVisible: false
}

Le dégradé lui-même est défini ailleurs afin de pouvoir être utilisé par d’autres thèmes.

Barres

Pour les barres, un dégradé de plage est également utilisé. Ce dégradé utilise une légère transparence pour faciliter la lecture des valeurs sans avoir à trop faire pivoter le graphique. Un curseur a été ajouté pour contrôler le niveau de transparence.

Diagramme de dispersion

Pour les nuages de points, le thème est légèrement modifié en vue de l’intégration à QtQuick3D.

Tout d’abord, il utilisera un dégradé différent de celui des deux autres. Ensuite, une palette de couleurs sombres est imposée, contrairement aux deux autres qui utilisent les préférences du système. Enfin, l’arrière-plan de la zone de tracé, les étiquettes et la grille sont masqués en définissant leur visibilité sur « false ».

Le nuage de points est particulièrement adapté à la représentation d’un grand nombre de points de données, c’est pourquoi 3 points de données sont ajoutés pour chaque « ligne » et chaque « colonne ». Le nuage de points ne repose pas sur le concept de lignes et de colonnes, ce qui permet de procéder ainsi :

for (var i = xValues.first.value; i <= xValues.second.value; i += 0.333) {
    for (var j = zValues.first.value; j <= zValues.second.value; j += 0.333)
        addDataPoint(i, j)
}

Comme le graphique en nuage de points comporte beaucoup plus de points de données que les deux autres graphiques, il est préférable d’utiliser l’ mesh type la plus claire disponible pour les points :

mesh: Abstract3DSeries.Mesh.Point

Intégration d’une scène QtQuick3D

Pour que les types d’ QtQuick3D s soient disponibles, il faut les importer dans le QML :

import QtQuick3D

Une scène d’ QtQuick3D peut être importée dans le graphique à l’aide de la propriété ` importScene `. La scène peut être une combinaison de modèles(`Models`), d’ Lights (` `), d’ reflection probes et d’autres éléments d’ Nodecontenus dans un élément racine ` Node`. Dans cet exemple, seul un rectangle avec une carte d’opacité est ajouté :

importScene: Node {
    Model {
        scale: Qt.vector3d(0.1, 0.1, 0.1)
        source: "#Rectangle"
        y: -2
        eulerRotation.x: -90
        materials: [
            PrincipledMaterial {
                baseColor: "#373F26"
                opacityMap: Texture {
                    source: "qrc:/images/opacitymap.png"
                }
            }
        ]
    }
}

Modification de l'apparence à l'aide de QtQuick3D

Pour que l’ ExtendedSceneEnvironment soit accessible, l’importation suivante est nécessaire :

import QtQuick3D.Helpers

Pour remplacer l’environnement de scène par défaut du graphique, la propriété « environment » est ajoutée avec une valeur « ExtendedSceneEnvironment ». Dans ce cas, les propriétés « backgroundMode », « clearColor » et « tonemapMode » sont définies. De plus, la propriété « glow » est activée. L’ajout d’effets de post-traitement tels que la lueur nécessite de définir le mode de carte de tons sur « TonemapModeNone ».

environment: ExtendedSceneEnvironment {
    backgroundMode: ExtendedSceneEnvironment.Color
    clearColor: scatterTheme.backgroundColor
    tonemapMode: ExtendedSceneEnvironment.TonemapModeNone
    glowEnabled: true
    ...

Pour renforcer la lueur, plusieurs autres propriétés associées sont définies.

Exemple de projet sur code.qt.io