# Guide - Capture d'Application Externe

## 🎯 Problème Résolu

**Avant** : La sélection visuelle capturait l'écran du Visual Workflow Builder lui-même
**Maintenant** : Possibilité de capturer n'importe quelle application externe

## 🚀 Nouvelle Fonctionnalité

### Mode de Capture Externe

Quand vous ouvrez la sélection visuelle, vous avez maintenant le choix :

1. **Capture Actuelle** (pour test) - Capture l'écran actuel
2. **Capturer Application Externe** (recommandé) - Capture une autre application

### Workflow de Capture Externe

1. **Sélection du mode** : Cliquez sur "Capturer Application Externe"
2. **Countdown** : Un compte à rebours 5-4-3-2-1 s'affiche en plein écran
3. **Positionnement** : Pendant le countdown, positionnez-vous sur l'application cible
4. **Capture automatique** : À la fin du countdown, l'écran est capturé
5. **Sélection** : L'interface revient avec la capture de l'application cible

## 📋 Instructions d'Utilisation

### Étape 1 : Préparer l'Application Cible
```bash
# Ouvrez l'application que vous voulez automatiser
# Exemples :
gnome-calculator    # Calculatrice
firefox            # Navigateur
libreoffice        # Suite bureautique
```

### Étape 2 : Démarrer Visual Workflow Builder
```bash
cd visual_workflow_builder
./start_full.sh
```

### Étape 3 : Créer un Workflow
1. Ouvrir http://localhost:3000
2. Créer un nouveau workflow
3. Ajouter un nœud "Action"
4. Double-cliquer pour ouvrir les propriétés

### Étape 4 : Sélection Visuelle Externe
1. Dans "Sélecteur de cible", cliquer "Sélection visuelle"
2. Choisir "Capturer Application Externe"
3. **Pendant le countdown** : Se positionner sur l'application cible
4. Attendre la capture automatique
5. Cliquer sur l'élément à sélectionner
6. Confirmer la sélection

## 🎮 Test Rapide

```bash
cd visual_workflow_builder
python test_capture_externe.py
```

Ce script :
- Vérifie que l'API fonctionne
- Ouvre une application de test (calculatrice)
- Donne les instructions pour tester manuellement

## 🔧 Fonctionnalités Techniques

### Interface Utilisateur
- **Mode sélection** : Choix entre capture actuelle et externe
- **Countdown visuel** : Plein écran avec annulation possible
- **Bouton recapture** : Pour refaire une capture si nécessaire

### API Backend
- Endpoint `/api/screen-capture/capture` inchangé
- Capture toujours l'écran complet au moment de l'appel
- Le timing est géré côté frontend

### Gestion d'État
```typescript
const [captureMode, setCaptureMode] = useState<'select' | 'countdown' | 'captured'>('select');
const [countdown, setCountdown] = useState<number | null>(null);
```

## 🎯 Cas d'Usage

### 1. Automatisation Web
- Ouvrir un site web dans un navigateur
- Utiliser la capture externe pour sélectionner des éléments
- Créer un workflow d'automatisation web

### 2. Applications Desktop
- Ouvrir une application native (calculatrice, éditeur)
- Capturer et sélectionner des boutons/champs
- Automatiser des tâches desktop

### 3. Applications Multi-Fenêtres
- Travailler avec plusieurs applications
- Capturer chaque application séparément
- Créer des workflows complexes

## ⚡ Améliorations Futures

### Phase 1 : Sélection de Fenêtre
```typescript
// Lister les fenêtres ouvertes
const windows = await getOpenWindows();
// Permettre à l'utilisateur de choisir
const selectedWindow = await selectWindow(windows);
// Capturer uniquement cette fenêtre
const screenshot = await captureWindow(selectedWindow);
```

### Phase 2 : Raccourcis Clavier
```typescript
// Capture déclenchée par raccourci global
document.addEventListener('keydown', (e) => {
  if (e.ctrlKey && e.shiftKey && e.key === 'C') {
    triggerExternalCapture();
  }
});
```

### Phase 3 : Capture de Région
```typescript
// Permettre de sélectionner une région spécifique
const region = await selectRegion();
const screenshot = await captureRegion(region);
```

## 🐛 Dépannage

### Problème : Le countdown ne s'affiche pas
**Solution** : Vérifier que le frontend est bien démarré sur le port 3000

### Problème : La capture montre encore le navigateur
**Cause** : L'utilisateur n'a pas eu le temps de se positionner
**Solution** : Augmenter le délai du countdown ou utiliser le bouton "Nouvelle capture"

### Problème : Aucune application visible dans la capture
**Cause** : Toutes les fenêtres sont minimisées
**Solution** : S'assurer qu'une application est visible avant le countdown

## 📊 Métriques de Performance

- **Temps de countdown** : 5 secondes (configurable)
- **Temps de capture** : ~500ms
- **Taille d'image** : ~200-500KB selon la résolution
- **Temps total** : ~6 secondes du clic à la capture

## ✅ Validation

### Tests Manuels
- [ ] Interface de sélection de mode s'affiche
- [ ] Countdown fonctionne avec annulation
- [ ] Capture externe montre l'application cible
- [ ] Sélection d'éléments fonctionne
- [ ] Bouton "Nouvelle capture" fonctionne

### Tests Automatiques
```bash
./test_selection_visuelle.sh  # Tests API
python test_capture_externe.py  # Tests workflow
```

## 🎉 Conclusion

La capture d'application externe résout complètement le problème d'utilisabilité. L'utilisateur peut maintenant :

1. ✅ Capturer n'importe quelle application
2. ✅ Avoir le temps de se positionner (countdown)
3. ✅ Voir clairement l'application cible dans la capture
4. ✅ Sélectionner des éléments de façon intuitive
5. ✅ Refaire une capture si nécessaire

**La sélection visuelle est maintenant pleinement utilisable pour l'automatisation RPA !**