forked from tedder/digipixel-creator
-
Notifications
You must be signed in to change notification settings - Fork 0
/
digipixel-creator.html
184 lines (142 loc) · 6.95 KB
/
digipixel-creator.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
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
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>digipixel creator</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="//cdnjs.cloudflare.com/ajax/libs/jasny-bootstrap/3.0.1-p7/css/bootstrap.min.css" rel="stylesheet">
<script type='text/javascript' src='//code.jquery.com/jquery-2.0.2.js'></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jasny-bootstrap/3.0.1-p7/js/bootstrap.min.js"></script>
<style type='text/css'>
</style>
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
function padding_left(string_to_pad, pad_char, pad_num) {
if (!string_to_pad || !pad_char || string_to_pad.length >= pad_num) {
return string_to_pad;
}
var max = (pad_num - string_to_pad.length) / pad_char.length;
for (var i = 0; i < max; i++) {
string_to_pad = pad_char + string_to_pad;
}
return string_to_pad;
}
// create the 0b0011001100 binary format, zero-padded.
function embinerate(num, width) {
console.log("===", num);
return "0b" + padding_left(num.toString(2), "0", width);
}
function prepend_zero_b(x) {
return "0b" + x;
}
function enable_bit(bitstring, bitnum) {
// so the 0th bit is the LAST bit, not the first.
// backward math.
chars = bitstring.split('');
target = chars.length - bitnum;
chars[target] = "1";
//if (debug && chars.length > 32) console.log("target:", target, "charlen", chars.length, "bitnum", bitnum);
return chars.join('');
}
// should we enable the barrier bit?
function test_barrier(r, g, b) {
if (r > 127 && r < 255) return 1; // we will count a pixel as being a barrier if it is just a bit darker than 255
if (g > 127 && g < 255) return 1;
if (b > 127 && b < 255) return 1;
}
// main function, containing everything I didn't properly section off. What a horrible pile of code. What do I even call it? Foo. Yeah.
function run_foo() {
var fr = new FileReader();
fr.onload = function () {
var img = new Image();
img.src = fr.result;
var c = document.getElementById("cvs");
var ctx = c.getContext("2d");
ctx.drawImage(img, 0, 0);
img.onload = function () {
var imgd = ctx.getImageData(0, 0, this.width, this.height);
pix = imgd.data;
var red = new Array(this.width);
var green = new Array(this.width);
var blue = new Array(this.width);
var barrier = new Array(this.width);
for (var j = this.width - 1; j >= 0; --j) {
red[j] = Array(this.height + 1).join("0");
green[j] = Array(this.height + 1).join("0");
blue[j] = Array(this.height + 1).join("0");
barrier[j] = Array(this.height + 1).join("0");
}
for (var i = 0, n = pix.length; i < n; i += 4) {
// i + 4 is the alpha channel.
// I consistently got the x/y calculation wrong. Here's where I found the Correct Way to do it.
// http://stackoverflow.com/a/20445915/659298
var x = (i / 4) % this.width;
var y = Math.floor((i / 4) / this.width);
//x = (i / 4) % this.width;
//y = Math.floor(i / (4 * this.height));
pixelBit = (this.height - y);
if (pix[i] > 127) red[x] = enable_bit(red[x], pixelBit);
if (pix[i + 1] > 127) green[x] = enable_bit(green[x], pixelBit);
if (pix[i + 2] > 127) blue[x] = enable_bit(blue[x], pixelBit);
if (test_barrier(pix[i], pix[i + 1], pix[i + 2])) barrier[x] = enable_bit(barrier[x], pixelBit);
}
var output = "";
var vartype = "byte";
var varlabel = document.getElementsByName("label_name")[0].value;
height = this.height;
width = this.width;
if (height == 16) vartype = "word";
if (height == 32) vartype = "long";
output += vartype + " " + varlabel + "Red[" + width + "]PROGMEM={\n " + red.map(function (x) {
return "0b" + x;
}).join(",\n ") + "};\n";
output += vartype + " " + varlabel + "Green[" + width + "]PROGMEM={\n " + green.map(function (x) {
return "0b" + x;
}).join(",\n ") + "};\n";
output += vartype + " " + varlabel + "Blue[" + width + "]PROGMEM={\n " + blue.map(function (x) {
return "0b" + x;
}).join(",\n ") + "};\n";
output += vartype + " " + varlabel + "Barrier[" + width + "]PROGMEM={\n " + barrier.map(function (x) {
return "0b" + x;
}).join(",\n ") + "};\n";
$('#res').text(output);
};
};
fr.readAsDataURL(this.files[0]);
}
$('input').change(run_foo);
});//]]>
</script>
<style type="text/css">
.alert a {
text-decoration: underline
}
</style>
</head>
<body>
<div class="container">
<div class="page-header">
<h1>Bitmap Creator<small> for Brad's Digipixel Kickstarter project by Tedder</small></h1>
</div>
<div class="alert alert-info">
<p>See <a href="http://www.bradsprojects.com/the-digipixel/">www.bradsprojects.com/the-digipixel/</a> and <a href="http://www.kickstarter.com/projects/1897710270/digipixel-an-led-game-shield-for-your-arduino-or-d">www.kickstarter.com/projects/1897710270/digipixel-an-led-game-shield-for-your-arduino-or-d</a>. Please <a href="https://github.com/tedder/digipixel-creator">edit this code</a> to add instructions, make the display pretty, clean the code up, or anything else desired! You can also <a href="http://twitter.com/tedder42">reach me on twitter</a>.</p>
</div>
<div class="fileinput fileinput-new" data-provides="fileinput">
<div class="fileinput-preview thumbnail" data-trigger="fileinput" style="width: 400px; height: 150px;"></div>
<div>
<span class="btn btn-default btn-file"><span class="fileinput-new">Select image</span><span class="fileinput-exists">Select another image</span><input type="file" name="..."></span>
</div>
</div>
<input style="position-relative; margin-left: -1500px" type="file"> <!-- required for script -->
<br />
<input type="text" class="form-control" placeholder="Name it..." name="label_name" value="" />
<br />
<textarea id="res" class="form-control" placeholder="Data appears here..." rows=12 cols=40></textarea>
<br clear="all" />
<!-- if this is made 0x0 px the code doesn't work :( -->
<canvas id="cvs" height=1000 width=1000 style="position-relative; margin-left: -1500px;"></canvas> <!-- Push it off screen -->
<br />
version: 1.2.3</br>
</div>
</body>
</html>