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
checkbox _clicked _courant = { }
for ( let p = 0 ; p < nb _choix _demande ; p ++ ) {
checkbox _clicked _courant [ "Viewpoint_" + ( p + 1 ) ] = { idx _checkbox : [ ] , mots : [ ] }
}
2023-03-03 10:56:59 +01:00
2023-03-18 20:26:13 +01:00
// Analayse des choix avec les checkboxs
2023-03-03 10:56:59 +01:00
keywords = [ "1. De face" , "2. De profil" , "3. Debout" , "4. Eyes contact" , "5. toto" ]
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
draw _rectangle ( 0 , 0 , canvas . width , canvas . height , "rgb(3, 26, 33)" , 1 ) // ou + clair 4, 38, 48
2023-03-18 20:26:13 +01:00
affichage _titre ( "Analysis your choices" , ( 0.018 * 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-10 17:37:58 +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 )
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)")
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 ( ) {
for ( let k = 0 ; k < nb _choix _demande ; k ++ ) {
if ( checkbox _clicked _courant [ 'Viewpoint_' + ( k + 1 ) ] . idx _checkbox . length == 0 ) {
return false
}
}
return true
}
2023-03-03 10:56:59 +01:00
function action _bouton _valider _analyse ( ) {
interactions . push ( { "time" : new Date ( ) . getTime ( ) , "type" : "Bouton valider analyse." } )
// 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-18 20:26:13 +01:00
checkbox _clicked [ 'Analyse_N' + ( num _analyse + 1 ) ] = { "mesh" : choix [ "tache_N" + list _idx _tache [ idx _tache ] ] . mesh , "Checkbox" : checkbox _clicked _courant }
2023-03-03 10:56:59 +01:00
//RAZ pour la prochaine analyse
2023-03-18 20:26:13 +01:00
checkbox _clicked _courant = { }
for ( let p = 0 ; p < nb _choix _demande ; p ++ ) {
checkbox _clicked _courant [ "Viewpoint_" + ( p + 1 ) ] = { idx _checkbox : [ ] , mots : [ ] }
}
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 ) {
interactions . push ( { "time" : new Date ( ) . getTime ( ) , "type" : "Début analyse n°" + ( num _analyse + 1 ) } ) }
}
}
///////////////////////////////////////////////////////////////
///////////////////// Checkbox
2023-03-18 20:26:13 +01:00
function traitement _empty _checkbox ( ) {
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
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 ) )
// 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 )
}
2023-03-03 10:56:59 +01:00
}
}
}
2023-03-18 20:26:13 +01:00
function check _ou _decheck ( i _mot , p _vue ) {
2023-03-03 10:56:59 +01:00
//s'il n'y a pas deja un check dessus
2023-03-18 20:26:13 +01:00
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" )
2023-03-03 10:56:59 +01:00
}
else {
2023-03-18 20:26:13 +01:00
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" } )
2023-03-03 10:56:59 +01:00
}
}
2023-03-18 20:26:13 +01:00
function draw _check ( p _vue ) {
idx _check = checkbox _clicked _courant [ "Viewpoint_" + ( p _vue + 1 ) ] . 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-18 20:26:13 +01:00
x _checkbox = ( p _vue + 1 ) * x _recap _init + p _vue * ( H _3D / 2 )
y _checkbox = y _checkbox _init + ( h _checkbox * 1.5 ) * pos
2023-03-03 10:56:59 +01:00
ctx . drawImage ( imgs [ "check" ] , x _checkbox - 5 , y _checkbox - 5 , w _checkbox + 10 , h _checkbox + 10 )
}
}
///////////////////////////////////////////////////////////////
///////////////////// MAIN
function traitement _fin ( ) {
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
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
interactions . push ( { "time" : new Date ( ) . getTime ( ) , "type" : "Fin analyse" } )
}
}
// 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)
// }
// }