Panel Design Principles


In the µPanel architecture, the graphical panel is not stored in the APP that runs on the mobile device, but it is completely defined and sent by the micro-controller connected to the WiFi Module. The panel definition is based on a super compact line of text, that carries not only the definition of the panel's elements but also the layout. Thanks to this architecture, every micro-controller can easily send to the µPanel the description of the required layout and objects, using a very limited amount of memory. In addition, the micro-controller can even change the panel during the run-time simply by sending a new string. Imagine a panel that dynamically changes implementing a multi page graphical menu or application... isn't it cool? Let's examine the design principles!

The Panel can be designed organising its content in tables and sub-tables of arbitrary dimensions. The Panel structure is very similar to that of a web page! As you probably know very well, the HTML combined with style sheets CSS is a very powerful language, that permits to create complex and nice layouts. Unfortunately, the HTML also requires a lot of tags and characters, that would consume a lot of micro-controller memory. Don't worry! µPanel uses a special language that has been specifically conceived for this application by the µPanel engineers.  This language is named HCTML (Hyper Compressed Text Markup Language) and permits to codify many equivalent HTML elements with a single character or so. You are not familiar with HTML and web programming? Don't worry! The HCTML is so intuitive that there is no need to know any programming language to design the panel. Just describe what you need on your panel and the HCTML will do the rest for you. 

In the HCTML, there are 6 kinds of entities:

 

 


Constructors 

 

Constructors are characters that define the panel layout. The current supported constructors are:

  • { }

The curly brackets define a container that can be used to contain panel elements or other constructors. Actually, you can think of this container as a (HTML) table. The table starts at the opening bracket and ends at the closing bracket. The horizontal line (underscore) defines either the first or the next table lines, while the vertical line (pipe) defines either the first or the next columns. Please note that: a) an opening bracket has to have the corresponding closing bracket; b) each row has to have the same number of columns.

Example

Create a container for containing objects (or sub-containers) arranged on a 2x2 table:
{ some content | some content _ some content | some content }

Please note that in the previous example the symbols for the first row (_) and the first column (|) have been avoided since the system automatically inserts them as soon as some content (objects or sub-container) is inserted into the container. The same 2x2 table can be obtained specifying also those two symbols if you wish, as follow:

{_| some content | some content _ some content | some content }

You will find out later that the first row and column symbols are necessary when you need to modify the styles or events of the first row or column.

 


Stylers 

 

Stylers are sequences of one or more lower-case characters that specify graphical appearance of containers or objects. Usually, each styler defines or changes single graphical characteristics. Each styler corresponds to one or more style definition of HTML. Some stylers take effect only on the container in which they are used, others in all the contained objects and sub-containers. Stylers that take effect only on a single container or object are classified and marked as spot styler, the others as block styler.

One of the most important graphical parameters that we have to get acquainted with is represented by the size. µPanel scales all the containers with respect to the horizontal size of their parent container. For the first container, the horizontal size of the whole display is used. All sizes are specified in percentage. The size of objects is usually scaled with respect to the whole display horizontal size by using a user defined scale factor that takes effect on the current container and in all its sub-containers (block styler).

Please note that, unless specifically requested, also the vertical size of objects and containers is scaled with respect to the horizontal size of containers. Therefore, a container with size of 50% x 50% will appear square on every display and will cover the 50% of the horizontal space.

To apply a styler to an object please refer to the general object syntax.

To apply a styler to a constructor simply use the styler after the constructor's symbol. In this case, please note the difference between the following cases (in which a table with a single cell is created):

  • {styler content         The styler takes effect on the constructor symbol on its left, which means on the whole container table
  • {_styler content       The styler takes effect on the constructor symbol on its left, which means on the whole table row
  • {_|styler content      The styler takes effect on the constructor symbol on its left, which means on the table cell

The following table reports the list of currently available stylers (to make the description clearer, for each styler one or more examples are reported. These examples can be tried in the online simulator. Some examples make use of the text object. Text can be added to the panel using the syntax: T:some text;)

Styler Mnemonic Type SHORT Description
% Size Spot Define size and scale of either the container or the container-like object see details
* Object Size Block Define the size of the object that contains the styler, or of all the objects and sub-container.
see details
! Background
color
Spot Define the background colour to be used in the container or for drawing the related object see details
# Color Block Define the colour to be used in the container, in all objects of the container and in all sub-containers see details
t Top Block Vertically align objects or sub-containers at the top of the container see details
b Bottom
Block Vertically align objects or sub-containers at the bottom of the container see details
m Middle Block Vertically align objects or sub-containers in the middle of the container.
see details
< Left Block Horizontally align objects or sub-containers at the left side of the container see details
^ Center Block Horizontally align objects or sub-containers in the center of the container.
see details
> Right Block Horizontally align objects or sub-containers at the right side of the container. see details
w Window (overflow) Block Prevent the appearance of the scroll bars in the case the panel size exceeds the display area.
see details
- Border Spot Define the border to be used for the current container or object.
see details
f Font Block Define the font to be used in the current container or object and in all the sub-containers.
see details
r Radius Spot Define the radius for drawing objects in the current container or object.
see details
p Padding Spot Define the distance between border (container boundaries) and content for drawing objects in the current container or object. see details
d Displacement Spot Displace the current container or object with respect to its expected position
see details
o Opacity Spot Define the opacity of the container or object.
see details
a Angle (rotation) Spot Define the rotation of the container or object. see details
g Background image Spot Define the image to be used for the container background or object.
see details
v Vertical Spot Change an object orientation so that it will appear vertical, instead of horizontal. see details
h Shadow Spot Display either the container's shadow or the object's shadow.
see details
n Line height Spot Define the text line height. see details
k Display Spot Define the display type for the current container or object.
see details
w Window
(overflow)
Spot Hide the scroll-bars that will appear when the content is bigger than the container.
see details
@ At
(Absolute position)
Spot Manually set the position of either the container or the object on the display. see details
z z-index Spot Set the z-index of either the container or the object. Elements with higher z-index will appear in front of elements with lower z-index.
see details
s Styler Class Load Spot Recall a previously stored styler class. This styler permits to load a styler class, which has to be previously saved, and to apply it to multiple containers or objects.
see details
~ global ID
Spot
This styler tags a panel's element (object or constructor) with a number called global ID. The global ID permits to refer to the tagged object/constructor during the panel usage (run time). Please note that the global ID is not the object ID, and that objects can have global ID as well (in addition to their object ID)
see details

 

 


Events 

 

Events are sequences of lower-case characters that specify how the system has to react when the user interacts with the container or object. Some objects, as buttons and switches, have their own default events already defined. The user, however, can add events to other panel elements. As an example, the designer can add a click event on a LED, a picture, or a container as well. When the user generates a touch (click), the µPanel will send the corresponding event to the WiFi module to be eventually delivered to the controller. The syntax of Events is similar to that of Stylers.

When an event triggers, a message will be sent by the WiFi Module to the controller. The message has the following format:

#.EVT:N:C

Where N is the event number specified by the designer in the HCTML code and C is the code of the specific event.

Event Mnemonic Type Description
. Click / Touch Spot Enable the click event on the container or object. The event fires when the user click or touch the element.

The syntax is .xN where x is one or more option characters and N is the event number to be used. The event number will be sent to the controller when the event triggers.

The available options are: . (dot) 

The option . (dot) enables the touch-down and touch-up events instead of click/touch

Event Codes

Click / Touch: 1
Mouse down / Touch down: 2
Mouse up / Touch up: 3

Example

Create a container with size 50% x 50%, blue color with click event (number 1)

{%50,50!00F.1}

Example 2

Create a container with size 50% x 50%, blue color with touch-down and touch-up events (number 1)

{%50,50!00F..1}

 

 

Objects 

 

Objects represent the actual content of the panel. There are two kinds of objects: 1) standard objects, which are the elements the user sees on the panel and interact with; 2) virtual objects, which are invisible elements used to implement some special functions.  

Both standard and virtual objects meet the following general syntax, in which each object definition starts with its uppercase identifier and ends with a semicolon (;)

K [ID] [type] [stylers] [events] [: param 1 : param 2 ...];

Where:

  • K: is 1 uppercase character that identifies the object kind
  • ID: is a character in the range 0-9 or A-Z (uppercase) that represents the object instance 
  • type: is a sequence of 1 or more uppercase alphanumeric characters that specify a sub-type of the K object
  • stylers: is a sequence of 1 or more lowercase alphanumeric characters representing the style to be applied to the object
  • events: is a sequence of 1 or more lowercase alphanumeric characters representing the events to be assigned to the object 
  • param: is a sequence of alphanumeric parameters (both lowercase and uppercase) requested by the object. Each parameter is prefixed by a colon symbol (:)
  • ; is the object's terminator (mandatory) 

Please note that, the fields contained in [ ] may be optional or not required for some kinds of objects.

The available standard objects are:


The available virtual objects are:

  • STYLER CLASSES

    Styler Classes are virtual objects that can be used to save a set of stylers to be used with other objects or container. All the stylers defined in this object are stored and can be recalled with the
    s styler. The syntax is:

 

S ID
stylers
;


Example: define a styler class (ID=1) with border, white background, red color, double font-size, and use it with a text object

Styler Class definition: S1-1h*20#F00!FFF;
Styler Class usage: Ts1:Hello;

 


Macros 

Macros are HCTML elements whose code can be defined by the user. Macros work in two-steps: 1) definition 2) usage. Macros are useful to make the code compact when some complex elements are required many times in the panel definition.

Macro Definition

Macro can be defined using the following syntax:

K ID HCTML_CODE $
  • K: fixed uppercase character that represents the start of the macro definition
  • ID: one uppercase alphanumeric character in the range 0-9 or A-Z that identifies the macro
  • HCTML_CODE: any HCTML code to be replaced at the macro usage. Every character can be used with exception of the dollar symbol ($) that identifies the end of the macro.
  • $: symbol that ends the macro definition

The Macro's HCTML_CODE can contain also parameters that can be specified dynamically during the macro usage. To include parameters into a specific point of the code, simply insert a question mark symbol (?)

Example

Create a macro (ID=1) of a user defined button (blue gradient-style background, rounded borders, white color, width 30%) with button ID and text as macro's parameters.
 
Macro definition: K1:B?!00F,88Fr20#FFF%30:?;$

The HCTML parser can also automatically assign progressive IDs to objects within the Macro. To use the auto ID simply insert a double question mark (??) immediately after the object to ID. However, please note that, the assignment will start from 0 and will increase by 1 at each macro usage. No mechanisms are implemented to prevent that such assigned ID will not be equal to IDs manually assigned to objects by the designer! Therefore, particular attention must be payed with auto ID.

Example

Create a macro (ID=2) of a user defined button (blue gradient-style background, rounded borders, white color, width 30%) with button ID automatically assigned and text as macro's parameters.
 
Macro definition: K2:B??!00F,88Fr20#FFF%30:?;$

Macro can be nested (i.e. a macro definition can contain a macro usage)

Macro Usage

Macro can be used as follow:

J ID (Param 1,Param 2,Param 3)
  • J: fixed uppercase character that represents the macro usage
  • ID: one uppercase alphanumeric character in the range 0-9 or A-Z that identifies the macro to be used
  • Param: one or more comma-separated parameters required by the macro. Parameters must be enclosed between brackets ( ). If the macro does not require parameters, the brackets can be avoided. 

Example

Create a macro (ID=3) of a user defined button (blue gradient-style background, rounded borders, white color, width 30%) with button ID automatically assigned and fixed text. Use the macro to create two face-to-face buttons
 
Macro definition: K3:B??!00F,88Fr20#FFF%30:Press;$
Macro usage: {J3|J3}

Example

Create a macro (ID=4) of a partial button definition (blue gradient-style background, rounded borders, white color, width 30%) with button ID automatically assigned and without text definition. Use the macro to create two face-to-face buttons with different texts.
 
Macro definition: K4:B??!00F,88Fr20#FFF%30$
Macro usage: {J4:Text1;|J4:Text2;}

Example

Create a macro (ID=1) of a green LED with ID automatically assigned and initial state as parameter. Use the macro to create a 4x4 matrix of LEDs, turning ON the ones of the last column.
 
Simplest solution (115 characters):

Macro definition: K1:L??G:?;$
Macro usage: /{|J1(0)|J1(0)|J1(0)|J1(1)_|J1(0)|J1(0)|J1(0)|J1(1)_|J1(0)|J1(0)|J1(0)|J1(1)_|J1(0)|J1(0)|J1(0)|J1(1)}

Using nested macro (51 characters):

Macro definitions: K1:L??G:?;$K2:_|J1(0)|J1(0)|J1(0)|J1(1)$
Macro usage: /{J2J2J2J2}

Shortest solution (43 characters):

Macro definitions: K1:|L??G:$K2:_J10;J10;J10;J11;$
Macro usage: /{J2J2J2J2}

 

 

 


Tags 

 

Tags are symbols that represent simple HTML elements. Tags are used to slightly modify the Panel layout. The following table reports the available tags and describes their usage.

Tag Mnemonic Description
/ New Line
<BR>
Introduce a new line into the layout. The height of the new line corresponds to the current line-height. A different height can be specified.

The tag syntax is: /N where N is an optional number that specifies the height of the new line. N = 10 means a full line-height, N = 20 means a double line-height, and so on...

Example

Create two text messages, one under the other leaving a double line height between them

{^T:First Line;_|/20T:Second Line;}
= Horizontal Line
<HR>
Introduce a horizontal line into the layout. 

The tag syntax is:

Example

Create a list of text separated by horizontal lines

{^T:First;=T:Second;=T:Third;}
& Space
&nbsp;
Introduce a little space into the layout. 

The tag syntax is:

Example

Create two LEDs with a little space between them

{L1G0:0;&L2G0:0;}