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

178
index.html
View file

@ -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>
var lunghezzaExec=300 //in millis
<link href='https://fonts.googleapis.com/css?family=Hammersmith+One' rel='stylesheet' type='text/css'>
<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 {
background-color:black;
color:white;
.header {
background-color: orange;
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;
}
#nav {
line-height:30px;
background-color:#eeeeee;
height:300px;
width:100px;
float:left;
padding:5px;
}
#section {
width:350px;
float:left;
padding:10px;
}
#footer {
background-color:black;
color:white;
clear:both;
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>
</head>
<body>
<div id="header">
<h2>Logger di sistema:</h2>
<div class="header">
<h1>Scheduler</h1>
</div>
<div id="nav">
Home<br>
Grafico<br>
Teoria
<div class="nav card">
<p><a href="javascript:void(0)">HOME</a></p>
<p><a href="javascript:void(0)">GRAFICO</a></p>
<p><a href="javascript:void(0)">TEORIA</a></p>
</div>
<div id="section">
<h2>Scheduler</h2>
<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 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
di scheduling, in modo da ottimizzare l'accesso a tale risorsa e consentire così l'espletamento del servizio/istruzione o processo desiderato.</p>
<div class="sections">
<div class="section card teoria">
<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 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
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>