├── .gitignore ├── README.md ├── package-lock.json ├── package.json ├── png-to-lcd.js └── test ├── cat.png ├── cat2.png ├── examples ├── mono-128x32.png ├── mono-128x64.png └── noopkat-mono.png └── test.js /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | !['npm version'](http://img.shields.io/npm/v/png-to-lcd.svg?style=flat) !['downloads over month'](http://img.shields.io/npm/dm/png-to-lcd.svg?style=flat) 2 | 3 | png-to-lcd 4 | ========== 5 | 6 | Convert a PNG image into an LCD/OLED compatible framebuffer 7 | 8 | ## Install 9 | ```javascript 10 | npm install png-to-lcd 11 | ``` 12 | 13 | ## What does it do? 14 | png-to-lcd consumes a PNG image file, and returns the image data, formatted for OLED screens (an 8-bit/byte framebuffer). It's just monochrome support for now. **It only supports [SSD1306 OLED displays](https://cdn-shop.adafruit.com/datasheets/SSD1306.pdf)**. You can buy these pretty cheaply on [Adafruit](http://www.adafruit.com/products/938) (my favourite), Sparkfun, eBay, and sites like Banggood. 15 | 16 | ## What doesn't it do? 17 | Image prep - the image you pass in should be an RGBA PNG (both colour and greytone are acceptable), and sized to the exact dimensions of the screen you'd like to use. So if your screen is 128x64 pixels, size it so in your image editor of choice. 18 | 19 | I suggest [Pixelmator](http://www.pixelmator.com), [Acorn](http://www.flyingmeat.com/acorn), or [GIMP](http://www.gimp.org) if you're into desktop software. Alternatively, if you're into super awesome software made in the browser by a badass, try [Jenn Schiffer's](http://twitter.com/jennschiffer) noice [make8bitart.com](http://make8bitart.com), which is really quite suitable for this kind of low res screen design. 20 | 21 | ## Usage 22 | png-to-lcd takes three arguments: 23 | 24 | _string_ **filename** - this is pretty obvious really. 25 | 26 | _bool_ **dither** - do you want to run a dithering algorithm on your image? 27 | 28 | _function_ **callback** - callback when image formatting complete 29 | 30 | 31 | ## Example 32 | ```javascript 33 | var pngtolcd = require('png-to-lcd'); 34 | 35 | pngtolcd('cat.png', true, function(err, buffer) { 36 | console.log(buffer.toString('hex')); 37 | }); 38 | 39 | ``` 40 | 41 | ## What the heck is dithering? 42 | Dithering is a method of diffusing pixels in order to avoid harsh edges or banding where the colours in an image contrast with each other. Fancy algorithms and stuff. 43 | 44 | png-to-lcd uses the [Floyd Steinberg](https://github.com/noopkat/floyd-steinberg) algorithm specifically, as it produces the clearest images on a pixel screen in my experience. 45 | 46 | ## When should I opt to use dithering? 47 | If you're trying to convert a photo, or detailed image - use dithering! You'll retain more detail. 48 | 49 | ## When should I _not_ ask for dithering? 50 | If you have crisp line detailing in your image, it's best not to dither as it makes a real mess of things. This includes things like text, and simple pixel art drawings. When you pass in false for the dither argument, png-to-lcd will just apply a simple threshold filter to produce your dark/light filters in the buffer. 51 | 52 | ## Show me some output 53 | Ok. You can make stuff like this. 54 | 55 | Dithered 128 x 32 display example: 56 | ![cat 128x32](https://raw.githubusercontent.com/noopkat/png-to-lcd/master/test/examples/mono-128x32.png) 57 | 58 | Dithered 128 x 64 display example: 59 | ![cat 128x32](https://raw.githubusercontent.com/noopkat/png-to-lcd/master/test/examples/mono-128x64.png) 60 | 61 | Non dithered 128 x 32 display text example: 62 | ![noopkat](https://raw.githubusercontent.com/noopkat/png-to-lcd/master/test/examples/noopkat-mono.png) 63 | 64 | ## My images don't look perfect (╯°□°）╯︵ ┻━┻ 65 | That's understandable. A computer program will do its best to guess at the best optimizations, but it has little context for what the heck it's working on for you. You may find that some screen designs needs a little tweaking before it's perfect. 66 | 67 | For non dithered pics - try nudging the pixels using just black and white only (no grey) in your image editor for best results before running it through this module. 68 | 69 | -------------------------------------------------------------------------------- /package-lock.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "png-to-lcd", 3 | "version": "1.1.0", 4 | "lockfileVersion": 1, 5 | "requires": true, 6 | "dependencies": { 7 | "deep-equal": { 8 | "version": "0.2.2", 9 | "resolved": "https://registry.npmjs.org/deep-equal/-/deep-equal-0.2.2.tgz", 10 | "integrity": "sha1-hLdFiW80xoTpjyzg5Cq69Du6AX0=", 11 | "dev": true 12 | }, 13 | "defined": { 14 | "version": "0.0.0", 15 | "resolved": "https://registry.npmjs.org/defined/-/defined-0.0.0.tgz", 16 | "integrity": "sha1-817qfXBekzuvE7LwOz+D2SFAOz4=", 17 | "dev": true 18 | }, 19 | "floyd-steinberg": { 20 | "version": "1.0.5", 21 | "resolved": "https://registry.npmjs.org/floyd-steinberg/-/floyd-steinberg-1.0.5.tgz", 22 | "integrity": "sha1-ece4HnBXRQpAaea2FIboHHiQuIw=" 23 | }, 24 | "glob": { 25 | "version": "3.2.11", 26 | "resolved": "https://registry.npmjs.org/glob/-/glob-3.2.11.tgz", 27 | "integrity": "sha1-Spc/Y1uRkPcV0QmH1cAP0oFevj0=", 28 | "dev": true, 29 | "requires": { 30 | "inherits": "2", 31 | "minimatch": "0.3" 32 | } 33 | }, 34 | "has": { 35 | "version": "0.0.1", 36 | "resolved": "https://registry.npmjs.org/has/-/has-0.0.1.tgz", 37 | "integrity": "sha1-ZmOcFOr1WfE52ivg5DiRDvP9Wxs=", 38 | "dev": true 39 | }, 40 | "inherits": { 41 | "version": "2.0.3", 42 | "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz", 43 | "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=", 44 | "dev": true 45 | }, 46 | "lru-cache": { 47 | "version": "2.7.3", 48 | "resolved": "http://registry.npmjs.org/lru-cache/-/lru-cache-2.7.3.tgz", 49 | "integrity": "sha1-bUUk6LlV+V1PW1iFHOId1y+06VI=", 50 | "dev": true 51 | }, 52 | "minimatch": { 53 | "version": "0.3.0", 54 | "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-0.3.0.tgz", 55 | "integrity": "sha1-J12O2qxPG7MyZHIInnlJyDlGmd0=", 56 | "dev": true, 57 | "requires": { 58 | "lru-cache": "2", 59 | "sigmund": "~1.0.0" 60 | } 61 | }, 62 | "object-inspect": { 63 | "version": "1.6.0", 64 | "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.6.0.tgz", 65 | "integrity": "sha512-GJzfBZ6DgDAmnuaM3104jR4s1Myxr3Y3zfIyN4z3UdqN69oSRacNK8UhnobDdC+7J2AHCjGwxQubNJfE70SXXQ==", 66 | "dev": true 67 | }, 68 | "pngparse": { 69 | "version": "2.0.1", 70 | "resolved": "https://registry.npmjs.org/pngparse/-/pngparse-2.0.1.tgz", 71 | "integrity": "sha1-hoUt5N40n077HoUudSVlXlrF37g=" 72 | }, 73 | "resumer": { 74 | "version": "0.0.0", 75 | "resolved": "https://registry.npmjs.org/resumer/-/resumer-0.0.0.tgz", 76 | "integrity": "sha1-8ej0YeQGS6Oegq883CqMiT0HZ1k=", 77 | "dev": true, 78 | "requires": { 79 | "through": "~2.3.4" 80 | } 81 | }, 82 | "sigmund": { 83 | "version": "1.0.1", 84 | "resolved": "https://registry.npmjs.org/sigmund/-/sigmund-1.0.1.tgz", 85 | "integrity": "sha1-P/IfGYytIXX587eBhT/ZTQ0ZtZA=", 86 | "dev": true 87 | }, 88 | "tape": { 89 | "version": "2.14.1", 90 | "resolved": "https://registry.npmjs.org/tape/-/tape-2.14.1.tgz", 91 | "integrity": "sha1-j26y3QO3UKoFao3gGlRF5Z98nM4=", 92 | "dev": true, 93 | "requires": { 94 | "deep-equal": "~0.2.0", 95 | "defined": "~0.0.0", 96 | "glob": "^3.2.9", 97 | "has": "~0.0.1", 98 | "inherits": "^2.0.1", 99 | "object-inspect": "^1.0.0", 100 | "resumer": "~0.0.0", 101 | "through": "^2.3.4" 102 | } 103 | }, 104 | "through": { 105 | "version": "2.3.8", 106 | "resolved": "http://registry.npmjs.org/through/-/through-2.3.8.tgz", 107 | "integrity": "sha1-DdTJ/6q8NXlgsbckEV1+Doai4fU=", 108 | "dev": true 109 | } 110 | } 111 | } 112 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "png-to-lcd", 3 | "version": "1.1.0", 4 | "description": "convert png image data into an lcd compatible framebuffer", 5 | "main": "png-to-lcd.js", 6 | "scripts": { 7 | "test": "node test/test.js" 8 | }, 9 | "repository": { 10 | "type": "git", 11 | "url": "https://github.com/noopkat/png-to-lcd.git" 12 | }, 13 | "keywords": [ 14 | "lcd", 15 | "png", 16 | "framebuffer", 17 | "oled", 18 | "bitmap", 19 | "SSD1306" 20 | ], 21 | "author": "Suz Hinton", 22 | "license": "MIT", 23 | "bugs": { 24 | "url": "https://github.com/noopkat/png-to-lcd/issues" 25 | }, 26 | "homepage": "https://github.com/noopkat/png-to-lcd", 27 | "dependencies": { 28 | "pngparse": "~2.0.1", 29 | "floyd-steinberg": "~1.0.4" 30 | }, 31 | "devDependencies": { 32 | "tape": "~2.14.0" 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /png-to-lcd.js: -------------------------------------------------------------------------------- 1 | /** 2 | * png-to-lcd 3 | * exports framebuffer for use with common OLED displays 4 | */ 5 | var floydSteinberg = require('floyd-steinberg'); 6 | var pngparse = require('pngparse'); 7 | 8 | module.exports = png_to_lcd; 9 | 10 | // pngparse doesn't quite have the correct object setup for pixel data 11 | function createImageData(image) { 12 | var buf = new Buffer(image.width * image.height * 4); 13 | 14 | var l = image.data.length; 15 | var pos = 0; 16 | for (var y = 0; y < image.height; y++) { 17 | for (var x = 0; x < image.width; x++) { 18 | buf.writeUInt32BE(image.getPixel(x, y), pos); 19 | pos += 4; 20 | } 21 | } 22 | 23 | image.data = buf; 24 | 25 | return image; 26 | } 27 | 28 | function png_to_lcd(filename, dither, callback) { 29 | 30 | // parse png file passed in 31 | pngparse.parseFile(filename, function(err, img) { 32 | if (err) { 33 | return callback(err); 34 | } 35 | // post process pixel data returned 36 | var pimage = createImageData(img); 37 | 38 | var pixels = pimage.data, 39 | pixelsLen = pixels.length, 40 | height = pimage.height, 41 | width = pimage.width, 42 | alpha = pimage.hasAlphaChannel, 43 | threshold = 120, 44 | unpackedBuffer = [], 45 | depth = 4; 46 | 47 | // create a new buffer that will be filled with pixel bytes (8 bits per) and then returned 48 | var buffer = new Buffer(width * Math.ceil(height / 8)); 49 | buffer.fill(0x00); 50 | 51 | // if dithering is preferred, run this on the pixel data first to transform RGB vals 52 | if (dither) { 53 | floydSteinberg(pimage); 54 | } 55 | 56 | // filter pixels to create monochrome image data 57 | for (var i = 0; i < pixelsLen; i += depth) { 58 | // just take the red value 59 | var pixelVal = pixels[i + 1] = pixels[i + 2] = pixels[i]; 60 | 61 | // do threshold for determining on and off pixel vals 62 | if (pixelVal > threshold) { 63 | pixelVal = 1; 64 | } else { 65 | pixelVal = 0; 66 | } 67 | 68 | // push to unpacked buffer list 69 | unpackedBuffer[i/depth] = pixelVal; 70 | 71 | } 72 | 73 | // time to pack the buffer 74 | for (var i = 0; i < unpackedBuffer.length; i++) { 75 | // math 76 | var x = Math.floor(i % width); 77 | var y = Math.floor(i / width); 78 | 79 | // create a new byte, set up page position 80 | var byte = 0, 81 | page = Math.floor(y / 8), 82 | pageShift = 0x01 << (y - 8 * page); 83 | 84 | // is the first page? Just assign byte pos to x value, otherwise add rows to it too 85 | (page === 0) ? byte = x : byte = x + width * page; 86 | 87 | if (unpackedBuffer[i] === 0) { 88 | // 'off' pixel 89 | buffer[byte] &= ~pageShift; 90 | 91 | } else { 92 | // 'on' pixel 93 | buffer[byte] |= pageShift; 94 | } 95 | } 96 | 97 | callback(err, buffer); 98 | }); 99 | } -------------------------------------------------------------------------------- /test/cat.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/noopkat/png-to-lcd/b1e3b2cbb698f1405b0ebd91ae36122d9b3b7f9d/test/cat.png -------------------------------------------------------------------------------- /test/cat2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/noopkat/png-to-lcd/b1e3b2cbb698f1405b0ebd91ae36122d9b3b7f9d/test/cat2.png -------------------------------------------------------------------------------- /test/examples/mono-128x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/noopkat/png-to-lcd/b1e3b2cbb698f1405b0ebd91ae36122d9b3b7f9d/test/examples/mono-128x32.png -------------------------------------------------------------------------------- /test/examples/mono-128x64.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/noopkat/png-to-lcd/b1e3b2cbb698f1405b0ebd91ae36122d9b3b7f9d/test/examples/mono-128x64.png -------------------------------------------------------------------------------- /test/examples/noopkat-mono.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/noopkat/png-to-lcd/b1e3b2cbb698f1405b0ebd91ae36122d9b3b7f9d/test/examples/noopkat-mono.png -------------------------------------------------------------------------------- /test/test.js: -------------------------------------------------------------------------------- 1 | var test = require('tape'); 2 | var pngtolcd = require('../png-to-lcd'); 3 | 4 | test('should convert image to a buffer', function(t) { 5 | pngtolcd(__dirname + '/cat.png', true, function(err, buffer) { 6 | t.ok(!err); 7 | //console.log(buffer.toString('hex')); 8 | t.equal(Buffer.isBuffer(buffer), true); 9 | t.end(); 10 | }); 11 | }); 12 | 13 | // commenting this out, as it's only because of the current monochome only support 14 | /* 15 | test('buffer should return monochrome pixel data', function(t) { 16 | pngtolcd(__dirname + '/cat.png', true, function(err, buffer) { 17 | t.ok(!err); 18 | t.equal(buffer[0].toString('hex'), 0x00 | 0xFF); 19 | t.end(); 20 | }); 21 | }); 22 | */ 23 | --------------------------------------------------------------------------------