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"]}}
-