Proprietà
|
JavaScript
|
Tipo
|
Descrizione
|
||
Testo
|
text
|
string
|
Testo visualizzato sul widget.
|
||
Altezza
|
height
|
number
|
Altezza dell'etichetta. Per default, questo valore è impostato su 0.05 (o quando il campo viene lasciato vuoto).
|
||
Larghezza
|
width
|
number
|
Larghezza dell'etichetta.
|
||
Classe
|
class
|
string
|
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 }
Successivamente, nel campo Classe dell'etichetta 3D, immettere my-label, Questo si riferisce al contenuto aggiunto in > .
|
||
Attiva formattazione basata sullo stato
|
enableStateFormatting
|
boolean
|
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.
|
||
Campo dipendente
|
stateFormatValue
|
string
|
Questa proprietà è visibile se la casella di controllo Attiva formattazione basata sullo stato è selezionata. Per ulteriori informazioni sulle definizioni di stile e stato in ThingWorx, vedere Definizioni di stile e stato in ThingWorx Help Center.
|
||
Definizione stato
|
stateFormat
|
boolean
|
Questa proprietà è visibile se la casella di controllo Attiva formattazione basata sullo stato è selezionata. Per ulteriori informazioni sulle definizioni di stile e stato in ThingWorx, vedere Definizioni di stile e stato in ThingWorx Help Center.
|
||
Famiglia di caratteri
|
fontFamily
|
string
|
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
|
fontColor
|
string
|
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
|
fontOutlineColor
|
string
|
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
|
scale
|
string
|
Scala dell'etichetta.
|
||
Coordinata X
|
x
|
number
|
Posizione dell'etichetta sull'asse X.
|
||
Coordinata Y
|
y
|
number
|
Posizione dell'etichetta sull'asse Y.
|
||
Coordinata Z
|
z
|
number
|
Posizione dell'etichetta sull'asse Z.
|
||
Rotazione X
|
rx
|
number
|
Rotazione dell'etichetta intorno all'asse X.
|
||
Rotazione Y
|
ry
|
number
|
Rotazione dell'etichetta intorno all'asse Y.
|
||
Rotazione Z
|
rz
|
number
|
Rotazione dell'etichetta intorno all'asse Z.
|
||
Frontale
|
billboard
|
boolean
|
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
|
occlude
|
boolean
|
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
|
decal
|
boolean
|
Sovrappone la geometria dei widget a tutte le altre augmentation nella scena, indipendentemente dalla sua profondità nella scena 3D. Se impostata su Sì, 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)
|
opacity
|
number
|
Un numero compreso tra 0 e 1 che controlla il livello di trasparenza dell'oggetto. 0 = completamente trasparente e 1 = completamente opaco.
|
||
Pivot
|
pivot
|
number
|
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
|
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.
|
|
È 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 } |