texte area presque ok

This commit is contained in:
mpelissi 2023-03-22 15:56:46 +01:00
parent e47a0c1dee
commit 5e67b28aea
3 changed files with 127 additions and 57 deletions

View File

@ -84,13 +84,13 @@ function init_variable(premier_appel){
// Enchainement des pages // Enchainement des pages
if (premier_appel){ if (premier_appel){
page_avertissement = true page_avertissement = false
page_contexte = false page_contexte = false
page_inscription = false page_inscription = false
page_explication = false page_explication = false
page_warning = false page_warning = false
page_explication_bis = false page_explication_bis = false
page_vues = false // false page_vues = true // false
page_explication_analyse = false page_explication_analyse = false
page_analyse = false page_analyse = false
// cas raz : on recommence juste la partie vues // cas raz : on recommence juste la partie vues
@ -102,6 +102,7 @@ function init_variable(premier_appel){
page_warning = false page_warning = false
page_explication_bis = false page_explication_bis = false
page_vues = true // false page_vues = true // false
page_explication_analyse = false
page_analyse = false page_analyse = false
} }
@ -427,7 +428,6 @@ function animate() {
else{ else{
// on enlève les touches du clavier associé à la page inscription // on enlève les touches du clavier associé à la page inscription
document.removeEventListener("keydown", action_clavier_explication)} document.removeEventListener("keydown", action_clavier_explication)}
//init touche clavier //init touche clavier
if(premier_tour_page_vues){ if(premier_tour_page_vues){
// init clavier pour les vues // init clavier pour les vues
@ -501,10 +501,15 @@ function animate() {
interactions.push({"time": new Date().getTime(), "type": "debut analyse n°1"}) interactions.push({"time": new Date().getTime(), "type": "debut analyse n°1"})
init_clavier_analyse() init_clavier_analyse()
init_variable_analyse() init_variable_analyse()
old_renderer = document.getElementById('renderer')
if (old_renderer!= null){
old_renderer.parentElement.removeChild(old_renderer)
}
premier_tour_page_analyse = false} premier_tour_page_analyse = false}
ctx.clearRect(0, 0, canvas.width, canvas.height) ctx.clearRect(0, 0, canvas.width, canvas.height)
traitement_fin()
traitement_analyse()
} }
//////////////////////////////////////////////////////////////////////////////// ////////////////////////////////////////////////////////////////////////////////

View File

@ -8,13 +8,13 @@ h_bouton_analyse = 0.1*window.innerHeight
// Variable // Variable
function init_variable_analyse(){ function init_variable_analyse(){
// liste des checkbox clické pour chaque recap // liste des checkbox clické pour chaque recap
checkbox_clicked_courant = {} //checkbox_clicked_courant = {}
for (let p=0; p<nb_choix_demande; p++){ // for (let p=0; p<nb_choix_demande; p++){
checkbox_clicked_courant["Viewpoint_"+(p+1)] = {idx_checkbox:[], mots:[]} // checkbox_clicked_courant["Viewpoint_"+(p+1)] = {idx_checkbox:[], mots:[]}
} // }
checkbox_clicked_courant = {idx_checkbox:[], mots:[]}
// Analayse des choix avec les checkboxs // Analayse des choix avec les checkboxs
keywords = ["1. De face", "2. De profil", "3. Debout", "4. Eyes contact", "5. toto"] keywords = shuffle(["Side view", "Front view", "Global view", "Eyes contact", "Pleasant", "Recognizable"]).concat(["Other:"])
y_recap = 0.2*window.innerHeight y_recap = 0.2*window.innerHeight
taille_texte_explication = 0.01*window.innerWidth taille_texte_explication = 0.01*window.innerWidth
@ -37,18 +37,18 @@ function affichage_legende(pos){
function affichage_texte(){ function affichage_texte(){
// Texte // Texte
draw_rectangle(0,0,canvas.width, canvas.height, "rgb(3, 26, 33)", 1) // ou + clair 4, 38, 48 //draw_rectangle(0,0,canvas.width, canvas.height, "rgb(3, 26, 33)", 1) // ou + clair 4, 38, 48
affichage_titre("Analysis your choices", (0.018*window.innerWidth)+"pt Courier", "#EF476F", yt = 0.1*window.innerHeight) affichage_titre("Analysis your selections: why did you choose these viewpoints?", (0.015*window.innerWidth)+"pt Courier", "#EF476F", yt = 0.1*window.innerHeight)
} }
// idx_tache est la num de la tache à aller chercher dans all_ctxMins // idx_tache est la num de la tache à aller chercher dans all_ctxMins
function affichage_analyse(idx_tache){ function affichage_analyse(idx_tache){
canvasMins = all_canvasMins['tache_N'+list_idx_tache[idx_tache]][1] //canvasMins = all_canvasMins['tache_N'+list_idx_tache[idx_tache]][1]
for (let i=0; i<nb_choix_demande; i++){ for (let i=0; i<nb_choix_demande; i++){
affichage_legende(i) affichage_legende(i)
x_recap = (i+1)*x_recap_init + i*(H_3D/2) x_recap = (i+1)*x_recap_init + i*(H_3D/2)
ctx.drawImage(canvasMins[i], x_recap, y_recap, H_3D/2, H_3D/2) //ctx.drawImage(canvasMins[i], x_recap, y_recap, H_3D/2, H_3D/2)
//draw_contour(dx + (ecart_analyse+ W_3D/2.5)*i, 250, H_3D/2.5, H_3D/2.5, "rgb(255,0,0)") draw_contour( x_recap, y_recap, H_3D/2, H_3D/2, "rgb(255,0,0)")
} }
} }
@ -67,7 +67,6 @@ function progress_bar_analyse(N_analyse, N_analyse_total){
} }
} }
/////////////////////////////////////////////////////////////// ///////////////////////////////////////////////////////////////
///////////////////// Bouton ///////////////////// Bouton
@ -92,8 +91,13 @@ function affichage_bouton_valider_analyse(m){
} }
function condition_valider(){ function condition_valider(){
for(let k=0; k<nb_choix_demande;k++){ //S'il n'y a pas de checkbox cochée
if (checkbox_clicked_courant['Viewpoint_'+(k+1)].idx_checkbox.length == 0){ if (checkbox_clicked_courant.idx_checkbox.length == 0){
return false
}
//il y a Other: other --> texte non vide
if (checkbox_clicked_courant.idx_checkbox.indexOf(keywords.length-1)!=-1){
if(document.getElementById('texte_area').value.length == 0){
return false return false
} }
} }
@ -105,12 +109,17 @@ function action_bouton_valider_analyse(){
// si au moins un mot est coché et qu'il reste des analyse à faire // si au moins un mot est coché et qu'il reste des analyse à faire
if (condition_valider()){ if (condition_valider()){
// sauvegarde des checkbox clikée et les mesh // sauvegarde des checkbox clikée et les mesh
if (checkbox_clicked_courant.idx_checkbox.indexOf(keywords.length-1)!=-1){
texte_toto = lecture_zone_texte()
checkbox_clicked['Analyse_N'+(num_analyse+1)] = {"mesh" : choix["tache_N"+list_idx_tache[idx_tache]].mesh ,"Checkbox" : checkbox_clicked_courant, "Texte_other":texte_toto}
} else {
checkbox_clicked['Analyse_N'+(num_analyse+1)] = {"mesh" : choix["tache_N"+list_idx_tache[idx_tache]].mesh ,"Checkbox" : checkbox_clicked_courant} checkbox_clicked['Analyse_N'+(num_analyse+1)] = {"mesh" : choix["tache_N"+list_idx_tache[idx_tache]].mesh ,"Checkbox" : checkbox_clicked_courant}
//RAZ pour la prochaine analyse
checkbox_clicked_courant = {}
for (let p=0; p<nb_choix_demande; p++){
checkbox_clicked_courant["Viewpoint_"+(p+1)] = {idx_checkbox:[], mots:[]}
} }
//RAZ pour la prochaine analyse
checkbox_clicked_courant = {idx_checkbox:[], mots:[]}
keywords = shuffle(keywords).concat(["Other:"])
toto = document.getElementById('texte_area')
if (toto!= null){toto.parentElement.removeChild(toto)}
// analyse suivant // analyse suivant
num_analyse = num_analyse + 1 num_analyse = num_analyse + 1
// indice mesh da l'analyse suivante // indice mesh da l'analyse suivante
@ -123,60 +132,116 @@ function action_bouton_valider_analyse(){
/////////////////////////////////////////////////////////////// ///////////////////////////////////////////////////////////////
///////////////////// Checkbox ///////////////////// Checkbox
function measure_largeur(pos){
if (pos>=0){
l = 0
for (let p = 0; p<=pos; p++){
l = l + ctx.measureText(keywords[p]).width + 0.05*window.innerWidth
}
return l
}
else{return 0}
}
function traitement_empty_checkbox(){ function traitement_empty_checkbox(){
for(let p=0; p<nb_choix_demande; p++){ //for(let p=0; p<nb_choix_demande; p++){
for (let i = 0 ; i < keywords.length; i++){ for (let i = 0 ; i < keywords.length; i++){
// checkbox vide // checkbox vide
x_checkbox = (p+1)*x_recap_init + p*(H_3D/2) //i*((window.innerWidth * 8/10)/6)
y_checkbox = y_checkbox_init + (h_checkbox* 1.5)*i if(i<keywords.length-1){x_checkbox = window.innerWidth*1/10 + measure_largeur(i-1); y_checkbox = y_checkbox_init}
else {x_checkbox = window.innerWidth*1/10; y_checkbox = y_checkbox_init + 2*h_checkbox}
ctx.drawImage(imgs["checkbox"], x_checkbox , y_checkbox, w_checkbox, h_checkbox) ctx.drawImage(imgs["checkbox"], x_checkbox , y_checkbox, w_checkbox, h_checkbox)
// Texte // Texte
print_text(handle_text(keywords[i], x_checkbox + w_checkbox + 30, y_checkbox + 20, taille_texte_explication+"pt Courier", longueur_max_error)) print_text(handle_text(keywords[i], x_checkbox + w_checkbox + 10, y_checkbox + 18, taille_texte_explication+"pt Courier", longueur_max_error))
// survol // survol
if (is_inside(xyMouseMove, x_checkbox, y_checkbox, w_checkbox, h_checkbox)){ if (is_inside(xyMouseMove, x_checkbox, y_checkbox, w_checkbox, h_checkbox)){
draw_rectangle(x_checkbox, y_checkbox, w_checkbox, h_checkbox, "rgb(0, 255, 0)", alpha_survol) draw_rectangle(x_checkbox, y_checkbox, w_checkbox, h_checkbox, "rgb(0, 255, 0)", alpha_survol)
} }
// clicked // clicked
if (clicked && is_inside(xyMouseMove, x_checkbox, y_checkbox, w_checkbox, h_checkbox)){ if (clicked && is_inside(xyMouseMove, x_checkbox, y_checkbox, w_checkbox, h_checkbox)){
check_ou_decheck(i,p) check_ou_decheck(i)
}
}
} }
} }
function check_ou_decheck(i_mot, p_vue){
}
//}
function check_ou_decheck(i_mot){
//s'il n'y a pas deja un check dessus //s'il n'y a pas deja un check dessus
if (checkbox_clicked_courant["Viewpoint_"+(p_vue+1)].idx_checkbox.indexOf(i_mot) == -1){ if (checkbox_clicked_courant.idx_checkbox.indexOf(i_mot) == -1){
checkbox_clicked_courant["Viewpoint_"+(p_vue+1)].idx_checkbox.push(i_mot) checkbox_clicked_courant.idx_checkbox.push(i_mot)
checkbox_clicked_courant["Viewpoint_"+(p_vue+1)].mots.push(keywords[i_mot]) checkbox_clicked_courant.mots.push(keywords[i_mot])
interactions.push({"time": new Date().getTime(), "type": "ajout check sur : analyse n°"+(num_analyse+1)+", mot "+keywords[i_mot]+" à "+(p_vue+1)+"e vues"}) interactions.push({"time": new Date().getTime(), "type": "ajout check sur : analyse n°"+(num_analyse+1)+", mot "+keywords[i_mot]+" à "})
console.log("ajout "+keywords[i_mot]+" à "+(p_vue+1)+"e vues") console.log("ajout "+keywords[i_mot])
// checkbox Other
if (i_mot == keywords.length-1){
zone_texte()
}
} }
else{ else{
position_i = checkbox_clicked_courant["Viewpoint_"+(p_vue+1)].idx_checkbox.indexOf(i_mot) position_i = checkbox_clicked_courant.idx_checkbox.indexOf(i_mot)
checkbox_clicked_courant["Viewpoint_"+(p_vue+1)].idx_checkbox.splice(position_i,1) checkbox_clicked_courant.idx_checkbox.splice(position_i,1)
checkbox_clicked_courant["Viewpoint_"+(p_vue+1)].mots.splice(position_i,1) checkbox_clicked_courant.mots.splice(position_i,1)
console.log("retrait "+keywords[i_mot]+" à "+(p_vue+1)+"e vues") console.log("retrait "+keywords[i_mot])
interactions.push({"time": new Date().getTime(), "type": "retrait check sur : analyse n°"+(num_analyse+1)+", mot "+keywords[i_mot]+" à "+(p_vue+1)+"e vues"}) interactions.push({"time": new Date().getTime(), "type": "retrait check sur : analyse n°"+(num_analyse+1)+", mot "+keywords[i_mot]+" à "})
if (i_mot == keywords.length-1){
toto = document.getElementById('texte_area')
if (toto!= null){toto.parentElement.removeChild(toto)}
}
} }
} }
function draw_check(p_vue){ function draw_check(){
idx_check = checkbox_clicked_courant["Viewpoint_"+(p_vue+1)].idx_checkbox idx_check = checkbox_clicked_courant.idx_checkbox
// pour chacune de ces checkbox cliquée on affiche un check // pour chacune de ces checkbox cliquée on affiche un check
for (let i = 0 ; i < idx_check.length; i++){ for (let i = 0 ; i < idx_check.length; i++){
pos = idx_check[i] pos = idx_check[i]
x_checkbox = (p_vue+1)*x_recap_init + p_vue*(H_3D/2) if (pos == keywords.length-1){x_checkbox = window.innerWidth*1/10; y_checkbox = y_checkbox_init + 2*h_checkbox}
y_checkbox = y_checkbox_init + (h_checkbox* 1.5)*pos else{
x_checkbox = window.innerWidth*1/10 + measure_largeur(pos-1)
y_checkbox = y_checkbox_init
}
ctx.drawImage(imgs["check"], x_checkbox-5 , y_checkbox-5, w_checkbox+10, h_checkbox+10) ctx.drawImage(imgs["check"], x_checkbox-5 , y_checkbox-5, w_checkbox+10, h_checkbox+10)
} }
} }
function zone_texte(){
inscription_finie = false
h_text_zone = 0.15*window.innerHeight
nb_caract_min = 1
nb_caract_max = 250
x_texte_zone = (window.innerWidth/4)
y_texte_zone = y_checkbox_init + 3*h_checkbox
ecart_texte_zone = 0.2*window.innerHeight
// Zone de texte : Name
input2 = document.createElement('textarea');
input2.type = 'text';
input2.id = 'texte_area';
input2.maxLength = nb_caract_max
input2.cols = 0.02*window.innerWidth
// style
input2.style.position = 'fixed';
input2.style.left = x_texte_zone+'px';
input2.style.top = y_texte_zone+'px';//ecart_texte_zone+y_texte_zone+'px';
input2.style.textAlign = 'left'
input2.style.height = h_text_zone
input2.style.display = true
input2.style.font = taille_texte_inscription+"pt Courier"
document.body.appendChild(input2);
//input2.focus();
}
function lecture_zone_texte(){
toto = document.getElementById('texte_area')
if(toto.value != null){
return toto.value
}
}
/////////////////////////////////////////////////////////////// ///////////////////////////////////////////////////////////////
///////////////////// MAIN ///////////////////// MAIN
function traitement_fin(){ function traitement_analyse(){
if ((num_analyse < nb_analyse_demande)){ if ((num_analyse < nb_analyse_demande)){
// affiche les textes de la page sauf les ceheckbox // affiche les textes de la page sauf les ceheckbox
affichage_texte() affichage_texte()
@ -187,7 +252,7 @@ function traitement_fin(){
// affiche les nb_demande_choix images recap // affiche les nb_demande_choix images recap
affichage_analyse(idx_tache) affichage_analyse(idx_tache)
// affiche progress bar // affiche progress bar
progress_bar_analyse(num_analyse, nb_analyse_demande) //progress_bar_analyse(num_analyse, nb_analyse_demande)
if (num_analyse < nb_analyse_demande-1){ if (num_analyse < nb_analyse_demande-1){
// bouton valider // bouton valider
affichage_bouton_valider_analyse("en_cours")} affichage_bouton_valider_analyse("en_cours")}

View File

@ -164,8 +164,8 @@ color_rouge = "rgb(239, 71, 111)"
explications_analyse={ explications_analyse={
"texte0":{"t":"You have finished selecting the best viewpoints for each object.", "y": window.innerHeight*0.15, "c": color_blanc}, "texte0":{"t":"You have finished selecting the best viewpoints for each object.", "y": window.innerHeight*0.15, "c": color_blanc},
"texte1":{"t":"Now I ask you to justify your choices.", "y":window.innerHeight*0.25, "c": color_blanc}, "texte1":{"t":"Now I ask you to justify your choices.", "y":window.innerHeight*0.25, "c": color_blanc},
"texte2":{"t":"For this, for some objects, the views you have chosen will reappear..", "y":window.innerHeight*0.38, "c": color_blanc}, "texte2":{"t":"For this, for some objects, the views you have chosen will reappear.", "y":window.innerHeight*0.38, "c": color_blanc},
"texte3":{"t":"For each of the views you will have to select the main characteristic that made you decide to select this viewpoint..", "y": window.innerHeight*0.52, "c": color_blanc}, "texte3":{"t":"For each of the viewpoints, you will have to select one or more reasons that made you decide to select these viewpoints.", "y": window.innerHeight*0.52, "c": color_blanc},
} }
explications_analyse_page_1 = [explications_analyse["texte0"], explications_analyse["texte1"], explications_analyse["texte2"], explications_analyse["texte3"]] explications_analyse_page_1 = [explications_analyse["texte0"], explications_analyse["texte1"], explications_analyse["texte2"], explications_analyse["texte3"]]