Widget:Scheduling: Difference between revisions

From COMP15212 Wiki
pc>Yuron
No edit summary
 
gravatar W81054ch [userbureaucratinterface-adminsysopPHRhYmxlIGNsYXNzPSJ0d3BvcHVwIj48dHI+PHRkIGNsYXNzPSJ0d3BvcHVwLWVudHJ5dGl0bGUiPkdyb3Vwczo8L3RkPjx0ZD51c2VyPGJyIC8+YnVyZWF1Y3JhdDxiciAvPmludGVyZmFjZS1hZG1pbjxiciAvPnN5c29wPGJyIC8+PC90ZD48L3RyPjwvdGFibGU+] (talk | contribs)
m (1 revision imported)
 
(8 intermediate revisions by 3 users not shown)
Line 1: Line 1:
<noinclude>
<noinclude>
Widget for demonstrating the operation of a scheduler.
Widget for demonstrating the operation of a scheduler.
[{{canonicalurl:Special:ShowWidget|widget=Scheduling&library}} Dark-mode widget for embedding]
{{#widget:Scheduling}}
{{#widget:Scheduling}}
</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 26:
<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-dark 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-light 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-dark 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-light 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-dark 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-light 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-dark ml-3 mb-5 mt-3 mr-3" id="demo_3_Btn" onclick="load_software(3)">Demo. 4</button>
     <button type="button" class="btn btn-light 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 67:
//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 dark
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 150:


//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 352:


     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 412:


     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 444:
     {
     {
         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 463:
     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 537:
     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 838:
     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,048:
// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -


// Hack to only begin script when MediaWiki loads jquery
$(document).ready(function() {
function waitForDependencies() {
  if(typeof mw == "undefined" || mw.loader.getState("jquery") != "ready")
  {
    setTimeout(waitForDependencies, 50)
  } else {
    console.log("start");
     load_software(0);
     load_software(0);
    mouseClickAction();
})
  }
mouseClickAction();
}
</script>
waitForDependencies()


</script>
<script>reset();</script>
</includeonly>
</includeonly>

Latest revision as of 07:22, 14 August 2019

Widget for demonstrating the operation of a scheduler.

Dark-mode widget for embedding

CALL RESET BELOW!

Process 1
Process 2
Process 3
Process 4
Process 5


Retrieved from "https://wiki.cs.manchester.ac.uk/COMP15212/index.php?title=Widget:Scheduling&oldid=1398"
Powered by MediaWiki
Powered by Semantic MediaWiki