bachelorscriptie/paramMatrix.html at master · marcovo/bachelorscriptie · GitHub

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
123
124
125
126
127
128
129
130
131
132
133
134
135
<!DOCTYPE html>
<html>
<head>
<!--
- paramMatrix.html
- Maak een 2D-array/matrix van plaatjes doorzoekbaar met knoppen en pijltjestoetsen
-->
<style type="text/css">

table {
	border: 0px solid #000000;
	text-align: center;
	margin: auto;
}

td.gray {
	background-color: #cccccc;
}

button {
	cursor: pointer;
}

span#current {
	font-weight: bold;
}

</style>
<script type="text/javascript">
	var xs = ["1.0", 1.1, 1.2, 1.3, 1.4, 1.5, 1.6, 1.7, 1.8, 1.9, "2.0"];
	var ys = ["1.0", 1.1, 1.2, 1.3, 1.4, 1.5, 1.6, 1.7, 1.8, 1.9, "2.0"];
	var labelX = "alpha1";
	var labelY = "alpha2";
	var currentX = 0;
	var currentY = 0;
	var dir = 0;

	var dirs = [
		["resultaten/alphaMat_res/alphaMat_{x}_{y}_u.png"					, "Resulterend"],
		["resultaten/alphaMat_0.0025_0.1/alphaMat_{x}_{y}_u.png"			, "dt = 0.1, u_mesh"],
		["resultaten/alphaMat_0.0025_0.1/alphaMat_{x}_{y}_u_plot.png"		, "dt = 0.1, u_plot"],
		["resultaten/alphaMat_0.0025_0.1/alphaMat_{x}_{y}_v.png"			, "dt = 0.1, v_mesh"],
		["resultaten/alphaMat_0.0025_0.1/alphaMat_{x}_{y}_v_plot.png"		, "dt = 0.1, v_plot"],
		["resultaten/alphaMat_0.0025_0.01/alphaMat_{x}_{y}_u.png"			, "dt = 0.01, u_mesh"],
		["resultaten/alphaMat_0.0025_0.01/alphaMat_{x}_{y}_u_plot.png"		, "dt = 0.01, u_plot"],
		["resultaten/alphaMat_0.0025_0.01/alphaMat_{x}_{y}_v.png"			, "dt = 0.01, v_mesh"],
		["resultaten/alphaMat_0.0025_0.01/alphaMat_{x}_{y}_v_plot.png"		, "dt = 0.01, v_plot"],
		["resultaten/alphaMat_0.0025_0.005/alphaMat_{x}_{y}_u.png"			, "dt = 0.005, u_mesh"],
		["resultaten/alphaMat_0.0025_0.005/alphaMat_{x}_{y}_u_plot.png"		, "dt = 0.005, u_plot"],
		["resultaten/alphaMat_0.0025_0.005/alphaMat_{x}_{y}_v.png"			, "dt = 0.005, v_mesh"],
		["resultaten/alphaMat_0.0025_0.005/alphaMat_{x}_{y}_v_plot.png"		, "dt = 0.005, v_plot"]
	];

	function arrayMax(numArray) {
		return Math.max.apply(null, numArray.map(parseFloat));
	}
	function arrayMin(numArray) {
		return Math.min.apply(null, numArray.map(parseFloat));
	}

	function changeImage() {
		document.getElementById('current').innerHTML = 'dir = ' + dirs[dir][1] + ', ' + labelX + ' = ' + xs[currentX] + ', ' + labelY + ' = ' + ys[currentY];
		document.getElementById('image').src = dirs[dir][0].replace('{x}', xs[currentX]).replace('{y}', ys[currentY]);
		document.getElementById('up').innerHTML		= labelY + ' = ' + ys[up()];
		document.getElementById('down').innerHTML	= labelY + ' = ' + ys[down()];
		document.getElementById('left').innerHTML	= labelX + ' = ' + xs[left()];
		document.getElementById('right').innerHTML	= labelX + ' = ' + xs[right()];
	}

	function moveUp()		{currentY = up(); changeImage(); }
	function moveDown()		{currentY = down(); changeImage(); }
	function moveLeft()		{currentX = left(); changeImage(); }
	function moveRight()	{currentX = right(); changeImage(); }

	function up()		{return Math.max(currentY - 1, 0); }
	function down()		{return Math.min(currentY + 1, ys.length-1); }
	function left()		{return Math.max(currentX - 1, 0); }
	function right()	{return Math.min(currentX + 1, xs.length-1); }

	function keyCode(evt) {
		return document.layers ? evt.which : document.all ? event.keyCode : document.getElementById ? evt.keyCode : 0;
	}

	function showDirs() {
		var content = '';
		for(dirId in dirs) {
			content += '<button onclick="changeDir('+dirId+');">'+dirs[dirId][1]+'</button> ';
			if(dirId%4 == 0) content += '<br />';
		}
		document.getElementById('dirs').innerHTML = content;
	}

	function changeDir(dirId) {
		dir = dirId;
		changeImage();
	}

	window.onload = function() { changeImage(); showDirs(); };
	window.onkeyup = function(e) {
		var key = keyCode(e);
			 if(key == 38) moveUp();
		else if(key == 37) moveLeft();
		else if(key == 39) moveRight();
		else if(key == 40) moveDown();
	};
</script>
</head>
<body>
<table>
	<tr>
		<td></td>
		<td id="dirs"></td>
		<td></td>
	</tr>
	<tr>
		<td></td>
		<td class="gray"><button id="up" onclick="moveUp();"></button></td>
		<td></td>
	</tr>
	<tr>
		<td class="gray"><button id="left" onclick="moveLeft();"></button></td>
		<td>
			<span id="current"></span><br />
			<img src="" alt="" id="image" />
		</td>
		<td class="gray"><button id="right" onclick="moveRight();"></button></td>
	</tr>
	<tr>
		<td></td>
		<td class="gray"><button id="down" onclick="moveDown();"></button></td>
		<td></td>
	</tr>
</table>
</body>
</html>