jsos

commit 9f98b321b2d6fb13b0c89a5d3758e5ba81f829f8
parent 73e49beb3447b36a76c501b2e78116e19a99f33a
Author: Jul <jul@9o.is>
Date:   Tue, 11 Dec 2012 10:54:47 -0500

Added disk pie chart.

Diffstat:
M
globals.js
 | 
2
+-
M
index.html
 | 
20
++++++++++++++++++--
M
scripts/host/control.js
 | 
2
+-
M
scripts/host/disk.js
 | 
59
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++-
M
scripts/os/scheduler.js
 | 
4
++--
M
styles/julios.css
 | 
4
++--

6 files changed, 82 insertions(+), 9 deletions(-)
diff --git a/globals.js b/globals.js
@@ -12,7 +12,7 @@
 // Global Constants
 //
 var APP_NAME = "JuliOS";  // 'cause I was at a loss for a better name.
-var APP_VERSION = "0.3";
+var APP_VERSION = "0.4";
 
 var CPU_CLOCK_INTERVAL = 100;   // in ms, or milliseconds, so 1000 = 1 second.
 
diff --git a/index.html b/index.html
@@ -11,7 +11,7 @@
    <link rel="stylesheet" href="styles/julios-tabs.css"    type="text/css" media="screen" />
 
    <title>
-      JuliOS 0.3 - a Browser-based virtual Operating System
+      JuliOS 0.4 - a Browser-based virtual Operating System
    </title>
 
    <!-- Globals CONSTANTS and _Variables. Must included be first. -->
@@ -163,7 +163,23 @@
           </div>
 
           <div class="tabpage" id="tabpage_3">
-            <p>Disk info goes here...</p>
+            <div>
+              <h3>Total</h3>
+              <div id="diskTotal" class="diskInfo"></div>
+            </div>
+            <div>   
+              <h3>Used</h3>
+              <div id="diskUsed" class="diskInfo"></div>
+            </div>
+            <div>
+              <h3>Available</h3>
+              <div id="diskAvailable" class="diskInfo"></div>
+            </div>
+
+            <div>
+              <canvas id="diskChart" class="monitor" width="350" 
+                     height="350"></canvas>
+            </div>
           </div>
 
           <div class="tabpage" id="tabpage_4">
diff --git a/scripts/host/control.js b/scripts/host/control.js
@@ -64,7 +64,7 @@ function simBtnStartOS_click(btn) {
   _Disk = new disk();
   _CPU.init();
   _Memory.init();
-  _Disk = new disk();
+  _Disk.init();
   hardwareClockID = setInterval(simClockPulse, CPU_CLOCK_INTERVAL);
   krnBootstrap();
 }
diff --git a/scripts/host/disk.js b/scripts/host/disk.js
@@ -29,7 +29,7 @@ function disk() {
   this.BYTES = 64;
 
   this.init = function() {
-    // TODO do I need this?
+    this.output();
   };
 
   /*
@@ -67,6 +67,7 @@ function disk() {
     var read = this.read(tsb);
     read[byte-1] = data;
     localStorage.setItem(tsb.toString(), read);
+    this.output();
     return true;
   };
 
@@ -85,6 +86,7 @@ function disk() {
     } else {
       localStorage.setItem(tsb.toString(), this.read(tsb.toString()).concat(data.slice(0,this.BYTES)));
     }
+    this.output();
 
     if(data.length > this.BYTES)
       return data.slice(this.BYTES, data.length);
@@ -134,6 +136,61 @@ function disk() {
       data.push(0);
     return data;
   };
+
+  this.output = function() {
+    var total = this.BYTES * this.BLOCKS * this.SECTORS * this.TRACKS;
+    var available = 0;
+    var used = 0;
+
+    for(t=1; t<=this.TRACKS; t++)
+      for(s=1; s<=this.SECTORS; s++)
+        for(b=1; b<=this.BLOCKS; b++) {
+          var file = new File(new tsb(t,s,b));
+          if(file.available())
+            available += this.BYTES;
+          else
+            used += this.BYTES;
+        }
+
+    document.getElementById("diskTotal").innerHTML = Math.round((total/1000)*10)/10+" KB";
+    document.getElementById("diskUsed").innerHTML = Math.round((used/1000)*10)/10+" KB";
+    document.getElementById("diskAvailable").innerHTML = Math.round((available/1000)*10)/10+" KB";
+
+    var canvas = document.getElementById("diskChart");
+    var ctx = canvas.getContext('2d');
+
+    var myColor = ["#ffb78e","#8ED6FF"];
+    var myData = [used,available];
+
+    function getTotal(){
+      var myTotal = 0;
+      for (var j = 0; j < myData.length; j++) {
+        myTotal += (typeof myData[j] == 'number') ? myData[j] : 0;
+      }
+      return myTotal;
+    }
+
+    function plotData() {
+      var lastend = 0;
+      var myTotal = getTotal();
+
+      ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+      for (var i = 0; i < myData.length; i++) {
+        ctx.fillStyle = myColor[i];
+        ctx.beginPath();
+        ctx.moveTo(200,150);
+        ctx.arc(200,150,150,lastend,lastend+
+            (Math.PI*2*(myData[i]/myTotal)),false);
+        ctx.lineTo(200,150);
+        ctx.fill();
+        lastend += Math.PI*2*(myData[i]/myTotal);
+      }
+    }
+
+    plotData();
+
+  };
 };
 
 /*
diff --git a/scripts/os/scheduler.js b/scripts/os/scheduler.js
@@ -265,7 +265,7 @@ function scheduler() {
 
     graph("cpuUtilizationGraph", "red",   utilization, "%",  100);
     graph("cpuThroughputGraph",  "green",  throughput,  "%", 100);
-    graph("cpuWaitGraph",        "orange", wait,        "",  300);
-    graph("cpuTurnaroundGraph",  "blue",   turnAround,  "",  200);
+    graph("cpuWaitGraph",        "orange", wait,        "",  200);
+    graph("cpuTurnaroundGraph",  "blue",   turnAround,  "",  300);
   }
 }
diff --git a/styles/julios.css b/styles/julios.css
@@ -19,8 +19,8 @@ body {
   font-size: 10pt;
 }
 
-.monitor {
-  background-color: #eee;
+.diskInfo {
+  font-size: 20px;
 }
 
 #tabContainer {