<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Sokoban Bitmap Editor</title> <script type="text/javascript"> var grid = new Array(0); function Init() { grid = InitGrid(); DisplayGrid(); } function InitGrid() { var _grid = new Array(16); for (i=0; i<16; i++) { _grid[i] = new Array(16); for (j=0; j<16; j++) { _grid[i][j]=false; } } return _grid; } function RotateBitmapRight() { var _grid = InitGrid(); for (i=0; i<16; i++) { for (j=0; j<16; j++) { _grid[j][15-i]=grid[i][j]; } } grid = _grid; DisplayGrid(); } function MirrorBitmap() { var _grid = InitGrid(); for (i=0; i<16; i++) { for (j=0; j<16; j++) { _grid[i][15-j]=grid[i][j]; } } grid = _grid; DisplayGrid(); } function DisplayGrid() { var str = "<table border=1 cellspacing=0>"; var i,j, backgroundColor; for (i=-1; i<16; i++) { str=str+"<tr>"; for (j=-1; j<16; j++) { if (i == -1 && j != -1) { str=str+"<td>" + (j+1) + "</td>"; } else if (i != -1 && j == -1) { str=str+"<td>" + (i+1) + "</td>"; } else if (i ==-1 && j == -1) { str=str+"<td/>"; } else { if (grid[i][j] == true) backgroundColor = "black"; else backgroundColor = "white"; str=str+"<td onclick=\"OnCellClicked(this)\" id="; str=str+(i*16+j); str=str+" width=16 height=16 bgcolor=" + backgroundColor + "></td>"; } } str=str+"</tr>"; } str=str+"</table>" gridElement = document.getElementById('grid'); gridElement.innerHTML = str; GenerateBitMap() ; } function OnCellClicked(cell) { var i = cell.id / 16 |0; var j = cell.id - i*16; grid[i][j] = !grid[i][j]; if (grid[i][j]) cell.style.backgroundColor = "black"; else cell.style.backgroundColor = "white"; GenerateBitMap(); } function GenerateBitMap() { var i, j; var value; var functionTypeSelect = document.getElementById('functionType'); methodType = functionTypeSelect.options[functionTypeSelect.selectedIndex].value; generateCode = document.getElementById('generatedCode'); generateCode.value = methodType + " void " + document.getElementById('functionName').value + "(int location) {\n\tlet memAddress = 16384+location;\n"; for (i=0; i<16; i++) { //get grid binary representation binary = ""; for (j=0; j<16; j++) { if (grid[i][j]) binary = "1" + binary; else binary = "0" + binary; } isNegative = false; //if number is negative, get its one's complement if (binary[0] == "1") { isNegative = true; oneComplement = ""; for (k=0; k<16; k++) { if (binary[k] == "1") oneComplement = oneComplement + "0"; else oneComplement = oneComplement + "1"; } binary = oneComplement; } //calculate one's complement decimal value value = 0; for (k=0; k<16; k++) { value = value * 2; if (binary[k] == "1") value=value+1; } //two's complement value if it is a negative value if (isNegative == true) value = -(value + 1) generateCode.value = generateCode.value + GenerateCodeLine(i, value); } generateCode.value = generateCode.value + "\treturn;\n}"; } function GenerateCodeLine(row, value) { str = "\tdo Memory.poke(memAddress+" + row*32 + ", " + value + ");\n"; return str; } </script> </head> <body onload="Init();"> <h4><i>IDC Herzliya / Efi Arazi School of Computer Science / Digital Systems Construction, Spring 2011 / Project 09 / Golan Parashi</i></h4> <h1>Sokoban Bitmap Editor</h1> <p>This javascript applicaiton is used to generate highly optimized jack code for drawing a 16x16 bitmap to the screen.</p> <p>Using the mouse, click the desired cell to mark/unmark it. You may use 90 degrees rotation and vertical mirroring by<br> clicking the appropriate buttons.</p> <p>When you are finished drawing, you may select function type and enter function's name.</p> <p> <table> <thead> <tr> <th align="left">Bitmap</th> <th align="left"></th> <th align="left">Generated Jack Code</th> </tr> </thead> <tr> <td><div id="grid"/></td> <td> <form action="javascript:GenerateBitMap();"> <table> <tr><td align="left">Function Type:</td></tr> <tr><td align="center"> <select id="functionType" onChange="GenerateBitMap()"> <option value="function" selected="selected">function</option> <option value="method">method</option> </select> </td></tr> <tr><td align="left">Function Name:</td></tr> <tr><td align="left"><input type="text" value="draw" id="functionName" onkeyup="GenerateBitMap()"/></td></tr> <tr><td></td></tr> <tr><td align="center"><input type="button" value="Generate Code >>" onclick="GenerateBitMap()"/></td></tr> </table> </form> </td> <td><textarea id="generatedCode" cols="50" rows="20" readonly="read-only"></textarea></td> </tr> <tr> <table> <tr> <td align="center"><input type="button" value="Rotate right" onclick="RotateBitmapRight()"/></td> <td align="center"><input type="button" value="Vertical Mirror" onclick="MirrorBitmap()"/></td> </tr> </table> </tr> </table> </body> </html>