Mathematische Gleichungen

„Mathematische Gleichungen“ zeigt, wie man mathematische Gleichungen in QML mit allen verfügbaren Diagrammtypen visualisiert. Außerdem wird erläutert, wie man eine „ QtQuick3D “-Szene in ein Diagramm integriert und wie man das Erscheinungsbild des Diagramms mithilfe von „ ExtendedSceneEnvironment “ anpasst.

Weitere Informationen zu den grundlegenden Funktionen von QML-Anwendungen finden Sie unter „Einfaches Streudiagramm“.

Ausführen des Beispiels

Sie können das Beispiel wie folgt ausführen:

• Qt Creator

  Öffnen Sie den Modus „ Welcome “ und wählen Sie das Beispiel unter „ Examples “ aus. Weitere Informationen finden Sie unter „Qt Creator “: Tutorial: Erstellen und Ausführen.

• Qt Extension for Visual Studio Code

  Führen Sie den Befehl „ Qt: Open Qt examples “ über „ Command Palette “ aus und wählen Sie das Beispiel aus der Liste aus. Weitere Informationen finden Sie unter „Qt Extension for Visual Studio Code “: Tutorial: Erstellen und Ausführen.

Einrichtung

Die Daten für alle Diagrammtypen können in einer gemeinsamen „ ListModel “-Datei gespeichert werden:

ListModel {
    id: dataModel
}

Das Modell wird für jeden Diagrammtyp in der Diagrammreihe festgelegt:

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"
    }
}

Durch die Festlegung der Rollen können die Daten im Modell automatisch den entsprechenden Achsen zugeordnet werden.

Auswerten der Gleichung

Die Gleichung kann unter Verwendung der folgenden Operatoren und mathematischen Funktionen sowie der für die Verwendung dieser Funktionen erforderlichen Zeichen in das Textfeld eingegeben werden:

x und y werden als Parameter unterstützt, da die verarbeiteten Daten zwei Achsen und den Wert umfassen. Die Gleichung kann Leerzeichen um die Operatoren herum enthalten, daher sind beide der folgenden Schreibweisen zulässig:

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

Die Gleichung wird mithilfe eines JavaScript-Gleichungs-Parsers und -Rechners analysiert, der in QML importiert wird:

import "calculator.js" as Calc

Der Rechner wurde von tanguy_k in TypeScript auf Stack Overflow veröffentlicht und in JavaScript konvertiert, um ihn in QML nutzen zu können.

Die Parameter der Gleichung werden jedes Mal neu ausgefüllt, wenn sich die Gleichung ändert oder die Anzahl der Spalten oder Zeilen aktualisiert wird.

Durchlaufen der Zeilen und Spalten:

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

Ausfüllen der Werte für x und y:

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

Die Gleichung wird anschließend an den JavaScript-Rechner übergeben, um das Ergebnis zu erhalten, das dann durch Einfügen in die definierten Rollen zum Datenmodell hinzugefügt wird:

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

Falls die Gleichung einen Fehler oder einen unbekannten Operator oder eine unbekannte mathematische Funktion enthält, wird der vom Rechner ausgelöste Fehler abgefangen und ein Fehlerdialog angezeigt:

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

Anzeige der Fehlermeldung des Rechners:

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

Diagramme

Für alle drei Diagrammtypen wird dasselbe Datenmodell verwendet. Bei der Einrichtung der Diagramme gibt es jedoch einige Unterschiede.

Flächen

Das Flächendiagramm dient dazu, die Daten ohne spezifische Änderungen darzustellen. Es rendert die Gleichung in jeder Zeile und Spalte zusammen mit dem Berechnungsergebnis.

Die einzigen vorgenommenen Änderungen betreffen die Festlegung der Anzahl der Achsenabschnitte:

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

Für das Design wird ein Bereichsgradient festgelegt, um die höchsten und niedrigsten Werte hervorzuheben:

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

Der Farbverlauf selbst wird an anderer Stelle definiert, damit er auch von anderen Designs verwendet werden kann.

Balken

Auch bei Balken wird ein Bereichsverlauf verwendet. Der Verlauf nutzt eine leichte Transparenz, um die Werte besser erkennbar zu machen, ohne das Diagramm stark drehen zu müssen. Es wurde ein Schieberegler hinzugefügt, um den Transparenzgrad einzustellen.

Punktdiagramm

Für Streudiagramme wurde das Design etwas weiter angepasst, um es für die QtQuick3D-Integrationen vorzubereiten.

Erstens wird ein anderer Farbverlauf als bei den beiden anderen verwendet. Zweitens wird ein dunkles Farbschema erzwungen, im Gegensatz zu den beiden anderen, die die Systemeinstellungen verwenden. Schließlich werden der Hintergrund des Diagrammbereichs, die Beschriftungen und das Raster ausgeblendet, indem ihre Sichtbarkeit auf „false“ gesetzt wird.

Das Streudiagramm eignet sich gut zur Darstellung einer großen Anzahl von Datenpunkten, weshalb für jede „Zeile“ und „Spalte“ drei Datenpunkte hinzugefügt werden. Da es im Streudiagramm kein Konzept von Zeilen und Spalten gibt, ist dies möglich:

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)
}

Da das Streudiagramm deutlich mehr Datenpunkte enthält als die beiden anderen Diagramme, ist es sinnvoller, für die Punkte den hellsten verfügbaren „ mesh type “ zu verwenden:

mesh: Abstract3DSeries.Mesh.Point

Einbinden einer QtQuick3D-Szene

Damit die „ QtQuick3D “-Typen gefunden werden können, müssen sie in die QML importiert werden:

import QtQuick3D

Eine „ QtQuick3D “-Szene kann mithilfe der Eigenschaft „ importScene “ in das Diagramm importiert werden. Die Szene kann eine Kombination aus „Models“, „ Lights“, „ reflection probes “ und anderen „ Nodes“ sein, die in einem Stamm-„ Node “ enthalten sind. In diesem Beispiel wird nur ein Rechteck mit einer Opazitätskarte hinzugefügt:

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"
                }
            }
        ]
    }
}

Änderung der Darstellung mit QtQuick3D

Damit die „ ExtendedSceneEnvironment “ gefunden wird, ist folgender Import erforderlich:

import QtQuick3D.Helpers

Um die Standard-Szenenumgebung des Graphen zu überschreiben, wird die Eigenschaft „ environment “ mit einem „ ExtendedSceneEnvironment “ hinzugefügt. In diesem Fall werden „ backgroundMode “, „ clearColor “ und „ tonemapMode “ festgelegt. Zudem wird „ glow “ aktiviert. Das Hinzufügen von Nachbearbeitungseffekten wie einem Leuchteffekt erfordert die Einstellung des Tonwertumwandlungsmodus auf „ TonemapModeNone “.

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

Um den Glüheffekt verstärkt zu gestalten, werden mehrere weitere zugehörige Eigenschaften festgelegt.

Beispielprojekt @ code.qt.io