Widget:Scheduling: Difference between revisions
From COMP15212 Wiki
Yuron [PHRhYmxlIGNsYXNzPSJ0d3BvcHVwIj48dHI+PHRkIGNsYXNzPSJ0d3BvcHVwLWVudHJ5dGl0bGUiPkdyb3Vwczo8L3RkPjx0ZD51c2VyPGJyIC8+YnVyZWF1Y3JhdDxiciAvPmludGVyZmFjZS1hZG1pbjxiciAvPnN5c29wPGJyIC8+PC90ZD48L3RyPjwvdGFibGU+] (talk | contribs) m (1 revision imported) |
pc>Yuron No edit summary |
||
Line 4: | Line 4: | ||
</noinclude> | </noinclude> | ||
<includeonly> | <includeonly> | ||
<canvas id="canvas" width="1000" height="580"></canvas> | <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> | ||
<p><canvas id="canvas" width="1000" height="580"></canvas></p> | |||
<div class="row"> | <div class="row"> | ||
<div class="col-sm-2 text-left" > | <div class="col-sm-2 text-left" > | ||
Line 22: | Line 23: | ||
<div class="row"> | <div class="row"> | ||
<div class="col-sm-6 text-center" id="buttons"> | <div class="col-sm-6 text-center" id="buttons"> | ||
<button type="button" class="btn btn | <button type="button" class="btn btn ml-3 mb-5 mt-3 mr-3" id="demo_0_Btn" onclick="load_software(0)">Demo. 1</button> | ||
<button type="button" class="btn btn | <button type="button" class="btn btn ml-3 mb-5 mt-3 mr-3" id="demo_1_Btn" onclick="load_software(1)">Demo. 2</button> | ||
<button type="button" class="btn btn | <button type="button" class="btn btn ml-3 mb-5 mt-3 mr-3" id="demo_2_Btn" onclick="load_software(2)">Demo. 3</button> | ||
<button type="button" class="btn btn | <button type="button" class="btn btn ml-3 mb-5 mt-3 mr-3" id="demo_3_Btn" onclick="load_software(3)">Demo. 4</button> | ||
</div> | </div> | ||
</div> | </div> | ||
Line 63: | Line 64: | ||
//Credit to https://code.tutsplus.com/articles/data-structures-with-javascript-singly-linked-list-and-doubly-linked-list--cms-23392, minified with DuckDuckGo | //Credit to https://code.tutsplus.com/articles/data-structures-with-javascript-singly-linked-list-and-doubly-linked-list--cms-23392, minified with DuckDuckGo | ||
// Set to use dark theme if the body's background color is too darkw | |||
var bodyColour = $("body").css("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; | |||
// Output=>Input connection option | // Output=>Input connection option | ||
Line 140: | Line 147: | ||
//0: Absent, 1: run, 2: ready, 3: sleep, 4: input, 5: output, 6: stop | //0: Absent, 1: run, 2: ready, 3: sleep, 4: input, 5: output, 6: stop | ||
const state_colour = ["White", RUN_COL, READY_COL, SLEEP_COL, | const state_colour = [usingDarkTheme ? "black" : "White", RUN_COL, READY_COL, SLEEP_COL, | ||
IP_COL, OP_COL, STOP_COL, | IP_COL, OP_COL, STOP_COL, | ||
READY_COL, READY_COL, RUN_COL, RUN_COL | READY_COL, READY_COL, RUN_COL, RUN_COL | ||
Line 342: | Line 349: | ||
if (sleep_head >= 0) | if (sleep_head >= 0) | ||
print_queue(SLEEP_Q_X, SLEEP_Q_Y, SLEEP_COL, "white", | print_queue(SLEEP_Q_X, SLEEP_Q_Y, SLEEP_COL, usingDarkTheme ? "black" : "white", | ||
' Sleep Queue', sleep_head); | ' Sleep Queue', sleep_head); | ||
} | } | ||
Line 402: | Line 409: | ||
ctx.font = "16px Arial"; | ctx.font = "16px Arial"; | ||
ctx.fillStyle = "Black"; | ctx.fillStyle = usingDarkTheme ? "white" : "Black"; | ||
if (pnum == 1) { | if (pnum == 1) { | ||
ctx.fillText('Head/Tail', x + PB_WIDTH + 10, y + Q_SPACING); | ctx.fillText('Head/Tail', x + PB_WIDTH + 10, y + Q_SPACING); | ||
Line 434: | Line 441: | ||
{ | { | ||
ctx.font = "16px Arial"; | ctx.font = "16px Arial"; | ||
ctx.fillStyle = "black"; | ctx.fillStyle = usingDarkTheme ? "white" : "black"; | ||
ctx.fillText('Process ' + (i + 1), pStartX_label, pStartY + 1 + i * unitHeight); | ctx.fillText('Process ' + (i + 1), pStartX_label, pStartY + 1 + i * unitHeight); | ||
Line 453: | Line 460: | ||
for (var j = 0; j <= (time % 10); j++) // Add timestamps | for (var j = 0; j <= (time % 10); j++) // Add timestamps | ||
{ | { | ||
ctx.fillStyle = "DimGrey"; | ctx.fillStyle = usingDarkTheme ? "white" : "DimGrey"; | ||
ctx.fillText(String(decade + j), pStartX + j * unitLength + 20, | ctx.fillText(String(decade + j), pStartX + j * unitLength + 20, | ||
pStartY + 5 * (unitHeight)); | pStartY + 5 * (unitHeight)); | ||
Line 527: | Line 534: | ||
ctx.save(); | ctx.save(); | ||
ctx.font = "18px Arial"; | ctx.font = "18px Arial"; | ||
ctx.fillStyle = "black"; | ctx.fillStyle = usingDarkTheme ? "white" : "black"; | ||
const SPACING = 22; // Roughly centre reports, vertically | const SPACING = 22; // Roughly centre reports, vertically | ||
Line 828: | Line 835: | ||
time = 0; | time = 0; | ||
$("#time").html("Time: " + time); | $("#time").html("Time: " + time); | ||
if (usingDarkTheme) { | |||
$("#mytable tr th").css("color", "white") | |||
$("#time").css("color", "white"); | |||
} | |||
run = -1; | run = -1; | ||
Line 1,034: | Line 1,045: | ||
// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - | // - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - | ||
$(document).ready(function() { | |||
load_software(0); | load_software(0); | ||
}) | |||
mouseClickAction(); | |||
</script> | |||
</script> | <script>reset();</script> | ||
</includeonly> | </includeonly> |
Revision as of 12:01, 13 August 2019
Widget for demonstrating the operation of a scheduler.
CALL RESET BELOW!
Process 1 | |
---|---|
Process 2 | |
Process 3 | |
Process 4 | |
Process 5 |