jsColorScale/scaleMaker.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
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
<!DOCTYPE html>
<html>
	<head>
		<title>jsColorScale Scale Maker</title>

		<style type="text/css">

			#content {
				display: flex;
				width: 100%;
				height: 400px;
			}

			#entry {
				flex-grow: 1;
			}

			#textEntry {
				width: 90%;
				height: 100%;
			}

			#demo {
				flex-grow: 1;
			}

			#scale {
				width: 500px;
				height: 50px;
			}

			#errorText {
				color: #ff0000;
			}
		</style>

		<script src="jsColorScale.js"></script>
		<script>
			var scaleTest = null;

			function test() {
				var enteredText = document.getElementById('textEntry').value;
				var scaleArray = new Array();
				var textOK = true;
				var errorMessage = null;


				var lines = enteredText.split('\n');
				for (var i = 0; i < lines.length && textOK; i++) {
					var fields = lines[i].split(',');
					var index = fields[0];
					var color = fields[1];

					// Check the index
					var parsedIndex = parseFloat(index);
					if (isNaN(parsedIndex)) {
						errorMessage = 'Invalid index ' + index;
						textOK = false;
						continue;
					}

					if (scaleArray.length > 0) {
						var lastIndex = scaleArray[scaleArray.length - 1][0];
						if (index < lastIndex) {
							errorMessage = 'Index ' + parsedIndex + ' is not increasing';
							textOK = false;
							continue;
						}
					}

					// Check that the index is increasing
					if (!colorOK(color)) {
						errorMessage = 'Invalid color ' + color;
						textOK = false;
						continue;
					}

					scaleArray[scaleArray.length] = [parsedIndex, color];
				}

				if (!textOK) {
					document.getElementById('errorText').innerHTML = errorMessage;
					document.getElementById('json').innerHTML = '';
				} else {
					document.getElementById('errorText').innerHTML = '';

					var arrayText = '[';
					for (var i = 0; i < scaleArray.length; i++) {
						arrayText += '[';
						arrayText += scaleArray[i][0];
						arrayText += ',';
						arrayText += scaleArray[i][1];
						arrayText += ']';
						if (i < (scaleArray.length - 1)) {
							arrayText += ',';
						}
					}
					arrayText += ']';
					document.getElementById('json').innerHTML = arrayText;


					scaleTest = new ColorScale(scaleArray);
					scaleTest.setValueRange(0, 1);
					scaleTest.drawScale(document.getElementById('scale'));
				}
			}
		</script>
	</head>
	<body>
		<h1>jsColorScale Scale Maker</h1>
		Use this page to create color scale definitions.
		<div id="content">
			<div id="entry">
				<textarea id="textEntry" onkeyup="test()"></textarea>
			</div>
			<div id="demo">
				<div id="errorText">
				</div>
				<div id="json">
				</div>
				<div id="sample">
					<canvas id="scale"></canvas>
				</div>
			</div>
		</div>
	</body>
</html>