Skip to content

2
2022-074
Commit 65c1671e authored by Wasala W.L.M.K.S - IT19177106's avatar Wasala W.L.M.K.S - IT19177106
Browse files
Options

Add pause,stop to task. Add background music. Add task2

parent a81dad2a
Expand all Show whitespace changes
Inline Side-by-side
Showing with 2193 additions and 102 deletions
frontend/task1.html
View file @ 65c1671e
......@@ -6,6 +6,8 @@
<script src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.7.1/dist/chart.min.js"></script>
<!-- dropdown hide -->
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="webgazer_calib.js" type="text/javascript"></script>
<style type="text/css">
body {
......@@ -16,6 +18,44 @@
height: 130px;
position: absolute;
}
.dropdown {
position: absolute;
display: none;
width: 200px;
height: 30px;
top: 40%;
left: 25%;
font-size: 17px;
background: #f8faf8;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content option {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content option:hover {
background-color: #ddd;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
</style>
</head>
......@@ -41,16 +81,74 @@
<img id="s18" class="slide" style="display: none;" src="images/task1/F16R.png">
<img id="s19" class="slide" style="display: none;" src="images/task1/F17R.png">
<img id="result" class="slide" style="display: none;" src="images/task1/result.png">
<img id="result" class="slide" style="display: none;" src="images/task1/result1.png">
<div id="resultChart"
style="display: none; position: absolute; top:190px; left:50%; z-index: 9; width: 500px; height: 300px;">
<canvas id="myChart" width="500px" height="300px"></canvas>
</div>
<div id="resultChart" style="display: none; position: absolute;" >
<canvas id="myChart" width="400" height="400"></canvas>
<!-- dropdown -->
<!-- <div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
<a href="#">Slide 1</a>
<a href="#">Slide 2</a>
<a href="#">Slide 3</a>
<a href="#">Slide 4</a>
<a href="#">Slide 5</a>
<a href="#">Slide 6</a>
<a href="#">Slide 7</a>
<a href="#">Slide 8</a>
<a href="#">Slide 9</a>
<a href="#">Slide 10</a>
<a href="#">Slide 11</a>
<a href="#">Slide 12</a>
<a href="#">Slide 13</a>
<a href="#">Slide 14</a>
<a href="#">Slide 15</a>
<a href="#">Slide 16</a>
<a href="#">Slide 17</a>
<a href="#">Slide 18</a>
<a href="#">Slide 19</a>
</div>
</div> -->
<div >
<select id="slideList" class="dropdown" onchange="slideChange()">
<option value="none" selected disabled hidden>Select a Slide</option>
<option value="1">Slide 1</option>
<option value="2">Slide 2</option>
<option value="3">Slide 3</option>
<option value="4">Slide 4</option>
<option value="5">Slide 5</option>
<option value="6">Slide 6</option>
<option value="7">Slide 7</option>
<option value="8">Slide 8</option>
<option value="9">Slide 9</option>
<option value="10">Slide 10</option>
<option value="11">Slide 11</option>
<option value="12">Slide 12</option>
<option value="13">Slide 13</option>
<option value="14">Slide 14</option>
<option value="15">Slide 15</option>
<option value="16">Slide 16</option>
<option value="17">Slide 17</option>
<option value="18">Slide 18</option>
<option value="19">Slide 19</option>
</select>
</div>
<!-- <p id="objectName" style="position: absolute; top:500px; left: 500px;">Object name</p> -->
<div id="message"></div>
<script type="text/javascript">
function slideChange() {
var slideNumber = document.getElementById("slideList").value;
showResults(slideNumber);
}
sessionStorage.setItem("task_name", "task1");
boundaryArr = {
......@@ -793,12 +891,24 @@
var percentArr = {}
var slideID = null;
var slide = "ch";
//pause variable(use to store the stste of game)
var isPaused = false;
var isGameOver = false;
var a
var started = false;
var taskLoop;
webgazer.setGazeListener(function (data, elapsedTime) {
if (data == null) {
return;
}
if(!started){
showSlide();
taskLoop = setInterval(showSlide, 7000);
started = true;
}
var xprediction = data.x; //these x coordinates are relative to the viewport
var yprediction = data.y; //these y coordinates are relative to the viewport
// console.log(elapsedTime); //elapsed time is based on time since begin was called
......@@ -823,22 +933,6 @@
}).begin();
// hide #webgazerVideoContainer
// $("#webgazerVideoContainer").hide();
// webgazer.setRegression("weightedRidge");
// webgazer.begin();
// var prediction = webgazer.getCurrentPrediction();
// if (prediction) {
// var x = prediction.x;
// var y = prediction.y;
// console.log(x,y);
// }
// printPred();
// printPred();
// printPred();
// printPred();
// const predloop = setInterval(printPred, 1000);
function printPred() {
var prediction = webgazer.getCurrentPrediction();
......@@ -1649,13 +1743,56 @@
// var type = "s";
var increment = 1;
showSlide();
const taskLoop = setInterval(showSlide, 7000);
//function for pause game
document.addEventListener('keyup', function (e) {
//32 is space bar button ASCII value
console.log("e.which");
console.log(e.which);
console.log("/e.which");
alert("Game is paused");
if (e.which === 32 && isGameOver == false) {
//if(isPaused) resumeGame();
//else pasuseGame();
}
});
// function pasuseGame(){
// clearInterval(interval);
// isPaused = true;
// canvas.style.opacity = 0.5;
// canvascontext.font = "90px tahoma";
// canvascontext.fillstyle = "white";
// canvascontext.textAlign = "center";
// canvascontext.textBaseline = "middle";
// canvascontext.fillText("Game Paused", 400,250)
// }
// function resumeGame(){
// isPaused = false;
// canvascontext.clearRect(0, 0, canvas.width, canvas.height);
// canvas.style.opacity = 1;
// interval = setInterval(showSlide, 20);
// }
// function gameOver(){
// isGameOver = true;
// canvas.style.opacity = 0.5;
// canvascontext.font = "90px tahoma";
// canvascontext.fillstyle = "white";
// canvascontext.textAlign = "center";
// canvascontext.textBaseline = "middle";
// canvascontext.fillText("Game Over", 400,170);
// }
function showSlide() {
if (increment >= 20) {
$(".slide").hide();
$("#result").show();
$("#slideList").show();
slide = "result";
clearInterval(taskLoop);
......@@ -1688,7 +1825,7 @@
}
}
showResults();
//showResults(a);
sendGazeDataToBackend(arr, percentArr);
......@@ -1739,21 +1876,24 @@
}
});
}
var myChart;
function showResults(a) {
function showResults() {
var dynamicColors = function() {
var dynamicColors = function () {
var r = Math.floor(Math.random() * 255);
var g = Math.floor(Math.random() * 255);
var b = Math.floor(Math.random() * 255);
return "rgb(" + r + "," + g + "," + b + ")";
};
var slidename = "s" +a;
var labelsArr = Object.getOwnPropertyNames(percentArr["s4"])
var labelsArr = Object.getOwnPropertyNames(percentArr[slidename]);
var valuesArr = [];
var colorArr = [];
labelsArr.forEach((label)=>{
valuesArr.push(percentArr["s4"][label]);
labelsArr.forEach((label) => {
valuesArr.push(percentArr[slidename][label]);
colorArr.push(dynamicColors());
})
......@@ -1761,7 +1901,7 @@
labels: labelsArr,
datasets: [
{
label: 'Slide 4',
label: 'Slide ' + a,
data: valuesArr,
backgroundColor: colorArr,
}
......@@ -1769,23 +1909,28 @@
};
const config = {
type: 'pie',
type: 'bar',
data: data,
options: {
responsive: true,
plugins: {
legend: {
position: 'top',
display: false
},
title: {
display: true,
text: 'Results'
text: 'Slide ' + a
}
}
},
};
const myChart = new Chart(document.getElementById('myChart'), config);
if(myChart){
console.log("AFASFASFASFASFASFSAFSAAFAFASFSAFASFDFAFA");
myChart.destroy();
}
myChart = new Chart(document.getElementById('myChart'), config);
$("#dropdown").show();
$("#resultChart").show();
}
......
frontend/task2.html 0 → 100644
View file @ 65c1671e
This diff is collapsed.
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