Utilizzo dei widget > 3D > Etichetta 3D
  
Etichetta 3D
Qual è la funzione di questo widget?
Il widget Etichetta 3D consente di visualizzare dati e informazioni sui modelli 3D.
Quando va utilizzato questo widget?
Utilizzare un widget Etichetta 3D per includere del testo nell'area di lavoro 3D di un'esperienza AR. Il widget può essere utilizzato per una semplice etichetta costituita da una o due parole o anche per etichette contenenti grandi quantità di testo.
Sono disponibili proprietà, servizi, eventi o azioni speciali?
Per visualizzare un elenco di proprietà, servizi ed eventi comuni a più widget, vedere Proprietà, servizi ed eventi comuni a più widget.
La seguente tabella riporta un elenco di proprietà specifiche di questo widget.
Proprietà
Descrizione
Altezza
Altezza dell'etichetta. Per default, questo valore è impostato su 0.05 (o quando il campo viene lasciato vuoto).
Classe
Classe assegnata al widget.
Le seguenti proprietà CSS sono attualmente supportate:
font-family - Imposta la famiglia di caratteri.
color - Imposta il colore del carattere o di riempimento.
--text-stroke-color - È simile a color, ma permette di impostare il colore del tratto del carattere.
--text-stroke-width - Imposta la larghezza del tratto.
font-weight - Imposta lo spessore del carattere.
font-style
- Impostare lo stile del carattere (normale, corsivo, obliquo, ecc.).
background-color - Imposta il colore di riempimento dell'etichetta.
text-decoration - Supporta la sottolineatura.
border-color - Imposta il colore del bordo dell'etichetta.
border-radius - Arrotonda gli angoli del bordo dell'immagine.
border-style - Imposta lo stile del bordo dell'etichetta.
border-width - Imposta la larghezza del tratto del bordo dell'etichetta.
border - Combina border-color, border-style e border-width.
padding - Applica la spaziatura interna fuori dal testo dell'etichetta.
Ad esempio, nel riquadro PROGETTO, in STILI, fare clic su Applicazione e immettere quanto segue nell'editor:
.my-label {
font-family: Century Gothic;
color: black;
--text-stroke-color: yellow;
--text-stroke-width: 3px;
font-weight: normal;
font-style: italic;
background-color: grey
}
* 
I colori specificati devono essere colori CSS. Se non si è certi dei colori CSS validi, è possibile eseguire una ricerca in Internet di "colori CSS".
Successivamente, nel campo Classe dell'etichetta 3D, immettere my-label, Questo si riferisce al contenuto aggiunto in Stili > Applicazione.
Attiva formattazione basata sullo stato
Consente di formattare il widget in base alle definizioni di stato che sono state definite in ThingWorx.
Se la casella di controllo è selezionata, vengono visualizzate le seguenti proprietà:
Campo dipendente
Definizione stato
Ad esempio, se un'etichetta 3D ha un valore Definizione stato di error, l'etichetta diventa rossa.
Per ulteriori informazioni sulle definizioni di stile e stato in ThingWorx, vedere Definizioni di stile e stato in ThingWorx Help Center.
Famiglia di caratteri
Stile del carattere. Immettere una famiglia di caratteri valida come Arial, Times New Roman, Century Gothic, ecc. Per default, questa opzione è impostata su Arial.
Colore carattere
Colore del carattere. Immettere il nome di un colore, un valore esadecimale o un valore RGBA. Ad esempio, se si desidera che il colore del carattere sia rosso, è possibile immettere uno dei seguenti valori:
red
#FF0000
rgba(255, 0, 0, 1)
Per default, questo valore è impostato su nero.
Colore contorno carattere
Colore del contorno del carattere. Immettere il nome di un colore, un valore esadecimale o un valore RGBA. Ad esempio, se si desidera che il contorno dell'etichetta sia rosso, è possibile immettere uno dei seguenti valori:
red
#FF0000
rgba(255, 0, 0, 1)
Per default, questo valore è impostato su bianco.
Scala
Scala dell'etichetta.
Coordinata X
Posizione dell'etichetta sull'asse X.
Coordinata Y
Posizione dell'etichetta sull'asse Y.
Coordinata Z
Posizione dell'etichetta sull'asse Z.
Rotazione X
Rotazione dell'etichetta intorno all'asse X.
Rotazione Y
Rotazione dell'etichetta intorno all'asse Y.
Rotazione Z
Rotazione dell'etichetta intorno all'asse Z.
Frontale
Ruota un widget intorno al proprio centro in modo che sia sempre rivolto verso l'utente che visualizza l'esperienza. È allineato con lo schermo.
Occlusivo
Se selezionata, la geometria di un widget è invisibile, ma allo stesso tempo nasconde qualsiasi altra augmentation dietro di essa nella scena 3D.
Pertanto, lo sfondo o il feed della fotocamera appare dove dovrebbe trovarsi il widget occluso. Questa proprietà può essere utilizzata per enfatizzare alcune augmentation nascondendo la geometria 3D circostante.
Sempre in primo piano
Sovrappone la geometria dei widget a tutte le altre augmentation nella scena, indipendentemente dalla sua profondità nella scena 3D. Se impostata su , la geometria non è mai nascosta da altre augmentation. Generalmente questa proprietà può essere utilizzata per etichette o sensori che devono restare sempre visibili.
Opacità (1 opaco - 0 trasparente)
Un numero compreso tra 0 e 1 che controlla il livello di trasparenza dell'oggetto. 0 = completamente trasparente e 1 = completamente opaco.
Pivot
Determina il punto di rotazione dell'immagine:
In alto a sinistra
In alto al centro
In alto a destra
Al centro a sinistra
Al centro
Al centro a destra
In basso a sinistra
In basso al centro
In basso a destra
Come funziona il widget
Ecco un esempio dell'aspetto che potrebbe avere il widget.
Passi fondamentali richiesti per l'uso
Come si presenta
1. Trascinare e rilasciare un widget Etichetta 3D nell'area di lavoro.
2. (Facoltativo) Selezionare la casella di controllo Frontale nel riquadro DETTAGLI.
3. Immettere il testo che si desidera visualizzare nel campo Testo o associare una proprietà dati al campo Testo del widget.
Definire lo stile del widget con CSS
Per definire lo stile del widget è possibile utilizzare CSS. Quello che segue è un esempio di classe CSS che è possibile creare e applicare:
* 
È consigliabile assegnare nomi univoci alle classi in modo che non siano in conflitto con altre classi o proprietà predefinite.
Esempio CSS
Come si presenta
.ptc-3DLabel {
font-family: Century Gothic;
color: black;
--text-stroke-color: yellow;
--text-stroke-width: 3px; /*csslint ignore*/
font-weight: normal;
font-style: italic;
background-color: grey
}
Per ulteriori informazioni sull'implementazione delle classi CSS, vedere Stili dell'applicazione.