Widget:PageTableDemo: 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: | ||
<includeonly> | <includeonly> | ||
<div id="pageTableDemo"> | |||
<h4>Interactive demonstration</h4> | <h4>Interactive demonstration</h4> | ||
<p><canvas id="pt_canvas" width="700" height="460"></canvas></p> | <p><canvas id="pt_canvas" width="700" height="460"></canvas></p> | ||
| Line 19: | Line 20: | ||
Click a page table entry to change the valid bit and set the page | Click a page table entry to change the valid bit and set the page | ||
frame number.</p> | frame number.</p> | ||
</div> | |||
</blockquote> | </blockquote> | ||
<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; | |||
const VM_X = 100; | const VM_X = 100; | ||
const VM_Y = 40; | const VM_Y = 40; | ||
| Line 42: | Line 51: | ||
function draw() { | function draw() { | ||
// Set stroke style according to theme | |||
ctx.strokeStyle = usingDarkTheme ? "white" : "black"; | |||
// Set colour of explanatory text | |||
document.getElementById("pageTableDemo").style.color = "white"; | |||
//Draw Virtual Memory | //Draw Virtual Memory | ||
| Line 116: | Line 130: | ||
// Heading | // Heading | ||
ctx.font = '25px Arial'; | ctx.font = '25px Arial'; | ||
ctx.fillStyle = "blue"; | ctx.fillStyle = usingDarkTheme ? "aqua" : "blue"; | ||
ctx.fillText('Physical Memory', xpos - 55, ypos - 20); | ctx.fillText('Physical Memory', xpos - 55, ypos - 20); | ||
| Line 125: | Line 139: | ||
// Physical address | // Physical address | ||
ctx.fillStyle = "Blue"; | ctx.fillStyle = usingDarkTheme ? "aqua" : "Blue"; | ||
for (var i = 0; i < PAGE_COUNT; i++) | for (var i = 0; i < PAGE_COUNT; i++) | ||
{ | { | ||
Revision as of 15:34, 13 August 2019
This widget demonstrates the operation of a page table.
Interactive demonstration
Virtual Address in hex
Virtual Address in binary
Virtual Address index (3 bits)
Virtual Address offset (5 bits)
Physical Address
Exercise: play with this mechanism until you understand the principle.
Click a page table entry to change the valid bit and set the page frame number.
