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!

gauge.png

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

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

            }
        }
    }
}

To copy to clipboard, switch view to plain text mode 

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

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

To copy to clipboard, switch view to plain text mode 

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

gauge2.jpg

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

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

To copy to clipboard, switch view to plain text mode 

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

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

To copy to clipboard, switch view to plain text mode 

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

Cheers,
_