DotMatrixJS/index.html at master · cargowire/DotMatrixJS · 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
<html>
<head>
	<meta name="author" content="Craig Rowe - http://cargowire.net" />

	<script type="text/javascript" src="https://www.google.com/jsapi"></script>
	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
	<script type="text/javascript" src="dotmatrix.js"></script>

	<script type="text/javascript">
	$(function(){

		var processAndCreate = function(options){
			dotmatrix.processImage({ columns: $('#cols').val(), rows: $('#rows').val(), mono: $('#mono_on:checked').length, maintain_aspect: $('#maintain_aspect:checked').length },
				function(e) {
					var o = { threshold: e.avg.red + e.avg.green + e.avg.blue };
					$.extend(o, options);
					$('#threshold').val(o.threshold);
					dotmatrix.createDotMatrix(o);
				}
			);
		};

		dotmatrix.init({ imageRetrieved: function(data){
			$('#info').text('Image retrieved: ' + data.image.width + 'px ' + data.image.height + 'px (Ratio: '+ data.image.width / data.image.height +')');
			processAndCreate();
		}});
		$('#process').on('click', function(e) { processAndCreate({ threshold: $('#threshold').val() });e.preventDefault(); });
		$('#result-bg').on('keyup', function(){ var colour = $(this).val(); if(colour.substring(0,1) == '#' && (colour.length == 4 || colour.length == 7)) { $('#result').css('background-color', colour); } })
		if(window.location.search){
			var preload = window.location.search.substring(1);
			$('#image').val(preload);
			$('#image-picker').submit();
		}
	});
	</script>

	<link rel="stylesheet" type="text/css" href="main.css" />
</head>
<body>

	<form id="image-picker">
		<p><label>Remote image path: </label><input type="text" name="image" id="image" /></p>
		<p><label>Columns: </label><input type="text" class="number-field" name="cols" id="cols" maxlength="3" value="8" /></p>
		<p><label>Rows: </label><input type="text" class="number-field" name="rows" id="rows" maxlength="3" value="8" /></p>
		<p>
			<label><input type="radio" id="mono_off" name="mono" value="0">Colour</label>
			<label><input type="radio" id="mono_on" name="mono" value="1" checked="checked">B&amp;W</label>
		</p>
		<p><input type="text" class="number-field" id="threshold" name="threshold" maxlength="4" value="200"/></p>
		<p>
			<label><input type="checkbox" id="maintain_aspect" name="maintain_aspect" value="1">Maintain aspect</label>
		</p>
		<p><input type="submit" value="Retrieve Image"/><button id="process">Process</button></p>
		<p><label>Dot BG: </label><input type="text" id="result-bg" name="result-bg" value="#FFEC8B"/></p>
	</form>

	<div class="column">
		<p id="info"></p>

		<canvas id="csImage">
		</canvas>

	</div>

	<div class="column">
		<div id="result">

		</div>
	</div>

	<div id="footer">
		<p>Brought to you by <a href="http://twitter.com/cargowire">cargowire</a>.  Inspired by <a href="http://twitter.com/sydlawrence">Syd</a> and <a href="http://twitter.com/skattyadz">Ad</a> and their <a href="https://path.com/p/2OL9ce">crazy arduino hack</a></p>
	</div>
</body>
</html>