mirror of
https://github.com/javl/image2cpp.git
synced 2026-07-27 19:56:07 +00:00
Removed unused files
This commit is contained in:
javl
@@ -1 +0,0 @@
|
||||
{"name":"Image2cpp","tagline":"","body":"### Welcome to GitHub Pages.\r\nThis automatic page generator is the easiest way to create beautiful pages for all of your projects. Author your page content here [using GitHub Flavored Markdown](https://guides.github.com/features/mastering-markdown/), select a template crafted by a designer, and publish. After your page is generated, you can check out the new `gh-pages` branch locally. If you’re using GitHub Desktop, simply sync your repository and you’ll see the new branch.\r\n\r\n### Designer Templates\r\nWe’ve crafted some handsome templates for you to use. Go ahead and click 'Continue to layouts' to browse through them. You can easily go back to edit your page before publishing. After publishing your page, you can revisit the page generator and switch to another theme. Your Page content will be preserved.\r\n\r\n### Creating pages manually\r\nIf you prefer to not use the automatic generator, push a branch named `gh-pages` to your repository to create a page manually. In addition to supporting regular HTML content, GitHub Pages support Jekyll, a simple, blog aware static site generator. Jekyll makes it easy to create site-wide headers and footers without having to copy them across every page. It also offers intelligent blog support and other advanced templating features.\r\n\r\n### Authors and Contributors\r\nYou can @mention a GitHub username to generate a link to their profile. The resulting `<a>` element will link to the contributor’s GitHub Profile. For example: In 2007, Chris Wanstrath (@defunkt), PJ Hyett (@pjhyett), and Tom Preston-Werner (@mojombo) founded GitHub.\r\n\r\n### Support or Contact\r\nHaving trouble with Pages? Check out our [documentation](https://help.github.com/pages) or [contact support](https://github.com/contact) and we’ll help you sort it out.\r\n","google":"UA-4564418-27","note":"Don't delete this file! It's used internally to help with page regeneration."}
|
||||
@@ -1,430 +0,0 @@
|
||||
|
||||
// Add events to the file input button
|
||||
var fileInput = document.getElementById('fileInput');
|
||||
fileInput.addEventListener('click', function(){this.value = null;}, false);
|
||||
fileInput.addEventListener('change', handleImageSelection, false);
|
||||
|
||||
|
||||
// Filetypes accepted by the file picker
|
||||
var fileTypes = ['jpg', 'jpeg', 'png', 'bmp', 'gif'];
|
||||
|
||||
|
||||
// The canvas we will draw on
|
||||
var canvas = document.getElementById('imageCanvas');
|
||||
var ctx = canvas.getContext('2d');
|
||||
|
||||
|
||||
// The variable to hold our image. Global so we can easily reuse it when the
|
||||
// user updates the settings (change canvas size, scale, invert, etc)
|
||||
var img = new Image();
|
||||
|
||||
|
||||
// A bunch of settings used when converting
|
||||
var settings = {
|
||||
screenWidth: 128,
|
||||
screenHeight: 64,
|
||||
scaleToFit: true,
|
||||
preserveRatio: true,
|
||||
centerHorizontally: false,
|
||||
centerVertically: false,
|
||||
backgroundColor: "white",
|
||||
scale: '1',
|
||||
drawMode: 'horizontal',
|
||||
threshold: 128,
|
||||
addArduinoCode: false,
|
||||
invertColors: false
|
||||
};
|
||||
|
||||
|
||||
// Easy way to update settings controlled by a textfield
|
||||
function updateInteger(fieldName){
|
||||
settings[fieldName] = document.getElementById(fieldName).value;
|
||||
place_image();
|
||||
}
|
||||
|
||||
|
||||
// Easy way to update settings controlled by a checkbox
|
||||
function updateBoolean(fieldName){
|
||||
settings[fieldName] = document.getElementById(fieldName).checked;
|
||||
place_image();
|
||||
}
|
||||
|
||||
|
||||
// Easy way to update settings controlled by a radiobutton
|
||||
function updateRadio(fieldName){
|
||||
var radioGroup = document.getElementsByName(fieldName);
|
||||
for (var i = 0; i < radioGroup.length; i++) {
|
||||
if (radioGroup[i].checked) {
|
||||
settings[fieldName] = radioGroup[i].value;
|
||||
}
|
||||
}
|
||||
place_image();
|
||||
}
|
||||
|
||||
|
||||
// Make the canvas black and white
|
||||
function blackAndWhite(){
|
||||
var imageData = ctx.getImageData(0,0,canvas.width, canvas.height);
|
||||
var data = imageData.data;
|
||||
for (var i = 0; i < data.length; i += 4) {
|
||||
var avg = (data[i] + data[i +1] + data[i +2]) / 3;
|
||||
avg > settings['threshold'] ? avg = 255 : avg = 0;
|
||||
data[i] = avg; // red
|
||||
data[i + 1] = avg; // green
|
||||
data[i + 2] = avg; // blue
|
||||
}
|
||||
ctx.putImageData(imageData, 0, 0);
|
||||
};
|
||||
|
||||
|
||||
// Invert the colors of the canvas
|
||||
function invert() {
|
||||
var imageData = ctx.getImageData(0,0,canvas.width, canvas.height);
|
||||
var data = imageData.data;
|
||||
for (var i = 0; i < data.length; i += 4) {
|
||||
data[i] = 255 - data[i]; // red
|
||||
data[i + 1] = 255 - data[i + 1]; // green
|
||||
data[i + 2] = 255 - data[i + 2]; // blue
|
||||
}
|
||||
ctx.putImageData(imageData, 0, 0);
|
||||
};
|
||||
|
||||
|
||||
// Draw the image onto the canvas, taking into account color and scaling
|
||||
function place_image(){
|
||||
|
||||
// Make sure we're using the right canvas size
|
||||
canvas.width = settings['screenWidth'];
|
||||
canvas.height = settings['screenHeight'];
|
||||
|
||||
// Invert background if needed
|
||||
if (settings['invertColors']){
|
||||
settings['backgroundColor'] == 'white' ? ctx.fillStyle = 'black' : ctx.fillStyle = 'white';
|
||||
}else{
|
||||
ctx.fillStyle = settings['backgroundColor'];
|
||||
}
|
||||
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
||||
|
||||
// Offset used for centering the image when requested
|
||||
var offset_x = 0;
|
||||
var offset_y = 0;
|
||||
|
||||
switch(settings['scale']){
|
||||
case '1': // Original
|
||||
if(settings['centerHorizontally']){ offset_x = (canvas.width - img.width) / 2; }
|
||||
if(settings['centerVertically']){ offset_y = (canvas.height - img.height) / 2; }
|
||||
ctx.drawImage(img, 0, 0, img.width, img.height,
|
||||
offset_x, offset_y, img.width, img.height);
|
||||
break;
|
||||
case '2': // Fit (make as large as possible without changing ratio)
|
||||
var horRatio = canvas.width / img.width;
|
||||
var verRatio = canvas.height / img.height;
|
||||
var useRatio = Math.min(horRatio, verRatio);
|
||||
|
||||
if(settings['centerHorizontally']){ offset_x = (canvas.width - img.width*useRatio) / 2; }
|
||||
if(settings['centerVertically']){ offset_y = (canvas.height - img.height*useRatio) / 2; }
|
||||
ctx.drawImage(img, 0, 0, img.width, img.height,
|
||||
offset_x, offset_y, img.width * useRatio, img.height * useRatio);
|
||||
break;
|
||||
case '3': // Stretch x+y (make as large as possible without keeping ratio)
|
||||
ctx.drawImage(img, 0, 0, img.width, img.height,
|
||||
offset_x, offset_y, canvas.width, canvas.height);
|
||||
break;
|
||||
case '4': // Stretch x (make as wide as possible)
|
||||
offset_x = 0;
|
||||
if(settings['centerVertically']){ offset_y = (canvas.height - img.height) / 2; }
|
||||
ctx.drawImage(img, 0, 0, img.width, img.height,
|
||||
offset_x, offset_y, canvas.width, img.height);
|
||||
break;
|
||||
case '5': // Stretch y (make as tall as possible)
|
||||
if(settings['centerHorizontally']){ offset_x = (canvas.width - img.width) / 2; }
|
||||
offset_y = 0;
|
||||
ctx.drawImage(img, 0, 0, img.width, img.height,
|
||||
offset_x, offset_y, img.width, canvas.height);
|
||||
break;
|
||||
}
|
||||
// Make sure the image is black and white
|
||||
blackAndWhite();
|
||||
if(settings['invertColors']){
|
||||
invert();
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Handle inserting an image by pasting code
|
||||
function handleTextInput(drawMode){
|
||||
|
||||
var input = document.getElementById('textInput').value;
|
||||
|
||||
// Remove Arduino code
|
||||
input = input.replace(/const unsigned char myBitmap \[\] PROGMEM = \{/g, "");
|
||||
input = input.replace(/\};/g, "");
|
||||
|
||||
// Remove newlines
|
||||
input = input.replace(/\r\n|\r|\n/g, "");
|
||||
// Remove whitespace
|
||||
input = input.replace(/\s/g, "");
|
||||
// Remove "0x"
|
||||
input = input.replace(/0x/g, "");
|
||||
// Split into list
|
||||
var list = input.split(",");
|
||||
|
||||
if(drawMode == 'horizontal'){
|
||||
listToImageHorizontal(list);
|
||||
}else{
|
||||
listToImageVertical(list);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Handle selecting an image with the file picker
|
||||
function handleImageSelection(e){
|
||||
var reader = new FileReader();
|
||||
reader.onload = function(event){
|
||||
// Crude check to see if the uploaded file is an image
|
||||
if (reader.result.substring (0, 10) != "data:image"){
|
||||
alert("Please select an image file.");
|
||||
return false;
|
||||
}
|
||||
|
||||
img.onload = function(){
|
||||
// Show the size underneath the file picker
|
||||
document.getElementById('imageSize').innerHTML = img.width+" * " + img.height + " pixels";
|
||||
|
||||
// Resize the canvas and update the input fields
|
||||
document.getElementById('screenWidth').value = img.width;
|
||||
document.getElementById('screenHeight').value = img.height;
|
||||
settings['screenWidth'] = img.width;
|
||||
settings['screenHeight'] = img.height;
|
||||
|
||||
place_image();
|
||||
}
|
||||
img.src = event.target.result;
|
||||
}
|
||||
reader.readAsDataURL(e.target.files[0]);
|
||||
}
|
||||
|
||||
|
||||
// Output the image as a string for horizontally drawing displays
|
||||
function imageToStringHorizontal(){
|
||||
var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
|
||||
|
||||
var output_string = "";
|
||||
var output_index = 0;
|
||||
|
||||
var byteIndex = 7;
|
||||
var number = 0;
|
||||
|
||||
for (var index=0; index < imageData.data.length; index+=4){
|
||||
var avg = (imageData.data[index] + imageData.data[index +1] + imageData.data[index +2]) / 3;
|
||||
if (avg > settings['threshold']){
|
||||
number += Math.pow(2, byteIndex);
|
||||
}
|
||||
byteIndex--;
|
||||
|
||||
if(byteIndex < 0){
|
||||
var byteSet = number.toString(16);
|
||||
if (byteSet.length == 1){ byteSet = "0"+byteSet; }
|
||||
var b = "0x"+byteSet;
|
||||
output_string += b+", ";
|
||||
output_index++;
|
||||
if (output_index >= 16){
|
||||
output_string += "\n";
|
||||
output_index = 0;
|
||||
}
|
||||
number = 0;
|
||||
byteIndex = 7;
|
||||
}
|
||||
}
|
||||
return output_string;
|
||||
}
|
||||
|
||||
|
||||
// Output the image as a string for vertically drawing displays
|
||||
function imageToStringVertical(){
|
||||
var x = 0;
|
||||
var y = 7;
|
||||
var page = 0;
|
||||
|
||||
var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
|
||||
var data = imageData.data;
|
||||
|
||||
var output_string = "";
|
||||
var output_index = 0;
|
||||
|
||||
|
||||
for (var p=0; p<Math.ceil(settings['screenHeight']/8);p++){
|
||||
for (var x=0;x<=settings['screenWidth'];x++){
|
||||
// for (var x=0;x<1;x++){
|
||||
var byteIndex = 7;
|
||||
var number = 0;
|
||||
|
||||
for (var y = 7; y >= 0; y--){
|
||||
var index = ((p*8)+y)*(settings['screenWidth']*4)+x;
|
||||
var avg = (data[index] + data[index +1] + data[index +2]) / 3;
|
||||
if (avg > settings['threshold']){
|
||||
number += Math.pow(2, byteIndex);
|
||||
}
|
||||
byteIndex--;
|
||||
}
|
||||
var byteSet = number.toString(16);
|
||||
if (byteSet.length == 1){ byteSet = "0"+byteSet; }
|
||||
var b = "0x"+byteSet.toString(16);
|
||||
output_string += b+", ";
|
||||
output_index++;
|
||||
if (output_index >= 16){
|
||||
output_string += "\n";
|
||||
output_index = 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
return output_string;
|
||||
}
|
||||
|
||||
|
||||
// Output the image string to the textfield
|
||||
function outputString(){
|
||||
var output_string = "";
|
||||
if (settings['drawMode'] == 'horizontal'){
|
||||
output_string = imageToStringHorizontal();
|
||||
}else{
|
||||
output_string = imageToStringVertical();
|
||||
}
|
||||
|
||||
if(settings['addArduinoCode']){
|
||||
output_string = "const unsigned char myBitmap [] PROGMEM = {\n" + output_string + "\n};";
|
||||
}
|
||||
document.getElementById('outputField').value = output_string;
|
||||
}
|
||||
|
||||
|
||||
// Use the horizontally oriented list to draw the image
|
||||
function listToImageHorizontal(list){
|
||||
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
|
||||
var imgData = ctx.createImageData(canvas.width, canvas.height);
|
||||
|
||||
var index = 0;
|
||||
|
||||
var page = 0;
|
||||
var x = 0;
|
||||
var y = 7;
|
||||
|
||||
// Move the list into the imageData object
|
||||
for (var i=0;i<list.length;i++){
|
||||
var binString = hexToBinary(list[i]).result;
|
||||
if (binString.length == 4){
|
||||
binString = binString + "0000";
|
||||
}
|
||||
|
||||
// Check if pixel is white or black
|
||||
for(var k=0; k<binString.length; k++){
|
||||
var color = 0;
|
||||
if(binString.charAt(k) == '1'){
|
||||
color = 255;
|
||||
}
|
||||
imgData.data[index] = color;
|
||||
imgData.data[index+1] = color;
|
||||
imgData.data[index+2] = color;
|
||||
imgData.data[index+3] = 255;
|
||||
|
||||
index += 4
|
||||
}
|
||||
}
|
||||
|
||||
// Draw the image onto the canvas, then save the canvas contents
|
||||
// inside the img object. This way we can reuse the img object when
|
||||
// we want to scale / invert, etc.
|
||||
ctx.putImageData(imgData, 0, 0);
|
||||
img.src = canvas.toDataURL('image/png');
|
||||
}
|
||||
|
||||
|
||||
// Use the vertically oriented list to draw the image
|
||||
function listToImageVertical(list){
|
||||
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
|
||||
// Create a new imageData object, but 90 degrees rotates (height x width)
|
||||
// var imgData = ctx.createImageData(canvas.width, canvas.height);
|
||||
// var imgData = ctx.getImageData(0, 0, canvas.height, canvas.width);
|
||||
//var imgData = ctx.createImageData(canvas.width, canvas.height);
|
||||
// var data = imgData.data;
|
||||
|
||||
var index = 0;
|
||||
|
||||
var page = 0;
|
||||
var x = 0;
|
||||
var y = 7;
|
||||
|
||||
// Move the list into the imageData object
|
||||
for (var i=0;i<list.length;i++){
|
||||
|
||||
var binString = hexToBinary(list[i]).result;
|
||||
if (binString.length == 4){
|
||||
binString = binString + "0000";
|
||||
}
|
||||
|
||||
// Check if pixel is white or black
|
||||
for(var k=0; k<binString.length; k++){
|
||||
var color = 0;
|
||||
if(binString.charAt(k) == '1'){
|
||||
color = 255;
|
||||
}
|
||||
// color = 0;
|
||||
drawPixel(x, (page*8)+y, color);
|
||||
y--;
|
||||
if(y < 0){
|
||||
y = 7;
|
||||
x++;
|
||||
if(x >= settings['screenWidth']){
|
||||
x = 0;
|
||||
page++;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
// Save the canvas contents inside the img object. This way we can
|
||||
// reuse the img object when we want to scale / invert, etc.
|
||||
img.src = canvas.toDataURL('image/png');
|
||||
}
|
||||
|
||||
|
||||
// Convert hex to binary
|
||||
function hexToBinary(s) {
|
||||
|
||||
var i, k, part, ret = '';
|
||||
// lookup table for easier conversion. '0' characters are padded for '1' to '7'
|
||||
var lookupTable = {
|
||||
'0': '0000', '1': '0001', '2': '0010', '3': '0011', '4': '0100',
|
||||
'5': '0101', '6': '0110', '7': '0111', '8': '1000', '9': '1001',
|
||||
'a': '1010', 'b': '1011', 'c': '1100', 'd': '1101',
|
||||
'e': '1110', 'f': '1111',
|
||||
'A': '1010', 'B': '1011', 'C': '1100', 'D': '1101',
|
||||
'E': '1110', 'F': '1111'
|
||||
};
|
||||
for (i = 0; i < s.length; i += 1) {
|
||||
if (lookupTable.hasOwnProperty(s[i])) {
|
||||
ret += lookupTable[s[i]];
|
||||
} else {
|
||||
return { valid: false };
|
||||
}
|
||||
}
|
||||
return { valid: true, result: ret };
|
||||
}
|
||||
|
||||
|
||||
// Quick and effective way to draw single pixels onto the canvas
|
||||
// using a global 1x1px large canvas
|
||||
var single_pixel = ctx.createImageData(1,1);
|
||||
var d = single_pixel.data;
|
||||
|
||||
function drawPixel(x, y, color){
|
||||
d[0] = color;
|
||||
d[1] = color;
|
||||
d[2] = color;
|
||||
d[3] = 255;
|
||||
ctx.putImageData(single_pixel, x, y);
|
||||
}
|
||||
Reference in New Issue
Block a user