How to manage "Z" globally in QML?

Sil20

Hi I would like to be abble to simulate a variation of the ambiante light.
I am displaying instruments like indicatore and LEDs. So I was thinking of adding a Black rectangle with the OPACITY set to 0.6. on top: "Z:45"

But some of the item I display include LEDs which should not be darken by the black rectangle. but is I set "Z:100" on the LED which is included into an Item, it does not work because in my opinion Z is not manage globally but only inside the same Item

Simply speaking, in the following example, I would like the Pink Rectangle to be between the blue and the green WITHOUT changing the structure.

@ Item {

    Rectangle {
        id:ired
        color: "red"
        width: 100; height: 100
        z:50
    }
    Rectangle {
        id:iblue
        color: "blue"
        x: 50; y: 50; width: 100; height: 100
        z:50
    }
    Rectangle {
        id:igreen
        color: "green"
        x: 75; y: 75; width: 100; height: 100
        z:100
    }
}

Rectangle {
id:ipink
color: "pink"
opacity:0.6
width: 200; height: 200
z:60
}@

daliusd

Here documentation http://doc.qt.digia.com/stable/qml-item.html#z-prop:

"Sets the stacking order of sibling items. By default the stacking order is 0."

That means you can only set Rectangle's stacking order vs Item (not vs. Item's children).

sierdzio

@
Rectangle {
id:ipink
// ...
z: iblue.z + 1
}
@

No need to set them artificially big, QML manages z-index automatically.

Sil20

No this does not work!

[quote author="sierdzio" date="1359724895"]@
Rectangle {
id:ipink
// ...
z: iblue.z + 1
}
@

No need to set them artificially big, QML manages z-index automatically.[/quote]

daliusd

[quote author="Sil20" date="1359725978"]No this does not work!

[quote author="sierdzio" date="1359724895"]@
Rectangle {
id:ipink
// ...
z: iblue.z + 1
}
@

No need to set them artificially big, QML manages z-index automatically.[/quote]

[/quote]

It shouldn't :-) Maybe using createQmlObject would work for you?

Sil20

[quote author="daliusd" date="1359724462"]Here documentation http://doc.qt.digia.com/stable/qml-item.html#z-prop:

"Sets the stacking order of sibling items. By default the stacking order is 0."

That means you can only set Rectangle's stacking order vs Item (not vs. Item's children).[/quote]

So I cannot do what I would like to....

Is there a way to set a child component to TopMost??Like
@Item {

    Rectangle {
        id:ired
        color: "red"
        width: 100; height: 100
        z:50
    }
    Rectangle {
        id:iblue
        color: "blue"
        x: 50; y: 50; width: 100; height: 100
        z:50
    }
    Rectangle {
        id:igreen
        color: "green"
        x: 75; y: 75; width: 100; height: 100
        z:"TopoMost"
    }
}

Rectangle {
id:ipink
color: "pink"
opacity:0.6
width: 200; height: 200
z:60
}@

daliusd

[quote author="Sil20" date="1359726252"]
So I cannot do what I would like to....

Is there a way to set a child component to TopMost??
[/quote]

Z order will be relevant only relative to other siblings. If you want igreen to be above ipink you should set higher z value for igreen's parent (Item).

I'm not sure why you don't want to include ipink into Item.

Sil20

Z order will be relevant only relative to other siblings. If you want igreen to be above ipink you should set higher z value for igreen's parent (Item).

I'm not sure why you don't want to include ipink into Item.[/quote]

My purpose is to simulate REal Hardware Panels including Buttons, indicators LEDs...
I defined a Template Screen ScreenBase.qml which contains one Rectangle to add shadow effect

Then I have many ScreenBase type elements which contains many types of items.
Some of those Items contains LEDs.

The shadow Efect is managed Globally by making the ShadowRectangle Visible or not on top of averything (z:40), but the LEDs should not be impact by the shadow since a LED produce its own light.

To make a parallel with the pink rectangle, since I have hundreds of element types, I do not want to included the shadow in all type of elements. Just "make something special" for the Lightemmitting items to be on top of the ShadowRectangle...

daliusd

[quote author="Sil20" date="1359731321"]
To make a parallel with the pink rectangle, since I have hundreds of element types, I do not want to included the shadow in all type of elements. Just "make something special" for the Lightemmitting items to be on top of the ShadowRectangle...[/quote]

In that case use JavaScript. Iterate over children in your ScreenBase and add ShadowRectangle to each element. I believe that's the only way to accomplish this if you don't want to modify all elements for this task.

Sil20

Is it possible to "make holes" in a rectangle??

daliusd

[quote author="Sil20" date="1359735413"]Is it possible to "make holes" in a rectangle??[/quote]

No. That's not possible. Basically you lay your items on top of each other. If you want to make rectangle with hole you basically should create frame from 4 rectangles and you will have rectangle with hole. You should be creative here.