Widget:FIFO: Difference between revisions
From COMP15212 Wiki
pc>Yuron (Created page with "<noinclude> This widget demonstrates the operation of a FIFO input/output pipe. {{#widget:FIFO}} </noinclude> <includeonly> <p><canvas id="fifo_canvas" width="700" height="3...") |
 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 demonstrates the operation of a FIFO input/output pipe. | This widget demonstrates the operation of a FIFO input/output pipe. | ||
[{{canonicalurl:Special:ShowWidget|widget=FIFO}} Dark-mode widget for embedding] | |||
{{#widget:FIFO}} | {{#widget:FIFO}} | ||
</noinclude> | </noinclude> | ||
| Line 8: | Line 11: | ||
<p><canvas id="fifo_canvas" width="700" height="300"></canvas></p> | <p><canvas id="fifo_canvas" width="700" height="300"></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; | |||
var labelPositionX = 200; | var labelPositionX = 200; | ||
var labelPositionY = 30; | var labelPositionY = 30; | ||
| Line 112: | Line 124: | ||
ctx.font = '12px Arial'; | ctx.font = '12px Arial'; | ||
ctx.clearRect(outputX - 20, outputY + 24, readBtnPanelBlockLength * readBtnPanelBlockNum, 50); | ctx.clearRect(outputX - 20, outputY + 24, readBtnPanelBlockLength * readBtnPanelBlockNum, 50); | ||
ctx.fillStyle = 'black'; | ctx.fillStyle = usingDarkTheme ? "white" : 'black'; | ||
ctx.beginPath(); | ctx.beginPath(); | ||
var outputPointerPositionX = outputPositionX(); | var outputPointerPositionX = outputPositionX(); | ||
| Line 124: | Line 136: | ||
function drawInputPointer() { | function drawInputPointer() { | ||
ctx.clearRect(inputX - 20, inputY - 55, readBtnPanelBlockLength * readBtnPanelBlockNum, 50); | ctx.clearRect(inputX - 20, inputY - 55, readBtnPanelBlockLength * readBtnPanelBlockNum, 50); | ||
ctx.fillStyle = 'black'; | ctx.fillStyle = usingDarkTheme ? "white" : 'black'; | ||
ctx.beginPath(); | ctx.beginPath(); | ||
inputPointerPositionX = inputPositionX(); | inputPointerPositionX = inputPositionX(); | ||
| Line 166: | Line 178: | ||
function draw() { | function draw() { | ||
// Set stroke style according to theme | |||
ctx.strokeStyle = usingDarkTheme ? "grey" : "black" | |||
//Draw Label | //Draw Label | ||
drawLabel(); | drawLabel(); | ||
| Line 193: | Line 209: | ||
function drawSelectTitle() { | function drawSelectTitle() { | ||
ctx.font = '20px Arial'; | ctx.font = '20px Arial'; | ||
ctx.fillStyle = 'black'; | ctx.fillStyle = usingDarkTheme ? "white" : 'black'; | ||
ctx.fillText("Producer", producerStartX + 35, producerStartY - 10); | ctx.fillText("Producer", producerStartX + 35, producerStartY - 10); | ||
ctx.fillText("Pipe", readBtnStartX - 50, readBtnStartY + 30); | ctx.fillText("Pipe", readBtnStartX - 50, readBtnStartY + 30); | ||
| Line 201: | Line 217: | ||
function drawLabel() { | function drawLabel() { | ||
ctx.font = '24px Arial'; | ctx.font = '24px Arial'; | ||
ctx.fillStyle = 'black'; | ctx.fillStyle = usingDarkTheme ? "white" : 'black'; | ||
ctx.fillText(labelString, labelPositionX, labelPositionY); | ctx.fillText(labelString, labelPositionX, labelPositionY); | ||
} | } | ||
