Faceplates y dinámicas

Plantillas parametrizadas, catálogo de elementos, acciones de botón y dinámicas por estado.

3 min de lectura

Un faceplate es una plantilla con parámetros tipados. Sus elementos usan $parametro en el campo tag; cada instancia enlaza esos parámetros con variables del proyecto.

Plantilla

{
  "width": 320, "height": 180, "background": "#ffffff",
  "parameters": {"running": "bool", "flow": "float", "fault": "bool"},
  "elements": [
    {"id": "body", "kind": "rectangle", "x": 0, "y": 0, "w": 320, "h": 180,
     "color": "#f1f5f9", "stroke_color": "#334155"},
    {"id": "pilot", "kind": "lamp", "x": 16, "y": 16, "w": 40, "h": 40, "tag": "$running"},
    {"id": "flow", "kind": "text", "x": 70, "y": 16, "w": 230, "h": 40,
     "text": "Caudal ", "tag": "$flow", "unit": " m³/h", "decimals": 1}
  ]
}

Instancia

{"id": "pump1", "kind": "faceplate", "x": 30, "y": 100, "w": 320, "h": 180,
 "template": "pump",
 "bindings": {"running": "Pump1.running", "flow": "Pump1.flow", "fault": "Pump1.fault"}}

bindings debe contener exactamente todos los parámetros, con variables hoja del mismo tipo.

Catálogo de elementos

kind	Propiedades específicas
`text`	text, tag, unit, decimals, font_size, bold, text_align, color, text_color
`input`	Igual que text; tag escribible
`button`	text, action y campos de la acción
`lamp`	tag bool, `lamp_colors: {on, off, bad}`
`bar`	tag numérico, min, max, color
`gauge`	tag numérico, min, max, gauge_style (dial, semi, thermometer), text, unit, decimals, warning, alarm, color
`image`	source (SVG recomendado)
`text_list`	tag, texts `[{value, text}]`, default_text
`line` / `polyline` / `pipe`	points normalizados, stroke_color, stroke_width, stroke_style, arrows
`rectangle` / `ellipse`	color, filled, stroke_color, stroke_width

Los points son pares [u, v] entre 0 y 1 dentro de la caja: X = x + u·w, Y = y + v·h.

Acciones de botón

action	Campos	Efecto
`toggle`	tag bool	Invierte el valor
`set`	tag, value	Escribe value
`momentary`	tag bool	true al pulsar, false al soltar
`press_release`	tag, press_value, release_value	Dos valores
`screen`	screen, target_container	Navega (solo proyecto)
`popup`	screen, modal	Abre emergente (solo proyecto)
`script`	script	Ejecuta Python (solo proyecto)

Dinámicas

"dynamics": {
  "visible": {"tag": "$visible", "op": "eq", "value": true, "bad": false},
  "enabled": {"tag": "$permiso", "op": "eq", "value": true, "bad": false},
  "default": {"color": "#d7e0e9"},
  "states": [
    {"when": {"tag": "$fault", "op": "eq", "value": true}, "style": {"color": "#c64b51", "text": "AVERÍA"}},
    {"when": {"tag": "$running", "op": "eq", "value": true}, "style": {"color": "#147d75"}}
  ],
  "bad": {"color": "#da982f"},
  "disabled": {"color": "#e0e5eb"},
  "disabled_reason": "Falta permiso"
}

Operadores: eq, ne para todo; gt, ge, lt, le solo números. Gana el primer estado que se cumpla. Máximo 128 estados.

kind	Claves de style
text, input, button, text_list	color, text_color, border_color, text
rectangle, ellipse	color, stroke_color
line, polyline, pipe	stroke_color
image	source
lamp, bar, gauge	color

Pruébalo en vivo

El playground de faceplates renderiza una plantilla en el navegador y te deja cambiar parámetros para ver las dinámicas.

Objetos de librería en Studio

La interfaz llama objetos de librería a estas plantillas; el formato sigue usando faceplate. Los símbolos estándar se referencian como estandar__<objeto> y sus SVG como library://estandar/graficos/<símbolo>.svg. Los botones y entradas admiten permission para exigir un permiso específico. Este campo se valida en la operación, independientemente de dynamics.enabled. Consulta Librerías y Usuarios y roles.