Nell’architettura μPanel, il pannello grafico non è memorizzato nell’APP che gira sul dispositivo mobile, ma è completamente definito e inviato dal microcontrollore collegato al modulo WiFi. La definizione del pannello si basa su una linea super-compatta di testo, che definisce non solo la definizione degli elementi del pannello ma anche il layout. Grazie a questa architettura, ogni micro-controllore può facilmente inviare all’App μPanel la descrizione del layout e gli oggetti, utilizzando una quantità molto limitata di memoria. Inoltre, il micro-controllore può anche cambiare il pannello durante la fase di esecuzione semplicemente inviando una nuova stringa. Immaginate un pannello che cambia dinamicamente un menu grafico o una multi pagina…
non è interessante? Esaminiamo i principi di progettazione!
Il pannello può essere progettato organizzando il contenuto in tabelle e sotto-tabelle di dimensioni arbitrarie. La struttura del pannello è molto simile a quello di una pagina web! Come probabilmente sai molto bene, il codice HTML in combinazione con i fogli di stile CSS è un linguaggio molto potente, che permette di creare layout complessi e curati. Purtroppo, il codice HTML richiede anche un sacco di tag e caratteri, che consumano molta memoria del micro-controllore. Non preoccuparti! μPanel utilizza un linguaggio speciale che è stato specificamente concepito per questa applicazione dagli ingegneri μPanel. Questo linguaggio si chiama HCTML (Hyper Compressed Text Markup Language) e permette di codificare molti elementi HTML con un singolo carattere o giù di lì.
Non hai familiarità con HTML e programmazione web? Non preoccuparti! Il HCTML è così intuitivo che non vi è alcuna necessità di conoscere alcun linguaggio di programmazione per la progettazione del pannello. Basta descrivere quello che ti serve sul pannello ed il HCTML farà il resto per te.
Il Simulatore Online ti aiuterà durante la progettazione della tu aVirtual APP.
Nell’ HCTML, ci sono 6 tipi di entità:
I Constructors sono caratteri che definiscono il layout del pannello. Gli attuali costruttori supportati sono:
Le parentesi graffe definiscono un contenitore che può essere utilizzato per contenere elementi del pannello o altri costruttori. In realtà, si può pensare a questo contenitore come una tabella (HTML). La tabella inizia alla parentesi aperta e termina in corrispondenza della parentesi di chiusura. La linea orizzontale (underscore) definisce la prima e le successive righe della tabella, mentre la linea verticale (pipe) definisce sia la prima e le successive colonne. Si prega di notare che:
a) una parentesi di apertura deve avere la parentesi chiusa corrispondente;
b) ogni riga deve avere lo stesso numero di colonne.
Esempio
Creare un contenitore per il contenimento di oggetti (o sotto-contenitori) disposti su una tabella 2×2:
{ some content | some content _ some content | some content }
Si prega di notare che nel precedente esempio i simboli per la prima riga (_) e la prima colonna (|) sono stati evitati in quanto il sistema li inserisce automaticamente non appena alcuni contenuti (oggetti o sub-contenitore) sono inseriti nel contenitore. La stessa tabella 2×2 può essere ottenuta specificando anche questi due simboli, se lo si desidera, come segue:
{_| some content | some content _ some content | some content }
Potrai scoprire più tardi che i primi simboli di riga e colonna sono necessari quando è necessario modificare gli stili o gli eventi della prima riga o colonna.
Gli Stylers sono sequenze di uno o più caratteri minuscoli che specificano l’aspetto grafico di contenitori o oggetti. Di solito, ogni styler definisce o modifica alcune specifiche caratteristiche grafiche. Ogni styler corrisponde a uno o più definizioni di stile HTML. Alcuni stylers hanno effetto solo sul contenitore in cui sono utilizzati, altri in tutti gli oggetti contenuti e sotto-contenitori. Stylers che hanno effetto solo su un unico contenitore o un oggetto sono classificati e contrassegnati come spot styler , gli altri come block styler.
Uno dei più importanti parametri grafici con cui dobbiamo fare conoscenza è rappresentato dalle dimensioni. μPanel adatta tutti i contenitori in base alla dimensione orizzontale del loro contenitore principale. Per il primo contenitore, viene utilizzata la dimensione orizzontale dell’intero display. Tutte le dimensioni sono specificate in percentuale. La dimensione degli oggetti viene solitamente adattata rispettando l’intera dimensione orizzontale del display utilizzando un fattore di scala definito dall’utente che ha effetto sul contenitore corrente e in tutti i suoi sotto-contenitori (block styler).
Si noti che, se non espressamente richiesto, anche la dimensione verticale degli oggetti e contenitori viene adattata rispetto alla dimensione orizzontale dei contenitori. Pertanto, un contenitore con dimensioni di 50% x 50% apparirà quadrato su ogni display e coprirà il 50% dello spazio orizzontale.
Per applicare uno styler ad un oggetto, consultare la sintassi dell’oggetto generale.
Per applicare uno styler a un costructor è sufficiente utilizzare lo styler dopo il simbolo del costrutor. In questo caso, si prega di notare la differenza tra i seguenti casi (in cui viene creata una tabella con una singola cella):
La tabella seguente riporta l’elenco degli styler attualmente disponibili (per rendere la descrizione più chiara, per ogni styler vengono riportati uno o più esempi . Questi esempi possono essere provati nel simulatore on-line. Alcuni esempi fanno uso dell’oggetto di testo. Il testo può essere aggiunto al pannello utilizzando la sintassi: T: testo;)
Styler | Mnemonic | Type | SHORT Description | |
---|---|---|---|---|
% | Dimensione | Spot | Definisc ela dimensione di ciascun contenitore o oggetto. | see details |
* | Dimensione oggetto | Block | Definisce la dimensione dell’oggetto che contiene lo styler, o di tutti gli oggetti e sub-contenitori. | see details |
! | Colore Sfondo | Spot | Definisce il colore di sfondo da utilizzare nel contenitore o per disegnare il relativo oggetto. | see details |
# | Colore | Block | Definisce il colore da utilizzare nel contenitore, in tutti gli oggetti del contenitore e in tutti i sub-contenitori. | see details |
t | Allinea in Alto | Block | Allinea verticalmente oggetti o sotto-contenitori nella parte superiore del contenitore. | see details |
b | Allinea in Basso | Block | Allinea verticalmente oggetti o sotto-contenitori sul fondo del contenitore. | see details |
m | Allinea al centro | Block | Allinea verticalmente oggetti o sotto-contenitori al centro del contenitore. | see details |
< | Giustifica a Sinistra | Block | Allinea orizzontalmente oggetti o sotto-contenitori sul lato sinistro del contenitore | see details |
^ | Giustifica al Centro | Block | Allinea orizzontalmente oggetti o sotto-contenitori nel centro del contenitore. | see details |
> | Giustifica a Destra | Block | Allinea orizzontalmente oggetti o sotto-contenitori sul lato destro del contenitore. | see details |
w | Window (overflow) | Block | Impedisce la comparsa delle barre di scorrimento nel caso in cui la dimensione del pannello supera l’area di visualizzazione. | see details |
– | Bordo | Spot | Definisce il bordo da utilizzare per il contenitore o l’oggetto corrente. | see details |
f | Font | Block | Definisce la font da utilizzare nel contenitore o oggetto corrente e in tutti i sotto-contenitori. | see details |
r | Raggio | Spot | Definisce il raggio per disegnare gli oggetti nel contenitore o oggetto corrente. | see details |
p | Padding | Spot | Definisce la distanza tra bordo (i confini del contenitore) e contenuti per disegnare gli oggetti nel contenitore o oggetto corrente. | see details |
d | Displacement (Spostamento Relativo) |
Spot | Sposta il contenitore o l’oggetto corrente rispetto alla sua posizione prevista | see details |
o | Opacità | Spot | Definisce l’opacità del contenitore o oggetto. | see details |
a | Angolo (rotazione) | Spot | Definisce la rotazione del contenitore o oggetto | see details |
g | Immagine di Sfondo | Spot | Definisce l’immagine da utilizzare per lo sfondo contenitore o oggetto. | see details |
h | Ombra | Spot | Visualizza l’ombra del contenitore o dell’oggetto. | see details |
n | Altezza Linea | Spot | Definisce l’altezza della linea di testo. | see details |
k | Display | Spot | Definisce il tipo di visualizzazione per il contenitore o l’oggetto corrente. | see details |
@ | At (Posizione Assoluta) |
Spot | Imposta manualmente la posizione sia del contenitore che dell’oggetto sul display. | see details |
z | z-index | Spot | Imposta la z-index sia del contenitore che dell’oggetto. Elementi con z-index più alto appariranno davanti a elementi con z-index inferiore | see details |
s | Caricamento Styler Class | Spot | Richiama una class styler precedentemente memorizzata. Questo styler permette di caricare una class styler, che deve essere salvata in precedenza, e di applicarla a più contenitori o oggetti. | see details |
~ | global ID | Spot | Questo styler tagga l’elemento di un pannello (oggetto o costruttore) con un numero chiamato ID globale.L’ID Globale permette di fare riferimento all’oggetto / costruttore etichettato durante l’utilizzo del pannello (tempo di esecuzione). Si noti che l’ID globale non è l’oggetto ID , e che gli oggetti possono anche avere ID globale (in aggiunta al loro ID oggetto) | see details |
Gli events sono sequenze di caratteri minuscoli che specificano come il sistema deve reagire quando l’utente interagisce con il contenitore o un oggetto. Alcuni oggetti, come pulsanti e interruttori, hanno i loro eventi di default già definiti. L’utente, tuttavia, può aggiungere evennt ad altri elementi del pannello. Come esempio, il progettista può aggiungere un evento clic su un LED, un’immagine o un contenitore e così via. Quando l’utente genera un tocco (click), il μPanel invierà l’evento corrispondente al modulo Wi-Fi per essere poi consegnato al controller. La sintassi degli events è simile a quella degli stylers.
Quando un events viene attivato, un messaggio verrà inviato dal modulo WiFi al controller. Il messaggio ha il seguente formato:
#.EVT:N:C
Dove N è il numero di evento specificato dal progettista nel codice HTML e C è il codice di evento specifico.
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 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} |
Gli oggetti rappresentano il contenuto effettivo del pannello. Ci sono due tipi di oggetti:
1) oggetti standard, che sono gli elementi che l’utente vede sul pannello e con cui interagisce;
2) oggetti virtuali, che sono elementi invisibili utilizzati per implementare alcune funzioni speciali.
Sia oggetti standard e virtuali necessitano della seguente sintassi generale, in cui ogni definizione dell’oggetto inizia con il suo identificatore maiuscolo e termina con un punto e virgola (;)
K | [ID] | [type] | [stylers] | [events] | [: param 1 : param 2 …]; |
Dove:
Si prega di notare che, i campi contenuti in [] potrebbero essere opzionali o non richiesti per alcuni tipi di oggetti.
Gli oggetti standard disponibili sono:
Gli oggetti virtuali disponibili sono:
Le classi Styler sono oggetti virtuali che possono essere utilizzati per salvare una serie di styler per essere utilizzati con altri oggetti o contenitori. Tutti gli styler definiti in questo oggetto sono memorizzati e possono essere richiamati con la s styler. La sintassi è:
S | ID | stylers | ; |
Esempio:
definire una classe styler (ID = 1) con bordo, sfondo bianco, colore rosso, doppia dimensione font, e utilizzarlo con un oggetto di testo
Definizione Classe Styler: S1*20#F00!FFF;
Utilizzo Classe Styler (con oggetto testo): Ts1: Ciao;
Esempio completo da testare al simulatore: S1*20#F00!FFF;Ts1:Hello World;
Le Macro sono elementi HCTML il cui codice può essere definito dall’utente. Le macro lavorano in due fasi:
1) definizione
2) utilizzo
Le macro sono utili per rendere il codice compatto quando alcuni elementi complessi sono richiesti molte volte nella creazione del pannello.
Definizione Macro
Macro può essere definita utilizzando la seguente sintassi:
K | ID | HCTML_CODE $ |
Il codice HCTML della macro può contenere anche i parametri che possono essere specificati in modo dinamico durante l’utilizzo della stessa. Per includere i parametri in un punto specifico del codice, è sufficiente inserire un punto interrogativo (?)
Esempio
Creare una macro (ID = 1) di un tasto definito dall’utente (blu gradiente di sfondo in stile, bordi arrotondati, di colore bianco, larghezza 30%) con ID pulsante e il testo come parametri di macro.
Definizione Macro: K1: B 00F, 88Fr20 # FFF% 30:;?!? $
Il parser HCTML può anche assegnare automaticamente gli ID progressivi per gli oggetti all’interno del Macro. Per utilizzare l’ID automatico è sufficiente inserire un punto interrogativo doppia (??) subito dopo ID dell’oggetto. Tuttavia, si ricorda che, l’assegnazione partirà da 0 e aumenta di 1 ad ogni utilizzo di macro. Non sono stati sviluppati meccanismi per prevenire che gli ID assegnati automaticmente coincidano con eventuali ID assegnati manualmente ad oggetti dal progettista!
Esempio
Creare una macro (ID = 2) di un tasto definito dall’utente (blu gradiente di sfondo in stile, bordi arrotondati, di colore bianco, larghezza 30%) con l’identificazione pulsante assegnato automaticamente e il testo come parametri macro.
Definizione Macro: K2:B??!00F,88Fr20#FFF%30:?;$
Le Macro possono essere nidificate (es. la definizione di una macro può contenere una macro)
Uso delle Macro
Macro può essere utilizzato come segue:
J | ID | (Param 1,Param 2,Param 3) |
J: fisso carattere maiuscolo che rappresenta l’utilizzo di macro
ID: un carattere alfanumerico maiuscolo nel range 0-9 o A-Z che identifica la macro da utilizzare
Param: uno o più parametri separati da virgole richiesti dalla macro. I parametri devono essere racchiusi tra parentesi (). Se la macro non richiede parametri, le staffe possono essere evitati.
Esempio
Creare una macro (ID = 3) di un tasto definito dall’utente con ID pulsante assegnato e testo fisso automaticamente (gradiente di sfondo blu stile, bordi, colore bianco, larghezza 30% arrotondato). Utilizzare la macro per creare due pulsanti faccia a faccia
Definizione Macro : K3:B??00F,88Fr20#FFF% 30:Press;$
Utilizzo Macro: {J3 | J3}Esempio
Creare una macro (ID = 4) di una definizione pulsante parziale con ID pulsante (blu gradiente di sfondo in stile, bordi, colore bianco, larghezza 30% arrotondato) assegnato automaticamente e senza la definizione del testo. Utilizzare la macro per creare due pulsanti faccia a faccia con testi diversi.
Macro Definizione: K4:!B??00F,88Fr20#FFF%30$
utilizzo Macro: {J4: Testo1; | J4: Text2;}
Esempio
Creare una macro (ID = 1) di un LED con ID assegnato automaticamente e stato iniziale come parametro verde. Utilizzare la macro per creare una matrice 4×4 di LED, girando su quelli dell’ultima colonna.
soluzione più semplice (115 caratteri):
definizione Macro: K1:L??G:;?$
utilizzo macro: /{|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)}
utilizzando macro nidificate (51 caratteri):
definizioni Macro: K1:L??G:?;$K2:_|J1(0)|J1(0)|J1(0)|J1(1)$
utilizzo macro: /{J2J2J2J2}
soluzione più breve (43 caratteri):
definizioni Macro: K1:|L??G:$K2:_J10;J10;J10;J11;$
utilizzo macro: /{J2J2J2J2}
I tag sono simboli che rappresentano semplici elementi HTML. I tag vengono utilizzati per modificare leggermente il layout del pannello. La tabella che segue riporta i tag disponibili e ne descrive il loro utilizzo.
Tag | Mnemonic | Description |
---|---|---|
/ | New Line <BR> |
Introduce una nuova linea nel layout. L’altezza della nuova linea corrisponde all’attuale line-height. Una diversa altezza può essere specificata.
La sintassi del tag è: / N, dove N è un numero opzionale che specifica l’altezza della nuova linea. N = 10 significa una linea altezza piena, N = 20 indica una linea doppia altezza, ecc …
|
= | Horizontal Line <HR> |
Introduce una linea orizzontale nel layout.
La sintassi del tag è: =
|
& | Space |
Introduce un piccolo spazio nel layout.
La sintassi del tag è: &
|