Unsolved 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 -
@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 -
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
-
@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 -
@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
-
If you have bonded that property with other then it will update.