Version du 9 avril 2018 à 17:36

Présentation générale

Description

Le projet comporte deux grandes parties :

• l'écriture de l'interface utilisateur pour décrire les processus à ordonnancer, pour choisir le type d'ordonnancement et pour afficher le chronogramme ;
• décliner les variantes possibles des différents algorithmes d'ordonnancement (fifo, tourniquet, priorité avec préemption, priorité avec âge et quantum de temps).

L'interface utilisateur doit être de type Web en HTML5. Il est bien entendu possible d'utiliser des bibliothèques JavaScript disponibles sur Internet. L'interface doit permettre à l'utilisateur de spécifier les éléments suivants :

• le type d'ordonnancement à utiliser ;
• éventuellement le nombre de ressources disponibles ;
• le nombre de processus ;
• pour chaque processus son PID, sa date de création, éventuellement sa priorité et ses événements ;

Les événements d'un processus doivent pouvoir être saisis comme une liste d'opérations. Chaque opération possède une date de départ qui se comprend, non en temps absolu, mais en temps d'exécution du processus. Les opérations peuvent être du type appropriation de ressource, libération de ressource ou arrêt du processus. Pour l'appropriation ou la libération de ressources, l'utilisateur doit pouvoir préciser le numéro de cette ressource.

Une fois tous les éléments précisés, la simulation d'ordonnancement est lancée directement sur le navigateur en JavaScript. La simulation se termine si tous les processus s'arrêtent ou si un interblocage se produit. Le chronogramme est alors affiché, il est demandé de soigner cet affichage.

L'autre aspect du projet consiste à étudier les différentes variantes des algorithmes d'ordonnancement. En effet, dans votre cours de systèmes d'exploitation, les algorithmes ne sont pas totalement spécifiés en particulier concernant la gestion des ressources. Programmez ces différentes variantes et affichez les chronogrammes de toutes les variantes.

Objectifs

L'objectif de ce projet est d'écrire une application Web de génération de chronogrammes d'ordonnancement de processsus. Les processus tournent sur un seul processeur mais peuvent réclamer et libérer des ressources.

Préparation du projet

Liste des tâches à effectuer

(Écrire les tâches réalisées et les restantes)

Calendrier prévisionnel

Réalisation du Projet

Feuille d'heures

Partie interface WEB

Formulaire et stockage des données avant la reprise dès la phase initiale du projet

Pour commencer, je me suis orienté vers la partie 1 de mon projet c'est-à-dire l'écriture de l'interface utilisateur pour décrire les processus à ordonnancer. J'ai commencé à travailler à l'aide de notepad++ pour la partie en HTML. Dans ce premier fichier HTML, je demandais à l'utilisateur de sélectionner son type d'ordonnancement (FIFO, Tourniquet, Priorité avec préemption, Priorité avec âge et quantum de temps), de choisir son nombre de ressources et son nombre de processus. Pour cela, j'ai choisi une balise de type "select" permettant après à l'utilisateur de choisir son ordonnancement. Ensuite pour les ressources et les processus j'ai choisi de mettre des input de type nombre pour choisir un nombre. Enfin j'ai créé un bouton "envoyer" qui permet à l'utilisateur d'envoyer son formulaire.

Figure 1 : Écriture de l'interface

Après cela j'ai voulu récupérer les données du formulaire que j'avais crée en HTML. J'ai donc créer un nouveau fichier ".php" pour récupérer ces différentes données. Mais après avoir installé Wampserveur, je n'arrivais pas à récupérer les données du formulaire. J'ai alors décidé de passer sous une machine virtuelle linux où j'ai installé Apache2 et php5. Une fois cela réalisé, j'ai réussi à récupérer les données de mon formulaire. J'ai donc réalisé le code "php" suivant pour récupérer les différentes données et les afficher :

<?php 
if(isset($_POST['submit'])){
$ordonnancement = $_POST['ordonnancement'];
$ressources = $_POST['ressources'];
$name_1 = $_POST['processus'];
echo "$ordonnancement\n";
echo "$ressources\n";
echo "$processus\n";	
} 

Dans notre condition if, nous mettons la condition "isset($_POST['submit'])" pour qu'une fois que l'utilisateur envoie le formulaire nous récupérons les différentes valeurs d'ordonnancement, ressources et processus.

Figure 2 : Récupération des données du formulaire HTML

Une fois cela réalisé, je voulais rendre ma page un peu plus dynamique pour les différents ajouts de processus c'est pourquoi j'ai commencé à rechercher des fonctions en Javascript pour pouvoir réaliser ce que je désirais. J'avais alors le code suivant qui me permettait d'ajouter les 4 champs que je voulais pour le processus c'est-à-dire son PID, sa date de création, sa priorité et ses événements :

function create_champ(i) {
 
var i2 = i + 1;

document.getElementById('leschamps_'+i).innerHTML = 'Processus : 
<input type="input" name="name_'+i+'">PID
<input type="input" 
name="name_'+i+'">Date de creation
<input type="input" name="name_'+i+'">Priorite
<input type="input" name="name_'+i+'">Evenements
</span>';
document.getElementById('leschamps_'+i).innerHTML += (i <=100 ) ? '
<a href="javascript:create_champ('+i2+')">Ajouter un 
processus</a>' : ;
 
}

J'ai donc utilisé "document.getElementById('leschanmps_'+i)" pour renvoyer l'élément dont l'ID est celui spécifié. De plus, il faut ajouter que id est une chaîne représentant l'identifiant de l'élément voulu. Puis, le "innerHTML récupère ou définit tout le balisage et le contenu au sein d'un élément donné. Voici deux captures d'écrans qui permettent de voir l'ajout d'un processus après l'appui sur "ajouter un processus" :

Figure 3.1 : Capture d'écran avant d'appuyer sur le bouton	Figure 3.2 : Résultat de cet appui

Une fois cette première version du formulaire terminée, j'ai commencé à penser aux différentes façons d'imprimer un chronogramme qui récupère mes différentes données. J'ai donc trouvé l'outil WaveDrom permettant de dessiner mes différents chronogrammes. Sachant que j'arrive à récupérer ces différentes données, il fallait que je code les différents algorithme en "php" pour pouvoir dessiner mes différents chronogrammes. J'ai donc dans un premier temps coder l'ordonnancement du tourniquet pour pouvoir l'afficher grâce à WaveDrom, il fallait d'abord définir dans le fichier "php" les lignes suivantes pour pouvoir utiliser cet outil.

<script src="http://wavedrom.com/skins/default.js" type="text/javascript"></script>
<script src="http://wavedrom.com/wavedrom.min.js" type="text/javascript"></script>

Par la suite, j'ai obtenu le chronogramme suivant pour le tourniquet avec 4 processus :

Figure 4 : Tracé de chronogrammes avec WaveDrom

J'avais déjà commencé un fichier en "css" pour améliorer la mise en forme de mon application web, ainsi je vais donner un exemple de code pour la bannière où nous verrons le titre :

#banniere{  
	
border: 5px ridge YellowGreen;  
	
text-align:center;
	
background-color: white;
}

Une fois que nous mettons du texte dans un div, nous aurons le texte qui sera encadré par une bordure d'une largeur de 5px ayant pour couleur le jaune/vert. De plus, le texte sera tout le temps centré et la couleur d'arrière plan sera blanche. J'ai créer d'autres mises en formes de la sorte pour mon application web, telle que le corps qui est encadré par une bordure bleue. Nous pouvons voir cela dans la capture d'écran suivante :

Figure 5 : Mise en forme de l'application web

Prise de recul pour changer le formulaire et le rendre dynamique

Pour commencer, cette interface graphique doit être de type WEB. L'objectif de cette partie est de récupérer les différentes données entrées par l'utilisateur. Ainsi, il faut que l'utilisateur puisse choisir son type d'ordonnancement, le nombre de ressources disponibles, le nombre de processus. De plus, pour chaque processus son PID, sa date de création, sa priorité et ses événements.

Au départ, j'ai voulu réaliser un formulaire où il fallait choisir le type d'ordonnancement. Ensuite, il fallait choisir le nombre de processus allant de 1 à 5. Une fois choisi, nous avions toutes les éléments que nous voulions.

Figure 6 : Affichage d'une des premières versions du formulaire

Points à améliorer :

• Pouvoir choisir un nombre de processus
• Ne pas avoir que 6 événements, mais pouvoir les entrer et que cela soit dynamiquement
• Le nombre de sémaphores qui est de 3
• Changement de méthode pour que le formulaire soit totalement dynamiquement

Dans ce projet, il y a différents fichiers un fichier contenant les algorithmes « chrono.js », la partie gérant la partie affichage à l'aide de la bibliothèque chart.js qui est « affichage.js ». Ensuite, il y a le fichier « formulaire.html » qui contient le formulaire.

Au début, j'avais pensé à utiliser le PHP pour récupérer les différentes données du formulaire mais cela ne répondait plus au cahier des charges. Il fallait utiliser le JavaScript.

Pour répondre à ces différents besoins, il était nécessaire de rendre dynamique le formulaire. Dans un premier temps, il a donc fallu créer un premier fichier « interface.html » qui est l'interface permettant d'introduire les différents processus à ordonner. Dans un second temps, il a fallu créer un fichier « script.js » qui permet de rendre le formulaire dynamique.

Lorsque nous accédons à l'interface principale nous constatons le présence de 4 éléments :

• Un groupe de boutons radio facilitant le choix de l'algorithme
• Un champ « input » permettant de choisir le nombre de processus
• Un second champ « input » permettant cette fois-ci de choisir le nombre de ressources
• Et enfin un bouton « valider », pour valider les différentes informations entrées par l'utilisateur.

Dans le fichier "interface.html", nous avons donc une première partie du formulaire. Dans cette première partie, nous demandons à l'utilisateur de sélectionner le type d'ordonnancement, le nombre de processus et le nombre de ressources. Une fois toutes ces données entrées, l'utilisateur valide son choix. Une fois ce choix effectué, j'avais eu l'idée de masquer les données précédentes. Sachant que je voulais que le code soit dynamique, j'ai donc décidé de créer un fichier "script.js" me permettant de gérer la partie dynamique du formulaire.

Dans mon fichier HTML, j'ai créée une classe "hide" comme cela :

$("#valider").on("click", function(e) {
    $(".hide").hide();
    nbre_proc = parseInt($(".nbreproc").val());
    nbre_res = parseInt($(".nbreres").val());
    radio = $("fieldset input[type='radio']:checked").val();