QML property problems

Reudi

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

p3c0

@Reudi This binding is not allowed in JS:

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

Use assignment = instead.

Reudi

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

p3c0

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

Reudi

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

p3c0

@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

Reudi

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

p3c0

@Reudi Meaning?

Reudi

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

p3c0

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