-
Notifications
You must be signed in to change notification settings - Fork 4
/
Copy pathindex.html
139 lines (117 loc) · 5.67 KB
/
index.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
<!DOCTYPE html>
<html>
<head>
<script class="jsbin" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script class="jsbin" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.0/jquery-ui.min.js"></script>
<title>PoiSonic Poi APA102 image converter for Teensy</title>
<style type="text/css">article, aside, figure, footer, header, hgroup,
menu, nav, section {
display: block;
}
</style>
</head>
<body>
<fieldset>
<legend>PoiSonic Poi APA102 image converter for Teensy:</legend>
<p>
This is a modified version of Mortonkopf's image conversion utility for use with his persistence-of-vision poi
Arduino sketch. (Project page
<a href="http://orchardelica.com/wp/?page_id=597">here</a>,
PJRC forum discussion thread
<a href="https://forum.pjrc.com/threads/30020-Teensy-APA102-POV-Poi-Pixel-Poi-Build-Tutorial">here</a>.)
By removing the regular image re-rendering during the generation of the hex code array, the utility now
generates code almost instantaneously. This enhancement was done by Josh Horowitz. The code has also been
annotated and is available for review and additional contribution
<a href="https://github.com/jhorowitz/PoiSonicApa102ImageConverter/blob/master/index.html">here</a>.
<br>
<br>
Below is the original text associated with the image converter, and the enhanced utility follows:
<br>
<br>
This code generates a hex code array from an image for use in the APA102 pixel poi. The array in the output box
can be copied into the const array[] of the ino sketch. This utility has been written by mortonkopf for use with
24 bit rgb arrays using Teensy. Enter led number(eg 60) and number of slices to divide your image into (eg.150),
then select the image you want, then hit the button. Wait while the code is generated, then Copy the code. This
code currently works, but best to use images of very low res, pre processed, otherwise poor quality output.
</p>
<p align="center"><img id="z13f"/></p>
<p align="center"><input name="my-image" onchange="readURL(this);" type="file"/></p>
<p align="center" class="style1"> Output width(number of image slices)
<input name="Width" id="zwim" type="number"/>
</p>
<p align="center" class="style1"> Output Height(number of leds on Poi)
<input name="Height" id="zhim" type="number"/>
</p>
<p align="center" class="style1">
<button onclick="h45093()">Get Code</button>
</p>
</fieldset>
<canvas></canvas>
<script>
function h45093() {
var width = document.getElementById('zwim').value;
var height = document.getElementById('zhim').value;
var image = document.querySelector('img');
// We created a canvas above and access it here because chrome has built
// in image manipulation functions. We will use these functions to do the
// size transformations and then get the image data.
// https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/getImageData
var canvas = document.querySelector('canvas');
// Set the height and width of the canvas
canvas.width = width;
canvas.height = height;
var context = canvas.getContext('2d');
// This is where we render and resize the image
// https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/drawImage
context.drawImage(image, 0, 0, width, height);
// Here we get the data from the array. One hex code is four elements in the
// array. The
var imageData = context.getImageData(0, 0, width, height).data;
var result = "const unsigned int array1[] = { ";
for (var i = 0, n = imageData.length; i < n; i += 4) {
// R in RGBA
var de = imageData[i];
// G in RGBA
var ne = imageData[i + 1];
// B in RGBA
var eu = imageData[i + 2];
// A in RGBA (opacity). We don't actually use this in our calculation. If you'd like to enable
// it, uncomment the code directly below it.
var ah = imageData[i + 3];
// Uncomment this code to enable accurate opacity in your images
// http://stackoverflow.com/questions/2049230/convert-rgba-color-to-rgb
// de = ((1 - ah) * de) + (ah * de);
// ne = ((1 - ah) * ne) + (ah * ne);
// eu = ((1 - ah) * eu) + (ah * eu);
var hexi =
// Each one of these take the R, G or B converts it to hex and concatenates them
// to make hex values like 51327e
("0" + parseInt(de, 10).toString(16)).slice(-2) +
("0" + parseInt(ne, 10).toString(16)).slice(-2) +
("0" + parseInt(eu, 10).toString(16)).slice(-2);
// Prepend 0x to the hex to make hex values like 0x51327e
result += "0x";
result += hexi;
result += ", ";
}
result += "}; //end of array ";
// Write the final result to the document
document.getElementById("OutPutTextArea").innerHTML += result;
}
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#z13f')
.attr('src', e.target.result)
.width(250)
.height(200);
};
reader.readAsDataURL(input.files[0]);
}
}
</script>
<p><textarea cols="100" id="OutPutTextArea" rows="10">
</textarea></p>
</body>
</html>