Widget:Paging: Difference between revisions
From COMP15212 Wiki
 Yuron [   PHRhYmxlIGNsYXNzPSJ0d3BvcHVwIj48dHI+PHRkIGNsYXNzPSJ0d3BvcHVwLWVudHJ5dGl0bGUiPkdyb3Vwczo8L3RkPjx0ZD51c2VyPGJyIC8+YnVyZWF1Y3JhdDxiciAvPmludGVyZmFjZS1hZG1pbjxiciAvPnN5c29wPGJyIC8+PC90ZD48L3RyPjwvdGFibGU+] (talk | contribs)m (1 revision imported) |
pc>Yuron No edit summary |
||
| Line 6: | Line 6: | ||
<p><canvas id="paging_canvas" width="850" height="360"></canvas></p> | <p><canvas id="paging_canvas" width="850" height="360"></canvas></p> | ||
<script> | <script> | ||
// Set to use dark theme if the body's background color is too dark | |||
var bodyColour = window.getComputedStyle(document.querySelector('body')).getPropertyValue("background-color").match(/rgba?\((.*)\)/)[1].split(',').map(Number); | |||
var usingDarkTheme; | |||
if (bodyColour[3] === 0) | |||
usingDarkTheme = false; | |||
else | |||
usingDarkTheme = bodyColour.reduce((a, b) => a + b, 0) < 255 * 1.5; | |||
// Javascript interactive demo of paging operations. | // Javascript interactive demo of paging operations. | ||
| Line 21: | Line 29: | ||
const labelPositionY = 30; | const labelPositionY = 30; | ||
const labelString = "Paging Demonstration"; | const labelString = "Paging Demonstration"; | ||
var ctx = | var ctx = canvas.getContext('2d'); | ||
var mousePosition; | var mousePosition; | ||
var mouseX; | var mouseX; | ||
| Line 144: | Line 152: | ||
function draw() { | function draw() { | ||
// Set stroke style according to theme | |||
ctx.strokeStyle = usingDarkTheme ? "grey" : "black"; | |||
drawLabel(); //Draw Label | drawLabel(); //Draw Label | ||
drawVirtual(virtual, pages); //Draw memory | drawVirtual(virtual, pages); //Draw memory | ||
ctx.font = "20px Arial"; // and label | ctx.font = "20px Arial"; // and label | ||
ctx.fillStyle = "black" | ctx.fillStyle = usingDarkTheme ? "white" : "black" | ||
ctx.fillText("Virtual memory", virtual.X - 15, virtual.Y - 10); | ctx.fillText("Virtual memory", virtual.X - 15, virtual.Y - 10); | ||
ctx.font = "14px Arial"; | ctx.font = "14px Arial"; | ||
ctx.fillText("Read", virtual.X, | ctx.fillText("Read", virtual.X, | ||
virtual.Y + virtual.BlockHeight * virtual.BlockNum + 14); | virtual.Y + virtual.BlockHeight * virtual.BlockNum + 14); | ||
| Line 160: | Line 170: | ||
drawPins(pins); | drawPins(pins); | ||
ctx.font = "20px Arial"; // and label | ctx.font = "20px Arial"; // and label | ||
ctx.fillStyle = "black" | ctx.fillStyle = usingDarkTheme ? "white" :"black" | ||
ctx.fillText("Physical memory", physical.X - 20, physical.Y - 10); | ctx.fillText("Physical memory", physical.X - 20, physical.Y - 10); | ||
| Line 367: | Line 377: | ||
function printInfo(str1, str2) { | function printInfo(str1, str2) { | ||
ctx.font = "16px Arial"; | ctx.font = "16px Arial"; | ||
ctx.fillStyle = "black"; | ctx.fillStyle = usingDarkTheme ? "white" :"black"; | ||
ctx.clearRect((virtual.X - 10), | ctx.clearRect((virtual.X - 10), | ||
| Line 486: | Line 496: | ||
if (LRU[i] < 100) ctx.font = "16px Courier new"; | if (LRU[i] < 100) ctx.font = "16px Courier new"; | ||
else ctx.font = "12px Courier new"; | else ctx.font = "12px Courier new"; | ||
ctx.fillStyle = "black"; | ctx.fillStyle = usingDarkTheme ? "white" :"black"; | ||
ctx.fillText(LRU[i], obj.X + ((LRU[i] < 10) ? 10 : 4), | ctx.fillText(LRU[i], obj.X + ((LRU[i] < 10) ? 10 : 4), | ||
obj.Y + obj.BlockHeight * i + 20); | obj.Y + obj.BlockHeight * i + 20); | ||
| Line 584: | Line 594: | ||
function drawLabel() { | function drawLabel() { | ||
ctx.font = '30px Arial'; | ctx.font = '30px Arial'; | ||
ctx.fillStyle = "black"; | ctx.fillStyle = usingDarkTheme ? "white" :"black"; | ||
ctx.fillText(labelString, labelPositionX, labelPositionY); | ctx.fillText(labelString, labelPositionX, labelPositionY); | ||
} | } | ||
| Line 632: | Line 642: | ||
context.fillStyle = col; | context.fillStyle = col; | ||
context.fill(); | context.fill(); | ||
context.fillStyle = "black"; | context.fillStyle = usingDarkTheme ? "white" :"black"; | ||
context.stroke(); | context.stroke(); | ||
} | } | ||
Revision as of 15:41, 13 August 2019
This widget demonstrates the principle of memory paging.
