KUIML
Blue Cat's User Interface Programming Language
IMAGE_PARAM_LINEAR_METER

Description

This widget displays a linear meter which position depends on the parameter value.

Inherited Attributes

See Attributes Common to Param Widgets.

Specific Attributes

Name Value Type Default Value Description Comment V. Exp.

image

image file path

empty

Path to the image to display when the meter is off.


1.0

No

image_mask

image file path

'image' value with '_mask' postfix

Path to the alpha mask for the meter image.

This value is optional since by default it is generated from 'image'.

1.0

No

image_selected

image file path

'image' value with '_selected' postfix

Path to the image to display when the meter is on.

This value is optional since by default it is generated from 'image'.

1.0

No

image_selected_mask

image file path

'image_selected' value with '_mask' postfix

Path to the alpha mask for the meter image when it's off.

This value is optional since by default it is generated from 'image_selected'.

1.0

No

orientation

orientation

vertical

Orientation of the meter.


1.0

No

margin_before

number of pixels

0

Number of pixels in the image from left or bottom (depends on orientation) where the selection should start

Use it when your image is larger than its content, so that selection is shown as soon as the parameter value changes.

1.0

No

margin_after

number of pixels

0

Number of pixels in the image from top or right (depends on orientation) where the selection should finish

Use it when your image is larger than its content, so that selection is shown until the parameter value reaches its maximum.

1.0

No

Examples

  • Vertical continuous linear meter:

<?xml version="1.0" encoding="utf-8" ?>
<SKIN language_version="1.0" background_image="bg.bmp" repeat="true" h_margin="10" v_margin="10">
   <IMAGE_PARAM_LINEAR_METER param_id="dsp.input1" image="linear_meter.bmp" />
</SKIN>

The folder contains the following files (there is no _mask file since the meter is 100% opaque):

linear_meter.bmp

linear_meter_selected.bmp

(the pictures show the widget for different values of the parameter)

0%

50%

100%



  • To make it horizontal, we just need to flip the images and set the 'orientation' attribute to “horizontal”:

<?xml version="1.0" encoding="utf-8" ?>
<SKIN language_version="1.0" background_image="bg.bmp" repeat="true" h_margin="10" v_margin="10">
   <IMAGE_PARAM_LINEAR_METER param_id="dsp.input1" image="hlinear_meter.bmp" orientation="”horizontal”" />
</SKIN>

hlinear_meter.bmp

hlinear_meter_selected.bmp


(the pictures show the widget for different values of the parameter)

0%

50%

100%

  • We can use the 'reverse' attribute to have the meter show the value from right to left (on a vertical meter it would be from top to bottom). To make it coherent we have reverse the 'selected' image too.

<?xml version="1.0" encoding="utf-8" ?>
<SKIN language_version="1.0" background_image="bg.bmp" repeat="true" h_margin="10" v_margin="10">
   <IMAGE_PARAM_LINEAR_METER param_id="dsp.input1" image="hlinear_meter.bmp" orientation="”horizontal”" reverse="”true”" />
</SKIN>

hlinear_meter.bmp

hlinear_meter_selected.bmp


(the pictures show the widget for different values of the parameter)

0%

50%

100%

  • Another example using the 'positions_count' property to specify the number of steps available for the meter.

Since the image shows a given number of elements and we don't want them to be 'cut' when parameter varies, we need to specify how many steps are allowed by the meter. In this example the meter has 11 LEDs, so we need 12 states (one more for the 'all off' state). Since the image starts with some blank space we don't want to take into account, we will set the 'margin_before' attribute to the number of pixels we want to skip: 3 here.

<?xml version="1.0" encoding="utf-8" ?>
<SKIN language_version="1.0" background_image="bg.bmp" repeat="true" h_margin="10" v_margin="10">
   <IMAGE_PARAM_LINEAR_METER param_id="dsp.input1" image="discrete_meter.bmp" orientation="horizontal" positions_count="12"
      margin_before="3" />
</SKIN>

The folder contains the following files (and the background image):

discrete_meter.bmp

discrete_meter_selected.bmp

discrete_meter_mask.bmp

And the result is:

(the pictures show the widget for different values of the parameter)

0%

50%

100%

Thanks to the 'positions_count' attribute, LEDs are never cut when the value changes.