Widget:ReadFile: Difference between revisions
From COMP15212 Wiki
 Yuron [   PHRhYmxlIGNsYXNzPSJ0d3BvcHVwIj48dHI+PHRkIGNsYXNzPSJ0d3BvcHVwLWVudHJ5dGl0bGUiPkdyb3Vwczo8L3RkPjx0ZD51c2VyPGJyIC8+YnVyZWF1Y3JhdDxiciAvPmludGVyZmFjZS1hZG1pbjxiciAvPnN5c29wPGJyIC8+PC90ZD48L3RyPjwvdGFibGU+] (talk | contribs)m (1 revision imported) |
pc>Yuron No edit summary |
||
| Line 1: | Line 1: | ||
<noinclude> | <noinclude> | ||
This shows the principle of file buffering for reading files. | This shows the principle of file buffering for reading files. | ||
| Line 6: | Line 7: | ||
<includeonly> | <includeonly> | ||
<div id="readFile"> | |||
<p id="read_demo_error" style="color:red"></p> | <p id="read_demo_error" style="color:red"></p> | ||
<div style="display:flex; align-items: center; justify-content: center;"> | <div style="display:flex; align-items: center; justify-content: center;"> | ||
<p style="margin-right:10px; margin-top:auto; margin-bottom:auto;">Type your file here:</p> | <p style="margin-right:10px; margin-top:auto; margin-bottom:auto;">Type your file here:</p> | ||
<input id="file_content" type="text" name="File" style="flex:2;" value="Can a kangaroo jump higher than a house? | <input id="file_content" type="text" name="File" style="flex:2;" value="Can a kangaroo jump higher than a house? Of course; a house doesn't jump at all!"><br> | ||
</div> | </div> | ||
<canvas id="read_canvas" width="800" height="370"></canvas> | <canvas id="read_canvas" width="800" height="370"></canvas> | ||
</div> | |||
<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; | |||
if (typeof(drawDisks) == "undefined") | if (typeof(drawDisks) == "undefined") | ||
| Line 70: | Line 80: | ||
// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - | // - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - | ||
function title() { | function title() { | ||
ctx.fillStyle = 'black'; | ctx.fillStyle = usingDarkTheme ? "white" : 'black'; | ||
ctx.font = "30px | ctx.font = "30px Arial"; | ||
ctx.fillText("Read buffer demonstration", 250, 35); | ctx.fillText("Read buffer demonstration", 250, 35); | ||
ctx.font = "20px | ctx.font = "20px Arial"; | ||
ctx.fillText('BUFFER', startx + 80, starty + 75); | ctx.fillText('BUFFER', startx + 80, starty + 75); | ||
} | } | ||
function draw() { | function draw() { | ||
// Set stroke style according to theme | |||
ctx.strokeStyle = usingDarkTheme ? "white" : "black"; | |||
// Set colour of explanatory text | |||
document.getElementById("readFile").style.color = "white"; | |||
ctx.clearRect(0, 0, 800, 400); | ctx.clearRect(0, 0, 800, 400); | ||
title(); | title(); | ||
| Line 138: | Line 154: | ||
fopenClicked = true; | fopenClicked = true; | ||
drawDisks(ctx, 'white'); | drawDisks(ctx, usingDarkTheme ? "black" : 'white'); | ||
busy = true; | busy = true; | ||
| Line 198: | Line 214: | ||
function fillText() { | function fillText() { | ||
clearDisk(ctx); | clearDisk(ctx); | ||
drawDisks(ctx, 'White'); | drawDisks(ctx, usingDarkTheme ? "black" : 'White'); | ||
clearOutputArrow(ctx, startx, starty); | clearOutputArrow(ctx, startx, starty); | ||
| Line 204: | Line 220: | ||
{ | { | ||
ctx.fillStyle = "white"; | ctx.fillStyle = "white"; | ||
ctx.font = "22px | ctx.font = "22px Arial"; | ||
buffer_char(inputString[i], i); | buffer_char(inputString[i], i); | ||
} | } | ||
| Line 237: | Line 253: | ||
function printOutputString() { | function printOutputString() { | ||
ctx.fillStyle = "red"; | ctx.fillStyle = "red"; | ||
ctx.font = "20px | ctx.font = "20px Arial"; | ||
stringPos += 1; | stringPos += 1; | ||
ctx.fillText(backupString.slice(0, stringPos), 40, starty + 95); | ctx.fillText(backupString.slice(0, stringPos), 40, starty + 95); | ||
| Line 292: | Line 308: | ||
function drawButton(X, Y, BlockColour, Content) { | function drawButton(X, Y, BlockColour, Content) { | ||
ctx.fillStyle = BlockColour; | ctx.fillStyle = BlockColour; | ||
ctx.font = "19px | ctx.font = "19px Arial"; | ||
ctx.fillRect(X, Y, buttonLength, buttonHeight); | ctx.fillRect(X, Y, buttonLength, buttonHeight); | ||
ctx.strokeRect(X, Y, buttonLength, buttonHeight); | ctx.strokeRect(X, Y, buttonLength, buttonHeight); | ||
| Line 317: | Line 333: | ||
read_demo(document.getElementById('read_canvas')); | read_demo(document.getElementById('read_canvas')); | ||
</script> | </script> | ||
</includeonly> | </includeonly> | ||
Revision as of 16:10, 13 August 2019
This shows the principle of file buffering for reading files.
Type your file here:
