Sliders

The Slider object can be used to add to the Panel a sliding cursor that can be moved by the user, either horizontally or vertically. The sliding cursor allows the user to make adjustments to a value throughout a predefined range.

1. Object definition


Syntax

To define a slider on the panel, the syntax is:

R ID [type] [stylers] [events] : min : max : step : [value] : [notify] ;

The fields between brackets [ ] are optional

The following table describes in detail the meaning of each field

Field Lengh Description
Value
R
1 char
Fixed char that identifies the object slider
R
ID 1 char Char which identifies the slider univocally on the Panel. This field can be a decimal digit.
The maximum number of sliders that can be created on the panel is 10.
(0,9)
[type]
not used
[stylers] variable One or more stylers that define the graphical appearance of the slider (such as, size, position, opacity, border, background, ...).
The style "v" (which works with sliders only) permit to define a slider in vertical position.
see stylers
[events]
One or more event specifiers see events
min variable
Min value of the sliding range ]-∞,∞[
max variable
Max value of the sliding range ]-∞,∞[
step variable Amplitude of the minimum cursor movement (resolution) ]0,max]
[value] variable Initial cursor position. If omitted, value = min. [min, max]
[notify] variable Interval in milliseconds between the sending of two notifications to the microcontroller during sliding. Minimum 50 ms. If notify = '0', the notification is sent only upon the slider release. If not specified, the default value is 500 ms.

   


Examples


Example n.1

Target:

Panel with an horizontal slider. Width 60% (with respect the horizontal display dimension). Sliding range (0,100) with step of 1 unit.
Selected value of 0.
Notify interval of 100 ms.



Definition:

object: R

ID: 1

type: -

[stylers]: %60 

min: 0

max: 100

step: 1

value: 0

[notify]: 100

Message:

R1%60:0:100:

1:0:100;


   

Example n. 2

Target:

Panel with a horizontal slider rotated of -90 degree (padding and offset styles will be need to reposition the bar).
Large 80% with respect horizontal dimension of the panel. Sliding range (0,100) with step of 1.
Value selected of 50.
Notify interval of 100 ms.

Definition:

object:R

ID: 1

type: -

[stylers]:

-%80,20d,40a-90

min: 0

max: 100

step: 1

value: 50

[notify]: 100

Message:

R1-%80,20d,40a-90:0:100:1:50:100;


   

Example n. 3

Target:

Panel with a horizontal slider rotated of -90 degree. Background color red/blue. Rounded corner (radius 20 point) and Size 15; sliding range (0,100) with step of 1. Value selected of 50. Notify interval of 100 ms.

Definition:

object:R

ID: 1

type: -

[stylers]: !F00,00Fr20v
*15

min: 0

max: 100

step: 1

value: 50

[notify]: 100

Panel:

R1!F00,00Fr20v
*15:0:100:1:50:100;


 

 

2. Object usage


Set a new value (Panel ---> WiFi Module ---> Controller)

You can change the value of the slider from the µPanel APP just moving its cursor: the APP will send the notification to WiFi module at regular intervals during the sliding (the notification interval is set when you define the slider on the panel) or at the release of the cursor.
The serial message that the controller will receive has the following syntax:

Syntax

#
R
ID value

Example

  • Notification that the cursor with ID=1 is still held and currently moved on the value '54' : #r1:54
  • Notification that the cursor with ID=1 has been moved and released on the value '55': #R1:55

Note:

The value of a slider already defined on the panel,  could be changed by the remote system using the same syntax.

 

Events (Panel ---> WiFi Module --> Controller)

Read the events section to learn how to enable and manage the events.