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.
No comments:
Post a Comment