slider control

[sajis997]

Hello forum,

I am trying to render a qml slider on top of the translucent rectangle as follows:




Rectangle {
id: rect
width: parent.width/2; height: parent.height/5
color: "red"
radius: 10
opacity: 0.1
border.color: "black"


Slider {
id: outerTessellationSlider
activeFocusOnPress: true
minimumValue: 1.0
maximumValue: 64.0
stepSize: 1.0
tickmarksEnabled: true

}

}



As you can see i have define quite a few properties for the slider, but none of them seems to be in effect. I have enabled the tick marks , but it is not visible. I have set the minimum and maximum value , but slider remains in the same size. What may be the reason behind this ?

Thanks

[anda_skoa]

Your slider does not have any width or height set and is not resized by a layout or anchors either.

tick marks might be style dependent or not visible in your case because you only have an opacity value of 0.1

Cheers,
_

[sajis997]

is it possible to override some of the properties in parent. The opacity value for the rectangle is set to 0.1. Will this value be over-ridden if I set the opacity to some thing else ? I tried and it is not working.

Any hint ?

[anda_skoa]

Opacity, like transformation properties (scale, rotation) apply to the whole sub tree starting at the element that has them.

Basically the respective properties of the children are relative to the parent.

If you want a full opaque slider on a partly transparent rectangle do not make the silder a child of the rectangle.

E.g. make them siblings

Cheers,
_

[sajis997]

can you refer me to any example code to get hint from ?

[anda_skoa]

Item {
Rectangle {
opacity: 0.1
}
Slider {
}
}


Cheers,
_

[sajis997]

Your slider does not have any width or height set and is not resized by a layout or anchors either.

The width and height property are not even defined , as I looked up in the documentaion.

I am using Qt 5.2 with QtQuick.Controls 1.1.

[wysota]

The width and height property are not even defined

Width and height properties are defined in Item element type which the slider is a descendent of.

[sajis997]

I better explain more over the issues of designing the user interface. I have already had the opengl scene as an underlay and i am trying to have the UI grouped into a translucent (opacity : 0.1) and rounded rectangle.

I want to have two sliders along with two text items well-aligned in a grid-layout and stuffed inside the translucent rectangle. Initially i had all the items inside the rectangle and i found that the transparentcy that is applied to the rectangle is also applied to all the of the children. This is not what i wanted. Then i was suggested that i should put the items(Text, and Slider) as siblings instead of children. Now how should I align the grid layout with the rectangle so that it moves along with the rectangle ?

[wysota]

Now how should I align the grid layout with the rectangle so that it moves along with the rectangle ?
Exactly the same way as you did before. Just instead of wrapping your items in a semi-transparent rectangle, wrap them in an invisible item and make that item sibling of the rectangle and make it same size as the rectangle.


Rectangle {
id: background

opacity: 0.1
radius: 20
border { width: 1; color: "black" }
color: "gray"
anchors.fill: controlLayout
}

GridLayout {
id: controlLayout

columns: 2
Text { "Slider1:" }
Slider { ... }
Text { "Slider2:" }
Slider { ... }
}

[anda_skoa]

Now how should I align the grid layout with the rectangle so that it moves along with the rectangle ?
Or you don't do that, have both children anchored to the parent and move the parent.

Cheers,
_

[sajis997]

HelLo Forum,

I am trying to relocate the rectange with the following command :



Rectangle {
id: rect
x: -100
color: "red"
radius: 10
opacity: 0.1
border.color: "black"
anchors.fill: controlLayout
}


But the rectange is not moving at all, it is pinned at the left corder of the window. Here goes the contents of the whole .qml file.



import QtQuick 2.0
import QtQuick.Controls 1.1
import QtQuick.Layouts 1.1
import TeapotTessellation 1.0

Item {
id: root
width: 512; height: 512

Text {
text: "F1 - Show/Hide Settings"
font.pixelSize: 15
anchors.top: parent.top
anchors.topMargin: 15
anchors.right: parent.right
anchors.rightMargin: 15
opacity: 0.5
}

TessellationSceneItem
{
id: tessSceneItem
}

GridLayout {
id: controlLayout
columns: 2

Text {
id: outerTessellationText
text: qsTr("Outer Tessellation Factor: ")
color: "black"
opacity: 1.0
}

Slider {
id: outerTessellationSlider
opacity: 1.0
minimumValue: 1.0
maximumValue: tessSceneItem.maxTessLevel
stepSize: 1.0
Layout.fillWidth: true

onValueChanged: tessSceneItem.outer = value
}


Text {
id: innerTessellationText
text: qsTr("Inner Tessellation Factor: ")
color: "black"
opacity: 1.0
}



Slider {
id: innerTessellationSlider
opacity: 1.0

minimumValue: 1.0
maximumValue: tessSceneItem.maxTessLevel
stepSize: 1.0
Layout.fillWidth: true

onValueChanged: tessSceneItem.inner = value
}
}


Rectangle {
id: rect
x: -120
color: "red"
radius: 10
opacity: 0.1
border.color: "black"
anchors.fill: controlLayout

}

}

[anda_skoa]

The rectangle has "anchors.fill", it will fill the given reference element.

Btw, your onValueChanged handlers could be replaced by property bindings on the target element.

Cheers,
_

[sajis997]

The rectangle has "anchors.fill", it will fill the given reference element.

Did you mean that the rectangle and the controlLayout will have the same geometry ? I believe it is as mentioned in the documentation.

Is this the reason that the rectangle is not moving even after the attempt of relocation ?


Btw, your onValueChanged handlers could be replaced by property bindings on the target element.

Is this the suggestion for improvement or the reason behind the issue I am trying to address ?

Thanks

Cheers,

[anda_skoa]

Did you mean that the rectangle and the controlLayout will have the same geometry ?

Yes



Is this the reason that the rectangle is not moving even after the attempt of relocation ?

Yes.

"Filling" is a pretty clear instructions, it tells the element to have exactly the same geometry as the other one.

This is not a Schrödinger experiement :)
The rectangle can either fill the reference element or it can not.
If you tell it to fill, then you've made your choice.



Is this the suggestion for improvement or the reason behind the issue I am trying to address ?


Suggestion for improvement, unrelated to this.

Cheers,
_

[sajis997]

Let me re-iterate my goal here. I am trying to use the springanimation over the rectangle that in turn contains the several elements in grid layout. As you mentioned in your previous post that the reason behind that the rectangle is not moving is :




anchors.fill = <id To the gridlayout>


Do you have any hint to achieve this small goal - bring in the UI elements arranged in grid layout by spring animation ?

Thanks

[anda_skoa]

I didn't see any spring animation mentioned before.

So do you want to move the rectangle and the grid together or independently?

Cheers,
_

[sajis997]

I did not code anything related to the spring animation yet. I have the following idea :

1. You have already seen code snippets related to the UI(Text and Slider) arranged in grid layout and the translucent rectangle contains the layout in the following manner. I am not sure if I should mention the word "contain".



Rectangle {
id: rect
color: "red"
radius: 10
opacity: 0.1
border.color: "black"
anchors.fill: controlLayout
}


2. Initially the UI will not be visible when the application launches. It shows up with the key-press event. It shows up using the sping animation. If the user press a certain it checks if the UI is already visible or not. If it already visible, the UI hides.

3. I am not sure which is the efficient one to move - the rectangle or the grid layout ?


There may be better way to achieve what I am trying to.


Thanks

Thanks

[anda_skoa]

3. I am not sure which is the efficient one to move - the rectangle or the grid layout ?


Assuming this is the answer to my previous question, you do want to move only one of them.
In this case you can't use anchors, because anchors make elements stick together.

Cheers,
_

[sajis997]

What does it exactly mean with the following code snippet:



anchors.fill = <id To the gridlayout>


Consider the fact the we have already defined the layout. Does the above statement mean any of the following:

1. The grid layout is stick to the rectangle or the other way around.

If the grid layout is stick to the rectangle , should it be problem to move it ?

If not, then , how would you suggest to get it fixed ?

Thanks

[wysota]

It means nothing as the expression is likely invalid. If it works, then it will once resize the current item to the other item at the moment when the expression is evaluated (provided that no contradictory anchors are defined for the item) which is probably not what you want.

I would like to point out we still don't know what you are trying to do so it is quite demanding to suggest a solution to an unknown problem.

[anda_skoa]

Consider the fact the we have already defined the layout.

The fact that the rectangle has a sibling item?



Does the above statement mean any of the following:

1. The grid layout is stick to the rectangle or the other way around.

"fill" is basically a shortcut for



anchors {
left: other.left
right: other.right
top: other.top
bottom: other.bottom
}




If the grid layout is stick to the rectangle , should it be problem to move it ?

Try that with real world objects:
- take a piece of paper
- glue it onto another piece of paper
- now try to move one while not moving the other.



If not, then , how would you suggest to get it fixed ?


Since they are independent, position them independently.

Cheers,
_

[sajis997]

Please Check the following screen-shot:

http://imgur.com/VM007Cz

Do you see the UI(slider and text arranged in the grid layout) at the top left corner of the window ?


What i want to get is:

1. The UI will slide inside/outside of the window using the spring animation with the key press event (F1).

[anda_skoa]

So the rectangle and the grid are not independent?

Then your answer is in comment #6

Cheers,
_

P.S.: and in general it would be really helpful if you actually read what people are writing, i.e. answering question instead of ignoring everything and writing vague randomness

[wysota]

What i want to get is:

1. The UI will slide inside/outside of the window using the spring animation with the key press event (F1).

So what exactly is the problem and how is it related to anything written so far in this thread? Either use a Behavior or states with a transition.