-
Notifications
You must be signed in to change notification settings - Fork 1
/
gridAutoLinear.html
101 lines (93 loc) · 3 KB
/
gridAutoLinear.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
<html>
<head>
<title>canvasPlot.js automatic linear grid example</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="canvasPlot.js" type="text/javascript"></script>
<script src="mapLinear.js" type="text/javascript"></script>
<script src="simplePlot.js" type="text/javascript"></script>
<script src="canvasStretch.js" type="text/javascript"></script>
<script src="simplePlotWidget.js" type="text/javascript"></script>
<script src="super.js" type="text/javascript"></script>
<script src="gridAutoLinear.js" type="text/javascript"></script>
<script type="text/javascript">
function init() {
var p = Object.create(canvasPlot.simplePlotWidget);
p.init(document.getElementById("canvas"),
Object.create(canvasPlot.mapLinear), null, null, null, null);
p.plot.grid = Object.create(canvasPlot.gridAutoLinear);
p.plot.grid.init(null, p.plot.map.xRange, p.plot.map.yRange);
function setValElement(name) {
var elem = document.getElementById(name);
elem.valElement = document.getElementById(name + "_val");
if (elem.valElement.innerHTML != elem.value)
elem.valElement.innerHTML = elem.value;
return elem;
}
var x1_elem = setValElement("x1");
var x2_elem = setValElement("x2");
var y1_elem = setValElement("y1");
var y2_elem = setValElement("y2");
p.plot.map.xRange.min = parseFloat(x1_elem.value);
p.plot.map.xRange.max = parseFloat(x2_elem.value);
p.plot.map.yRange.min = parseFloat(y1_elem.value);
p.plot.map.yRange.max = parseFloat(y2_elem.value);
p.update(false);
p.draw();
function input() {
if (this.valElement.innerHTML == this.value)
return;
this.valElement.innerHTML = this.value;
switch (this) {
case x1_elem:
p.plot.map.xRange.min = parseFloat(this.value);
break;
case x2_elem:
p.plot.map.xRange.max = parseFloat(this.value);
break;
case y1_elem:
p.plot.map.yRange.min = parseFloat(this.value);
break;
case y2_elem:
p.plot.map.yRange.max = parseFloat(this.value);
break;
}
p.update(false);
p.draw();
}
x1_elem.addEventListener("input", input);
x2_elem.addEventListener("input", input);
y1_elem.addEventListener("input", input);
y2_elem.addEventListener("input", input);
}
window.addEventListener("load", init);
</script>
</head>
<body>
<div class="canvas">
<canvas id="canvas"></canvas>
</div>
<form>
<div>
<label for="x1">x1: </label>
<input type="range" id="x1" min="-10" max="10" step="0.01" value="0" />
<span id="x1_val">0</span>
</div>
<div>
<label for="x2">x2: </label>
<input type="range" id="x2" min="-10" max="10" step="0.01" value="10" />
<span id="x2_val">10</span>
</div>
<div>
<label for="y1">y1: </label>
<input type="range" id="y1" min="-10" max="10" step="0.01" value="0" />
<span id="y1_val">0</span>
</div>
<div>
<label for="y2">y2: </label>
<input type="range" id="y2" min="-10" max="10" step="0.01" value="10" />
<span id="y2_val">10</span>
</div>
</form>
</html>
</form>
</html>