Ecuaciones matemáticas

Ecuaciones matemáticas muestra cómo visualizar ecuaciones matemáticas en QML con todos los tipos de gráficos disponibles. También muestra cómo integrar la escena QtQuick3D en un gráfico y cómo ajustar la perspectiva del gráfico utilizando ExtendedSceneEnvironment.

Para obtener más información sobre la funcionalidad básica de la aplicación QML, consulte Simple Scatter Graph.

Ejecución del ejemplo

Para ejecutar el ejemplo desde Qt Creatorabra el modo Welcome y seleccione el ejemplo de Examples. Para obtener más información, consulte Qt Creator: Tutorial: Construir y ejecutar.

Configuración

Los datos de todos los tipos de gráficos pueden almacenarse en un ListModel común:

ListModel {
    id: dataModel
}

El modelo se configura para cada tipo de gráfico en la serie de gráficos:

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 configuración de las funciones permite que los datos del modelo se asignen automáticamente a los ejes correspondientes.

Análisis de la ecuación

La ecuación puede escribirse en el campo de texto utilizando los siguientes operadores y funciones matemáticas, así como los caracteres necesarios para utilizar dichas funciones:

Hay soporte para x y y como los parámetros, ya que los datos manejados tienen dos ejes y el valor. La ecuación puede tener espacios alrededor de los operadores, por lo que los dos estilos siguientes están bien:

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

La ecuación se analiza utilizando un analizador de ecuaciones y calculadora de JavaScript, que se importa a QML:

import "calculator.js" as Calc

La calculadora fue publicada en Stack Overflow por tanguy_k en TypeScript, y ha sido convertida a JavaScript para poder ser usada desde QML.

Los parámetros de la ecuación se rellenan cada vez que cambia la ecuación o se actualizan los recuentos de columnas o filas.

Bucle de filas y columnas:

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

Rellenando los valores de x y y:

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

A continuación, la ecuación se pasa a la calculadora JavaScript para obtener el resultado, que luego se añade al modelo de datos insertándolos en los roles definidos:

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

En caso de que haya un error o un operador o función matemática desconocidos en la ecuación, se captura el error lanzado por la calculadora, y se muestra un diálogo de error:

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

Visualización del mensaje de error de la calculadora:

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

Gráficos

Se utiliza el mismo modelo de datos para los tres tipos de gráficos. Sin embargo, hay algunas diferencias entre la configuración de los gráficos.

Superficie

El gráfico de superficie se utiliza para mostrar los datos sin ninguna modificación específica. Muestra la ecuación en cada fila y columna con el resultado del cálculo.

Los únicos cambios realizados son la configuración de los segmentos de los ejes:

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

Se establece un gradiente de rango para el tema para resaltar los valores altos y bajos:

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

El propio gradiente se define en otro lugar para que pueda ser utilizado por otros temas.

Barras

Para las barras, también se utiliza un gradiente de rango. El degradado utiliza una ligera transparencia para facilitar la visualización de los valores sin rotar demasiado el gráfico. Se ha añadido un control deslizante para controlar el nivel de transparencia.

Dispersión

Para la dispersión, el tema se ajusta un poco más en preparación para las integraciones QtQuick3D.

En primer lugar, se utilizará un gradiente diferente de los otros dos. Luego, se fuerza un esquema de color oscuro, a diferencia de los otros dos, que usan la preferencia del sistema. Por último, el fondo del área de trazado, las etiquetas y la rejilla se ocultan estableciendo su visibilidad en false.

El gráfico de dispersión es bueno para mostrar un gran número de puntos de datos, por lo que se añaden 3 puntos de datos por cada "fila" y "columna". La dispersión no tiene el concepto de filas y columnas, que es por lo que esto se puede hacer:

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

Debido a que el gráfico de dispersión tiene muchos más puntos de datos que los otros dos gráficos, es mejor utilizar el mesh type más ligero disponible para los puntos:

mesh: Abstract3DSeries.Mesh.Point

Integrando una escena QtQuick3D

Para encontrar los tipos de QtQuick3D, hay que importarla en el QML:

import QtQuick3D

Una escena QtQuick3D puede ser importada al gráfico usando la propiedad importScene. La escena puede ser una combinación de Models, Lights, reflection probes, y otros Nodes contenidos en una raíz Node. En este ejemplo, sólo se añade un rectángulo con un mapa de opacidad:

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

Cambiar la perspectiva utilizando QtQuick3D

Para que ExtendedSceneEnvironment se encuentre, es necesario realizar la siguiente importación:

import QtQuick3D.Helpers

Para anular el entorno de escena predeterminado del gráfico, se añade la propiedad environment con un ExtendedSceneEnvironment. En este caso, se establecen backgroundMode, clearColor y tonemapMode. Además, se activa glow. Para añadir efectos de post-procesado como el resplandor es necesario configurar el modo de mapa de tonos en TonemapModeNone.

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

Para que el resplandor sea más intenso, se definen otras propiedades relacionadas.

Proyecto de ejemplo @ code.qt.io