Aggiunti controlli. Stile rinnovato

index.html

@@ -5,26 +5,24 @@
         <meta name="author" content="Claudio Maggioni, Fabio Brambilla, Pamela Dardano, Federico Mainetti"/>
         <meta name="description" content="Simulazione di uno scheduler in HTML, Javascript e (purtroppo) CSS."/>
         <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
-    	<script>
+        <link href='https://fonts.googleapis.com/css?family=Hammersmith+One' rel='stylesheet' type='text/css'>
-    		var lunghezzaExec=300 //in millis
+        <script>
+    		var lunghezzaExec=1 //in millis
     		var risorse = {
     			file: new Array(5),
     			stampante: 0,
     			io: new Array(6),
     			mem: new Array(100) //vettore contenente 100 cloni di memoria
     		}
-
             function Memoria(){
                 this.pid = 0;
                 this.istanteAllocazione = 0;
                 this.numeroPagina = -1;
             }
-
             //avvio del programma
             for(var i=0; i<100; i++){
                 risorse.mem[i]= new Memoria();
             }
-
             var pidNuovo = 1;
     		function Processo(){
                 processiPronti.push(this);
@@ -50,7 +48,7 @@
                 pidNuovo++;
     		}
             Processo.prototype.log = function(str){
-                var tmp = str.replace(/ *\<[^>]*\> */g, "");
+                var tmp = str.replace(/ *\<[^>]*\> */g, " ");
                 scriviLog("<span style=\"color: lightblue\">Processo "+this.pid+": </span>"+str+"\n");
                 this.logProcesso+="Processo "+this.pid+": "+tmp+"\n";
             };
@@ -84,20 +82,16 @@
                 }
                 this.stato="pronto";
             };
-
             var processiPronti = new Array();
             var processiTerminati = new Array();
-
     		function allocaSegmento(proc){
     			//ricerca memoria libera tramite first-fit
                 for(var i=0; i<100; i++){
     				if(risorse.mem[i].pid==0) break;
     			}
-
                 if(i==100){
                     //allocazione fallita
                     proc.log("<span style=\"color: orange\">Allocazione fallita. Gestione della memoria piena...</span>");
-
                     //si applica least recently used
                     var min=0;
                     for(i=1; i<100; i++){
@@ -151,9 +145,9 @@
                 $cont.append('<p>' + str + '</p>');
                 $cont[0].scrollTop = $cont[0].scrollHeight;
             }
-
             var pidAttuale = 0;
             var vuoto=false;
+            var interrompi=false;
             function loopProcessiPronti(){
                 if(processiPronti.length>0){
                     if(pidAttuale >= processiPronti.length) pidAttuale=0;
@@ -165,23 +159,42 @@
                     scriviLog("<span style=\"color: white\">Coda dei processi pronti vuota.<span>");
                     vuoto=true;
                 }
+                if(interrompi) return;
                 window.setTimeout(function(){
                     loopProcessiPronti();
                 },lunghezzaExec);
             }
-
+            function toggleProcessiPronti(){
+                interrompi= !interrompi;
+                if(!interrompi) loopProcessiPronti();
+            }
             function testaProcessiPronti(){
-                for(var j=0; j<10; j++){
+                for(var j=0; j<100; j++){
                     new Processo();
                 }
                 loopProcessiPronti();
             }
+            function cambiaVel(e,elem){
+                if(e.keyCode!=13) return;
+                var tmp = parseInt(elem.value);
+                if(isNaN(tmp)||tmp<1){
+                    alert("Inserimento non valido.");
+                    return;
+                }
+                lunghezzaExec=tmp;
+            }
     	</script>
     	<style type="text/css">
+            body{
+                margin: 0;
+                overflow-x: hidden;
+            }
             .logger{
                 overflow-y: scroll;
-                height: 50vh;
+                height: 60vh;
                 background-color: black;
+                width: calc(100vw - 13rem);
+                float: left;
             }
             .logger > p{
                 margin-top: 0;
@@ -190,58 +203,111 @@
                 font-size: 1em;
                 font-weight: bolder;
                 color: lightgreen;
+                background: black;
             }
-            #header {
+            .header {
-				background-color:black;
+				background-color: orange;
-				color:white;
+				height: 3em;
+                text-align: center;
+                display: table;
+                z-index: 1;
+                width: 100vw;
+                box-shadow: 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
+                margin-bottom: 1rem;
+                font-family: 'Hammersmith One', sans-serif;
+            }
+            .header > h1{
+                font-size: 2em;
+                color: white;
+                margin: 0;
+                display: table-cell;
+                vertical-align: middle;
+                font-weight: lighter;
+            }
+            .card {
+                background: #fff;
+                display: block;
+                box-shadow: 0 1px 3px rgba(0, 0, 0, 0.16), 0 1px 3px rgba(0, 0, 0, 0.23);
+            }
+			.nav {
+				width: 8rem;
+                padding: .5rem;
+                font-family: 'Hammersmith One', sans-serif;
+                margin-left: .5rem;
+				float: left;
+                font-weight: lighter;
+			}
+            .nav > p, .section.teoria > p{
+                margin: 0;
+            }
+            .nav > p > a{
+                color: black;
+                text-transform: uppercase;
+                text-decoration: none;
+            }
+            .sections{
+                float: right;
+                width: calc(100vw - 11rem);
+                margin-bottom: 2rem;
+            }
+			.section {
+                width: calc(100vw - 13rem);
+				padding: .5rem;
+                margin: .5rem;
+                margin-top: 0;
+			}
+            div.sections div.section:last-child{
+                margin-bottom: 0;
+            }
+			.footer {
+				background-color: orange;
+				color: white;
+				clear: both;
 				text-align:center;
-				padding:5px;
+                position: fixed;
-			}
+                font-size: 0.8em;
-			#nav {
+                width: 100vw;
-				line-height:30px;
+                bottom: 0;
-				background-color:#eeeeee;
+                left: 0;
-				height:300px;
+                right: 0;
-				width:100px;
+                font-family: 'Hammersmith One', sans-serif;
-				float:left;
+                font-weight: lighter;
-				padding:5px; 
-			}
-			#section {
-				width:350px;
-				float:left;
-				padding:10px; 
-			}
-			#footer {
-				background-color:black;
-				color:white;
-				clear:both;
-				text-align:center;
-				padding:5px; 
 			}
+            .section.teoria{
+                font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;
+                background: black;
+                color: white;
+            }
     	</style>
     </head>
     <body>
-        <div id="header">
+        <div class="header">
-        <h2>Logger di sistema:</h2>
+            <h1>Scheduler</h1>
         </div>
-        <div id="nav">
+        <div class="nav card">
-        Home<br>
+            <p><a href="javascript:void(0)">HOME</a></p>
-        Grafico<br>
+            <p><a href="javascript:void(0)">GRAFICO</a></p>
-        Teoria
+            <p><a href="javascript:void(0)">TEORIA</a></p>
         </div>
-        <div id="section">
+        <div class="sections">
-            <h2>Scheduler</h2>
+            <div class="section card teoria">
-            <p>In informatica lo scheduler (da to schedule letteralmente "mettere in lista", ovvero "pianificare") è un componente
+                <p>In informatica lo scheduler (da to schedule letteralmente "mettere in lista", ovvero "pianificare") è un componente
-            di un sistema operativo ovvero un programma che implementa un algoritmo di scheduling il quale, dato un insieme di richieste
+                di un sistema operativo ovvero un programma che implementa un algoritmo di scheduling il quale, dato un insieme di richieste
-            di accesso ad una risorsa (tipicamente l'accesso al processore da parte di un processo da eseguire), stabilisce un ordinamento
+                di accesso ad una risorsa (tipicamente l'accesso al processore da parte di un processo da eseguire), stabilisce un ordinamento
-            temporale per l'esecuzione di tali richieste, privilegiando quelle che rispettano determinati parametri secondo una certa politica
+                temporale per l'esecuzione di tali richieste, privilegiando quelle che rispettano determinati parametri secondo una certa politica
-            di scheduling, in modo da ottimizzare l'accesso a tale risorsa e consentire così l'espletamento del servizio/istruzione o processo desiderato.</p>
+                di scheduling, in modo da ottimizzare l'accesso a tale risorsa e consentire così l'espletamento del servizio/istruzione o processo desiderato.</p>
+            </div>
+            <div class="section card">
+                <div class="logger">
+                </div>
+                <button type="button" name="aggiungiProcesso" onclick="new Processo()">Aggiungi processo</button>
+                <button type="button" name="toggleProcessi" onclick="toggleProcessiPronti()">Ferma/riprendi</button>
+                <label>Velocità (in millisecondi):<input class="inputVel" type="number" onkeypress="cambiaVel(event,this)" value="500"/></label>
+            </div>
         </div>
-        <div id="sidebar">
+        <div class="footer">
+            Creato da Claudio Maggioni, Federico Mainetti, Pamela Dardano, Fabio Brambilla
         </div>
-        <div id="footer">
-        Creato da Claudio Maggioni, Federico Mainetti, Pamela Dardano, Fabio Brambilla
-        </div>
-        <button type="button" name="aggiungiProcesso" onclick="new Processo()">Aggiungi processo</button>
         <script>
             testaProcessiPronti()
         </script>