Physical Viz Toolkit

De sensor.html (el archivo que corre en el teléfono), recortado. Muestra la cadena completa: la cámara entrega marcadores ArUco, se promedia y filtra la posición del cubo, se normaliza entre los dos extremos calibrados a un valor t de 0 a 1, se discretiza en tres casillas y se envía el entero al computador.

Protobject.Aruco.onData((data) => {
  const punto = obtenerPuntoDelCubo(data);
  if (!punto) {
    detalle.textContent = "No veo el cubo…";
    return;
  }
  historial.push(punto);
  if (historial.length > LECTURAS_MEDIANA) {
    historial.shift();
  }
  ultimaLectura = puntoMediano(historial);
  // [...] mientras se calibra, solo se muestra el punto detectado
  actualizarSlider(ultimaLectura);
});

function actualizarSlider(punto, iniciarSinAnimacion = false) {
  const inicio = punto0[eje];
  const fin = punto2[eje];
  const actual = punto[eje];

  let t = (actual - inicio) / (fin - inicio);
  t = Math.max(0, Math.min(1, t));

  // Tres posiciones: 0, 1, 2
  let binCrudo = Math.floor(t * 3);
  binCrudo = Math.max(0, Math.min(2, binCrudo));
  // [...] estabiliza el valor y lo anima paso a paso
}

function enviarValor(valor) {
  Protobject.Core.send(valor).to("index.html");
}

• Scrubber de línea de tiempo: en vez de mostrar 0/1/2, mapea t (el valor normalizado 0–1 antes de discretizar) a una fecha o a un frame de un video o animación.
• Filtro de rango numérico: usa dos cubos ArUco distintos en el mismo canal, uno por extremo del rango, y envía ambos valores al PC.
• Selector ordinal de más de 3 opciones: cambia Math.floor(t * 3) por Math.floor(t * N) y ajusta el HTML para mostrar N círculos en vez de 3.
• Ecualizador o control de volumen: usa t directamente, sin discretizar, para mover una barra o cambiar el volumen de un audio en tiempo real.
• En todos los casos lo único que cambia es qué representa el número final (actualizarSlider y pintar); la detección y la calibración del cubo se mantienen igual.

De sensor.html (lo que corre en el teléfono): el handler de deviceorientation corrige el salto de 360° en alpha, acumula los deltas en un ángulo continuo, lo mide contra el origen calibrado y solo entonces envía { angulo, vueltas } al PC. Se omitieron algunos comentarios y líneas en blanco del original.

function handler(event) {
  const alpha = event.alpha;
  if (alpha === null) return;
  if (alphaAnterior !== null) {
    let delta = alpha - alphaAnterior;
    if (delta > 180) delta -= 360;
    if (delta < -180) delta += 360;
    acumulado += delta * SENTIDO;
  }
  alphaAnterior = alpha;
  if (origen === null) {
    valorEl.textContent = "—";
    return;
  }
  const angulo = acumulado - origen;
  const vueltas = Math.trunc(angulo / 360);
  valorEl.textContent = Math.round(angulo) + "°";
  // Filtro: solo enviar si cambió suficientemente
  if (anguloPrevio !== null && Math.abs(angulo - anguloPrevio) < UMBRAL_GRADOS) {
    return;
  }
  anguloPrevio = angulo;
  Protobject.Core.send({ angulo: angulo, vueltas: vueltas }).to("index.html");
}

• Control de volumen o brillo: en vez de mostrar grados, mapea angulo a un rango 0-100 (con angulo % 360 o limitando el rango) y úsalo para mover una barra o cambiar el volumen de un audio.
• Selector de categorías ordinales: divide 360° en N sectores (meses, décadas, estaciones) y muestra la categoría con Math.floor((angulo % 360) / (360 / N)), igual que 01-slider discretiza una posición.
• Rotar un modelo 3D o un mapa: usa angulo directamente como ángulo de rotación de un objeto en Three.js, Leaflet, etc., en vez de rotar una flecha CSS.
• Dial de años o escala de tiempo: mapea angulo (o las vueltas completas) a una fecha, para "viajar en el tiempo" girando el disco.
• En todos los casos lo único que cambia es qué representa angulo/vueltas en index.html; la lectura y acumulación del sensor en sensor.html se mantiene igual.

sensor.html (corre en el teléfono), callback de Protobject.Aruco.onData recortado: elige el marcador de mayor tamaño, lo traduce a número de cara con carasPorId y lo manda al PC solo cuando esa cara se mantuvo estable ESTABLE_MS y además cambió respecto de la anterior. Se omitió el bloque inicial que resetea la candidata cuando no hay marcadores visibles, y el que ignora IDs desconocidos.

Protobject.Aruco.onData((data) => {
  const ids = Object.keys(data);
  // […] si no hay marcadores visibles, se resetea la candidata y se sale […]

  // Elegir el marcador más grande (cara superior del dado)
  let mejorId = ids[0];
  for (const id of ids) {
    if (data[id].size > data[mejorId].size) mejorId = id;
  }

  const cara = carasPorId[mejorId];
  const ahora = Date.now();
  // Si cambiamos de candidata, reiniciar el reloj de estabilidad
  if (cara !== candidata) {
    candidata = cara;
    candidataDesde = ahora;
    return;
  }
  // ¿Llevamos suficiente tiempo viendo la misma cara?
  if (ahora - candidataDesde < ESTABLE_MS) return;

  // Cara estable confirmada: enviar al PC sólo si cambió
  if (cara !== caraAnterior) {
    caraAnterior = cara;
    valorEl.textContent = "Cara: " + cara;
    Protobject.Core.send(cara).to("index.html");
  }
});

• Selector de escenario o modo de vista: en vez de números 1–6, asocia cada cara a una vista distinta de una visualización (gráfico de barras, mapa, línea de tiempo).
• Decisión interactiva en un museo o feria: "¿qué historia quieres ver?" — cada cara dispara un video, audio o animación distinta.
• Selector aleatorio para explorar datos: usa el número de cara para saltar a un registro cualquiera de un dataset, útil para "muéstrame un ejemplo".
• Dado con más o menos caras: con un tetraedro o un icosaedro solo hay que ajustar carasPorId con los IDs reales y el rango de colores en coloresPorCara.
• En todos los casos cambia solo qué representa cada número en index.html; la detección, el mapeo ID→cara y la histéresis de sensor.html se mantienen igual.

De sensor.html (el código que corre en el teléfono). Es el callback único de lectura NFC: si está en modo aprendizaje guarda el ID crudo en localStorage bajo el nombre que toca; si está en modo uso traduce el ID al nombre aprendido y manda ese nombre al computador con Protobject.Core.send(...).to("index.html").

    // ---- LECTURA DE TARJETAS ----
    Protobject.NFC.onData((id) => {
      if (id === "err: no compatible") {
        lectura.textContent = "Tarjeta no compatible";
        return;
      }

      lectura.textContent = "ID: " + id;

      if (modoAprendiendo !== null) {
        // En modo aprendizaje: guardamos esta lectura como la tarjeta actual
        tarjetas[modoAprendiendo] = id;
        localStorage.setItem("nfcTarjetas", JSON.stringify(tarjetas));
        actualizarLista();
        instr.textContent = "✓ " + modoAprendiendo + " aprendida.";
        setTimeout(siguienteAprender, 800);
      } else {
        // En modo uso: buscamos el nombre asociado a este ID
        const nombre = Object.keys(tarjetas).find(k => tarjetas[k] === id);
        const nombreFinal = nombre || "Desconocida";
        instr.textContent = "Última detectada: " + nombreFinal;
        // Enviar el nombre al PC (evento semántico, no el ID crudo)
        Protobject.Core.send(nombreFinal).to("index.html");
      }
    });

• Tarjeta como selector de dataset: cada tarjeta = un dataset distinto (ej. "TUC → datos de la PUC", "Bip! → datos del Transantiago").
• Tag NFC pegado a un objeto: pega un tag dentro de un libro, juguete o llavero. El visitante acerca el objeto completo, no una tarjeta anónima. Es la variante con más valor semántico: el objeto mismo activa la visualización.
• Identificación de usuario en una experiencia de museo: cada visitante usa su propia credencial para "loguear" su recorrido.
• Para adaptarlo basta cambiar la lista TARJETAS en sensor.html (los nombres que se van a aprender) y el objeto estilos en index.html (color e ícono por nombre).

De sensor.html (el código que corre en el teléfono): la función handler() completa, omitiendo solo la línea que refresca el texto en la pantalla del teléfono. Acá está todo lo importante: se lee event.beta, se normaliza entre los dos puntos calibrados (valorOff y valorOn) para obtener t entre 0 y 1, se compara contra UMBRAL y recién ahí se envía "ON" u "OFF" al computador, y solo cuando el estado cambió.

function handler(event) {
  if (event.beta === null) return;
  ultimoBeta = event.beta;
  ultimoGamma = event.gamma;
  // Mostrar el valor crudo localmente (útil durante calibración)
  if (valorOff === null || valorOn === null) {
    valorEl.textContent = Math.round(ultimoBeta) + "°";
    return;
  }

  // Calcular t: 0 cuando está en posición OFF, 1 cuando está en ON.
  // Sirve para saber en qué lado del umbral estamos sin importar
  // si abrir el libro aumenta o disminuye beta.
  let t = (ultimoBeta - valorOff) / (valorOn - valorOff);
  t = Math.max(0, Math.min(1, t));

  const nuevoEstado = t >= UMBRAL ? "ON" : "OFF";

  // Solo enviar al PC cuando cambia el estado: evento semántico,
  // no flujo continuo.
  if (nuevoEstado !== estadoActual) {
    estadoActual = nuevoEstado;
    Protobject.Core.send(nuevoEstado).to("index.html");
  }
}

• Puerta o mueble: pega la Base B en la cara interior de la puerta de un gabinete. Al abrirla se activa la visualización, al cerrarla se apaga.
• Tapa de notebook o estuche: sirve como sensor de "abierto = en uso, cerrado = guardado" para disparar un estado en una experiencia narrativa.
• Palanca o brazo articulado de un juguete: cualquier objeto cuyo ángulo cambie entre dos posiciones de uso (una palanca arriba/abajo, un cajón si montas el sensor en la gaveta).
• Para adaptarlo solo hay que recalibrar los dos estados: el código no distingue "libro" de cualquier otro objeto.
• Cambia los textos "ON"/"OFF" de index.html por nombres que describan el nuevo contexto.

De sensor.html (función handler, corre en el teléfono). Muestra el pipeline completo: se lee event.beta, se normaliza contra los dos puntos calibrados, se recorta a 0-100, se suaviza con media exponencial y recién ahí se envía el entero al PC, solo si el cambio supera UMBRAL. Se omitió el cálculo intermedio de pct y el reescalado de la zona muerta.

    function handler(event) {
      if (event.beta === null) return;
      ultimoBeta = event.beta;

      // Calcular intensidad normalizada entre 0% y 100%
      const dif = ultimoBeta - betaReposo;
      const rango = betaMaximo - betaReposo;

      // [...] pct = (dif / rango) * 100 y luego se le aplica la zona muerta

      pct = Math.max(0, Math.min(100, pct));

      intensidadSuavizada = intensidadSuavizada * SUAVIZADO + pct * (1 - SUAVIZADO);

      const intensidad = Math.round(intensidadSuavizada);
      valorEl.textContent = intensidad + "%";

      if (intensidadAnterior === null || Math.abs(intensidad - intensidadAnterior) >= UMBRAL) {
        intensidadAnterior = intensidad;
        Protobject.Core.send(intensidad).to("index.html");
      }
    }

• Control de volumen o velocidad por presión: en vez de mostrar una barra, usa el porcentaje para controlar el volumen de un audio o la velocidad de una animación (mientras más aprietas, más rápido o más fuerte).
• Dial de intensidad en una narrativa interactiva: el porcentaje representa "esfuerzo" o "estrés" y el usuario lo controla apretando un objeto blando, como una pelota antiestrés o una esponja.
• Medidor de fuerza en una demostración física: cualquier superficie deformable (cojín, plastilina, esponja) bajo el teléfono se vuelve un sensor de "cuánta fuerza estoy aplicando", útil para enseñar presión o fuerza.
• El patrón general es "un objeto blando se deforma bajo presión y esa deformación inclina el teléfono", que da una intensidad continua sin necesitar una celda de carga real.
• Lo único que cambia entre casos es el objeto blando bajo el teléfono y qué representa el porcentaje en index.html; la calibración de dos puntos y el suavizado de sensor.html se mantienen igual.

De sensor-cenital.html (el código que corre en el teléfono de arriba), quitando solo las líneas en blanco. Es el ciclo completo: HandSensor entrega los landmarks de la mano, se toma el 8 (punta del índice), se valida y se manda la posición normalizada a index.html etiquetada con tipo: "cenital". sensor-frontal.html es idéntico salvo que lee p.y y envía { tipo: "frontal", z: y }.

Protobject.HandSensor.onData((data) => {
  if (!data || !data.landmarks || data.landmarks.length === 0) {
    valorEl.textContent = "Sin mano detectada";
    return;
  }
  const mano = data.landmarks[0];
  if (!mano || mano.length < 9) {
    valorEl.textContent = "Mano sin landmarks";
    return;
  }
  const p = mano[8];
  if (!p || p.x === undefined) {
    valorEl.textContent = "Landmark 8 invalido";
    return;
  }
  const x = p.x;
  const y = p.y;
  valorEl.textContent = "x: " + x.toFixed(2) + " y: " + y.toFixed(2);
  Protobject.Core.send({ tipo: "cenital", x: x, y: y }).to("index.html");
});

• Mapa interactivo: en vez de números, entrena un punto por cada ciudad o región de un mapa impreso; al tocarla se muestra su información en el PC.
• Teclado o control personalizado: entrena un punto por cada "tecla" dibujada sobre cartón (letras, números, símbolos) para armar una interfaz física a medida.
• Panel de control temático: entrena puntos sobre íconos o zonas de una maqueta (por ejemplo, los ambientes de una casa en una maqueta de arquitectura) para disparar distintas visualizaciones según cuál se toque.
• Para adaptarlo solo hay que cambiar qué se muestra o dispara al recibir cada número de punto en index.html: el entrenamiento, la detección de distancia (detectarPunto) y la confirmación de toque (estaTocando) se mantienen igual sin importar qué representen los puntos.
• El patrón general "posición 2D + confirmación de contacto con una segunda cámara" sirve para cualquier superficie táctil personalizada sin marcadores visibles.

De physicalkit/artefactos/08-panel/sensor.html (la página que corre en la tablet): cada botón .hole escucha pointerdown y llama a enviarNumero(), que resalta el botón tocado y manda el número a index.html en tres formatos (numero, marcador, valor) con Protobject.Core.send().to(). Esto es todo el "sensor": no hay hardware involucrado, solo la pantalla capacitiva.

function enviarNumero(num) {
  botones.forEach((b) => b.classList.toggle("active", b.dataset.num === String(num)));

  Protobject.Core.send({
    tipo: "panel",
    accion: "press",
    id: "zona" + num,
    numero: String(num),
    marcador: String(num),
    valor: Number(num)
  }).to("index.html");

  setTimeout(() => {
    botones.forEach((b) => b.classList.remove("active"));
  }, 180);
}

botones.forEach((boton) => {
  const num = boton.dataset.num;
  boton.addEventListener("pointerdown", (e) => {
    e.preventDefault();
    enviarNumero(num);
  });
});

• Mapa táctil: dibuja o pega un mapa sobre el cartón y perfora un agujero por cada ciudad o región; cada número pasa a representar un lugar en vez de un dígito genérico.
• Instrumento o secuenciador simple: cada agujero dispara un sonido o una nota distinta, útil para sonificación de datos.
• Panel de control de una visualización: cada número cambia de vista, filtra una categoría o cambia el dataset mostrado en una visualización más grande en el PC.
• Teclados temáticos, cuadros de mando decorativos e instrumentos musicales de cartón, según el manual.
• Para adaptarlo basta cambiar las etiquetas visibles de los .hole en sensor.html (y de los .mini en index.html); el mecanismo de envío y recepción no cambia.
• Es una alternativa compacta y autocontenida a la superficie táctil de doble vista (artefacto 07-tacto) cuando el tamaño de la pantalla alcanza para el espacio de interacción requerido: no necesita dos cámaras ni triangulación.

De sensor.html (el código que corre en el teléfono), función handler, registrada con window.addEventListener("deviceorientation", handler, true). Muestra el camino completo: gamma crudo → diferencia contra el equilibrio calibrado → normalización separada hacia cada lado usando maxIzquierda / maxDerecha → suavizado exponencial → envío al PC solo cuando el cambio supera UMBRAL. Dos tramos se omitieron con [...] por brevedad. El computador recibe ese número en index.html con Protobject.Core.onReceived.

function handler(event) {
  if (event.gamma === null) return;
  ultimoGamma = event.gamma;
  // [...] durante los 3 pasos de calibración solo se muestra gamma crudo
  const dif = ultimoGamma - equilibrio;
  let pct;

  if (dif < 0) {
    const rangoIzq = maxIzquierda - equilibrio;
    if (rangoIzq === 0) pct = 0;
    else pct = (dif / rangoIzq) * -100;
  } else {
    const rangoDer = maxDerecha - equilibrio;
    if (rangoDer === 0) pct = 0;
    else pct = (dif / rangoDer) * 100;
  }
  // [...] zona muerta y reescalado para que el rango efectivo siga siendo -100 a +100
  pct = Math.max(-100, Math.min(100, pct));

  desbalanceSuavizado = desbalanceSuavizado * SUAVIZADO + pct * (1 - SUAVIZADO);
  const desbalance = Math.round(desbalanceSuavizado);

  if (desbalanceAnterior === null || Math.abs(desbalance - desbalanceAnterior) >= UMBRAL) {
    desbalanceAnterior = desbalance;
    Protobject.Core.send(desbalance).to("index.html");
  }
}

• Comparación física de magnitudes entre dos datasets: cada platillo representa un grupo de datos y el peso de los objetos representa su magnitud ("¿pesa más esta categoría o esta otra?").
• Decisión colectiva o votación: dos opciones, cada visitante pone una moneda o ficha en la que prefiere, y al final la balanza muestra la preferencia acumulada del grupo.
• Narrativa visual de tensión entre dos fuerzas: cualquier historia con dos polos en conflicto (costo vs. beneficio, oferta vs. demanda) se representa cargando objetos en cada lado mientras se cuenta.
• Al adaptarlo solo hay que recalibrar los tres puntos si cambia el montaje físico: la conversión de gamma a porcentaje y la animación del brazo no dependen de qué representen los platillos.

De sensor.html (el archivo que corre en el teléfono): el callback onData del NoiseSensor. Muestra las tres cosas que importan: normalizar la intensidad cruda al rango calibrado, enviar el nivel continuo al computador en cada lectura, y confirmar un evento solo si el sonido se mantiene sobre el umbral el tiempo mínimo y ya pasó el cooldown.

Protobject.NoiseSensor.onData((intensity) => {
  ultimaIntensidad = intensity;
  valorEl.textContent = Math.round(intensity);
  // Si ya está calibrado, calcular intensidad normalizada y umbral
  if (ruidoBase !== null && nivelFuerte !== null) {
    // Normalizar a 0-100% para la barra del PC
    let pct = (intensity - ruidoBase) / (nivelFuerte - ruidoBase) * 100;
    pct = Math.max(0, Math.min(100, pct));
    const umbralPct = 60;
    // Enviar la lectura para la barra animada
    Protobject.Core.send({ tipo: "nivel", intensidad: pct, umbral: umbralPct }).to("index.html");
    // Detectar evento: ¿está sobre el umbral durante DURACION_MS?
    const ahora = Date.now();
    if (pct >= umbralPct) {
      if (inicioSobreUmbral === null) inicioSobreUmbral = ahora;
      else if (ahora - inicioSobreUmbral >= DURACION_MS &&
               ahora - ultimoEvento >= COOLDOWN_MS) {
        ultimoEvento = ahora;
        Protobject.Core.send({ tipo: "evento" }).to("index.html");
        instr.textContent = "¡Sonido detectado!";
      }
    } else {
      inicioSobreUmbral = null;
    }
  }
});

• Interacción teatral: cada evento de aplauso avanza una escena o dispara una animación en index.html.
• Encuesta o votación colectiva: usa el mensaje { tipo: "nivel" } en vez del contador para medir entusiasmo relativo ("el aplauso más fuerte gana").
• Vela apagable: soplar cerca del teléfono genera un evento que dispara la animación de apagado.
• Indicador de ambiente: ignora los eventos y grafica solo el nivel continuo para medir el ruido de una sala a lo largo del tiempo.
• En todos los casos se cambia solo qué hace index.html al recibir { tipo: "evento" } o { tipo: "nivel" }; la calibración y detección de sensor.html no dependen de qué signifique el sonido.

De sensor.html (el archivo que corre en el teléfono), recortado: el callback onData del acelerómetro, sin las líneas que solo refrescan la pantalla del teléfono. Calcula la magnitud del vector, la normaliza contra las dos referencias calibradas, manda el nivel continuo al PC en cada lectura y manda un evento solo cuando el movimiento se sostiene sobre el umbral el tiempo suficiente y ya pasó el cooldown.

Protobject.Acceleration.onData((data) => {
  const magnitud = Math.sqrt(data.x * data.x + data.y * data.y + data.z * data.z);
  ultimaMagnitud = magnitud;

  // Si ya está calibrado, normalizar y detectar eventos
  if (valorReposo !== null && valorSacudida !== null) {
    let pct = (magnitud - valorReposo) / (valorSacudida - valorReposo) * 100;
    pct = Math.max(0, Math.min(100, pct));

    const umbralPct = 60;

    Protobject.Core.send({ tipo: "nivel", intensidad: pct, umbral: umbralPct }).to("index.html");

    const ahora = Date.now();
    if (pct >= umbralPct) {
      if (inicioSobreUmbral === null) inicioSobreUmbral = ahora;
      else if (ahora - inicioSobreUmbral >= DURACION_MS &&
               ahora - ultimoEvento >= COOLDOWN_MS) {
        ultimoEvento = ahora;
        Protobject.Core.send({ tipo: "evento" }).to("index.html");
      }
    } else {
      inicioSobreUmbral = null;
    }
  }
});

• Objeto que se sacude o se lanza: Base B acolchada dentro de una pelota de cartón, unas maracas con elementos sueltos, un peluche o un cubo antiestrés. Cada sacudida dispara un evento.
• Base B en el brazo del usuario (vestible): el gesto corporal se vuelve input — lanzar algo imaginario, dar un golpe al aire, seguir un ritmo.
• Base B sobre un objeto que recibe impactos: una caja, un panel, la membrana de un tambor. Cada golpe genera un evento, útil para sonificación o interacción rítmica.
• Métrica de intensidad emocional: usa el nivel continuo ({ tipo: "nivel" }) en vez del contador de eventos, para medir con cuánta fuerza el usuario sacude el objeto (por ejemplo, como proxy de "cuán de acuerdo estás").
• Para adaptarlo basta cambiar qué ocurre en index.html al recibir { tipo: "evento" } o { tipo: "nivel" }: la detección y la calibración de sensor.html no dependen de qué signifique la sacudida.

Fragmento de procesarLectura() en sensor.html (el archivo que corre en el teléfono). Es el paso de sensor a dato semántico: min y rango salen de los dos toques de calibración (brillo con luz normal y brillo con la cámara tapada), el rango se parte en tercios y el brillo suavizado del frame cae en uno de ellos. El envío al computador ocurre solo cuando el estado cambia, y lo que viaja es { estado, brillo }, no el flujo crudo de píxeles. El cálculo del brillo promedio del frame está más arriba en el mismo archivo, en calcularBrilloPromedio().

      const tercio = rango / 3;

      let estado;

      if (brilloSuavizado < min + tercio) {
        estado = "sombra";
      } else if (brilloSuavizado < min + 2 * tercio) {
        estado = "penumbra";
      } else {
        estado = "luz";
      }

      estadoLocalEl.textContent = "Estado: " + estado.toUpperCase();

      if (estado !== estadoAnterior) {
        estadoAnterior = estado;

        Protobject.Core.send({
          estado: estado,
          brillo: brilloSuavizado
        }).to("index.html");
      }

• Detector de presencia: pasar la mano cerca del teléfono activa o desactiva una visualización, sin necesitar un sensor de proximidad dedicado.
• Día y noche: cambia la metáfora visual de una visualización al apagar la luz de la habitación, simulando un ciclo día/noche.
• Caja sorpresa: mete el teléfono dentro de una caja con tapa (abrir la tapa = luz, cerrar = sombra) para revelar contenido al abrir.
• Sensor de cercanía aproximada: acercar un objeto a la cámara reduce el brillo y sirve como señal de "algo está cerca" (no es un sensor de profundidad real).
• Para cualquiera de estas variantes solo cambia qué representa cada estado (luz / penumbra / sombra) en index.html: la captura de cámara y la clasificación en tercios de sensor.html no se tocan.