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

debut page contexte

This commit is contained in:
mpelissi 2023-03-04 17:17:07 +01:00
parent 2382fa8043
commit 222b8be864
6 changed files with 97 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
html/index3D.html
View File

@ -29,6 +29,7 @@
<script src="/static/OBJLoader2.js"></script>
<script src="/static/OrbitControls.js"></script>
<script src="/static/fonctions_utiles.js"></script>
<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_analyse.js"></script>

9
outputs/75a6b5b2-53f8-4983-9a87-19396e44412c.json Normal file
View File

@ -0,0 +1,9 @@
{
"Analyse": {},
"Interactions": [
{
"time": 1677945148136,
"type": "start"
}
]
}

9
outputs/8eaf6ec8-2a85-485b-879b-a8bf26507adb.json Normal file
View File

@ -0,0 +1,9 @@
{
"Analyse": {},
"Interactions": [
{
"time": 1677945150050,
"type": "start"
}
]
}

31
static/fonctions_contexte.js Normal file
View File

@ -0,0 +1,31 @@
function affichage_texte_contexte(){
// 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 = "Hi, I'm Marie, do you want to participate in my study?"
// font = "58pt Courier"
// ctx.font = font
// largeur = ctx.measureText(texte).width
// ctx.fillText(texte, (window.innerWidth/2)- (largeur/2), 100)
print_text(handle_text(texte, (window.innerWidth/4), 100, "36pt Courier", (window.innerWidth/2)))
ctx.drawImage(imgs['marie'], (window.innerWidth/3), (window.innerHeight/4), imgs['marie'].width*0.7, imgs['marie'].height*0.7 )
}
function action_bouton_commencer_contexte(){
page_contexte = false
page_inscription = true
interactions.push({"time": new Date().getTime(), "type": "bouton commencer de contexte"+s})
}
function traitement_contexte(){
affichage_texte_contexte()
afficher_bouton_commencer() // meme bouton que la page inscription
if (clicked && click_inside(xyMouseDown, x_bouton_commencer, y_bouton_commencer , w_bouton_commencer, h_bouton_commencer)){
// on passe aux choix
action_bouton_commencer_contexte()
}
}

27
static/fonctions_inscription.js
View File

@ -5,7 +5,7 @@ function affichage_inscription(){
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 ??????"
texte = "Give me your personal information"
font = "58pt Courier"
ctx.font = font
largeur = ctx.measureText(texte).width
@ -15,14 +15,13 @@ function affichage_inscription(){
ctx.strokeStyle = "rgb(255, 255, 255)"
ctx.fillStyle = "rgb(255, 255, 255)"
ctx.font = "28pt Courier"
ctx.fillText("Firstname:", x_texte_zone, parseInt(document.getElementById("Firstname").style.top) -10)
ctx.fillText("Name:", x_texte_zone, parseInt(document.getElementById("Name").style.top) - 10)
ctx.fillText("Age:", x_texte_zone, parseInt(document.getElementById("Age").style.top) - 10)
ctx.fillText("Sexe:", parseInt(document.getElementById("SexeM").style.left), parseInt(document.getElementById("SexeM").style.top) - 10)
ctx.fillText("Sexe:", parseInt(document.getElementById("SexeM").style.left), parseInt(document.getElementById("SexeM").style.top) - 10)
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("Sexe:", 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)+34)
ctx.fillText("Female", parseInt(document.getElementById("SexeF").style.left)+40, parseInt(document.getElementById("SexeM").style.top)+34)
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)
}
@ -43,7 +42,7 @@ function afficher_bouton_commencer(){
function action_bouton_commencer(s){
page_inscription = false
page_vues = true
interactions.push({"time": new Date().getTime(), "type": "bouton commencer"+s})
interactions.push({"time": new Date().getTime(), "type": "bouton commencer d'inscription"+s})
}
@ -142,8 +141,9 @@ function afficher_champs_inscription() {
// style
input4.style.position = 'fixed';
input4.style.left = x_texte_zone + 250;
input4.style.top = 2*ecart_texte_zone + y_texte_zone+'px';
input4.style.height = h_text_zone
input4.style.top = 10+ 2*ecart_texte_zone + y_texte_zone+'px';
input4.style.height = 20
input4.style.width = 20
document.body.appendChild(input4);
input4.focus();
@ -155,8 +155,9 @@ function afficher_champs_inscription() {
// style
input5.style.position = 'fixed';
input5.style.left = x_texte_zone + 400;
input5.style.top = 2*ecart_texte_zone + y_texte_zone+'px';
input5.style.height = h_text_zone
input5.style.top = 10 + 2*ecart_texte_zone + y_texte_zone+'px';
input5.style.height = 20
input5.style.width = 20
document.body.appendChild(input5);
input5.focus();

37
static/interface3D.js
View File

@ -80,7 +80,8 @@ function init_variable(premier_appel){
R = 2.5
// Enchainement des pages
page_inscription = true // true
page_contexte = true
page_inscription = false // true
page_vues = false // false
page_analyse = false
@ -89,6 +90,7 @@ function init_variable(premier_appel){
all_canvasMins = {}
// pour initialiser les claviers à chaque page
premier_tour_page_contexte = true
premier_tour_page_inscription = true
premier_tour_page_vues = true
premier_tour_page_analyse = true
@ -223,6 +225,19 @@ function setUp_3D(idx_mesh){
////////////////////////////////////////
// CLAVIER
function action_clavier_contexte(event){
switch (event.key){
// selectionner pose
case ' ' :
action_bouton_commencer_contexte('clavier')
break;
// valider
case 'Enter':
action_bouton_commencer_contexte('clavier')
break;
}
}
function action_clavier_inscription(event){
switch (event.key){
// selectionner pose
@ -304,7 +319,9 @@ function action_clavier_analyse(event){
}
}
function init_clavier_contexte(){
document.addEventListener("keydown", action_clavier_contexte)
}
function init_clavier_inscription(){
document.addEventListener("keydown", action_clavier_inscription)
@ -335,7 +352,7 @@ function init_data(){
imgs["croix"] = new_image('https://raw.githubusercontent.com/PelissierCombescure/BVS-study/main/graphics/Choices/croix.png')
imgs["check"] = new_image('https://raw.githubusercontent.com/PelissierCombescure/BVS-study/main/graphics/Choices/check.png')
imgs["checkbox"] = new_image('https://raw.githubusercontent.com/PelissierCombescure/BVS-study/main/graphics/Choices/empty_checkbox.png')
// /// Boutons
imgs["marie"] = new_image('https://raw.githubusercontent.com/PelissierCombescure/User_study/main/Autres/marie.png')
boutons = {}
boutons["reinitialiser"] = new_image('https://raw.githubusercontent.com/PelissierCombescure/BVS-study/main/graphics/Boutons/bouton_reinitialiser.png')
boutons["valider"] = new_image('https://raw.githubusercontent.com/PelissierCombescure/BVS-study/main/graphics/Boutons/bouton_valider.png')
@ -363,8 +380,20 @@ function animate() {
// Temps à chaque animate
time_animate = new Date().getTime()
if (page_contexte){
//init touche clavier
if (premier_tour_page_contexte){
init_clavier_contexte()
premier_tour_page_contexte = false
}
traitement_contexte()
}
// page inscription
if (page_inscription){
// on enlève les touches du clavier associé à la page inscription
document.removeEventListener("keydown", init_clavier_contexte)
//init touche clavier
if (premier_tour_page_inscription){
init_clavier_inscription()
afficher_champs_inscription()
@ -434,7 +463,7 @@ function animate() {
traitement_fin()
}
// page fin
if (!page_inscription && !page_vues && !page_analyse){
if (!page_contexte && !page_inscription && !page_vues && !page_analyse){
// on enlève les touches du clavier associé à la page vues
document.removeEventListener("keydown", action_clavier_analyse)
ctx.clearRect(0, 0, window.innerWidth, window.innerHeight)