tforgione
/
bvs
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
static/MAIN.js
View File

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

151
static/fonctions_analyse.js
View File

@ -8,13 +8,13 @@ h_bouton_analyse = 0.1*window.innerHeight
// Variable
function init_variable_analyse(){
// liste des checkbox clické pour chaque recap
checkbox_clicked_courant = {}
for (let p=0; p<nb_choix_demande; p++){
checkbox_clicked_courant["Viewpoint_"+(p+1)] = {idx_checkbox:[], mots:[]}
}
//checkbox_clicked_courant = {}
// for (let p=0; p<nb_choix_demande; p++){
// checkbox_clicked_courant["Viewpoint_"+(p+1)] = {idx_checkbox:[], mots:[]}
// }
checkbox_clicked_courant = {idx_checkbox:[], mots:[]}
// 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
taille_texte_explication = 0.01*window.innerWidth
@ -37,18 +37,18 @@ function affichage_legende(pos){
function affichage_texte(){
// Texte
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)
//draw_rectangle(0,0,canvas.width, canvas.height, "rgb(3, 26, 33)", 1) // ou + clair 4, 38, 48
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
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++){
affichage_legende(i)
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)
//draw_contour(dx + (ecart_analyse+ W_3D/2.5)*i, 250, H_3D/2.5, H_3D/2.5, "rgb(255,0,0)")
//ctx.drawImage(canvasMins[i], x_recap, y_recap, H_3D/2, H_3D/2)
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
@ -92,8 +91,13 @@ function affichage_bouton_valider_analyse(m){
}
function condition_valider(){
for(let k=0; k<nb_choix_demande;k++){
if (checkbox_clicked_courant['Viewpoint_'+(k+1)].idx_checkbox.length == 0){
//S'il n'y a pas de checkbox cochée
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
}
}
@ -105,12 +109,17 @@ function action_bouton_valider_analyse(){
// si au moins un mot est coché et qu'il reste des analyse à faire
if (condition_valider()){
// 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}
//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
num_analyse = num_analyse + 1
// indice mesh da l'analyse suivante
@ -123,60 +132,116 @@ function action_bouton_valider_analyse(){
///////////////////////////////////////////////////////////////
///////////////////// 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(){
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++){
// checkbox vide
x_checkbox = (p+1)*x_recap_init + p*(H_3D/2)
y_checkbox = y_checkbox_init + (h_checkbox* 1.5)*i
//i*((window.innerWidth * 8/10)/6)
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)
// 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
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)
}
// clicked
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
if (checkbox_clicked_courant["Viewpoint_"+(p_vue+1)].idx_checkbox.indexOf(i_mot) == -1){
checkbox_clicked_courant["Viewpoint_"+(p_vue+1)].idx_checkbox.push(i_mot)
checkbox_clicked_courant["Viewpoint_"+(p_vue+1)].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"})
console.log("ajout "+keywords[i_mot]+" à "+(p_vue+1)+"e vues")
if (checkbox_clicked_courant.idx_checkbox.indexOf(i_mot) == -1){
checkbox_clicked_courant.idx_checkbox.push(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]+" à "})
console.log("ajout "+keywords[i_mot])
// checkbox Other
if (i_mot == keywords.length-1){
zone_texte()
}
}
else{
position_i = checkbox_clicked_courant["Viewpoint_"+(p_vue+1)].idx_checkbox.indexOf(i_mot)
checkbox_clicked_courant["Viewpoint_"+(p_vue+1)].idx_checkbox.splice(position_i,1)
checkbox_clicked_courant["Viewpoint_"+(p_vue+1)].mots.splice(position_i,1)
console.log("retrait "+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]+" à "+(p_vue+1)+"e vues"})
position_i = checkbox_clicked_courant.idx_checkbox.indexOf(i_mot)
checkbox_clicked_courant.idx_checkbox.splice(position_i,1)
checkbox_clicked_courant.mots.splice(position_i,1)
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]+" à "})
if (i_mot == keywords.length-1){
toto = document.getElementById('texte_area')
if (toto!= null){toto.parentElement.removeChild(toto)}
}
}
}
function draw_check(p_vue){
idx_check = checkbox_clicked_courant["Viewpoint_"+(p_vue+1)].idx_checkbox
function draw_check(){
idx_check = checkbox_clicked_courant.idx_checkbox
// pour chacune de ces checkbox cliquée on affiche un check
for (let i = 0 ; i < idx_check.length; i++){
pos = idx_check[i]
x_checkbox = (p_vue+1)*x_recap_init + p_vue*(H_3D/2)
y_checkbox = y_checkbox_init + (h_checkbox* 1.5)*pos
if (pos == keywords.length-1){x_checkbox = window.innerWidth*1/10; y_checkbox = y_checkbox_init + 2*h_checkbox}
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)
}
}
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
function traitement_fin(){
function traitement_analyse(){
if ((num_analyse < nb_analyse_demande)){
// affiche les textes de la page sauf les ceheckbox
affichage_texte()
@ -187,7 +252,7 @@ function traitement_fin(){
// affiche les nb_demande_choix images recap
affichage_analyse(idx_tache)
// 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){
// bouton valider
affichage_bouton_valider_analyse("en_cours")}

4
static/fonctions_explication_analyse.js
View File

@ -164,8 +164,8 @@ color_rouge = "rgb(239, 71, 111)"
explications_analyse={
"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},
"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},
"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 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"]]