INVISIBLE_ACTION_BUTTON
Active invisible element that lets the user launch an action when clicking on the widget. It is similar to the IMAGE_ACTION_BUTTON, but with no visible graphical element.
Attributes brief detailed show all inherited
Example
Here we create a menu button with inline svg and an INVISIBLE_ACTION_BUTTON on top. Also notice PARAM_ANIMATOR to smoothly change opacity on mouse_over.
- <!-- draw a "menu" icon using svg -->
- <svg id="svg_icon_1" h_offset="2" width="50" height="50" viewBox="0 1 80 40" opacity="1">
- <line x1="0" y1="10" x2="60" y2="10" stroke="#777777" stroke-width="5" />
- <line x1="0" y1="20" x2="60" y2="20" stroke="#777777" stroke-width="5" />
- <line x1="0" y1="30" x2="60" y2="30" stroke="#777777" stroke-width="5" />
- </svg>
- <!-- add an action button on top -->
- <INVISIBLE_ACTION_BUTTON id="iab_1" width="100%" height="100%" cursor="system::hand" action_id="OpenMenu" />
- <!-- now add some logic - change opacity of an icon on mouse_over -->
- <PARAM_LINK from="iab_1.mouse_over" to="param_anim_1" formula="0.5+x" />
- <!-- via animator smoothly change opacity over time -->
- <PARAM_ANIMATOR id="param_anim_1" param_id="svg_icon_1.opacity" persistent="true" duration_ms="200" refresh_time_ms="10" />
- </LAYER_STACK>

Another way to go
You could also use ".mouse_down" attribute of any mouse_sensitive widget to trigger events. Here's an example.
- <WIDGET id="w_my_button" mouse_sensitive="true">
- <!-- draw a "menu" icon using svg -->
- <svg id="svg_icon_1" h_offset="2" width="50" height="50" viewBox="0 1 80 40" opacity="1">
- <line x1="0" y1="10" x2="60" y2="10" stroke="#777777" stroke-width="5" />
- <line x1="0" y1="20" x2="60" y2="20" stroke="#777777" stroke-width="5" />
- <line x1="0" y1="30" x2="60" y2="30" stroke="#777777" stroke-width="5" />
- </svg>
- <!-- add an action trigger for mouse-release event on the widget -->
- <ACTION_TRIGGER event_id="w_my_button.mouse_down.value_changed" action_id="OpenMenu" condition_formula="w_my_button.mouse_down=0" />
- <!-- change opacity of an icon on mouse_over -->
- <PARAM_LINK from="w_my_button.mouse_over" to="svg_icon_1.opacity" formula="0.5+x" />
- </WIDGET>

Also see IMAGE_ACTION_BUTTON.
Comments
Please, authorize to view and post comments.