Aspetto pagine

Elenco dei nomi dei campi della tabella «POS UI Setup», che contengono la definizione dei colori in esadecimale, e il loro corrispondente utilizzato nella APP:

Campo in Tabella	Corrispondente nella APP
Primary Color	PRIMARY
Primary Color Variant	PRIMARYVARIANT
On Primary Color	ONPRIMARY
Secondary Color	SECONDARY
Secondary Color Variant	SECONDARYVARIANT
On Secondary Color	ONSECONDARY
Surface Color	SURFACE
On Surface Color	ONSURFACE
Background Color	BACKGROUND
On Background Color	ONBACKGROUND
Error Color	ERROR
On Error Color	ONERROR

Di seguito vengono presentate, come esempio, alcune immagini delle pagine di POSible, configurate in modo da utilizzare la UI standard di POSible, la “UI di default”, con l'impostazione “LIGHT mode” oppure una UI personalizzata, la “Cliente1 UI” con l'impostazione “DARK mode”.

SETTINGS

La pagina SETTINGS compare in automatico dopo aver installato e aperto, per la prima volta, la APP POSible; in seguito la si può visualizzare scegliendo la voce “Impostazioni” nel menu FLYOUT.

Nel primo caso la sua configurazione di colori è definita nel codice di POSible e non può essere modificata dall’utente.

Nel passo 3 di questa pagina è presente la lista a discesa per la scelta del setup di POSible.

LOGIN

La pagina LOGIN appare dalla seconda volta che si attiva la APP POSible.

LIGHT mode (UI di default)

Come si può vedere nell’immagine qui sopra, “Primary Color” configurato in tabella è utilizzato per impostare il colore del font delle etichette (label) attive che identificano i campi di input e per il font dei pulsanti, mentre “On Surface Color“ è utilizzato per il font dei campi di input e per tutte le altre etichette nella pagina.

DARK mode (Cliente1 UI)

In questa configurazione invece il campo “Secondary Color Variant” imposta il colore del font dei pulsanti.

HOMEPAGE

In questa pagina il colore dell’icona dell’indicatore di stato in basso a destra è definito nel codice.

LIGHT mode (UI di default)

Nell’immagine qui sopra “Primary Color” viene utilizzato per colorare la barra del titolo della pagina, mentre “On Primary Color“ è utilizzato per il colore del font del titolo della pagina. Il colore delle barre di stato invece è configurato nel campo “Primary Color Variant”. Per lo sfondo del pulsante che attiva la scansione viene utilizzato il colore definito nel campo “Secondary Color” e “On Secondary Color” per il simbolo in primo piano.

DARK mode (Cliente1 UI)

FLYOUT

In questo menu il colore degli indicatori di stato a fianco alle icone “batteria”, “memoria”, “sincronizzazione tabelle”, “websocket” e dell’icona vicino alla voce «Disconnetti» è definito nel codice.

LIGHT mode (UI di default)

DARK mode (Cliente1 UI)

RICERCA

LIGHT mode (UI di default)

DARK mode (Cliente1 UI)

PRODOTTO

In questa pagina il colore delle icone che indicano la disponibilità e la giacenza è definito nel codice.

LIGHT mode (UI di default)

Nell’immagine qui sopra “Primary Color” viene utilizzato per colorare anche lo sfondo del pulsante “AGGIUNGI AL CARRELLO”, mentre per il colore del font viene utilizzato “On Primary Color“.

DARK mode (Cliente1 UI)

In questa configurazione, per lo sfondo del pulsante “AGGIUNGI AL CARRELLO” viene usato il colore definito in “Secondary Color Variant”, mentre per il colore del font viene utilizzato “On Secondary Color“.