Suite série lecture labiale (désactivation partielle du panneau, amélioration des traces)

clavier/admin.py

@@ -7,7 +7,11 @@ admin.site.site_header = 'Tableau de bord du PhonoGraphe'
 class SerieAdmin(admin.ModelAdmin):
     list_display = ('nom', 'auteur', 'dateCreation')
     list_filter = ('auteur',)
-    fields = ('nom', 'description', 'auteur', 'images', 'phono', 'videoMode', 'synthvoc', 'mots',)
+    fields = [field.name for field in Serie._meta.get_fields()]
+    fields.remove('id')
+    fields.remove('dateCreation')
+    fields.remove('dateModification')
+    readonly_fields = ('dateCreation', 'dateModification',)
 
 # Register your models here.
 admin.site.register(Serie, SerieAdmin)

clavier/migrations/0012_auto_20210324_2000.py

+# Generated by Django 3.0.5 on 2021-03-24 20:00
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('clavier', '0011_serie_videomode'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='serie',
+            name='audioFin',
+            field=models.CharField(default='0', max_length=1),
+        ),
+        migrations.AddField(
+            model_name='serie',
+            name='code',
+            field=models.CharField(default='nouvelle_serie', max_length=100),
+        ),
+        migrations.AddField(
+            model_name='serie',
+            name='panneauPartiel',
+            field=models.CharField(default='0', max_length=1),
+        ),
+        migrations.AddField(
+            model_name='serie',
+            name='phonVisibles',
+            field=models.TextField(default='[]'),
+        ),
+    ]

clavier/models.py

@@ -6,12 +6,16 @@ class Serie(models.Model):
     dateCreation = models.DateTimeField(auto_now_add=True, auto_now=False)
     dateModification = models.DateTimeField(auto_now_add=False, auto_now=True)
     nom = models.CharField(default='nouvelle série', max_length=100)
+    code = models.CharField(default='nouvelle_serie', max_length=100)
     description = models.TextField(blank=True, max_length=500)
     auteur = models.ForeignKey(User, on_delete=models.PROTECT)
-    images = models.CharField(default='0', max_length=1)
-    phono = models.CharField(default='0', max_length=1)
-    videoMode = models.CharField(default='0', max_length=1)
-    synthvoc = models.CharField(default='0', max_length=1)
+    imageFin = models.CharField(default='0', max_length=1)
+    phonoFin = models.CharField(default='0', max_length=1)
+    audioFin = models.CharField(default='0', max_length=1)
+    videoDeb = models.CharField(default='0', max_length=1)
+    syntheseVocale = models.CharField(default='0', max_length=1)
+    panneauPartiel = models.CharField(default='0', max_length=1)
+    phonVisibles = models.TextField(default='[]')
     mots = models.TextField(default='[]')
 
 class Mot(models.Model):

clavier/views.py

@@ -124,7 +124,7 @@ class SerieDetailView(DetailView):
 
 def openPlayerPhono(request, pk):
     updateTimeStr = updateTime()
-    serieContent = Serie.objects.filter(id=pk).first()
+    serieContent = Serie.objects.filter(code=pk).first()
     print(serieContent)
     print("Demande ouverture série", serieContent.nom, ' (', pk, ')')
     return render(request, 'playerPhono.html', {'updateTime': updateTimeStr, 'serieContent':serieContent, 'titrePage': 'phonoplayer'})

clavierPhono/urls.py

@@ -43,8 +43,8 @@ urlpatterns = [
     path('export/', csrf_exempt(clavier_views.save2db)),
 
     path('player/', clavier_views.openPlayerHome, name='home'), # ou SerieListView.as_view()
-    path('player/serie-<int:pk>', clavier_views.SerieDetailView.as_view(), name='serie-page'),
-    path('player/serie-<int:pk>/play', clavier_views.openPlayerPhono, name='serie-play'),
+    path('player/serie-<str:pk>', clavier_views.SerieDetailView.as_view(), name='serie-page'),
+    path('player/serie-<str:pk>/play', clavier_views.openPlayerPhono, name='serie-play'),
 
     path('_saveTrace/', csrf_exempt(user_views.saveTrace)),
     path('_playIpa/', csrf_exempt(clavier_views.playIpa)),

static/js/clavierCalques.js

@@ -14,18 +14,18 @@ function setKeyboards(bgColor) {
         // Clavier par défaut :
         pngPochoir.src="/static/png/01.png";
         pngCalq.src="/static/png/04.png";
-        rien.addEventListener('click', function(){pngCalq.src='';btnFocus(rien);famille="formes"});
-        vsm.addEventListener('click', function(){pngCalq.src="/static/png/03.png";btnFocus(vsm);famille="formes"});
-        bch.addEventListener('click', function(){pngCalq.src="/static/png/04.png";btnFocus(bch);famille="bouches"});
-        cpsg.addEventListener('click', function(){pngCalq.src="/static/png/06.png";btnFocus(cpsg);famille="coupes"});
+        rien.addEventListener('click', function(){pngCalq.src='';btnFocus(rien);famille="formes";saveTrace(`ShiftKeyboard ${famille}`); showPanneau()});
+        vsm.addEventListener('click', function(){pngCalq.src="/static/png/03.png";btnFocus(vsm);famille="formes";saveTrace(`ShiftKeyboard ${famille}`); showPanneau()});
+        bch.addEventListener('click', function(){pngCalq.src="/static/png/04.png";btnFocus(bch);famille="bouches";saveTrace(`ShiftKeyboard ${famille}`); showPanneau()});
+        cpsg.addEventListener('click', function(){pngCalq.src="/static/png/06.png";btnFocus(cpsg);famille="coupes";saveTrace(`ShiftKeyboard ${famille}`); showPanneau()});
     } else if (bgColor == 'white') {
         // Clavier par défaut :
         pngPochoir.src="/static/png/02.png";
         pngCalq.src="/static/png/05.png";
         rien.addEventListener('click', function(){pngCalq.src='';btnFocus(rien);famille="formes"});
-        vsm.addEventListener('click', function(){pngCalq.src="/static/png/03.png";btnFocus(vsm);famille="formes"});
-        bch.addEventListener('click', function(){pngCalq.src="/static/png/05.png";btnFocus(bch);famille="bouches"});
-        cpsg.addEventListener('click', function(){pngCalq.src="/static/png/06.png";btnFocus(cpsg);famille="formes"});
+        vsm.addEventListener('click', function(){pngCalq.src="/static/png/03.png";btnFocus(vsm);famille="formes";saveTrace(`ShiftKeyboard ${famille}`); showPanneau()});
+        bch.addEventListener('click', function(){pngCalq.src="/static/png/05.png";btnFocus(bch);famille="bouches";saveTrace(`ShiftKeyboard ${famille}`); showPanneau()});
+        cpsg.addEventListener('click', function(){pngCalq.src="/static/png/06.png";btnFocus(cpsg);famille="formes";saveTrace(`ShiftKeyboard ${famille}`); showPanneau()});
     };
 };
 
@@ -60,3 +60,8 @@ function agrandirPanneau() {
         document.documentElement.style.setProperty('--clavSize', parseInt(clavSize.slice(0,2)) + 10 + '%');
         document.documentElement.style.setProperty('--graphSize', parseInt(graphSize.slice(0,2)) - 10 + '%');
 }
+
+function showPanneau() {
+    document.getElementById('doCalques').style = ''
+    document.getElementById('cachePanneau').style.display = 'none'
+}
\ No newline at end of file

static/js/playerPhono.js

@@ -30,7 +30,6 @@ function selectLang(lang, p="default", f="default"){
     selectPanneau(p)
 }
 
-interface("fr");
 function interface(lang) {
     console.log("Langue d'interface:",lang)
     thisPageLang = lang
@@ -52,12 +51,12 @@ function interface(lang) {
 
 
 function selectPanneau(p){
-    console.log("selectPanneau",p,thisPageLang)
     if (p=="default" && thisPageLang=="fr") {
         p = "phonoFrDo"
     } else if (p=="default" && thisPageLang=="en") {
         p = "phonoEnAlem"
     }
+    console.log("selectPanneau",p,thisPageLang)
     var svgEnPronSciBr = document.getElementById('svgEnPronSciBr'); // Panneau EN PronSci
 
     var svgEnAlem = document.getElementById('svgEnAlem'); // Panneau EN ALeM (fond couleurs)
@@ -101,22 +100,23 @@ function recupPhon(identifiant) {
         var tgt = e.target
         playEffect("delete")
         tgt.remove()
-        saveTrace('del phon '+rectId)
+        saveTrace(`del ${famille} ${rectId}`)
     })
 
     newCarte.addEventListener('dragstart', () => {
         newCarte.classList.add('dragging')
-        console.log('DRAGGING ', rectId)
     })
 
     newCarte.addEventListener('dragend', () => {
         newCarte.classList.remove('dragging')
-        console.log('STOP DRAGGING ', rectId)
+        let listCartes = []
+        for (i=0; i<rep.children.length; i++) listCartes.push(Array.from(rep.children[i].classList).join("."))
+        saveTrace("drag to " + listCartes.join(' '))
     })
     
     repDiv.appendChild(newCarte)
     playEffect("select")
-    saveTrace('add phon '+rectId)
+    saveTrace(`add ${famille} ${rectId}`)
 
     // Mise à jour de la table
     cartes = document.querySelectorAll('.carte') // mise à jour de la liste des cartes sur la table
@@ -158,6 +158,7 @@ function demarrer() {
 function loadNext() {
     document.getElementById("bravo").style.display = "none"
     if (cptitem < nbmots) {
+        saveTrace("next '"+mots[cptitem]["motGenerique"]+"'")
         rep.innerHTML = ""
         if (audioMode) {
             currentAudio = mots[cptitem]["audio"]
@@ -171,7 +172,6 @@ function loadNext() {
         }
         cptitem = cptitem+1
         document.getElementById('cptitem').innerHTML = cptitem
-        saveTrace("next '"+mots[cptitem-1]["motGenerique"]+"'")
     } else {
         getFelicitations()
         playEffect("success")
@@ -189,17 +189,17 @@ function checkAnswer() {
         var repphon = rep.children[i].classList[1].replace("rect","phon")
         if (repphon != phono[i]) {
             erreur = true
-            console.log("ERREUR",repphon,phono[i])
+            // console.log(`ERREUR ${repphon} attendu: ${phono[i]}`)
             playEffect('wrong')
             rep.children[i].classList.add("wrongPhon")
-            saveTrace('erreur '+repphon,phono[i])
+            saveTrace(`erreur ${repphon} attendu: ${phono[i]}`)
         }
     }
     if (rep.children.length != phono.length) {
         erreur = true
-        console.log("ERREUR nb phonèmes")
+        // console.log("ERREUR nb phonèmes")
         playEffect('wrong')
-        saveTrace('erreur nb phon ', rep.children.length, phono.length)
+        saveTrace(`erreur nb phon ${rep.children.length} attendu:${phono.length}`)
     }
 
     if (!erreur) {
@@ -253,6 +253,7 @@ function getFelicitations() {
 function playAudio() {
     var audio = new Audio("../../media/audio-uploads/"+currentAudio)
     audio.play()
+    saveTrace("playAudio")
 }
 
 // VIDEO
@@ -264,6 +265,7 @@ function playVideo() {
     } else {
         video.pause(); 
     }
+    saveTrace("playVideo")
 }
 
 function playEffect(effect) {
@@ -282,7 +284,7 @@ async function saveTrace(action) {
         console.log("ENREGISTREMENT ", action)
         // ON EMBALLE TOUT ÇA
         var colis = {
-            appli: "phonoplayer",
+            appli: thisAppli,
             action: action
         }
         // Paramètres d'envoi
@@ -305,4 +307,37 @@ window.onclick = function(event) {
     if (event.target == videoPlayer) {
         videoPlayer.style.display = "none"
     }
-}
\ No newline at end of file
+}
+
+function initGraph() {
+    // Rien. Pour éviter une erreur quand on clique dans le fond du tableau
+}
+
+// RECUPERATION DU SVG (CLICK FR)
+var svgClick = document.getElementById("svgClick");
+var svgDoc;
+svgClick.addEventListener("load",function(){
+    // get the inner DOM of alpha.svg
+    svgDoc = svgClick.getSVGDocument();
+
+    let frphonolist = ["rect_2", "rect_9", "rect_9_nas", "rect_a", "rect_a_maj", "rect_a_maj_nas", "rect_arobase", "rect_b", "rect_d", "rect_dz_maj", "rect_e", "rect_e_maj", "rect_e_maj_nas", "rect_f", "rect_g", "rect_gz", "rect_h_maj", "rect_ij", "rect_i", "rect_j", "rect_k", "rect_ks", "rect_l", "rect_m", "rect_nj", "rect_n", "rect_n_maj", "rect_o", "rect_o_maj", "rect_o_maj_nas", "rect_p", "rect_r_maj", "rect_s", "rect_s_maj", "rect_t", "rect_ts_maj", "rect_u", "rect_v", "rect_wa", "rect_we_maj_nas", "rect_w", "rect_y", "rect_z", "rect_z_maj"]
+
+    if (panneauPartiel) {
+        console.log('Désactivation des phonèmes non-cible')
+        for (phon in phonActifs) phonActifs[phon] = phonActifs[phon].replace('phon', 'rect')
+
+        // On désactive tous les phonèmes sauf ceux de la liste phonActifs
+        for (i=0; i<frphonolist.length; i++) {
+            if (!phonActifs.includes(frphonolist[i])) {
+                let thisphon = svgDoc.getElementById(frphonolist[i])
+                thisphon.style.fillOpacity = .7
+                thisphon.classList.remove('svgPhonClick')
+                thisphon.onclick = ""
+                thisphon.onmouseover = ""
+                thisphon.onmouseout = ""
+            }
+        }
+    }
+
+}, false);
+

static/js/popupAide.js

@@ -3,6 +3,7 @@ var popDivBool = false;
 function toggleAides() {
     popDivBool = !popDivBool;
     document.getElementById('aidbtn').classList.toggle("glyphiconSelected");
+    saveTrace(`toggle AidesPopup ${popDivBool}`)
 }
 
 // SVG Do original width="1122.5601"

static/js/syntheseVocale.js

 var currentIpa = "";
 var currentDebit = 80;
 var voix = "f"
+var lang = thisPageLang
 
 async function playIpa() {
     
@@ -41,9 +42,9 @@ async function playIpa() {
         }
         if (ipa.length > 0 && ipa != currentIpa) { synth = true }
     }
-    
+
     if (synth) {
-        console.log("lecture de ", ipa);
+        console.log(`Lecture de [${ipa}]`);
         currentIpa = ipa;
         // ON EMBALLE TOUT ÇA
         var colis = {
@@ -71,6 +72,8 @@ async function playIpa() {
         sv_audio.playbackRate = document.getElementById('debitParole').value / 100;
         sv_audio.play();
     }
+
+    saveTrace(`playIpa [${ipa}] ${voix} ${lang}`)
 }
 
 function readResponse(response) {

static/styles/clavier.css

@@ -344,11 +344,12 @@
 
 /* Calques A. Do */
 .doCalques {
-    padding: 0 10px;
+    padding: 10px 10px;
     display: inline-flex;
     justify-content: center;
     align-items: center;
     background-color: black;
+    border-radius: 10px;
 }
 .btn-calq-div select {margin: 0 5px;}
 .btn-calq {

static/styles/player.css

@@ -111,6 +111,7 @@
     background-color: white;
     width:100%;
     margin: 10px 0 0 0;
+    min-height: 132px;
 }
 
 .divReponse {

static/svg/00-click.svg

@@ -60,7 +60,7 @@
      onclick="top.initGraph()" />
   <rect
      class="svgPhonClick"
-     style="fill:#ff0000;fill-opacity:0;stroke-width:1.0920589"
+     style="fill:#000;fill-opacity:0;stroke-width:1.0920589"
      id="rect_e_maj_nas"
      width="117.70092"
      height="95.706306"
@@ -71,7 +71,7 @@
      onmouseout="top.hidePopDiv()" />
   <rect
      class="svgPhonClick"
-     style="fill:#ff0000;fill-opacity:0;stroke-width:0.97319824"
+     style="fill:#000;fill-opacity:0;stroke-width:0.97319824"
      id="rect_e_maj"
      width="118.29536"
      height="76.569557"
@@ -82,7 +82,7 @@
      onmouseout="top.hidePopDiv()" />
   <rect
      class="svgPhonClick"
-     style="fill:#ff0000;fill-opacity:0;stroke-width:0.99377793"
+     style="fill:#000;fill-opacity:0;stroke-width:0.99377793"
      id="rect_e"
      width="118.29536"
      height="66.926514"
@@ -93,7 +93,7 @@
      onmouseout="top.hidePopDiv()" />
   <rect
      class="svgPhonClick"
-     style="fill:#ff0000;fill-opacity:0;stroke-width:1.03654826"
+     style="fill:#000;fill-opacity:0;stroke-width:1.03654826"
      id="rect_i"
      width="118.29536"
      height="60.676048"
@@ -104,7 +104,7 @@
      onmouseout="top.hidePopDiv()" />
   <rect
      class="svgPhonClick"
-     style="fill:#ff0000;fill-opacity:0;stroke-width:0.89945441"
+     style="fill:#000;fill-opacity:0;stroke-width:0.89945441"
      id="rect_y"
      width="72.167313"
      height="61.864948"
@@ -115,7 +115,7 @@
      onmouseout="top.hidePopDiv()" />
   <rect
      class="svgPhonClick"
-     style="fill:#ff0000;fill-opacity:0;stroke-width:0.96261579"
+     style="fill:#000;fill-opacity:0;stroke-width:0.96261579"
      id="rect_2"
      width="85.02372"
      height="71.478127"
@@ -126,7 +126,7 @@
      onmouseout="top.hidePopDiv()" />
   <rect
      class="svgPhonClick"
-     style="fill:#ff0000;fill-opacity:0;stroke-width:0.99466914"
+     style="fill:#000;fill-opacity:0;stroke-width:0.99466914"
      id="rect_9"
      width="95.706299"
      height="78.221046"
@@ -137,10 +137,10 @@
      onmouseout="top.hidePopDiv()" />
   <rect
      class="svgPhonClick"
-     style="fill:#ff0000;fill-opacity:0;stroke-width:0.91180998"
+     style="fill:#000;fill-opacity:0;stroke-width:0.91180998"
      id="rect_a"
      width="114.09196"
-     height="84.038811"
+     height="86.038811"
      x="194.97929"
      y="274.42444"
      onclick="top.recupPhon(this.id) ; top.showPopDiv(this)"
@@ -148,7 +148,7 @@
      onmouseout="top.hidePopDiv()" />
   <rect
      class="svgPhonClick"
-     style="fill:#ff0000;fill-opacity:0;stroke-width:1.07606018"
+     style="fill:#000;fill-opacity:0;stroke-width:1.07606018"
      id="rect_arobase"
      width="99.561493"
      height="74.492615"
@@ -159,7 +159,7 @@
      onmouseout="top.hidePopDiv()" />
   <rect
      class="svgPhonClick"
-     style="fill:#ff0000;fill-opacity:0;stroke-width:1.09850669"
+     style="fill:#000;fill-opacity:0;stroke-width:1.09850669"
      id="rect_9_nas"
      width="99.56147"
      height="92.614548"
@@ -170,7 +170,7 @@
      onmouseout="top.hidePopDiv()" />
   <rect
      class="svgPhonClick"
-     style="fill:#ff0000;fill-opacity:0;stroke-width:1.268435"
+     style="fill:#000;fill-opacity:0;stroke-width:1.268435"
      id="rect_ij"
      width="132.34067"
      height="40.922245"
@@ -179,7 +179,7 @@
      onclick="top.recupPhon(this.id)" />
   <rect
      class="svgPhonClick"
-     style="fill:#ff0000;fill-opacity:0;stroke-width:1.25146234"
+     style="fill:#000;fill-opacity:0;stroke-width:1.25146234"
      id="rect_j"
      width="127.1946"
      height="41.143723"
@@ -190,7 +190,7 @@
      onmouseout="top.hidePopDiv()" />
   <rect
      class="svgPhonClick"
-     style="fill:#ff0000;fill-opacity:0;stroke-width:0.83729899"
+     style="fill:#000;fill-opacity:0;stroke-width:0.83729899"
      id="rect_h_maj"
      width="47.787655"
      height="40.897495"
@@ -199,7 +199,7 @@
      onclick="top.recupPhon(this.id)" />
   <rect
      class="svgPhonClick"
-     style="fill:#ff0000;fill-opacity:0"
+     style="fill:#000;fill-opacity:0"
      id="rect_p"
      width="104.62304"
      height="70.739441"
@@ -210,7 +210,7 @@
      onmouseout="top.hidePopDiv()" />
   <rect
      class="svgPhonClick"
-     style="fill:#ff0000;fill-opacity:0"
+     style="fill:#000;fill-opacity:0"
      id="rect_f"
      width="105.81194"
      height="70.144989"
@@ -221,7 +221,7 @@
      onmouseout="top.hidePopDiv()" />
   <rect
      class="svgPhonClick"
-     style="fill:#ff0000;fill-opacity:0"
+     style="fill:#000;fill-opacity:0"
      id="rect_t"
      width="102.83969"
      height="69.550545"
@@ -232,7 +232,7 @@
      onmouseout="top.hidePopDiv()" />
   <rect
      class="svgPhonClick"
-     style="fill:#ff0000;fill-opacity:0"
+     style="fill:#000;fill-opacity:0"
      id="rect_b"
      width="104.02859"
      height="69.550629"
@@ -243,7 +243,7 @@
      onmouseout="top.hidePopDiv()" />
   <rect
      class="svgPhonClick"
-     style="fill:#ff0000;fill-opacity:0;stroke-width:1.00599992"
+     style="fill:#000;fill-opacity:0;stroke-width:1.00599992"
      id="rect_v"
      width="104.02858"
      height="70.688492"
@@ -254,7 +254,7 @@
      onmouseout="top.hidePopDiv()" />
   <rect
      class="svgPhonClick"
-     style="fill:#ff0000;fill-opacity:0;stroke-width:1.05640161"
+     style="fill:#000;fill-opacity:0;stroke-width:1.05640161"
      id="rect_m"
      width="107.93475"
      height="74.594612"
@@ -265,7 +265,7 @@
      onmouseout="top.hidePopDiv()" />
   <rect
      class="svgPhonClick"
-     style="fill:#ff0000;fill-opacity:0;stroke-width:1.04740381"
+     style="fill:#000;fill-opacity:0;stroke-width:1.04740381"
      id="rect_nj"
      width="75.690269"
      height="74.440117"
@@ -276,7 +276,7 @@
      onmouseout="top.hidePopDiv()" />
   <rect
      class="svgPhonClick"
-     style="fill:#ff0000;fill-opacity:0;stroke-width:1.02349234"
+     style="fill:#000;fill-opacity:0;stroke-width:1.02349234"
      id="rect_n"
      width="103.73136"
      height="74.10215"
@@ -287,7 +287,7 @@
      onmouseout="top.hidePopDiv()" />
   <rect
      class="svgPhonClick"
-     style="fill:#ff0000;fill-opacity:0"
+     style="fill:#000;fill-opacity:0"
      id="rect_d"
      width="103.73136"
      height="69.847763"
@@ -298,7 +298,7 @@
      onmouseout="top.hidePopDiv()" />
   <rect
      class="svgPhonClick"
-     style="fill:#ff0000;fill-opacity:0;stroke-width:1.05784261"
+     style="fill:#000;fill-opacity:0;stroke-width:1.05784261"
      id="rect_s"
      width="107.09407"
      height="76.029732"
@@ -309,7 +309,7 @@
      onmouseout="top.hidePopDiv()" />
   <rect
      class="svgPhonClick"
-     style="fill:#ff0000;fill-opacity:0;stroke-width:1.04773486"
+     style="fill:#000;fill-opacity:0;stroke-width:1.04773486"
      id="rect_z"
      width="107.14507"
      height="75.189056"
@@ -320,7 +320,7 @@
      onmouseout="top.hidePopDiv()" />
   <rect
      class="svgPhonClick"
-     style="fill:#ff0000;fill-opacity:0;stroke-width:1.04494679"
+     style="fill:#000;fill-opacity:0;stroke-width:1.04494679"
      id="rect_ts_maj"
      width="74.008896"
      height="76.284706"
@@ -329,7 +329,7 @@
      onclick="top.recupPhon(this.id)" />
   <rect
      class="svgPhonClick"
-     style="fill:#ff0000;fill-opacity:0;stroke-width:1.02368915"
+     style="fill:#000;fill-opacity:0;stroke-width:1.02368915"
      id="rect_dz_maj"
      width="74.008911"
      height="73.507698"
@@ -338,7 +338,7 @@
      onclick="top.recupPhon(this.id)" />
   <rect
      class="svgPhonClick"
-     style="fill:#ff0000;fill-opacity:0;stroke-width:1.05255103"
+     style="fill:#000;fill-opacity:0;stroke-width:1.05255103"
      id="rect_z_maj"
      width="104.02859"
      height="77.71109"
@@ -349,7 +349,7 @@
      onmouseout="top.hidePopDiv()" />
   <rect
      class="svgPhonClick"
-     style="fill:#ff0000;fill-opacity:0;stroke-width:1.01812303"
+     style="fill:#000;fill-opacity:0;stroke-width:1.01812303"
      id="rect_s_maj"
      width="104.02852"
      height="71.478104"
@@ -360,7 +360,7 @@
      onmouseout="top.hidePopDiv()" />
   <rect
      class="svgPhonClick"
-     style="fill:#ff0000;fill-opacity:0;stroke-width:1.07047749"
+     style="fill:#000;fill-opacity:0;stroke-width:1.07047749"
      id="rect_ks"
      width="75.095818"
      height="77.91507"
@@ -369,7 +369,7 @@
      onclick="top.recupPhon(this.id)" />
   <rect
      class="svgPhonClick"
-     style="fill:#ff0000;fill-opacity:0;stroke-width:1.05015576"
+     style="fill:#000;fill-opacity:0;stroke-width:1.05015576"
      id="rect_gz"
      width="75.393021"
      height="75.312164"
@@ -378,7 +378,7 @@
      onclick="top.recupPhon(this.id)" />
   <rect
      class="svgPhonClick"
-     style="fill:#ff0000;fill-opacity:0"
+     style="fill:#000;fill-opacity:0"
      id="rect_k"
      width="104.92027"
      height="70.144989"
@@ -389,7 +389,7 @@
      onmouseout="top.hidePopDiv()" />
   <rect
      class="svgPhonClick"
-     style="fill:#ff0000;fill-opacity:0;stroke-width:0.99596274"
+     style="fill:#000;fill-opacity:0;stroke-width:0.99596274"
      id="rect_g"
      width="103.48514"