/
index.html
95 lines (84 loc) · 3.33 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
<!DOCTYPE HTML>
<html>
<head>
<title>Antenna demo</title>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/svg+xml" href="./img/favicon.svg">
<link rel="stylesheet" type="text/css" href="./css/style.css">
<link rel="stylesheet" href="//cdn.jsdelivr.net/chartist.js/latest/chartist.min.css">
<script src="//cdn.jsdelivr.net/chartist.js/latest/chartist.min.js"></script>
<script type="application/javascript" src="./js/index.js" defer></script>
</head>
<body>
<div class="container">
<div class="controls">
<label for="wavelength">Wavelength</label>
<br>
<div>
<input type="range" id="wavelength" value="20" min="5" max="100" step="1"></input>
<span class="display" data-value="wavelength"></span>mm
</div>
<br>
<label for="distance">Receiver distance</label>
<br>
<div>
<input type="range" id="distance" value="100" min="20" max="1000"></input>
<span class="display" data-value="distance"></span>m
</div>
<br>
<label for="separation">Separation of transmitters</label>
<br>
<div>
<input type="range" id="separation" value="0.5" min="0.4" max="100" step="0.005"></input>
<span class="display" data-value="separation"></span> wavelengths
</div>
<br>
<label for="transmitterGroups">Number of transmitter groups</label>
<br>
<div>
<input type="range" id="transmitterGroups" value="6" min="1" max="15"></input>
<span class="display" data-value="transmitterGroups"></span>
</div>
<br>
<label for="transmittersPerGroup">Number of transmitters per group</label>
<br>
<div>
<input type="range" id="transmittersPerGroup" value="10" min="1" max="20"></input>
<span class="display" data-value="transmittersPerGroup"></span>
</div>
<br>
<label for="transmitters">Transmission angle</label>
<br>
<div>
<input type="range" id="transmitAngle" value="0" min="-90" max="90"></input>
<span class="display" data-value="transmitAngle"></span> degrees
</div>
<label for="groupPhaseShiftFunc">Group phase shift function</label>
<p>
This JavaScript function defines the phase shift for each group. It
should return whole turns, i.e. 1 means "in phase" and 0.5 means "in
antiphase".
</p>
<div>
<textarea type="textarea" id="groupPhaseShiftFunc" rows=20 cols=60>// imagine a right-angled triangle where the hypotenuse is
// the line connecting the centre points of two adjacent
// transmitter groups
let hyp = params.separation * params.transmittersPerGroup;
// theta is the angle between the transmit beam and the
// x-axis (along which the transmitters lie).
let theta = deg2rad(90 - params.transmitAngle);
// This is the difference that the signals from two adjacent transmitters
// have to travel to reach a certain point, in wavelengths
let delta = hyp * Math.cos(theta);
return group * delta;
</textarea>
</div>
Transmitter group:
<canvas id="transmitter-group-canvas" height="200" width="400"></canvas>
</div>
<div class="ct-chart ct-perfect-fifth"></div>
</div>
</body>
</html>