L'editor dell'interfaccia per smartphone
Come costruire in ilevia Manager l'interfaccia che l'utente vede nell'app ILEVIA Control: livelli dei menu, aggiunta di icone e componenti, opzioni degli elementi, struttura, impostazioni dell'app e scorciatoie da tastiera.
Nella scheda User Interface di ilevia Manager costruisci quello che l'utente vede nell'app ILEVIA Control sullo smartphone: i menu con le icone degli ambienti e, dentro, i comandi dei componenti. Ogni utente del progetto ha la propria interfaccia. Questa pagina descrive l'editor dell'interfaccia Classica, quella proposta per ogni nuovo utente.
Come è fatto l'editor
Barra in alto: Settings apre le impostazioni dell'app per l'utente, User sceglie l'utente su cui lavori, Language la lingua dei titoli.
Area centrale: i quattro livelli dell'interfaccia, dall'alto verso il basso.
Pannello a destra: Components elenca i componenti del progetto da inserire; Structure mostra l'albero completo dell'interfaccia.
Barra in basso: i comandi di modifica e il percorso dell'elemento selezionato (per esempio Piano terra › Soggiorno › Switch 12).
I quattro livelli
Livello | Cosa contiene | Nell'app |
|---|---|---|
Primary menu | Icone o scenari. È il punto di partenza: di solito i piani o le zone della casa. | Il menu principale. |
Secondary menu | Icone o scenari dentro la voce del Primary menu selezionata, per esempio le stanze. Facoltativo. | Il secondo livello di navigazione. |
Components | I componenti (o scenari) della voce selezionata: luci, tapparelle, termostati… | I comandi della stanza. |
Sub components | Componenti dentro il componente selezionato. Facoltativo. | Un ulteriore livello di comandi. |
Ogni livello mostra il contenuto dell'elemento selezionato nel livello sopra: quando selezioni un'altra voce del Primary menu, i livelli sotto cambiano.
Costruire l'interfaccia
1. Aggiungere le voci dei menu
Seleziona il livello Primary menu e premi il + Icons or Scenarios (oppure Add nella barra in basso).
Nella finestra Add Primary menu scegli un'icona. Le icone sono divise in set (EVE Icons, EVE Icons 2, EVE Icons 3, Audio / Video…) e c'è un campo di ricerca in alto.
Premi Ok. La voce viene creata con il nome Untitled.
Premi F2 (o Rename) e scrivi il nome, per esempio «Piano terra».
Ripeti nel Secondary menu per le stanze, per esempio «Soggiorno».
2. Inserire i componenti
Seleziona la stanza nel Secondary menu.
Nel pannello a destra apri Components.
Trascina il componente nel livello Components.
Il componente compare con l'icona e il titolo definiti nelle sue proprietà. Lo stesso componente può comparire in più stanze o in più utenti.
3. Controllare la struttura
Il pannello Structure mostra tutta l'interfaccia ad albero. Da qui puoi trovare un elemento con la ricerca, espandere o comprimere i rami e, con le icone accanto a ogni voce, mostrarlo o nasconderlo, nasconderlo nell'app o impostarlo come scheda predefinita.
Opzioni di una voce di menu
Fai doppio clic su una voce del Primary o del Secondary menu (oppure selezionala e premi Edit) per aprire le sue opzioni.
Opzione | Significato |
|---|---|
Title | Il nome mostrato nell'app. |
Enabled | Se disattivata, la voce non è attiva. |
Hidden | Nasconde la voce nell'app. |
Icon | L'icona: fai clic per cambiarla. |
Password | Chiede una password per aprire la voce nell'app. |
User group | Limita la voce ai gruppi di utenti indicati. |
Blink icon when / Is | Fa lampeggiare l'icona quando un componente ha un certo stato (per esempio un allarme ON). |
Hide icon when / Is | Nasconde l'icona quando un componente ha un certo stato. |
Group children by type | Raggruppa i contenuti della voce per tipo di componente. |
Remove | Elimina la voce. |
Opzioni di un componente
Seleziona un componente nell'interfaccia e premi Invio (o Edit) per aprire Component options. In alto trovi il gruppo, il nome e l'UID del componente: la freccia lo seleziona nella scheda Components.
Opzione | Significato |
|---|---|
Title | Il nome nell'app. Se lo cambi qui, vale solo per questa posizione dell'interfaccia; Sync name torna al nome del componente. |
Hidden | Nasconde il componente nell'app. |
Icon | L'icona del componente in questa posizione. |
Disable circle icon / Color to circle icon | Toglie il cerchio attorno all'icona o lo colora in base allo stato. |
User group | Limita il componente ai gruppi di utenti indicati. |
Text Align | Allineamento del testo. |
Blink / Hide / Disable icon when – Is | Fa lampeggiare, nasconde o disattiva l'icona quando un componente ha un certo stato. |
Readonly | Il componente si vede ma non si comanda dall'app. Per i componenti più complessi (dimmer, termostati) ci sono opzioni separate per ogni parte. |
Remove | Toglie il componente da questa posizione dell'interfaccia (non dal progetto). |
Le modifiche a titolo e icona fatte nell'interfaccia non cambiano il componente nella scheda Components.
Impostazioni dell'app (Settings)
Settings apre le Interface settings dell'utente selezionato: scegli quali funzioni dell'app mostrare o nascondere.
Sezione | Opzioni |
|---|---|
Show in app | Show edit default view, Show clear activities, Video surveillance as list, Show device access. |
Hide in app | Hide footer, Hide header, Hide sidebar, Hide settings, Hide QR sharing, Hide in-app scenarios, Hide widget favorites, Hide widget scheduling, Hide widget activities. |
App footer | Il contenuto dei cinque pulsanti della barra in basso dell'app. Per ogni posizione scegli: Default, Empty, Hidden, Ambients, Functions, Favorites, Schedules, Activities, Devices, Scenarios, Multimedia, Energy, Charts e altre voci. |
La barra dei comandi
Pulsante | Funzione | Tasto |
|---|---|---|
Annulla / Ripeti | Annulla o ripete l'ultima modifica. | Ctrl+Z / Ctrl+Y |
Add | Aggiunge un elemento nel livello selezionato. | — |
Edit | Apre le opzioni dell'elemento selezionato. | Invio, Ctrl+E |
Rename | Rinomina l'elemento selezionato. | F2 |
Remove | Elimina l'elemento selezionato. | Canc |
Cut / Copy / Paste | Taglia, copia e incolla l'elemento selezionato; l'elemento incollato va dopo quello selezionato. | Ctrl+X / Ctrl+C / Ctrl+V |
Move left / Move right | Sposta l'elemento a sinistra o a destra nel suo livello. | Ctrl+← / Ctrl+→ |
Altre scorciatoie utili:
Ctrl/Shift + clic o Shift + frecce: selezionano più elementi della stessa riga; Ctrl+A li seleziona tutti, Esc annulla la selezione.
Con più elementi selezionati, Invio li modifica insieme e trascinandoli li sposti tutti.
Nelle finestre di opzioni, Invio conferma ed Esc chiude senza salvare.
Ctrl+↑ / Ctrl+↓: selezionano il componente precedente o successivo nell'elenco dei componenti.
Utenti e lingue
L'interfaccia è diversa per ogni utente: scegli l'utente nel menu User in alto. Per creare un utente o cambiarne il tipo di interfaccia (Classica o a Mappe) usa il menu Users di Manager; per copiare un'interfaccia da un altro utente usa Users › Import interface from.
Con Language scegli la lingua in cui scrivi i titoli: puoi tradurre ogni titolo nelle lingue dell'app. I titoli non ancora tradotti sono segnalati.
Per l'interfaccia a mappe vedi Interfaccia utente: editor classico e a mappe.
Provare l'interfaccia
Salva il progetto e caricalo sul server con Project › Upload to server, poi apri l'app ILEVIA Control con l'utente configurato. Per provarla senza toccare un impianto in funzione puoi usare Users › Test mode.