maggicl/html-scheduler
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Aggiunti controlli. Stile rinnovato

Browse source
This commit is contained in:
Claudio Maggioni 2016-05-11 13:42:40 +02:00
parent 4687c640d0
commit 91fdec5198
1 changed files with 122 additions and 56 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

148
index.html
View file

@ -5,26 +5,24 @@
<meta name="author" content="Claudio Maggioni, Fabio Brambilla, Pamela Dardano, Federico Mainetti"/> <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."/> <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 src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<link href='https://fonts.googleapis.com/css?family=Hammersmith+One' rel='stylesheet' type='text/css'>
<script> <script>
var lunghezzaExec=300 //in millis var lunghezzaExec=1 //in millis
var risorse = { var risorse = {
file: new Array(5), file: new Array(5),
stampante: 0, stampante: 0,
io: new Array(6), io: new Array(6),
mem: new Array(100) //vettore contenente 100 cloni di memoria mem: new Array(100) //vettore contenente 100 cloni di memoria
} }
function Memoria(){ function Memoria(){
this.pid = 0; this.pid = 0;
this.istanteAllocazione = 0; this.istanteAllocazione = 0;
this.numeroPagina = -1; this.numeroPagina = -1;
} }
//avvio del programma //avvio del programma
for(var i=0; i<100; i++){ for(var i=0; i<100; i++){
risorse.mem[i]= new Memoria(); risorse.mem[i]= new Memoria();
} }
var pidNuovo = 1; var pidNuovo = 1;
function Processo(){ function Processo(){
processiPronti.push(this); processiPronti.push(this);
@ -84,20 +82,16 @@
} }
this.stato="pronto"; this.stato="pronto";
}; };
var processiPronti = new Array(); var processiPronti = new Array();
var processiTerminati = new Array(); var processiTerminati = new Array();
function allocaSegmento(proc){ function allocaSegmento(proc){
//ricerca memoria libera tramite first-fit //ricerca memoria libera tramite first-fit
for(var i=0; i<100; i++){ for(var i=0; i<100; i++){
if(risorse.mem[i].pid==0) break; if(risorse.mem[i].pid==0) break;
} }
if(i==100){ if(i==100){
//allocazione fallita //allocazione fallita
proc.log("<span style=\"color: orange\">Allocazione fallita. Gestione della memoria piena...</span>"); proc.log("<span style=\"color: orange\">Allocazione fallita. Gestione della memoria piena...</span>");
//si applica least recently used //si applica least recently used
var min=0; var min=0;
for(i=1; i<100; i++){ for(i=1; i<100; i++){
@ -151,9 +145,9 @@
$cont.append('<p>' + str + '</p>'); $cont.append('<p>' + str + '</p>');
$cont[0].scrollTop = $cont[0].scrollHeight; $cont[0].scrollTop = $cont[0].scrollHeight;
} }
var pidAttuale = 0; var pidAttuale = 0;
var vuoto=false; var vuoto=false;
var interrompi=false;
function loopProcessiPronti(){ function loopProcessiPronti(){
if(processiPronti.length>0){ if(processiPronti.length>0){
if(pidAttuale >= processiPronti.length) pidAttuale=0; if(pidAttuale >= processiPronti.length) pidAttuale=0;
@ -165,23 +159,42 @@
scriviLog("<span style=\"color: white\">Coda dei processi pronti vuota.<span>"); scriviLog("<span style=\"color: white\">Coda dei processi pronti vuota.<span>");
vuoto=true; vuoto=true;
} }
if(interrompi) return;
window.setTimeout(function(){ window.setTimeout(function(){
loopProcessiPronti(); loopProcessiPronti();
},lunghezzaExec); },lunghezzaExec);
} }
function toggleProcessiPronti(){
interrompi= !interrompi;
if(!interrompi) loopProcessiPronti();
}
function testaProcessiPronti(){ function testaProcessiPronti(){
for(var j=0; j<10; j++){ for(var j=0; j<100; j++){
new Processo(); new Processo();
} }
loopProcessiPronti(); 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> </script>
<style type="text/css"> <style type="text/css">
body{
margin: 0;
overflow-x: hidden;
}
.logger{ .logger{
overflow-y: scroll; overflow-y: scroll;
height: 50vh; height: 60vh;
background-color: black; background-color: black;
width: calc(100vw - 13rem);
float: left;
} }
.logger > p{ .logger > p{
margin-top: 0; margin-top: 0;
@ -190,58 +203,111 @@
font-size: 1em; font-size: 1em;
font-weight: bolder; font-weight: bolder;
color: lightgreen; color: lightgreen;
background: black;
} }
#header { .header {
background-color:black; background-color: orange;
color:white; height: 3em;
text-align: center; text-align: center;
padding:5px; 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;
} }
#nav { .header > h1{
line-height:30px; font-size: 2em;
background-color:#eeeeee; color: white;
height:300px; margin: 0;
width:100px; 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; float: left;
padding:5px; font-weight: lighter;
} }
#section { .nav > p, .section.teoria > p{
width:350px; margin: 0;
float:left;
padding:10px;
} }
#footer { .nav > p > a{
background-color:black; 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; color: white;
clear: both; clear: both;
text-align:center; text-align:center;
padding:5px; position: fixed;
font-size: 0.8em;
width: 100vw;
bottom: 0;
left: 0;
right: 0;
font-family: 'Hammersmith One', sans-serif;
font-weight: lighter;
}
.section.teoria{
font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;
background: black;
color: white;
} }
</style> </style>
</head> </head>
<body> <body>
<div id="header"> <div class="header">
<h2>Logger di sistema:</h2> <h1>Scheduler</h1>
</div> </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>
<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>
<div id="sidebar"> <div class="section card">
</div> <div class="logger">
<div id="footer">
Creato da Claudio Maggioni, Federico Mainetti, Pamela Dardano, Fabio Brambilla
</div> </div>
<button type="button" name="aggiungiProcesso" onclick="new Processo()">Aggiungi processo</button> <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 class="footer">
Creato da Claudio Maggioni, Federico Mainetti, Pamela Dardano, Fabio Brambilla
</div>
<script> <script>
testaProcessiPronti() testaProcessiPronti()
</script> </script>