jsColorScale/barTest.html at master · quince-science/jsColorScale · 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
<!DOCTYPE html>
<html>
	<head>
		<title>jsColorScale Color bar tester</title>
		<style>
			#sampleHeader {
				margin-left: 20px;
			}
			.scale {
				width: 750px;
				height: 100px;
				margin-left: 20px;
			}
		</style>
		<script src="jsColorScale.js"></script>
		<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
		<script>
			function drawSVGBar() {

				try {
					var scaleDef = JSON.parse($('#scaleData').val());

					var scale = new ColorScale(scaleDef);
					scale.setValueRange($('#scaleMin').val(), $('#scaleMax').val());
					scale.setFont("Verdana", 15);

					var options = new Array();
					options['outliers'] = $('input[name=triangle]:checked', '#scaleForm').val();
					options['outlierSize'] = $('#outlierSize').val();
					options['decimalPlaces'] = 2;

					scale.drawScale(document.getElementById('svgScale'), options);
			    } catch (e) {
			    	console.log(e);
			    }

				return false;
			}
		</script>
	</head>
	<body>
		<form id="scaleForm">
			Color scale definition:
			<input id="scaleData" type="text" name="colorScale" size="150" value='[[0,"#FF0000"],[0.25,"#FFFF00"],[0.5,"#FFFFFF"],[0.75,"#0000FF"],[1,"#00DD00"]]'/>
			<br/>
			Outlier triangles:
			<input type="radio" name="triangle" value="n"/> None
			<input type="radio" name="triangle" value="l"/> Left
			<input type="radio" name="triangle" value="r"/> Right
			<input type="radio" name="triangle" value="b" checked/> Both
			<br/>
			Outlier size:
			<input type="text" id="outlierSize" name="outlierSize" value="5">
			<br/>
			Scale range:
			<input type="text" id="scaleMin" name="scaleMin" value="250"/>
			<input type="text" id="scaleMax" name="scaleMax" value="400"/>

			<br/>
			<br/>
			<button onclick="drawSVGBar(); return false;">Draw color bar</button>

			<br/>
			<br/>
			<br/>
			<br/>
			<div id="sampleHeader">
				Color bar will go here:
			</div>
			<div id="svgScale" class="scale">
			</div>
		</form>
	</body>
</html>