Arduino GFX bitmap canvas

by PhilQ

HTML

<div id="c"></div>
<button onclick="startBitmap();">Start</button>
<button onclick="exportBitmap();">Export</button>
<textarea id="export" rows="10"></textarea>
<input type="text" id="w" value="" /><input type="text" id="h" value="" />

SCSS

*,:before,:after{margin:0;padding:0;box-sizing:border-box;}
#c {
	width: 100%;
	float: left;
	margin: 20px;
	
	> div {
		float: left;
		width: 8px;
		height: 8px;
		background: #fff;
		border: 1px solid rgba(0,0,0, 0.1);
		
		&.f {
			clear: left;
		}
		
		&.on {
			background: #000;
		}
	}
}
textarea {
	clear: left;
	float: left;
	width: 100%;
}
button {
	position: fixed;
	top: 0px;
	right: 0px;
	z-index: 10;
	
	&:nth-child(3) {
		top: 20px;
	}
}

JavaScript

var w = 128, h = 32;

$(document).ready(function(){

	$('#w').val(w);
	$('#h').val(h);
	
});

function startBitmap() {
	w = $('#w').val();
	h = $('#h').val();

	var $container = $('#c');
	$container.html('');
	
	for (var i = 0, t = (w*h); i < t; ++i) {
		$container.append(
			$('<div />')
				.toggleClass('f', i%w==0)
				.on('click', function(){$(this).toggleClass('on')})
		);
	}
}

function exportBitmap() {
	var s = [];
	$('#c').find('div').each(function(idx, el){
		if (idx%8 == 0) {
			if (idx > 0) {
				if (idx%w == 0) {
					s.push(",\n");
				} else {
					s.push(', ');
				}
			}
			s.push('B');
		}
		if ($(el).hasClass('on')) {
				s.push('1');
		} else {
				s.push('0');
		}
		$('textarea').html( s.join('') );
	});
}