Skip to content

ID_LOOKUP_IMPLEMENTATION_SUMMARY.md

Latest commit

 

History

History
221 lines (186 loc) · 8.08 KB

ID_LOOKUP_IMPLEMENTATION_SUMMARY.md

File metadata and controls

221 lines (186 loc) · 8.08 KB

Résumé de l'Implémentation de la Fenêtre ID Lookup React

✅ Modifications Effectuées

1. Scripts de Build (package.json)

Ajouté deux nouveaux scripts de build pour les fenêtres externes:

"build:idlookup-window": "Build standalone de IdLookupWindow → idlookup-react/"
"build:comms-window": "Build standalone de CommsWindow → comms-react/"
"build:all": "Maintenant inclut les deux nouvelles fenêtres"

2. Routing React (index.tsx)

Ajouté support pour REACT_APP_WINDOW_TYPE:

const windowBuildType = process.env.REACT_APP_WINDOW_TYPE;
// Permet de compiler IdLookupWindow et CommsWindow comme applications standalone

3. Chemins de Fenêtres Externes

ButtonPropertyInspector.tsx et EncoderPropertyInspector.tsx:

// Ancien (HTML/JS)
idLookup: "../../propertyinspector/id_lookup_window.html"
comms: "../../settingsUI/index.html?window=comms"

// Nouveau (React standalone)
idLookup: "../../propertyinspector/idlookup-react/index.html"
comms: "../../propertyinspector/comms-react/index.html"

4. Builds Générés

✅ com.ctytler.dcs.sdPlugin/propertyinspector/idlookup-react/

  • index.html (47 kB gzippé)
  • static/js/, static/css/

✅ com.ctytler.dcs.sdPlugin/propertyinspector/comms-react/

  • index.html (47.69 kB gzippé)
  • static/js/, static/css/

5. Documentation

Créé ID_LOOKUP_WINDOW_ANALYSIS.md avec:

  • Analyse complète de l'architecture originale vs React
  • Diagramme de flux de communication
  • Guide de test et debug
  • Comparaison HTML/JS vs React

🔍 Comment Tester

Build Complet

.\Tools\build_plugin_cmake.bat -debug

Test Manuel des Fenêtres

  1. Installer le plugin dans Stream Deck
  2. Ajouter un bouton "Switch Input" ou encoder
  3. Ouvrir Property Inspector
  4. Cliquer sur "ID Lookup" → La fenêtre React devrait s'ouvrir
  5. Vérifier la section "Debug Messages" en bas pour voir les logs

Vérifications Clés

  • Fenêtre ID Lookup s'ouvre sans erreur
  • Path DCS est rempli par défaut
  • Bouton "Update" récupère les modules installés
  • Dropdown modules est populé
  • Recherche fonctionne dans le tableau
  • Sélection d'une ligne active les boutons d'import
  • Import de commande DCS met à jour le Property Inspector

Debug en Cas de Problème

Si la fenêtre ne s'ouvre pas:

// Ouvrir la console du Property Inspector (F12)
// Vérifier l'URL dans window.open():
console.log(urls.idLookup); 
// Devrait être: "../../propertyinspector/idlookup-react/index.html"

Si window.opener est null:

// Dans IdLookupWindow, section Debug Messages en bas devrait montrer:
"✗ ERROR: Not connected to Property Inspector"
// → La fenêtre n'a pas été ouverte via window.open()

Si aucun module n'apparaît:

// Dans IdLookupWindow, Debug Messages devrait montrer:
"📤 Sending RequestInstalledModules..."
"✓ Request sent successfully"
// Puis regarder les logs du plugin C++ pour voir s'il répond

📊 Architecture de Communication

┌─────────────────────────────────────────┐
│  Stream Deck Property Inspector        │
│  (ButtonPropertyInspector.tsx)          │
│                                         │
│  - openExternalWindow("idLookup")       │
│  - gotCallbackFromIdLookupWindow()     │←─┐
│  - sendToPlugin() via WebSocket         │  │
└─────────────────┬───────────────────────┘  │
                  │ window.open()             │
                  ↓                           │
┌─────────────────────────────────────────┐  │
│  IdLookupWindow (Standalone React App)  │  │
│  (idlookup-react/index.html)            │  │
│                                         │  │
│  - window.opener.gotCallback...()      ─┼──┘
│  - window.handleSendToPropertyInsp...() │←─┐
└─────────────────┬───────────────────────┘  │
                  │ WebSocket                 │
                  ↓                           │
┌─────────────────────────────────────────┐  │
│  C++ Plugin Backend                     │  │
│  (StreamDeckDCSInterface.exe)           │  │
│                                         │  │
│  - RequestInstalledModules             ──┼──┘
│  - RequestIdLookup                      │
│  - sendToPropertyInspector()            │
└─────────────────────────────────────────┘

📝 Prochaines Étapes

Court Terme (Test)

  1. Tester l'ouverture de la fenêtre dans Stream Deck
  2. Vérifier la communication avec le backend C++
  3. Valider l'import de commandes DCS

Moyen Terme (Amélioration)

  1. Ajouter des logs côté C++ pour debug
  2. Améliorer les messages d'erreur
  3. Documenter le flux de communication

Long Terme (Cleanup)

  1. Supprimer l'ancien id_lookup_window.html
  2. Supprimer les anciens fichiers JS
  3. Mettre à jour la documentation utilisateur

🐛 Debugging avec Stream Deck CLI

Installation

npm install -g @elgato/cli@latest
nvm use 21.7.3  # Ou version >= 20
streamdeck -v   # Vérifier l'installation

Commandes Utiles

# Lier le plugin (si pas déjà installé)
streamdeck link Sources\com.ctytler.dcs.sdPlugin

# Activer le mode développeur (logs détaillés)
streamdeck dev

# Redémarrer le plugin
streamdeck restart com.ctytler.dcs

# Valider le plugin
streamdeck validate Sources\com.ctytler.dcs.sdPlugin

Build avec Debug Automatique

Le script build_plugin_cmake.bat supporte maintenant -debug:

.\Tools\build_plugin_cmake.bat -debug

Cela va:

  1. Compiler le C++
  2. Build tous les React apps
  3. Packager le plugin
  4. Lier le plugin à Stream Deck
  5. Activer le mode développeur
  6. Redémarrer le plugin

📋 Checklist de Vérification

Fichiers Créés/Modifiés

  • frontend-react-js/package.json - Nouveaux scripts de build
  • frontend-react-js/src/index.tsx - Support REACT_APP_WINDOW_TYPE
  • frontend-react-js/src/propertyinspectors/ButtonPropertyInspector.tsx - Nouveaux chemins
  • frontend-react-js/src/propertyinspectors/EncoderPropertyInspector.tsx - Nouveaux chemins
  • Tools/build_plugin_cmake.bat - Support paramètre -debug
  • ID_LOOKUP_WINDOW_ANALYSIS.md - Documentation complète
  • ID_LOOKUP_IMPLEMENTATION_SUMMARY.md - Ce fichier

Builds Vérifiés

  • com.ctytler.dcs.sdPlugin/propertyinspector/idlookup-react/index.html
  • com.ctytler.dcs.sdPlugin/propertyinspector/comms-react/index.html
  • com.ctytler.dcs.sdPlugin/propertyinspector/button-react/index.html
  • com.ctytler.dcs.sdPlugin/propertyinspector/encoder-react/index.html
  • com.ctytler.dcs.sdPlugin/propertyinspector/dcsbios-react/index.html
  • com.ctytler.dcs.sdPlugin/settingsUI/index.html
  • Release/com.ctytler.dcs.streamDeckPlugin

Tests à Effectuer

  • Ouverture fenêtre ID Lookup depuis Button PI
  • Ouverture fenêtre ID Lookup depuis Encoder PI
  • Communication Property Inspector ↔ ID Lookup Window
  • Communication ID Lookup Window ↔ C++ Backend
  • Récupération modules DCS installés
  • Recherche dans clickabledata
  • Import de commandes DCS
  • Import de changements d'image
  • Import de changements de texte

🎯 Objectif Final

Avoir une fenêtre ID Lookup 100% React qui:

  • ✅ S'ouvre depuis les Property Inspectors
  • ✅ Communique avec le backend C++
  • ✅ Permet la recherche de commandes DCS
  • ✅ Permet l'import de configurations
  • ✅ Affiche des logs de debug clairs
  • ⏳ À TESTER dans l'environnement Stream Deck réel