Segmented Button Custom Widget

Streamline user actions using a three-option segmented button custom widget

Purpose

This custom widget includes a segmented button with three options to choose from. This can be a great use for an application with three separate settings for a given purpose.

Setup

Custom Widget Plugins interact with your application through the use of properties and events. Properties are the shared data that exists between your application and widget, while events are signals that your widget can send to your application. In your app editor you can build triggers based off these events. Events can be made to send data to your application as well.

The Segmented Button Custom Widget makes use of three properties and one event. The properties being used in this widget are:

• Font Size: The font size in pixels of the text shown on the buttons
• Option 1 Text: The text for the first option
• Option 2 Text: The text for the second option
• Option 3 Text: The text for the third option

This custom widget makes use of one event called Button Selected. The return value is an integer [1, 2, 3] which correlates to the button pressed from left to right.

How it works

When the user selects an option, the button turns green and fires an event in Tulip. Selecting a different button will turn that one green and disable the previously pressed button. Example usage will be creating a trigger that performs an action if the event fired from the widget is 1, 2, or 3 based on which button the user pressed.

Further Reading

If you would like to know more about custom widgets please visit the site below:

• Custom Widgets Overview