-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
122 lines (107 loc) · 6.18 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
<html>
<head>
<meta charset="utf-8" />
<!-- P5 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.2/p5.js"></script>
<!-- BOOTSTRAP -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<!-- CUSTOM JS -->
<script src="config.js"></script>
<script src="controls.js" defer></script>
<script src="producerConsumer.js"></script>
<script src="ProducerConsumer/DrawingTools.js"></script>
<script src="ProducerConsumer/ProducerConsumer.js"></script>
<script src="ProducerConsumer/Buffer.js"></script>
<script src="ProducerConsumer/Entity.js"></script>
<script src="ProducerConsumer/EdgeBuffer.js"></script>
<script src="ProducerConsumer/LogHistory.js"></script>
<!-- CUSTOM CSS -->
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div class="container">
<div class="page-header">
<h3>
<a href="http://he-arc.ch"><img src="external/resources/img/logo_hearc_ingenierie_rouge_transp.png" alt="logo_hearc_ingenierie" width="150px" /></a> 3253.1 Conception OS
</h3>
<p class="lead">
Authors : Raphaël Margueron, Quentin Michel & Damian Petroff -
<span class="badge badge-danger">INF3dlm-b</span>
<div>
Last update :
<span id="lastModified"></span>
</div>
</p>
<hr>
</div>
<h2><img src="external/resources/img/flag_fr.png" alt="flag_fr" width="20" /> Introduction</h2>
<!--icon source : https://www.flaticon.com/ -->
<p>
Cette application web vise à fournir une représentation graphique du patterne <a href="https://fr.wikipedia.org/wiki/Probl%C3%A8me_des_producteurs_et_des_consommateurs">Producteur-Consommateur</a>.
</p>
<p>
De Wikipédia : Le problème des producteurs et des consommateurs est un exemple informatique de synchronisation de ressources, qui peut s'envisager dans différents contextes de programmation concurrente, notamment en environnement multi-thread. Il s'agit de partager entre deux tâches, le producteur et le consommateur, une zone de mémoire tampon utilisée comme une file. Le producteur génère un élément de données, l'enfile sur la file et recommence ; simultanément, le consommateur retire les données de file.
Ce problème peut être généralisé à plusieurs producteurs ou consommateurs.
</p>
<br>
<h2><img src="external/resources/img/flag_en.png" alt="flag_en" width="20" /> Introduction</h2>
<!--icon source : https://www.flaticon.com/ -->
<p>
This web application aims to provide a graphical representation of the <a href="https://en.wikipedia.org/wiki/Producer%E2%80%93consumer_problem">Producer–consumer</a>.
</p>
<p>
From Wikipedia : In computing, the producer–consumer problem (also known as the bounded-buffer problem) is a classic example of a multi-process synchronization problem. The problem describes two processes, the producer and the consumer, who share a common, fixed-size buffer used as a queue. The producer's job is to generate data, put it into the buffer, and start again. At the same time, the consumer is consuming the data (i.e., removing it from the buffer), one piece at a time. The problem is to make sure that the producer won't try to add data into the buffer if it's full and that the consumer won't try to remove data from an empty buffer.
The solution for the producer is to either go to sleep or discard data if the buffer is full. The next time the consumer removes an item from the buffer, it notifies the producer, who starts to fill the buffer again. In the same way, the consumer can go to sleep if it finds the buffer empty. The next time the producer puts data into the buffer, it wakes up the sleeping consumer. The solution can be reached by means of inter-process communication, typically using semaphores. An inadequate solution could result in a deadlock where both processes are waiting to be awakened. The problem can also be generalized to have multiple producers and consumers.
</p>
<hr>
<h2>Application</h2>
<div class="row">
<h4 id="bufferSyncLabel" class="col-md-5 col-sm-12 text-right">Synchrone</h4>
<div class="col-md-2 col-sm-12 text-center">
<input id="bufferSyncRange" type="range" class="custom-range" min="0" max="1">
</div>
<h4 id="bufferASyncLabel" class="col-md-5 col-sm-12 text-left">Asynchrone</h4>
</div>
<div class="row text-center">
<div class="col-md-6 col-sm-12 text-center">
<h4 for="bufferSize">Buffers size</h4>
<input id="bufferSize" type="range" class="custom-range">
<span id="bufferSizeLabel" style="font-size: 40;"></span>
</div>
<div class="col-md-6 col-sm-12 text-center">
<h4 for="bufferQte" class="sync-only-faded">Number of buffers</h4>
<input id="bufferQte" type="range" class="custom-range sync-only-disabled">
<span id="bufferQteLabel" class="sync-only-faded" style="font-size: 40;"></span>
</div>
</div>
<hr>
<h3>Entity speed</h3>
<br>
<table id="table_entities" class="table w-100 text-center"></table>
<div class="w-100 text-center p-2">
<button id="btnRestart" class="btn btn-primary">Restart</button>
<button id="btnPause" class="btn"></button>
</div>
<div id="producerConsumerCanvasContainer"></div>
<small class="float-right text-muted">Click on the canvas to Fullscreen, Esc. to quit</small>
<h2 class="pt-3">Log history</h2>
<button id="clearLogHistory" class="float-right btn btn-secondary btn-sm">
Clear Log history
</button>
<div id="logHistoryDiv" class="bg-dark text-white">
</div>
<hr>
<h2>References</h2>
<ul class="noBullet" style="list-style-type: '- ';">
<li><a href="https://en.wikipedia.org/wiki/Producer%E2%80%93consumer_problem">Producer-consumer problem - Wikipedia</a></li>
</ul>
<h2>Libraries</h2>
<ul class="noBullet" style="list-style-type: '- ';">
<li><a href="https://getbootstrap.com">Bootstrap</a></li>
<li><a href="https://p5js.org">p5.js</a></li>
</ul>
<p class="lead text-center">HE-Arc - 2019</p>
</div>
</body>
</html>