Widget:Caching: 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: | ||
<p><canvas id="cache_canvas" width="850" height="480"></canvas></p> | <p><canvas id="cache_canvas" width="850" height="480"></canvas></p> | ||
<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 CACHE_TOP = 60; | const CACHE_TOP = 60; | ||
| Line 302: | Line 310: | ||
function printInfo(str1, str2) { | function printInfo(str1, str2) { | ||
ctx.font = "16px Arial"; | ctx.font = "16px Arial"; | ||
ctx.fillStyle = "black"; | ctx.fillStyle = usingDarkTheme ? "white" : "black"; | ||
ctx.clearRect(proc.X, proc.Y + proc.BlockHeight + 4, cache.X - proc.X - 1, 50); | ctx.clearRect(proc.X, proc.Y + proc.BlockHeight + 4, cache.X - proc.X - 1, 50); | ||
| Line 385: | Line 393: | ||
var Y = obj.Y; | var Y = obj.Y; | ||
ctx.fillStyle = obj.BlockColour; | ctx.fillStyle = obj.BlockColour; | ||
ctx.strokeStyle = usingDarkTheme ? "grey" : "black"; | |||
ctx.font = obj.TextStyle; | ctx.font = obj.TextStyle; | ||
for (var i = 0; i < obj.BlockNum; i++) { | for (var i = 0; i < obj.BlockNum; i++) { | ||
| Line 441: | Line 450: | ||
function addLabels() { | function addLabels() { | ||
ctx.font = "20px Arial"; | ctx.font = "20px Arial"; | ||
ctx.fillStyle = "black" | ctx.fillStyle = usingDarkTheme ? "white" : "black" | ||
ctx.fillText("Processor", proc.X + 55, proc.Y - 10); | ctx.fillText("Processor", proc.X + 55, proc.Y - 10); | ||
ctx.fillText("Cache", cache.X + 70, cache.Y - 10); | ctx.fillText("Cache", cache.X + 70, cache.Y - 10); | ||
| Line 449: | Line 458: | ||
function drawLabel() { | function drawLabel() { | ||
ctx.font = '30px Arial'; | ctx.font = '30px Arial'; | ||
ctx.fillStyle = "black"; | ctx.fillStyle = usingDarkTheme ? "white" : "black"; | ||
ctx.fillText(labelString, labelPositionX, labelPositionY); | ctx.fillText(labelString, labelPositionX, labelPositionY); | ||
} | } | ||
| Line 473: | Line 482: | ||
function drawLine(ctx, x, y, a, b) { | function drawLine(ctx, x, y, a, b) { | ||
ctx.globalCompositeOperation = "source-over"; | ctx.globalCompositeOperation = "source-over"; | ||
ctx.strokeStyle = 'black'; | ctx.strokeStyle = usingDarkTheme ? "white" : 'black'; | ||
ctx.beginPath(); | ctx.beginPath(); | ||
ctx.moveTo(x, y); | ctx.moveTo(x, y); | ||
Revision as of 14:58, 13 August 2019
This widget demonstrates the principle of caching by walking through a short piece of example code.
