The fields between brackets [ ] are optional.
The following table describes in details the meaning of each field.

Syntax

Buttons on the panel are defined using the following syntax:

When the user pushes a button on the Panel, a message is sent to the WiFi Module and, therefore, to the Controller.

Button pressed (Panel —> WiFi Module —> Controller)

The sent message has the following syntax:

Syntax:

Where the fixed character ‘P’ is sent for any button.

Example:

• Notification of button (having ID=1) pressed on panel: #B1P

Events (Panel —> WiFi Module —> Controller)

Read the events section to learn how to enable and manage the events for this object.

A switch is an object that has two (or more) stable states. Each time the user presses the switch on the panel, its status changes accordingly, and a corresponding message is sent to the Controller in order to notify the change.
It is also possible to trigger a switch status change from the Controller, by sending to Panel App a specific message through the WiFi module.

To define a switch on the panel, two different syntaxes can be used, depending on the type of switch chosen:

• the first syntax permits to define a switch with a fixed, already defined, graphic (chosen among those available, at end of this page).
  
• the second syntax has been developed to permit to choose the image which should appear for each state of the switch (the images must be selected among those available, see the image gallery). Moreover, it is possible to have more than two states (up to 10 states).

Syntax n. 1
To define a switch on the panel, the syntax is:

The fields between brackets [ ] are optional. The following table describes in details the meaning of each field.

Syntax n. 2

To define a switch that permits to specify the images to be used for each switch state, the syntax is:

Where the fields above have the same meaning described for syntax n.1, with exception that:

• Field type = M (multi-image)
• The number N of states are equal to the number of images specified on the fields “image_xx” .

Example
Switch having 4 states (with images n. 1.1, 1.2, 1.3 1.4 respectively): W1M:0:1.1,1.2,1.3,1.4;

The follow explanation is valid for all switch types (defined using either syntax n.1 or syntax n.2).

Change the status of the SWITCH (Panel <—> WiFi Module <–> Controller)

Usually the status of a switch is changed from the µPanel APP, when the user click on it; in this case the APP will send the notification to WiFi module, but is also possible for the Controller to change the status of the switch on the panel, by sending to the APP a message with the same following syntax:

Examples
Turn-ON the switch with ID=1: #W11
Turn-OFF the switch with ID=1: #W10

Note:
Some switch types could have more than two states.

Events (Panel —> WiFi Module —> Controller)

Read events section to learn how to enable and manage the events for this object.

Text objects are used to include static messages on the Panel, such as LEDs names or other labels.
The text is static, thus it can not be changed after the panel layout has been sent to APP, unless a new panel layout is sent.
To include dynamic messages on the Panel, which can be changed by remote system during the run-time, the message object should be used instead.

Syntax
A static text can be included on the Panel using the following syntax:

Field between [ ] are optional.
The following table describes in detail the meaning of each filed:

Events (APP —> WiFi Module)

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

The Message object is used to display on the panel a string of characters that can be updated by the controller subsequently to panel definition, during the run-time.
If you want to write static texts (such as the name of a LED on the panel) use the object text instead.
If you want to send a string of characters from the panel to the remote system, use the object edit.

Syntax

A message can be defined on the Panel using the following syntax:

Field between [ ] are optional.

The following table describes in details the meaning of each filed:

Update the text of the message (Panel <– Wi-Fi Module <– Controller)

To overwrite the old text with by the new one, use the following syntax:

Examples
Write the message “New text” using the message objetc with ID=1 : #M1New text
Note: To interact with the object in the panel, the message object has to be previously created during the panel definition step. Remeber to finish every command with ‘\n’ string terminator character.

Events
Read the events section to learn how to enable and manage the events for this object.

The Picture object can by used to add an image on the panel, selected from those provided with the APP (see the image gallery).
It is possible to set size, position and other stylers of the image on the panel.

If you want to use an image as a background, also evaluate the use of the object desktop.
If you need to dynamically change a picture on panel during runtime (imagine a weather icons), you can use the object LED (customized LEDs version).

Syntax

The syntax used to add an image to the panel is the following:

The fields between brackets [ ] are optional

The following table describes in details the meaning of each field

Pictures are static objects: this means that once defined on panel screen, you can not modify it.
But the interaction with an image on the panel, is possible through the events.

Events (Panel —> WiFi Module —> Controller)

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

An indicator is a panel object that allows you to represent a numerical value, which usually varies between a minimum and a maximum.
There are two types of indicators: the “analog bars“ and the “analog gauges“.

The two types of indicators have different syntax for their definition and usage, so each type will be described below separately.

Syntax of the ANALOG BAR

An analog bar can be added to the panel using the following syntax:

Field between [ ] are optional.

The following table describes in detail the meaning of each field:

An analog gauge can be added to the panel using the following syntax:

Field between [ ] are optional.

The following table describes in detail the meaning of each field:

Update the analog bar level (Controller –> WiFi Module –> Panel screen)

Syntax

Examples
Update the analog bar having ID=1 with a level value of ’55’: #A1:55
Rotare the index of the analog gauge having ID=1 with a value of ’55’: #A1:55

Note:

The level should be inside the range [min,max] that you have decided for the analog bar during the panel definition.
To interact with the object in the panel, the object has to be previously created during the panel definition step.

Events (Panel screen –> WiFi Module –> controller)

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

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.

Syntax

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

The fields between brackets [ ] are optional
The following table describes in detail the meaning of each field

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

Example (Panel —> WiFi Module —> Controller)
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 that the value of a slider already defined on the panel, could be changed by the remote system using the same syntax.

Example (Panel <— WiFi Module <— Controller)
The controller place the cursor of slider with ID=1 to the value ’54’ : #R1:54

Events (Panel —> WiFi Module –> Controller)

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

The plot object permits to display on the panel a figure that graphically shows the trend of a variable. This object automatically collects values of X and Y and add the corresponding points to the Plot. This object can automatically select the best scale to show the figure, or automatically generate the X values in case the sequence of x values is incremental by 1. If required, the user can manually specify both the ranges for the scales and the number of grid divisions.

Syntax

A plot can be added to the panel using the following syntax:

The fields between brackets [ ] are optional.
The following table describes in detail the meaning of each field.

You can insert new points to your plot, add points to those already present or clear the plot.
The syntax to do these things, depends from the “type” of plot you have defined.

Clear the plot & insert new points (Controller –> WiFi Module –> Panel screen)

Syntax

The character “C” in the mnemonic code, specifies the “clear” operation before to plot the new point (x,y).

Example:
Clear the plot and print the new points (4,5), (6,8), (9,15): #G0C:4,5,6,8,9,15;

Add points to plot (Controller –> WiFi Module –> Panel screen)

Syntax

The character “P” in the mnemonic code, specifies the “plot” operation without clear the plot.

Example:
Add to plot the points (4,5), (6,8), (9,15): #G0P:4,5,6,8,9,15;

Clear the plot & insert new points (Controller –> WiFi Module –> Panel screen)

Syntax

The character “C” in the mnemonic code, specifies the “clear” operation before to plot the new point (x,y).

Example:
Clear the plot and print the new points having y₁=3, y₂=6, y₃=4 and default increments for x_i: #G0C:3,6,4;

Add points to plot (Controller –> WiFi Module –> Panel screen)

Syntax

The character “P” in the mnemonic code, specifies the “plot” operation without clear the plot.

Example:
Add to plot the points having y₁=3, y₂=6, y₃=4 and default increments for x_i : #G0P:3,6,4;

Events (Panel —> WiFi Module —> Controller)

Read the events section to learn how to enable and manage the events for this object.

The Edit object defines a text box on the panel and allows the user to write in it a string of characters to be sent to the controller connected to the Wi–Fi module.

Syntax

An editable box can be added to your panel using the following syntax:

The fields between brackets [ ] are optional.

The following table describes in details the meaning of each field.

Send a string to your electronic system (Panel screen –> WiFi Module –> your controller)

From the panel screen, click on the text box and edit the message you want to send. As soon as you click on the enter key of your keyboard (or click outside the text box), the string will be sent.
The message received on the serial port by your controller has the following format:

Example
Notice of message “Clear Alarm” inserted and sent from text box having ID=1: #E1:Clear Alarm

Note:
The string inserted on the text box is sent only when the panel detects a change of the text, so if you try to send again the same string, the operation will fail.

Events (Panel screen –> WiFi Module –> your controller)
Read the events section to learn how enable and manage the events for this object.

The Desktop object allows you to graphically customise the background of the panel screen. It is particularly suitable to insert a texture (image repeated on the background) or a background color. If you want to insert an image on your panel, also evaluate the use of the object picture. You can search on the page image gallery for the complete collection of images.

Syntax

To specify the desktop look of your panel, just add a string with the folloowing syntax to your panel definition message:

Field between [ ] are optional.

The following table describes in details the meaning of each filed:

This object does not allow any interaction.

Panel commands are actions the micro-controller can command to the APP and, thus, that will be executed on the user’s mobile device (in contrary of normal serial commands that are executed on the WiFi modules). Panel commands are conceived to request actions for changing some aspects of the graphical panel currently displayed on the screen (e.g. for dynamically changing the appearance of some objects or containers) but also for interacting with the internal resources of the mobile device and its operating system.

Panel commands are objects (virtual objects since they do not have a graphical appearance) so they follow the general syntax of common objects. In particular, they are sent and synchronised exactly as other normal objects (such as LEDs, Switches and so on). A total of 16 command slots exist (ID ranges from 0 to 9 and from A to F), each of them can contain a command string. When the micro-controller inserts a command string into a command slot, the µPanel system will send it to the APP as soon as possible. If the APP is not running the command is kept into its slot and delivered later (as soon as the mobile APP is on and connected). Exactly like other objects (e.g. LEDS), if the micro-controller inserts a new command string into an already filled command slot, the old command string is replaced by the new one. Therefore, the following 2 general rules apply:

1. if the micro-controller changes the command string contained into a command slot before the old command is actually sent to the APP, the old command is lost and it will be never sent to the APP (this is exactly what happens for other objects: if you both turn on and off a LED when the APP is not connected, as soon as the APP connects only the last LED status (OFF) will be sent)
2. the commands contained in all the command slots are received and executed by the APP each time the panel is received, unless a special option (SEQ) is set during the command string definition in order to tell the APP to execute each command only once.

Like other normal objects, panel commands can be set during the panel definition and can be changed later during the panel use. However, it is NOT mandatory to create a command slot during the panel definition to enable its subsequent use during run time (i.e. where # prefix is required, as explained below). Obviously, if a command slot is created and filled with a command string directly during the panel definition, the command is executed by the APP as soon as the panel is received and displayed.

An optional argument, called SEQ, permits to attach a SEQuential number to any issued commands. When the SEQ number is attached to a command, the APP will execute the command only once, even if it is received multiple times. In fact, the APP maintains in its memory its own SEQ counter and the received command will be executed only if its SEQ number is greater than those of all the previously received commands. The APP SEQ counter is cleared ONLY when a command with SEQ = 0 is sent. Please note that, the APP has only one global SEQ counter and it is therefore shared by all the command slots. Please note also that commands without SEQ argument or with SEQ = 0 are always executed.

When the command SEQ argument is specified, the micro-controller can request the APP to acknowledge the command execution simply by appending the upper case character A to the SEQ number. In this case, when the APP executes the command an acknowledge message is sent to the micro-controller, reporting the command slot ID and the SEQ number of the executed command.

Panel commands can be included in the panel definition using the following syntax:

Where the brackets [ ] denote optional fields. Please note the double semicolon at the end of the command definition. This is necessary since commands (or their parameters) could contain themselves a semicolon symbol.

The following table describes the meaning of each field.

Send a panel command (Panel <— WiFi Module <– Controller)

The syntax to use a command slot during the run time is :

Syntax

where the meaning of each field is the same as described above in “Command definition”

Note:
As stated above, the panel commands follow the same panel synchronisation rules of other objects: if the user’s micro-controller sends a sequence of serial commands into the same command slot, when the APP is offline, only the last command will be sent to the APP when the connection is established. So, if the micro-controller defines a panel command with ID=0 and sequentially sends: #C0:command_1 and then #C0:command_2, when the APP will be restarted, the panel will execute the command_2 only.

This command permits to change the stylers of objects and containers without sending a new panel. This command is useful to animate the panel during the run time, for instance for dynamically changing position, size, colours of objects or container. To use this command a unique global ID must be assigned during the panel definition to the object/container to animate. Global ID can be assigned by means of the styler ~ (tilde, ascii code 126) . Please refer to this styler section for more details on this styler usage.

Please note that all styler changes applied to objects/containers are always performed with respect to their initial state specified in the panel definition (previously changes applied through previous commands do not affect the final appearance).

Command ‘s’ syntax
The field command of the panel command object in this case is:

where:

• the lowercase character ‘s’ identifies this command
• the character ‘~‘ is the styler that is used to attach a global ID to the object/container to animate
• global_id is the decimal value that has been assigned to the object/container through the ~ styler during the panel definition. Please note that the global_id is not the object ID.
• new_stylers represents one or more stylers that will overwrite the stylers defined for that object/constructor during the panel definition. Please note that only the specified stylers will be changed and that all the other stylers will remain unchanged with respect to their values specified in the panel definition. If the new_stylers field is empty, the object/container will return to its initial appearance specified in the panel definition.
  

Example 1.
Panel definition:
Define a panel with a container (having global_id = 1 with following styles: background = white, dimension= 50×50, and styler “align content at center”) and a object led inside (having object ID = 1 and status off).

{~1!FFF%50,50^L1G:0;}

Object usage:
Using the panel command (slot 3), change the style “background color” (to color red) and the dimensions (to 20×20), add the style “border”, of the container with global id = 1, leaving the other styles as specified in the panel definition:

#C3:s~1:!F00-%20,20

Note: the command can be specified directly into the panel definition as follow:

{~1!FFF%50,50^L1G:0;}C3:s~1:!F00-%20,20;;

Example 2.
Panel definition:
Define a panel with a message (having object ID = 0, global ID = 12, style color of the text = white, style size = 20, message “Alarm OFF”) and a button (having object ID = 1, and text = “set alarm”):

M0~12#FFF*20:Alarm OFF;/10B1:set alarm;

Object usage:
Using the panel command (slot 3), change the style color of the text ‘#’ (to red) and size ‘*’ of the object with global ID 12:

#C3:s~12:#005*30

Example 3.
Panel definition:
Define a panel with: object DESKTOP with a background image and a container (with global ID = 1) in which is placed an ANALOG INDICATOR object, three BUTTON objects and 3 LED objects.

Object usage:
Dynamically change at each second the background color of the container (red, green, blue, transparent)

See the code of this example

Panel layout		dynamic changes		dynamic changes		dynamic changes

Example 4 – Animation: Bouncing Ball
Panel definition:
Define a panel with: object DESKTOP with the background image n. 21 and a container (with a background image n. 2) in which is placed a PICTURE object (smile emoticon n. 7.55) having the global ID = 1.

Object usage:
Dynamically change the absolute position of the object PICTURE (by changing the style ‘@’)

See the code of this example

Video of the Animation: