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

page explication

This commit is contained in:
mpelissi 2023-03-06 16:02:20 +01:00
parent a46a2078b5
commit f89d8b180c
6 changed files with 118 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
html/index3D.html
View File

@ -32,6 +32,7 @@
<script src="/static/fonctions_contexte.js"></script>
<script src="/static/fonctions_choix_vues.js"></script>
<script src="/static/fonctions_inscription.js"></script>
<script src="/static/fonctions_explications.js"></script>
<script src="/static/fonctions_analyse.js"></script>
<script src="/static/fonctions_fin.js"></script>
<script src="/static/interface3D.js"></script>

8
static/fonctions_choix_vues.js
View File

@ -101,7 +101,7 @@ function afficher_recap(){
// Draw les images des contextes
y_image = 100+(20+ H_3D/3.5)*i
ctx.drawImage(canvasMins[i],W_3D+ w_recap/2.5, y_image, H_3D/3.5, H_3D/3.5)
draw_contour(W_3D+ w_recap/2.5, 100+(20+ H_3D/3.5)*i, H_3D/3.5, H_3D/3.5, "rgb(255,0,0)")
//draw_contour(W_3D+ w_recap/2.5, 100+(20+ H_3D/3.5)*i, H_3D/3.5, H_3D/3.5, "rgb(255,0,0)")
//Fleche pour Switch haut
if (nb_choix_fait > 1 && i > 0 && i < nb_choix_fait) {
y_fleche_h = (H_3D/3.5)*0.4 + y_image
@ -435,7 +435,8 @@ function action_bouton_valider(){
// Mesh suivant
indice_mesh = indice_mesh + 1
num_tache = num_tache+1
setUp_3D(indice_mesh)
idx_i_init = Math.floor(Math.random()*8); idx_j_init = Math.floor(Math.random()*5)
setUp_3D(indice_mesh, idx_i_init, idx_j_init)
}
// Error : il reste des vues à sélectionner
@ -471,7 +472,8 @@ function action_bouton_raz(){
if (clicked && is_inside(xyMouseMove, (window.innerWidth-w_bouton*2.1)+w_bouton*0.15, window.innerHeight-h_bouton +10, 50,50)){
init_variable(false);
setUp_3D(indice_mesh)
idx_i_init = Math.floor(Math.random()*8); idx_j_init = Math.floor(Math.random()*5)
setUp_3D(indice_mesh, idx_i_init, idx_j_init)
interactions.push({"time": new Date().getTime(), "type": "bouton raz check"})}
// click sur la croix ou ailleurs : on clear
//if (clicked && is_inside(xyMouseMove,W_3D*0.35+a+2*b+ecart*7 + w_bouton +400*1/2, H_3D+dy+ecart*2 + 100, 50,50)){

2
static/fonctions_contexte.js
View File

@ -4,7 +4,7 @@ function affichage_texte_contexte(){
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
texte = "Hi, I'm Marie, do you want to participate in my study?"
font = "58pt Courier"
font = "42pt Courier"
ctx.font = font
largeur = ctx.measureText(texte).width
ctx.fillText(texte, (window.innerWidth/2)- (largeur/2), 100)

19
static/fonctions_explications.js Normal file
View File

@ -0,0 +1,19 @@
function traitement_explications(){
//ctx.clearRect(0, 0, canvas.width, canvas.height)
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
texte = "Explications"
font = "42pt Courier"
ctx.font = font
largeur = ctx.measureText(texte).width
ctx.fillText(texte, (window.innerWidth/2)- (largeur/2), 100)
// clignotement
afficher_ecran(0,0,400,600,"rgb(255,255,255)", 1)
}
function afficher_ecran(originex, originey, largeur, hauteur, couleur, alpha){
draw_rectangle(originex, originey, largeur, hauteur, couleur, alpha)
}

32
static/fonctions_inscription.js
View File

@ -39,11 +39,14 @@ function afficher_bouton_commencer(){
}
}
function action_bouton_commencer(s){
function action_bouton_commencer(){
page_inscription = false
page_vues = true
interactions.push({"time": new Date().getTime(), "type": "bouton commencer d'inscription"+s})
//page_vues = true
page_explication = true
interactions.push({"time": new Date().getTime(), "type": "bouton commencer d'inscription"})
//gestion des données personnelle de l'utilisateur
gestion_donnees_personnelles()
}
@ -51,9 +54,14 @@ function traitement_inscription(){
affichage_inscription()
if (champs_remplis_correctment()){
afficher_bouton_commencer()
texte = "Are you ready for the explanations?"
font = "40pt Courier"
ctx.font = font
largeur = ctx.measureText(texte).width
ctx.fillText(texte, (window.innerWidth/2)- (largeur/2), y_bouton_commencer-20)
if (clicked && click_inside(xyMouseDown, x_bouton_commencer, y_bouton_commencer , w_bouton_commencer, h_bouton_commencer)){
// on passe aux choix
action_bouton_commencer("titi")
action_bouton_commencer()
}
}
}
@ -66,13 +74,21 @@ function champs_remplis_correctment(){
name_ok = false
age_ok = false
sexe_ok = false
if (document.getElementById("Firstname").value.length >0){firstname_ok = true}
if (document.getElementById("Name").value.length >0){name_ok = true}
if (document.getElementById("Age").value.length >0){age_ok = true}
if ((document.getElementById("Firstname").value.length >0) && (value_non_vide(document.getElementById("Firstname").value))){firstname_ok = true}
if (document.getElementById("Name").value.length >0 && (value_non_vide(document.getElementById("Name").value))){name_ok = true}
if (document.getElementById("Age").value.length >0 && (value_non_vide(document.getElementById("Age").value))){age_ok = true}
if (document.getElementById("SexeM").checked || document.getElementById("SexeF").checked){ sexe_ok= true}
return firstname_ok && name_ok && age_ok && sexe_ok
}
function value_non_vide(V){
non_vide = false
for(let p=0;p<V.length; p++){
if (V[p] != ' '){return true}
}
return non_vide
}
function afficher_champs_inscription() {
w_text_zone = 30
h_text_zone = 42

82
static/interface3D.js
View File

@ -80,8 +80,9 @@ function init_variable(premier_appel){
R = 2.5
// Enchainement des pages
page_contexte = true
page_contexte = false
page_inscription = false // true
page_explication = true
page_vues = false // false
page_analyse = false
@ -92,6 +93,7 @@ function init_variable(premier_appel){
// pour initialiser les claviers à chaque page
premier_tour_page_contexte = true
premier_tour_page_inscription = true
premier_tour_page_explications = true
premier_tour_page_vues = true
premier_tour_page_analyse = true
@ -136,10 +138,10 @@ function setUp_light(rayon){
}
// idx_mesh : position du premier mesh a visuionner --> version aléatoire ???
function setUp_3D(idx_mesh){
function setUp_3D(idx_mesh, idx_i_init, idx_j_init){
// Randommiser la première vue quand oon loed le mesh, pour éviter d'avoir de l'influence
idx_i_init = Math.floor(Math.random()*8)
idx_j_init = Math.floor(Math.random()*5)
// idx_i_init = Math.floor(Math.random()*8)
// idx_j_init = Math.floor(Math.random()*5)
theta_init = 2*Math.PI * ( (2/8)*(idx_j_init==0) + (1/8)*(idx_j_init==1) + (-1/8)*(idx_j_init==3) + (-2/8)*(idx_j_init==4))
delta_init = 2*Math.PI * (idx_i_init/8)
@ -152,6 +154,8 @@ function setUp_3D(idx_mesh){
camera.position.x = 2;
camera.position.y = 0;
camera.position.z = 0;
camera.position.set(R*Math.cos(delta_init)*Math.cos(theta_init), R*Math.sin(theta_init), R*Math.sin(delta_init)*Math.cos(theta_init)) // repère JS
camera.lookAt(0, 0, 0)
//camera.lookAt (new THREE.Vector3(0,0,0))
scene = new THREE.Scene();
scene.add(camera)
@ -379,7 +383,7 @@ function init_data(){
function animate() {
// Temps à chaque animate
time_animate = new Date().getTime()
////////////////////////////////////////////////////////////////////////////////
if (page_contexte){
//console.log("boucle contexte")
//init touche clavier
@ -389,7 +393,7 @@ function animate() {
}
traitement_contexte()
}
////////////////////////////////////////////////////////////////////////////////
// page inscription
if (page_inscription){
//console.log("boucle inscription")
@ -402,20 +406,68 @@ function animate() {
premier_tour_page_inscription=false}
traitement_inscription()
}
////////////////////////////////////////////////////////////////////////////////
if (page_explication){
console.log("boucle choix")
// on enlève les touches du clavier associé à la page inscription
document.removeEventListener("keydown", action_clavier_inscription)
//init touche clavier
if(premier_tour_page_explications){
// init clavier pour les vues
//init_clavier_vues()
// affichage ecran 3D de manière aléatoire
setUp_3D(indice_mesh, 2, 2)
premier_tour_page_explications = false
}
// Variable pour les fonctions
init_variable_fonction(boutons, imgs)
// Nettoyage fleche
ctx.clearRect(0, 0, canvas.width, canvas.height)
// Affichage bouton RAZ
if (bouton_raz_clicked == true){action_bouton_raz()}
// Affichage message pop
if (Object.keys(texte_temporaire).length >0){
if (time_animate > texte_temporaire.t_end){texte_temporaire = {}}
else{print_text(handle_text(texte_temporaire.text, texte_temporaire.x, texte_temporaire.y, " 18pt Courier", longueur_max_error, "#118AB2"))}
}
// progress bar
progress_bar(num_tache, nb_mesh)
// Affichage fleche
afficher_fleche(imgs)
// affichage de sboutons
afficher_bouton(boutons)
if (canvasRenderer === null) {canvasRenderer = document.getElementById("renderer")}
// traitement fleche (surval + click)
traitement_explications()
// traitement bouton : (survol + click)
//traitement_bouton()
// afficher + maj du recap de pose choisie : affichage des vue des poses
afficher_recap()
// Affichage texte recap
for (p=0; p<liste_poses.length; p++){affichage_texte_recap(p)}
// affichage 3D
renderer.render( scene, camera );
// Les poses choisies sont grisées
bloquer_pose(liste_poses)
// RAZ
clicked = false
which_clicked_fleche = -1
which_clicked_bouton = -1
}
////////////////////////////////////////////////////////////////////////////////
// page de choix
if (page_vues && num_tache <= nb_mesh){
//console.log("boucle choix")
console.log("boucle choix")
// on enlève les touches du clavier associé à la page inscription
document.removeEventListener("keydown", action_clavier_inscription)
//init touche clavier
if(premier_tour_page_vues){
//gestion des données personnelle de l'utilisateur
gestion_donnees_personnelles()
// init clavier pour les vues
init_clavier_vues()
// affichage ecran 3D
setUp_3D(indice_mesh)
// affichage ecran 3D de manière aléatoire
idx_i_init = Math.floor(Math.random()*8)
idx_j_init = Math.floor(Math.random()*5)
setUp_3D(indice_mesh, idx_i_init, idx_j_init)
premier_tour_page_vues = false
}
// Variable pour les fonctions
@ -453,6 +505,7 @@ function animate() {
which_clicked_fleche = -1
which_clicked_bouton = -1
}
////////////////////////////////////////////////////////////////////////////////
// page analyse
if (page_analyse){
//console.log("boucle analyse")
@ -466,8 +519,9 @@ function animate() {
init_variable_analyse()
traitement_fin()
}
////////////////////////////////////////////////////////////////////////////////
// page fin
if (!page_contexte && !page_inscription && !page_vues && !page_analyse){
if (!page_contexte && !page_inscription && !page_explication && !page_vues && !page_analyse){
//console.log("boucle fin")
// on enlève les touches du clavier associé à la page vues
document.removeEventListener("keydown", action_clavier_analyse)
@ -504,7 +558,7 @@ function animate() {
}
////////////////////////////////////////////////////////////////////////////////
// Boucle sur animate
requestAnimationFrame( animate );
// RAZ