/ HALion Developer Resource / HALion Tutorials & Guidelines / How-tos /

Using Mouse States in SVGs

On this page:

• Defining Mouse States
• Using Mouse States
  • Example VST Preset
  • Indicating Mouse States

You can use variables related to mouse actions to modify a SVG resource that is assigned to a Switch control. The advantage is that you don't have to assign separate resources to the different states of a Switch control to indicate its current state. The indication of a particular state is defined within the SVG resource itself using Lua expressions. Please note that this cannot be used in combination with animations, as these are only executed when switching between the different states of a switch and the assigned resources.

❕ See Animating Switches Using SVGs for details on using animations with Switch controls.

Defining Mouse States

The mouse states are defined in the SVG resource properties by using Lua expressions. An expression begins with $ followed by (). Everything inside the brackets will be evaluated and returns the effective value for the property.

$(expression)

You can use the following variables in Lua expressions:

Using Mouse States

The subsequent example is presented as illustrative guide to kickstart your own solution-building process.

Example VST Preset

• Using Mouse States in SVGs.vstpreset

To explore the template in this example:

1. Load Using Mouse States in SVGs.vstpreset.
2. Open the Macro Page Designer, go to the GUI Tree and select the 'SVG Mod Switch' template.
3. Click Edit Element to examine the template.
4. Inside the template, select the Switch control. Look which Bitmap resource has been assigned to the off-state of the switch.
5. Go to the Resources Tree and select the corresponding SVG resource. Look for the IDs, properties and values as listed below.

Indicating Mouse States

Mouse States

Resources: SVGMod_Rect SW.

Description: Each state of the switch shows a different color, including the hover-states for the on- and off-states.