QML Qt.binding with toFixed not working

Slash200 · 26 Mar 2018, 07:53

Hello,

I have a property in a QML object that is set by a JS:

Qt.binding(function(){return SetValueObject[SetValueProperty]  + setUnit})

I want to use toFixed but this is not working:

Qt.binding(function(){return SetValueObject[SetValueProperty].toFixed(setDecimals)  + setUnit})

What am I doing wrong?

best regards
Bastian

raven-worx · wrote on 26 Mar 2018, 07:53

@Slash200 said in QML Qt.binding with toFixed not working:

I want to use toFixed but this is not working

I would be much of a help when you also tell "what" is not working.

Slash200 · 26 Mar 2018, 08:13

When using

Qt.binding(function(){return SetValueObject[SetValueProperty].toFixed(setDecimals)  + setUnit})

it is showing nothing in the QML Gui.

raven-worx · wrote on 26 Mar 2018, 08:13

@Slash200
what does the console window say?

Slash200 · 26 Mar 2018, 18:36

It says TypeError: Cannot call method 'toFixed' of undefined

raven-worx · wrote on 26 Mar 2018, 18:36

@Slash200
so then either SetValueObject is not set or there is no property with the name of SetValueProperty.
What is the type of SetValueProperty?

Slash200 · 27 Mar 2018, 08:38

It's working fine, just when using .toFixed it isn't working anymore.
Here is the qml that is created from the JS:

import QtQuick 2.8
import QtGraphicalEffects 1.0
import QtQuick.Controls 2.1
import QtQuick.Controls.Styles 1.4
import QtQuick.Extras 1.4



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

        property alias gaugetext: gaugetextfield.text
        property alias gaugevalue: gauge.value
        property alias gaugemaxvalue: gauge.maximumValue
        property alias gaugeminvalue: gauge.minimumValue



        MouseArea {
                  id: mouseArea
                  width: parent.width
                  height: parent.height + 10 // easier to get
                  anchors.centerIn: parent
                  //drag.target: parent
                  //drag.axis: Drag.XAndYAxis
                  //onClicked: touchmenu.popup(mouseX, mouseY)
                }

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

            //value: Dashboard.MAP
            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:  20
                    color: Qt.rgba(gauge.value / gauge.maximumValue, 0, 1 - gauge.value / gauge.maximumValue, 1)
                }
            }
      }
}

And this is the JS that creates the object:

var component;
var gauge;

function createVerticalGauge(setWidth,setHeight,setX,setY,setMinValue,setMaxValue,setDecPlace,setUnit,setID,SetValueObject,SetValueProperty) {
    component = Qt.createComponent("verticalbargauge.qml");
    if (component.status == Component.Ready)
        finishCreation(setWidth,setHeight,setX,setY,setMinValue,setMaxValue,setDecPlace,setUnit,setID,SetValueObject,SetValueProperty);
    else
        component.statusChanged.connect(finishCreation);
}

function finishCreation(setWidth,setHeight,setX,setY,setMinValue,setMaxValue,setDecPlace,setUnit,setID,SetValueObject,SetValueProperty) {
    if (component.status == Component.Ready) {
        gauge = component.createObject(adaptronicDash, {"id": setID, "width": setWidth, "height": setHeight,
                                           "gaugemaxvalue": setMaxValue,
                                           "gaugeminvalue": setMinValue,
                                           "gaugetext": Qt.binding(function(){return SetValueObject[SetValueProperty] +  " " + setUnit}),
                                           "gaugevalue": Qt.binding(function(){return SetValueObject[SetValueProperty]}),
                                           "x": setX, "y": setY});
        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());
    }
}

This is working well, just when it change the line where gaugetext is set to ```

"gaugetext": Qt.binding(function(){return SetValueObject[SetValueProperty].toFixed(aValue) +  " " + setUnit}),

it throws this error.

Best regards
Bastian

J.Hilk · wrote on 27 Mar 2018, 08:38

@Slash200
hi, I stumpeld upon that myself, I think it's a limitation of QML, how many actions you can chain, or the execution order might be the problem.

double->int->string doesn't really work.

this workaround, should do the trick.

Qt.binding(function(){
    var stepInBetween = SetValueObject[SetValueProperty].toFixed(setDecimals);
    return stepInBetween + setUnit
})