Widget:FIFO: Difference between revisions
From COMP15212 Wiki
 Yuron [   PHRhYmxlIGNsYXNzPSJ0d3BvcHVwIj48dHI+PHRkIGNsYXNzPSJ0d3BvcHVwLWVudHJ5dGl0bGUiPkdyb3Vwczo8L3RkPjx0ZD51c2VyPGJyIC8+YnVyZWF1Y3JhdDxiciAvPmludGVyZmFjZS1hZG1pbjxiciAvPnN5c29wPGJyIC8+PC90ZD48L3RyPjwvdGFibGU+] (talk | contribs)m (1 revision imported) |
pc>Yuron No edit summary |
||
| Line 8: | Line 8: | ||
<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 121: | ||
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 133: | ||
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 175: | ||
function draw() { | function draw() { | ||
// Set stroke style according to theme | |||
ctx.strokeStyle = usingDarkTheme ? "grey" : "black" | |||
//Draw Label | //Draw Label | ||
drawLabel(); | drawLabel(); | ||
| Line 193: | Line 206: | ||
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 214: | ||
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); | ||
} | } | ||
Revision as of 15:21, 13 August 2019
This widget demonstrates the operation of a FIFO input/output pipe.
