From 88c82eec7e58998e3c71ac20f8ab1cd51dd74d80 Mon Sep 17 00:00:00 2001 From: Jan Dickmann Date: Mon, 17 Jun 2024 11:35:40 +0200 Subject: [PATCH 01/22] Initial Laptop commit --- .gitignore | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/.gitignore b/.gitignore index 96fca6d..6178e7c 100644 --- a/.gitignore +++ b/.gitignore @@ -11,4 +11,6 @@ htmlcov/ dist/ build/ -*.egg-info/ \ No newline at end of file +*.egg-info/ + +*.code-workspace \ No newline at end of file From 46a8b2244fc653e77691434a8f6b667436d9688a Mon Sep 17 00:00:00 2001 From: Jan Dickmann Date: Mon, 17 Jun 2024 17:24:15 +0200 Subject: [PATCH 02/22] CSS improvements and small fixes --- slaeforms/default.json | 148 ++++++------ slaeforms/static/oldstyle.css | 247 +++++++++++++++++++++ slaeforms/static/styles.css | 191 +++++++++------- slaeforms/templates/standard_template.html | 112 +++++----- slaeforms/templates/startpage.html | 2 - slaeforms/templates/test_page0.html | 2 - slaeforms/templates/test_page1.html | 2 - slaeforms/templates/teststartpage.html | 21 +- 8 files changed, 508 insertions(+), 217 deletions(-) create mode 100644 slaeforms/static/oldstyle.css diff --git a/slaeforms/default.json b/slaeforms/default.json index 44db713..1a4db5f 100644 --- a/slaeforms/default.json +++ b/slaeforms/default.json @@ -1,78 +1,4 @@ { - "Block 4":{ - "type": "TaskTemplate", - "tempalte": "standard_template.html", - "number_of_pages":"3", - "stimuli":{ - "type":"single_video", - "order": "random", - "list":{ - "video_1":"https://www.youtube-nocookie.com/embed/VtnwHmabyzo?si=H3rrG-GHtlSymR70", - "video_2":"https://www.youtube-nocookie.com/embed/EL76Ok4r0aQ?si=hqUm8eUUfX39NN4L", - "video_3":"https://www.youtube-nocookie.com/embed/XTMIomsXxKM?si=r2zB6OKERH6Jdpi6" - }, - "configuration":{ - "embed":"yt" - } - }, - "questions":{ - "question1":{ - "type": "likert", - "name": "likertscale", - "text": "How would you rate this video?", - "required": "true", - "points":{ - "p1":{ - "value":"1", - "text":"I dont like it at all" - }, - "p2":{ - "value":"2", - "text":"I dont like it" - }, - "p3":{ - "value":"3", - "text":"I am indifferent" - }, - "p4":{ - "value":"4", - "text":"I like it" - }, - "p5":{ - "value":"5", - "text":"I like it a lot" - } - } - }, - "question2":{ - "type": "textinput", - "name": "text_feedback", - "text": "Here you can give us Feedback", - "required": "false", - "size": "250" - }, - "question3":{ - "type": "videoinput", - "text": "Here you can give us Feedback as video", - "name": "video_feedback", - "required": "false" - } - }, - "database_table" :{ - "table_name": "default_block3_test", - "fields": { - "likertscale":{ - "type": "integer", - "nullable": "false" - }, - "text_feedback":{ - "type": "string", - "size": "250", - "nullable": "true" - } - } - } - }, "Block 3":{ "type": "TaskTemplate", "tempalte": "standard_template.html", @@ -209,6 +135,80 @@ } } }, + "Block 4":{ + "type": "TaskTemplate", + "tempalte": "standard_template.html", + "number_of_pages":"3", + "stimuli":{ + "type":"single_video", + "order": "random", + "list":{ + "video_1":"https://www.youtube-nocookie.com/embed/VtnwHmabyzo?si=H3rrG-GHtlSymR70", + "video_2":"https://www.youtube-nocookie.com/embed/EL76Ok4r0aQ?si=hqUm8eUUfX39NN4L", + "video_3":"https://www.youtube-nocookie.com/embed/XTMIomsXxKM?si=r2zB6OKERH6Jdpi6" + }, + "configuration":{ + "embed":"yt" + } + }, + "questions":{ + "question1":{ + "type": "likert", + "name": "likertscale", + "text": "How would you rate this video?", + "required": "true", + "points":{ + "p1":{ + "value":"1", + "text":"I dont like it at all" + }, + "p2":{ + "value":"2", + "text":"I dont like it" + }, + "p3":{ + "value":"3", + "text":"I am indifferent" + }, + "p4":{ + "value":"4", + "text":"I like it" + }, + "p5":{ + "value":"5", + "text":"I like it a lot" + } + } + }, + "question2":{ + "type": "textinput", + "name": "text_feedback", + "text": "Here you can give us Feedback", + "required": "false", + "size": "250" + }, + "question3":{ + "type": "videoinput", + "text": "Here you can give us Feedback as video", + "name": "video_feedback", + "required": "false" + } + }, + "database_table" :{ + "table_name": "default_block3_test", + "fields": { + "likertscale":{ + "type": "integer", + "nullable": "false" + }, + "text_feedback":{ + "type": "string", + "size": "250", + "nullable": "true" + } + } + } + }, "Block_1":{ "type": "SinglePage", "template": "test_page0.html" diff --git a/slaeforms/static/oldstyle.css b/slaeforms/static/oldstyle.css new file mode 100644 index 0000000..747478e --- /dev/null +++ b/slaeforms/static/oldstyle.css @@ -0,0 +1,247 @@ +html { + height: 100%; +} + +body { + width: 100%; + height: 100hv; + margin: 0; + /*align-items: center; this will make the content a square, with edges up and bottom*/ + background-color: #a4b5ff; + color: #000000; + font-family: Tahoma; + font-size: 16px; +} + +.centercontent { + height: 100%; + display: flex; + justify-content: center; +} +.container { + height: 100%; + + width: 80%; /* You can adjust this width as needed */ + max-width: 1200px; /* Maximum width to keep it from getting too wide on large screens */ + padding: 20px; + background-color: #7b8cdb; /* Just for visual differentiation */ + box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); +} + +/* Form */ +form { + text-align: center; + display: flex; + flex-direction: column; + align-items: center; + +} + + +/* Helper */ +.spacer { + clear: both; + box-sizing: border-box; +} + + +/* buttons */ +.buttondisable { + filter: invert(65%); +} + +#submitbutton { + cursor: pointer; + padding: 10px 20px; /* Increased padding for a bigger button */ + font-size: 20px; /* Increased font size */ + border: none; /* Removes default border */ + border-radius: 8px; /* Optional: rounds the corners of the button */ +} +#submitbutton:hover { + background-color: #0056b3; /* Darker shade for hover effect */ +} +.button-container { + display: flex; + justify-content: flex-end; + margin-top: 20px; /* Adjust as needed for spacing */ +} + +.centertext { + text-align: center; +} + +h2,h3 { + text-align: center; +} + +.textarea-container { + display: flex; + flex-direction: column; + align-items: center; +} +.textarea-label{ + align-self: flex-start; /* Aligns the label to the start of the container */ +} + + +video { + max-width: 100%; + max-height: 100%; + width: auto; + height: auto; +} +.aspect-ratio-16-9 { + width: 100%; + aspect-ratio: 16 / 9; +} + +/* Video recording controls */ +.videocontrols { + width: 100px; /* Set a specific width for the buttons */ + height: 70px; /* Set a specific height for the buttons */ + background-color: #cae4ff; + border: none; + color: white; + padding: 10px 20px; + margin: 0 10px; + border-radius: 5px; + cursor: pointer; + transition: background-color 0.3s ease; + display: inline-flex; /* Display button contents as a flexbox */ + justify-content: center; /* Center contents horizontally */ + align-items: center; /* Center contents vertically */ + text-align: center; +} + +.videocontrols img { + max-width: 65%; + max-height: 65%; + text-align: center; + margin: auto; + width: auto; /* Make the image fill its container */ + height: auto; /* Make the image fill its container */ + display: block; /* Remove any extra space around the image */ +} + +.columncontainer { + display: flex; +} + +.columnleft { + width: 100%; + border: 3px solid black; +} +.columnright { + width: 100%; + border: 3px solid black; +} + +/* Video recording iframe */ + +iframe { + display:block; + margin: auto; +} + +.video-container { + position: relative; + padding-bottom: 56.25%; /* 16:9 aspect ratio */ + height: 0; + overflow: hidden; + max-width: 100%; + background: #000; +} + +.video-container iframe { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; +} + + + + +/* Likert stuff */ +.likert { + --likert-rows: 5; + margin: auto; + text-align: center; + display: inline-grid; + max-width: 900px; + grid-auto-rows: 1fr; + gap: 1em; + grid-template-columns: repeat(var(--likert-rows), minmax(0, 1fr)); +} + +@media only screen and (max-width: 680px) { + .likert { + grid-template-columns: minmax(0, 400px); + justify-content: center; + } +} + +input, label { + display: block; + margin: 0.5rem 0; + } + +.likert input { + max-width: 250px; + position: fixed; + opacity: 0; + pointer-events: none; +} + +.likercontainer{ + margin: 30px auto; + text-align: center; +} +.likert span { + border-radius: 5px; + display: flex; + justify-content: center; + align-items: center; + text-align: center; + box-sizing: border-box; + width: 100%; + height: 100%; + padding: 20px; + background: #dcdcdc; + transition: background .2s ease-in-out; +} + +.likert input:checked + span { + outline: black auto 1px; + background: transparent; +} + +.likert input:focus + span { + outline: auto 1px; /*-webkit-focus-ring-color*/ +} + +.likert span:hover { + background: #f1f1f1; + outline: lightgrey auto 0.5px; +} + + +/* Table display stuff */ +table { + border-collapse: collapse; + margin: 20px 0; + table-layout: auto; /* Allows columns to adjust to their content */ + width: auto; /* Adjusts the table width to the content */ +} + +th, td { + border: 1px solid #dddddd; + text-align: left; + padding: 8px; + word-wrap: break-word; /* Ensures content wraps and doesn't overflow */ +} + +th { + background-color: #f2f2f2; +} \ No newline at end of file diff --git a/slaeforms/static/styles.css b/slaeforms/static/styles.css index acc8973..2b089c9 100644 --- a/slaeforms/static/styles.css +++ b/slaeforms/static/styles.css @@ -1,81 +1,129 @@ -html { - height: 100%; -} + body { - width: 100%; - height: 100%; margin: 0; - /*align-items: center; this will make the content a square, with edges up and bottom*/ background-color: #a4b5ff; color: #000000; font-family: Tahoma; font-size: 16px; } -.centercontent { - height: 100%; - display: flex; - justify-content: center; -} .container { - height: 100%; - - width: 80%; /* You can adjust this width as needed */ + margin: 0 auto; + /* height: 100vh;*/ + width: 60vw; /* You can adjust this width as needed */ max-width: 1200px; /* Maximum width to keep it from getting too wide on large screens */ padding: 20px; background-color: #7b8cdb; /* Just for visual differentiation */ box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); } - - -.spacer { - clear: both; - box-sizing: border-box; +.textblock { + width: 60%; + display: flex; + margin: auto; + text-align: left; } +/* Form */ +form { + min-width: 300px; + margin: 0 auto; + padding-bottom: 2em; +} + + +.dsgvoform { + text-align: right; + width: 60%; +} + +label { + display: block; + margin-top: 1.5rem; + margin-bottom: 1.5rem; +} + +input, +textarea, +select { + margin: 10px 0 0 0; + width: 60%; + min-height: 2em; + display: block; +} + +.button-container input { + display: block; + width: 100%; + margin-top: 30px; /* Adjust as needed for spacing */ + margin-right: 0; + margin-left: auto; +} +.button-container { + margin: 0 auto; + width: 60%; +} + +/* buttons */ .buttondisable { filter: invert(65%); } #submitbutton { cursor: pointer; - padding: 10px 20px; /* Increased padding for a bigger button */ - font-size: 20px; /* Increased font size */ + padding: 12px 24px; /* Increased padding for a bigger button */ + font-size: 25px; /* Increased font size */ border: none; /* Removes default border */ border-radius: 8px; /* Optional: rounds the corners of the button */ + width: auto; } #submitbutton:hover { background-color: #0056b3; /* Darker shade for hover effect */ } -.button-container { - display: flex; - justify-content: flex-end; - margin-top: 20px; /* Adjust as needed for spacing */ -} + .textarea-container { - display: flex; - flex-direction: column; - align-items: center; + margin: auto; + width: 60%; } +.textarea-container textarea{ + width: 100%; + margin: 1.5rem auto; +} + .textarea-label{ align-self: flex-start; /* Aligns the label to the start of the container */ } - -video { - max-width: 100%; - max-height: 100%; - width: auto; - height: auto; +/* Helper */ +.spacer { + clear: both; + box-sizing: border-box; } -.aspect-ratio-16-9 { - width: 100%; - aspect-ratio: 16 / 9; + +.centertext { + text-align: center; +} + +h2,h3 { + text-align: center; +} + +.inline { + display: inline; + width: unset; + margin: 0 0.5em 0 0; + vertical-align: middle; } +.compressWidth { + width: 60%; + margin: 0 auto; +} + + +/* Video recording controls */ .videocontrols { width: 100px; /* Set a specific width for the buttons */ height: 70px; /* Set a specific height for the buttons */ @@ -116,18 +164,16 @@ video { border: 3px solid black; } -iframe { - display:block; - margin: auto; +/* Video recording video and youtube iframe */ +video { /* Video should not be bigger than 100% */ + max-width: 100%; + max-height: 100%; + width: auto; + height: auto; } -.video-container { - position: relative; - padding-bottom: 56.25%; /* 16:9 aspect ratio */ - height: 0; - overflow: hidden; - max-width: 100%; - background: #000; +iframe { /* center the iframe, mostly unnecessary */ + display:block; } .video-container iframe { @@ -138,23 +184,15 @@ iframe { height: 100%; } -form { - text-align: center; - display: flex; - flex-direction: column; - align-items: center; - +.video-container { + background: #000; + position: relative; + padding-bottom: 56.25%; /* 16:9 */ + height: 0; + overflow: hidden; } -.centertext { - text-align: center; -} - -h2,h3 { - text-align: center; -} - - +/* Likert stuff */ .likert { --likert-rows: 5; margin: auto; @@ -162,22 +200,10 @@ h2,h3 { display: inline-grid; max-width: 900px; grid-auto-rows: 1fr; - gap: 1em; + gap: 2em; grid-template-columns: repeat(var(--likert-rows), minmax(0, 1fr)); } -@media only screen and (max-width: 680px) { - .likert { - grid-template-columns: minmax(0, 400px); - justify-content: center; - } -} - -input, label { - display: block; - margin: 0.5rem 0; - } - .likert input { max-width: 250px; position: fixed; @@ -185,6 +211,10 @@ input, label { pointer-events: none; } +.likert label { + aspect-ratio: 1.5 / 1; +} + .likercontainer{ margin: 30px auto; text-align: center; @@ -217,6 +247,15 @@ input, label { outline: lightgrey auto 0.5px; } +@media only screen and (max-width: 680px) { + .likert { + grid-template-columns: minmax(0, 400px); + justify-content: center; + } +} + + +/* Table display stuff */ table { border-collapse: collapse; margin: 20px 0; diff --git a/slaeforms/templates/standard_template.html b/slaeforms/templates/standard_template.html index 4c31468..b3a665a 100644 --- a/slaeforms/templates/standard_template.html +++ b/slaeforms/templates/standard_template.html @@ -8,8 +8,7 @@

{{title}}

{% endif %}
-
@@ -27,13 +26,13 @@ required {% macro inputconfig(question) -%} {% if ("min" in question) %} -min={{question["min"]}} +min={{question["min"]}} {% endif %} {% if ("max" in question) %} -max={{question["max"]}} +max={{question["max"]}} {% endif %} {% if ("step" in question) %} -step={{question["step"]}} +step={{question["step"]}} {% endif %} {%- endmacro %} @@ -49,17 +48,15 @@ step={{question["step"]}} Testform + cameraofficon: "{{ url_for('static', filename='icons/camera-off-icon.png') }}", + cameraicon: "{{ url_for('static', filename='icons/camera-icon.png') }}", + stopicon: "{{ url_for('static', filename='icons/stop-icon.png') }}", + recordicon: "{{ url_for('static', filename='icons/record-icon.png') }}" + }; -
-

Stimulus part

{% if (stimulus_type == "single_video") %} {{ single_video(**stimulus_configuration) }} {% elif (stimulus_type == "empty") %} @@ -68,18 +65,16 @@ step={{question["step"]}}

Error: Block {{ stimulus["type"] }} could not be loaded!

{% endif %} - - -

Questions

-
+ {% for question in questions %} {% if (questions[question]["type"] == "likert") %}
+

{{ questions[question]['text']}}

- {{ questions[question]['text']}} {% for point in questions[question]["points"] %} +
{% elif (questions[question]["type"] == "videoinput") %} +

Gib Feedback als Video

+

{{ questions[question]['text']}}

+
- {{ questions[question]['text']}} -
- -
- + + + + -
+ - -
\ No newline at end of file diff --git a/slaeforms/templates/startpage.html b/slaeforms/templates/startpage.html index 4f8dc99..3de6867 100644 --- a/slaeforms/templates/startpage.html +++ b/slaeforms/templates/startpage.html @@ -8,7 +8,6 @@ -

Hello! Thank you for participating in our study!

@@ -19,7 +18,6 @@

-
\ No newline at end of file diff --git a/slaeforms/templates/test_page0.html b/slaeforms/templates/test_page0.html index 37e9e68..8f8214c 100644 --- a/slaeforms/templates/test_page0.html +++ b/slaeforms/templates/test_page0.html @@ -9,7 +9,6 @@ -

This is just a test page for the single page option of the json configuration, but without something to submit

@@ -17,6 +16,5 @@

-
\ No newline at end of file diff --git a/slaeforms/templates/test_page1.html b/slaeforms/templates/test_page1.html index b2f54c6..f3d4611 100644 --- a/slaeforms/templates/test_page1.html +++ b/slaeforms/templates/test_page1.html @@ -9,7 +9,6 @@ -

This is just a test page for the single page option of the json configuration

@@ -22,6 +21,5 @@

-
\ No newline at end of file diff --git a/slaeforms/templates/teststartpage.html b/slaeforms/templates/teststartpage.html index a194d1b..11b5491 100644 --- a/slaeforms/templates/teststartpage.html +++ b/slaeforms/templates/teststartpage.html @@ -1,6 +1,5 @@ - @@ -8,18 +7,26 @@ -

Hello! Thank you for participating in our study!

-
+ +
+

This is a placeholder EULA and Terms and Condition Text, this should obviously be replaced with some real Text later. + For now, be aware that this is a prototype for a sign language avatar study. + The Data that you input in this form, will be saved on our servers, but in an annonimized ways, so we can not infer who sent this data. + The Video recordings pose a special case. Any videos that are recorded, will be reviewed by sign language experts in our team, + the meaning will be transcribed in text form, then the video will be deleted. + If you have further questions, please send an email to testemail@notarealemail.deee +

+
+ - -

+
+ +
-
- \ No newline at end of file From 78e313ad29eba317e4e655da7700b5e0d6fe2bca Mon Sep 17 00:00:00 2001 From: Jan Dickmann Date: Wed, 19 Jun 2024 15:12:11 +0200 Subject: [PATCH 03/22] Video formats work now and CSRF protection is activ --- slaeforms/app.py | 5 +++- slaeforms/default.json | 22 +++----------- slaeforms/static/styles.css | 20 +++++++++++-- slaeforms/static/videoscript.js | 27 ++++++++++++++++-- slaeforms/templates/endpage.html | 22 ++++++++++++++ slaeforms/templates/standard_template.html | 9 +++--- ... 2_empty_stimulus_2024.06.18 12-32-39.webm | Bin 0 -> 354004 bytes 7 files changed, 77 insertions(+), 28 deletions(-) create mode 100644 slaeforms/templates/endpage.html create mode 100644 slaeforms/uploads/05297230-51d9-464c-800b-6e4ab87dc60b_Block 2_empty_stimulus_2024.06.18 12-32-39.webm diff --git a/slaeforms/app.py b/slaeforms/app.py index 66d7574..5e12a55 100644 --- a/slaeforms/app.py +++ b/slaeforms/app.py @@ -11,6 +11,7 @@ import uuid from sqlalchemy.exc import SQLAlchemyError from sqlalchemy import inspect from sqlalchemy.orm import DeclarativeBase +from flask_wtf.csrf import CSRFProtect import os random_order = True @@ -30,6 +31,7 @@ app = Flask(__name__) # configure the database, give it a path (it will be in the instances folder) app.config["SQLALCHEMY_DATABASE_URI"] = "sqlite:///database.db" db.init_app(app) +csrf = CSRFProtect(app) #enable CSRF protection globally #set the secret key (TODO change this for final deployment) app.secret_key = b"29fe9e8edd407c5491d4f1c05632d9fa33e26ed8734a3f5e080ebac3772a555a" @@ -381,7 +383,8 @@ def update_session(): session["current_block_index"] += 1 session["current_block_name"] = session["block_names"][session["current_block_index"]] - + if (session["current_block_index"] == session["number_of_blocks"]-1) and (session["current_stimulus_index"] >= session["number_of_stimuli"]-1): + session.pop("slaeform_user_id") print("---Session updated---") print("current_block_index / number_of_blocks: {current_block_index} / {number_of_blocks}".format(current_block_index=session["current_block_index"],number_of_blocks=session["number_of_blocks"])) print("current_block_name: ", session["current_block_name"]) diff --git a/slaeforms/default.json b/slaeforms/default.json index 1a4db5f..8231877 100644 --- a/slaeforms/default.json +++ b/slaeforms/default.json @@ -1,5 +1,5 @@ { - "Block 3":{ + "Block 1":{ "type": "TaskTemplate", "tempalte": "standard_template.html", "stimuli":{ @@ -135,7 +135,7 @@ } } }, - "Block 4":{ + "Block 2":{ "type": "TaskTemplate", "tempalte": "standard_template.html", "number_of_pages":"3", @@ -209,22 +209,8 @@ } } }, - "Block_1":{ + "Block_3":{ "type": "SinglePage", - "template": "test_page0.html" - }, - "Block_2":{ - "type": "SinglePage", - "template": "test_page1.html", - "database_table" :{ - "table_name": "Datenschutzerklaerung", - "fields": { - "accepted":{ - "type": "string", - "size": "7", - "nullable": "false" - } - } - } + "template": "endpage.html" } } \ No newline at end of file diff --git a/slaeforms/static/styles.css b/slaeforms/static/styles.css index 2b089c9..1cb2a9d 100644 --- a/slaeforms/static/styles.css +++ b/slaeforms/static/styles.css @@ -167,16 +167,16 @@ h2,h3 { /* Video recording video and youtube iframe */ video { /* Video should not be bigger than 100% */ max-width: 100%; - max-height: 100%; width: auto; height: auto; + margin: auto auto; } iframe { /* center the iframe, mostly unnecessary */ display:block; } -.video-container iframe { +.iframe-container iframe { position: absolute; top: 0; left: 0; @@ -184,14 +184,28 @@ iframe { /* center the iframe, mostly unnecessary */ height: 100%; } +.iframe-container { + position: relative; + padding-bottom: 56.25%; /* 16:9 */ + height: 0; +} + .video-container { - background: #000; + max-width: 100%; position: relative; padding-bottom: 56.25%; /* 16:9 */ height: 0; overflow: hidden; } +.videomirror { + transform: rotateY(180deg); + /* Safari and Chrome */ + -webkit-transform: rotateY(180deg); + /* Firefox */ + -moz-transform: rotateY(180deg); + } + /* Likert stuff */ .likert { --likert-rows: 5; diff --git a/slaeforms/static/videoscript.js b/slaeforms/static/videoscript.js index 49adb5d..62cb43d 100644 --- a/slaeforms/static/videoscript.js +++ b/slaeforms/static/videoscript.js @@ -6,11 +6,14 @@ const buttonCameraIcon = document.getElementById('buttonCameraIcon'); const buttonRecordIcon = document.getElementById('buttonRecordIcon'); const buttonDeleteIcon = document.getElementById('buttonDeleteIcon'); const videoContainer = document.getElementById('videoContainer'); +const videoContainerCss = document.querySelector(".video-container ") //might be unnecessary var mediaRecorder = null; var stream = null; let recordedVideoBlob = null; let isRecording = false; let videoAccess = false; +let videoHeigt = 720; +let videoWidth = 1280; // Handle form submission document.getElementById("question_form").addEventListener("submit", function (event) { @@ -66,14 +69,31 @@ async function cameraButton() { console.log("stream is active"); videoAccess = true; + videoHeigt = stream.getVideoTracks()[0].getSettings().height + videoWidth = stream.getVideoTracks()[0].getSettings().width + + let aspectratio = (videoHeigt / videoWidth) *100 + console.log("videoHeigt: ",videoHeigt); + console.log("videoWidth: ",videoWidth); + console.log("aspect ratio: ",aspectratio); + console.log("device: ",stream.getVideoTracks()[0].getSettings().deviceId); + videoContainer.style.setProperty("padding-bottom", "min("+videoHeigt+"px,"+aspectratio+"%)"); + + if (videoHeigt > videoWidth){ //hochkant video + videoContainer.style.setProperty("max-width", "min(80%,576"); + }else{ //Normal, horizontal + videoContainer.style.setProperty("max-width", "100%"); + } + videoDisplay.srcObject = stream; buttonCameraIcon.src = ICON_PATHS.cameraofficon; buttonCameraIcon.alt = "Camera-off Icon"; buttonRecord.style.display = 'inline-block'; buttonDelete.style.display = 'inline-block'; - videoDisplay.style.display = 'inline-block'; - videoContainer.style.display = 'inline-block'; + videoDisplay.style.display = 'block'; + videoContainer.style.display = 'block'; + videoDisplay.classList.add("videomirror"); mediaRecorder = new MediaRecorder(stream, { mimeType: "video/webm", // could use different video format @@ -127,6 +147,7 @@ function recordButton() { if (!isRecording) { console.log("recordButton pressed case isRecording = false"); deleteButton(); + videoDisplay.classList.add("videomirror"); buttonDelete.setAttribute("disabled", ""); buttonDeleteIcon.classList.add("buttondisable"); videoDisplay.srcObject = stream; @@ -142,6 +163,7 @@ function recordButton() { } else { console.log("recordButton pressed case isRecording = true"); mediaRecorder.stop(); + videoDisplay.classList.remove("videomirror"); console.log("recording stops"); buttonDelete.removeAttribute("disabled"); @@ -154,6 +176,7 @@ function deleteButton() { videoDisplay.controls = false; videoDisplay.srcObject = stream; recordedVideoBlob = null + videoDisplay.classList.add("videomirror"); buttonDelete.setAttribute("disabled", ""); buttonDeleteIcon.classList.add("buttondisable"); } diff --git a/slaeforms/templates/endpage.html b/slaeforms/templates/endpage.html new file mode 100644 index 0000000..d5817da --- /dev/null +++ b/slaeforms/templates/endpage.html @@ -0,0 +1,22 @@ + + + + + + DGS Avatar Study + + + +
+

Thank you for participating in our study!

+ +
+

+ If you liked this study, we would be grateful if you share it and invite other people to also participate. + Anyone with some level of sign language understanding can participate. + If you have further questions, please send an email to testemail@notarealemail.deee +

+
+
+ + \ No newline at end of file diff --git a/slaeforms/templates/standard_template.html b/slaeforms/templates/standard_template.html index b3a665a..0950324 100644 --- a/slaeforms/templates/standard_template.html +++ b/slaeforms/templates/standard_template.html @@ -3,16 +3,16 @@ {% macro single_video(video_url, embed="yt", title="",width="560", height="315", class="center", code="

No code given

") -%} {% if (embed == "yt") %} -
+ {% if (title != "") %}

{{title}}

{% endif %} -
+
-
+ {% else %} {{code}} {% endif %} @@ -66,6 +66,7 @@ step={{question["step"]}} {% endif %}
+ {% for question in questions %} {% if (questions[question]["type"] == "likert") %}
@@ -163,7 +164,7 @@ step={{question["step"]}}
-