# Sistema de Imagen de Referencia para Canvas de CtrEditor

Este sistema permite generar y analizar imágenes de fondo de referencia para el canvas de CtrEditor, facilitando la detección de problemas de resolución y posicionamiento en las capturas de pantalla.

## 📁 Archivos del Sistema

- `generate_canvas_reference.py` - Generador de imagen de fondo con QR codes
- `analyze_canvas_screenshot.py` - Analizador de capturas con QR codes
- `requirements.txt` - Dependencias Python necesarias
- `canvas_reference_background.png` - Imagen generada (3915×2726 px)

## 🚀 Instalación y Uso

### 1. Instalar Dependencias

```bash
pip install -r requirements.txt
```

### 2. Generar Imagen de Referencia

```bash
python generate_canvas_reference.py
```

Esto crea `canvas_reference_background.png` con:
- **Dimensiones**: 3915×2726 píxeles (78.31×54.53 metros)
- **Resolución**: 50 píxeles por metro
- **8 QR codes** en posiciones estratégicas
- **Grilla de coordenadas** cada 1 metro (gruesas cada 5m)
- **4 zonas de color** para identificación visual
- **Área de objetos** marcada en rojo

### 3. Usar en CtrEditor

1. Cargar `canvas_reference_background.png` como imagen de fondo del canvas
2. Tomar capturas de pantalla (completas o parciales)
3. Analizar las capturas con el script analizador

### 4. Analizar Capturas

```bash
python analyze_canvas_screenshot.py screenshot.png
```

El analizador detecta automáticamente:
- **Posición real** de QR codes vs posición esperada
- **Factor de escala** actual vs original
- **Distorsiones** en resolución horizontal/vertical
- **Problemas de posicionamiento** en área de objetos

## 🎯 QR Codes y Sus Posiciones

| Etiqueta | Posición (metros) | Propósito |
|----------|-------------------|-----------|
| TL | (5, 5) | Esquina superior izquierda |
| TR | (70, 5) | Esquina superior derecha |
| BL | (5, 45) | Esquina inferior izquierda |
| BR | (70, 45) | Esquina inferior derecha |
| CENTER | (39, 27) | Centro del canvas |
| OBJECTS | (42, 20) | Área donde están los objetos |
| CAL1 | (20, 15) | Punto de calibración 1 |
| CAL2 | (55, 35) | Punto de calibración 2 |

## 📊 Información en QR Codes

Cada QR contiene datos JSON con:

```json
{
  "position": [42, 20],
  "label": "OBJECTS",
  "canvas_size": [78.31, 54.53],
  "image_size": [3915, 2726],
  "pixels_per_meter": 50,
  "timestamp": "2025-01-09T...",
  "type": "CtrEditor_Canvas_Reference"
}
```

## 🔍 Ejemplos de Análisis

### Captura Normal
```bash
$ python analyze_canvas_screenshot.py debug_full_canvas.png

📸 Analizando imagen: debug_full_canvas.png
📐 Tamaño de imagen: 3915 × 2726 píxeles
🔍 QR codes encontrados: 8

🎯 QR #1: TL
   📍 Posición esperada: [5, 5] metros
   📱 Encontrado en píxeles: (250, 250)
   📊 Escala original: 50.0 px/m
   📊 Escala actual: 50.0 px/m
   📊 Factor de escala: 1.000
```

### Captura con Problemas
```bash
🎯 QR #1: OBJECTS
   📍 Posición esperada: [42, 20] metros  
   📱 Encontrado en píxeles: (1890, 850)
   📊 Escala original: 50.0 px/m
   📊 Escala actual: 25.2 px/m
   📊 Factor de escala: 0.504
   ⚠️  PROBLEMA: Resolución reducida al 50.4%
```

## 🛠️ Resolución de Problemas Detectados

### Factor de Escala < 1.0
- **Causa**: Canvas se renderiza a menor resolución
- **Solución**: Ajustar factor de escala en ScreenshotManager.cs

### QR Codes Faltantes  
- **Causa**: Área de captura muy pequeña o desplazada
- **Solución**: Verificar coordenadas de área de captura

### Distorsión Horizontal/Vertical
- **Causa**: Aspect ratio incorrecto
- **Solución**: Verificar cálculos de píxeles vs metros

## 🎨 Características de la Imagen

### Zonas de Color
- **Zona 1** (Superior izquierda): Rojo muy claro
- **Zona 2** (Superior derecha): Verde muy claro  
- **Zona 3** (Inferior izquierda): Azul muy claro
- **Zona 4** (Inferior derecha): Amarillo muy claro

### Patrones de Referencia
- **Círculos concéntricos** en el centro (radios 2, 4, 6, 8, 10m)
- **Líneas finas** para detectar aliasing
- **Grilla precisa** con coordenadas etiquetadas

### Área de Objetos
Rectángulo rojo que marca la región donde están ubicados los objetos del análisis:
- **Coordenadas**: 39.92, 19.76 → 44.99, 20.47 metros
- **Tamaño**: 5.07 × 0.71 metros

## 📋 Flujo de Trabajo Recomendado

1. **Generar** imagen de referencia
2. **Cargar** como fondo en CtrEditor  
3. **Tomar** capturas problemáticas
4. **Analizar** con script automático
5. **Identificar** problemas específicos
6. **Corregir** código ScreenshotManager.cs
7. **Validar** con nuevas capturas

## 🤖 Integración con LLM

El sistema está diseñado para que los LLMs puedan:
- **Leer automáticamente** los QR codes de las capturas
- **Detectar problemas** de escala y posicionamiento
- **Generar reportes** específicos de cada captura
- **Sugerir correcciones** basadas en los datos detectados

Este enfoque automatiza completamente la detección de problemas en el sistema de capturas de CtrEditor.