Widget:Interrupt: Difference between revisions
From COMP15212 Wiki
 Yuron [   PHRhYmxlIGNsYXNzPSJ0d3BvcHVwIj48dHI+PHRkIGNsYXNzPSJ0d3BvcHVwLWVudHJ5dGl0bGUiPkdyb3Vwczo8L3RkPjx0ZD51c2VyPGJyIC8+YnVyZWF1Y3JhdDxiciAvPmludGVyZmFjZS1hZG1pbjxiciAvPnN5c29wPGJyIC8+PC90ZD48L3RyPjwvdGFibGU+] (talk | contribs)m (1 revision imported) |
 W81054ch [PHRhYmxlIGNsYXNzPSJ0d3BvcHVwIj48dHI+PHRkIGNsYXNzPSJ0d3BvcHVwLWVudHJ5dGl0bGUiPkdyb3Vwczo8L3RkPjx0ZD51c2VyPGJyIC8+YnVyZWF1Y3JhdDxiciAvPmludGVyZmFjZS1hZG1pbjxiciAvPnN5c29wPGJyIC8+PC90ZD48L3RyPjwvdGFibGU+] (talk | contribs) m (1 revision imported) |
||
| (5 intermediate revisions by 2 users not shown) | |||
| Line 1: | Line 1: | ||
<noinclude> | <noinclude> | ||
This widget demonstrates the operation of an interrupt handler, and what happens when interrupts are disabled. | This widget demonstrates the operation of an interrupt handler, and what happens when interrupts are disabled. | ||
[{{canonicalurl:Special:ShowWidget|widget=Interrupt}} Dark-mode widget for embedding] | |||
{{#widget:Interrupt}} | {{#widget:Interrupt}} | ||
</noinclude> | </noinclude> | ||
| Line 6: | Line 9: | ||
<p><canvas id="interrupt_canvas" width="800" height="250"></canvas></p> | <p><canvas id="interrupt_canvas" width="800" height="250"></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; | |||
// Interactive interrupt demonstration | // Interactive interrupt demonstration | ||
const STEP_TIME = 20; | const STEP_TIME = 20; | ||
| Line 67: | Line 78: | ||
} | } | ||
var isRunning = true; | |||
function interrupt() { | function interrupt() { | ||
if ((mouse.x >= STOP_X) && (mouse.x < (STOP_X + STOP_DX)) && | if ((mouse.x >= STOP_X) && (mouse.x < (STOP_X + STOP_DX)) && | ||
(mouse.y >= STOP_Y) && (mouse.y < (STOP_Y + STOP_DY))) { | (mouse.y >= STOP_Y) && (mouse.y < (STOP_Y + STOP_DY))) { | ||
clearInterval(clockId); | if (isRunning) { | ||
clearInterval(clockId); | |||
isRunning = false; | |||
} else { | |||
clockId = setInterval(animate, STEP_TIME); | |||
isRunning = true; | |||
} | |||
} else { | } else { | ||
pending = true; | pending = true; | ||
| Line 146: | Line 164: | ||
ctx.save(); | ctx.save(); | ||
ctx.font = '30px Arial'; | ctx.font = '30px Arial'; | ||
ctx.fillStyle = "black"; | ctx.fillStyle = usingDarkTheme ? "white" : "black"; | ||
ctx.fillText("Interrupt demonstration", 200, 30); | ctx.fillText("Interrupt demonstration", 200, 30); | ||
ctx.restore(); | ctx.restore(); | ||
| Line 156: | Line 174: | ||
ctx.save(); | ctx.save(); | ||
ctx.font = '15px Arial'; | ctx.font = '15px Arial'; | ||
ctx.fillStyle = "black"; | ctx.fillStyle = usingDarkTheme ? "white" : "black"; | ||
ctx.fillText(" Normal", x - text_x_displacement, y + 5 - 21); | ctx.fillText(" Normal", x - text_x_displacement, y + 5 - 21); | ||
ctx.fillText(" execution", x - text_x_displacement, y + 5 - 7); | ctx.fillText(" execution", x - text_x_displacement, y + 5 - 7); | ||
| Line 168: | Line 186: | ||
ctx.save(); // save state | ctx.save(); // save state | ||
ctx.beginPath(); | ctx.beginPath(); | ||
ctx.strokeStyle = "black"; | ctx.strokeStyle = usingDarkTheme ? "white" : "black"; | ||
ctx.lineWidth = 1; | ctx.lineWidth = 1; | ||
ctx.beginPath(); | ctx.beginPath(); | ||
| Line 194: | Line 212: | ||
ctx.save(); | ctx.save(); | ||
ctx.font = '15px Arial'; | ctx.font = '15px Arial'; | ||
ctx.fillStyle = "black"; | ctx.fillStyle = usingDarkTheme ? "white" : "black"; | ||
ctx.fillText("Request", PEND_X - 27, PEND_Y - 12); | ctx.fillText("Request", PEND_X - 27, PEND_Y - 12); | ||
ctx.fillText("Pending", PEND_X - 27, PEND_Y + 22); | ctx.fillText("Pending", PEND_X - 27, PEND_Y + 22); | ||
| Line 208: | Line 226: | ||
context.fill(); | context.fill(); | ||
if (stroke > 0) { | if (stroke > 0) { | ||
context.strokeStyle = "black"; | context.strokeStyle = usingDarkTheme ? "white" : "black"; | ||
context.lineWidth = stroke; | context.lineWidth = stroke; | ||
context.stroke(); | context.stroke(); | ||
Latest revision as of 07:22, 14 August 2019
This widget demonstrates the operation of an interrupt handler, and what happens when interrupts are disabled.
Dark-mode widget for embedding
