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 

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

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,
_