4.12 <gauge>

This container turns its child element into a gauge. It will only display a percentual amount of it.


	The gauge only grows from left to right or top to bottom. You can use the `anchor` property to turn this around. E.g. a vertically growing gauge with `anchor="s"` will grow upwards.

4.12.1 Attributes

Name	Type	Default Value	Description
fill	integer	100	A percentual value between `0` (empty) and `100` (full). Only that amount of the child element will be visible.
orientation	string	horizontal	Either `horizontal` or `vertical` for horizontally or vertically growing gauges.

4.12.2 Examples

<display bg-color="grey50" width="100"
         on-scroll="scroll(self.event.direction)">

  <gauge id="mygauge" fill="50" anchor="sw" y="100%">

    <group width="100" height="10" bg-color="red"/>

  </gauge>

  <label id="mylabel" anchor="center" x="50%" y="50%" font="Sans bold 1cm"
         value="%"/>

  <script><![CDATA[

    #
    # This gauge can be adjusted using the vertical mouse wheel.
    #
    def scroll(direction):

        fill = Dsp.mygauge.fill
        if (direction == 0):
            fill = max(fill - 1, 0)
        elif (direction == 1):
            fill = min(fill + 1, 100)
        Dsp.mygauge.fill = fill
        Dsp.mylabel.value = "%d%%" % fill

  ]]></script>

</display>