Saltar al contenido principal

Campo E/S

El elemento Campo es un elemento de entrada/salida de texto diseñado para visualizar y modificar valores de variables en tiempo real. Es fundamental para la introducción de setpoints, visualización de estados numéricos o cadenas de texto.

Las propiedades marcadas con bolt permiten dinamización a partir de una expresión con variables.

General​

Configuración básica de identificación y posición.

Nombre (string)​

Identificador único del elemento.

Descripción (string)​

Texto descriptivo opcional.

X bolt (number)​

Posición horizontal en píxeles.

Y bolt (number)​

Posición vertical en píxeles.

Z bolt (number)​

Índice de profundidad (z-index).

Ancho bolt (number)​

Anchura del elemento en píxeles.

Alto bolt (number)​

Altura del elemento en píxeles.

Texto (string)​

Define el texto inicial que mostrará el campo. Para textos fijos o dinámicos se recomienda usar el elemento Texto.

Estilo​

Personalización visual del componente.

Deshabilitado bolt (boolean)​

Impide la edición del campo.

Oculto bolt (boolean)​

Hace invisible el elemento.

Color bolt (color)​

Color del texto.

Color de fondo bolt (color)​

Color de fondo del campo.

Color de borde bolt (color)​

Color global del borde.

Color de borde [Superior/Inferior/Izquierdo/Derecho] (color)​

Color específico para cada lado del borde.

Radio de borde bolt (number)​

Redondeo de las esquinas.

Tamaño fuente bolt (number)​

Tamaño del texto en píxeles.

Grueso de fuente bolt (number)​

Peso de la tipografía (400, 700, negrita, etc.).

Ancho del borde bolt (number)​

Grosor global del borde en píxeles.

Ancho del borde [Superior/Inferior/Izquierdo/Derecho] (number)​

Grosor específico para cada lado.

Alineación horizontal bolt (string)​

Alineación del texto (Izquierda, Centro, Derecha).

Alineación vertical bolt (string)​

Alineación vertical (Superior, Centro, Inferior).

Estilo de borde bolt (string)​

Tipo de trazo global (Sólido, Punteado, etc.).

Estilo de borde [Superior/Inferior/Izquierdo/Derecho] (string)​

Tipo de trazo específico para cada lado.

Rotar bolt (number)​

Ángulo de rotación en grados.

Transición (string)​

Definición CSS de transición para suavizado de cambios.

Punto de anclaje [Vert./Horiz.] (string)​

Define qué borde del elemento actúa como referencia fija de posición. Es muy útil cuando cambias dinámicamente el tamaño del elemento (ej: una barra de progreso): si anclas verticalmente "Abajo", al aumentar la altura el elemento crecerá hacia arriba, manteniendo su base fija en el sinóptico.

Sombra (string)​

Permite seleccionar un nivel de sombra predefinido (Ninguna, Pequeña, Media, Grande).

Avanzado​

Configuración de comportamiento y eventos.

Tag (Tag)​

Variable del sistema vinculada al campo. El campo mostrará el valor del Tag y escribirá en él si se modifica.

Valor remanente (boolean)​

Si se activa, el campo recordará su último valor introducido localmente.

Decimales (number)​

Número de dígitos decimales a mostrar (para valores numéricos).

Teclado (string)​

Vincula un elemento Teclado existente en el sinóptico para la entrada de datos. Varios campos pueden compartir el mismo componente de teclado.

Script al Escribir (JavaScript)​

Se ejecuta en tiempo real con cada carácter introducido (evento input).

Script al Cambiar (JavaScript)​

Se ejecuta cuando se confirma el nuevo valor (evento change, típicamente al pulsar Enter o salir del campo).

Script en foco (JavaScript)​

Se ejecuta cuando el elemento recibe el foco del cursor.

Script fuera de foco (JavaScript)​

Se ejecuta cuando el elemento pierde el foco.

Permisos​

Control de acceso basado en roles de usuario.

Activar protección (boolean)​

Habilita las restricciones de edición.

Grupos permitidos (Array)​

Lista de grupos autorizados para editar el valor.

Ejemplo de Script​

/* Script para validar entrada numérica antes de escribir */

// Supongamos que este script se ejecuta 'Al Click' o mediante un evento de cambio
const valorInput = parseFloat(target.value);

if (valorInput >= 0 && valorInput <= 100) {
  Tag("SETPOINT_VELOCIDAD").value = valorInput;
  target.style.backgroundColor = "#ffffff"; // Blanco (OK)
} else {
  // Feedback visual de error
  target.style.backgroundColor = "#ffcccc"; // Rojo claro
  dialog({ title: "Error", message: "El valor debe estar entre 0 y 100" });
}