QML Gauge. How to make the indicator start from zero

[_cocaandcola_]

Hello! I have a gauge from -5000 to 5000. Please help me how to make it start filling from zero, not from -5000? At the moment it is filled from -5000 to 1000, and I need it to be from 0 to 1000 for example.

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.0
import QtQuick.Controls.Styles 1.4
import QtQuick.Extras 1.4
import QtQuick.Extras.Private 1.0
import QtGraphicalEffects 1.0

Window {
    id: winapp
    visible: true
    width: 1000
    height: 630
    color: "#1b2153"
    title: qsTr("FirstProject")

    Gauge {
        id: gauge1
        x: 20
        y: 53
        width: 44
        height: 547
        anchors.bottom: parent.bottom
        anchors.bottomMargin: 30
        value: 1000
        minimumValue: -5000
        maximumValue: 5000
        tickmarkStepSize: 500
        formatValue: function(value) {
            return value.toFixed(0);
        }
    }
}

[fcarney]

@_cocaandcola_ said in QML Gauge. How to make the indicator start from zero:

minimumValue: -5000

Ummm...

minimumValue: 0

[6thC]

@fcarney
I laughed. I think what @_cocaandcola_ is chasing though, is a minVal, maxMal AND define the bar using a BarFromVal, BarToVal etc.

I'd say: Gauge isn't going to suffice. It's not the right tool.
RangeSlider or make it yourself imo.

[Pradeep P N]

Hi @fcarney
Changing the minimumValue is not a good idea. as it might effect lower limit used by @_cocaandcola_ .

AFAIK the value always taken from the min value for filling.
so i would suggest writing a custom one.

[Charby]

You can stick with Gauge using style to achieve this...

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.0
import QtQuick.Controls.Styles 1.4
import QtQuick.Extras 1.4
import QtQuick.Extras.Private 1.0
import QtGraphicalEffects 1.0

Window {
    id: winapp
    visible: true
    width: 1000
    height: 630
    color: "#1b2153"
    title: qsTr("FirstProject")

    Gauge {
        id: gauge1
        x: 20
        y: 53
        width: 44
        height: 547
        anchors.bottom: parent.bottom
        anchors.bottomMargin: 30
        value: 1000
        minimumValue: -5000
        maximumValue: 5000
        tickmarkStepSize: 500
        formatValue: function(value) {
            return value.toFixed(0);
        }
        property double minBarValue : 0
        style:GaugeStyle{
            valueBar: Item {
                 implicitWidth: 16
                 Rectangle{
                    width: parent.width
                    height :(gauge1.value === gauge1.minimumValue) ? 0 : parent.height / (gauge1.value - gauge1.minimumValue) * (gauge1.value - gauge1.minBarValue)
                 }
             }
        }
    }
}

[_cocaandcola_]

@Charby Yes it works. However, now if you put value -1000, then the indicator will not show anything

[Charby]

@_cocaandcola_ I was only showing you an example of using styling to achieve what you are aiming.
Basically, the idea is replacing the valueBar property of the GaugeStyle which is a Rectangle by default by an Item (so not showing anything) element containing whatever you want within.
Keeping in mind, the Item size and position is managed by the Gauge ( Item top is the Gauge value and item bottom corresponds to Gauge minimumValue), you can define height and y properties of the child Rectangle to display the bar within the parent Item.

[_cocaandcola_]

@Charby thank you very much for your help!!! :)