Pixel art generator
Check this page for more details: http://www.thingiverse.com/thing:56310
CSS
.grid {
margin:1em auto;
border-collapse:collapse
}
.grid td {
cursor:pointer;
width:30px;
height:30px;
border:1px solid #ccc;
text-align:center;
font-family:sans-serif;
font-size:9px;
}
.grid td.clicked {
background-color:black;
font-weight:bold;
color:white;
}
JavaScript
var lastClicked;
var width = 8;
var center = width / 2;
var depth = 0;
var cells = new Array(width);
var grid = clickableGrid(width, width, function (el, row, col, i) {
switchState(el, row, col, i);
});
function switchState(el, row, col, i) {
console.log("You clicked on element:", el);
console.log("You clicked on row:", row);
console.log("You clicked on col:", col);
console.log("You clicked on item #:", i);
if (cells[row][col] === 0) {
cells[row][col] = 1;
el.className = 'clicked';
} else {
cells[row][col] = 0;
el.className = '';
}
}
outputTextBox();
document.body.appendChild(grid);
showOutput();
function showOutput() {
//[0, 0, 0]
var output = new Array();
for (var r = 0; r < width; ++r) {
for (var c = 0; c < width; ++c) {
if (cells[r][c] == 1) {
var newElement = '[' + (r - center) + ',' + (c - center) + ',' + depth + ']';
output.push(newElement);
}
}
}
if (output.length > 0) {
document.getElementById('output').value = '[' + output.join() + '];';
} else {
document.getElementById('output').value = 'No Cells are Highlighted!';
}
}
function outputTextBox() {
var div1 = document.createElement('div');
div1.id = 'mb_ad';
div1.innerHTML = '<H2>To start using this editor:</H2>1- Draw the shape you want by clicking on the cells<BR>2- Click on the Get Array Button<BR>3- copy the text box content and paste it in the openSCAD file<br><br>';
document.body.appendChild(div1);
var edit = document.createElement("input");
edit.id = 'output';
edit.style.width = '70%';
document.body.appendChild(edit);
var getArray = document.createElement('button');
getArray.innerHTML = 'Get Array!';
getArray.onclick = function () {
showOutput();
return false;
};
document.body.appendChild(getArray);
var clear =...