Widget:PageTableDemo: Difference between revisions
From COMP15212 Wiki
pc>Yuron (Fix touch coordinates) |
W81054ch [PHRhYmxlIGNsYXNzPSJ0d3BvcHVwIj48dHI+PHRkIGNsYXNzPSJ0d3BvcHVwLWVudHJ5dGl0bGUiPkdyb3Vwczo8L3RkPjx0ZD51c2VyPGJyIC8+YnVyZWF1Y3JhdDxiciAvPmludGVyZmFjZS1hZG1pbjxiciAvPnN5c29wPGJyIC8+PC90ZD48L3RyPjwvdGFibGU+] (talk | contribs) No edit summary |
||
(6 intermediate revisions by 3 users not shown) | |||
Line 1: | Line 1: | ||
<noinclude> | <noinclude> | ||
This widget demonstrates the operation of a page table. | This widget demonstrates the operation of a page table. | ||
[{{canonicalurl:Special:ShowWidget|widget=PageTableDemo&library}} Dark-mode widget for embedding] | |||
{{#widget:PageTableDemo}} | {{#widget:PageTableDemo}} | ||
Line 6: | Line 8: | ||
<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 22: | ||
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 53: | ||
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 132: | ||
// 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 141: | ||
// 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++) | ||
{ | { |
Latest revision as of 17:55, 22 November 2019
This widget demonstrates the operation of a page table.
Dark-mode widget for embedding
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.