Widget:WriteFile: Difference between revisions
From COMP15212 Wiki
pc>Yuron No edit summary |
 W81054ch [   PHRhYmxlIGNsYXNzPSJ0d3BvcHVwIj48dHI+PHRkIGNsYXNzPSJ0d3BvcHVwLWVudHJ5dGl0bGUiPkdyb3Vwczo8L3RkPjx0ZD51c2VyPGJyIC8+YnVyZWF1Y3JhdDxiciAvPmludGVyZmFjZS1hZG1pbjxiciAvPnN5c29wPGJyIC8+PC90ZD48L3RyPjwvdGFibGU+] (talk | contribs) m (1 revision imported) |
||
| (4 intermediate revisions by 3 users not shown) | |||
| Line 1: | Line 1: | ||
<noinclude> | <noinclude> | ||
This shows the principle of file buffering for writing files. | This shows the principle of file buffering for writing files. | ||
[{{canonicalurl:Special:ShowWidget|widget=UsingFileDemos.WriteFile}} Dark-mode widget for embedding] | |||
{{#widget:UsingFileDemos}} | {{#widget:UsingFileDemos}} | ||
{{#widget:WriteFile}} | {{#widget:WriteFile}} | ||
| Line 9: | Line 12: | ||
<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 72: | Line 81: | ||
//------------------------------------------------------------------------------ | //------------------------------------------------------------------------------ | ||
function draw() { | function draw() { | ||
// Set stroke style according to theme | |||
ctx.strokeStyle = usingDarkTheme ? "white" : "black"; | |||
ctx.clearRect(0, 0, 800, 400); | ctx.clearRect(0, 0, 800, 400); | ||
title(); | title(); | ||
| Line 86: | Line 98: | ||
function title() { | function title() { | ||
ctx.fillStyle = 'black'; | ctx.fillStyle = usingDarkTheme ? "white" : 'black'; | ||
ctx.font = "30px | ctx.font = "30px Arial"; | ||
ctx.fillText("Write buffer demonstration", 250, 35); | ctx.fillText("Write 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); | ||
} | } | ||
| Line 113: | Line 125: | ||
ctx.fillStyle = "white"; | ctx.fillStyle = "white"; | ||
ctx.font = "22px | ctx.font = "22px Arial"; | ||
ctx.fillText(firstChar, startx + bufferPosition * length + 18, starty + 30); | ctx.fillText(firstChar, startx + bufferPosition * length + 18, starty + 30); | ||
| Line 185: | Line 197: | ||
clearDisk(ctx); | clearDisk(ctx); | ||
printOutputString(outputBuffer); | printOutputString(outputBuffer); | ||
drawDisks(ctx, 'white'); | drawDisks(ctx, usingDarkTheme ? "black" : 'white'); | ||
drawOutputBuffer(); | drawOutputBuffer(); | ||
busy = false; | busy = false; | ||
| Line 229: | Line 241: | ||
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 247: | Line 259: | ||
clearOutputString(); | clearOutputString(); | ||
ctx.fillStyle = "red"; | ctx.fillStyle = "red"; | ||
ctx.font = "20px | ctx.font = "20px Arial"; | ||
ctx.fillText(output, 40, starty + 95); | ctx.fillText(output, 40, starty + 95); | ||
} | } | ||
