Attributi del componente.

Qui descrivo tutti gli attributi che ho utilizzato nei miei progetti utilizzando i display della serie Nextion basic NX3224T028_011.

Attributi comuni per quasi tutti i componenti. 

"type" - il tipo del componente, rappresentato da un numero. Facendo clic sull'attributo verrà visualizzato il significato del numero nella parte inferiore del riquadro degli attributi, ad esempio: 116 rappresenta il tipo del componente "Text".

"id" - ID del componente, viene rilasciato automaticamente e non può essere modificato. Utilizzato durante la scrittura del codice sul display e l'interrogazione degli attributi tramite UART.

"objname" - è il nome del componente. Utilizzato durante la scrittura del codice e l'interrogazione degli attributi tramite UART.

"vscope" - determina se un elemento è accessibile per modificare i suoi attributi e può avere due significati:

  1. "locale" – gli attributi dell'elemento possono essere letti e modificati solo se la pagina in cui si trova è attiva. Questo vale sia per il codice eseguito sul display stesso sia quando si effettuano richieste tramite UART.
  2. "globale" - gli attributi di un elemento possono essere letti e modificati in qualsiasi momento. Questo vale sia per il codice eseguito sul display stesso sia quando si effettuano richieste tramite UART. Quando si utilizza questo valore di attributo, è necessario assicurarsi che il nome sia univoco all'interno dell'intero progetto.
Nota: componenti locali, durante il rendering della pagina a cui sono collegati, vengono sempre inizializzati con i valori assegnati al momento dello sviluppo del progetto. Mentre la pagina viene visualizzata, questi valori possono essere modificati utilizzando il codice eseguibile sul display o tramite UART, ma quando ci si sposta su un'altra pagina, tutti i valori degli attributi modificati vengono reimpostati su quelli impostati durante lo sviluppo. I valori degli attributi degli elementi globali non cambiano quando ci si sposta da una pagina all'altra.
"sta" - determina la modalità di riempimento dello sfondo dell'elemento e può assumere i seguenti valori:
  1. "solid color" – riempie lo sfondo con un colore solido.
  2. "image" - utilizza un'immagine come sfondo. La dimensione dell'elemento viene adattata alla dimensione dell'immagine.
  3. "crop image" – Il significato è più vicino a uno sfondo trasparente. L'ideologia è questa: si prende una immagine come sfondo, ma la si sovrappone alle coordinate zero della pagina. Lo sfondo dell'elemento è una sezione dell'immagine che coincide con la proiezione dell'elemento sull'area della pagina. Ma è più facile provare che spiegare.
"style" - stile componente. Valori possibili:
  1. flat - non verrà aggiunta alcuna linea attorno ai bordi.
  2. border - le linee verranno disegnate attorno ai bordi.
  3. 3D_Down - le linee verranno disegnate per dare l'impressione di abbassate.
  4. 3D_Up - le linee verranno disegnate impressione di resa in rilievo.
  5. 3D_Auto - le linee verranno disegnate su/giù in base allo stato.
"key" - ti consente di incorporare uno degli esempi di tastiera inclusi (il componente deve essere impostato su un valore .vscope globale prima dell'uso).
"font" – indice del carattere.
"bco" – colore di riempimento dello sfondo. Questo attributo viene visualizzato quando si seleziona il valore "solid color" nell'attributo"sta".
"pic" – indice dell'immagine di sfondo. Questo attributo appare quando selezioni il valore "image" nell'attributo "sta".
"picс" – indice dell'immagine ritagliata per lo sfondo. Questo attributo viene visualizzato quando selezioni il valore "crop image" nell'attributo "sta".
"pco" – colore della scritta. Il valore dell'attributo è il codice colore in formato High.
"isbr" - impostazione per più righe (true) o riga singola (false).
"xcen" – allineamento orizzontale. Valori possibili: left, center, right. 
"ycen" – allineamento verticale. Valori possibili: up, center, down. 
"txt" – testo visualizzato.
"txt-maxl" – lunghezza massima del testo. Se passi un valore più lungo del valore di questo attributo all'attributo "txt", i caratteri extra alla fine verranno tagliati.
"spax" - aggiungerà una spaziatura extra di pixel vuoti a destra di ogni carattere (da 0 a 255).
"spay" - aggiungerà una spaziatura extra di pixel vuoti alla fine di ogni carattere (da 0 a 255).
"x" e "y" – coordinate di inserimento.
"w" e "h" – larghezza e altezza dell'inserto.

Attributi individuali dei componenti. 

Text - campo di testo (Figura 1).

  1. "pw" - mascheramento, il carattere è disattivato, verrà mascherato con un asterisco.

                    Figura 1 

Number - campo di valore numerico (Figura 2).

  1. "val" – valore visualizzato. Può visualizzare numeri da -2147483648 a 2147483647.
  2. "lenth" – la lunghezza del numero come stringa. I valori possibili sono da 0 a 10. Se zero, la lunghezza del numero viene determinata automaticamente, negli altri casi, se la lunghezza del numero passato come valore dell'attributo "val" è maggiore del valore di "lenth ", gli zeri mancanti vengono aggiunti davanti al numero e se la lunghezza del numero passato come valore dell'attributo "val" è inferiore al valore "lenth", i caratteri extra vengono eliminati davanti al numero.
  3. "format" - consente una scelta tra numero intero (decimal), valuta (currency) (separati da virgole ogni tre cifre, non valori float) o esadecimale (hex).

                      Figura 2 

Button - pulsante senza fissazione (Figura 3).

  1. "bco" – colore del pulsante quando non viene premuto. Questo attributo viene visualizzato quando si seleziona il valore "solid color" nell'attributo "sta".
  2. "bco2" – colore del pulsante nella posizione premuta. Questo attributo viene visualizzato quando si seleziona il valore "solid color" nell'attributo "sta".
  3. "pic" – indice dell'immagine del pulsante nella posizione non premuta. Questo attributo appare quando selezioni il valore "image" nell'attributo "sta".
  4. "pic2" – indice dell'immagine del pulsante nella posizione premuta. Questo attributo appare quando selezioni il valore "image" nell'attributo "sta".
  5. "picс" – indice dell'immagine del pulsante ritagliato nella posizione non premuta. Questo attributo viene visualizzato quando selezioni il valore "crop image" nell'attributo "sta".
  6. "picс2" – indice dell'immagine ritagliata del pulsante nella posizione premuta. Questo attributo viene visualizzato quando selezioni il valore "crop image" nell'attributo "sta".
  7. "pco" – il colore della scritta sul pulsante quando non è premuto. Il valore dell'attributo è un codice colore nel formato Hight Color.
  8. "pco2" – colore della scritta sul pulsante nella posizione premuta. Il valore dell'attributo è un codice colore nel formato Hight Color.

                   Figura 3

Progress bar - barra di avanzamento (Figura 4).

Visualizza un intervallo compreso tra 0 e 100 che indica la percentuale di avanzamento. Una soluzione molto interessante è quando si utilizzano le immagini.
  1. "dez" – direzione. Valori possibili: "horizontal" - orizzontalmente, "vertical" – verticalmente.
  2. "val" – riempimento. Valori possibili: da 0 a 100.
  3. "bco" – colore con riempimento allo 0%. Questo attributo viene visualizzato quando si seleziona il valore "solid color" nell'attributo "sta".
  4. "рco" – colore di riempimento da 0 a 100%. Questo attributo viene visualizzato quando si seleziona il valore "solid color" nell'attributo "sta".
  5. "bpic" – indice dell'immagine quando riempito allo 0%. Questo attributo appare quando selezioni il valore "image" nell'attributo "sta".
  6. "ppic" – indice dell'immagine quando riempito da 0 a 100%. Questo attributo appare quando selezioni il valore "image" nell'attributo "sta".

                   Figura 4

Picture - immagine (Figura 5).

  1. "pic" – indice dell'immagine.

                   Figura 5

Crop - l'immagine ritagliata (Figura 6).

  1. "picс" – indice dell'immagine.

                   Figura 6

Hotspot - pulsante invisibile (Figura 7).

                    Figura 7

Gauge - indicatore. Visualizza una freccia ruotata di un angolo specificato  (Figura 8).

  1. "val" – valore dell'angolo di rotazione della freccia da 0 a 360.
  2. "pco" – colore della freccia. Il valore dell'attributo è un codice colore nel formato Hight Color.
  3. "wid" – spessore della freccia. Valore da 0 a 5.

                    Figura 8

Waveform - grafico, il componente costruisce un grafico per punti (Figura 9).

  1. "dir" – direzione di costruzione. Valori possibili: "left to right" - da sinistra a destra, "right to left" – da destra a sinistra, "right align" - allineamento a destra.
  2. "ch" – numero di canali visualizzati. I valori possibili sono da 1 a 4.
  3. "gdc" - colore della griglia.
  4. "gdw" - larghezza griglia (0 - nessuna griglia).
  5. "gdh" - altezza della griglia (0 - nessuna griglia).
  6. "рco0" – colore del grafico del canale 1.
  7. "рco1" – colore del grafico del canale 2. Questo attributo appare quando il valore dell'attributo "ch" è maggiore di 1.
  8. "рco2" – colore del grafico del canale 3. Questo attributo appare quando il valore dell'attributo "ch" è maggiore di 2.
  9. "рco3" – colore del grafico del canale 4. Questo attributo appare quando il valore dell'attributo "ch" è maggiore di 3.

                    Figura 9

Slider - dispositivo di scorrimento (Figura 10).

  1. "mode" – direzione del cursore. Valori possibili: "horizontal" - orizzontalmente, "Vertical" – verticalmente.
  2. "psta" – modalità di disegno del cursore a scorrimento. Valori possibili: "solido" – un rettangolo riempito con un colore solido, "image" – un'immagine viene utilizzata come cursore.
  3. "wid" – larghezza del cursore. 
  4. "hig" – altezza del cursore.
  5. "рco" – colore del cursore. Questo attributo appare quando si seleziona il valore "solid" nell'attributo "psta".
  6. "pic2" – indice dell'immagine del cursore. Questo attributo appare quando selezioni il valore "image" nell'attributo "psta".
  7. "val" – valore corrispondente alla posizione del cursore.
  8. "maxval" – valore massimo del valore del cursore.
  9. "minval" – il valore minimo del valore del cursore.

                    Figura 10

Dual-state button - interruttore con due posizioni fisse (Figura 11).

  1. "bco" – colore dell'interruttore in posizione 0. Questo attributo appare quando il valore "solid color" è selezionato nell'attributo "sta".
  2. "bco2" – colore dell'interruttore in posizione 1. Questo attributo appare quando il valore "solid color" è selezionato nell'attributo "sta".
  3. "pic" – indice dell'immagine dell'interruttore in posizione 0. Questo attributo appare quando il valore "image" è selezionato nell'attributo "sta".
  4. "pic2" – indice dell'immagine dell'interruttore in posizione 1. Questo attributo appare quando il valore "image" è selezionato nell'attributo "sta".
  5. "picс" – indice dell'immagine ritagliata dell'interruttore in posizione 0. Questo attributo appare quando si seleziona il valore "crop image" nell'attributo "sta".
  6. "picс2" – indice dell'interruttore ritagliato in posizione 1. Questo attributo appare quando si seleziona il valore "crop image" nell'attributo "sta".
  7. "val" – posizione dell'interruttore. Possibili valori 0 e 1.

                   Figura 11

Scrolling text - testo scorrevole (Figura 12).

  1. "pco" - colore del carattere.
  2. "dir" - direzione di scorrimento. Valori possibili: da sinistra a destra, da destra a sinistra, dall'alto al basso, dal basso all'alto.
  3. "dis" - distanza di scorrimento in ms. Valori possibili: da 2 a 50.
  4. "tim" - intervallo di tempo in ms. Valori possibili: da 80 a 65535.
  5. "en" - abilitazione. Valori possibili: 0 - disabilita, 1 - abilita.

                   Figura 12

Xfloat - numeri in virgola mobile (Figura 13).

  1. "val" - valore iniziale. Valori possibili: da -2147483648 a 2147483647.
  2. "vvs0" - imposta il numero di cifre mostrate a sinistra del decimale (utile per gli zeri iniziali).
  3.  "vvs1" - imposta il numero di cifre mostrate a destra del decimale.

                    Figura 13

Variable - variabile. Serve per utilizzare la memorizzazione dei dati per i calcoli (Figura 14).

  1. "sta" - è il tipo della variabile. Valori possibili: "Number" - la variabile memorizza un valore numerico, "String" - la variabile memorizza un valore stringa.
  2. "val" – valore numerico della variabile. Questo attributo viene visualizzato quando si seleziona il valore "Number" nell'attributo "sta".
  3. "txt" - è il valore stringa della variabile. Questo attributo viene visualizzato quando si seleziona il valore "String" nell'attributo "sta".
  4. "txt-maxl" – la lunghezza massima del valore stringa della variabile. Questo attributo viene visualizzato quando si seleziona il valore "String" nell'attributo "sta".

                   Figura 14

Timer - fa sì che "Timer Event" venga generato periodicamente dopo un tempo specificato (Figura 15).

  1. "tim" – periodo del timer in millisecondi. Valori possibili da 50 ms. fino a 65535 ms.
  2. "en" – abilitazione del timer. Valori possibili: 0 - disabilita, 1 - abilita.

                    Figura 15

TouchCap - utile per attivare eventi su un evento touch (premuto o rilasciato ) (Figura 16).

  1. "val" - memorizza il valore .id dell'ultimo componente toccato (premuto o rilasciato).

                      Figura 16 

Pagina (Figura 17).

"sta" – Modalità di riempimento dello sfondo. Valori possibili:
  1. "no background" – nessun riempimento. Quando una pagina viene visualizzata in questa modalità, la pagina precedentemente renderizzata apparirà come sfondo.
  2. "solid color" - riempimento solido con il colore specificato utilizzando l'attributo "bco". Determina il colore con cui verrà riempito lo sfondo della pagina. Il campo del valore per questo attributo visualizza il codice colore nel formato Hight Color. Facendo doppio clic su questo campo si apre la finestra di selezione del colore (Figura 18). Questa finestra viene utilizzata per impostare i valori di tutti gli attributi associati al colore.
  3. "image" - utilizza un'immagine come sfondo. L'immagine con l'indice specificato nell'attributo "pic" viene utilizzata come immagine. Di conseguenza, questa immagine deve prima essere caricata nella libreria immagini. La dimensione dell'immagine deve corrispondere alla risoluzione dello schermo del pannello. Se l'immagine supera la dimensione del pannello verrà generato un errore e l'immagine non verrà sovrapposta, se la dimensione dell'immagine è inferiore alla dimensione del pannello, la pagina precedentemente disegnata sarà visibile nelle aree dello schermo non coperte da essa.

                     Figura 17

                     Figura 18 

Crea il tuo sito web gratis! Questo sito è stato creato con Webnode. Crea il tuo sito gratuito oggi stesso! Inizia