L'editor dell'interfaccia a mappe
Come si costruisce in ilevia Manager un'interfaccia a mappe per ILEVIA Control: utente Map, pagine, posizionamento libero dei componenti, sfondo, griglia, allineamento, livelli, menu contestuale e opzioni di pagine e componenti.
Nell'interfaccia a mappe i comandi non sono in righe di icone, come nell'interfaccia Classica, ma liberi su una pagina: puoi mettere una planimetria o una foto come sfondo e posizionare luci, tapparelle e termostati esattamente dove sono nella casa. Questa pagina spiega l'editor a mappe di ilevia Manager.
Hai già l'interfaccia per smartphone? Puoi partire da quella: con Users › Import interface from Manager crea pagine e componenti con la stessa struttura e ti resta solo da aggiungere gli sfondi e posizionare le icone. Vedi Dall'interfaccia per smartphone all'interfaccia a mappe.
Creare un utente a mappe
Il tipo di interfaccia dipende dall'utente. Per crearne uno a mappe:
Apri Users › New user (oppure Users › Edit user per un utente esistente).
In User type scegli Map.
Compila nome utente e password.
In Width e Height indica la dimensione della pagina in pixel (1024 × 768 di partenza). Usa le proporzioni dello schermo su cui l'interfaccia verrà mostrata.
Premi Ok, poi apri la scheda User Interface e scegli l'utente in User.
Com'è fatto l'editor
Colonna a sinistra: il menu principale dell'interfaccia (icone o scenari). Con il + aggiungi una voce, scegliendone l'icona.
Schede in alto: le pagine della voce selezionata. Il + verde aggiunge una pagina; la rotellina accanto al nome apre le opzioni della pagina.
Area centrale: la pagina, con la griglia. In basso a destra i comandi di zoom: riduci, valore attuale (clic per la dimensione reale), ingrandisci, adatta alla finestra.
Pannello a destra: Components con i componenti da trascinare sulla pagina (e Label, un'etichetta di testo libero); Structure con l'albero di voci, pagine e componenti.
Barre in basso: i comandi di modifica e le impostazioni della pagina (vedi sotto).
Scegliere lo sfondo
Ogni pagina può avere un'immagine di sfondo: una planimetria, un rendering o una foto dell'ambiente. Su di essa poi posizioni i comandi.
Seleziona la voce del menu e la pagina.
Nella barra in basso, accanto a Background, premi Select file.
Scegli l'immagine sul computer e premi Open. Manager la copia dentro il progetto, quindi viene caricata sul server insieme al resto con Project › Upload to server.
L'immagine viene adattata alla pagina mantenendo le proporzioni e centrata. Con la × accanto a Select file la togli; con Visible la mostri o la nascondi; Color è il colore che resta visibile dove l'immagine non copre la pagina.
Usa un'immagine con le stesse proporzioni della pagina. Se le proporzioni sono diverse, l'immagine non riempie la pagina e restano delle bande del colore di sfondo. Il modo più semplice è preparare l'immagine già alla dimensione indicata in Width e Height dell'utente (nell'esempio 735 × 864), oppure impostare Width e Height uguali ai pixel dell'immagine.
Posizionare i componenti sopra l'immagine
Nel pannello Components trascina il componente sulla pagina, sopra l'oggetto che comanda (la lampada, la tapparella, il termostato…).
Spostalo trascinandolo; ridimensionalo con i quadratini agli angoli e ai lati.
Per una posizione precisa scrivi le coordinate in X, Y (angolo in alto a sinistra) e W, H (larghezza e altezza) nella barra in basso. I valori sono in pixel della pagina, cioè della dimensione Width × Height dell'utente.
Lo stesso componente può comparire più volte, anche su pagine diverse: per esempio la stessa luce sulla planimetria e sulla foto della stanza.
Consigli per un buon risultato:
Lavora a dimensione reale (Ctrl+1) per vedere quanto spazio occupa davvero un comando sopra l'immagine.
Riduci la griglia (per esempio Grid 5 px) o disattivala con Active quando devi centrare un comando su un oggetto piccolo; con Shift + frecce lo sposti di un pixel alla volta.
Rimpicciolisci il comando con W e H o con Scale factor nelle opzioni del componente, così non copre l'oggetto della foto.
Blocca la posizione (Ctrl+L o Lock component dal menu contestuale) quando il comando è al suo posto, per non spostarlo per errore.
Non cambiare la dimensione della pagina dopo: le posizioni sono in pixel e non seguono l'immagine. Se cambi Width o Height dell'utente, i comandi restano dove erano mentre l'immagine viene ridimensionata, e vanno riposizionati.
Per aggiungere un testo, trascina Label sulla pagina e scrivi il testo nelle sue opzioni.
Selezionare e spostare
Clic seleziona un elemento; Ctrl/Shift + clic lo aggiunge o lo toglie dalla selezione.
Trascinando su uno spazio vuoto selezioni tutti gli elementi nel rettangolo (con Shift li aggiungi).
Alt + clic seleziona l'elemento sotto quello selezionato, se sono sovrapposti.
Ctrl+A seleziona tutta la pagina, Esc annulla la selezione, Tab / Shift+Tab passano all'elemento successivo o precedente.
Frecce: spostano la selezione di un passo di griglia; Shift + frecce di un pixel.
La barra dei comandi
Comando | Funzione | Tasto |
|---|---|---|
Undo / Redo | Annulla o ripete l'ultima modifica. | Ctrl+Z / Ctrl+Y |
Edit | Apre le opzioni degli elementi selezionati. | Invio |
Remove | Elimina gli elementi selezionati. | Canc |
Cut / Copy / Paste | Taglia, copia, incolla. | Ctrl+X / Ctrl+C / Ctrl+V |
Duplicate | Duplica gli elementi selezionati. | Ctrl+D |
Move back / Move front | Porta dietro o davanti agli altri elementi. | — |
Align left / center / right | Allinea gli elementi selezionati in orizzontale. | — |
Align top / middle / bottom | Allinea gli elementi selezionati in verticale. | — |
Distribute evenly | Distribuisce gli elementi a distanza uguale, in orizzontale o in verticale. | — |
Group / Ungroup | Raggruppa gli elementi per spostarli insieme, o li separa. | Ctrl+G / Ctrl+Shift+G |
X, Y, W, H | Posizione e dimensioni della selezione. | — |
Altri tasti: Ctrl+L blocca o sblocca la posizione, Ctrl+K mantiene le proporzioni nel ridimensionamento, Ctrl + rotellina o Ctrl + +/− fanno lo zoom, Ctrl+0 adatta la pagina alla finestra, Ctrl+1 la mostra in dimensione reale, Spazio + trascina (o tasto centrale, o Shift + rotellina) sposta la vista.
Impostazioni della pagina
La seconda barra riguarda la pagina aperta:
Impostazione | Funzione |
|---|---|
Background · Select file | Sceglie l'immagine di sfondo (per esempio la planimetria). |
Visible | Mostra o nasconde l'immagine di sfondo. |
Color | Colore di sfondo della pagina. |
Transparent | Sfondo trasparente. |
Gesture | Attiva o disattiva i gesti dell'app su questa pagina. |
View depth | Nell'editor mostra solo gli elementi fino al livello scelto: utile quando molti elementi sono sovrapposti. |
Grid … px | Passo della griglia, usato anche dagli spostamenti con le frecce. |
Active | Attiva o disattiva la griglia nell'editor. |
Il menu contestuale
Con il tasto destro su un elemento si apre un menu con altre funzioni.
Voce | Funzione |
|---|---|
Remove / Copy / Paste element | Elimina, copia o incolla l'elemento. |
Duplicate | Duplica l'elemento. |
Group / Ungroup | Raggruppa o separa gli elementi selezionati. |
Remove page | Elimina la pagina. |
Copy page / Paste page | Copia tutti gli elementi della pagina e li incolla in un'altra, con le stesse posizioni e dimensioni. |
Clear page | Toglie tutti gli elementi dalla pagina. |
Edit | Apre le opzioni dell'elemento. |
Lock component | Blocca la posizione dell'elemento: non si sposta finché non lo sblocchi. |
Free proportion / Keep proportion | Ridimensionamento libero o con le proporzioni bloccate. |
Copy position / Paste position | Copia la posizione di un elemento e la applica a un altro. |
Assign to | Collega l'elemento sulla pagina al componente selezionato nel pannello Components, sostituendo quello attuale. |
Undo / Redo | Annulla o ripete. |
Per stanze uguali: prepara una pagina, usa Copy page e Paste page sulla pagina nuova, poi con Assign to collega ogni elemento al componente giusto della nuova stanza. Controlla l'UID nelle opzioni dell'elemento per verificare il collegamento.
Opzioni di un componente
Doppio clic su un componente (o Edit) apre Component options. In alto trovi gruppo, nome e UID del componente collegato.
Oltre alle opzioni dell'interfaccia Classica (Title con Sync name, Hidden, User group, Blink / Hide / Disable icon when, Readonly), sulla mappa ci sono:
Opzione | Significato |
|---|---|
Icon (due) | Le icone per i due stati del componente, per esempio spento e acceso. |
Disable circle icon / Color to circle icon | Toglie il cerchio attorno all'icona o lo colora in base allo stato. |
Scale factor | Dimensione del componente in percentuale. |
Scale width / Scale height | Scala orizzontale e verticale, per deformare l'icona in una sola direzione. |
View mode | Come appare il componente sulla pagina: per esempio Classica, solo testo, solo immagini o nascosto. Le voci disponibili dipendono dal tipo di componente. |
Detail mode | Cosa si apre toccando il componente nell'app: Modal , Popup (finestra piccola) o Hidden (nessuna finestra). |
Per gli esempi delle modalità vedi Modalità di visualizzazione dei componenti.
Con View mode nascosto puoi mettere un componente invisibile sopra un oggetto della foto di sfondo: l'utente tocca l'oggetto e comanda il componente.
Opzioni di una pagina
La rotellina accanto al nome della pagina (o un doppio clic sulla scheda) apre Page options.
Opzione | Significato |
|---|---|
Title | Il nome della pagina nell'app. |
Hidden | Nasconde la pagina nell'app. |
Icon | L'icona della scheda della pagina. |
Default tab | La pagina che si apre per prima quando l'utente sceglie la voce del menu. |
Password | Chiede una password per aprire la pagina. |
User group | Limita la pagina ai gruppi di utenti indicati. |
Blink / Hide icon when – Is | Fa lampeggiare o nasconde l'icona della pagina in base allo stato di un componente. |
Le voci mostrate possono cambiare da pagina a pagina: per esempio sulla prima pagina della voce di menu, impostata come Default tab, al posto di Hidden compare Enabled e mancano le condizioni sull'icona.
Prima di caricare
Controlla le pagine alla dimensione reale (Ctrl+1) per vedere come appariranno sullo schermo.
Usa Structure per verificare che ogni pagina contenga i componenti giusti e che nessuno sia nascosto per errore.
Carica il progetto con Project › Upload to server e prova l'interfaccia nell'app con l'utente a mappe.