adaptation à tous les ecrans
This commit is contained in:
mpelissi
+10
-11
@@ -84,7 +84,7 @@ function init_variable(premier_appel){
|
||||
|
||||
// Enchainement des pages
|
||||
if (premier_appel){
|
||||
page_contexte = true
|
||||
page_contexte = false
|
||||
page_inscription = false
|
||||
page_explication = false
|
||||
page_warning = false
|
||||
@@ -312,8 +312,8 @@ function animate() {
|
||||
// Temps à chaque animate
|
||||
time_animate = new Date().getTime()
|
||||
// shorcut
|
||||
w_Bshortcut = 122
|
||||
h_Bshortcut = 40
|
||||
h_Bshortcut = 0.05*window.innerHeight ; ratio_shorcut = h_Bshortcut/imgs["clavier_vues"].height
|
||||
w_Bshortcut = ratio_shorcut*imgs["clavier_vues"].width
|
||||
x_Bshortcut = 10
|
||||
y_Bshortcut = window.innerHeight-h_Bshortcut-10
|
||||
////////////////////////////////////////////////////////////////////////////////
|
||||
@@ -365,10 +365,10 @@ function animate() {
|
||||
// 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"))}
|
||||
else{print_text(handle_text(texte_temporaire.text, texte_temporaire.x, texte_temporaire.y, taille_texte+"pt Courier", longueur_max_error, "#118AB2"))}
|
||||
}
|
||||
// progress bar
|
||||
progress_bar(0, 1)
|
||||
progress_bar(0, 1, taille_texte)
|
||||
// Affichage fleche
|
||||
afficher_fleche(imgs)
|
||||
// affichage de sboutons
|
||||
@@ -427,10 +427,10 @@ function animate() {
|
||||
// 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"))}
|
||||
else{print_text(handle_text(texte_temporaire.text, texte_temporaire.x, texte_temporaire.y, taille_texte+"pt Courier", longueur_max_error, "#118AB2"))}
|
||||
}
|
||||
// progress bar
|
||||
progress_bar(num_tache-1, nb_mesh)
|
||||
progress_bar(num_tache-1, nb_mesh, taille_texte)
|
||||
// Affichage fleche
|
||||
afficher_fleche(imgs)
|
||||
// affichage de sboutons
|
||||
@@ -450,7 +450,7 @@ function animate() {
|
||||
bloquer_pose(liste_poses)
|
||||
// raccourcis
|
||||
// raccourcis bouton et fleche
|
||||
shortcuts(xyMouseMove, imgs['clavier_vues'], window.innerWidth/2 -(imgs['clavier_vues'].width/2), window.innerHeight/2 -(imgs['clavier_vues'].height/2), imgs['clavier_vues'].width, imgs['clavier_vues'].height, boutons['raccourcis'], x_Bshortcut, y_Bshortcut, w_Bshortcut, h_Bshortcut)
|
||||
shortcuts(xyMouseMove, imgs['clavier_vues'], window.innerWidth/2 -(0.7*window.innerWidth/2), window.innerHeight/2 -(0.35*innerHeight/2), 0.7*window.innerWidth, 0.35*innerHeight, boutons['raccourcis'], x_Bshortcut, y_Bshortcut, w_Bshortcut, h_Bshortcut)
|
||||
|
||||
}
|
||||
////////////////////////////////////////////////////////////////////////////////
|
||||
@@ -478,7 +478,7 @@ function animate() {
|
||||
ctx.clearRect(0, 0, window.innerWidth, window.innerHeight)
|
||||
draw_rectangle(0,0,canvas.width, canvas.height, "rgb(3, 26, 33)", 1)
|
||||
// Texte
|
||||
affichage_texte_fin(message_fin, envoie_termine)
|
||||
affichage_texte_fin(message_fin)
|
||||
// ECRITURE DES RESULTATS
|
||||
choix['Analyse'] = checkbox_clicked
|
||||
choix['Interactions'] = interactions
|
||||
@@ -494,9 +494,8 @@ function animate() {
|
||||
if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
|
||||
console.log(xhr.responseText);
|
||||
message_fin = "> It's done. You can close the web page."
|
||||
//print_text(handle_text(message_fin, (window.innerWidth/2)-450, innerHeight/2+150 , "26pt Courier", 1000))
|
||||
envoie_termine = true
|
||||
affichage_texte_fin(message_fin, envoie_termine)
|
||||
update_texte_fin(message_fin)
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -2,17 +2,21 @@
|
||||
// bouton
|
||||
function init_variable_fonction(dict_boutons, dict_imgs ){
|
||||
// fleche
|
||||
scale_fleche = 0.065
|
||||
//scale_fleche = 0.065
|
||||
dy = 0.03*H_3D
|
||||
DY = 2*dy
|
||||
a = scale_fleche*dict_imgs["gauche"].height
|
||||
b = scale_fleche*dict_imgs["gauche"].width
|
||||
a = 0.05*window.innerHeight//scale_fleche*dict_imgs["gauche"].height
|
||||
ratio_fleche = a/dict_imgs["gauche"].height
|
||||
b = ratio_fleche*dict_imgs["gauche"].width
|
||||
|
||||
// bouton
|
||||
scale_bouton = 0.3
|
||||
h_bouton = scale_bouton*dict_boutons["choix_pose"].height
|
||||
w_bouton = scale_bouton*dict_boutons["choix_pose"].width
|
||||
//scale_bouton = 0.3
|
||||
h_bouton = 0.08*window.innerHeight//scale_bouton*dict_boutons["choix_pose"].height
|
||||
ratio = h_bouton/dict_boutons["choix_pose"].height
|
||||
w_bouton = ratio*dict_boutons["choix_pose"].width
|
||||
pos_bouton = ((W_3D*0.2+a+b)/W_3D)+0.1
|
||||
ecart_bouton = 0.1*w_bouton
|
||||
|
||||
// Couleur
|
||||
alpha_bloque = 0.6
|
||||
|
||||
@@ -21,14 +25,19 @@ function init_variable_fonction(dict_boutons, dict_imgs ){
|
||||
y_progress_bar = 0
|
||||
w_progress_bar = window.innerWidth - W_3D*0.1
|
||||
h_progress_bar = H_3D*0.04
|
||||
|
||||
// image recap
|
||||
dx = 20
|
||||
ecart_recap = 50
|
||||
ecart_recap = 0.055*window.innerHeight
|
||||
y0_recap = (2*h_progress_bar + ecart_recap)
|
||||
|
||||
// Message pop up
|
||||
x_pop_up = W_3D*pos_bouton+w_bouton*2+ecart_bouton+30
|
||||
y_pop_up = H_3D +dy*4
|
||||
ecart = 40
|
||||
|
||||
// texte
|
||||
taille_texte = (0.01*window.innerWidth)
|
||||
|
||||
}
|
||||
|
||||
@@ -40,12 +49,11 @@ function bloquer_pose(L_poses){
|
||||
// Si on est en train de voir une pose déjà choisie
|
||||
if (idx_i== idx_i_p && idx_j==idx_j_p){
|
||||
draw_rectangle(0, h_progress_bar, W_3D, H_3D-h_progress_bar, "rgb(0, 0, 0)", alpha_bloque)
|
||||
print_text(handle_text("Viewpoint already selected", 10, H_3D, "16pt Courier", H_3D, "#118AB2"))
|
||||
print_text(handle_text("Viewpoint already selected", 10, H_3D, taille_texte+"pt Courier", H_3D, "#118AB2"))
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function pose_deja_choisie(L_poses, i_choix, j_choix){
|
||||
deja_choisie = false
|
||||
for (p=0; p<L_poses.length; p++){
|
||||
@@ -74,23 +82,21 @@ function swapElements(arr, i1, i2) {
|
||||
|
||||
// legende des nb_demande recap
|
||||
function affichage_texte_recap(pos){
|
||||
y_image = 100+(20+ H_3D/3.5)*pos
|
||||
y_image = y0_recap+(20+ H_3D/3.5)*pos
|
||||
ctx.strokeStyle = "rgb(255, 255, 255)"; ctx.fillStyle = "rgb(255, 255, 255)"
|
||||
if (pos==0){print_text(handle_text("Best viewpoint:", W_3D+dx, (H_3D/3.5)*0.4 + y_image, "20pt Courier", longueur_max_recap))}
|
||||
if (pos==1){print_text(handle_text("2nd viewpoint:", W_3D+dx, (H_3D/3.5)*0.4 + y_image, "20pt Courier", longueur_max_recap))}
|
||||
if (pos==2){print_text(handle_text("3rd viewpoint:", W_3D+dx, (H_3D/3.5)*0.4 + y_image, "20pt Courier", longueur_max_recap))}
|
||||
if (pos==0){print_text(handle_text("Best viewpoint:", W_3D+dx, (H_3D/3.5)*0.4 + y_image, 1.1*taille_texte+"pt Courier", longueur_max_recap))}
|
||||
if (pos==1){print_text(handle_text("2nd viewpoint:", W_3D+dx, (H_3D/3.5)*0.4 + y_image, 1.1*taille_texte+"pt Courier", longueur_max_recap))}
|
||||
if (pos==2){print_text(handle_text("3rd viewpoint:", W_3D+dx, (H_3D/3.5)*0.4 + y_image, 1.1*taille_texte+"pt Courier", longueur_max_recap))}
|
||||
}
|
||||
|
||||
function afficher_recap(){
|
||||
w_recap = window.innerWidth-W_3D
|
||||
// texte du haut
|
||||
//print_text(handle_text("Selected Viewpoints:", W_3D +(window.innerWidth-W_3D)/4, h_progress_bar + ecart_recap, "24pt Courier", 500))
|
||||
// fleche swap haut
|
||||
x_fleche_h = W_3D+ w_recap/2.5
|
||||
x_fleche_h = W_3D + w_recap/2 - 30
|
||||
w_fleche_h = 20
|
||||
h_fleche_h = 20
|
||||
// fleche swap bas
|
||||
x_fleche_b = W_3D+ w_recap/2.5
|
||||
x_fleche_b = W_3D + w_recap/2 - 30
|
||||
w_fleche_b = 20
|
||||
h_fleche_b = 20
|
||||
// croix
|
||||
@@ -100,11 +106,12 @@ function afficher_recap(){
|
||||
// pour chaque recap
|
||||
for (let i = 0 ; i < canvasMins.length; i++) {
|
||||
// Draw les images des contextes
|
||||
y_image = 100+(20+ H_3D/3.5)*i
|
||||
ctx.drawImage(canvasMins[i],W_3D+ w_recap/2, y_image, H_3D/3.5, H_3D/3.5)
|
||||
y_image = y0_recap + (10 + H_3D/3.5)*i
|
||||
ctx.drawImage(canvasMins[i], W_3D + w_recap/2, y_image, H_3D/3.5, H_3D/3.5)
|
||||
|
||||
//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
|
||||
y_fleche_h = (H_3D/3.5)*0.35 + y_image
|
||||
ctx.drawImage(imgs["haut"], x_fleche_h, y_fleche_h, w_fleche_h, h_fleche_h)
|
||||
if (clicked && click_inside(xyMouseDown, x_fleche_h, y_fleche_h, w_fleche_h, h_fleche_h)) {
|
||||
swapElements(canvasMins, i, i-1)
|
||||
@@ -116,7 +123,7 @@ function afficher_recap(){
|
||||
}
|
||||
// Fleche pour Switch bas
|
||||
if (nb_choix_fait > 1 && i < nb_choix_fait-1) {
|
||||
y_fleche_b = (H_3D/3.5)*0.6 + y_image
|
||||
y_fleche_b = (H_3D/3.5)*0.65 + y_image
|
||||
ctx.drawImage(imgs["bas"], x_fleche_b, y_fleche_b, w_fleche_b, h_fleche_b)
|
||||
if (clicked && click_inside(xyMouseDown, x_fleche_b, y_fleche_b, w_fleche_b, h_fleche_b)) {
|
||||
swapElements(canvasMins, i, i+1)
|
||||
@@ -264,7 +271,16 @@ function action_fleche_bas(){
|
||||
///////////////////////////////////////////////////////////////
|
||||
///////////////////// BOUTON
|
||||
function afficher_bouton(dict_boutons){
|
||||
print_text(handle_text("Selected Viewpoints:", W_3D +(window.innerWidth-W_3D)/4, h_progress_bar + ecart_recap, "24pt Courier", 500))
|
||||
// Partie selection vue
|
||||
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 = 2*taille_texte+"pt Courier"
|
||||
texte = "Selected Viewpoints:"
|
||||
largeur = ctx.measureText(texte).width
|
||||
ctx.fillText(texte, W_3D + ((window.innerWidth-W_3D)/2)- (largeur/2), h_progress_bar + ecart_recap)
|
||||
//print_text(handle_text("Selected Viewpoints:", W_3D +(window.innerWidth-W_3D)/5, h_progress_bar + ecart_recap, 2*taille_texte+"pt Courier", 500))
|
||||
|
||||
// BOUTONS
|
||||
// image, posx, posy, W, H
|
||||
ctx.drawImage(dict_boutons["choix_pose"], W_3D*pos_bouton, H_3D+dy*2, w_bouton, h_bouton)
|
||||
ctx.drawImage(dict_boutons["retirer"], W_3D*pos_bouton+w_bouton+ecart_bouton, H_3D+dy*2, w_bouton, h_bouton)
|
||||
@@ -433,15 +449,18 @@ function action_bouton_valider(){
|
||||
}
|
||||
|
||||
function action_bouton_raz(){
|
||||
x_texte_raz = -(1.2*w_bouton)/4+W_3D + w_bouton*1.2 +10
|
||||
y_texte_raz = H_3D+dy*2+h_bouton
|
||||
l_max_raz = window.innerWidth-w_bouton-10 - x_texte_raz
|
||||
//on efface les autres textes pop
|
||||
texte_temporaire = {}
|
||||
//affichage du message
|
||||
print_text(handle_text("Do you really want to restart the study?", window.innerWidth-w_bouton*2.1, window.innerHeight-h_bouton*2, "18pt Courier", 300))
|
||||
print_text(handle_text("Do you really want to restart the study?", x_texte_raz, y_texte_raz, taille_texte+"pt Courier", l_max_raz, color="#FFFFFF", interligne=0.045*window.innerHeight))
|
||||
// affichage
|
||||
ctx.drawImage(imgs['croix'], (window.innerWidth-w_bouton*2.1)+w_bouton*0.65, window.innerHeight-h_bouton +10, 60,50)
|
||||
ctx.drawImage(imgs['check'], (window.innerWidth-w_bouton*2.1)+w_bouton*0.15, window.innerHeight-h_bouton +10, 50,50)
|
||||
ctx.drawImage(imgs['croix'], x_texte_raz+ l_max_raz*0.2, window.innerHeight-h_bouton +10, h_bouton/2, h_bouton/2)
|
||||
ctx.drawImage(imgs['check'], x_texte_raz+ l_max_raz*0.6, window.innerHeight-h_bouton +10, h_bouton/2, h_bouton/2)
|
||||
// si on veut raz
|
||||
if (clicked && is_inside(xyMouseMove, (window.innerWidth-w_bouton*2.1)+w_bouton*0.15, window.innerHeight-h_bouton +10, 50,50)){
|
||||
if (clicked && is_inside(xyMouseMove, x_texte_raz+ l_max_raz*0.6, window.innerHeight-h_bouton +10, h_bouton/2, h_bouton/2)){
|
||||
init_variable(false);
|
||||
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)
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
scale_bouton_commencer_contexte = 0.6
|
||||
//scale_bouton_commencer_contexte = 0.6
|
||||
h_bouton_contexte = 0.1*window.innerHeight
|
||||
num_texte = 0
|
||||
|
||||
|
||||
@@ -7,18 +8,10 @@ function affichage_texte_contexte(texte, font, color, xt, yt, l_max_texte){
|
||||
ctx.strokeStyle = color // Pour que le contour soit rouge
|
||||
ctx.fillStyle = color // Pour que l'intérieur soit bleu
|
||||
ctx.font = font
|
||||
print_text(handle_text(texte, xt, yt, font, l_max_texte), false)
|
||||
print_text(handle_text(texte, xt, yt, font, l_max_texte, color="#FFFFFF", interligne=0.045*window.innerHeight), false)
|
||||
|
||||
}
|
||||
|
||||
function affichage_titre_contexte(titre, font, color, yt){
|
||||
ctx.strokeStyle =color
|
||||
ctx.fillStyle =color
|
||||
ctx.font = font
|
||||
largeur = ctx.measureText(titre).width
|
||||
// au milieu
|
||||
ctx.fillText(titre, (window.innerWidth/2)- (largeur/2), yt)
|
||||
}
|
||||
|
||||
////////////////////////////////////////////////////////////////////
|
||||
///// BOUTON COMMENCER
|
||||
@@ -74,8 +67,11 @@ function action_bouton_avant_contexte(){
|
||||
}
|
||||
|
||||
function afficher_bouton_suivant_contexte(){
|
||||
w_bouton_suivant = scale_bouton_commencer_contexte*boutons["suivant"].width
|
||||
h_bouton_suivant = scale_bouton_commencer_contexte*boutons["suivant"].height
|
||||
//w_bouton_suivant = scale_bouton_commencer_contexte*boutons["suivant"].width
|
||||
//h_bouton_suivant = scale_bouton_commencer_contexte*boutons["suivant"].height
|
||||
ratio_bouton_contexte = h_bouton_contexte/boutons["suivant"].height
|
||||
w_bouton_suivant = ratio_bouton_contexte*boutons["suivant"].width
|
||||
h_bouton_suivant = h_bouton_contexte
|
||||
x_bouton_suivant = (window.innerWidth/2)+ 5
|
||||
y_bouton_suivant = window.innerHeight - h_bouton_suivant - 20
|
||||
// Bouton commencer
|
||||
@@ -105,21 +101,21 @@ function afficher_bouton_avant_contexte(){
|
||||
///// MAIN
|
||||
|
||||
function traitement_contexte(){
|
||||
console.log(num_texte)
|
||||
//console.log(num_texte)
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height)
|
||||
// variable position
|
||||
x_texte = window.innerWidth*(1/8)
|
||||
w_texte = window.innerWidth*(6/8)
|
||||
x_texte = window.innerWidth*(1/10)
|
||||
w_texte = window.innerWidth*(8/10)
|
||||
font_texte = (0.012*window.innerWidth)+"pt Courier"
|
||||
// titre commun à chaque page
|
||||
affichage_titre_contexte(titre, (0.018*window.innerWidth)+"pt Courier", "#EF476F", y_titre)
|
||||
affichage_titre(titre, (0.018*window.innerWidth)+"pt Courier", "#EF476F")
|
||||
// affichage texte
|
||||
for(let p=0; p<texte_a_afficher.length; p++){
|
||||
dict_texte = texte_a_afficher[p]
|
||||
if ((num_texte == 7 || num_texte == 6) && (p == (textes_page_2.length)-1 || p == ( textes_page_2.length)-2)){w_texte = window.innerWidth*(4/8)}
|
||||
if ((num_texte == 10 || num_texte == 11) && (p == (textes_page_3.length)-2)){w_texte = window.innerWidth*(4/8)}
|
||||
if ((num_texte == 7 || num_texte == 6) && (p == (textes_page_2.length)-1 || p == ( textes_page_2.length)-2)){w_texte = window.innerWidth*(5/10)}
|
||||
if ((num_texte == 10 || num_texte == 11) && (p == (textes_page_3.length)-2)){w_texte = window.innerWidth*(5/10)}
|
||||
affichage_texte_contexte(dict_texte.t, font_texte, dict_texte.c, x_texte, dict_texte.y, w_texte)
|
||||
w_texte = window.innerWidth*(6/8)
|
||||
w_texte = window.innerWidth*(8/10)
|
||||
}
|
||||
|
||||
if (num_texte < ((textes_page_1.length + textes_page_2.length + textes_page_3.length +textes_page_4.length))-2){
|
||||
@@ -152,15 +148,15 @@ function traitement_contexte(){
|
||||
}
|
||||
// affichage image
|
||||
if(num_texte==6){
|
||||
ctx.drawImage(imgs['exemple1'], x_bouton_suivant + w_bouton_suivant + 100, textes["texte6"].y - 100, window.innerWidth*(2/8), window.innerWidth*(2/8))
|
||||
ctx.drawImage(imgs['exemple1'], x_bouton_suivant + w_bouton_suivant + 100, (textes["texte6"].y + textes["texte5"].y)/2, window.innerWidth*(2/8), window.innerWidth*(2/8))
|
||||
}
|
||||
if(num_texte==7){
|
||||
ctx.drawImage(imgs['exemple2'], x_bouton_suivant + w_bouton_suivant + 100, textes["texte6"].y - 100, window.innerWidth*(2/8), window.innerWidth*(2/8))
|
||||
ctx.drawImage(imgs['exemple2'], x_bouton_suivant + w_bouton_suivant + 100, (textes["texte6"].y + textes["texte5"].y)/2 , window.innerWidth*(2/8), window.innerWidth*(2/8))
|
||||
}
|
||||
if(num_texte==10 || num_texte==11){
|
||||
affichage_texte_contexte("Which viewpoint would you choose between both?", font_texte, "rgb(255, 209, 102)", x_texte, textes["texte10"].y + 100, window.innerWidth*(4/8))
|
||||
ctx.drawImage(imgs['exemple1'], x_bouton_suivant + w_bouton_suivant , textes["texte10"].y - 100, window.innerWidth*(1/8), window.innerWidth*(1/8))
|
||||
ctx.drawImage(imgs['exemple2'], x_bouton_suivant + window.innerWidth*(1/8) + + w_bouton_suivant+20, textes["texte10"].y -100 , window.innerWidth*(1/8), window.innerWidth*(1/8))
|
||||
affichage_texte_contexte("Which viewpoint would you choose between both?", font_texte, "rgb(255, 209, 102)", x_texte, (textes["texte10"].y + textes["texte11"].y)/2, window.innerWidth*(4/8))
|
||||
ctx.drawImage(imgs['exemple1'], window.innerWidth*(6/10)+20 , textes["texte10"].y - 50, window.innerWidth*(1/8), window.innerWidth*(1/8))
|
||||
ctx.drawImage(imgs['exemple2'], window.innerWidth*(6/10) + window.innerWidth*(1/8) + 40, textes["texte10"].y - 50 , window.innerWidth*(1/8), window.innerWidth*(1/8))
|
||||
}
|
||||
|
||||
|
||||
@@ -171,7 +167,6 @@ function traitement_contexte(){
|
||||
///// Textes
|
||||
|
||||
function init_textes_contexte(){
|
||||
y_titre = 50
|
||||
titre = "User study : Best view selection"
|
||||
color_blanc = "rgb(255,255,255)"
|
||||
color_rouge = "rgb(239, 71, 111)"
|
||||
@@ -181,7 +176,7 @@ textes={
|
||||
"texte2":{"t":"That’s where you come into play, I need you to answer a few question in order to build a dataset of human-chosen viewpoints of objects. Let me get into the details...", "y":window.innerHeight*0.65, "c": color_blanc},
|
||||
"texte3":{"t":"What is a viewpoint? ", "y": window.innerHeight*0.15, "c": color_rouge},
|
||||
"texte4":{"t":"> The viewpoint of an object is the position from which we observe the object.", "y": window.innerHeight*0.2, "c": color_blanc},
|
||||
"texte5":{"t":"A viewpoint will always highlight some parts and obscure other parts of an object.", "y": window.innerHeight*0.3, "c": color_blanc},
|
||||
"texte5":{"t":"A viewpoint will always highlight some parts and obscure other parts of an object.", "y": window.innerHeight*0.25, "c": color_blanc},
|
||||
"texte6":{"t":"For example, this is wolf. This perspective highlights the tail and the hind legs, but obscures the head and face.", "y": window.innerHeight*0.45, "c": color_blanc},
|
||||
"texte7":{"t":"This viewpoint reveal the head, face, and front legs but hides the tail and barely shows the hind legs.", "y": window.innerHeight*0.6, "c": color_blanc},
|
||||
"texte8":{"t":"What is a good viewpoint?", "y": window.innerHeight*0.15, "c": color_rouge},
|
||||
|
||||
@@ -6,122 +6,129 @@ function init_explication(){
|
||||
color_texte = "rgb(0,0,0)"
|
||||
color_clignotement = "rgb(255,0,255)"
|
||||
epaisseur_clignotement = 6
|
||||
font_texte = window.innerWidth
|
||||
ecart_x = 50
|
||||
l_texte_max = window.innerWidth-W_3D-2*ecart_x -50
|
||||
|
||||
// ecart de chaque cote de l'ecran
|
||||
dy_ecran = H_3D*0.12
|
||||
ecart_x = 0.015*window.innerWidth
|
||||
w_ecran = window.innerWidth-W_3D-2*ecart_x
|
||||
h_ecran = H_3D*0.5
|
||||
|
||||
// texte
|
||||
taille_texte_explication = 0.01*window.innerWidth
|
||||
l_texte_max = w_ecran -50
|
||||
interligne = 0.045*window.innerHeight
|
||||
|
||||
// marge du texte
|
||||
marge_texte_x = 20
|
||||
marge_texte_y = 100
|
||||
marge_texte_y = 0.25*h_ecran
|
||||
|
||||
// deplacement pour ajouter un titre à l'ecran
|
||||
dy_ecran = 50
|
||||
dh_ecran = 55
|
||||
|
||||
// Position des boutons sur l'écran
|
||||
w_bouton_suivant = boutons["suivant"].width*0.3
|
||||
h_bouton_suivant = boutons["suivant"].height*0.3
|
||||
h_bouton_suivant = 0.15*h_ecran
|
||||
ratio_explication = h_bouton_suivant/boutons["suivant"].height
|
||||
w_bouton_suivant = ratio_explication * boutons["suivant"].width
|
||||
|
||||
|
||||
temps_attente = 0
|
||||
|
||||
|
||||
ecrans = [
|
||||
// -1 avant de lancer l'interface
|
||||
{'x': W_3D + ecart_x, "y": H_3D*0.6 - dy_ecran , "w":window.innerWidth-W_3D-2*ecart_x, "h":H_3D*0.45 + dh_ecran, "c":color_ecran,"a": alpha_ecran},
|
||||
{'x': W_3D + ecart_x, "y": H_3D*0.6 - dy_ecran , "w":w_ecran, "h":h_ecran, "c":color_ecran,"a": alpha_ecran},
|
||||
// 0
|
||||
{'x': W_3D + ecart_x, "y": H_3D*0.6 - dy_ecran , "w":window.innerWidth-W_3D-2*ecart_x, "h":H_3D*0.45 + dh_ecran, "c":color_ecran,"a": alpha_ecran},
|
||||
{'x': W_3D + ecart_x, "y": H_3D*0.6 - dy_ecran , "w":w_ecran, "h":h_ecran, "c":color_ecran,"a": alpha_ecran},
|
||||
// 1.1
|
||||
{'x': W_3D + ecart_x, "y": H_3D*0.6 - dy_ecran, "w":window.innerWidth-W_3D-2*ecart_x, "h":H_3D*0.45 + dh_ecran, "c":color_ecran,"a": alpha_ecran},
|
||||
{'x': W_3D + ecart_x, "y": H_3D*0.6 - dy_ecran, "w":w_ecran, "h":h_ecran, "c":color_ecran,"a": alpha_ecran},
|
||||
// 1.2,
|
||||
{'x': W_3D + ecart_x, "y": H_3D*0.6 - dy_ecran, "w":window.innerWidth-W_3D-2*ecart_x, "h":H_3D*0.45 + dh_ecran, "c":color_ecran,"a": alpha_ecran},
|
||||
{'x': W_3D + ecart_x, "y": H_3D*0.6 - dy_ecran, "w":w_ecran, "h":h_ecran, "c":color_ecran,"a": alpha_ecran},
|
||||
// 1.3
|
||||
{'x': W_3D + ecart_x, "y": H_3D*0.6 - dy_ecran, "w":window.innerWidth-W_3D-2*ecart_x, "h":H_3D*0.45 + dh_ecran, "c":color_ecran,"a": alpha_ecran},
|
||||
{'x': W_3D + ecart_x, "y": H_3D*0.6 - dy_ecran, "w":w_ecran, "h":h_ecran, "c":color_ecran,"a": alpha_ecran},
|
||||
// 2.1 : Selection 1er vues
|
||||
{'x': W_3D + ecart_x, "y": H_3D*0.6 - dy_ecran, "w":window.innerWidth-W_3D-2*ecart_x, "h":H_3D*0.45 + dh_ecran, "c":color_ecran,"a": alpha_ecran},
|
||||
{'x': W_3D + ecart_x, "y": H_3D*0.6 - dy_ecran, "w":w_ecran, "h":h_ecran, "c":color_ecran,"a": alpha_ecran},
|
||||
// 2.2 : clique sur fleche droite
|
||||
{'x': W_3D + ecart_x, "y": H_3D*0.6 - dy_ecran, "w":window.innerWidth-W_3D-2*ecart_x, "h":H_3D*0.45 + dh_ecran, "c":color_ecran,"a": alpha_ecran},
|
||||
{'x': W_3D + ecart_x, "y": H_3D*0.6 - dy_ecran, "w":w_ecran, "h":h_ecran, "c":color_ecran,"a": alpha_ecran},
|
||||
// 2.3 : clique sur fleche haut
|
||||
{'x': W_3D + ecart_x, "y": H_3D*0.6 - dy_ecran, "w":window.innerWidth-W_3D-2*ecart_x, "h":H_3D*0.45 + dh_ecran, "c":color_ecran,"a": alpha_ecran},
|
||||
{'x': W_3D + ecart_x, "y": H_3D*0.6 - dy_ecran, "w":w_ecran, "h":h_ecran, "c":color_ecran,"a": alpha_ecran},
|
||||
// 2.4 : clique sur fleche haut
|
||||
{'x': W_3D + ecart_x, "y": H_3D*0.6 - dy_ecran, "w":window.innerWidth-W_3D-2*ecart_x, "h":H_3D*0.45 + dh_ecran, "c":color_ecran,"a": alpha_ecran},
|
||||
{'x': W_3D + ecart_x, "y": H_3D*0.6 - dy_ecran, "w":w_ecran, "h":h_ecran, "c":color_ecran,"a": alpha_ecran},
|
||||
// 2.5 : PBL trop haut
|
||||
{'x': W_3D + ecart_x, "y": H_3D*0.6 - dy_ecran, "w":window.innerWidth-W_3D-2*ecart_x, "h":H_3D*0.45 + dh_ecran, "c":color_ecran,"a": alpha_ecran},
|
||||
{'x': W_3D + ecart_x, "y": H_3D*0.6 - dy_ecran, "w":w_ecran, "h":h_ecran, "c":color_ecran,"a": alpha_ecran},
|
||||
// 3.1 : clique sur fleche bas
|
||||
{'x': W_3D + ecart_x, "y": H_3D*0.6 - dy_ecran, "w":window.innerWidth-W_3D-2*ecart_x, "h":H_3D*0.45 + dh_ecran, "c":color_ecran,"a": alpha_ecran},
|
||||
{'x': W_3D + ecart_x, "y": H_3D*0.6 - dy_ecran, "w":w_ecran, "h":h_ecran, "c":color_ecran,"a": alpha_ecran},
|
||||
// 3.2 : clique sur fleche bas
|
||||
{'x': W_3D + ecart_x, "y": H_3D*0.6 - dy_ecran, "w":window.innerWidth-W_3D-2*ecart_x, "h":H_3D*0.45 + dh_ecran, "c":color_ecran,"a": alpha_ecran},
|
||||
{'x': W_3D + ecart_x, "y": H_3D*0.6 - dy_ecran, "w":w_ecran, "h":h_ecran, "c":color_ecran,"a": alpha_ecran},
|
||||
// 3.3 : clique sur fleche droite
|
||||
{'x': W_3D + ecart_x, "y": H_3D*0.6 - dy_ecran, "w":window.innerWidth-W_3D-2*ecart_x, "h":H_3D*0.45 + dh_ecran, "c":color_ecran,"a": alpha_ecran},
|
||||
{'x': W_3D + ecart_x, "y": H_3D*0.6 - dy_ecran, "w":w_ecran, "h":h_ecran, "c":color_ecran,"a": alpha_ecran},
|
||||
// 4: Selection de la vue
|
||||
{'x': W_3D + ecart_x, "y": H_3D*0.6 - dy_ecran, "w":window.innerWidth-W_3D-2*ecart_x, "h":H_3D*0.45 + dh_ecran, "c":color_ecran,"a": alpha_ecran},
|
||||
{'x': W_3D + ecart_x, "y": H_3D*0.6 - dy_ecran, "w":w_ecran, "h":h_ecran, "c":color_ecran,"a": alpha_ecran},
|
||||
//5 : plus d'interaction
|
||||
{'x': W_3D + ecart_x, "y": H_3D*0.6 - dy_ecran, "w":window.innerWidth-W_3D-2*ecart_x, "h":H_3D*0.45 + dh_ecran, "c":color_ecran,"a": alpha_ecran},
|
||||
{'x': W_3D + ecart_x, "y": H_3D*0.6 - dy_ecran, "w":w_ecran, "h":h_ecran, "c":color_ecran,"a": alpha_ecran},
|
||||
//6.1 : plus d'interaction
|
||||
{'x': W_3D/2 - (window.innerWidth-W_3D-2*ecart_x)/2 , "y": H_3D/2 - (H_3D*0.45 + dh_ecran)/2 , "w":window.innerWidth-W_3D-2*ecart_x, "h":H_3D*0.45 + dh_ecran, "c":color_ecran,"a": alpha_ecran},
|
||||
{'x': W_3D/2 - (w_ecran)/2 , "y": H_3D/2 - (h_ecran)/2 , "w":w_ecran, "h":h_ecran, "c":color_ecran,"a": alpha_ecran},
|
||||
//6.2 :
|
||||
{'x': W_3D/2 - (window.innerWidth-W_3D-2*ecart_x)/2 , "y": H_3D/2 - (H_3D*0.45 + dh_ecran)/2 , "w":window.innerWidth-W_3D-2*ecart_x, "h":H_3D*0.45 + dh_ecran, "c":color_ecran,"a": alpha_ecran},
|
||||
{'x': W_3D/2 - (w_ecran)/2 , "y": H_3D/2 - (h_ecran)/2 , "w":w_ecran, "h":h_ecran, "c":color_ecran,"a": alpha_ecran},
|
||||
//6.3 :
|
||||
{'x': W_3D/2 - (window.innerWidth-W_3D-2*ecart_x)/2 , "y": H_3D/2 - (H_3D*0.45 + dh_ecran)/2 , "w":window.innerWidth-W_3D-2*ecart_x, "h":H_3D*0.45 + dh_ecran, "c":color_ecran,"a": alpha_ecran},
|
||||
{'x': W_3D/2 - (w_ecran)/2 , "y": H_3D/2 - (h_ecran)/2 , "w":w_ecran, "h":h_ecran, "c":color_ecran,"a": alpha_ecran},
|
||||
//6.4 :
|
||||
{'x': W_3D/2 - (window.innerWidth-W_3D-2*ecart_x)/2 , "y": H_3D/2 - (H_3D*0.45 + dh_ecran)/2 , "w":window.innerWidth-W_3D-2*ecart_x, "h":H_3D*0.45 + dh_ecran, "c":color_ecran,"a": alpha_ecran},
|
||||
{'x': W_3D/2 - (w_ecran)/2 , "y": H_3D/2 - (h_ecran)/2 , "w":w_ecran, "h":h_ecran, "c":color_ecran,"a": alpha_ecran},
|
||||
//6.5 :
|
||||
{'x': W_3D/2 - (window.innerWidth-W_3D-2*ecart_x)/2 , "y": H_3D/2 - (H_3D*0.45 + dh_ecran)/2 , "w":window.innerWidth-W_3D-2*ecart_x, "h":H_3D*0.45 + dh_ecran, "c":color_ecran,"a": alpha_ecran},
|
||||
{'x': W_3D/2 - (w_ecran)/2 , "y": H_3D/2 - (h_ecran)/2 , "w":w_ecran, "h":h_ecran, "c":color_ecran,"a": alpha_ecran},
|
||||
//6.6 :
|
||||
{'x': W_3D/2 - (window.innerWidth-W_3D-2*ecart_x)/2 , "y": H_3D/2 - (H_3D*0.45 + dh_ecran)/2 , "w":window.innerWidth-W_3D-2*ecart_x, "h":H_3D*0.45 + dh_ecran, "c":color_ecran,"a": alpha_ecran},
|
||||
{'x': W_3D/2 - (w_ecran)/2 , "y": H_3D/2 - (h_ecran)/2 , "w":w_ecran, "h":h_ecran, "c":color_ecran,"a": alpha_ecran},
|
||||
//6.7 :
|
||||
{'x': W_3D/2 - (window.innerWidth-W_3D-2*ecart_x)/2 , "y": H_3D/2 - (H_3D*0.45 + dh_ecran)/2 , "w":window.innerWidth-W_3D-2*ecart_x, "h":H_3D*0.45 + dh_ecran, "c":color_ecran,"a": alpha_ecran},
|
||||
{'x': W_3D/2 - (w_ecran)/2 , "y": H_3D/2 - (h_ecran)/2 , "w":w_ecran, "h":h_ecran, "c":color_ecran,"a": alpha_ecran},
|
||||
//7 :
|
||||
{'x': W_3D/2 - (window.innerWidth-W_3D-2*ecart_x)/2 , "y": H_3D/2 - (H_3D*0.45 + dh_ecran)/2 , "w":window.innerWidth-W_3D-2*ecart_x, "h":H_3D*0.45 + dh_ecran, "c":color_ecran,"a": alpha_ecran}
|
||||
{'x': W_3D/2 - (w_ecran)/2 , "y": H_3D/2 - (h_ecran)/2 , "w":w_ecran, "h":h_ecran, "c":color_ecran,"a": alpha_ecran}
|
||||
]
|
||||
|
||||
|
||||
textes = [
|
||||
//-1
|
||||
{"t":"This is where the instructions will appear to take control of the interface to select your "+nb_choix_demande+" best viewpoints. Now let's display the interface. (PRESS NEXT BUTTON)", "x": ecrans[0].x + marge_texte_x, "y": ecrans[0].y + marge_texte_y, "f":0.010, "l":l_texte_max, "c":color_texte, "i":50},
|
||||
{"t":"This is where the instructions will appear to take control of the interface to select your "+nb_choix_demande+" best viewpoints. Now let's display the interface. (PRESS NEXT BUTTON)", "x": ecrans[0].x + marge_texte_x, "y": ecrans[0].y + marge_texte_y, "f":taille_texte_explication, "l":l_texte_max, "c":color_texte, "i":interligne},
|
||||
// 0
|
||||
{"t":"Here is how the interface looks like. (PRESS NEXT BUTTON)", "x": ecrans[0].x + marge_texte_x, "y": ecrans[0].y + marge_texte_y, "f":0.010, "l":l_texte_max, "c":color_texte, "i":50},
|
||||
{"t":"Here is how the interface looks like. (PRESS NEXT BUTTON)", "x": ecrans[0].x + marge_texte_x, "y": ecrans[0].y + marge_texte_y, "f":taille_texte_explication, "l":l_texte_max, "c":color_texte, "i":interligne},
|
||||
// 1.1 : ecran 3D
|
||||
{"t":"You have: A screen to view the 3D object. Do not be surprised by the initial position of the object, it appears from a random viewpoint. (PRESS NEXT BUTTON)", "x": ecrans[1].x + marge_texte_x, "y": ecrans[1].y + marge_texte_y, "f":0.010, "l":l_texte_max, "c":color_texte, "i":50},
|
||||
{"t":"You have: A screen to view the 3D object. Do not be surprised by the initial position of the object, it appears from a random viewpoint. (PRESS NEXT BUTTON)", "x": ecrans[1].x + marge_texte_x, "y": ecrans[1].y + marge_texte_y, "f":taille_texte_explication, "l":l_texte_max, "c":color_texte, "i":interligne},
|
||||
// 1.2 : fleche
|
||||
{"t":"You have: Arrows to move the 3D object. (PRESS NEXT BUTTON)", "x": ecrans[2].x + marge_texte_x, "y": ecrans[2].y + marge_texte_y, "f":0.010, "l":l_texte_max, "c":color_texte, "i":50},
|
||||
{"t":"You have: Arrows to move the 3D object. (PRESS NEXT BUTTON)", "x": ecrans[2].x + marge_texte_x, "y": ecrans[2].y + marge_texte_y, "f":taille_texte_explication, "l":l_texte_max, "c":color_texte, "i":interligne},
|
||||
// 1.3 : bouton
|
||||
{"t":"You have: Buttons to make your selection. (PRESS NEXT BUTTON)", "x": ecrans[3].x + marge_texte_x, "y": ecrans[3].y + marge_texte_y, "f":0.010, "l":l_texte_max, "c":color_texte, "i":50},
|
||||
{"t":"You have: Buttons to make your selection. (PRESS NEXT BUTTON)", "x": ecrans[3].x + marge_texte_x, "y": ecrans[3].y + marge_texte_y, "f":taille_texte_explication, "l":l_texte_max, "c":color_texte, "i":interligne},
|
||||
// 2.1 : Selection 1er vues
|
||||
{"t":"Let's try to select your first viewpoint. To do this, let's move the 3D model. (PRESS NEXT BUTTON) ", "x": ecrans[4].x + marge_texte_x, "y": ecrans[4].y + marge_texte_y, "f":0.010, "l":l_texte_max, "c":color_texte, "i":50},
|
||||
{"t":"Let's try to select your first viewpoint. To do this, let's move the 3D model. (PRESS NEXT BUTTON) ", "x": ecrans[4].x + marge_texte_x, "y": ecrans[4].y + marge_texte_y, "f":taille_texte_explication, "l":l_texte_max, "c":color_texte, "i":interligne},
|
||||
// 2.2 : clique sur fleche droite
|
||||
{"t":"Let's try to select your first viewpoint. To do this, let's move the 3D model. (PRESS RIGHT ARROW)", "x": ecrans[4].x + marge_texte_x, "y": ecrans[4].y + marge_texte_y, "f":0.010, "l":l_texte_max, "c":color_texte, "i":50},
|
||||
{"t":"Let's try to select your first viewpoint. To do this, let's move the 3D model. (PRESS RIGHT ARROW)", "x": ecrans[4].x + marge_texte_x, "y": ecrans[4].y + marge_texte_y, "f":taille_texte_explication, "l":l_texte_max, "c":color_texte, "i":interligne},
|
||||
// 2.3 : clique sur fleche haut
|
||||
{"t":"Let's try to select your first viewpoint. To do this, let's move the 3D model. (PRESS UP ARROW)", "x": ecrans[4].x + marge_texte_x, "y": ecrans[4].y + marge_texte_y, "f":0.010, "l":l_texte_max, "c":color_texte, "i":50},
|
||||
{"t":"Let's try to select your first viewpoint. To do this, let's move the 3D model. (PRESS UP ARROW)", "x": ecrans[4].x + marge_texte_x, "y": ecrans[4].y + marge_texte_y, "f":taille_texte_explication, "l":l_texte_max, "c":color_texte, "i":interligne},
|
||||
// 2.4 : clique sur fleche haut
|
||||
{"t":"ArrowUp once again. (PRESS UP ARROW)", "x": ecrans[4].x + marge_texte_x, "y": ecrans[4].y + marge_texte_y, "f":0.010, "l":l_texte_max, "c":color_texte, "i":50},
|
||||
{"t":"ArrowUp once again. (PRESS UP ARROW)", "x": ecrans[4].x + marge_texte_x, "y": ecrans[4].y + marge_texte_y, "f":taille_texte_explication, "l":l_texte_max, "c":color_texte, "i":interligne},
|
||||
// 2.5 : PBL trop haut
|
||||
{"t":"You can't go further. Error messages may appear if you make impossible manipulations. Now let's try again to select our first viewpoint : GO DOWN. (PRESS DOWN ARROW)", "x": ecrans[4].x + marge_texte_x, "y": ecrans[4].y + marge_texte_y, "f":0.01, "l":l_texte_max, "c":color_texte, "i":50},
|
||||
{"t":"You can't go further. Error messages may appear if you make impossible manipulations. Now let's try again to select our first viewpoint : GO DOWN. (PRESS DOWN ARROW)", "x": ecrans[4].x + marge_texte_x, "y": ecrans[4].y + marge_texte_y, "f":taille_texte_explication, "l":l_texte_max, "c":color_texte, "i":interligne},
|
||||
// 3.1 : clique sur fleche bas
|
||||
{"t":"It's better. Once again. (PRESS DOWN ARROW)", "x": ecrans[4].x + marge_texte_x, "y": ecrans[4].y + marge_texte_y, "f":0.010, "l":l_texte_max, "c":color_texte, "i":50},
|
||||
{"t":"It's better. Once again. (PRESS DOWN ARROW)", "x": ecrans[4].x + marge_texte_x, "y": ecrans[4].y + marge_texte_y, "f":taille_texte_explication, "l":l_texte_max, "c":color_texte, "i":interligne},
|
||||
// 3.2 : clique sur fleche bas
|
||||
{"t":"It's better. Go to the right. (PRESS RIGHT ARROW)", "x": ecrans[4].x + marge_texte_x, "y": ecrans[4].y + marge_texte_y, "f":0.010, "l":l_texte_max, "c":color_texte, "i":50},
|
||||
{"t":"It's better. Go to the right. (PRESS RIGHT ARROW)", "x": ecrans[4].x + marge_texte_x, "y": ecrans[4].y + marge_texte_y, "f":taille_texte_explication, "l":l_texte_max, "c":color_texte, "i":interligne},
|
||||
// 3.3 : clique sur fleche bas
|
||||
{"t":"Let's imagine that you choose this viewpoint. You have to select it with the button. (PRESS SELECT BUTTON)", "x": ecrans[4].x + marge_texte_x, "y": ecrans[4].y + marge_texte_y, "f":0.01, "l":l_texte_max, "c":color_texte, "i":50},
|
||||
{"t":"Let's imagine that you choose this viewpoint. You have to select it with the button. (PRESS SELECT BUTTON)", "x": ecrans[4].x + marge_texte_x, "y": ecrans[4].y + marge_texte_y, "f":taille_texte_explication, "l":l_texte_max, "c":color_texte, "i":interligne},
|
||||
// 4 :
|
||||
{"t":"You have chosen your first viewpoint among the "+nb_choix_demande+" asked. It is displayed on your right. This one has become gray on the 3D screen. You can no longer select it. (PRESS NEXT BUTTON)", "x": ecrans[4].x + marge_texte_x, "y": ecrans[4].y + marge_texte_y, "f":0.009, "l":l_texte_max, "c":color_texte, "i":50},
|
||||
{"t":"You have chosen your first viewpoint among the "+nb_choix_demande+" asked. It is displayed on your right. This one has become gray on the 3D screen. You can no longer select it. (PRESS NEXT BUTTON)", "x": ecrans[4].x + marge_texte_x, "y": ecrans[4].y + marge_texte_y, "f":taille_texte_explication, "l":l_texte_max, "c":color_texte, "i":interligne},
|
||||
//5
|
||||
{"t":"To go faster, the interaction part with the tutorial interface is finished. Now, you can just look and press the next button when it says here. (PRESS NEXT BUTTON)", "x": ecrans[4].x + marge_texte_x, "y": ecrans[4].y + marge_texte_y, "f":0.01, "l":l_texte_max, "c":color_texte, "i":50},
|
||||
{"t":"To go faster, the interaction part with the tutorial interface is finished. Now, you can just look and press the next button when it says here. (PRESS NEXT BUTTON)", "x": ecrans[4].x + marge_texte_x, "y": ecrans[4].y + marge_texte_y, "f":taille_texte_explication, "l":l_texte_max, "c":color_texte, "i":interligne},
|
||||
// 6.1
|
||||
{"t":"Let's imagine that you have chosen these "+nb_choix_demande+" viewpoints. (PRESS NEXT BUTTON)", "x": ecrans[15].x + marge_texte_x, "y": ecrans[15].y + marge_texte_y, "f":0.01, "l":l_texte_max, "c":color_texte, "i":50},
|
||||
{"t":"Let's imagine that you have chosen these "+nb_choix_demande+" viewpoints. (PRESS NEXT BUTTON)", "x": ecrans[15].x + marge_texte_x, "y": ecrans[15].y + marge_texte_y, "f":taille_texte_explication, "l":l_texte_max, "c":color_texte, "i":interligne},
|
||||
// 6.2
|
||||
{"t":"With the little arrows, we can switch your selected viewpoints. (PRESS NEXT BUTTON)", "x": ecrans[15].x + marge_texte_x, "y": ecrans[15].y + marge_texte_y, "f":0.01, "l":l_texte_max, "c":color_texte, "i":50},
|
||||
{"t":"With the little arrows, we can switch your selected viewpoints. (PRESS NEXT BUTTON)", "x": ecrans[15].x + marge_texte_x, "y": ecrans[15].y + marge_texte_y, "f":taille_texte_explication, "l":l_texte_max, "c":color_texte, "i":interligne},
|
||||
// 6.3
|
||||
{"t":"With the little red cross, we can remove your the selected viewpoint of your choice. (PRESS NEXT BUTTON)", "x": ecrans[15].x + marge_texte_x, "y": ecrans[15].y + marge_texte_y, "f":0.01, "l":l_texte_max, "c":color_texte, "i":50},
|
||||
{"t":"With the little red cross, we can remove your the selected viewpoint of your choice. (PRESS NEXT BUTTON)", "x": ecrans[15].x + marge_texte_x, "y": ecrans[15].y + marge_texte_y, "f":taille_texte_explication, "l":l_texte_max, "c":color_texte, "i":interligne},
|
||||
// 6.4
|
||||
{"t":"With the REMOVE button, we can remove the last selected viewpoint. (PRESS NEXT BUTTON)", "x": ecrans[15].x + marge_texte_x, "y": ecrans[15].y + marge_texte_y, "f":0.01, "l":l_texte_max, "c":color_texte, "i":50},
|
||||
{"t":"With the REMOVE button, we can remove the last selected viewpoint. (PRESS NEXT BUTTON)", "x": ecrans[15].x + marge_texte_x, "y": ecrans[15].y + marge_texte_y, "f":taille_texte_explication, "l":l_texte_max, "c":color_texte, "i":interligne},
|
||||
// 6.5
|
||||
{"t":"With the RESET SELECTION button, we can remove all selected viewpoints. (PRESS NEXT BUTTON)", "x": ecrans[15].x + marge_texte_x, "y": ecrans[15].y + marge_texte_y, "f":0.01, "l":l_texte_max, "c":color_texte, "i":50},
|
||||
{"t":"With the RESET SELECTION button, we can remove all selected viewpoints. (PRESS NEXT BUTTON)", "x": ecrans[15].x + marge_texte_x, "y": ecrans[15].y + marge_texte_y, "f":taille_texte_explication, "l":l_texte_max, "c":color_texte, "i":interligne},
|
||||
// 6.6
|
||||
{"t":"With the RESET STUDY button, we can start from the beginning. (PRESS NEXT BUTTON)", "x": ecrans[15].x + marge_texte_x, "y": ecrans[15].y + marge_texte_y, "f":0.01, "l":l_texte_max, "c":color_texte, "i":50},
|
||||
{"t":"With the RESET STUDY button, we can start from the beginning. (PRESS NEXT BUTTON)", "x": ecrans[15].x + marge_texte_x, "y": ecrans[15].y + marge_texte_y, "f":taille_texte_explication, "l":l_texte_max, "c":color_texte, "i":interligne},
|
||||
// 6.7
|
||||
{"t":"When you have chosen your "+nb_choix_demande+" viewpoints, the VALIDATE button appears. You can validate your selection and go to the next mesh. (PRESS NEXT BUTTON)", "x": ecrans[15].x + marge_texte_x, "y": ecrans[15].y + marge_texte_y, "f":0.01, "l":l_texte_max, "c":color_texte, "i":50},
|
||||
{"t":"When you have chosen your "+nb_choix_demande+" viewpoints, the VALIDATE button appears. You can validate your selection and go to the next mesh. (PRESS NEXT BUTTON)", "x": ecrans[15].x + marge_texte_x, "y": ecrans[15].y + marge_texte_y, "f":taille_texte_explication, "l":l_texte_max, "c":color_texte, "i":interligne},
|
||||
// 7
|
||||
{"t":"The tutorial is finished, you now know the basic interactions of this interface. (PRESS NEXT BUTTON)", "x": ecrans[15].x + marge_texte_x, "y": ecrans[15].y + marge_texte_y, "f":0.01, "l":l_texte_max, "c":color_texte, "i":50},
|
||||
{"t":"The tutorial is finished, you now know the basic interactions of this interface. (PRESS NEXT BUTTON)", "x": ecrans[15].x + marge_texte_x, "y": ecrans[15].y + marge_texte_y, "f":taille_texte_explication, "l":l_texte_max, "c":color_texte, "i":interligne},
|
||||
|
||||
]
|
||||
|
||||
@@ -217,19 +224,19 @@ function init_explication(){
|
||||
// [{"type":"a_regarder", "x": W_3D + (window.innerWidth-W_3D)/2.5 -5, "y": (H_3D/3.5)*0.6 + 100, "w":20 +10, "h": ((H_3D/3.5)*0.4 + 100+(20+ H_3D/3.5)*2 + 20) - ((H_3D/3.5)*0.6 + 100) , "c":color_clignotement,"a": alpha_clignotement, "t": temps_attente},
|
||||
// {"type":"a_cliquer", "x": positions_bouton[16].x, "y":positions_bouton[16].y, "w":positions_bouton[16].w, "h":positions_bouton[16].h, "c":color_clignotement,"a": alpha_clignotement, "t": temps_attente}
|
||||
// ],
|
||||
[{"type":"a_regarder", "x": W_3D + (window.innerWidth-W_3D)/2.5 -5, "y": (H_3D/3.5)*0.6 + 100, "w":20 +10, "h": 20 , "c":color_clignotement,"a": alpha_clignotement, "t": temps_attente},
|
||||
{"type":"a_regarder", "x": W_3D + (window.innerWidth-W_3D)/2.5 -5, "y": (H_3D/3.5)*0.6 + 100+(20+ H_3D/3.5), "w":20 +10, "h": 20 , "c":color_clignotement,"a": alpha_clignotement, "t": temps_attente},
|
||||
{"type":"a_regarder", "x": W_3D + (window.innerWidth-W_3D)/2.5 -5, "y": (H_3D/3.5)*0.4 + 100+(20+ H_3D/3.5), "w":20 +10, "h": 20 , "c":color_clignotement,"a": alpha_clignotement, "t": temps_attente},
|
||||
{"type":"a_regarder", "x": W_3D + (window.innerWidth-W_3D)/2.5 -5, "y": (H_3D/3.5)*0.4 + 100+(20+ H_3D/3.5)*2, "w":20 +10, "h": 20 , "c":color_clignotement,"a": alpha_clignotement, "t": temps_attente},
|
||||
[{"type":"a_regarder", "x": W_3D + (window.innerWidth-W_3D)/2 - 30 , "y": (H_3D/3.5)*0.35 + y0_recap + (10 + H_3D/3.5)*1, "w":20 , "h": 20 , "c":color_clignotement,"a": alpha_clignotement, "t": temps_attente},
|
||||
{"type":"a_regarder", "x": W_3D + (window.innerWidth-W_3D)/2 - 30 , "y": (H_3D/3.5)*0.35 + y0_recap + (10 + H_3D/3.5)*2, "w":20 , "h": 20 , "c":color_clignotement,"a": alpha_clignotement, "t": temps_attente},
|
||||
{"type":"a_regarder", "x": W_3D + (window.innerWidth-W_3D)/2 - 30 , "y": (H_3D/3.5)*0.65 + y0_recap + (10 + H_3D/3.5)*0, "w":20 , "h": 20 , "c":color_clignotement,"a": alpha_clignotement, "t": temps_attente},
|
||||
{"type":"a_regarder", "x": W_3D + (window.innerWidth-W_3D)/2 - 30 , "y": (H_3D/3.5)*0.65 + y0_recap + (10 + H_3D/3.5)*1, "w":20 , "h": 20 , "c":color_clignotement,"a": alpha_clignotement, "t": temps_attente},
|
||||
{"type":"a_cliquer", "x": positions_bouton[16].x, "y":positions_bouton[16].y, "w":positions_bouton[16].w, "h":positions_bouton[16].h, "c":color_clignotement,"a": alpha_clignotement, "t": temps_attente}
|
||||
],
|
||||
//6.3
|
||||
// [{"type":"a_regarder", "x": W_3D+ (window.innerWidth-W_3D)/2.5 + W_3D/3.5 +10 -5 , "y": (H_3D/3.5)*0.4 + 100, "w":20 +10, "h": ((H_3D/3.5)*0.4 + 100+(20+ H_3D/3.5)*2 + 20) - ((H_3D/3.5)*0.4 + 100) , "c":color_clignotement,"a": alpha_clignotement, "t": temps_attente},
|
||||
// {"type":"a_cliquer", "x": positions_bouton[17].x, "y":positions_bouton[17].y, "w":positions_bouton[17].w, "h":positions_bouton[17].h, "c":color_clignotement,"a": alpha_clignotement, "t": temps_attente}
|
||||
// ],
|
||||
[{"type":"a_regarder", "x": W_3D+ (window.innerWidth-W_3D)/2.5 + W_3D/3.5 +10 -5 , "y": (H_3D/3.5)*0.4 + 100, "w":20 +10, "h": 20 , "c":color_clignotement,"a": alpha_clignotement, "t": temps_attente},
|
||||
{"type":"a_regarder", "x": W_3D+ (window.innerWidth-W_3D)/2.5 + W_3D/3.5 +10 -5 , "y": (H_3D/3.5)*0.4 + 100 + (20+ H_3D/3.5), "w":20 +10, "h": 20 , "c":color_clignotement,"a": alpha_clignotement, "t": temps_attente},
|
||||
{"type":"a_regarder", "x": W_3D+ (window.innerWidth-W_3D)/2.5 + W_3D/3.5 +10 -5 , "y": (H_3D/3.5)*0.4 + 100 + (20+ H_3D/3.5)*2, "w":20 +10, "h": 20 , "c":color_clignotement,"a": alpha_clignotement, "t": temps_attente},
|
||||
[{"type":"a_regarder", "x": W_3D+ (window.innerWidth-W_3D)/2.5 + W_3D/3.5 +10 -5 , "y": (H_3D/3.5)*0.4 + y0_recap + (10 + H_3D/3.5)*0, "w":20 +10, "h": 20 , "c":color_clignotement,"a": alpha_clignotement, "t": temps_attente},
|
||||
{"type":"a_regarder", "x": W_3D+ (window.innerWidth-W_3D)/2.5 + W_3D/3.5 +10 -5 , "y": (H_3D/3.5)*0.4 + y0_recap + (10 + H_3D/3.5)*1, "w":20 +10, "h": 20 , "c":color_clignotement,"a": alpha_clignotement, "t": temps_attente},
|
||||
{"type":"a_regarder", "x": W_3D+ (window.innerWidth-W_3D)/2.5 + W_3D/3.5 +10 -5 , "y": (H_3D/3.5)*0.4 + y0_recap + (10 + H_3D/3.5)*2, "w":20 +10, "h": 20 , "c":color_clignotement,"a": alpha_clignotement, "t": temps_attente},
|
||||
{"type":"a_cliquer", "x": positions_bouton[17].x, "y":positions_bouton[17].y, "w":positions_bouton[17].w, "h":positions_bouton[17].h, "c":color_clignotement,"a": alpha_clignotement, "t": temps_attente}
|
||||
],
|
||||
//6.4 remove
|
||||
@@ -354,8 +361,8 @@ function traitement_explications(idx_i_explication, idx_j_explication){
|
||||
condition_suivant = conditions_suivant[num_action]
|
||||
// ecran blanc
|
||||
afficher_ecran(ecran.x, ecran.y, ecran.w, ecran.h, ecran.c, ecran.a )
|
||||
print_text(handle_text(texte.t, texte.x, texte.y, texte.f*font_texte +"pt Courier", texte.l, texte.c, texte.i))
|
||||
print_text(handle_text("Guidelines to follow:", ecran.x +marge_texte_x, ecran.y+52, 0.016*font_texte +"pt Courier", texte.l, "#EF476F", texte.i))
|
||||
print_text(handle_text(texte.t, texte.x, texte.y, texte.f+"pt Courier", texte.l, texte.c, texte.i))
|
||||
print_text(handle_text("Guidelines to follow:", ecran.x +marge_texte_x, ecran.y + marge_texte_y/2, 1.5*taille_texte_explication+"pt Courier", texte.l, "#EF476F", texte.i))
|
||||
|
||||
// survol de tous les boutons
|
||||
if (num_action>0){
|
||||
@@ -447,13 +454,14 @@ function traitement_explications(idx_i_explication, idx_j_explication){
|
||||
// bouton commencer etude après les warnings
|
||||
function commencer_etude(){
|
||||
draw_rectangle(0,0,canvas.width, canvas.height, "rgb(3, 26, 33)", 1) // ou + clair 4, 38, 48
|
||||
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 = "Are you ready to start the study?"
|
||||
font = "40pt Courier"
|
||||
ctx.font = font
|
||||
largeur = ctx.measureText(texte).width
|
||||
ctx.fillText(texte, (window.innerWidth/2)- (largeur/2), 100)
|
||||
// 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
|
||||
titre = "Are you ready to start the study?"
|
||||
// font = "40pt Courier"
|
||||
// ctx.font = font
|
||||
// largeur = ctx.measureText(texte).width
|
||||
// ctx.fillText(texte, (window.innerWidth/2)- (largeur/2), 100)
|
||||
affichage_titre(titre, (0.018*window.innerWidth)+"pt Courier", "#EF476F")
|
||||
// affichager le bouton commencer
|
||||
afficher_bouton_commencer_explication()
|
||||
// si on appuie
|
||||
@@ -596,11 +604,14 @@ function survol_bouton_explication(){
|
||||
}
|
||||
|
||||
function afficher_bouton_commencer_explication(){
|
||||
w_bouton_commencer = scale_bouton_commencer*boutons["commencer_choix"].width
|
||||
h_bouton_commencer = scale_bouton_commencer*boutons["commencer_choix"].height
|
||||
h_bouton_explication2 = 0.1*window.innerHeight
|
||||
ratio_explication2 = h_bouton_explication2/boutons["commencer_choix"].height
|
||||
w_bouton_commencer = 2*ratio_explication2*boutons["commencer_choix"].width
|
||||
h_bouton_commencer = 2*h_bouton_explication2 //scale_bouton_commencer*boutons["commencer_tuto"].height
|
||||
x_bouton_commencer = (window.innerWidth/2)-(w_bouton_commencer/2)
|
||||
y_bouton_commencer = (window.innerHeight/2)-(h_bouton_commencer/2)
|
||||
|
||||
|
||||
// Bouton commencer
|
||||
ctx.drawImage(boutons["commencer_choix"], x_bouton_commencer, y_bouton_commencer , w_bouton_commencer, h_bouton_commencer)
|
||||
|
||||
@@ -619,14 +630,12 @@ function action_bouton_commencer_explication(){
|
||||
|
||||
function afficher_recap_inactif(){
|
||||
w_recap = window.innerWidth-W_3D
|
||||
// texte du haut
|
||||
//print_text(handle_text("Selected Viewpoints:", W_3D +(window.innerWidth-W_3D)/4, h_progress_bar + ecart_recap, "24pt Courier", 500))
|
||||
// fleche swap haut
|
||||
x_fleche_h = W_3D+ w_recap/2.5
|
||||
x_fleche_h = W_3D + w_recap/2 - 30
|
||||
w_fleche_h = 20
|
||||
h_fleche_h = 20
|
||||
// fleche swap bas
|
||||
x_fleche_b = W_3D+ w_recap/2.5
|
||||
x_fleche_b = W_3D + w_recap/2 - 30
|
||||
w_fleche_b = 20
|
||||
h_fleche_b = 20
|
||||
// croix
|
||||
@@ -636,16 +645,16 @@ function afficher_recap_inactif(){
|
||||
// pour chaque recap
|
||||
for (let i = 0 ; i < canvasMins.length; i++) {
|
||||
// Draw les images des contextes
|
||||
y_image = 100+(20+ H_3D/3.5)*i
|
||||
y_image = y0_recap + (10 + H_3D/3.5)*i
|
||||
ctx.drawImage(canvasMins[i],W_3D+ w_recap/2, y_image, H_3D/3.5, H_3D/3.5)
|
||||
//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
|
||||
y_fleche_h = (H_3D/3.5)*0.35 + y_image
|
||||
ctx.drawImage(imgs["haut"], x_fleche_h, y_fleche_h, w_fleche_h, h_fleche_h)
|
||||
}
|
||||
// Fleche pour Switch bas
|
||||
if (nb_choix_fait > 1 && i < nb_choix_fait-1) {
|
||||
y_fleche_b = (H_3D/3.5)*0.6 + y_image
|
||||
y_fleche_b = (H_3D/3.5)*0.65 + y_image
|
||||
ctx.drawImage(imgs["bas"], x_fleche_b, y_fleche_b, w_fleche_b, h_fleche_b)
|
||||
}
|
||||
// Croix
|
||||
@@ -655,4 +664,5 @@ function afficher_recap_inactif(){
|
||||
ctx.drawImage(imgs["croix"], x_croix, y_croix, w_croix, h_croix)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
+39
-29
@@ -1,35 +1,45 @@
|
||||
function affichage_texte_fin(M_fin, E_termine){
|
||||
ctx.strokeStyle = "rgb(255, 255, 255)"
|
||||
ctx.fillStyle = "rgb(255, 255, 255)"
|
||||
//Message de remerciement
|
||||
texte = "Done, thx you :)"
|
||||
font = "100pt Courier"
|
||||
ctx.font = font
|
||||
largeur = ctx.measureText(texte).width
|
||||
print_text(handle_text(texte, (window.innerWidth/2)-(largeur/2), 150, font, window.innerWidth, 1000, color="#FFFFFF"))
|
||||
function affichage_texte_fin(M_fin){
|
||||
// ctx.strokeStyle = "rgb(255, 255, 255)"
|
||||
// ctx.fillStyle = "rgb(255, 255, 255)"
|
||||
// //Message de remerciement
|
||||
// texte = "Done, thx you :)"
|
||||
// font = 0.05*window.innerWidth*"pt Courier"
|
||||
// ctx.font = font
|
||||
// largeur = ctx.measureText(texte).width
|
||||
// print_text(handle_text(texte, (window.innerWidth/2)-(largeur/2), 0.2*window.innerHeight, font, window.innerWidth, 1000, color="#FFFFFF"))
|
||||
|
||||
// Texte WAIT
|
||||
texte = "Please a moment"
|
||||
font = "70pt Courier"
|
||||
ctx.font = font
|
||||
largeur = ctx.measureText(texte).width
|
||||
print_text(handle_text(texte, (window.innerWidth/2)-(largeur/2), 350, font, window.innerWidth, 1000, color="#FFFFFF"))
|
||||
// // Texte WAIT
|
||||
// texte = "Please a moment"
|
||||
// font = 0.02*window.innerWidth*"pt Courier"
|
||||
// ctx.font = font
|
||||
// largeur = ctx.measureText(texte).width
|
||||
// print_text(handle_text(texte, (window.innerWidth/2)-(largeur/2), 0.35*window.innerHeight, font, window.innerWidth, 1000, color="#FFFFFF"))
|
||||
|
||||
ctx.strokeStyle = "rgb(239, 71, 111)"
|
||||
ctx.fillStyle = "rgb(239, 71, 111)"
|
||||
texte = " WAIT "
|
||||
largeur = ctx.measureText(texte).width
|
||||
print_text(handle_text(texte, (window.innerWidth/2)-(largeur/2), 350, font, window.innerWidth, 1000))
|
||||
// ctx.strokeStyle = "rgb(239, 71, 111)"
|
||||
// ctx.fillStyle = "rgb(239, 71, 111)"
|
||||
// texte = " WAIT "
|
||||
// largeur = ctx.measureText(texte).width
|
||||
// print_text(handle_text(texte, (window.innerWidth/2)-(largeur/2), 0.5*window.innerHeight, font, window.innerWidth, 1000))
|
||||
|
||||
// Texte d'envoie
|
||||
ctx.strokeStyle = "rgb(255, 255, 255)"
|
||||
ctx.fillStyle = "rgb(255, 255, 255)"
|
||||
if (!E_termine){
|
||||
print_text(handle_text(M_fin, (window.innerWidth/2)-450, innerHeight/2 +100, "26pt Courier", 1000))
|
||||
}
|
||||
else {
|
||||
print_text(handle_text(M_fin, (window.innerWidth/2)-450, innerHeight/2 +200, "26pt Courier", 1000))
|
||||
}
|
||||
// // Texte d'envoie
|
||||
// ctx.strokeStyle = "rgb(255, 255, 255)"
|
||||
// ctx.fillStyle = "rgb(255, 255, 255)"
|
||||
// print_text(handle_text(M_fin, (window.innerWidth/2)-450, innerHeight/2 +100, "26pt Courier", 1000))
|
||||
|
||||
titre = "Done, thx you :)"
|
||||
affichage_titre(titre, (0.05*window.innerWidth)+"pt Courier", "#FFFFFF", yt=0.15*window.innerHeight)
|
||||
|
||||
titre = "Please a moment"
|
||||
affichage_titre(titre, (0.05*window.innerWidth)+"pt Courier", "#FFFFFF", yt=0.35*window.innerHeight)
|
||||
|
||||
titre = " WAIT "
|
||||
affichage_titre(titre, (0.05*window.innerWidth)+"pt Courier", "#EF476F", yt=0.35*window.innerHeight)
|
||||
|
||||
affichage_titre(M_fin, (0.02*window.innerWidth)+"pt Courier", "#FFFFFF", yt=0.6*window.innerHeight)
|
||||
|
||||
}
|
||||
|
||||
function update_texte_fin(M_fin){
|
||||
affichage_titre(M_fin, (0.02*window.innerWidth)+"pt Courier", "#FFFFFF", yt=0.7*window.innerHeight)
|
||||
|
||||
}
|
||||
@@ -1,26 +1,31 @@
|
||||
scale_bouton_commencer = 1
|
||||
scale_bouton_suivant = 0.6
|
||||
|
||||
h_bouton_inscription = 0.1*window.innerHeight
|
||||
taille_titre_insription = (0.018*window.innerWidth)
|
||||
taille_texte_inscription = (0.015*window.innerWidth)
|
||||
|
||||
function affichage_inscription(){
|
||||
// Texte
|
||||
draw_rectangle(0,0,canvas.width, canvas.height, "rgb(3, 26, 33)", 1) // ou + clair 4, 38, 48
|
||||
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 = "Give me your personal information"
|
||||
font = "58pt Courier"
|
||||
ctx.font = font
|
||||
largeur = ctx.measureText(texte).width
|
||||
ctx.fillText(texte, (window.innerWidth/2)- (largeur/2), 100)
|
||||
// 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 = "Give me your personal information"
|
||||
// font = "58pt Courier"
|
||||
// ctx.font = font
|
||||
// largeur = ctx.measureText(texte).width
|
||||
// ctx.fillText(texte, (window.innerWidth/2)- (largeur/2), 100)
|
||||
titre = "Personal Information"
|
||||
affichage_titre(titre, taille_titre_insription+"pt Courier", "#EF476F")
|
||||
|
||||
// Pour les zones de textes
|
||||
ctx.strokeStyle = "rgb(255, 255, 255)"
|
||||
ctx.fillStyle = "rgb(255, 255, 255)"
|
||||
ctx.font = "28pt Courier"
|
||||
ctx.font = taille_texte_inscription+"pt Courier"
|
||||
ctx.fillText("Firstname:", x_texte_zone, parseInt(document.getElementById("Firstname").style.top) -12)
|
||||
ctx.fillText("Name:", x_texte_zone, parseInt(document.getElementById("Name").style.top) - 12)
|
||||
ctx.fillText("Age:", x_texte_zone, parseInt(document.getElementById("Age").style.top) - 12)
|
||||
ctx.fillText("Gender:", parseInt(document.getElementById("SexeM").style.left), parseInt(document.getElementById("SexeM").style.top) - 22)
|
||||
ctx.font = "24pt Courier"
|
||||
ctx.fillText("Male", parseInt(document.getElementById("SexeM").style.left)+40, parseInt(document.getElementById("SexeM").style.top)+24)
|
||||
ctx.fillText("Female", parseInt(document.getElementById("SexeF").style.left)+40, parseInt(document.getElementById("SexeM").style.top)+24)
|
||||
ctx.fillText("None of these above", parseInt(document.getElementById("SexeA").style.left)+40, parseInt(document.getElementById("SexeA").style.top)+24)
|
||||
@@ -30,10 +35,10 @@ function affichage_inscription(){
|
||||
/// BOUTON COMMENCER INSCRIPTION (POUUR ALLER VERS LE TUTO)
|
||||
|
||||
function afficher_bouton_commencer_inscription(){
|
||||
w_bouton_commencer = scale_bouton_commencer*boutons["commencer_tuto"].width
|
||||
h_bouton_commencer = scale_bouton_commencer*boutons["commencer_tuto"].height
|
||||
w_bouton_commencer = 2*ratio_inscription*boutons["commencer_tuto"].width
|
||||
h_bouton_commencer = 2*h_bouton_inscription //scale_bouton_commencer*boutons["commencer_tuto"].height
|
||||
x_bouton_commencer = (window.innerWidth/2)-(w_bouton_commencer/2)
|
||||
y_bouton_commencer = (window.innerHeight/2)-(h_bouton_commencer/2)
|
||||
y_bouton_commencer = (window.innerHeight/2)-(h_bouton_commencer/2)
|
||||
|
||||
// Bouton commencer
|
||||
ctx.drawImage(boutons["commencer_tuto"], x_bouton_commencer, y_bouton_commencer , w_bouton_commencer, h_bouton_commencer)
|
||||
@@ -58,8 +63,8 @@ function action_bouton_commencer_inscription(){
|
||||
/// BOUTON COMMENCER SKIP (POUUR ALLER VERS LE TUTO)
|
||||
|
||||
function afficher_bouton_skip_inscription(){
|
||||
w_bouton_skip = scale_bouton_commencer*boutons["skip"].width
|
||||
h_bouton_skip = scale_bouton_commencer*boutons["skip"].height
|
||||
w_bouton_skip = w_bouton_commencer
|
||||
h_bouton_skip = h_bouton_commencer
|
||||
x_bouton_skip = (window.innerWidth/2)-(w_bouton_skip/2)
|
||||
y_bouton_skip = (window.innerHeight/2) + (h_bouton_skip/2) + 20
|
||||
|
||||
@@ -85,8 +90,9 @@ function action_bouton_skip_inscription(){
|
||||
//////////////////////////////////////////////////////////////
|
||||
/// BOUTON SUIVANT INSCRIPTION
|
||||
function afficher_bouton_suivant_inscription(){
|
||||
w_bouton_suivant = scale_bouton_suivant*boutons["suivant_grand"].width
|
||||
h_bouton_suivant = scale_bouton_suivant*boutons["suivant_grand"].height
|
||||
ratio_inscription = h_bouton_inscription/boutons["suivant_grand"].height
|
||||
w_bouton_suivant = ratio_inscription*boutons["suivant_grand"].width
|
||||
h_bouton_suivant = h_bouton_inscription
|
||||
x_bouton_suivant = (window.innerWidth/2)-(w_bouton_suivant/2)
|
||||
y_bouton_suivant = innerHeight*0.75
|
||||
// Bouton commencer
|
||||
@@ -132,13 +138,14 @@ function value_non_vide(V){
|
||||
|
||||
function afficher_champs_inscription() {
|
||||
inscription_finie = false
|
||||
w_text_zone = 30
|
||||
h_text_zone = 42
|
||||
w_text_zone = 0.025*window.innerWidth
|
||||
h_text_zone = 0.05*window.innerHeight
|
||||
nb_caract_min = 1
|
||||
nb_caract_max = 30
|
||||
x_texte_zone = (window.innerWidth/3)
|
||||
y_texte_zone = 200
|
||||
ecart_texte_zone = 120
|
||||
x_texte_zone = (window.innerWidth/4)
|
||||
y_texte_zone = 0.20*window.innerHeight
|
||||
ecart_texte_zone = 0.15*window.innerHeight
|
||||
|
||||
|
||||
// Zone de texte : Firstname
|
||||
var input = document.createElement('input');
|
||||
@@ -152,7 +159,7 @@ function afficher_champs_inscription() {
|
||||
input.style.top = y_texte_zone+'px';
|
||||
input.style.textAlign = 'left'
|
||||
input.style.height = h_text_zone
|
||||
input.style.font = "24pt Courier"
|
||||
input.style.font = taille_texte_inscription+"pt Courier"
|
||||
document.body.appendChild(input);
|
||||
input.focus();
|
||||
|
||||
@@ -169,7 +176,7 @@ function afficher_champs_inscription() {
|
||||
input2.style.top = ecart_texte_zone+y_texte_zone+'px';
|
||||
input2.style.textAlign = 'left'
|
||||
input2.style.height = h_text_zone
|
||||
input2.style.font = "24pt Courier"
|
||||
input2.style.font = taille_texte_inscription+"pt Courier"
|
||||
document.body.appendChild(input2);
|
||||
input2.focus();
|
||||
|
||||
@@ -186,7 +193,7 @@ function afficher_champs_inscription() {
|
||||
input3.style.top = 2*ecart_texte_zone + y_texte_zone+'px';
|
||||
input3.style.textAlign = 'left'
|
||||
input3.style.height = h_text_zone
|
||||
input3.style.font = "24pt Courier"
|
||||
input3.style.font = taille_texte_inscription+"pt Courier"
|
||||
document.body.appendChild(input3);
|
||||
input3.focus();
|
||||
|
||||
@@ -212,7 +219,7 @@ function afficher_champs_inscription() {
|
||||
//input4.size = w_text_zone
|
||||
// style
|
||||
input5.style.position = 'fixed';
|
||||
input5.style.left = 200 + x_texte_zone+'px';
|
||||
input5.style.left = window.innerWidth*0.1 + x_texte_zone+'px';
|
||||
input5.style.top = 3*ecart_texte_zone + y_texte_zone+'px';
|
||||
input5.style.height = 20
|
||||
input5.style.width = 20
|
||||
@@ -226,7 +233,7 @@ function afficher_champs_inscription() {
|
||||
//input4.size = w_text_zone
|
||||
// style
|
||||
input6.style.position = 'fixed';
|
||||
input6.style.left = 400 + x_texte_zone+'px';
|
||||
input6.style.left = window.innerWidth*0.22 + x_texte_zone+'px';
|
||||
input6.style.top = 3*ecart_texte_zone + y_texte_zone+'px';
|
||||
input6.style.height = 20
|
||||
input6.style.width = 20
|
||||
@@ -272,19 +279,18 @@ function traitement_inscription(){
|
||||
}
|
||||
// les champs sont remplie et on a appuyé sur le bouton next
|
||||
} else {
|
||||
draw_rectangle(0,0,canvas.width, canvas.height, "rgb(3, 26, 33)", 1)
|
||||
texte = "Are you ready to start the tutorial to learn"
|
||||
texte2 = "how to use the interface of the study?"
|
||||
font = "40pt Courier"
|
||||
ctx.strokeStyle = "rgb(255, 255, 255)" // Pour que le contour soit rouge
|
||||
ctx.fillStyle = "rgb(255, 255, 255)"
|
||||
ctx.font = font
|
||||
ctx.strokeStyle = "#EF476F"
|
||||
ctx.fillStyle = "#EF476F"
|
||||
ctx.font = taille_titre_insription+"pt Courier"
|
||||
largeur = ctx.measureText(texte).width
|
||||
largeur2 = ctx.measureText(texte2).width
|
||||
ctx.fillText(texte, (window.innerWidth/2)- (largeur/2), 100)
|
||||
ctx.fillText(texte2, (window.innerWidth/2)- (largeur2/2), 160)
|
||||
//print_text(handle_text(texte, (window.innerWidth/2) - (window.innerWidth/2)/2, (window.innerHeight/4), font, (window.innerWidth/2), color="#FFFFFF", interligne=50))
|
||||
ctx.fillText(texte, (window.innerWidth/2)- (largeur/2), 0.10*window.innerHeight)
|
||||
ctx.fillText(texte2, (window.innerWidth/2)- (largeur2/2), 0.16*window.innerHeight)
|
||||
|
||||
// affichager le bouton commencer tutorial
|
||||
draw_rectangle(0,canvas.height/2,canvas.width, canvas.height/2, "rgb(3, 26, 33)", 1)
|
||||
afficher_bouton_commencer_inscription()
|
||||
// affichager le bouton skipi
|
||||
afficher_bouton_skip_inscription()
|
||||
|
||||
@@ -80,6 +80,15 @@ function print_text(dialogue, c= true) {
|
||||
|
||||
}
|
||||
|
||||
function affichage_titre(titre, font, color, yt = 0.08*window.innerHeight){
|
||||
ctx.strokeStyle =color
|
||||
ctx.fillStyle =color
|
||||
ctx.font = font
|
||||
largeur = ctx.measureText(titre).width
|
||||
// au milieu
|
||||
ctx.fillText(titre, (window.innerWidth/2)- (largeur/2), yt)
|
||||
}
|
||||
|
||||
function handle_text(dialogue, x_start, y_start, font, l_max, color="#FFFFFF", interligne=40) {
|
||||
let s = dialogue
|
||||
|
||||
@@ -133,7 +142,7 @@ function handle_text(dialogue, x_start, y_start, font, l_max, color="#FFFFFF", i
|
||||
}
|
||||
|
||||
|
||||
function progress_bar(N_tache, N_mesh){
|
||||
function progress_bar(N_tache, N_mesh, font = (0.01*window.innerWidth)){
|
||||
if (N_tache<=N_mesh){
|
||||
// background
|
||||
draw_rectangle(x_progress_bar, y_progress_bar, w_progress_bar, h_progress_bar, "rgb(255,255,255)", 1)
|
||||
@@ -143,7 +152,7 @@ function progress_bar(N_tache, N_mesh){
|
||||
// // numero de tache
|
||||
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.font = font+"pt Courier";
|
||||
ctx.fillText((N_tache)+"/"+(N_mesh), x_progress_bar+w_progress_bar+10, h_progress_bar)
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
scale_bouton_commencer_warning = 0.6
|
||||
//scale_bouton_commencer_warning = 0.6
|
||||
h_bouton_warning = 0.1*window.innerHeight
|
||||
num_warning = 0
|
||||
|
||||
|
||||
@@ -7,18 +8,18 @@ function affichage_texte_warning(texte, font, color, xt, yt, l_max_texte){
|
||||
ctx.strokeStyle = color // Pour que le contour soit rouge
|
||||
ctx.fillStyle = color // Pour que l'intérieur soit bleu
|
||||
ctx.font = font
|
||||
print_text(handle_text(texte, xt, yt, font, l_max_texte), false)
|
||||
print_text(handle_text(texte, xt, yt, font, l_max_texte, color="#FFFFFF", interligne=0.045*window.innerHeight), false)
|
||||
|
||||
}
|
||||
|
||||
function affichage_titre_warning(titre, font, color, yt){
|
||||
ctx.strokeStyle =color
|
||||
ctx.fillStyle =color
|
||||
ctx.font = font
|
||||
largeur = ctx.measureText(titre).width
|
||||
// au milieu
|
||||
ctx.fillText(titre, (window.innerWidth/2)- (largeur/2), yt)
|
||||
}
|
||||
// function affichage_titre_warning(titre, font, color, yt){
|
||||
// ctx.strokeStyle =color
|
||||
// ctx.fillStyle =color
|
||||
// ctx.font = font
|
||||
// largeur = ctx.measureText(titre).width
|
||||
// // au milieu
|
||||
// ctx.fillText(titre, (window.innerWidth/2)- (largeur/2), yt)
|
||||
// }
|
||||
|
||||
////////////////////////////////////////////////////////////////////
|
||||
///// BOUTON COMMENCER
|
||||
@@ -60,8 +61,9 @@ function action_bouton_avant_warning(){
|
||||
}
|
||||
|
||||
function afficher_bouton_suivant_warning(){
|
||||
w_bouton_suivant = scale_bouton_commencer_warning*boutons["suivant"].width
|
||||
h_bouton_suivant = scale_bouton_commencer_warning*boutons["suivant"].height
|
||||
ratio_bouton_warning = h_bouton_warning/boutons["suivant"].height
|
||||
w_bouton_suivant = ratio_bouton_warning*boutons["suivant"].width
|
||||
h_bouton_suivant = h_bouton_contexte
|
||||
x_bouton_suivant = (window.innerWidth/2)+ 5
|
||||
y_bouton_suivant = window.innerHeight - h_bouton_suivant - 20
|
||||
// Bouton commencer
|
||||
@@ -94,12 +96,12 @@ function traitement_warnings(){
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height)
|
||||
draw_rectangle(0,0,canvas.width, canvas.height, "rgb(3, 26, 33)", 1) // ou + clair 4, 38, 48
|
||||
// variable position
|
||||
x_texte = window.innerWidth*(1/8)
|
||||
w_texte = window.innerWidth*(6/8)
|
||||
x_texte = window.innerWidth*(1/10)
|
||||
w_texte = window.innerWidth*(8/10)
|
||||
font_texte = (0.012*window.innerWidth)+"pt Courier"
|
||||
|
||||
|
||||
// titre commun à chaque page
|
||||
affichage_titre_warning(titre, (0.018*window.innerWidth)+"pt Courier", "#EF476F", y_titre)
|
||||
affichage_titre(titre, (0.018*window.innerWidth)+"pt Courier", "#EF476F")
|
||||
// affichage texte
|
||||
for(let p=0; p<warnings_a_afficher.length; p++){
|
||||
dict_texte = warnings_a_afficher[p]
|
||||
|
||||
Reference in New Issue
Block a user