161 lines
4.9 KiB
Markdown
161 lines
4.9 KiB
Markdown
# 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.
|