1. Create a folder named sliding-window.
2. Create a file named script.js inside the folder and paste the following content:
function id(id) {
return document.getElementById(id);
}
var count = 0;
var pattern, text, Psize, Tsize;
var idcountrater = 0;
var conti = 0;
const slidingWindowTech = async (pattern, Psize, sum, k) => {
console.log("hola")
var max_sum = 0;
let maxi = document.createElement('div');
maxi.id = "message";
maxi.classList.add("message");
maxi.innerText = `Fluidity incident count is ${max_sum}`
console.log(maxi)
id("pattern_text").appendChild(maxi);
console.log(`Setting incidenetActive to false`);
let incidentActive = false;
let current_sum = 0;
let windowMean = 0;
let windowSD = 0;
let current = document.createElement('div');
current.id = "message";
current.classList.add("message");
current.innerText = `CurrentSum is ${current_sum}`
id("pattern_text").appendChild(current);
let mean = document.createElement('div');
mean.id = "message";
mean.classList.add("message");
mean.innerText = `Mean is ${current_sum}`
id("pattern_text").appendChild(mean);
let sd = document.createElement('div');
sd.id = "message";
sd.classList.add("message");
sd.innerText = `SD is ${current_sum}`
id("pattern_text").appendChild(sd);
let upfd = document.createElement('div');
upfd.id = "message";
upfd.classList.add("message");
upfd.innerText = `UPFD (Mean + 2SD) is ${current_sum}`
id("pattern_text").appendChild(upfd);
for (let i = 0; i < Psize - k + 1; i++) {
await new Promise((resolve) =>
setTimeout(() => {
resolve();
}, 1000)
)
console.log(i + " " + (i + k - 1));
id(i).style.borderLeft = "2px solid white"
id(i).style.borderTop = "2px solid white"
id(i).style.borderBottom = "2px solid white"
id(i + 1).style.borderBottom = "2px solid white"
id(i + 1).style.borderTop = "2px solid white"
id(i + 2).style.borderTop = "2px solid white"
id(i + 2).style.borderBottom = "2px solid white"
id((i + k - 1)).style.borderRight = "2px solid white";
id(i + k - 1).style.borderTop = "2px solid white"
id(i + k - 1).style.borderBottom = "2px solid white"
if (i != 0) {
// current_sum=current_sum-pattern[i-1]
id(i - 1).style.color = "Red"
await new Promise((resolve) =>
setTimeout(() => {
resolve();
}, 1000)
)
current_sum = current_sum - pattern[i - 1]
current.innerText =
`CurrentSum after subtracting ${i - 1}th ` +
`element from ${i} window is ${current_sum}`
id(i - 1).style.color = "white"
await new Promise((resolve) =>
setTimeout(() => {
resolve();
}, 1000)
)
id(i + k - 1).style.color = "green"
await new Promise((resolve) =>
setTimeout(() => {
resolve();
}, 1000)
)
current_sum = current_sum + pattern[i + k - 1]
current.innerText =
`CurrentSum after adding ${i + k - 1}th in ${i} window is ${current_sum}`
windowMean = current_sum / k;
mean.innerText = `Current mean is ${windowMean}`
// Compute window standard deviation
squared_sum = 0;
for (let j = i; j < i + k; j++) {
squared_sum += (pattern[j] - windowMean)*(pattern[j] - windowMean);
}
windowSD = Math.sqrt(squared_sum / k);
sd.innerText = `Current SD is ${windowSD}`
upfd.innerText = `Current UPFD is ${windowMean + 2 * windowSD}`
id(i + k - 1).style.color = "white"
await new Promise((resolve) =>
setTimeout(() => {
resolve();
}, 1000)
)
}
else {
for (let j = 0; j < k; j++) {
console.log("hola 1 " + current_sum)
id((i + j)).style.color = "Red"
await new Promise((resolve) =>
setTimeout(() => {
resolve();
}, 1000)
)
current_sum = current_sum + pattern[i + j];
current.innerText =
`CurrentSum is for ${i}th window ${current_sum}`
await new Promise((resolve) =>
setTimeout(() => {
resolve();
}, 1000)
)
id((i + j)).style.color = "white"
}
windowMean = current_sum / k;
mean.innerText = `Current mean is ${windowMean}`
// Compute window standard deviation
squared_sum = 0;
for (let j = i; j < i + k; j++) {
squared_sum += (pattern[j] - windowMean)*(pattern[j] - windowMean);
}
windowSD = Math.sqrt(squared_sum / k);
console.log(`Current Mean here is ${windowMean}`)
sd.innerText = `Current SD is ${windowSD}`
upfd.innerText = `Current UPFD is ${windowMean + 2 * windowSD}`
}
id(i).style.borderLeft = "none"
id(i).style.borderTop = "none"
id(i).style.borderBottom = "none"
id(i + 1).style.borderBottom = "none"
id(i + 1).style.borderTop = "none"
id(i + 2).style.borderTop = "none"
id(i + 2).style.borderBottom = "none"
id((i + k - 1)).style.borderRight = "none";
id(i + k - 1).style.borderTop = "none"
id(i + k - 1).style.borderBottom = "none"
//console.log(current_sum)
// Update result if required.
// max_sum = max(current_sum, max_sum);
//if (current_sum > max_sum) max_sum = current_sum;
// Report one incident when and until UPFD is above threshold.
console.log(`incidentActive is ${incidentActive}`)
if (windowMean + 2 * windowSD > 16 && !incidentActive) {
max_sum += 1;
incidentActive = true;
console.log(`Setting incidentActive to true`)
}
// Reset once UPFD is back to normal
if (incidentActive && windowMean + 2 * windowSD <= 16) {
incidentActive = false;
}
maxi.innerText = `Fluidity incident count is ${max_sum}`
}
current.style.display = "none"
}
let idcount = 0;
window.onload = async () => {
id("displayer").style.display = "none";
id("start").addEventListener('click', () => {
id("start").style.display = "none"
id("displayer").style.display = "flex";
//pattern = [16, 16, 16, 32, 16, 16, 16, 16, 16, 32, 16, 16, 16]
pattern = [32, 32, 32, 32, 32, 32, 32, 32, 32, 32, 32, 32, 32]
Psize = 13
sum = 24
let idcount1 = 0;
for (let i = 0; i < Psize; i++) {
let tile = document.createElement('span');
tile.id = idcount;
tile.classList.add("tile");
tile.innerText = pattern[i];
id("pattern").appendChild(tile);
idcount++;
}
slidingWindowTech(pattern, Psize, sum, 4)
})
}
3. Create a file named style.css and paste the following content:
* {
color: white;
font-family: "Open sans", sans-serif;
}
html {
background-color: black;
}
body {
display: flex;
flex-direction: column;
align-items: center;
height: 100vmin;
}
h1 span {
font-size: 6vmin;
font-weight: normal;
text-shadow: 0 0 20px cyan,
0 0 40px cyan,
0 0 80px cyan;
}
#container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 80%;
width: 80%;
}
#displayer {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
height: 90%;
}
#pattern,
#message {
width: 100%;
height: 7vmin;
margin: 3vmin;
font-size: 5vmin;
display: flex;
align-items: center;
justify-content: center;
}
#message {
color: cyan;
font-size: 2vmin;
}
#pattern_text {
width: 100%;
height: 5vmin;
margin: 3vmin;
font-size: 5vmin;
display: flex;
align-items: center;
justify-content: center;
color: g;
}
#pattern_text {
width: 100%;
height: 5vmin;
margin: 3vmin;
font-size: 5vmin;
display: flex;
align-items: center;
justify-content: center;
color: g;
}
.tile {
width: 6vmin;
height: 6vmin;
margin: 10px;
text-align: center;
height: fit-content;
border: 2px pink;
}
#start {
align-self: center;
background-color: black;
font-size: 3vmin;
box-sizing: border-box;
padding: 1vmin;
color: white;
cursor: pointer;
border: none;
margin-top: 2vmin;
transition: 0.5s ease-in-out;
font-weight: bold;
letter-spacing: 4px;
}
#start:hover {
transform: scale(1.5);
text-shadow: 0 0 10px cyan,
0 0 20px cyan,
0 0 40px cyan;
}
h1 {
margin-top: 0;
text-align: center;
padding: 1vmin;
margin-bottom: 1vmin;
width: 100%;
font-size: 5vmin;
font-weight: normal;
letter-spacing: 2px;
border-bottom: 1px solid white;
}
4. Create a file named index.html and paste the following content:
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<link href=
"https://fonts.googleapis.com/css2?family=Open+Sans:wght@300&display=swap"
rel="stylesheet" />
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
<title>Document</title>
</head>
<body>
<h1>
<span class="1">S</span>liding
<span class="2">W</span>indow
<span class="3">T</span>echnique
<span>Visualizer</span>
</h1>
<div id="message">
We will find the mean and UPFD using
sliding window technique in certain sized
window when window size is 4
</div>
<div id="threshold">
<table>
<tr>
<td>Metric</td>
<td>Expected Value</td>
</tr>
<tr>
<td>Rolling FPS</td>
<td>60</td>
</tr>
<tr>
<td>Rolling UPFD</td>
<td>16</td>
</tr>
</table>
</div>
<div id="container">
<div id="displayer">
<div id="pattern"></div>
<div id="pattern_text"></div>
</div>
<div id="start">Begin</div>
</div>
</body>
</html>
5. Open index.html in a Browser and click Begin button.
