Widget:PeripheralIO: 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 widget serves as a demonstration for peripheral IO. | This widget serves as a demonstration for peripheral IO. | ||
[{{canonicalurl:Special:ShowWidget|widget=PeripheralIO}} Dark-mode widget for embedding] | |||
{{#widget:PeripheralIO}} | {{#widget:PeripheralIO}} | ||
</noinclude> | </noinclude> | ||
| Line 6: | Line 9: | ||
<p><canvas id="peripheral_canvas" width="600" height="200"></canvas></p> | <p><canvas id="peripheral_canvas" width="600" height="200"></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; | |||
// Javascript interactive demo. of I/O ports. | // Javascript interactive demo. of I/O ports. | ||
| Line 102: | Line 113: | ||
function draw() { | function draw() { | ||
// Set stroke style according to theme | |||
ctx.strokeStyle = usingDarkTheme ? "grey" : "black"; | |||
drawLabel(); //Draw Label | drawLabel(); //Draw Label | ||
draw_IO(); | draw_IO(); | ||
| Line 228: | Line 242: | ||
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); | ||
ctx.font = '20px Arial'; | ctx.font = '20px Arial'; | ||
ctx.fillStyle = "black"; | ctx.fillStyle = usingDarkTheme ? "white" : "black"; | ||
ctx.fillText(" Address", HEX_X - 80, HEX_Y - 10); | ctx.fillText(" Address", HEX_X - 80, HEX_Y - 10); | ||
ctx.fillText(" Data", HEX_X + 20, HEX_Y - 10); | ctx.fillText(" Data", HEX_X + 20, HEX_Y - 10); | ||
| Line 296: | Line 310: | ||
context.fill(); | context.fill(); | ||
if (stroke) { | if (stroke) { | ||
context.strokeStyle = "black"; | context.strokeStyle = usingDarkTheme ? "white" : "black"; | ||
context.lineWidth = 3; | context.lineWidth = 3; | ||
context.stroke(); | context.stroke(); | ||
