QML return NaN on attribute set by Javascript

Question

I'm setting attributes of a QML object with java script on object creation. It is working fine except on one parameter that needs a number.

this calls the script:

Component.onCompleted: CreateVerticalGaugeScript.createVerticalGauge(300,10,300,300,"MAP",Dashboard,"MAP");

The 300 before "MAP" is the needed number. Everything else is working.

var component;
var gauge;
function createVerticalGauge(setWidth,setX,setY,setMaxValue,setID,SetValueObject,SetValueProperty) {
    component = Qt.createComponent("verticalbargauge.qml");
    console.log(setMaxValue)
    if (component.status == Component.Ready)
        finishCreation(setWidth,setX,setY,setMaxValue,setID,SetValueObject,SetValueProperty);
    else
        component.statusChanged.connect(finishCreation);
}

    function finishCreation(setWidth,setX,setY,setMaxValue,setID,SetValueObject,SetValueProperty) {
        console.log(setMaxValue)
        if (component.status == Component.Ready) {
            gauge = component.createObject(adaptronicDash, {"id": setID, "gaugemaxvalue": setMaxValue,
                                               "gaugetext": Qt.binding(function(){return SetValueObject[SetValueProperty]}),
                                               "x": setX, "y": setY});
            gauge.width = setWidth;
            if (gauge == null) {
                // Error Handling
                //console.log("Error creating object");
            }
        } else if (component.status == Component.Error) {
            // Error Handling
            //console.log("Error loading component:", component.errorString());
        }
    }

Now when the object is created it has the value NaN in QML. In jas console.log shows me that the value 300 is set.

This is the QML thats created:

import QtQuick 2.8
import QtQuick.Controls.Styles 1.4
import QtQuick.Extras 1.4
import QtQml.Models 2.2


Rectangle {
        id: initalID
        width: 100
        height: 80
        color: "transparent"
        antialiasing: false
        Drag.active: dragArea.drag.active

        property alias gaugetext: gaugetextfield.text
        property alias gaugemaxvalue: gauge.maximumValue

        MouseArea {
                  id: dragArea
                  width: parent.width
                  height: parent.height + 10 // easier to get
                  anchors.centerIn: parent
                  drag.target: parent
                  drag.axis: Drag.XAndYAxis
                  //onClicked: pieMenu.popup(mouseX, mouseY), console.log("clicked")
                }

        Gauge {
            id: gauge
            anchors.fill: parent
            anchors.margins: 10
            orientation : Qt.Horizontal
            minorTickmarkCount: 4
            tickmarkStepSize : 5000
            //labelStepSize: 50
            minimumValue: 0
            maximumValue: 10000

            //value: Dashboard.revs
            Behavior on value {
                NumberAnimation {
                    duration: 5
                }
            }
            Text {
                id: gaugetextfield
                font.pixelSize: (parent.height / 3)
                anchors.top : parent.top
                font.bold: true
                font.family: "Eurostile"
                color: "white"
                anchors.horizontalCenter: parent.horizontalCenter
            }
              style: GaugeStyle {
                valueBar: Rectangle {
                   implicitWidth:  rev.height /3
                    color: Qt.rgba(gauge.value / gauge.maximumValue, 0, 1 - gauge.value / gauge.maximumValue, 1)
                }
            }
      }
}

I use property alias gaugemaxvalue to access the value. If I set a number directly in the Javascript it is working.

Answer 1

You are setting Gauge maximumValue to 300 and tickmarkStepSize is 5000.

Test by changing maximumValue to 30000 or commenting out tickmarkStepSize.