Patrones y buenas prácticas

Tres patrones cubren la mayoría de los artefactos. Todos usan el runtime Undercromo.gvar.

Dashboard en vivo

Observa varias gVar y refleja sus valores en la pantalla:

const { gvar } = window.Undercromo;

gvar.observe(["temperatura", "humedad", "estado"], (valor, clave) => {
  document.querySelector("#" + clave).textContent = valor;
}, { immediate: true });

Control

Un botón (o slider) que escribe una gVar, y la UI que refleja el estado real:

const boton = document.querySelector("#luz");

boton.addEventListener("click", async () => {
  try {
    await gvar.write("encender", !gvar.peek("encendido"));
  } catch (e) {
    alert("Sin permiso de control.");
  }
});

gvar.observe("encendido", (on) => {
  boton.classList.toggle("activo", on === true);
}, { immediate: true });

Gráfica de telemetría

gvar.observeSeries("temperaturas", () => {
  const { points } = gvar.peekProjectedSeries("temperaturas", {
    maxPoints: 100,
    timeMode: "clock",
  });
  dibujar(points);
}, { immediate: true });

Buenas prácticas

• Observa, no encuestes. Usa observe/observeSeries en vez de setInterval con peek. Es más eficiente y siempre estás al día.
• { immediate: true } para pintar de una con el valor actual al suscribirte.
• Cancela lo que ya no uses. observe devuelve una función; guárdala y llámala cuando quites ese elemento de la UI, para no acumular suscripciones.
• write siempre con try/catch. Puede fallar por permisos, visibilidad o red.
• Refleja el estado real, no la intención del usuario: tras un write, deja que un observe confirme lo que pasó en el hardware.
• Series recortadas: para gráficas usa projectSeries/peekProjectedSeries y su points, nunca la posición en el arreglo.
• Considera el gateway caído. status().gatewayOnline === false significa que los things no están en línea; muestra ese estado en vez de datos congelados.

const s = gvar.status();
if (!s.gatewayOnline) {
  document.querySelector("#estado").textContent = "Dispositivo desconectado";
}