Propiedad
|
JavaScript
|
Tipo
|
Descripción
|
||
Texto
|
text
|
string
|
Texto que aparece en el widget.
|
||
Altura
|
height
|
number
|
Altura de la etiqueta. Por defecto, se define en 0,05 o cuando el campo se deja vacío.
|
||
Anchura
|
width
|
number
|
Ancho de la etiqueta.
|
||
Clase
|
class
|
string
|
Clase asignada al widget.
Se soportan las propiedades siguientes de CSS:
• font-family: define la familia de fuentes
• color: define el color de relleno/fuente
• --text-stroke-color: similar a color, pero define el color de pasada de la fuente
• --text-stroke-width: define la anchura de la pasada
• font-weight: define el ancho o el grosor de la fuente
• font-style
: define el estilo de la fuente (normal, cursiva, oblicua, etc.)
• background-color: define el color de relleno de la etiqueta
• text-decoration: soporta el subrayado
• border-color: define el color del borde alrededor de la etiqueta
• border-radius: redondea las esquinas del borde alrededor de la imagen
• border-style: define el estilo del borde alrededor de la etiqueta
• border-width: define la anchura de pasada del borde alrededor de la etiqueta
• border: combina border-color, border-style y border-width
• padding: aplica caracteres de relleno fuera del texto de la etiqueta
Por ejemplo, en el panel PROYECTO, bajo ESTILOS, pulse en Aplicación e indique lo siguiente en el 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 }
A continuación, en el campo Clase de la etiqueta 3D, escriba: my-label. Hace referencia al contenido que se ha añadido en > .
|
||
Activar formato basado en estado
|
enableStateFormatting
|
boolean
|
Permite aplicar formato al widget según las definiciones de estado que se hayan establecido en ThingWorx.
Si la casilla está seleccionada, aparecen las propiedades siguientes:
• Campo dependiente
• Definición de estado
Por ejemplo, si una etiqueta 3D tiene un valor de Definición de estado de error, la etiqueta cambia a color rojo.
Para obtener más información sobre las definiciones de estado y de estilo en ThingWorx, consulte Definiciones de estado y de estilo en el ThingWorx Centro de ayuda.
|
||
Campo dependiente
|
stateFormatValue
|
string
|
Esta propiedad está visible si se selecciona la casilla de verificación Activar formato según estado. Para obtener más información sobre las definiciones de estado y de estilo en ThingWorx, consulte Definiciones de estado y de estilo en el ThingWorx Centro de ayuda.
|
||
Definición de estado
|
stateFormat
|
boolean
|
Esta propiedad está visible si se selecciona la casilla de verificación Activar formato según estado. Para obtener más información sobre las definiciones de estado y de estilo en ThingWorx, consulte Definiciones de estado y de estilo en el ThingWorx Centro de ayuda.
|
||
Familia de fuentes
|
fontFamily
|
string
|
Estilo de la fuente. Indique una familia de fuentes válida como Arial, Times New Roman, Century Gothic, etc. Por defecto, este valor se define en Arial.
|
||
Color de fuente
|
fontColor
|
string
|
Color de la fuente. Indique un nombre de color, valor hexadecimal o de RGBA. Por ejemplo, para que el color de la fuente sea rojo, se puede indicar cualquiera de las opciones siguientes:
• red
• #FF0000
• rgba(255, 0, 0, 1)
Por defecto, se define en negro.
|
||
Color de contorno de fuente
|
fontOutlineColor
|
string
|
Color del contorno de la fuente. Indique un nombre de color, valor hexadecimal o de RGBA. Por ejemplo, para que el color del contorno de la etiqueta sea rojo, se puede indicar cualquiera de las opciones siguientes:
• red
• #FF0000
• rgba(255, 0, 0, 1)
Por defecto, se define en blanco.
|
||
Escala
|
scale
|
string
|
Escala de la etiqueta.
|
||
Coordenada X
|
x
|
number
|
Ubicación de la etiqueta en el eje X.
|
||
Coordenada Y
|
y
|
number
|
Ubicación de la etiqueta en el eje Y.
|
||
Coordenada Z
|
z
|
number
|
Ubicación de la etiqueta en el eje Z.
|
||
Rotación X
|
rx
|
number
|
Rotación de la etiqueta en torno al eje X.
|
||
Rotación Y
|
ry
|
number
|
Rotación de la etiqueta en torno al eje Y.
|
||
Rotación Z
|
rz
|
number
|
Rotación de la etiqueta en torno al eje Z.
|
||
Cartel
|
billboard
|
boolean
|
Hace girar un widget alrededor de su centro de forma que siempre esté encarado al visualizador. Se alinea con la pantalla.
|
||
Oclusión
|
occlude
|
boolean
|
Si se selecciona esta opción, la geometría de un widget es invisible, pero al mismo tiempo oculta cualquier otro aumento detrás de la escena 3D.
Así pues, en lugar del widget obstruido aparecen el fondo o el avance de la cámara. Esta opción puede utilizarse para realzar aumentos ocultando la geometría 3D circundante.
|
||
Siempre arriba
|
decal
|
boolean
|
Superpone la geometría de los widgets en cualquier otro aumento de la escena sea cual sea su profundidad en la escena 3D. Si se define en Sí, nunca lo ocultan otros aumentos. Suele utilizarse en etiquetas o sensores que siempre deben estar visibles.
|
||
Opacidad (1 opaco - 0 transparente)
|
opacity
|
number
|
Número entre 0 y 1 que controla el nivel de transparencia del objeto. 0 = completamente transparente; 1 = completamente opaco.
|
||
Giro
|
pivot
|
number
|
Determina el punto de giro de la imagen:
• Arriba a la izquierda
• Arriba en el centro
• Arriba a la derecha
• En medio a la izquierda
• En medio en el centro
• En medio a la derecha
• Abajo a la izquierda
• Abajo en el centro
• Abajo a la derecha
|
Pasos mínimos para utilizarlo
|
Aspecto
|
1. Arrastre un widget de Etiqueta 3D y suéltelo en el lienzo.
2. (Opcional) Seleccione la casilla Cartel en el panel DETALLES.
3. Escriba el texto que se debe mostrar en el campo Texto; también se puede enlazar una propiedad de datos al campo Texto del widget.
|
|
Es aconsejable asignar nombres exclusivos a las clases; de este modo, no entrarán en conflicto con otras clases ni con propiedades de OOTB.
|
Ejemplo de CSS
|
Aspecto
|
.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 } |