Equations mathématiques

Equations mathématiques montre comment visualiser des équations mathématiques en QML avec tous les types de graphiques disponibles. Il montre également comment intégrer la scène QtQuick3D dans un graphique et comment ajuster l'aspect du graphique à l'aide de ExtendedSceneEnvironment.

Pour plus d'informations sur les fonctionnalités de base d'une application QML, voir Simple Scatter Graph (graphique de dispersion simple).

Exécution de l'exemple

Pour exécuter l'exemple à partir de Qt CreatorOuvrez le mode Welcome et sélectionnez l'exemple à partir de Examples. Pour plus d'informations, voir Qt Creator: Tutoriel : Construire et exécuter.

Mise en place

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 faire correspondre 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 des fonctions mathématiques suivants, ainsi que des caractères requis pour l'utilisation de ces fonctions :

Les paramètres x et y sont pris en charge, car les données manipulées comportent deux axes et la valeur. L'équation peut comporter des espaces autour des opérateurs, de sorte que les deux styles suivants conviennent :

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

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

import "calculator.js" as Calc

La calculatrice a été postée sur Stack Overflow par tanguy_k en TypeScript, et a été convertie en JavaScript pour être utilisable à partir de QML.

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

Boucle des lignes et des 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 les 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, d'opérateur inconnu ou de fonction mathématique inconnue dans l'équation, l'erreur générée par la calculatrice est détectée et une boîte de dialogue d'erreur est affichée :

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 cependant quelques différences dans la configuration des graphiques.

Surface

Le graphique de surface est utilisé pour afficher les données sans aucune modification spécifique. Il rend l'équation à chaque ligne et colonne avec le résultat du calcul.

Les seules modifications apportées consistent à définir le nombre de segments d'axe :

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

Un gradient 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 pour pouvoir être utilisé par d'autres thèmes.

Barres

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

Diffusion

Pour scatter, le thème est ajusté un peu plus en préparation des intégrations QtQuick3D.

Tout d'abord, il utilisera un gradient différent des deux autres. Ensuite, un schéma de couleurs sombres est imposé, 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 réglant leur visibilité sur false.

Le graphique de dispersion permet de montrer un grand nombre de points de données, c'est pourquoi 3 points de données sont ajoutés pour chaque "ligne" et "colonne". Le graphique de dispersion n'a pas le concept de lignes et de colonnes, c'est pourquoi cela peut être fait :

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 de dispersion comporte beaucoup plus de points de données que les deux autres graphiques, il est préférable d'utiliser le site mesh type le plus léger possible pour les points :

mesh: Abstract3DSeries.Mesh.Point

Intégration d'une scène QtQuick3D

Pour que les types QtQuick3D soient trouvés, ils doivent être importés dans le QML :

import QtQuick3D

Une scène QtQuick3D peut être importée dans le graphique à l'aide de la propriété importScene. La scène peut être une combinaison de Models, Lights, reflection probes, et d'autres Nodes contenus dans une 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"
                }
            }
        ]
    }
}

Changer l'apparence à l'aide de QtQuick3D

Pour que le site ExtendedSceneEnvironment soit trouvé, 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 un ExtendedSceneEnvironment. Dans ce cas, backgroundMode, clearColor, et tonemapMode sont définis. En outre, glow est activé. L'ajout d'effets de post-traitement tels que l'éclat nécessite de régler le mode de carte de tonalité sur TonemapModeNone.

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

Pour que la lueur soit forte, plusieurs autres propriétés connexes sont définies.

Exemple de projet @ code.qt.io