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 @@
.containerb .btn {
position: absolute;
top: 50%;
top: 92%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
background-color: #555;
color: white;
font-size: 16px;
padding: 12px 24px;
padding: 15px 35px;
border: none;
cursor: pointer;
border-radius: 5px;
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 {
background-color: black;
......
web-app/frontend/src/components/activities/ethicalClearence.jsx
View file @ 99358509
......@@ -7,6 +7,18 @@ import { useNavigate } from "react-router-dom";
import API from "../../config/api";
import bgImage1 from "../../assets/bg.jpg";
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 navigate = useNavigate();
......@@ -16,6 +28,8 @@ const EthicalClearenceScreen = () => {
const [parentSignature, setParentSignature] = useState("WIP");
const [childData, setChildData] = useState([{}]);
const [isFormFilled, setIsFormFilled] = useState(false);
const recordWebcam: RecordWebcamHook = useRecordWebcam(OPTIONS);
const headerConfig = {
headers: {
"Access-Control-Allow-Origin": "*",
......@@ -34,6 +48,25 @@ const EthicalClearenceScreen = () => {
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) => {
e.preventDefault();
const selectedChild = childData.find((item) => item.id === childCandidate);
......@@ -68,6 +101,11 @@ const EthicalClearenceScreen = () => {
}
};
const onStart = () => {
recordWebcam.close();
navigate("/activities");
};
return (
<>
<div>
......@@ -212,7 +250,28 @@ const EthicalClearenceScreen = () => {
</div>
<div className="containerb mt-10 mb-8 py-1 sm:mt-0">
<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>
</>
)}
......
web-app/frontend/src/pages/attention_demo/attentionspan.jsx
View file @ 99358509
import React, { useState, useEffect } from "react";
import axios from "axios";
import "./attentionspan.css";
import API from "../../config/api";
import { useRecordWebcam, CAMERA_STATUS } from "react-record-webcam";
import type {
RecordWebcamOptions,
......@@ -34,54 +35,45 @@ const AttentionSpan_screen = () => {
console.log("testing", blob);
const data = new FormData();
data.append("file", blob);
// fetch("/upload", {
// method: "POST",
// body: data,
// }).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)
await API.post("upload", data, {
headers: {
"Access-Control-Allow-Origin": "*",
},
})
.catch((err) => {
console.log(err);
});
.then((res) => {
setattention(res.data);
})
.catch((err) => {
console.log(err);
});
};
return (
<>
<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{" "}
</h1>{" "}
</div>
<div className="demo-section px-4">
<p class="m-2">
<p className="m-2">
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
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"
width="10"
height="10"
>
<path d="M8 9.5a1.5 1.5 0 100-3 1.5 1.5 0 000 3z"></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"
></path>
</svg>
......@@ -89,11 +81,11 @@ const AttentionSpan_screen = () => {
</span>
}
</p>
<div class="m-3">
<div class="bg-gray-50 inline-flex border border-gray-200 rounded-lg text-gray-900 select-none divide-x">
<div className="m-3">
<div className="bg-gray-50 inline-flex border border-gray-200 rounded-lg text-gray-900 select-none divide-x">
{" "}
<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.OPEN ||
recordWebcam.status === CAMERA_STATUS.RECORDING ||
......@@ -104,7 +96,7 @@ const AttentionSpan_screen = () => {
Open camera
</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.CLOSED ||
recordWebcam.status === CAMERA_STATUS.PREVIEW
......@@ -114,7 +106,7 @@ const AttentionSpan_screen = () => {
Close camera
</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.CLOSED ||
recordWebcam.status === CAMERA_STATUS.RECORDING ||
......@@ -125,28 +117,28 @@ const AttentionSpan_screen = () => {
Start recording
</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}
onClick={recordWebcam.stop}
>
Stop recording
</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}
onClick={recordWebcam.retake}
>
Retake
</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}
onClick={recordWebcam.download}
>
Download
</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}
onClick={saveFile}
>
......@@ -154,7 +146,7 @@ const AttentionSpan_screen = () => {
</button>{" "}
</div>
</div>
<div class="mx-4">
<div className="mx-4">
<video
ref={recordWebcam.webcamRef}
style={{
......@@ -166,10 +158,10 @@ const AttentionSpan_screen = () => {
}`,
}}
autoPlay
muted
/>
</div>
<div class="mx-4">
<div className="mx-4">
<video
ref={recordWebcam.previewRef}
style={{
......@@ -180,7 +172,6 @@ const AttentionSpan_screen = () => {
}`,
}}
autoPlay
muted
loop
/>
</div>
......
web-app/frontend/src/pages/student/Student.css
View file @ 99358509
.student-page-angry-grid {
display: grid;
grid-template-rows: 1fr ;
grid-template-rows: 1fr;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
gap: 0px;
......@@ -13,6 +13,11 @@
color: teal;
}
.info_badge {
position: absolute;
right: -307px;
}
#student-page-item-0 {
grid-row-start: 1;
grid-column-start: 1;
......@@ -91,9 +96,7 @@
grid-row-end: 4;
grid-column-end: 4;
height: 80vh;
width: 120ch;
}
web-app/frontend/src/pages/student/Student.jsx
View file @ 99358509
......@@ -57,7 +57,7 @@ const Student = () => {
<button
onClick={() => navigate("/features")}
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
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