Slider Widget Documentation

Introduction

A slider widget is a graphical control element that allows users to adjust a value within a specific range by sliding a handle along a track. Sliders can be oriented horizontally or vertically and typically represent a continuous or discrete range of values. Users interact with the slider by clicking and dragging the handle or by clicking on the track to move the handle to that position. It is commonly used in Graphical User Interfaces (GUIs) to enable users to set values such as volume, brightness, or any numerical parameter that can vary within a bounded range.

This "Slider Widget Documentation" covers the following topics:

1. Creating and customizing slider widgets using Microchip Graphics Suite (MGS) Harmony Composer
2. Slider properties
3. Handling slider widget properties and events through application code
4. Slider widget example project
5. Application Programming Interfaces (APIs) specific to the slider widget

Designing Slider Widget Using MGS Harmony Composer

To add slider widget to your design, follow these steps:

Select and drag the slider widget from the Tool Box to your screen designer workspace as shown in the accompanying image.

Back to Top

To customize the slider widget, select it on the screen designer or screen tree, select the Object Editor tab and modify its properties using the Object Editor.

Set the Slider properties [Orientation, Minimum, Maximum, Value and Grip Size] using the Object Editor. An example of this is shown in the accompanying image.

Back to Top

Managing Slider Widget Schemes

Schemes control the look and feel of a widget.

To learn how to set the Scheme for a slider widget, click on the  button next to the Scheme property editor of the Object Editor.

This launches the Slider Scheme Helper window containing tips on how different sections of the scheme color table manipulate various elements of the widget.

Figure 5  shows an example color scheme and the resulting appearance of the Slider widget:

The information from the Slider Scheme Helper and the example color scheme is summarized in Figure 6:

Back to Top

Slider Properties

You can set the following properties of the slider using the Object Editor:

Back to Top

Managing Slider Widget through programming

Once the graphical design is completed using MGS Harmony Composer, MCC generates the required code for all the widgets based on the properties set in the Object Editor. To learn more about the process flow between designing a User Interface (UI) and developing application code, refer to the "Designing an Application with Microchip Graphics Suite (MGS)" page.

Let us suppose that a slider widget is created with the following properties in MGS Harmony Composer:

For the slider widget with the properties shown in the Figure 7, MCC will automatically generate the following lines of code in src\config\default\gfx\legato\generated\screen\le_gen_screen_Screen0.c:

• A new slider widget is created by the name Screen0_SliderWidget_1.

Screen0_SliderWidget_1= leSliderWidget_New();

• The position of the slider is set to the pixel location 104x315.

Screen0_SliderWidget_1->fn->setPosition(Screen0_SliderWidget_1, 104, 315);

• The dimensions of the slider are width - 100 pixels and height - 20 pixels.

Screen0_SliderWidget_1->fn->setSize(Screen0_SliderWidget_1, 100, 20);

• The scheme of the slider is changed from a default scheme to a custom slider scheme.

Screen0_SliderWidget_1->fn->setScheme(Screen0_SliderWidget_1, &SliderScheme);

• The background value of the slider widget is set to none. Hence, it will not take the color decided by its scheme.

Screen0_SliderWidget_1->fn->setBackgroundType(Screen0_SliderWidget_1, LE_WIDGET_BACKGROUND_NONE);

• The Slider is set to have no border in this example. However, you can have a line border or a beveled border.

Screen0_SliderWidget_1->fn->setBorderType(Screen0_SliderWidget_1, LE_WIDGET_BORDER_NONE);

• The orientation of the slider is set to horizontal in this example.

Screen0_SliderWidget_1->fn->setOrientation(Screen0_SliderWidget_1, LE_ORIENTATION_HORIZONTAL, LE_FALSE);

• The grip size of the slider is set to 10 in this example.

Screen0_SliderWidget_1->fn->setGripSize(Screen0_SliderWidget_1, 10);

• The 'Value Changed Event' is used to attach a callback function when the slider value is altered.

Screen0_SliderWidget_1->fn->setValueChangedEventCallback(Screen0_SliderWidget_1, event_Screen0_SliderWidget_1_OnValueChanged);

• Finally, the slider widget is added to the screen. 

root0->fn->addChild(root0, (leWidget*)Screen0_SliderWidget_1);

Back to Top

Application Code

The default code generated by MCC sets the initial state of the widget. The property or behavior of the widgets can be changed by using the APIs discussed above, in the application code. Additional application code discussion related to the slider widget is presented below.

Here is an example of the callback function that can be added to the application code (in app.c) to handle the event generated when the slider handle is moved:

Back to Top

Slider Widget Example Project

An example slider widget project is available on GitHub.

In this example, we show:

1. How to create a slider widget
2. How to handle events for the slider widget

MGS Harmony Web Simulator Output

The callback functions for handling the screen events are defined in the app.c file.

• The above example demonstrates a pair of interdependent sliders.
• Clicking along the slider bar or dragging the handle will display the updated value of the slider in the label widget located beneath the slider pairs. The OnValueChanged events for the both the sliders are implemented through the callback functions as shown below :

Slider Widget API Documentation

This section describes the APIs specific to the slider widget. For a description of APIs common to all widgets, refer to the "Base Widget Documentation" page.

getOrientation()

• Gets the slider orientation

Parameters

• Returns LE_ORIENTATION_HORIZONTAL or LE_ORIENTATION_VERTICAL

setOrientation()

• Sets the slider orientation

Parameters

• Returns LE_SUCCESS or LE_FAILURE

getGripSize()

• Gets the grip size of the slider handle

Parameters

• Returns the grip size value

setGripSize()

• Sets the grip size of the slider handle

Parameters

• Returns LE_SUCCESS or LE_FAILURE

getMininumValue()

• Gets the minimum value of the slider

Parameters

• Returns the minimum value of the slider

setMinimumValue()

• Sets the minimum value of the slider

Parameters

• Returns LE_SUCCESS or LE_FAILURE

getMaximumValue()

• Gets the maximum value of the slider

Parameters

• Returns the maximum value of the slider

setMaximumValue()

• Sets the maximum value of the slider

Parameters

• Returns LE_SUCCESS or LE_FAILURE

getPercentage()

• Gets the slider value as percentage

Parameters

• Returns the percentage value of the slider

setPercentage()

• Sets the value using a percentage

Parameters

• Returns LE_SUCCESS or LE_FAILURE

getValue()

• Gets the slider value

Parameters

• Returns the value of the slider

setValue()

• Sets the slider value

Parameters

• Returns LE_SUCCESS or LE_FAILURE

step()

• Steps the slider by an amount

Parameters

• Returns LE_SUCCESS or LE_FAILURE

getValueChangedEventCallback()

• Gets the value changed event callback pointer

Parameters

• Returns the value changed event callback function

setValueChangedEventCallback()

• Sets the value changed event callback pointer

Parameters

• Returns LE_SUCCESS or LE_FAILURE

Back to Top