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
 
         }
 
    }

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

         }

    }

To copy to clipboard, switch view to plain text mode 

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 {
    }
}

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

To copy to clipboard, switch view to plain text mode 

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 { ... }
}

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 { ... }
}

To copy to clipboard, switch view to plain text mode 

[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
}

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

To copy to clipboard, switch view to plain text mode 

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
 
    }
 
}

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

    }

}

To copy to clipboard, switch view to plain text mode 

[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>

anchors.fill = <id To the gridlayout>

To copy to clipboard, switch view to plain text mode 

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
    }

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

To copy to clipboard, switch view to plain text mode 

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>

anchors.fill = <id To the gridlayout>

To copy to clipboard, switch view to plain text mode 

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