Propriété
|
JavaScript
|
Type
|
Description
|
||
Texte
|
text
|
string
|
Texte affiché sur le widget.
|
||
Hauteur
|
height
|
number
|
Hauteur de l'en-tête. Par défaut, ce paramètre est défini sur 0,05 (ou lorsque le champ est vide).
|
||
Largeur
|
width
|
number
|
Largeur de l'en-tête.
|
||
Classe
|
class
|
string
|
Classe attribuée au widget.
Les propriétés CSS suivantes sont actuellement prises en charge :
• font-family : définit la famille de polices
• color : définit la couleur de police/remplissage
• --text-stroke-color : semblable à color, mais permet de définir la couleur de trait de la police
• --text-stroke-width : définit la largeur du trait
• font-weight : définit le poids ou l'épaisseur de la police
• font-style
: définit le style de la police (normal, italique, oblique, etc.)
• background-color : définit la couleur de remplissage de l'étiquette
• text-decoration : prend en charge le soulignement
• border-color : définit la couleur du bord de l'étiquette
• border-radius : arrondit les coins du bord de l'image
• border-style : définit le style du bord de l'étiquette
• border-width : définit la largeur du contour du bord de l'étiquette
• border : combine border-color, border-style et border-width
• padding : applique le remplissage à l'extérieur du texte de l'étiquette
Par exemple, dans le volet PROJET, sous STYLES, cliquez sur Application et entrez les informations suivantes dans l'éditeur :
.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 }
Puis, dans le champ Classe de l'étiquette 3D, entrez my-label. Cela fait référence au contenu ajouté dans > .
|
||
Activer mise en forme basée sur l'état
|
enableStateFormatting
|
boolean
|
Permet de mettre en forme le widget en fonction des définitions d'état qui ont été définies dans ThingWorx.
Si la case à cocher est sélectionnée, les propriétés suivantes s'affichent :
• Champ dépendant
• Définition d'état
Par exemple, si la définition d'état de l'étiquette 3D a la valeur error, l'étiquette devient rouge.
Pour plus d'informations sur les définitions des styles et des états dans ThingWorx, consultez la rubrique Définitions des styles et des états dans le Centre d'aide ThingWorx.
|
||
Champ dépendant
|
stateFormatValue
|
string
|
Cette propriété est visible si la case Activer formatage basé sur l'état est cochée. Pour plus d'informations sur les définitions des styles et des états dans ThingWorx, consultez la rubrique Définitions des styles et des états dans le Centre d'aide ThingWorx.
|
||
Définition d'état
|
stateFormat
|
boolean
|
Cette propriété est visible si la case Activer formatage basé sur l'état est cochée. Pour plus d'informations sur les définitions des styles et des états dans ThingWorx, consultez la rubrique Définitions des styles et des états dans le Centre d'aide ThingWorx.
|
||
Famille de polices
|
fontFamily
|
string
|
Style de la police. Entrez une famille de polices valide comme Arial, Times New Roman, Century Gothic, etc. Par défaut, la police est Arial.
|
||
Couleur de la police
|
fontColor
|
string
|
Couleur de la police. Entrez un nom de couleur, le code hexadécimal ou la valeur RVBA. Par exemple, si vous souhaitez que la couleur de police soit rouge, vous pouvez entrer les éléments suivants :
• red
• #FF0000
• rgba(255, 0, 0, 1)
Par défaut, ce paramètre est défini sur "black".
|
||
Couleur de contour de police
|
fontOutlineColor
|
string
|
Couleur du contour de la police. Entrez un nom de couleur, le code hexadécimal ou la valeur RVBA. Par exemple, si vous souhaitez que le contour de l'étiquette soit rouge, vous pouvez entrer les éléments suivants :
• red
• #FF0000
• rgba(255, 0, 0, 1)
Par défaut, ce paramètre est défini sur "white".
|
||
Echelle
|
scale
|
string
|
Echelle de l'étiquette.
|
||
Coordonnée X
|
x
|
number
|
Emplacement de l'étiquette sur l'axe X.
|
||
Coordonnée Y
|
y
|
number
|
Emplacement de l'étiquette sur l'axe Y.
|
||
Coordonnée Z
|
z
|
number
|
Emplacement de l'étiquette sur l'axe Z.
|
||
Rotation X
|
rx
|
number
|
Rotation de l'étiquette autour de l'axe X.
|
||
Rotation Y
|
ry
|
number
|
Rotation de l'étiquette autour de l'axe Y.
|
||
Rotation Z
|
rz
|
number
|
Rotation de l'étiquette autour de l'axe Z.
|
||
Panneau d'affichage
|
billboard
|
boolean
|
Rotation d'un widget autour de son centre, afin qu'il fasse toujours face à l'utilisateur. Il est aligné sur l'écran.
|
||
Occlusion
|
occlude
|
boolean
|
Si elle est activée, la géométrie d'un widget est invisible, mais elle masque également toute autre augmentation se trouvant derrière elle dans la scène 3D.
Par conséquent, l'arrière-plan ou le flux de caméra s'affiche à l'emplacement où le widget obstrué devrait se trouver. Cela peut servir à mettre en évidence certaines augmentations en masquant la géométrie 3D qui se trouve à proximité.
|
||
Toujours visible
|
decal
|
boolean
|
Superpose la géométrie de widgets aux autres augmentations de la scène, quelle que soit sa profondeur dans la scène 3D. Si la valeur configurée est Oui, elle n'est jamais masquée par d'autres augmentations. Généralement, ce paramètre peut être utilisé pour les étiquettes ou capteurs qui doivent toujours rester visibles.
|
||
Opacité (1 Opaque - 0 Transparent)
|
opacity
|
number
|
Nombre compris entre 0 et 1 qui contrôle le niveau de transparence de l'objet. 0 = complètement transparent et 1 = complètement opaque.
|
||
Pivot
|
pivot
|
number
|
Détermine le point pivot de l'image :
• En haut à gauche
• En haut au centre
• En haut à droite
• Au milieu à gauche
• Au milieu au centre
• Au milieu à droite
• En bas à gauche
• En bas au centre
• En bas à droite
|
Etapes minimales requise pour l'utilisation
|
Apparence
|
1. Faites glisser et déposez un widget Image 3D sur le canevas.
2. (Facultatif) Sélectionnez la case à cocher de Panneau d'affichage dans le volet DETAILS.
3. Entrez le texte que vous souhaitez afficher dans le champ Texte, ou liez une propriété de données dans le champ Texte du widget.
|
|
Rappelez-vous qu'il est préférable de donner à vos classes des noms uniques afin qu'ils ne soient pas en conflit avec d'autres classes ou propriétés prédéfinies.
|
Exemple de CSS
|
Apparence
|
.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 } |