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>