Widget:FAT: Difference between revisions
From COMP15212 Wiki
 Yuron [   PHRhYmxlIGNsYXNzPSJ0d3BvcHVwIj48dHI+PHRkIGNsYXNzPSJ0d3BvcHVwLWVudHJ5dGl0bGUiPkdyb3Vwczo8L3RkPjx0ZD51c2VyPGJyIC8+YnVyZWF1Y3JhdDxiciAvPmludGVyZmFjZS1hZG1pbjxiciAvPnN5c29wPGJyIC8+PC90ZD48L3RyPjwvdGFibGU+] (talk | contribs)m (1 revision imported) |
pc>Yuron No edit summary |
||
| Line 3: | Line 3: | ||
</noinclude> | </noinclude> | ||
<includeonly> | <includeonly> | ||
<p><canvas id=" | <p><canvas id="fat_canvas" width="800" height="260"></canvas></p> | ||
<div id="instructions"> | |||
<p>Click on the numbers to replace that directory entry with a file with that many clusters. (‘0’ implicitly deletes the file.) The FAT entries should behave in the way described above.</p> | <p>Click on the numbers to replace that directory entry with a file with that many clusters. (‘0’ implicitly deletes the file.) The FAT entries should behave in the way described above.</p> | ||
| Line 10: | Line 10: | ||
<p>Remember: the FAT is a <em>map</em> and each FAT entry has a corresponding cluster of data on the disk.</p> | <p>Remember: the FAT is a <em>map</em> and each FAT entry has a corresponding cluster of data on the disk.</p> | ||
</div> | |||
<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; | |||
// Interactive FAT demonstration | |||
const NO_FILES = 5; | const NO_FILES = 5; | ||
| Line 31: | Line 41: | ||
const ERROR_Y = FILE_AREA_Y + FBUTTON * NO_FILES; | const ERROR_Y = FILE_AREA_Y + FBUTTON * NO_FILES; | ||
var canvas = document.getElementById(" | var canvas = document.getElementById("fat_canvas"); | ||
var ctx = | var ctx = canvas.getContext('2d'); | ||
var mouse = { | var mouse = { | ||
x: 0, | x: 0, | ||
| Line 148: | Line 158: | ||
function draw() { | function draw() { | ||
if (usingDarkTheme) | |||
document.getElementById("instructions").style.color = "white"; | |||
draw_label(); | draw_label(); | ||
| Line 163: | Line 175: | ||
function draw_label() { | function draw_label() { | ||
ctx.save(); | ctx.save(); | ||
ctx.font = '30px | ctx.font = '30px Arial'; | ||
ctx.fillStyle = "black"; | ctx.fillStyle = usingDarkTheme ? "white" : "black"; | ||
ctx.fillText("FAT demonstration", 200, 30); | ctx.fillText("FAT demonstration", 200, 30); | ||
ctx.restore(); | ctx.restore(); | ||
| Line 185: | Line 197: | ||
var y = FILE_AREA_Y + (FBUTTON * NO_FILES) / 2 + 3; | var y = FILE_AREA_Y + (FBUTTON * NO_FILES) / 2 + 3; | ||
ctx.save(); | ctx.save(); | ||
ctx.font = '12px | ctx.font = '12px Arial'; | ||
ctx.fillStyle = "black"; | ctx.fillStyle = usingDarkTheme ? "white" : "black"; | ||
ctx.fillText("The numbers", x, y - 21); | ctx.fillText("The numbers", x, y - 21); | ||
ctx.fillText(" adjust the", x, y - 7); | ctx.fillText(" adjust the", x, y - 7); | ||
| Line 197: | Line 209: | ||
if (labels_too) { | if (labels_too) { | ||
ctx.save(); | ctx.save(); | ||
ctx.font = '12px | ctx.font = '12px Arial'; | ||
ctx.fillStyle = "black"; | ctx.fillStyle = usingDarkTheme ? "white" : "black"; | ||
ctx.fillText("Directory", FILE_AREA_X + FBUTTON * 11, FILE_AREA_Y - | ctx.fillText("Directory", FILE_AREA_X + FBUTTON * 11 - 2, FILE_AREA_Y - 4); | ||
ctx.fillText("Len.", FILE_AREA_X + FBUTTON * 11, | ctx.fillText("Len.", FILE_AREA_X + FBUTTON * 11 - 2, | ||
FILE_AREA_Y + NO_FILES * FBUTTON + | FILE_AREA_Y + NO_FILES * FBUTTON + 12); | ||
ctx.fillText(" Ptr.", FILE_AREA_X + FBUTTON * 12, | ctx.fillText(" Ptr.", FILE_AREA_X + FBUTTON * 12 + 2, | ||
FILE_AREA_Y + NO_FILES * FBUTTON + | FILE_AREA_Y + NO_FILES * FBUTTON + 12); | ||
ctx.restore(); | ctx.restore(); | ||
} | } | ||
| Line 276: | Line 288: | ||
} | } | ||
if (labels_too) { | if (labels_too) { | ||
ctx.font = '16px | ctx.font = '16px Arial'; | ||
ctx.fillText("File Allocation Table", FAT_X + FAT_CELL * 20, FAT_Y - 5); | ctx.fillText("File Allocation Table", FAT_X + FAT_CELL * 20, FAT_Y - 5); | ||
} | } | ||
| Line 286: | Line 298: | ||
function clear_error() { | function clear_error() { | ||
ctx.save(); | ctx.save(); | ||
ctx.clearRect(ERROR_X, ERROR_Y, | ctx.clearRect(ERROR_X, ERROR_Y, 120, 30); | ||
ctx.restore(); | ctx.restore(); | ||
} | } | ||
| Line 293: | Line 305: | ||
function error(str) { | function error(str) { | ||
ctx.save(); | ctx.save(); | ||
ctx.font = '30px | ctx.font = '30px Arial'; | ||
ctx.fillStyle = "Red"; | ctx.fillStyle = "Red"; | ||
ctx.fillText(str, ERROR_X, ERROR_Y + 30); | ctx.fillText(str, ERROR_X, ERROR_Y + 30); | ||
Revision as of 15:13, 13 August 2019
Click on the numbers to replace that directory entry with a file with that many clusters. (‘0’ implicitly deletes the file.) The FAT entries should behave in the way described above.
For simplicity here there is no file appending – i.e. increasing the length of a file already in place – so in each file clusters will always ‘point’ left to right. Nevertheless, you should be able to create some examples of file fragmentation.
Remember: the FAT is a map and each FAT entry has a corresponding cluster of data on the disk.
