Thread Rating:
  • 0 Vote(s) - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
Lezione 1 - Struttura del pannello ed introduzione all' HCTML
#1
La grafica del pannello (o meglio, dell’App Virtuale) che viene visualizzata sul dispositivo mobile è descritta attraverso il linguaggio HCTML, ossia HTML compresso, ed inviata dal vostro sistema elettronico al modulo WiFi. Anche se a prima vista questo linguaggio potrebbe sembrare complesso, in realtà apparirà veramente molto semplice dopo aver capito i principi su cui si basa.

Tecnicamente l’ HCTML rappresenta gli elementi principali del linguaggio HTML con singoli caratteri, permettendo quindi di realizzare pannelli altamente personalizzati con pochissima memoria. Nel linguaggio HCTML, inoltre, sono previsti degli oggetti standard per l’interazione con l’utente (ad es. pulsanti, LED, interruttori, etc) i quali agevolano la creazione di interfacce utente complesse. 

—> E’ importante annotare fin da ora che in HCTML si distinguono i caratteri maiuscoli da quelli minuscoli, in quanto i due tipi di caratteri sono utilizzati per scopi differenti. Inoltre, gli spazi non sono ammessi tra i caratteri che definiscono il pannello.

—> Gli esempi che verranno mostrati nelle varie lezioni possono essere provati nel simulatore online (disponibile alla pagina seguente) facendo il copia ed incolla della linea HCTML, oppure cliccando sul link "Simula" accanto la testo.

http://www.miupanel.com/Panel-Design/ONL...-SIMULATOR

Nel linguaggio HCTML esistono 4 gruppi fondamentali di caratteri:
  • Caratteri costruttori (containers)
  • Caratteri oggetto (objects)
  • Caratteri stile (stylers)
  • Caratteri evento (events)
I caratteri costruttori servono per usare una determinata area del display, ossia per dare una struttura al vostro pannello. Di fatto rappresentano delle tabelle, e quindi vi permettono di strutturare il vostro pannello in righe e colonne allineando bene i contenuti. All’interno di questi costruttori potete inserire altri costruttori (sotto tabelle) o gli oggetti, ossia gli elementi grafici con i quali l’utente interagisce (Pulsanti, LEDs, grafici, etc…)

I caratteri oggetto servono per inserire nel pannello gli elementi grafici con i quali l’utente può interagire. Esistono al momento i seguenti oggetti: LED, Pulsanti, Interruttori, Testo, Messaggi dinamici, Immagini, Indicatori analogici, Slider, Grafici, Campi di testo editabili. A cui si aggiungono in realtà due oggetti particolari: l’oggetto Desktop e i Comandi di pannello, che vedremo più avanti nelle prossime lezioni.

I caratteri stile sono caratteri che possono seguire i caratteri costruttori ed i caratteri oggetto, e servono per definire il loro stile grafico (es. colore, bordo, angolo, etc…)

I caratteri evento sono caratteri che, come gli stili, possono seguire i caratteri costruttori ed i caratteri oggetto e servono per definire quelle che deve succedere quando l’utente interagisce con gli oggetti o con i contenitori (tabelle) visualizzati.

Prima di procedere oltre è necessario conoscere almeno l’oggetto Testo ed un paio di caratteri stile in modo da poter creare dei piccoli esempi.

OGGETTO TESTO

L’oggetto testo permette di inserire nel pannello una scritta statica. La sintassi è:

T:testo;

Ad esempio, per inserire la scritta “Controllo” nel pannello, bisogna scrivere:

T:Controllo;

Non dimenticate il simbolo punto e virgola alla fine della scritta.

STILI FONDAMENTALI

Alcuni stili sono fondamentali per dare un buon aspetto al pannello:

Carattere Stile % 

Il carattere % permette di definire la dimensione di un contenitore o una parte di un oggetto. Il carattere % deve essere seguito dalle dimensioni X e Y (separate da una virgola) ed espresse in percentuale rispetto alla larghezza del display, o rispetto al contenitore di livello superiore.

Ad esempio la sequenza di caratteri %50,50 rappresenta un’area quadrata larga la metà rispetto alla larghezza del display. La sequenza %100,20 rappresenta un’area rettangolare larga quanto il display e alta il 20% rispetto alla larghezza del display.

Carattere stile !

Il carattere stile ! permette di definire il colore di sfondo di un contenitore o di una parte di un oggetto. Il carattere ! deve essere seguito da 3 caratteri che rappresentano rispettivamente le componenti R G B (rosso, verde, blu) del colore desiderato, espressi in base esadecimale, ossia da 0..9 e da A..F. In altre parole, ognuna delle tre componenti può essere un carattere tra i 16 caratteri seguenti:

0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F

dove 0 significa “niente” e F significa “massimo”

Ad esempio, per specificare il colore di sfondo rosso puro, è possibile usare la sequenza !F00 
Oppure, per creare un colore blue con un po' di verde, la sequenza !04F ossia, rosso 0 (niente), verde 4 (su 16), e blu 16 (su 16, ossia massimo).  

Ora che conosciamo gli elementi base per costruire piccoli esempi, possiamo studiare i primi tipi di carattere, ossia i costruttori.

I CARATTERI COSTRUTTORI

Attualmente I caratteri costruttori sono solo 4: { } | _ 

I caratteri { } definiscono rispettivamente l’inizio e la fine di un contenitore (tabella)
Il carattere _ definisce o separa le righe della tabella
Il carattere | definisce o separa le colonne della tabella

La prima riga e la prima colonna della tabella non richiedono necessariamente l’uso di questi caratteri.

Ad esempio, una tabella con 2 righe e 3 colonne può essere costruita come segue:

{contenuto|contenuto|contenuto_contenuto|contenuto|contenuto}

oppure lo stesso risultato può essere ottenuto includendo la definizione della prima riga e della prima colonna, come segue:

{_|contenuto|contenuto|contenuto_|contenuto|contenuto|contenuto}


ESERCIZI

Completata la prima lezione, che probabilmente è la più importante, siamo ora in grado di dare una struttura al nostro pannello. I seguenti esercizi costituiscono dei semplici esempi.

Esercizio 1 - Costruire un pannello costituito da un solo contenitore con una sola cella, largo il 90% dello schermo e alto il 45%, e riempirlo di colore blu.

Iniziamo con il creare il contenitore:

{}

ora diamo una dimensione al contenitore associando lo stile % al simbolo { 

{%90,40}

e ora definiamo il colore di sfondo “blu” 

{%90,40!00F}     Simula

E’ possibile visualizzare questo pannello usando il simulatore online

Esercizio 2 - Inserire il testo “Controllo” nel contenitore dell’esempio 1

per inserire del testo nel pannello è sufficiente usare l’oggetto T (testo). Nel nostro caso dobbiamo inserirlo dentro il contenitore, quindi andremo ad aggiungere l’oggetto T tra le parentesi graffe, dopo i caratteri stile:

{%90,40!00FT:Controllo;}     Simula

Notate che non va inserito alcun spazio tra i colore 00F ed il carattere testo T. In generale gli spazi sono vietati.

Esercizio 3 - Creare un pannello costituito da due rettangoli affiancati larghi complessivamente il 80% dello schermo e alti il 10%, di colore rosso e blu, rispettivamente. Inserire il testo “Controllo” nel primo rettangolo e il testo “Riscaldamento” nel secondo.

In questo caso è sufficiente creare una tabella a due colonne, complessivamente larga 80% dello schermo e alta il 10%

{%80,10}

A questo punto abbiamo definito la tabella con la sua dimensione complessiva. Ora creiamo la prima cella specificando colore di sfondo ed inserendo il testo “Controllo”:

{%80,10|!F00T:Controllo;}     Simula

Ora aggiungiamo allo stesso modo la seconda cella di colore blu e con testo “Riscaldamento”:

{%80,10|!F00T:Controllo;|!00FT:Riscaldamento;}     Simula

Notate che non abbiamo specificato la dimensione delle singole celle. In questo caso la loro dimensione viene stabilita automaticamente in base al contenuto che inseriamo nelle celle.

Se volessimo invece fissare ad esempio la loro dimensione pari al 50% (della tabella) basterebbe usare nuovamente lo styler % sui carattere di cella:

{%80,10|%50!F00T:Controllo;|%50!00FT:Riscaldamento;}    Simula  

Notate che la cella è un sotto elemento della tabella, quindi la dimensione 50% si riferisce alla larghezza della tabella. La tabella invece è contenuta nel display e quindi il valore 80% si riferisce alla larghezza del display
Reply
#2
Complimenti, un tutorial veramente molto chiaro, soprattutto perché ti porta per mano passo, passo.
Hai intenzione di continuarlo?
Grazie
Marco
Reply
#3
Ottimo inizio per cominciare a capire il linguaggio HCTML e avere i chiari i primi rudimenti per la gestione di un Pannello.

Speriamo di vedere presto le prossime puntate.
Reply


Forum Jump:


Users browsing this thread: 2 Guest(s)