Widget de temporizador (con temas)
El widget de temporizador permite realizar un seguimiento del tiempo mediante uno de estos dos modos: una cuenta atrás para realizar un seguimiento del tiempo y activar un evento, y un cronómetro para medir la duración.
 | Este widget también está disponible como componente Web en la biblioteca ThingWorx Web Component SDK. |
Anatomía
1. Rótulo de widget
2. Un valor de tiempo que tiene formato para mostrar días y milisegundos
3. Icono de widget
Configuración del formato de hora
El widget de temporizador tiene varias configuraciones para personalizar cómo se muestra la hora. La propiedad DisplayMilliseconds añade milisegundos al formato de hora para que la temporización sea más precisa.
Para contar los días en los que el tiempo supera las 24 horas, defina la propiedad DisplayDays en true.
Configuración del modo de temporizador
La propiedad TimerMode permite controlar cómo el widget cuenta el tiempo. Se puede cambiar entre dos modos: una cuenta regresiva y un cronómetro
• En el modo de cuenta atrás, el temporizador comienza a partir de un valor inicial y cuenta regresivamente hasta cero. Este modo es útil cuando se necesita medir una duración específica, como una cuenta atrás para un evento o una fecha límite. Cuando el temporizador llega a cero, se activa el evento CountdownCompleted. Este evento se puede enlazar para activar acciones específicas, como mostrar una notificación o ejecutar una función o un servicio. A continuación se indican las propiedades que se definen o enlazan para este modo:
◦ InitialValue: esta propiedad se establece para definir el tiempo de inicio en milisegundos.
◦ Running: esta propiedad booleana se enlaza para controlar el inicio y la detención de la cuenta atrás.
◦ CountdownCompleted: este evento se enlaza para activar acciones cuando finaliza la cuenta atrás.
◦ Reset: este servicio se enlaza para redefinir la cuenta atrás al valor inicial.
◦ Value: se devuelve el valor de tiempo actual en milisegundos, que se actualiza a medida que se ejecuta el temporizador.
• En el modo de cronómetro, el temporizador comienza desde cero y se incrementa con el tiempo, midiendo la duración de una actividad en curso. Este modo es ideal para realizar un seguimiento de la duración de tareas o eventos, como cronometrar un entrenamiento o una sesión de cocina. El temporizador continúa ejecutándose hasta que se detiene o reinicia manualmente. A continuación se indican las propiedades que se pueden definir o enlazar para este modo:
◦ InitialValue: esta propiedad se establece para definir el tiempo de inicio en milisegundos.
◦ Running: esta propiedad booleana se enlaza para controlar el inicio y la parada del cronómetro.
◦ Reset: este servicio se enlaza para redefinir el cronómetro a cero.
◦ Value: se devuelve el valor de tiempo actual en milisegundos, que se actualiza a medida que se ejecuta el temporizador.
Aplicación de formato de estado al widget
Se puede configurar el formato de estado para aplicar un estilo dinámico al widget de temporizador en función de su valor. A diferencia de la propiedad AlternateStyle, se pueden definir múltiples estados que se aplican en función del valor actual del widget. Esto permite aplicar estilos de widget para distintos estados. En la siguiente imagen se muestra la configuración de formato de estado para un widget de temporizador en modo de cuenta atrás. Se aplican dos estilos de estado en función de los valores. En el primer estado, el color del texto cambia a naranja cuando el valor es inferior a 20000 milisegundos. En el segundo estado, el color cambia a rojo cuando el valor es inferior a 10000 milisegundos.
| | Al aplicar el formato de estado, solo se puede mostrar un icono para los estados alternativos y estándar del widget. |
Definición de un valor inicial
Se puede utilizar la propiedad del widget InitialValue para definir una hora de inicio para el temporizador. Sin embargo, cuando esta propiedad está enlazada, el temporizador no se actualiza automáticamente con un nuevo valor del enlace. En este caso, se debe activar el servicio Reset para asegurarse de que el temporizador utiliza el valor actualizado.
Aplicación de un estilo alternativo
El widget de temporizador soporta un estado alternativo que cambia el estilo de widget por defecto. Este estado se puede utilizar para proporcionar un indicador visual que permita a los usuarios distinguir fácilmente entre diferentes estados o condiciones del temporizador. Para activar este estado, defina la propiedad AlternateStyle en True. Por ejemplo, en una aplicación de supervisión de producción, el temporizador puede mostrar el tiempo restante en un color estándar. El temporizador puede cambiar a un color rojo cuando la cuenta regresiva llega a los últimos 10 segundos, alertando al usuario de que el tiempo se está acabando. Para añadir un icono personalizado para este estado, utilice la propiedad AlternateIcon del widget. Se pueden personalizar los estilos por defecto y alternativos de cada estado del widget mediante las propiedades disponibles en el panel Propiedades de estilo. En la siguiente imagen se muestra el estilo por defecto para el estado alternativo del widget.
A continuación, se indica la prioridad del estilo de mayor a menor cuando se aplican el estilo alternativo y el formato de estado:
1. Formato de estado
2. Estilo alternativo
3. Propiedades de estilo de widget
Propiedades de los widgets
Nombre de la propiedad | Descripción | Tipo base | Valor por defecto | ¿Es enlazable? | ¿Es localizable? |
|---|---|---|---|---|---|
DisplayMilliseconds | Se añaden milisegundos al formato de hora. Cuando se define en true, se muestran milisegundos en el temporizador. | BOOLEAN | Falso | S | N |
ValueLabelType | Definir el tipo de rótulo del valor del temporizador. | STRING | Subcabecera | N | N |
Icon | Definir una imagen de icono para el temporizador. | MEDIALINK | Vacío | N | |
AlternateIcon | Definir una imagen de icono para el temporizador en un estilo alternativo. | MEDIALINK | Vacío | N | N |
IconAlignment | Definir la alineación del icono en relación con el valor del temporizador. | STRING | Derecha | N | N |
AlternateIconAlignment | Definir la alineación del icono alternativo en relación con el valor del temporizador. | STRING | Derecha | N | N |
IconSize | Especificar el ancho y la altura del icono en píxeles. | NUMBER | 16 | S | N |
AlternateIconSize | Especificar el ancho y la altura del icono de estilo alternativo en píxeles. | NUMBER | 16 | S | N |
AlternateStyle | Definir el temporizador en un estado alternativo utilizando un estilo alternativo y un icono alternativo. | BOOLEAN | Falso | S | N |
Label | Definir el rótulo del widget de temporizador. | STRING | Vacío | S | S |
LabelAlignment | Definir la alineación del rótulo del widget en relación con el contenedor. | STRING | Izquierda | N | N |
LabelType | Definir el tipo de rótulo del texto de la etiqueta del temporizador. | STRING | Rótulo | N | N |
HorizontalAlignment | Definir la alineación horizontal del widget. | STRING | Izquierda | S | N |
Running | El estado del temporizador. Se define en True cuando el temporizador está en ejecución. Esta propiedad se puede enlazar para pausar el temporizador. | BOOLEAN | True | Sí | N |
InitialValue | Definir el valor de tiempo inicial en milisegundos. Utilice esta propiedad para definir el valor de la cuenta atrás cuando se active el evento redefinir. | NUMBER | 0 | S | N |
DisplayDays | Mostrar los días junto a las horas, los minutos y los segundos en el valor de tiempo formateado cuando el valor se ejecuta durante más de 24 horas. | BOOLEAN | True | Sí | N |
Value | La duración actual del temporizador en milisegundos. | NUMBER | n/d | S | N |
Reset | Un servicio que redefine el temporizador al valor definido por defecto mediante InitialValue. Para detener el temporizador, también se puede definir la propiedad Running en false. | Servicio | S | N | |
TimerMode | Definir el modo de temporizador para el widget. En el modo de cronómetro, el valor del temporizador se incrementa para medir la duración de una tarea. En el modo de cuenta atrás, el valor definido del temporizador mediante InitialValue se reduce y se activa un evento cuando llega a cero. | STRING | Cronómetro | S | N |
CountdownCompleted | Un evento que se activa cuando el valor del temporizador llega a cero en el modo de cuenta atrás. | Evento | S | N |