Making an array of rectangles
-
wrote on 27 Sept 2018, 07:15 last edited by
Hi all, sorry I looked through the documentations as best as I could. I'm trying to make an array of rectangles inside a rectangle object (so I can manipulate them later). But I keep getting a syntax error.
import QtQuick 2.0 import org.kde.plasma.core 2.0 as PlasmaCore Rectangle { id: page; width: 1920; height: 1080; color: "gray" property var myArray: [ Rectangle { id: rect1; width: parent.width * 0.07; height: parent.height * 0.4; color: "black"; } ]; }
I've tried just
var myArray = [ Rectangle{}]
but this gives a "javascript outside of script object" error as well as wrapping the Rectangle in the array inside{}
e.g.myArray: [ { Rectangle {}} ]
but it still complains "Expected token:' & Expected token
,'
"
Any idea what I'm doing wrong?Thanks!
-
Hi all, sorry I looked through the documentations as best as I could. I'm trying to make an array of rectangles inside a rectangle object (so I can manipulate them later). But I keep getting a syntax error.
import QtQuick 2.0 import org.kde.plasma.core 2.0 as PlasmaCore Rectangle { id: page; width: 1920; height: 1080; color: "gray" property var myArray: [ Rectangle { id: rect1; width: parent.width * 0.07; height: parent.height * 0.4; color: "black"; } ]; }
I've tried just
var myArray = [ Rectangle{}]
but this gives a "javascript outside of script object" error as well as wrapping the Rectangle in the array inside{}
e.g.myArray: [ { Rectangle {}} ]
but it still complains "Expected token:' & Expected token
,'
"
Any idea what I'm doing wrong?Thanks!
wrote on 27 Sept 2018, 07:42 last edited by@FrostedCookies Hi,
What do you mean by "manipulate them later" ? What is your goal ?
You may try this, but I'm not sure it's a good solution, you may want to set
visible
to false forrect1
,rect2
andrect3
:Rectangle { id: page; width: 1920; height: 1080; color: "gray" Rectangle{id: rect1; width: 10; height: 10} Rectangle{id: rect2; width: 10; height: 10} Rectangle{id: rect3; width: 10; height: 10} property var myArray: [] Component.onCompleted: { myArray.push(rect1); myArray.push(rect2); myArray.push(rect3); } }
Another solution could be to create
Rectangle
items dynamically when needed. But again that depends of what you want to achieve.Component{ id: rectComponent Rectangle{ width: 10; height: 10 } } //Then when a Rectangle is necessary var component = Qt.createComponent(rectComponent); myArray.push(component)
-
you can do
property list<Rectangle> myArray: [ Rectangle { id: rect1; width: parent.width * 0.07; height: parent.height * 0.4; color: "black"; }, Rectangle {} ]
I am not sure how you want to use it thought.
I believe there is a better solution to what you want to do, can you explain us what is your goal? -
@FrostedCookies Hi,
What do you mean by "manipulate them later" ? What is your goal ?
You may try this, but I'm not sure it's a good solution, you may want to set
visible
to false forrect1
,rect2
andrect3
:Rectangle { id: page; width: 1920; height: 1080; color: "gray" Rectangle{id: rect1; width: 10; height: 10} Rectangle{id: rect2; width: 10; height: 10} Rectangle{id: rect3; width: 10; height: 10} property var myArray: [] Component.onCompleted: { myArray.push(rect1); myArray.push(rect2); myArray.push(rect3); } }
Another solution could be to create
Rectangle
items dynamically when needed. But again that depends of what you want to achieve.Component{ id: rectComponent Rectangle{ width: 10; height: 10 } } //Then when a Rectangle is necessary var component = Qt.createComponent(rectComponent); myArray.push(component)
wrote on 28 Sept 2018, 05:40 last edited by@Gojir4 and @GrecKo Thank you so much for your reply. I was just playing around trying to make a dynamic background for my KDE desktop (and to share if it ends up looking good!) and it seems to use QML.
The first rectangle is the screen (Hence the 1920x1080). The next set of rectangles (which will be of different size) I want to make randomly appear and disappear. I'd like to have a lot of rectangles at some point and move them from one array where they're "hidden" to another array where they're visible and randomly select rectangles from the hidden array to become visible and vice-versa (visible to hidden) on a timer. That's the goal anyway. But I was having trouble just making an array of rectangles to start with :)
-
@Gojir4 and @GrecKo Thank you so much for your reply. I was just playing around trying to make a dynamic background for my KDE desktop (and to share if it ends up looking good!) and it seems to use QML.
The first rectangle is the screen (Hence the 1920x1080). The next set of rectangles (which will be of different size) I want to make randomly appear and disappear. I'd like to have a lot of rectangles at some point and move them from one array where they're "hidden" to another array where they're visible and randomly select rectangles from the hidden array to become visible and vice-versa (visible to hidden) on a timer. That's the goal anyway. But I was having trouble just making an array of rectangles to start with :)
wrote on 28 Sept 2018, 05:47 last edited by@FrostedCookies Hi,
You may achieve this with a Repeater
Grid{ anchors.centerIn: parent columns: 5 Repeater{ id: rep model: 25 Rectangle{ width: rect.width * 0.2 height: rect.height * 0.2 color: Qt.hsla(index / rep.count, 1, 0.5, 1) } } }
If you want to make something smooth, with some animations (I guess you're making something like a live wallpaper) I would suggest to use the QML Particles for that.
-
@Gojir4 and @GrecKo Thank you so much for your reply. I was just playing around trying to make a dynamic background for my KDE desktop (and to share if it ends up looking good!) and it seems to use QML.
The first rectangle is the screen (Hence the 1920x1080). The next set of rectangles (which will be of different size) I want to make randomly appear and disappear. I'd like to have a lot of rectangles at some point and move them from one array where they're "hidden" to another array where they're visible and randomly select rectangles from the hidden array to become visible and vice-versa (visible to hidden) on a timer. That's the goal anyway. But I was having trouble just making an array of rectangles to start with :)
wrote on 28 Sept 2018, 11:37 last edited by@FrostedCookies About the hidden/visible animation
You may achieve what you want with QML Animation
Here some simple exampleRectangle{ id: rect anchors.centerIn: parent width: 200 height: 200 color: "black" Grid{ anchors.centerIn: parent columns: 5 Repeater{ id: rep model: 25 Rectangle{ width: rect.width * 0.2 height: rect.height * 0.2 SequentialAnimation{ running: true loops: Animation.Infinite NumberAnimation{ target: parent property: "opacity" duration: Math.random(3000) + 100 * index from: 0.0 to: 1.0 easing.type: Easing.InOutQuad } NumberAnimation{ target: parent property: "opacity" duration: Math.random(3000) + 100 * index from: 1.0 to: 0.0 easing.type: Easing.InOutQuad } } color: Qt.hsla(index / rep.count, 1, 0.5, 1) } } } }
-
@Gojir4 and @GrecKo Thank you so much for your reply. I was just playing around trying to make a dynamic background for my KDE desktop (and to share if it ends up looking good!) and it seems to use QML.
The first rectangle is the screen (Hence the 1920x1080). The next set of rectangles (which will be of different size) I want to make randomly appear and disappear. I'd like to have a lot of rectangles at some point and move them from one array where they're "hidden" to another array where they're visible and randomly select rectangles from the hidden array to become visible and vice-versa (visible to hidden) on a timer. That's the goal anyway. But I was having trouble just making an array of rectangles to start with :)
wrote on 28 Sept 2018, 16:18 last edited by@FrostedCookies
What you are describing sounds like a particle system. I agree with @Gojir4 , check out the Qt Quick Particle System. -
@FrostedCookies Hi,
What do you mean by "manipulate them later" ? What is your goal ?
You may try this, but I'm not sure it's a good solution, you may want to set
visible
to false forrect1
,rect2
andrect3
:Rectangle { id: page; width: 1920; height: 1080; color: "gray" Rectangle{id: rect1; width: 10; height: 10} Rectangle{id: rect2; width: 10; height: 10} Rectangle{id: rect3; width: 10; height: 10} property var myArray: [] Component.onCompleted: { myArray.push(rect1); myArray.push(rect2); myArray.push(rect3); } }
Another solution could be to create
Rectangle
items dynamically when needed. But again that depends of what you want to achieve.Component{ id: rectComponent Rectangle{ width: 10; height: 10 } } //Then when a Rectangle is necessary var component = Qt.createComponent(rectComponent); myArray.push(component)
wrote on 16 Oct 2018, 22:51 last edited by@Gojir4 Thank you for this reply. I've been making good progress. However, I'm hitting an error where I've added about 2500 rectangles and when I pass a certain number, the qmlscene segfaults. Is there a limit to the number of objects or is there a parameter I haven't set correctly?
Thanks!
-
@Gojir4 Thank you for this reply. I've been making good progress. However, I'm hitting an error where I've added about 2500 rectangles and when I pass a certain number, the qmlscene segfaults. Is there a limit to the number of objects or is there a parameter I haven't set correctly?
Thanks!
wrote on 17 Oct 2018, 09:44 last edited by@FrostedCookies Are you talking about Particles ? Repeater ? Can you please be more specific