Skip to content

GitLab

Commit 2fd4a959 authored by Sylvain Coulange's avatar Sylvain Coulange
Browse files

ajout fonction stress

parent 43ad8d4a
Hide whitespace changes
Inline Side-by-side
Showing with 108 additions and 37 deletions
public/index.html
View file @ 2fd4a959
......@@ -60,7 +60,7 @@
<span>Inspiré des outils d'<a href="mailto:do.alexandre38@gmail.com">Alexandre Do</a></span>
</div>
<div class="parametres-right">
<a id="hrefNewPage" href=""><div title="Ouvrir une nouvelle page">
<a id="hrefNewPage" href="" target="_blank"><div title="Ouvrir une nouvelle page">
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi bi-file-earmark-plus" viewBox="0 0 16 16">
<path d="M8 6.5a.5.5 0 0 1 .5.5v1.5H10a.5.5 0 0 1 0 1H8.5V11a.5.5 0 0 1-1 0V9.5H6a.5.5 0 0 1 0-1h1.5V7a.5.5 0 0 1 .5-.5z"/>
<path d="M14 4.5V14a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h5.5L14 4.5zm-3 0A1.5 1.5 0 0 1 9.5 3V1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V4.5h-2z"/>
......@@ -214,7 +214,7 @@
<div class="choixPanneau mt-2">
<select id="selectPanneau" onchange="selectPanneau(this.value)" class="langtitle">
<option value="phonoFrDo">Panneaux Fr A. Do</option>
<option value="phonoFrDo" selected>Panneaux Fr A. Do</option>
<option value="svgFrKinephones">Panneau Fr Kinéphones</option>
<option value="svgFrGattegno">Panneau Fr Gattegno</option>
<option value="phonoEnAlem">Panneau En ALEM British</option>
......@@ -245,7 +245,11 @@
<div class="tab-content" id="nav-tabContent">
<div class="tab-pane fade" id="nav-ponctuation" role="tabpanel" aria-labelledby="nav-ponctuation-tab">
<div>
<button type="button" class="btn-espace" onclick="space()">Espace</button>
<div class="d-flex">
<button type="button" class="btn-espace me-auto" onclick="space()">Espace</button>
<button type="button" class="btn-espace" id="stress1" style="background-color: #FF9500;" onclick="setStress(1)">Stress 1</button>
<button type="button" class="btn-espace" id="stress2" style="background-color: #FFBD5F;" onclick="setStress(2)">Stress 2</button>
</div>
</div>
<hr>
<div id="ponctuation"></div>
......@@ -281,7 +285,7 @@
</div> -->
<!-- TAILLE ESPACE -->
<div>
Taille des espaces : <input id="spaceWidth" type="number" value="30" step="5" style="width:60px">
Taille des espaces : <input id="spaceWidth" type="number" value="37" style="width:60px"> pixels.
</div>
<!-- BACKGROUND COLOR -->
<form class="d-flex align-items-center my-2">
......@@ -336,7 +340,7 @@
<strong>Bienvenue dans la nouvelle version du PhonoDrop !</strong>
<ul class="ul_aide">
<li>Pour déposer des cartes sur la table, cliquez simplement sur les formes dans le tableau de sons, ou sur les cartes des onglets "ponctuation" ou "grammaire".</li>
<li>Pour déposer des cartes sur la table, cliquez simplement sur les formes dans le tableau de sons, ou sur les cartes des onglets "Ponctuation" ou "Réglettes".</li>
<li>Une fois sur la table, vous pouvez sélectionner les cartes en cliquant dessus ou en sélectionnant une zone avec la souris.</li>
<li>Double-cliquez où vous le souhaitez sur la page pour positionner le curseur, ou cliquez sur une carte pour écrire à la suite.</li>
<li>Pour ajouter un espace, cliquez sur "espace" dans l'onglet ponctuation, ou dans le fond noir du tableau de sons.</li>
......
public/scripts/phonodrop_v2.js
View file @ 2fd4a959
......@@ -159,6 +159,17 @@ function recupPhon(identifiant){
newDiv.classList.add(bouche)
newDiv.classList.add('noTextClip')
let ponderateur = 1 // pondérateur de taille pour stress
if (stress1) {
ponderateur = 2
newDiv.classList.add('stress1')
setStress(0)
} else if (stress2) {
ponderateur = 1.5
newDiv.classList.add('stress2')
setStress(0)
}
// PONCTUATION
if (identifiant.match(/punct_.*/)) {
newDiv.style.backgroundImage = "url('punct/"+identifiant+".jpg')"
......@@ -200,8 +211,8 @@ function recupPhon(identifiant){
rmPart(document.getElementById('syll3'),'tonale')
rmPart(document.getElementById('syll4'),'finale')
toggleTone(5)
newDivWidth = 100
newDivHeight = 100
newDivWidth = ponderateur * 100
newDivHeight = ponderateur * 100
newDiv.style.width = newDivWidth + "px"
newDiv.style.height = newDivHeight + "px"
......@@ -210,16 +221,16 @@ function recupPhon(identifiant){
// PHON
} else if (famille == "kinephones") {
// rect = w:84 h:26 ry:2.7
newDivWidth = 84
newDivHeight = 26
newDivWidth = ponderateur * 84
newDivHeight = ponderateur * 26
newDiv.style.width = newDivWidth + "px"
newDiv.style.height = newDivHeight + "px"
newDiv.borderRadius = "2.7px"
} else if (famille == "gattegno") {
// rect = w:117 h:52 ry:2.5
newDivWidth = 70
newDivHeight = 31
newDivWidth = ponderateur * 70
newDivHeight = ponderateur * 31
newDiv.style.width = newDivWidth + "px"
newDiv.style.height = newDivHeight + "px"
newDiv.borderRadius = "2.5px"
......@@ -233,8 +244,8 @@ function recupPhon(identifiant){
newDiv.style.height = newDivHeight + "px"
newDiv.style.borderRadius = "50%"
} else {
newDivWidth = 70
newDivHeight = 31
newDivWidth = ponderateur * 70
newDivHeight = ponderateur * 31
newDiv.style.width = newDivWidth + "px"
newDiv.style.height = newDivHeight + "px"
newDiv.style.borderRadius = "2.5px"
......@@ -245,20 +256,28 @@ function recupPhon(identifiant){
}
} else if (famille == "do_bouches" || famille == "do_formes") {
var newDivCalq = document.createElement('div')
newDivCalq.style = "position: absolute; width:100%; height:100%;"
newDivCalq.style.backgroundImage = "url('cartes/"+famille+"/"+bouche+".png')"
newDivCalq.style.backgroundRepeat = "no-repeat"
newDivCalq.style.backgroundPosition = "center"
newDivCalq.style.backgroundSize = "cover"
newDivCalq.style.border = "0px transparent solid"
newDivCalq.style.borderRadius = "5px"
newDiv.appendChild(newDivCalq)
newDivWidth = 80
newDivHeight = 55
newDiv.style.width = newDivWidth + "px"
newDiv.style.height = newDivHeight + "px"
if ( ["rect_schwi", "rect_schwa", "rect_schwu", "rect_schwdot"].includes(identifiant) ) {
newDivWidth = 20
newDivHeight = 20
newDiv.style.width = newDivWidth + "px"
newDiv.style.height = newDivHeight + "px"
newDiv.style.borderRadius = "50%"
} else {
var newDivCalq = document.createElement('div')
newDivCalq.style = "position: absolute; width:100%; height:100%;"
newDivCalq.style.backgroundImage = "url('cartes/"+famille+"/"+bouche+".png')"
newDivCalq.style.backgroundRepeat = "no-repeat"
newDivCalq.style.backgroundPosition = "center"
newDivCalq.style.backgroundSize = "cover"
newDivCalq.style.border = "0px transparent solid"
newDivCalq.style.borderRadius = "5px"
newDiv.appendChild(newDivCalq)
newDivWidth = ponderateur * 80
newDivHeight = ponderateur * 55
newDiv.style.width = newDivWidth + "px"
newDiv.style.height = newDivHeight + "px"
}
}
......@@ -266,7 +285,7 @@ function recupPhon(identifiant){
if (lastSelect != "" && lastSelect.offsetTop != 0) {
newDiv.style.left = lastSelect.offsetLeft + lastSelect.offsetWidth + "px"
newDiv.style.top = lastSelect.offsetTop + lastSelect.offsetHeight - newDivHeight + "px"
newDiv.style.top = lastSelect.offsetTop + lastSelect.offsetHeight/2 - newDivHeight/2 + "px"
} else {
newDiv.style.left = "200px"
newDiv.style.top = "100px"
......@@ -402,8 +421,7 @@ function setCouleurEcritoire(div, couleur){
function getHighestZIndex()
{
function getHighestZIndex(){
var elems = document.getElementsByClassName('carte-v2');
var highest = Number.MIN_SAFE_INTEGER || -(Math.pow(2, 53) - 1);
for (var i = 0; i < elems.length; i++)
......@@ -418,4 +436,37 @@ function getHighestZIndex()
}
}
return highest;
}
\ No newline at end of file
}
// GESTION DES STRESS
let stress1 = 0
let stress2 = 0
function setStress(nb){
if (nb == 0) {
stress1 = 0
document.getElementById('stress1').classList.remove('stressOn')
stress2 = 0
document.getElementById('stress2').classList.remove('stressOn')
} else if (nb == 1) {
if (stress1 == 1) {
stress1 = 0
document.getElementById('stress1').classList.remove('stressOn')
} else {
stress1 = 1
document.getElementById('stress1').classList.add('stressOn')
}
stress2 = 0
document.getElementById('stress2').classList.remove('stressOn')
} else if (nb == 2) {
stress1 = 0
document.getElementById('stress1').classList.remove('stressOn')
if (stress2 == 1) {
stress2 = 0
document.getElementById('stress2').classList.remove('stressOn')
} else {
stress2 = 1
document.getElementById('stress2').classList.add('stressOn')
}
}
}
public/scripts/script.js
View file @ 2fd4a959
......@@ -531,7 +531,11 @@ function outFunc() {
}
// Indiquer le lien de Page Vierge
document.getElementById('hrefNewPage').href = thisURL.replace(pageId, '');
if(pageId != "0"){
document.getElementById('hrefNewPage').href = thisURL.replace(pageId, '');
} else {
document.getElementById('hrefNewPage').href = thisURL;
}
function openInNewTab() {
var URL = document.getElementById("pLien").value;
......
public/scripts/selectPanneau.js
View file @ 2fd4a959
var famille = "do_bouches" // indique la représentation phono pour les cartes à créer
var lang = "fr" // pour choisir la langue de synthèse vocale
selectPanneau("phonoFrDo")
document.getElementById('selectPanneau').value = "phonoFrDo"
function selectPanneau(p){
console.log("selectPanneau",p);
......
public/scripts/syntheseVocale.js
View file @ 2fd4a959
......@@ -14,15 +14,20 @@ async function playIpa() {
var ipa = "";
for (e=0; e<group.length; e++){
// on parse les classe c de l'élement e
let newcontent = '';
for (c=0; c<group[e].classList.length; c++){
// si la classe match "phon_.*"" alors on récupère l'équivalent api
if (group[e].classList[c].match(/phon_.*/)){
ipa += phon2api[group[e].classList[c]];
} else if (group[e].classList[c].match(/pause/)) {
newcontent += phon2api[group[e].classList[c]];
}
if (group[e].classList[c].match(/pause/)) {
// si la classe match "pause" on insert une espace (qui sera convertie en <break> dans text2speech.py)
ipa += ' ';
newcontent += ' ';
}
if (group[e].classList[c].match(/stress1/)) newcontent = 'ˈ' + newcontent
if (group[e].classList[c].match(/stress2/)) newcontent = 'ˌ' + newcontent
}
ipa += newcontent
}
ipa = ipa.trim(); // suppression des espaces en début ou en fin
ipa = ipa.replace(/undefined/g, '')
......@@ -30,7 +35,7 @@ async function playIpa() {
if (ipa != currentIpa) { synth = true }
if (synth) {
console.log("lecture de ", ipa);
console.log("lecture de [", ipa,"]");
currentIpa = ipa;
// ON EMBALLE TOUT ÇA
var colis = {
......
public/styles/styles.css
View file @ 2fd4a959
......@@ -439,14 +439,18 @@ footer {
.btn-espace {
padding: 8px 50px;
margin: 0px 5px;
background-color: indianred;
border:1px solid rgb(156, 66, 66);
color: white;
color: black;
border-radius: 5px;
}
.btn-espace:hover, .btn-espace:focus {
background-color: rgb(156, 66, 66);
}
.stressOn {
border: 3px solid red;
}
.ul_aide li {
margin: 15px 10px;
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment