From 43c668ddceab88a0e11fa9f12d74e9b33875c4d1 Mon Sep 17 00:00:00 2001 From: javl Date: Fri, 22 Jan 2016 15:18:34 +0100 Subject: [PATCH] Moves site --- img/error.jpg | Bin 0 -> 7330 bytes index.html | 178 +++++++++++++-------- script.js | 431 ++++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 544 insertions(+), 65 deletions(-) create mode 100644 img/error.jpg create mode 100644 script.js diff --git a/img/error.jpg b/img/error.jpg new file mode 100644 index 0000000000000000000000000000000000000000..9109b259bdd7801b2991c0a7ca827a0ec2d2c266 GIT binary patch literal 7330 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 - - - - - Image2cpp by javl - - - - - - - + + + + + image2cpp + + +
-
-

Image2cpp

-

+

+ + + + + +
+

Select image

+
+ - + + 		or +

Paste text

+
+ + +
+

+
-

View the Project on GitHub javl/image2cpp

+

+

Image Settings

+ * pixels
+ + +
+ 0 - 255; pixels with brightness above become white, below become black.
+ +
+
+
+ Centering the image is only relevant when using a canvas larger than the selected image.
+ +

- -
-
-

-Welcome to GitHub Pages.

+
-

This 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, 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.

+

+

Preview

+ +

-

-Designer Templates

+
-

We’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.

- -

-Creating pages manually

- -

If 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.

- -

-Authors and Contributors

- -

You 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.

- -

-Support or Contact

- -

Having trouble with Pages? Check out our documentation or contact support and we’ll help you sort it out.

-
-
-

This project is maintained by javl

-

Hosted on GitHub Pages — Theme by orderedlist

-
+

+

Output

+
+ Adds some extra Arduino code around the output for easy copy-paste into this example.
+
+ + +
+ If your image looks all messed up on your display, like the image below, try the other mode.
+
+

+

+ +

- - - - - + + + diff --git a/script.js b/script.js new file mode 100644 index 0000000..0d745be --- /dev/null +++ b/script.js @@ -0,0 +1,431 @@ + +// 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; + if (settings['invertColors']){ + avg > settings['threshold'] ? avg = 0 : avg = 255; + }else{ + 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 colors 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(); +} + + +// 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= 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= 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); +} \ No newline at end of file