2023-03-03 10:56:59 +01:00
// nuemro init de l'analyse
num _analyse = 0
2023-03-10 17:37:58 +01:00
idx _tache = 0 // ATTENTION ça commence à 1
2023-03-18 20:26:13 +01:00
h _bouton _analyse = 0.1 * window . innerHeight
2023-03-03 10:56:59 +01:00
// Variable
function init _variable _analyse ( ) {
2023-03-18 20:26:13 +01:00
// liste des checkbox clické pour chaque recap
2023-03-22 15:56:46 +01:00
//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
2023-03-22 16:54:11 +01:00
keywords _init = [ "Side view" , "Front view" , "Global view" , "Eyes contact" , "Pleasant" , "Recognizable" ]
keywords = shuffle ( keywords _init ) . concat ( [ "Other:" ] )
2023-03-10 17:37:58 +01:00
2023-03-18 20:26:13 +01:00
y _recap = 0.2 * window . innerHeight
taille _texte _explication = 0.01 * window . innerWidth
x _recap _init = ( window . innerWidth - nb _choix _demande * ( H _3D / 2 ) ) / ( nb _choix _demande + 1 )
// checkbox
w _checkbox = 20
h _checkbox = 20
y _checkbox _init = y _recap + H _3D / 2 + h _checkbox
2023-03-03 10:56:59 +01:00
}
function affichage _legende ( pos ) {
2023-03-18 20:26:13 +01:00
x _image = ( pos + 1 ) * x _recap _init + pos * ( H _3D / 2 )
2023-03-03 10:56:59 +01:00
ctx . strokeStyle = "rgb(255, 255, 255)" ; ctx . fillStyle = "rgb(255, 255, 255)"
2023-03-18 20:26:13 +01:00
if ( pos == 0 ) { print _text ( handle _text ( "Best viewpoint:" , x _image , y _recap - 10 , taille _texte _explication + "pt Courier" , longueur _max _recap ) ) }
if ( pos == 1 ) { print _text ( handle _text ( "2nd viewpoint:" , x _image , y _recap - 10 , taille _texte _explication + "pt Courier" , longueur _max _recap ) ) }
if ( pos == 2 ) { print _text ( handle _text ( "3rd viewpoint:" , x _image , y _recap - 10 , taille _texte _explication + "pt Courier" , longueur _max _recap ) ) }
2023-03-03 10:56:59 +01:00
}
function affichage _texte ( ) {
// Texte
2023-03-22 15:56:46 +01:00
//draw_rectangle(0,0,canvas.width, canvas.height, "rgb(3, 26, 33)", 1) // ou + clair 4, 38, 48
2023-03-29 18:10:51 +02:00
affichage _titre ( "Analysis your selections: Why did you choose these viewpoints?" , ( 0.015 * window . innerWidth ) + "pt Courier" , "#EF476F" , yt = 0.1 * window . innerHeight )
2023-03-03 10:56:59 +01:00
}
// idx_tache est la num de la tache à aller chercher dans all_ctxMins
function affichage _analyse ( idx _tache ) {
2023-03-22 15:56:46 +01:00
//canvasMins = all_canvasMins['tache_N'+list_idx_tache[idx_tache]][1]
2023-03-18 20:26:13 +01:00
for ( let i = 0 ; i < nb _choix _demande ; i ++ ) {
2023-03-03 10:56:59 +01:00
affichage _legende ( i )
2023-03-18 20:26:13 +01:00
x _recap = ( i + 1 ) * x _recap _init + i * ( H _3D / 2 )
2023-03-22 16:54:11 +01:00
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)")
2023-03-03 10:56:59 +01:00
}
}
function progress _bar _analyse ( N _analyse , N _analyse _total ) {
if ( N _analyse <= N _analyse _total ) {
// background
draw _rectangle ( x _progress _bar , y _progress _bar , w _progress _bar , h _progress _bar , "rgb(255,255,255)" , 1 )
// bar
w _bar = ( ( N _analyse ) / N _analyse _total ) * w _progress _bar
draw _rectangle ( x _progress _bar , y _progress _bar , w _bar , h _progress _bar , "rgb(17, 138, 178)" , 1 )
// numero de tache
2023-03-10 08:57:25 +01:00
ctx . strokeStyle = "rgb(255, 255, 255)" // Pour que le contour soit rouge
ctx . fillStyle = "rgb(255, 255, 255)" // Pour que l'intérieur soit bleu
ctx . font = "18pt Courier" ;
ctx . fillText ( ( N _analyse ) + "/" + ( N _analyse _total ) , x _progress _bar + w _progress _bar + 10 , h _progress _bar )
2023-03-03 10:56:59 +01:00
}
}
///////////////////////////////////////////////////////////////
///////////////////// Bouton
2023-03-18 20:26:13 +01:00
function affichage _bouton _valider _analyse ( m ) {
ratio _bouton _analyse = h _bouton _analyse / boutons [ "valider" ] . height
w _bouton _analyse = ratio _bouton _analyse * boutons [ "valider" ] . width
h _bouton _analyse = h _bouton _analyse
x _bouton _analyse = ( window . innerWidth / 2 ) - w _bouton _analyse / 2
y _bouton _analyse = window . innerHeight - h _bouton _analyse - 20
2023-03-03 10:56:59 +01:00
// si au moins un mot est coché
2023-03-18 20:26:13 +01:00
if ( condition _valider ( ) ) {
2023-03-03 10:56:59 +01:00
// affichage bouton valider
2023-03-18 20:26:13 +01:00
if ( m == "en_cours" )
{ ctx . drawImage ( boutons [ "valider" ] , x _bouton _analyse , y _bouton _analyse , w _bouton _analyse , h _bouton _analyse ) }
else { ctx . drawImage ( boutons [ "envoie_data" ] , x _bouton _analyse , y _bouton _analyse , w _bouton _analyse , h _bouton _analyse ) }
2023-03-03 10:56:59 +01:00
// survol
2023-03-18 20:26:13 +01:00
if ( is _inside ( xyMouseMove , x _bouton _analyse , y _bouton _analyse , w _bouton _analyse , h _bouton _analyse ) ) {
draw _rectangle ( x _bouton _analyse , y _bouton _analyse , w _bouton _analyse , h _bouton _analyse , "rgb(200, 200, 200)" , 0.6 )
2023-03-03 10:56:59 +01:00
}
}
}
2023-03-18 20:26:13 +01:00
function condition _valider ( ) {
2023-03-22 15:56:46 +01:00
//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 ) {
2023-03-18 20:26:13 +01:00
return false
2023-03-22 15:56:46 +01:00
}
2023-03-18 20:26:13 +01:00
}
return true
}
2023-03-03 10:56:59 +01:00
function action _bouton _valider _analyse ( ) {
2023-03-29 18:10:51 +02:00
interactions . push ( { "time" : new Date ( ) . getTime ( ) , "type" : get _message ( "bouton_valider_analyse" , [ ] ) } )
2023-03-03 10:56:59 +01:00
// si au moins un mot est coché et qu'il reste des analyse à faire
2023-03-18 20:26:13 +01:00
if ( condition _valider ( ) ) {
2023-03-03 10:56:59 +01:00
// sauvegarde des checkbox clikée et les mesh
2023-03-22 15:56:46 +01:00
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 }
2023-03-18 20:26:13 +01:00
}
2023-03-22 15:56:46 +01:00
//RAZ pour la prochaine analyse
checkbox _clicked _courant = { idx _checkbox : [ ] , mots : [ ] }
2023-03-22 16:54:11 +01:00
keywords = shuffle ( keywords _init ) . concat ( [ "Other:" ] )
2023-03-22 15:56:46 +01:00
toto = document . getElementById ( 'texte_area' )
if ( toto != null ) { toto . parentElement . removeChild ( toto ) }
2023-03-03 10:56:59 +01:00
// analyse suivant
num _analyse = num _analyse + 1
// indice mesh da l'analyse suivante
idx _tache = idx _tache + 1
if ( num _analyse < nb _analyse _demande ) {
2023-03-29 18:10:51 +02:00
interactions . push ( { "time" : new Date ( ) . getTime ( ) , "type" : get _message ( "debut_analyse_i" , [ num _analyse ] ) } ) }
2023-03-03 10:56:59 +01:00
}
}
///////////////////////////////////////////////////////////////
///////////////////// Checkbox
2023-03-22 15:56:46 +01:00
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 }
}
2023-03-03 10:56:59 +01:00
2023-03-18 20:26:13 +01:00
function traitement _empty _checkbox ( ) {
2023-03-22 15:56:46 +01:00
//for(let p=0; p<nb_choix_demande; p++){
2023-03-18 20:26:13 +01:00
for ( let i = 0 ; i < keywords . length ; i ++ ) {
// checkbox vide
2023-03-22 15:56:46 +01:00
//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 }
2023-03-18 20:26:13 +01:00
ctx . drawImage ( imgs [ "checkbox" ] , x _checkbox , y _checkbox , w _checkbox , h _checkbox )
// Texte
2023-03-22 15:56:46 +01:00
print _text ( handle _text ( keywords [ i ] , x _checkbox + w _checkbox + 10 , y _checkbox + 18 , taille _texte _explication + "pt Courier" , longueur _max _error ) )
2023-03-18 20:26:13 +01:00
// 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 ) ) {
2023-03-22 15:56:46 +01:00
check _ou _decheck ( i )
2023-03-18 20:26:13 +01:00
}
2023-03-03 10:56:59 +01:00
}
2023-03-22 15:56:46 +01:00
2023-03-03 10:56:59 +01:00
}
2023-03-22 15:56:46 +01:00
//}
2023-03-03 10:56:59 +01:00
2023-03-22 15:56:46 +01:00
function check _ou _decheck ( i _mot ) {
//s'il n'y a pas deja un check dessus
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 ] )
2023-03-29 18:10:51 +02:00
interactions . push ( { "time" : new Date ( ) . getTime ( ) , "type" : get _message ( "ajout_check" , [ num _analyse , keywords [ i _mot ] ] ) } )
2023-03-22 15:56:46 +01:00
console . log ( "ajout " + keywords [ i _mot ] )
// checkbox Other
if ( i _mot == keywords . length - 1 ) {
zone _texte ( )
}
2023-03-03 10:56:59 +01:00
}
else {
2023-03-22 15:56:46 +01:00
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 ] )
2023-03-29 18:10:51 +02:00
interactions . push ( { "time" : new Date ( ) . getTime ( ) , "type" : get _message ( "retrait_check" , [ num _analyse , keywords [ i _mot ] ] ) } )
2023-03-22 15:56:46 +01:00
if ( i _mot == keywords . length - 1 ) {
toto = document . getElementById ( 'texte_area' )
if ( toto != null ) { toto . parentElement . removeChild ( toto ) }
}
2023-03-03 10:56:59 +01:00
}
}
2023-03-22 15:56:46 +01:00
function draw _check ( ) {
idx _check = checkbox _clicked _courant . idx _checkbox
2023-03-03 10:56:59 +01:00
// pour chacune de ces checkbox cliquée on affiche un check
for ( let i = 0 ; i < idx _check . length ; i ++ ) {
pos = idx _check [ i ]
2023-03-22 15:56:46 +01:00
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
}
2023-03-03 10:56:59 +01:00
ctx . drawImage ( imgs [ "check" ] , x _checkbox - 5 , y _checkbox - 5 , w _checkbox + 10 , h _checkbox + 10 )
}
}
2023-03-22 15:56:46 +01:00
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
}
}
2023-03-03 10:56:59 +01:00
///////////////////////////////////////////////////////////////
///////////////////// MAIN
2023-03-22 15:56:46 +01:00
function traitement _analyse ( ) {
2023-03-18 19:05:16 +01:00
if ( ( num _analyse < nb _analyse _demande ) ) {
2023-03-03 10:56:59 +01:00
// affiche les textes de la page sauf les ceheckbox
affichage _texte ( )
// afficher les checkbox et gerer les click ou declick
2023-03-18 20:26:13 +01:00
traitement _empty _checkbox ( )
2023-03-03 10:56:59 +01:00
// affiche les check vert en fonction de ce qu'il y a dans checkbox_clicked_courant
2023-03-18 20:26:13 +01:00
for ( let p = 0 ; p < nb _choix _demande ; p ++ ) { draw _check ( p ) }
2023-03-03 10:56:59 +01:00
// affiche les nb_demande_choix images recap
affichage _analyse ( idx _tache )
// affiche progress bar
2023-03-22 15:56:46 +01:00
//progress_bar_analyse(num_analyse, nb_analyse_demande)
2023-03-18 20:26:13 +01:00
if ( num _analyse < nb _analyse _demande - 1 ) {
// bouton valider
affichage _bouton _valider _analyse ( "en_cours" ) }
else {
affichage _bouton _valider _analyse ( "fin" )
}
2023-03-03 10:56:59 +01:00
// action si bouton valider
2023-03-18 20:26:13 +01:00
if ( clicked && is _inside ( xyMouseMove , x _bouton _analyse , y _bouton _analyse , w _bouton _analyse , h _bouton _analyse ) ) {
2023-03-03 10:56:59 +01:00
action _bouton _valider _analyse ( )
}
}
else {
page _analyse = false
2023-03-29 18:10:51 +02:00
interactions . push ( { "time" : new Date ( ) . getTime ( ) , "type" : get _message ( "fin_etude" , [ ] ) } )
2023-03-03 10:56:59 +01:00
}
}
// function draw_empty_checkbox(y_img_recap, num_recap){
// // croix
// x_checkbox = W_3D+dx*2+longueur_max_recap+w_fleche_b+canvasMins[0].width+w_croix*2
// w_checkbox = 20
// h_checkbox = 20
// dx_checkbox = 0
// for (let i = 0 ; i < keywords.length; i++){
// if (i%2 == 0){dx_checkbox = i/2 * 180}
// // checkbox vide
// y_checkbox = 20 + y_img_recap + 80*(i%2)
// ctx.drawImage(imgs["checkbox"], x_checkbox + dx_checkbox , y_checkbox, w_checkbox, h_checkbox)
// print_text(handle_text(keywords[i], x_checkbox + dx_checkbox + 30, y_checkbox + 20, "14pt Courier", longueur_max_error))
// // survol
// if (xyMouseMove.x >= x_checkbox + dx_checkbox && xyMouseMove.x <= x_checkbox + dx_checkbox + w_checkbox && xyMouseMove.y > y_checkbox && xyMouseMove.y < y_checkbox+h_checkbox ){
// draw_rectangle(x_checkbox + dx_checkbox, y_checkbox, w_checkbox, h_checkbox, "rgb(0, 255, 0)", alpha_survol)
// }
// // clicked
// if (clicked && xyMouseMove.x >= x_checkbox + dx_checkbox && xyMouseMove.x <= x_checkbox + dx_checkbox + w_checkbox && xyMouseMove.y > y_checkbox && xyMouseMove.y < y_checkbox+h_checkbox ){
// // s'il n'y a pas deja un check dessus
// if (checkbox_clicked_courant[num_recap].idx_checkbox.indexOf(i) == -1){
// checkbox_clicked_courant[num_recap].idx_checkbox.push(i)
// checkbox_clicked_courant[num_recap].mots.push(keywords[i])
// interactions.push({"time": new Date().getTime(), "type": "ajout check sur : recap n°"+(num_recap+1)+", mot "+keywords[i]})}
// else{
// position_i = checkbox_clicked_courant[num_recap].idx_checkbox.indexOf(i)
// checkbox_clicked_courant[num_recap].idx_checkbox.splice(position_i,1)
// checkbox_clicked_courant[num_recap].mots.splice(position_i,1)
// interactions.push({"time": new Date().getTime(), "type": "retrait check sur : recap n°"+(num_recap+1)+", mot "+keywords[i]})}
// }
// }
// }
// // affichage des check pour le recap n°num_recap qui a un y = y_img_recap
// function afficher_check(liste_check, num_recap, y_img_recap){
// dx_checkbox = 0
// idx_check = liste_check[num_recap].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]
// if (pos%2 == 0){dx_checkbox = pos/2 * 180}
// else{dx_checkbox = (pos-1)/2 * 180}
// y_checkbox = 20 + y_img_recap + 80*(pos%2)
// ctx.drawImage(imgs["check"], x_checkbox + dx_checkbox , y_checkbox, w_checkbox, h_checkbox)
// }
// }