Jan/slaeforms
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Favicon added maybe more idk

Browse Source
This commit is contained in:
Jan 2024-04-23 17:24:50 +02:00
parent 05d0200275
commit b14bc2d608
10 changed files with 192 additions and 85 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
slaeforms/app.py
View File

@ -2,7 +2,7 @@ import sys
import json import json
import random import random
import base64 import base64
from flask import Flask, redirect, url_for, request, session, make_response, jsonify from flask import Flask, redirect, url_for, request, session, make_response, jsonify, send_from_directory
from flask import render_template from flask import render_template
from flask_sqlalchemy import SQLAlchemy from flask_sqlalchemy import SQLAlchemy
from sqlalchemy.orm import DeclarativeBase from sqlalchemy.orm import DeclarativeBase
@ -225,3 +225,5 @@ def delete_all_entries():
@app.route("/") @app.route("/")
def blank(): def blank():
return "blank page" return "blank page"

BIN
slaeforms/static/icons/favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.1 KiB

24
slaeforms/static/styles.css
View File

@ -8,13 +8,22 @@ body {
font-size: 16px; font-size: 16px;
} }
.spacer {
clear: both;
box-sizing: border-box;
}
.buttondisable {
filter: invert(65%);
}
.videocontrols { .videocontrols {
width: 100px; /* Set a specific width for the buttons */ width: 100px; /* Set a specific width for the buttons */
height: 70px; /* Set a specific height for the buttons */ height: 70px; /* Set a specific height for the buttons */
background-color: #cae4ff; background-color: #cae4ff;
border: none; border: none;
border: none;
color: white; color: white;
padding: 10px 20px;
margin: 0 10px; margin: 0 10px;
border-radius: 5px; border-radius: 5px;
cursor: pointer; cursor: pointer;
@ -22,6 +31,17 @@ body {
display: inline-flex; /* Display button contents as a flexbox */ display: inline-flex; /* Display button contents as a flexbox */
justify-content: center; /* Center contents horizontally */ justify-content: center; /* Center contents horizontally */
align-items: center; /* Center contents vertically */ 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 { .columncontainer {
@ -106,7 +126,7 @@ input, label {
} }
.likert input:focus + span { .likert input:focus + span {
outline: -webkit-focus-ring-color auto 1px; outline: auto 1px; /*-webkit-focus-ring-color*/
} }
.likert span:hover { .likert span:hover {

64
slaeforms/templates/Study1 Normal file
View File

@ -0,0 +1,64 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='styles.css')}}"" /> <!-- styles.css {{ url_for('static', filename='styles.css')}}-->
<title>Testform</title>
<link rel="shortcut icon" href="{{ url_for('static', filename='icons/favicon.ico') }}">
</head>
<body>
<h2>Question: {{ current_question }}</h2>
{% if (videotype == "single")%} <!-- first figure out what video type we have -->
<div class="center">
<h3>Video 1</h3>
<iframe width="560" height="315" class="center" src="{{ video_url }}" title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
allowfullscreen></iframe>
</div>
{% elif (videotype == "pairwise")%}
<div class="columncontainer">
<div class="columnleft center">
<h3>Video 1</h3>
<iframe width="560" height="315" class="center" src="{{ video_url_left }}" title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
allowfullscreen></iframe>
</div>
<div class="columnright">
<h3>Video 2</h3>
<iframe width="560" height="315" src="{{ video_url_right }}" title="YouTube video player" frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
allowfullscreen></iframe>
</div>
</div>
{% else %}
<p>Error: No Videotype could be matched or was given!</p>
{% endif %}
<form action="http://localhost:5000/send" method="post">
{% for block in config["question 1"]["blocks"] %}
{% if (config["question 1"]["blocks"][block]["type"] == "likert") %}
<div class="likercontainer">
<div class="likert">
<label><input name="likertscale" type="radio" value="1" /><span>I dont like it at all</span></label>
<label><input name="likertscale" type="radio" value="2" /><span>I dont like it</span></label>
<label><input name="likertscale" type="radio" value="3" /><span>I am indifferent</span></label>
<label><input name="likertscale" type="radio" value="4" /><span>I like it</span></label>
<label><input name="likertscale" type="radio" value="5" /><span>I like it a lot</span></label>
</div>
</div>
{% elif (config["question 1"]["blocks"][block]["type"] == "textinput") %}
<label for="feedback">Additional Feedback: </label>
<textarea id="feedback" name="feedback" rows="3" cols="30" maxlength="200"></textarea>
{% else %}
<p>Error: A block could not be loaded!</p>
{% endif %}
{% endfor %}
<p><input id="submitbutton" type = "submit" value = "submit";/></p>
</form>
</body>
</html>

1
slaeforms/templates/data.html
View File

@ -5,6 +5,7 @@
<meta charset="utf-8" /> <meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="styles.css" /> <link rel="stylesheet" type="text/css" href="styles.css" />
<title>Testform</title> <title>Testform</title>
<link rel="shortcut icon" href="{{ url_for('static', filename='icons/favicon.ico') }}">
</head> </head>
<body> <body>

1
slaeforms/templates/layout1.html
View File

@ -5,6 +5,7 @@
<meta charset="utf-8" /> <meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='styles.css')}}"" /> <!-- styles.css {{ url_for('static', filename='styles.css')}}--> <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='styles.css')}}"" /> <!-- styles.css {{ url_for('static', filename='styles.css')}}-->
<title>Testform</title> <title>Testform</title>
<link rel="shortcut icon" href="{{ url_for('static', filename='favicon.ico') }}">
</head> </head>
<body> <body>

1
slaeforms/templates/layout2.html
View File

@ -5,6 +5,7 @@
<meta charset="utf-8" /> <meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='styles.css')}}"" /> <!-- styles.css {{ url_for('static', filename='styles.css')}}--> <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='styles.css')}}"" /> <!-- styles.css {{ url_for('static', filename='styles.css')}}-->
<title>Testform</title> <title>Testform</title>
<link rel="shortcut icon" href="{{ url_for('static', filename='favicon.ico') }}">
</head> </head>
<body> <body>

150
slaeforms/templates/myvideotemplate.html
View File

@ -6,76 +6,44 @@
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='styles.css')}}" /> <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='styles.css')}}" />
<!-- styles.css {{ url_for('static', filename='styles.css')}}--> <!-- styles.css {{ url_for('static', filename='styles.css')}}-->
<title>Testform</title> <title>Testform</title>
<style> <link rel="shortcut icon" href="{{ url_for('static', filename='icons/favicon.ico') }}">
/* Add any styling here */
.videocontrols {
border: none;
color: white;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s ease;
}
.videocontrols img {
max-width: 60%;
max-height: 60%;
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 */
}
</style>
</head> </head>
<body> <body>
<h2>Gib Feedback als Video</h2> <h2>Gib Feedback als Video</h2>
<div class="centertext"> <div class="centertext">
<button type="button" class="videocontrols" id="buttonCamera"> <button type="button" class="videocontrols" id="buttonCamera" onclick="cameraButton()">
<img id="buttonCameraIcon" src="{{ url_for('static', filename='icons/camera-icon.png')}}" alt="Camera Icon" <img id="buttonCameraIcon" src="{{ url_for('static', filename='icons/camera-icon.png')}}" alt="Camera Icon">
onclick="cameraButton()">
</button> </button>
</div> </div>
<div class="spacer" aria-hidden="true" style="height:30px"></div>
<div class="centertext"> <div class="centertext">
<button type="button" class="videocontrols" id="buttonRecord" style="display:none"> <button type="button" class="videocontrols" id="buttonRecord" style="display:none" onclick="recordButton()">
<img id="buttonRecordIcon" src="{{ url_for('static', filename='icons/record-icon.png')}}" alt="Camera Icon" <img id="buttonRecordIcon" src="{{ url_for('static', filename='icons/record-icon.png')}}" alt="Camera Icon">
onclick="recordButton()">
</button> </button>
<button type="button" class="videocontrols" id="buttonAccept" style="display:none"> <button type="button" class="videocontrols" id="buttonDelete" style="display:none" disabled
<img id="buttonAcceptIcon" src="{{ url_for('static', filename='icons/check-icon.png')}}" alt="Accept Icon"
onclick="acceptButton()">
</button>
<button type="button" class="videocontrols" id="buttonCancel" style="display:none">
<img id="buttonCancelIcon" src="{{ url_for('static', filename='icons/x-icon.png')}}" alt="Cancel Icon"
onclick="cancelButton()">
</button>
<button type="button" class="videocontrols" id="buttonDelete" style="display:none">
<img id="buttonDeleteIcon" src="{{ url_for('static', filename='icons/trash-icon.png')}}" alt="Delete Icon"
onclick="deleteButton()"> onclick="deleteButton()">
<img id="buttonDeleteIcon" src="{{ url_for('static', filename='icons/trash-icon.png')}}" alt="Delete Icon"
class="buttondisable">
</button> </button>
<div>
<video autoplay muted playsinline width="1280" height="720" id="videoDisplay"></video>
</div> </div>
<div class="spacer" aria-hidden="true" style="height:15px"></div>
<div class="centertext">
<video autoplay muted playsinline width="1280" height="720" id="videoDisplay"></video>
</div> </div>
<script> <script>
const buttonCamera = document.getElementById('buttonCamera'); const buttonCamera = document.getElementById('buttonCamera');
const buttonRecord = document.getElementById('buttonRecord'); const buttonRecord = document.getElementById('buttonRecord');
const buttonAccept = document.getElementById('buttonAccept'); const buttonDelete = document.getElementById('buttonDelete');
const buttonCancel = document.getElementById('buttonCancel');
const buttonDelete = document.getElementById('buttonRecord');
const videoDisplay = document.getElementById('videoDisplay'); const videoDisplay = document.getElementById('videoDisplay');
const buttonCameraIcon = document.getElementById('buttonCameraIcon'); const buttonCameraIcon = document.getElementById('buttonCameraIcon');
const buttonRecordIcon = document.getElementById('buttonRecordIcon'); const buttonRecordIcon = document.getElementById('buttonRecordIcon');
//const buttonDeleteIcon = document.getElementById('buttonDeleteIcon');
var mediaRecorder = null; var mediaRecorder = null;
var stream = null; var stream = null;
let recordedVideoBlob = null; let recordedVideoBlob = null;
@ -83,55 +51,89 @@
let videoAccess = false; let videoAccess = false;
async function cameraButton() { async function cameraButton() {
if (!videoAccess) { //TODO what happens if you dont get the device if (!videoAccess) { //test what happens if user doesnt give the permission
console.log("videoAccess = false"); console.log("cameraButton case videoAccess = false");
// maybe a try catch block?
try {
stream = await navigator.mediaDevices.getUserMedia({ stream = await navigator.mediaDevices.getUserMedia({
video: true, video: true,
}); });
} catch (error) {
//TODO when this occurs the user should get a hint to reload the page or to allow it next to the url
newerror = error
console.log("Error: ", error);
return
}
console.log("stream is active"); console.log("stream is active");
videoAccess = true videoAccess = true
videoDisplay.srcObject = stream videoDisplay.srcObject = stream
buttonCameraIcon.src = "{{ url_for('static', filename='icons/camera-off-icon.png') }}"; //todo, not sure if this works buttonCameraIcon.src = "{{ url_for('static', filename='icons/camera-off-icon.png') }}"; //todo, not sure if this works
buttonCameraIcon.alt = "Camera-off Icon"; buttonCameraIcon.alt = "Camera-off Icon";
buttonRecord.style.display = 'inline-block'; buttonRecord.style.display = 'inline-block';
} else { buttonDelete.style.display = 'inline-block';
console.log("videoAccess = true"); videoDisplay.style.display = 'inline-block';
stream = null;
videoAccess = false
buttonCameraIcon.src = "{{ url_for('static', filename='icons/camera-icon.png') }}"; //todo, not sure if this works
buttonCameraIcon.alt = "Camera Icon";
buttonRecord.style.display = 'none';
}
console.log("camera button function ends");
}
function recordButton() {
if (!isRecording) {
mediaRecorder = new MediaRecorder(stream, { mediaRecorder = new MediaRecorder(stream, {
mimeType: "video/webm", //could use other video format: https://www.iana.org/assignments/media-types/media-types.xhtml#video mimeType: "video/webm", //could use other video format: https://www.iana.org/assignments/media-types/media-types.xhtml#video
// I probably want to change the bitrate: https://developer.mozilla.org/en-US/docs/Web/API/MediaRecorder/MediaRecorder // I probably want to change the bitrate: https://developer.mozilla.org/en-US/docs/Web/API/MediaRecorder/MediaRecorder
}); });
} else {
console.log("cameraButton case videoAccess = true");
stream = null;
videoAccess = false
buttonCameraIcon.src = "{{ url_for('static', filename='icons/camera-icon.png') }}"; //todo, not sure if this works
buttonCameraIcon.alt = "Camera Icon";
buttonRecord.style.display = 'none';
buttonDelete.style.display = 'none';
videoDisplay.style.display = 'none';
}
console.log("camera button function ends");
}
mediaRecorder.addEventListener("dataavailable", (event) => {
videoRecorded.src = URL.createObjectURL(event.data);
recordedVideoBlob = event.data;
});
function recordButton() {
console.log("recordButton pressed");
if (!isRecording) {
console.log("recordButton pressed case isRecording = false");
deleteButton();
buttonDelete.setAttribute("disabled", "");
buttonDeleteIcon.classList.add("buttondisable");
mediaRecorder.start();
buttonRecordIcon.src = "{{ url_for('static', filename='icons/stop-icon.png') }}";
buttonRecordIcon.alt = 'record icon';
isRecording = true; isRecording = true;
console.log('Recording started');
} else { } else {
console.log("recordButton pressed case isRecording = true");
mediaRecorder.stop();
buttonRecordIcon.src = "{{ url_for('static', filename='icons/record-icon.png') }}";
buttonRecordIcon.alt = 'Stop Icon';
isRecording = false;
console.log('Recording stopped');
buttonDelete.removeAttribute("disabled");
buttonDeleteIcon.classList.remove("buttondisable");
} }
} }
function deleteButton() {
//todo delete data
if (videoAccess) buttonDelete.setAttribute("disabled", "");
buttonDeleteIcon.classList.add("buttondisable");
buttonRecording.addEventListener("click", function () {
if (isRecording) {
recordingIcon.src = 'record-icon.png';
recordingIcon.alt = 'record icon';
console.log('Action started');
} else {
recordingIcon.src = 'stop-icon.png';
recordingIcon.alt = 'Stop Icon';
console.log('Action stopped');
} }
isRecording = !isRecording;
})
</script> </script>
</body> </body>

16
slaeforms/templates/templatetest1.html Normal file
View File

@ -0,0 +1,16 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='styles.css')}}"" /> <!-- styles.css {{ url_for('static', filename='styles.css')}}-->
<title>Testform</title>
<link rel="shortcut icon" href="{{ url_for('static', filename='icons/favicon.ico') }}">
</head>
<body>
</body>
</html>

2
slaeforms/templates/videorecorder3.html
View File

@ -88,7 +88,7 @@
const search = new URLSearchParams({ const search = new URLSearchParams({
extname: ".webm", extname: ".webm",
}).toString(); }).toString();
// this string is literally jsut "extname=.webm", WHY? // this string is literally just "extname=.webm", WHY?
const url = "/api/upload/blob?" + search; const url = "/api/upload/blob?" + search;