caliskanbi83990
/
1_2_oder_3_repos
Watch 3
Star 1
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

FrontEnd Added

master
caliskan 1 year ago
parent
bac84033bd
commit
bfce051b60
17 changed files with 241 additions and 18 deletions
Split View Show Diff Stats
  1. 5
    0
      .idea/.gitignore
  2. 12
    0
      .idea/1_2_oder_3_repos.iml
  3. 4
    0
      .idea/misc.xml
  4. 8
    0
      .idea/modules.xml
  5. 6
    0
      .idea/vcs.xml
  6. 2
    0
      idea.txt
  7. 3
    0
      ip adressen.txt
  8. 1
    0
      requirements.txt
  9. 0
    0
      src_folder/BackEnd/detect.py
  10. 15
    0
      src_folder/BackEnd/test_flask_server.py
  11. BIN
      src_folder/FrontEnd/12oder3-logo.png
  12. BIN
      src_folder/FrontEnd/icons8-time.gif
  13. 78
    0
      src_folder/FrontEnd/index.css
  14. 45
    0
      src_folder/FrontEnd/index.html
  15. 62
    0
      src_folder/FrontEnd/index.js
  16. 0
    0
      src_folder/UI_and_DB/database.py
  17. 0
    18
      src_folder/UI_and_DB/ui.py

+ 5
- 0
.idea/.gitignore View File

@@ -0,0 +1,5 @@
# Default ignored files
/shelf/
/workspace.xml
# Editor-based HTTP Client requests
/httpRequests/

+ 12
- 0
.idea/1_2_oder_3_repos.iml View File

@@ -0,0 +1,12 @@
<?xml version="1.0" encoding="UTF-8"?>
<module type="WEB_MODULE" version="4">
<component name="NewModuleRootManager">
<content url="file://$MODULE_DIR$">
<excludeFolder url="file://$MODULE_DIR$/temp" />
<excludeFolder url="file://$MODULE_DIR$/.tmp" />
<excludeFolder url="file://$MODULE_DIR$/tmp" />
</content>
<orderEntry type="inheritedJdk" />
<orderEntry type="sourceFolder" forTests="false" />
</component>
</module>

+ 4
- 0
.idea/misc.xml View File

@@ -0,0 +1,4 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="ProjectRootManager" version="2" project-jdk-name="Python 3.10 (1_2_oder_3_repos)" project-jdk-type="Python SDK" />
</project>

+ 8
- 0
.idea/modules.xml View File

@@ -0,0 +1,8 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="ProjectModuleManager">
<modules>
<module fileurl="file://$PROJECT_DIR$/.idea/1_2_oder_3_repos.iml" filepath="$PROJECT_DIR$/.idea/1_2_oder_3_repos.iml" />
</modules>
</component>
</project>

+ 6
- 0
.idea/vcs.xml View File

@@ -0,0 +1,6 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="VcsDirectoryMappings">
<mapping directory="" vcs="Git" />
</component>
</project>

+ 2
- 0
idea.txt View File

@@ -5,3 +5,5 @@ we must determine and provide area in which the answer options are defined (tape

tasks:
- get camera
- get coloured hats (red, yellow and blue )*2 oder papier
- frontend is seperated from backend

+ 3
- 0
ip adressen.txt View File

@@ -0,0 +1,3 @@
Bilal IP : 192.168.50.130
Youssef: 192.168.50.226
David: 192.168.50.79

+ 1
- 0
requirements.txt View File

@@ -0,0 +1 @@
Flask~=2.3.1

src_folder/Object-Detection/detect.py → src_folder/BackEnd/detect.py View File


+ 15
- 0
src_folder/BackEnd/test_flask_server.py View File

@@ -0,0 +1,15 @@
from flask import Flask, jsonify
app = Flask(__name__)



@app.route('/GETQUESTION', methods=['GET'])
def hello():
return jsonify({'TEST': 'Dies ist eine Testfrage',
'firstanswer': 'erste Antwort',
'secondanswer': 'zweite Antwort',
'thirdanswer': 'dritte Antwort'})


if __name__ == '__main__':
app.run(host='127.0.0.1', port=5555, debug=True)

BIN
src_folder/FrontEnd/12oder3-logo.png View File


BIN
src_folder/FrontEnd/icons8-time.gif View File


+ 78
- 0
src_folder/FrontEnd/index.css View File

@@ -0,0 +1,78 @@
h1 {
text-align: center;
}

div {
text-align: center;
}
#MainHeading {
}
#MainHeadingPic {
max-width: 10%;
}

#buttondiv {
display: inline;
margin: auto;
}
#startbutton {
scale: 120%;
}
#nextbutton {
visibility: hidden;
}
#questiondiv{
margin-top: 20px;
}
#question {
margin: auto;
height: 50px;
width: 600px;
border-style: solid;
padding-bottom: 20px;
}

#answerdiv {
display: flex;
}

#timerdiv {
margin-bottom: 20px;
padding-bottom: 20px;
padding-top: 20px;
}

#timer {
display: inline;

}

#timerpic{
max-width: 10%;
margin-bottom: -20px;
}
#answerdiv{
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}
.answerbox {
width: 300px;
height: 100px;
border-style: solid;
}
#firstanswerbox {
border-color: red;
background-color: red;
}

#secondanswerbox {
border-color: yellow;
background-color: yellow;
}

#thirdanswerbox {
border-color: blue;
background-color: blue;
}

+ 45
- 0
src_folder/FrontEnd/index.html View File

@@ -0,0 +1,45 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="index.css">
<script src="index.js"></script>
<title>Title</title>
</head>
<body>
<div id="MainHeading">
<img src="12oder3-logo.png" alt="1_2_oder_3" id="MainHeadingPic">
<div id="buttondiv">
<button id="startbutton" onclick="startGame()">Start</button>
<button id="nextbutton" onclick="nextQuestion()">Nächste Frage</button>
</div>
</div>

<div id="questiondiv">
<h1 id="question">Question</h1>
</div>

<br>

<div id="answerdiv">

<div class="answerbox" id="firstanswerbox">
</div>
<br>
<div class="answerbox" id="secondanswerbox"></div>
<br>
<div class="answerbox" id="thirdanswerbox"></div>

</div>

<br>

<div id="timerdiv">
<img src="icons8-time.gif" alt="Timer:" id="timerpic">
<p id="timer">Time</p>
</div>


<div id ="points">Punktestand der Teams</div>
</body>
</html>

+ 62
- 0
src_folder/FrontEnd/index.js View File

@@ -0,0 +1,62 @@
let question_var = document.getElementById("question")
let firstanswer_var = document.getElementById("firstquestion")
let secondanswer_var = document.getElementById("secondquestion")
let thirdanswer_var = document.getElementById("thirdanswer")
let nextbutton = document.getElementById("nextbutton")
let startbutton = document.getElementById("startbutton")
let i = 1
let startgame = true
let intervallid;
let secondsleft = 10;
const xhr = new XMLHttpRequest();
const url = "http://127.0.0.1:5555/GETQUESTION";

function ChangeStatus(boolean) {
return boolean !== true;
}

function getQuestion(){
// TODO: MAKE HTTP REQUEST TO GET QUESTION FROM BACKEND
fetch(url)
.then(response => response.json())
.then(data => {
console.log(data);
document.getElementById("question").innerText = data['TEST'];
document.getElementById("firstanswer").innerText = data['firstanswer'];
document.getElementById("secondanswer").innerText = data['secondanswer'];
document.getElementById("thirdanswer").innerText = data['thirdanswer'];


})
.catch(error => console.error(error));

console.log("Question got");
document.getElementById("question").innerText = (i++).toString() + ". Question ";
}

function nextQuestion(){
console.log("nextQuestion clicked")
getQuestion()
secondsleft=10;
timerstart()
}
function startGame() {
startgame = (startgame !== true);
console.log("Button clicked");
if (startgame === false){
}
document.getElementById("nextbutton").style.visibility = "visible";
document.getElementById("startbutton").style.visibility = "hidden";
getQuestion();
timerstart()
}

function timerstart() {
intervallid = setInterval(function() {
document.getElementById('timer').textContent = secondsleft;
if (secondsleft === 0) {
clearInterval(intervallid);
}
secondsleft--;
}, 1000);
}

+ 0
- 0
src_folder/UI_and_DB/database.py View File


+ 0
- 18
src_folder/UI_and_DB/ui.py View File

@@ -1,18 +0,0 @@
import tkinter as tk

def button_callback():
print("Button was clicked")

# Create the main window
window = tk.Tk()

# Add a label to the window
label = tk.Label(text="Hello, World!")
label.pack()

# Add a button to the window
button = tk.Button(text="Click me!", command=button_callback)
button.pack()

# Run the main loop to display the window
window.mainloop()

Write Preview
Loading…
Cancel
Save