Shrinking CircularGauge Area to Displayed Range?

[droneone]

Hi all,

When creating a CircularGauge, the CircularGauge element always consumes the total area as if the entire circle of the gauge were displayed, even if the minimumValue angle and maximumValueAngle combinations result in a half-circle or less.

Is there a way to force the CircularGauge element to take no more vertical room than required to display the visible portion of the gauge?

See, for example, the following image and code -- the desired outcome is that the black box stops at the bottom of the visible portion of the gauge, not where a full-circle gauge would have gone.

Thanks in advance for any advice!

12099



import QtQuick 2.5
import QtQuick.Window 2.2
import QtQuick.Controls 1.4
import QtQuick.Controls.Styles 1.4
import QtQuick.Extras 1.4
import QtQuick.Layouts 1.1
import QtQuick.Extras.Private 1.0

Window {
visible: true
width: 640
height: 480
title: qsTr("Hello World")

MainForm {
anchors.fill: parent


Column {

spacing: 2


Rectangle {
width: 400
height: 200
color: "#000000"

CircularGauge {

width: 400
height: 200

style: CircularGaugeStyle {
maximumValueAngle: 90
minimumValueAngle: -90


}
}
}


Rectangle {

color: "#ccffcc"
border.color: "black"

height: 75
width: 50

}
}
}
}

[anda_skoa]

The black box and the gauge have fixed sizes in your example, so that's how big they wil appear.

Cheers,
_

[droneone]

Having tried every possible combination of fixed and dynamic sizing of CircularGauge elements that I can think of, I have every single time been displayed an element that has 2x the height necessary to display the half-circle form of the gauge. Can you provide an example where the gauge's element would *not* be 2x the height of a half-circle gauge?

Or, to state another way - is there any way of having a half-circle CircularGauge filling the entire height of its element, rather than only half of the height.

See, for the following example, no size is specified, and yet the container ends up 2x the height of the half-circle gauge:



Window {
visible: true
width: 640
height: 480
title: qsTr("Hello World")

MainForm {
anchors.fill: parent


GridLayout {

id: gridlayout

columns: 1
rows: 2
anchors.fill: parent
Layout.margins: 0

Rectangle {

color: "#000000"
CircularGauge {

style: CircularGaugeStyle {
maximumValueAngle: 90
minimumValueAngle: -90


}
}
}


Rectangle {

color: "#ccffcc"
border.color: "black"

height: 50
width: 100
}
}
}
}

[anda_skoa]

A Rectangle without any size is usually not visible, but the GridLayout might set at least a width here.

If you make the Rectangle half the height of the gauge, it should end where you want it to end.

Cheers,
_

[droneone]

A Rectangle without any size is usually not visible, but the GridLayout might set at least a width here.

If you make the Rectangle half the height of the gauge, it should end where you want it to end.

Cheers,
_

... the problem is that at that point, the vertical height of the half-circle gauge is cut in half, leaving again, 50% of the element blank when drawing a half-circle gauge, no matter how small you make the element.

It turns out there's a very ugly, fairly hackish solution, which is to increase the scale of the circular gauge, and then offset it such that the center is where the bottom would be. You will need to ensure that clipping is on and that there is enough space between elements that the foreground of the gauge is not covered up. See:

12100



import QtQuick 2.5
import QtQuick.Window 2.2
import QtQuick.Controls 1.4
import QtQuick.Controls.Styles 1.4
import QtQuick.Extras 1.4
import QtQuick.Layouts 1.1
import QtQuick.Extras.Private 1.0

Window {
visible: true
width: 800
height: 480
title: qsTr("Hello World")

MainForm {
anchors.fill: parent

Column {
spacing: 20

Rectangle {
width: 800
height: 200
color: "#000000"

CircularGauge {
width: 800
height: 200
scale: 1.9
anchors.verticalCenter: parent.bottom
antialiasing: true

style: CircularGaugeStyle {
maximumValueAngle: 90
minimumValueAngle: -90

background: Rectangle {
color: "white"
}
}
}
}

Rectangle {
color: "#ccffcc"
border.color: "black"
height: 75
width: 500
}
}
}
}

[anda_skoa]

... the problem is that at that point, the vertical height of the half-circle gauge is cut in half, leaving again, 50% of the element blank when drawing a half-circle gauge, no matter how small you make the element.

Since there is nothing drawn in the lower half, it doesn't matter.
You seem to have changed the gauge to draw a background, so you jsut need to enable clipping on the properly sized parent.



Rectangle {
width: gauge.width
height: gauge.height / 2
clip: true
color: "black"

Rectangle { // using rectangle here instead of the gauge to simulate a circle
id: gauge
width: 400
height: width
radius: width / 2
color: "red"
}
}

This only shows the upper half of the inner rectangle, basically showing a half circle.

Cheers,
_