diff options
Diffstat (limited to 'projects/09/BitmapEditor/BitmapEditor.html')
| -rw-r--r-- | projects/09/BitmapEditor/BitmapEditor.html | 200 |
1 files changed, 200 insertions, 0 deletions
diff --git a/projects/09/BitmapEditor/BitmapEditor.html b/projects/09/BitmapEditor/BitmapEditor.html new file mode 100644 index 0000000..fdb9e0b --- /dev/null +++ b/projects/09/BitmapEditor/BitmapEditor.html @@ -0,0 +1,200 @@ +<!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>
\ No newline at end of file |