Skip to content

2
2022-073
Commit 99358509 authored by Nilan Meegoda's avatar Nilan Meegoda
Browse files
Options

Merge branch 'Attention_span_intergration-i' into 'master' 

few minor bug fixes in attention span

See merge request !29
parents 664126b5 7ba3c8a6
Hide whitespace changes
Inline Side-by-side
Showing with 113 additions and 45 deletions
web-app/frontend/src/components/activities/ethicalClearence.css
View file @ 99358509
...@@ -31,19 +31,34 @@ ...@@ -31,19 +31,34 @@
.containerb .btn { .containerb .btn {
position: absolute; position: absolute;
top: 50%; top: 92%;
left: 50%; left: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%);
background-color: #555; background-color: #555;
color: white; color: white;
font-size: 16px; font-size: 16px;
padding: 12px 24px; padding: 15px 35px;
border: none; border: none;
cursor: pointer; cursor: pointer;
border-radius: 5px; border-radius: 5px;
text-align: center; text-align: center;
} }
.containerb .vid {
position: absolute;
top: 58%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
padding: 36px 159px;
border: none;
cursor: pointer;
border-radius: 5px;
text-align: center;
}
.containerb .btn:hover { .containerb .btn:hover {
background-color: black; background-color: black;
......
web-app/frontend/src/components/activities/ethicalClearence.jsx
View file @ 99358509
...@@ -7,6 +7,18 @@ import { useNavigate } from "react-router-dom"; ...@@ -7,6 +7,18 @@ import { useNavigate } from "react-router-dom";
import API from "../../config/api"; import API from "../../config/api";
import bgImage1 from "../../assets/bg.jpg"; import bgImage1 from "../../assets/bg.jpg";
import wait from "../../utility/delay"; import wait from "../../utility/delay";
import { useRecordWebcam, CAMERA_STATUS } from "react-record-webcam";
import type {
RecordWebcamOptions,
RecordWebcamHook,
} from "react-record-webcam";
const OPTIONS: RecordWebcamOptions = {
filename: "test-filename",
fileType: "mp4",
width: 1920,
height: 1080,
};
const EthicalClearenceScreen = () => { const EthicalClearenceScreen = () => {
const navigate = useNavigate(); const navigate = useNavigate();
...@@ -16,6 +28,8 @@ const EthicalClearenceScreen = () => { ...@@ -16,6 +28,8 @@ const EthicalClearenceScreen = () => {
const [parentSignature, setParentSignature] = useState("WIP"); const [parentSignature, setParentSignature] = useState("WIP");
const [childData, setChildData] = useState([{}]); const [childData, setChildData] = useState([{}]);
const [isFormFilled, setIsFormFilled] = useState(false); const [isFormFilled, setIsFormFilled] = useState(false);
const recordWebcam: RecordWebcamHook = useRecordWebcam(OPTIONS);
const headerConfig = { const headerConfig = {
headers: { headers: {
"Access-Control-Allow-Origin": "*", "Access-Control-Allow-Origin": "*",
...@@ -34,6 +48,25 @@ const EthicalClearenceScreen = () => { ...@@ -34,6 +48,25 @@ const EthicalClearenceScreen = () => {
fetchData(); fetchData();
}, []); }, []);
useEffect(() => {
if (isFormFilled) {
recordWebcam.open();
}
}, [isFormFilled]);
useEffect(() => {
if (recordWebcam.status === CAMERA_STATUS.OPEN) {
toast.success("Camera has been connected!", {
duration: 5000,
});
toast.success("Microphone has been connected!", {
duration: 5000,
});
} else if (recordWebcam.status === CAMERA_STATUS.OPEN) {
toast.error("Error: please check your device!");
}
}, [recordWebcam.status]);
let handleSubmit = async (e) => { let handleSubmit = async (e) => {
e.preventDefault(); e.preventDefault();
const selectedChild = childData.find((item) => item.id === childCandidate); const selectedChild = childData.find((item) => item.id === childCandidate);
...@@ -68,6 +101,11 @@ const EthicalClearenceScreen = () => { ...@@ -68,6 +101,11 @@ const EthicalClearenceScreen = () => {
} }
}; };
const onStart = () => {
recordWebcam.close();
navigate("/activities");
};
return ( return (
<> <>
<div> <div>
...@@ -212,7 +250,28 @@ const EthicalClearenceScreen = () => { ...@@ -212,7 +250,28 @@ const EthicalClearenceScreen = () => {
</div> </div>
<div className="containerb mt-10 mb-8 py-1 sm:mt-0"> <div className="containerb mt-10 mb-8 py-1 sm:mt-0">
<img className="object-fill h-full w-full" src={bgImage1} /> <img className="object-fill h-full w-full" src={bgImage1} />
<button type="button" className="btn mt-10 text-black bg-gradient-to-br from-green-400 to-blue-600 hover:bg-gradient-to-bl focus:ring-4 focus:outline-none focus:ring-green-200 dark:focus:ring-green-800 font-medium rounded-lg text-sm px-5 py-2.5 text-center mr-2 mb-2" onClick={()=> navigate("/activities")}>Let's Start</button> <div className="flex items-center">
<video
className="vid rounded-md"
ref={recordWebcam.webcamRef}
style={{
display: `${
recordWebcam.status === CAMERA_STATUS.OPEN ||
recordWebcam.status === CAMERA_STATUS.RECORDING
? "block"
: "none"
}`,
}}
autoPlay
/>
<button
type="button"
className="btn mt-7 text-black bg-gradient-to-br from-green-400 to-blue-600 hover:bg-gradient-to-bl focus:ring-4 focus:outline-none focus:ring-green-200 dark:focus:ring-green-800 font-medium rounded-lg text-sm px-5 py-2.5 text-center mr-2 mb-2"
onClick={() => onStart()}
>
Let's Start
</button>
</div>
</div> </div>
</> </>
)} )}
......
web-app/frontend/src/pages/attention_demo/attentionspan.jsx
View file @ 99358509
import React, { useState, useEffect } from "react"; import React, { useState, useEffect } from "react";
import axios from "axios"; import axios from "axios";
import "./attentionspan.css"; import "./attentionspan.css";
import API from "../../config/api";
import { useRecordWebcam, CAMERA_STATUS } from "react-record-webcam"; import { useRecordWebcam, CAMERA_STATUS } from "react-record-webcam";
import type { import type {
RecordWebcamOptions, RecordWebcamOptions,
...@@ -34,54 +35,45 @@ const AttentionSpan_screen = () => { ...@@ -34,54 +35,45 @@ const AttentionSpan_screen = () => {
console.log("testing", blob); console.log("testing", blob);
const data = new FormData(); const data = new FormData();
data.append("file", blob); data.append("file", blob);
// fetch("/upload", { await API.post("upload", data, {
// method: "POST", headers: {
// body: data, "Access-Control-Allow-Origin": "*",
// }).then((res) => { },
// res.json().then((data) => {
// console.log("Test", data);
// setattention(data);
// });
// });
await axios
.post(
"http://127.0.0.1:5000/upload",
data
)
.then((res) => {
setattention(res.data)
}) })
.catch((err) => { .then((res) => {
console.log(err); setattention(res.data);
}); })
.catch((err) => {
console.log(err);
});
}; };
return ( return (
<> <>
<div> <div>
<div> <div>
<div class="p-8 pb-2"> <div className="p-8 pb-2">
{" "} {" "}
<h1 class="text-4xl font-medium text-white text-center mt-2"> <h1 className="text-4xl font-medium text-white text-center mt-2">
{" "} {" "}
Attention level evaluation{" "} Attention level evaluation{" "}
</h1>{" "} </h1>{" "}
</div> </div>
<div className="demo-section px-4"> <div className="demo-section px-4">
<p class="m-2"> <p className="m-2">
Camera status:{" "} Camera status:{" "}
{ {
<span class="inline-flex items-center bg-green-600 rounded-full px-2 text-sm text-white py-1 font-medium"> <span className="inline-flex items-center bg-green-600 rounded-full px-2 text-sm text-white py-1 font-medium">
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
class="fill-current mr-1.5 text-white" className="fill-current mr-1.5 text-white"
viewBox="0 0 16 16" viewBox="0 0 16 16"
width="10" width="10"
height="10" height="10"
> >
<path d="M8 9.5a1.5 1.5 0 100-3 1.5 1.5 0 000 3z"></path> <path d="M8 9.5a1.5 1.5 0 100-3 1.5 1.5 0 000 3z"></path>
<path <path
fill-rule="evenodd" fillRule="evenodd"
d="M8 0a8 8 0 100 16A8 8 0 008 0zM1.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0z" d="M8 0a8 8 0 100 16A8 8 0 008 0zM1.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0z"
></path> ></path>
</svg> </svg>
...@@ -89,11 +81,11 @@ const AttentionSpan_screen = () => { ...@@ -89,11 +81,11 @@ const AttentionSpan_screen = () => {
</span> </span>
} }
</p> </p>
<div class="m-3"> <div className="m-3">
<div class="bg-gray-50 inline-flex border border-gray-200 rounded-lg text-gray-900 select-none divide-x"> <div className="bg-gray-50 inline-flex border border-gray-200 rounded-lg text-gray-900 select-none divide-x">
{" "} {" "}
<button <button
class="py-1.5 px-4 bg-gray-50 hover:bg-gray-100 active:bg-gray-200 first:rounded-l-lg last:rounded-r-lg" className="py-1.5 px-4 bg-gray-50 hover:bg-gray-100 active:bg-gray-200 first:rounded-l-lg last:rounded-r-lg"
disabled={ disabled={
recordWebcam.status === CAMERA_STATUS.OPEN || recordWebcam.status === CAMERA_STATUS.OPEN ||
recordWebcam.status === CAMERA_STATUS.RECORDING || recordWebcam.status === CAMERA_STATUS.RECORDING ||
...@@ -104,7 +96,7 @@ const AttentionSpan_screen = () => { ...@@ -104,7 +96,7 @@ const AttentionSpan_screen = () => {
Open camera Open camera
</button>{" "} </button>{" "}
<button <button
class="py-1.5 px-4 bg-gray-50 hover:bg-gray-100 active:bg-gray-200 first:rounded-l-lg last:rounded-r-lg" className="py-1.5 px-4 bg-gray-50 hover:bg-gray-100 active:bg-gray-200 first:rounded-l-lg last:rounded-r-lg"
disabled={ disabled={
recordWebcam.status === CAMERA_STATUS.CLOSED || recordWebcam.status === CAMERA_STATUS.CLOSED ||
recordWebcam.status === CAMERA_STATUS.PREVIEW recordWebcam.status === CAMERA_STATUS.PREVIEW
...@@ -114,7 +106,7 @@ const AttentionSpan_screen = () => { ...@@ -114,7 +106,7 @@ const AttentionSpan_screen = () => {
Close camera Close camera
</button>{" "} </button>{" "}
<button <button
class="py-1.5 px-4 bg-gray-50 hover:bg-gray-100 active:bg-gray-200 first:rounded-l-lg last:rounded-r-lg" className="py-1.5 px-4 bg-gray-50 hover:bg-gray-100 active:bg-gray-200 first:rounded-l-lg last:rounded-r-lg"
disabled={ disabled={
recordWebcam.status === CAMERA_STATUS.CLOSED || recordWebcam.status === CAMERA_STATUS.CLOSED ||
recordWebcam.status === CAMERA_STATUS.RECORDING || recordWebcam.status === CAMERA_STATUS.RECORDING ||
...@@ -125,28 +117,28 @@ const AttentionSpan_screen = () => { ...@@ -125,28 +117,28 @@ const AttentionSpan_screen = () => {
Start recording Start recording
</button>{" "} </button>{" "}
<button <button
class="py-1.5 px-4 bg-gray-50 hover:bg-gray-100 active:bg-gray-200 first:rounded-l-lg last:rounded-r-lg" className="py-1.5 px-4 bg-gray-50 hover:bg-gray-100 active:bg-gray-200 first:rounded-l-lg last:rounded-r-lg"
disabled={recordWebcam.status !== CAMERA_STATUS.RECORDING} disabled={recordWebcam.status !== CAMERA_STATUS.RECORDING}
onClick={recordWebcam.stop} onClick={recordWebcam.stop}
> >
Stop recording Stop recording
</button>{" "} </button>{" "}
<button <button
class="py-1.5 px-4 bg-gray-50 hover:bg-gray-100 active:bg-gray-200 first:rounded-l-lg last:rounded-r-lg" className="py-1.5 px-4 bg-gray-50 hover:bg-gray-100 active:bg-gray-200 first:rounded-l-lg last:rounded-r-lg"
disabled={recordWebcam.status !== CAMERA_STATUS.PREVIEW} disabled={recordWebcam.status !== CAMERA_STATUS.PREVIEW}
onClick={recordWebcam.retake} onClick={recordWebcam.retake}
> >
Retake Retake
</button>{" "} </button>{" "}
<button <button
class="py-1.5 px-4 bg-gray-50 hover:bg-gray-100 active:bg-gray-200 first:rounded-l-lg last:rounded-r-lg" className="py-1.5 px-4 bg-gray-50 hover:bg-gray-100 active:bg-gray-200 first:rounded-l-lg last:rounded-r-lg"
disabled={recordWebcam.status !== CAMERA_STATUS.PREVIEW} disabled={recordWebcam.status !== CAMERA_STATUS.PREVIEW}
onClick={recordWebcam.download} onClick={recordWebcam.download}
> >
Download Download
</button>{" "} </button>{" "}
<button <button
class="py-1.5 px-4 bg-gray-50 hover:bg-gray-100 active:bg-gray-200 first:rounded-l-lg last:rounded-r-lg" className="py-1.5 px-4 bg-gray-50 hover:bg-gray-100 active:bg-gray-200 first:rounded-l-lg last:rounded-r-lg"
disabled={recordWebcam.status !== CAMERA_STATUS.PREVIEW} disabled={recordWebcam.status !== CAMERA_STATUS.PREVIEW}
onClick={saveFile} onClick={saveFile}
> >
...@@ -154,7 +146,7 @@ const AttentionSpan_screen = () => { ...@@ -154,7 +146,7 @@ const AttentionSpan_screen = () => {
</button>{" "} </button>{" "}
</div> </div>
</div> </div>
<div class="mx-4"> <div className="mx-4">
<video <video
ref={recordWebcam.webcamRef} ref={recordWebcam.webcamRef}
style={{ style={{
...@@ -166,10 +158,10 @@ const AttentionSpan_screen = () => { ...@@ -166,10 +158,10 @@ const AttentionSpan_screen = () => {
}`, }`,
}} }}
autoPlay autoPlay
muted
/> />
</div> </div>
<div class="mx-4"> <div className="mx-4">
<video <video
ref={recordWebcam.previewRef} ref={recordWebcam.previewRef}
style={{ style={{
...@@ -180,7 +172,6 @@ const AttentionSpan_screen = () => { ...@@ -180,7 +172,6 @@ const AttentionSpan_screen = () => {
}`, }`,
}} }}
autoPlay autoPlay
muted
loop loop
/> />
</div> </div>
......
web-app/frontend/src/pages/student/Student.css
View file @ 99358509
.student-page-angry-grid { .student-page-angry-grid {
display: grid; display: grid;
grid-template-rows: 1fr ; grid-template-rows: 1fr;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr; grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
gap: 0px; gap: 0px;
...@@ -13,6 +13,11 @@ ...@@ -13,6 +13,11 @@
color: teal; color: teal;
} }
.info_badge {
position: absolute;
right: -307px;
}
#student-page-item-0 { #student-page-item-0 {
grid-row-start: 1; grid-row-start: 1;
grid-column-start: 1; grid-column-start: 1;
...@@ -91,9 +96,7 @@ ...@@ -91,9 +96,7 @@
grid-row-end: 4; grid-row-end: 4;
grid-column-end: 4; grid-column-end: 4;
height: 80vh; height: 80vh;
width: 120ch; width: 120ch;
} }
web-app/frontend/src/pages/student/Student.jsx
View file @ 99358509
...@@ -57,7 +57,7 @@ const Student = () => { ...@@ -57,7 +57,7 @@ const Student = () => {
<button <button
onClick={() => navigate("/features")} onClick={() => navigate("/features")}
type="button" type="button"
className="text-white bg-purple-700 hover:bg-purple-800 focus:outline-none focus:ring-4 focus:ring-purple-300 font-medium rounded-full text-sm px-5 py-2.5 text-center mb-2 dark:bg-purple-600 dark:hover:bg-purple-700 dark:focus:ring-purple-900" className="info_badge text-white bg-yellow-700 hover:bg-yellow-800 focus:outline-none focus:ring-4 focus:ring-yellow-300 font-medium rounded-full text-sm px-5 py-2.5 text-center mb-2 dark:bg-yellow-600 dark:hover:bg-yellow-700 dark:focus:ring-yellow-900"
> >
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment