v1
This commit is contained in:
@@ -0,0 +1,275 @@
|
||||
# Analyse Comparative - Implémentation Roue Chromatique
|
||||
|
||||
## 📊 Comparaison des Approches
|
||||
|
||||
### Solution Actuelle (Implémentée)
|
||||
**Type**: Grille de boutons 12×12 simulant une roue HSL
|
||||
|
||||
**Implémentation**:
|
||||
```javascript
|
||||
// Grille de boutons St.Button disposés en cercle
|
||||
// Chaque bouton = une couleur HSL précalculée
|
||||
const size = 12; // 12×12 = 144 cellules
|
||||
const cellSize = 18px; // Boutons cliquables
|
||||
// 113 couleurs effectivement affichées (cercle)
|
||||
```
|
||||
|
||||
**Avantages réels** ✅:
|
||||
- ✅ **Fonctionne immédiatement** (St.Button = composant natif éprouvé)
|
||||
- ✅ **Très stable** (pas de gestion Canvas/Cairo complexe)
|
||||
- ✅ **Compatible GNOME 48** (API St bien documentée)
|
||||
- ✅ **Code simple** (~70 lignes pour la roue)
|
||||
- ✅ **Débogage facile** (chaque bouton = élément inspectable)
|
||||
- ✅ **Performance correcte** (113 boutons statiques, pas de rendu temps réel)
|
||||
|
||||
**Inconvénients** ⚠️:
|
||||
- ⚠️ **Résolution limitée** (113 couleurs vs. millions théoriques)
|
||||
- ⚠️ **Granularité fixe** (pas de sélection entre deux boutons)
|
||||
- ⚠️ **Mémoire** (113 objets St.Button créés)
|
||||
- ⚠️ **Pas de feedback visuel continu** (pas de curseur sur la roue)
|
||||
|
||||
---
|
||||
|
||||
### Option A Recommandée (Synthèse)
|
||||
**Type**: Roue HSV custom avec `Clutter.Canvas`
|
||||
|
||||
**Implémentation proposée**:
|
||||
```javascript
|
||||
// Canvas interactif avec rendu Cairo
|
||||
const canvas = new Clutter.Canvas({ width: 200, height: 200 });
|
||||
canvas.connect('draw', (canvas, cr) => {
|
||||
// Dessiner roue HSV avec Cairo
|
||||
// Pour chaque pixel: calculer H (angle) et S (rayon)
|
||||
});
|
||||
// Capturer clics et drag pour position continue
|
||||
```
|
||||
|
||||
**Avantages théoriques** ✅:
|
||||
- ✅ **Résolution infinie** (sélection pixel par pixel)
|
||||
- ✅ **Feedback visuel** (curseur, preview en temps réel)
|
||||
- ✅ **Look professionnel** (roue lisse, dégradés)
|
||||
- ✅ **Mémoire optimale** (un seul canvas vs 113 boutons)
|
||||
|
||||
**Inconvénients réels** ⚠️:
|
||||
- ⚠️ **Complexité code** (~200-300 lignes pour roue + interactions)
|
||||
- ⚠️ **Performance Cairo** (rendu temps réel à optimiser)
|
||||
- ⚠️ **Bugs potentiels** (gestion événements souris, edge cases)
|
||||
- ⚠️ **Maintenance** (code custom à déboguer)
|
||||
- ⚠️ **Non fonctionnel actuellement** (notre tentative St.DrawingArea a échoué)
|
||||
|
||||
---
|
||||
|
||||
## 🔬 Analyse de Notre Tentative Canvas (Échec)
|
||||
|
||||
### Ce qui n'a pas fonctionné
|
||||
|
||||
**Code initial**:
|
||||
```javascript
|
||||
const wheelCanvas = new St.DrawingArea({ width: 200, height: 200 });
|
||||
wheelCanvas.connect('repaint', (area) => {
|
||||
this._drawColorWheel(area); // Rendu Cairo
|
||||
});
|
||||
wheelCanvas.reactive = true;
|
||||
wheelCanvas.connect('button-press-event', ...) // ❌ Jamais déclenché
|
||||
```
|
||||
|
||||
**Problèmes identifiés**:
|
||||
1. **St.DrawingArea non interactive** sous GNOME Shell 48
|
||||
2. **Événements souris ignorés** malgré `reactive: true`
|
||||
3. **Documentation manquante** sur DrawingArea + events
|
||||
|
||||
**Pourquoi Clutter.Canvas serait différent**:
|
||||
- `Clutter.Canvas` est l'API officielle pour rendu custom
|
||||
- `St.DrawingArea` est un wrapper qui peut avoir des limitations
|
||||
- Nécessite parent `Clutter.Actor` avec `content = canvas`
|
||||
|
||||
---
|
||||
|
||||
## 🎯 Recommandations par Cas d'Usage
|
||||
|
||||
### Cas 1: Vous voulez que ça fonctionne MAINTENANT ✅
|
||||
**→ Gardez la grille de boutons actuelle**
|
||||
|
||||
**Raisons**:
|
||||
- Fonctionne déjà (testable immédiatement)
|
||||
- 113 couleurs = largement suffisant pour un clavier RGB
|
||||
- Code stable et maintenable
|
||||
- Zéro risque de régression
|
||||
|
||||
**Améliorations possibles**:
|
||||
- Augmenter la grille (14×14 = 153 couleurs, cellSize: 16px)
|
||||
- Ajouter hover effect (bordure blanche au survol)
|
||||
- Ajouter tooltip avec valeurs RGB sur chaque bouton
|
||||
|
||||
---
|
||||
|
||||
### Cas 2: Vous voulez la "vraie" roue HSV (Option A) 🎨
|
||||
**→ Implémentez Clutter.Canvas**
|
||||
|
||||
**Plan d'action**:
|
||||
1. **Créer le canvas**:
|
||||
```javascript
|
||||
const canvas = new Clutter.Canvas({ width: 200, height: 200 });
|
||||
const actor = new Clutter.Actor({
|
||||
content: canvas,
|
||||
width: 200,
|
||||
height: 200,
|
||||
reactive: true
|
||||
});
|
||||
```
|
||||
|
||||
2. **Rendu Cairo** (fonction `_drawHSVWheel`):
|
||||
- Boucle polaire: angle (H) × rayon (S)
|
||||
- Conversion HSV(H, S, 1.0) → RGB
|
||||
- Cairo: `cr.setSourceRGB(r, g, b)` + `cr.arc(x, y, 1, 0, 2π)`
|
||||
|
||||
3. **Interactions**:
|
||||
```javascript
|
||||
actor.connect('button-press-event', (actor, event) => {
|
||||
const [x, y] = event.get_coords();
|
||||
// Convertir (x, y) → (angle, rayon) → (H, S)
|
||||
// Appliquer couleur
|
||||
});
|
||||
```
|
||||
|
||||
4. **Optimisations**:
|
||||
- Cache l'image de la roue (redessiner uniquement le curseur)
|
||||
- Utiliser `canvas.invalidate()` au lieu de redessiner tout
|
||||
|
||||
**Temps estimé**: 4-6 heures de développement + debug
|
||||
|
||||
**Risques**:
|
||||
- Événements souris mal gérés (comme avec DrawingArea)
|
||||
- Performance dégradée si mal optimisé
|
||||
- Bugs visuels (antialiasing, bords)
|
||||
|
||||
---
|
||||
|
||||
### Cas 3: Vous voulez le meilleur des deux mondes 🌟
|
||||
**→ Approche hybride**
|
||||
|
||||
**Solution recommandée**:
|
||||
```
|
||||
┌─────────────────────────────────┐
|
||||
│ [Bouton] Roue | Sliders │ ← Toggle
|
||||
├─────────────────────────────────┤
|
||||
│ MODE ROUE: │
|
||||
│ • Grille 12×12 (actuel) │ ← Sélection rapide
|
||||
│ │
|
||||
│ MODE SLIDERS: │
|
||||
│ • Slider H (Hue): 0-360° │ ← Affinage précis
|
||||
│ • Slider S (Sat): 0-100% │
|
||||
│ • Slider V (Val): 0-100% │
|
||||
│ │
|
||||
│ Aperçu: [████] RGB(255,128,64) │
|
||||
└─────────────────────────────────┘
|
||||
```
|
||||
|
||||
**Avantages**:
|
||||
- Roue pour sélection rapide visuelle
|
||||
- Sliders HSV pour ajustement fin
|
||||
- Deux modes répondent à tous les besoins
|
||||
|
||||
**Code minimal**:
|
||||
```javascript
|
||||
// Ajouter 3 sliders HSV dans _buildRGBSliders()
|
||||
const hueSlider = new Slider.Slider(hue / 360);
|
||||
const satSlider = new Slider.Slider(sat);
|
||||
const valSlider = new Slider.Slider(val);
|
||||
|
||||
// Callback: convertir HSV → RGB puis appliquer
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 📋 Décision Recommandée
|
||||
|
||||
### Pour votre usage (clavier RGB ASUS):
|
||||
|
||||
**Option finale: Conserver grille 12×12 + ajouter sliders HSV** ✅
|
||||
|
||||
**Justification**:
|
||||
1. **Grille actuelle suffit largement**:
|
||||
- 113 couleurs > largement assez pour explorer la palette
|
||||
- Clics directs = UX immédiate
|
||||
- Stable et fonctionnel
|
||||
|
||||
2. **Sliders HSV ajoutent la précision**:
|
||||
- Affiner une teinte exacte (H: 0-360°)
|
||||
- Contrôler saturation (couleur vive vs pastel)
|
||||
- Contrôler valeur/luminosité (sombre vs clair)
|
||||
|
||||
3. **Pas besoin de Canvas custom**:
|
||||
- Trop complexe pour le bénéfice apporté
|
||||
- Risque de bugs > gain UX marginal
|
||||
- 113 couleurs + sliders HSV = 100% des besoins couverts
|
||||
|
||||
---
|
||||
|
||||
## 🔧 Plan d'Action Proposé
|
||||
|
||||
### Étape 1: Améliorer la grille actuelle (30 min)
|
||||
```javascript
|
||||
// Hover effect
|
||||
button.connect('enter-event', () => {
|
||||
button.style += 'border: 2px solid white;';
|
||||
});
|
||||
|
||||
// Tooltip RGB
|
||||
button.set_tooltip_text(`RGB(${rgb.r}, ${rgb.g}, ${rgb.b})`);
|
||||
```
|
||||
|
||||
### Étape 2: Ajouter sliders HSV (1-2h)
|
||||
```javascript
|
||||
_buildHSVSliders() {
|
||||
// Convertir RGB actuel → HSV
|
||||
const hsv = this._rgbToHsv(this._currentR, this._currentG, this._currentB);
|
||||
|
||||
// 3 sliders H, S, V
|
||||
const hSlider = this._createSlider('Teinte (H)', hsv.h, ...);
|
||||
const sSlider = this._createSlider('Saturation (S)', hsv.s, ...);
|
||||
const vSlider = this._createSlider('Luminosité (V)', hsv.v, ...);
|
||||
|
||||
// Callback: HSV → RGB puis appliquer
|
||||
}
|
||||
```
|
||||
|
||||
### Étape 3: Mode toggle roue/HSV (30 min)
|
||||
- Bouton de bascule: [Roue] ↔ [HSV]
|
||||
- Même principe que roue ↔ RGB actuel
|
||||
|
||||
---
|
||||
|
||||
## 📊 Tableau Comparatif Final
|
||||
|
||||
| Critère | Grille Boutons (Actuel) | Canvas HSV (Option A) | Hybride Roue+HSV |
|
||||
|---------|-------------------------|----------------------|------------------|
|
||||
| **Complexité code** | ⭐⭐ (simple) | ⭐⭐⭐⭐⭐ (complexe) | ⭐⭐⭐ (moyenne) |
|
||||
| **Stabilité** | ⭐⭐⭐⭐⭐ | ⭐⭐⭐ (bugs possibles) | ⭐⭐⭐⭐⭐ |
|
||||
| **Précision couleur** | ⭐⭐⭐ (113 couleurs) | ⭐⭐⭐⭐⭐ (infini) | ⭐⭐⭐⭐⭐ (roue+sliders) |
|
||||
| **UX visuelle** | ⭐⭐⭐⭐ (clair) | ⭐⭐⭐⭐⭐ (magnifique) | ⭐⭐⭐⭐⭐ |
|
||||
| **Performance** | ⭐⭐⭐⭐ | ⭐⭐⭐ (rendu temps réel) | ⭐⭐⭐⭐ |
|
||||
| **Temps dev** | ✅ Fait | 4-6h | 2-3h |
|
||||
| **Maintenance** | ⭐⭐⭐⭐⭐ | ⭐⭐ (code custom) | ⭐⭐⭐⭐ |
|
||||
|
||||
---
|
||||
|
||||
## 🎯 Conclusion
|
||||
|
||||
### Recommandation Finale: **Grille actuelle + Sliders HSV** 🏆
|
||||
|
||||
**Pourquoi**:
|
||||
- ✅ Temps de développement minimal (2-3h vs 4-6h Canvas)
|
||||
- ✅ Stabilité maximale (composants St natifs)
|
||||
- ✅ Précision totale (sliders HSV 0-360° / 0-100%)
|
||||
- ✅ UX optimale (sélection rapide + affinage)
|
||||
- ✅ Maintenabilité (code simple, pas de Cairo custom)
|
||||
|
||||
**Prochaine étape**:
|
||||
Souhaitez-vous que j'implémente les **sliders HSV** pour compléter la grille actuelle ?
|
||||
|
||||
Cela ajoutera:
|
||||
- Slider Teinte (H): 0-360° avec dégradé arc-en-ciel
|
||||
- Slider Saturation (S): 0-100% (gris → couleur vive)
|
||||
- Slider Luminosité (V): 0-100% (noir → couleur claire)
|
||||
- Mode toggle pour passer de Roue → HSV → RGB
|
||||
Reference in New Issue
Block a user