Aggiunti controlli. Stile rinnovato
This commit is contained in:
parent
4687c640d0
commit
91fdec5198
1 changed files with 122 additions and 56 deletions
148
index.html
148
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>
|
||||
<link href='https://fonts.googleapis.com/css?family=Hammersmith+One' rel='stylesheet' type='text/css'>
|
||||
<script>
|
||||
var lunghezzaExec=300 //in millis
|
||||
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);
|
||||
|
|
@ -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;
|
||||
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 {
|
||||
line-height:30px;
|
||||
background-color:#eeeeee;
|
||||
height:300px;
|
||||
width:100px;
|
||||
.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;
|
||||
padding:5px;
|
||||
font-weight: lighter;
|
||||
}
|
||||
#section {
|
||||
width:350px;
|
||||
float:left;
|
||||
padding:10px;
|
||||
.nav > p, .section.teoria > p{
|
||||
margin: 0;
|
||||
}
|
||||
#footer {
|
||||
background-color:black;
|
||||
.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;
|
||||
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>
|
||||
<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 id="sidebar">
|
||||
</div>
|
||||
<div id="footer">
|
||||
Creato da Claudio Maggioni, Federico Mainetti, Pamela Dardano, Fabio Brambilla
|
||||
<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 class="footer">
|
||||
Creato da Claudio Maggioni, Federico Mainetti, Pamela Dardano, Fabio Brambilla
|
||||
</div>
|
||||
<script>
|
||||
testaProcessiPronti()
|
||||
</script>
|
||||
|
|
|
|||
Reference in a new issue