forked from flackner/pandemic_billiard
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
122 lines (120 loc) · 5.76 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 is the markup language that defines the structure and the content of the page.
A HTML document starts with the <html> tag.
-->
<!DOCTYPE html>
<html>
<!--
Next comes the <head> tag which contains information about the page such as
charset, title, java script file, css source file, author, keywords...
-->
<head>
<meta charset="UTF-8">
<!--
I still have trouble understanding the viewport. I quess it is the visible area in a browser measured
in real physical units of 1/96 inch = 1 px. Many of the dimensions set in the CSS file are in
px unites which means that the physical size is hardcoded. This of course is not very good. Probably
implementation using relative units sich as % and vw would be better. Another problem with the viewport is
that it can change when the virtual keyboard is activeted. To keep the viewport fixed the size is fixed
via javascript. In javascript the size of the viewport is accessible via window.innerWidth and
window.innerHeight.
-->
<meta name="viewport"/>
<title>Pandemic billiard</title>
<!--
The javascript source file is executed right now. After execution of the javascript
source file the fucntion and variables are available in the rest of
the document. However be careful not to search for HTML elements at this point.
Since HTML elements are not defined at this point the script cannot find them!
Once all HTML elements are loaded the function window.onload executes. By assining
"window.onload = init" the javascript function init is executed once the page is fully
loaded and initiates further actions
-->
<script src="dynamics.js"></script>
<!--
CSS is the style sheet language that defines the design (look, layout) of the page
-->
<link href="style.css" rel="stylesheet" type="text/css">
<!--
Include external libraries. Probably using D3 gives MUCH nicer visualisation!
-->
<!-- <script src="https://d3js.org/d3.v5.min.js"></script> -->
</head>
<!--
Next comes the <body> tag which contains the content of the page. Tags can be
styled with the CSS file. To identify a specific tag either "id=" or "class=" can be used.
IDs can only be used for one tag, while CLASSES can be used for several tags.
-->
<body>
<!--
The canvas element is the screen where all the animations happen.
-->
<canvas id="canvasBilliard"></canvas>
<!--
The div element is just a grouping element that groups elements together.
-->
<div id="panel">
<div id="container">
<div id="parameters">
<h4> Input parameters </h4>
<span> Initial number of particles </span>
<!--
The input element reads data into javascript.
-->
<input type="number" id="nParticles" value=380>
<br>
<span> Particle radius from </span>
<input type="number" id="minRadius" value=3.5>
<span> to </span>
<input type="number" id="maxRadius" value=13.5>
<br>
<span> Speed of particles [s] </span>
<input type="number" id="speed" value=9.5>
<br>
<span> Recovery time [s] </span>
<input type="number" id="recoverTime" value=3.2>
<br>
<span> Fatality rate </span>
<input type="number" id="caseFatality" value=0.04 min="0" max="1">
<br>
</div>
<div id="data">
<a id="gitlink" href="https://github.com/flackner/pandemic_billiard">Link to github repo here</a>
<h4> Current status </h4>
<span> Number of uninfected : </span>
<!--
The output element shows values from javascript.
-->
<output id="uninfected" class="outputClass"></output><br>
<span> Number of infected : </span>
<output id="infected" class="outputClass"></output><br>
<span> Number of recovered : </span>
<output id="recovered" class="outputClass"></output><br>
<span> Number of deaths : </span>
<output id="deaths" class="outputClass"></output><br>
<span> Duration of Immunity [s] </span>
<input type="number" id="immunityduration" value=3.>
</div>
</div>
<!--
The button element executes javascript functions on click.
-->
<div id="buttons">
<button onclick="restartAnimation()">Restart simulation</button>
<button onclick="stopAnimation()">Stop simulation</button>
<button onclick="resumeAnimation()">Resume simulation</button>
</div>
<!--
Another canvas element shows the Graph. The Graph is implemented with
vanilla javascript (without libraries). Probably libraries lead to mush prettier
Graphs!
-->
<canvas id="canvasGraph"></canvas>
<!--
Axes names are repositioned in the CSS
-->
<span id="xAxis"> time </span>
<span id="yAxis"> status </span>
</div>
</body>
</html>