Patrones y buenas prácticas

Cuatro patrones cubren la mayoría de los artefactos. Todos parten de que gVar ya está cargado cuando tu código empieza a correr.

Estructura mínima

No hay inicialización: se lee y se refresca.

setInterval(() => {
  console.log("miVariable:", gVar.miVariable);
}, 500);

Dashboard en vivo

const claves = ["temperatura", "humedad", "estado"];

setInterval(() => {
  for (const clave of claves) {
    document.querySelector("#" + clave).textContent = gVar[clave] ?? "—";
  }
}, 500);

Control

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

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

boton.addEventListener("click", () => {
  gVar.encender = !gVar.encender;
});

setInterval(() => {
  boton.classList.toggle("activo", gVar.encendido === true);
}, 500);

Gráfica de telemetría

setInterval(() => {
  const proj = plotSerie("temperaturas", { maxPoints: 100, timeMode: "clock" });
  if (!proj) return;
  dibujar(proj.points.map((p) => p.label), proj.points.map((p) => p.y));
}, 500);

Qué herramienta para qué

Necesidad	Herramienta
Adquisición constante y fiable de datos del hardware	boardCode del thing, no el artefacto.
Registrar eventos del usuario	pushData desde el artefacto.
Leer gVar y actualizar la pantalla	setInterval(..., 500).
Animar entre valores	requestAnimationFrame.

Buenas prácticas

• Relee cada 500 ms. Es el ritmo con el que la plataforma sincroniza; leer gVar es local y no genera tráfico.
• pushData, nunca push() sobre el arreglo de una serie: el segundo pierde la marca de tiempo.
• Series recortadas: para gráficas usa plotSerie; el eje X sale de point.label y el valor de point.y, nunca de point.x ni de la posición en el arreglo.
• Comprueba el null de plotSerie antes de dibujar: significa que la serie todavía no tiene datos.
• Considera el gateway caído. gVarStatus.gatewayOnline === false significa que los things no están en línea; muestra ese estado en vez de datos congelados.

setInterval(() => {
  const texto = gVarStatus.gatewayOnline ? "Conectado" : "Dispositivo desconectado";
  document.querySelector("#estado").textContent = texto;
}, 500);

Pestaña en segundo plano

Cuando el usuario cambia de pestaña, el navegador congela o ralentiza los timers. Un artefacto en segundo plano deja de refrescar la UI y deja de generar datos con pushData: lo que no se ejecutó, no ocurrió. La plataforma también pausa la sincronización mientras la pestaña está oculta y la retoma al volver.

Conclusión práctica: la adquisición de datos vive en el thing, no en el artefacto. Un artefacto es la interfaz, no el registrador.

Cosas que no funcionan como esperas

Acción	Qué pasa
gVar.config.avanzado.x = 2	Los cambios anidados de más de un nivel no se detectan. Reasigna el objeto completo.
structuredClone(gVar)	Falla: gVar es un Proxy. Usa { ...gVar }.
gVar.serie.push(x)	Viaja sin marca de tiempo. Usa pushData.
pushData desde dos pestañas a la vez	Solo escribe la que tenga el rol; la otra avisa por console.warn.
boardCode y artefacto alimentando la misma serie	Marcas de tiempo desordenadas: elige un solo escritor por serie.