Interface and Application Programming

cd "C:\Users\danie\OneDrive\Documentos\IBERO\FB 2026\fab2026\daniela-barranco\public\weeks\w14"

ls

mkdir mi_proyecto_real
cd mi_proyecto_real

python -m venv venv

.\venv\Scripts\Activate.ps1

pip install paho-mqtt

node --version
npm --version

ni interface.html
ni style.css
ni app.js

Tip: Instead of creating the files from the terminal, I could have also created them later directly from inside VS Code (right-click → New File). Both approaches give the same result.

npm install -g @anthropic-ai/claude-code

claude --version

code .

claude

w14/                              ← root folder where I run `claude`
├── mi_proyecto_real/             ← MY actual project (Claude works here)
│   ├── interface.html            → all the HTML
│   ├── style.css                 → all the CSS
│   ├── app.js                    → all the JavaScript (MQTT logic)
│   ├── arduino/                  → microcontroller code (READ ONLY)
│   │   └── crystal_cut/
│   │       └── crystal_cut.ino
│   └── mockups/                  → AI-generated design references
│       ├── dashboard.jpg
│       └── orders.jpg
└── referencia_profe/             ← professor's example (READ ONLY)
    └── docs_rafa/
        ├── frontend/
        ├── scripts/
        └── README.md

In summary, the prompt asks Claude to:

• Build the dashboard from scratch in three separate files (HTML, CSS, JavaScript).
• Use only the files in mi_proyecto_real/ as editable, treating referencia_profe/ and arduino/ as read-only references.
• Follow the visual design defined by the two mockup images.
• Connect to the public HiveMQ broker over WebSocket on port 8000.
• Use exactly the three MQTT topics that the Arduino expects (ibero/arquitecturas/config, control, sensor).
• Match the JSON message format the Arduino publishes and subscribes to.
• Implement the full dynamic behavior: automatic batch IDs, auto-filled date/time, real-time progress bars, status badges, START/EMERGENCY STOP buttons, and a persistent order log.
• Show a plan before writing any code, and ask for confirmation file by file.

Necesito que me ayudes a construir DESDE CERO una interfaz web para un sistema
de ensamble de cristales. Mis archivos principales están en la subcarpeta
mi_proyecto_real/ con esta estructura:

w14/
├── mi_proyecto_real/
│   ├── interface.html
│   ├── style.css
│   ├── app.js
│   ├── arduino/
│   │   └── crystal_cut/
│   │       └── crystal_cut.ino
│   └── mockups/
│       ├── dashboard.jpg
│       └── orders.jpg
└── referencia_profe/
    └── docs_rafa/

CONTEXTO DEL SISTEMA COMPLETO
Mi sistema tiene TRES componentes que se comunican vía MQTT:
  1. NAVEGADOR (interfaz web)     ← lo que tú vas a construir
  2. BROKER MQTT (HiveMQ público) ← intermediario, no se toca
  3. XIAO ESP32-S3 (Arduino)      ← ya tengo el código, no lo modifiques

El XIAO ESP32-S3 corre código Arduino que SIMULA una línea de ensamble:
recibe la configuración del lote, recibe comandos INICIAR/DETENER, y publica
el progreso en tiempo real (1 cristal cada 2 segundos, hasta completar
todas las series).

REGLA DE CARPETAS
NO modificar bajo ninguna circunstancia:
  - referencia_profe/  (material del profesor, solo lectura)
  - arduino/           (código del microcontrolador, solo lectura)
Trabaja SOLO en:
  - mi_proyecto_real/interface.html
  - mi_proyecto_real/style.css
  - mi_proyecto_real/app.js

REFERENCIAS VISUALES
- mi_proyecto_real/mockups/dashboard.jpg
- mi_proyecto_real/mockups/orders.jpg

SEPARACIÓN DE CÓDIGO POR ARCHIVO
- TODO el HTML va en interface.html
- TODO el CSS va en style.css
- TODO el JavaScript va en app.js
- La librería mqtt.js sí va por CDN en interface.html

DISEÑO VISUAL
- Tema oscuro (fondo #0a0e14, acentos cian/turquesa #2dd4bf)
- Tipografía monoespaciada en títulos (estilo "CRYSTAL_CUT_V4")

HEADER: título "CRYSTAL_CUT_V4" + badge "● CONNECTED" + START y EMERGENCY STOP
SIDEBAR: OPERATOR_01 + Station Alpha + menú DASHBOARD/ORDERS

VISTA "DASHBOARD"
- Panel "Batch Order Placement": Crystals Per Series (UNITS), Number of Series (COUNT), ADD, RESET
- Panel "Order": Lot, Date (auto), ADD, RESET
- Tarjetas de métricas: "Assembled Cut Crystals" X/Y, "Series Produced" X/Y, con barras

VISTA "ORDERS"
- Tabla "Recent Order Logs": Date, Timestamp, Batch ID, Status
- Estados: COMPLETED (verde), PROCESSING (cian parpadeante), QUEUED (gris), MANUAL STOP (rojo)
- BATCH ID incremental guardado en localStorage

COMUNICACIÓN MQTT
- Broker: ws://broker.hivemq.com:8000/mqtt
- ibero/arquitecturas/config   → frontend publica config
- ibero/arquitecturas/control  → frontend publica INICIAR/DETENER
- ibero/arquitecturas/sensor   → frontend recibe estado

Formato JSON:
- config: {"lote": "LOT-A01", "cristales_por_serie": 150, "total_series": 12, "fecha": "ISO"}
- control: {"comando": "INICIAR"} o {"comando": "DETENER"}
- sensor: {"estado", "cristal_actual", "serie_actual", "cristales_por_serie", "total_series", "lote"}

Estados del Arduino: "ensamblando", "serie_completa", "lote_completo", "detenido"

COMPORTAMIENTO DINÁMICO
1. Llenar CRYSTALS PER SERIES + NUMBER OF SERIES → ADD → guardar y habilitar ORDER
2. Llenar LOT → ADD → fecha automática, publicar config, crear orden QUEUED, generar BATCH ID
3. START → publicar INICIAR, orden a PROCESSING, métricas se actualizan en tiempo real
4. Recibir estado del sensor → actualizar métricas y barras
5. "lote_completo" → orden a COMPLETED, métricas al total final
6. EMERGENCY STOP → publicar DETENER, orden a MANUAL STOP
7. Badge ● CONNECTED refleja estado real de MQTT

INSTRUCCIONES FINALES
1. Lee mis tres archivos en mi_proyecto_real/ para confirmar que están vacíos
2. Abre las dos imágenes en mockups/ y analízalas
3. Lee arduino/crystal_cut/crystal_cut.ino para confirmar el formato MQTT
4. Lee referencia_profe/docs_rafa/ SOLO para entender el contexto MQTT
5. Muéstrame un plan antes de escribir código
6. Aplica los cambios archivo por archivo pidiendo confirmación
7. Diseño limpio y responsive (1280px+)

Important: If you want to replicate this code on your own XIAO ESP32-S3, the only two lines you need to edit are the WiFi credentials. Everything else (broker, topics, logic) is universal and can stay as-is.

const char* WIFI_SSID     = "TU_RED_WIFI";       // ← put your WiFi network name here
const char* WIFI_PASSWORD = "TU_PASSWORD_WIFI";  // ← put your WiFi password here

Two important details about the WiFi:

• The XIAO ESP32-S3 only supports 2.4 GHz networks, not 5 GHz.
• The SSID and password are case-sensitive — they must match the router exactly.

#include <WiFi.h>                                  // ESP32 WiFi library (built in with the ESP32 board package)
#include <PubSubClient.h>                          // MQTT client library for the ESP32
#include <ArduinoJson.h>                           // JSON parser/builder for creating MQTT payloads

const char* WIFI_SSID     = "TU_RED_WIFI";         // CHANGE: your 2.4 GHz WiFi network name
const char* WIFI_PASSWORD = "TU_PASSWORD_WIFI";    // CHANGE: your WiFi password

const char* MQTT_BROKER = "broker.hivemq.com";     // Public MQTT broker (same one used by the dashboard)
const int   MQTT_PORT   = 1883;                    // Standard MQTT TCP port

const char* TOPIC_CONFIG  = "ibero/arquitecturas/config";   // Receives the batch configuration
const char* TOPIC_CONTROL = "ibero/arquitecturas/control";  // Receives INICIAR / DETENER commands
const char* TOPIC_SENSOR  = "ibero/arquitecturas/sensor";   // Publishes the assembly progress

const unsigned long INTERVALO_CRISTAL  = 2000;     // Milliseconds between each "crystal" (2 seconds)
const unsigned long PAUSA_ENTRE_SERIES = 1000;    // Pause between two consecutive series

WiFiClient    wifiClient;                          // Underlying TCP client for the MQTT connection
PubSubClient  mqttClient(wifiClient);              // MQTT client built on top of the WiFi client

String  lote              = "";                    // Name of the current batch (received from dashboard)
int     cristalesPorSerie = 0;                     // How many crystals per series (from dashboard)
int     totalSeries       = 0;                     // How many series in total (from dashboard)
bool    configRecibida    = false;                 // Flag: did we already receive a configuration?

bool    ensambleActivo    = false;                 // Flag: is the assembly currently running?
int     cristalActual     = 0;                     // Counter: which crystal of the current series
int     serieActual       = 1;                     // Counter: which series we are on
unsigned long ultimoCristal = 0;                   // Timestamp (millis) of the last published crystal

void conectarWiFi() {                              // Connects the ESP32 to the WiFi network
  Serial.print("Conectando a WiFi: ");
  Serial.println(WIFI_SSID);
  WiFi.begin(WIFI_SSID, WIFI_PASSWORD);            // Start the WiFi connection attempt

  int intentos = 0;
  while (WiFi.status() != WL_CONNECTED && intentos < 40) {  // Wait up to 20 seconds
    delay(500);
    Serial.print(".");
    intentos++;
  }
  Serial.println();

  if (WiFi.status() == WL_CONNECTED) {             // Print success or failure
    Serial.print("✓ WiFi conectado. IP local: ");
    Serial.println(WiFi.localIP());
  } else {
    Serial.println("✗ No se pudo conectar al WiFi. Revisa SSID/password.");
  }
}

void publicarEstado(const char* estado) {          // Publishes the current state to the sensor topic
  StaticJsonDocument<256> doc;                     // Allocate a small JSON document on the stack
  doc["estado"]              = estado;             // Add the state string ("ensamblando", etc.)
  doc["cristal_actual"]      = cristalActual;      // Add the current crystal number
  doc["serie_actual"]        = serieActual;        // Add the current series number
  doc["cristales_por_serie"] = cristalesPorSerie;  // Add the configured crystals per series
  doc["total_series"]        = totalSeries;        // Add the configured total series
  doc["lote"]                = lote;               // Add the batch name

  char buffer[256];
  serializeJson(doc, buffer);                      // Convert the JSON document into a string
  mqttClient.publish(TOPIC_SENSOR, buffer);        // Publish the JSON string to the broker

  Serial.print("[PUB] ");
  Serial.println(buffer);                          // Echo to the Serial Monitor for debugging
}

void onMessage(char* topic, byte* payload, unsigned int length) {  // Runs on every received MQTT message
  String mensaje = "";
  for (unsigned int i = 0; i < length; i++) {
    mensaje += (char)payload[i];                   // Convert the byte array to a String
  }

  Serial.print("[RX] ");
  Serial.print(topic);
  Serial.print(" : ");
  Serial.println(mensaje);

  StaticJsonDocument<256> doc;
  DeserializationError err = deserializeJson(doc, mensaje);  // Try to parse the message as JSON
  if (err) {
    Serial.print("Error al parsear JSON: ");
    Serial.println(err.c_str());
    return;
  }

  if (String(topic) == TOPIC_CONFIG) {             // Branch 1: configuration arrived
    lote              = doc["lote"].as<String>();  // Save lot name
    cristalesPorSerie = doc["cristales_por_serie"];// Save crystals per series
    totalSeries       = doc["total_series"];      // Save total series
    configRecibida    = true;                      // Mark configuration as valid

    Serial.println("─────────────────────────────");
    Serial.print("[CONFIG] Lote: ");           Serial.println(lote);
    Serial.print("         Cristales por serie: "); Serial.println(cristalesPorSerie);
    Serial.print("         Total de series: "); Serial.println(totalSeries);
    Serial.println("─────────────────────────────");
  }

  else if (String(topic) == TOPIC_CONTROL) {       // Branch 2: control command arrived
    String comando = doc["comando"].as<String>();

    if (comando == "INICIAR") {                    // START command
      if (!configRecibida) {
        Serial.println("[ERROR] Recibí INICIAR sin configuración previa.");
        return;
      }
      cristalActual  = 0;                          // Reset crystal counter
      serieActual    = 1;                          // Reset series counter
      ensambleActivo = true;                       // Activate the assembly loop
      ultimoCristal  = millis();                   // Initialize the timestamp
      Serial.println(">>> ENSAMBLE INICIADO <<<");
    }
    else if (comando == "DETENER") {               // STOP command
      ensambleActivo = false;                      // Stop the assembly loop
      publicarEstado("detenido");                  // Notify the dashboard
      Serial.println(">>> PARO DE EMERGENCIA <<<");
    }
  }
}

void reconectarMQTT() {                            // Reconnects to MQTT if the connection drops
  while (!mqttClient.connected()) {
    Serial.print("Conectando a MQTT broker... ");
    String clientId = "xiao_esp32s3_" + String(random(0xffff), HEX);  // Random unique client ID

    if (mqttClient.connect(clientId.c_str())) {    // Try to connect
      Serial.println("✓ conectado.");
      mqttClient.subscribe(TOPIC_CONFIG);          // Listen for configuration messages
      mqttClient.subscribe(TOPIC_CONTROL);         // Listen for control commands
      Serial.print("Suscrito a: "); Serial.println(TOPIC_CONFIG);
      Serial.print("Suscrito a: "); Serial.println(TOPIC_CONTROL);
      Serial.println("Esperando configuración del dashboard...");
    } else {
      Serial.print("✗ falló (rc=");
      Serial.print(mqttClient.state());            // Print error code (-2 means MQTT_CONNECT_FAILED)
      Serial.println("). Reintentando en 3s...");
      delay(3000);                                 // Wait 3 seconds and retry
    }
  }
}

void setup() {                                     // Runs once when the board powers on
  Serial.begin(115200);                            // Open the Serial Monitor connection
  delay(1000);

  Serial.println();
  Serial.println("═══════════════════════════════════════");
  Serial.println("   CRYSTAL_CUT_V4 - XIAO ESP32-S3");
  Serial.println("═══════════════════════════════════════");

  conectarWiFi();                                  // Connect to WiFi first

  mqttClient.setServer(MQTT_BROKER, MQTT_PORT);    // Configure the MQTT client
  mqttClient.setCallback(onMessage);               // Register the message handler
}

void loop() {                                      // Runs infinitely (thousands of times per second)
  if (!mqttClient.connected()) {                   // Keep MQTT connection alive
    reconectarMQTT();
  }
  mqttClient.loop();                               // Process incoming MQTT events

  if (ensambleActivo) {                            // Only run the simulation when active
    unsigned long ahora = millis();

    if (ahora - ultimoCristal >= INTERVALO_CRISTAL) {  // Has 2 seconds elapsed since the last crystal?
      ultimoCristal = ahora;                       // Reset timestamp
      cristalActual++;                             // Increment crystal counter

      publicarEstado("ensamblando");               // Publish progress
      Serial.print("  Serie ");
      Serial.print(serieActual);
      Serial.print("/");
      Serial.print(totalSeries);
      Serial.print(" — Cristal ");
      Serial.print(cristalActual);
      Serial.print("/");
      Serial.println(cristalesPorSerie);

      if (cristalActual >= cristalesPorSerie) {    // Did we finish the current series?
        publicarEstado("serie_completa");
        Serial.print("  ✓ Serie ");
        Serial.print(serieActual);
        Serial.println(" completada.");

        if (serieActual >= totalSeries) {          // Did we finish the whole batch?
          publicarEstado("lote_completo");
          Serial.println();
          Serial.print("[COMPLETO] Lote '");
          Serial.print(lote);
          Serial.println("' finalizado.");
          Serial.println("═══════════════════════════════════════");
          ensambleActivo = false;                  // Stop the assembly loop
          configRecibida = false;                  // Require a new configuration before next batch
        } else {
          serieActual++;                           // Move to next series
          cristalActual = 0;                       // Reset crystal counter
          delay(PAUSA_ENTRE_SERIES);               // Brief pause between series
        }
      }
    }
  }
}