QML property problems



  • Hello dear Community,

    im pretty new to QML and JS aswell.
    All i want to do is sending my QMLapp a bunch of paint that the app should connect to a line.
    the points are coming from an c++ file send via a Signal.

    function createLine(x,y,u,v)
       {
               var com = Qt.createComponent("Circle.qml");
               touch.spri2 = com.createObject(touch, {"x": x-5, "y": y-5, width:10, height:10});
               touch.xs: x
               touch.ys: y
               touch.us: u
               touch.vs: v
                    var newObject = Qt.createQmlObject('
                            import QtQuick 2.0
                            Canvas {
                                width: 2000; height: 2000
                                onPaint: {
                                    var ctx = getContext("2d")
    
                                    // setup the stroke
                                    ctx.strokeStyle = "red"
    
                                    // create a path
    
                                    ctx.beginPath()
                                    ctx.moveTo(touch.xs,touch.ys)
                                    ctx.lineTo(touch.us,touch.vs)
    
                                    // stroke path
                                    ctx.stroke()
                                }
                            }',touch,'linesegment');
                   lineArray.push(newObject);
                   console.log("line from ", xs, ys," to ",us,vs );
       }
    

    thats what i want to do, sadly qml tells me that
    "JavaScript declaration outside Script element"
    are not allowed so i safed the values to propertys of my parent object.
    When i do that all linsegments are gettint updated i cahnge the property so in the end i only got all line laying over each other.

    What can i do? If there is a better way please tell me i feel guilty for not learning qml properly but its only a little part of a big project and i just want o "get it done".
    Thank you in advance


  • Moderators

    @Reudi This binding is not allowed in JS:

    touch.xs: x
    touch.ys: y
    touch.us: u
    touch.vs: v
    

    Use assignment = instead.



  • Oh silly me,

    the coded i posted isnt what i used
    i used the '=' but still get the "JavaScript declaration outside Script element" error msg


  • Moderators

    Ok. Does it print the line number along with that error?



  • Thank you for your help im sorry for my amateurish behaviour.
    Thats all the code
    the error is refering to the var xs, var ys ect line(i marked them with arrows)

    Rectangle {
            property var component2
            property var spri2
            property variant pointArray: []
            property variant otherPointArray: []
            property variant lineArray: []
    
            id: touch
            var xs<---
            var ys<--
            var us<--
            var vs<--
            width:Screen.desktopAvailableWidth; height: Screen.desktopAvailableHeight
            color: "lightgray"
            MouseArea{
            id: clickArea
            anchors.fill: parent
            onClicked:{
                //console.log("x is ", mouse.x, " y is", mouse.y);
                var componentos;
                       var sprite;
                componentos = Qt.createComponent("Circle.qml");
                sprite = componentos.createObject(touch, {"x": mouse.x-20, "y": mouse.y-20})
                pointArray.push(sprite)
                if(pointArray.length>5){
                    //console.log("pressedhold:x is ", mouse.x, " y is", mouse.y);
                    sprite = pointArray[0]
                    sprite.destroy()
                    pointArray = pointArray.slice(1,6)
                }
                connector.sendToClient(mouse.x,mouse.y);
    
    
            }
            onPressed:{
                //console.log("pressed:x is ", mouse.x, " y is", mouse.y);
    
            }
            onReleased:{
              //  console.log("released:x is ", mouse.x, " y is", mouse.y);
                connector.finishedLine();
            }
            onPositionChanged:{
                //console.log("pressedhold:x is ", mouse.x, " y is", mouse.y);
                connector.createLine(mouse.x,mouse.y);
            }
            Connections {
                target: connector
                onDrawPoint: {
                    component2 = Qt.createComponent("Circle.qml");
                    finishCreation(x,y)
                }
                onDrawLine:
                {
                    createLine(first.x,first.y,second.x,second.y)
               }
          }
    }
       function finishCreation(x,y) {
                if (touch.component2.status == Component.Ready) {
                        touch.spri2 = component2.createObject(touch, {"x": x, "y": y, width:10, height:10});
                        if (touch.spri2 == null) {
                            // Error Handling
                            console.log("Error creating object");
                         }
                        //spri.w
                        touch.spri2.cellColor = "steelblue"
                        touch.spri2.borderColor = "green"
                        otherPointArray.push(touch.spri2)
                        if(otherPointArray.length>5){
                            touch.spri2 = otherPointArray[0]
                            touch.spri2.destroy()
                            otherPointArray = otherPointArray.slice(1,6)
                        }
                    } else if (touch.component2.status == Component.Error) {
                        // Error Handling
                        console.log("Error loading component:", touch.component2.errorString());
                    }
            }
       function createLine(x,y,u,v)
       {
               var com = Qt.createComponent("Circle.qml");
               touch.spri2 = com.createObject(touch, {"x": x-5, "y": y-5, width:10, height:10});
               touch.xs = x
               touch.ys = y
               touch.us = u
               touch.vs = v
                    var newObject = Qt.createQmlObject('
                            import QtQuick 2.0
                            Canvas {
                                width: 2000; height: 2000
                                onPaint: {
                                    var ctx = getContext("2d")
    
                                    // setup the stroke
                                    ctx.strokeStyle = "red"
    
                                    // create a path
    
                                    ctx.beginPath()
                                    ctx.moveTo(touch.xs,touch.ys)
                                    ctx.lineTo(touch.us,touch.vs)
    
                                    // stroke path
                                    ctx.stroke()
                                }
                            }',touch,'linesegment');
                   lineArray.push(newObject);
                   console.log("line from ", xs, ys," to ",us,vs );
       }
    }
    

    Edit: added code tags - p3c0


  • Moderators

    @Reudi So as the error says these JS variable are allowed only in JS scope. For eg. in a JS function. Convert them into property just like you did for other variables.

    property var xs
    


  • yeah i did that awell.
    my problem is when i use propertys they will upadte the path every time i change them.
    so in the end i only got many line segment objects laying over each other


  • Moderators

    @Reudi Meaning?



  • what i want is something like this
    .-.-.-.-.-.-.

    every dot is connected by a line but if i use propertys all i get is this

    . . . . . . .-.

    my guess is, that when i use propertys to declare my path and i update such propertys the line segemnts i already created getting updated aswell.

    so that every line segment is laying on top of each other.

    i hope i did explain my self properly


  • Moderators

    If you have bonded that property with other then it will update.


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.