├── CNAME
├── circles.png
├── README.md
├── LICENSE
├── css
    └── AmigaFontEditor.css
├── number_interpreter.html
├── deltas.html
├── sqrt.html
├── register_conversion.html
├── projection.html
├── rawdiff.html
├── diwstartstop.html
├── trigonometry.html
├── copperlist_translator.html
├── index.html
├── rgbcolors.html
├── index_sprite_position.html
├── js
    └── UPNG.js
├── raw2planar.html
└── index_sprite.html


/CNAME:
--------------------------------------------------------------------------------
1 | amigafonteditor.ozzyboshi.com
2 | 


--------------------------------------------------------------------------------
/circles.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Ozzyboshi/AmigaFontEditor/HEAD/circles.png


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # AmigaFontEditor
 2 | AmigaFontEditor is a very basic font editor intended for Amiga's assembler programmers.
 3 | 
 4 | The goal of AmigaFontEditor is to let you draw for each grid a character ranging from ascii 32 up to 128 and get merge all of them in a single binary file ready to be included in your Amiga assembler program with the instruction `incbin'.
 5 | 
 6 | You can also inspect the binary content using the show binary and show hex buttons and restore a previously saved binary file with the `Import From Raw File' button.
 7 | 
 8 | AmigaFontEditor has not dependencies, entirely written in pure javascript and can run offline.
 9 | You can try it live now at http://amigafonteditor.ozzyboshi.com
10 | 
11 | Pull requests are welcome!!!
12 | 
13 | Amiga forever
14 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2021 Alessio Garzi
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/css/AmigaFontEditor.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |         margin: 0px;
 3 |         padding: 0px;
 4 | 		background:#607d8b;
 5 |       }
 6 | li {
 7 | 	border: solid 1px;
 8 | 	background-color:#9e9e9e;
 9 |     	padding: 5px;
10 |     	list-style: none;
11 |     	font-family: trebuchet ms;
12 |     	text-align: justify;
13 |     	word-wrap:break-word;
14 | }
15 | #colorslist > li {float: left;}
16 | #colorslist {    list-style-type: none;
17 |     margin: 0;
18 |     padding: 0;
19 |     overflow: hidden;
20 |     background-color: #333333;
21 | }
22 | 
23 | #colorslistnew > li {float: left;}
24 | #colorslistnew {    list-style-type: none;
25 |     margin: 0;
26 |     padding: 0;
27 |     overflow: hidden;
28 |     background-color: #333333;
29 | }
30 | 
31 | ul {
32 | 	margin:0px;
33 | 	padding:0px;
34 | 	padding-left: 0px;
35 | }
36 | 
37 | input {margin:10px;}
38 | input[type=button] {margin:1px;}
39 | input[type=color] {width: 20px;margin: 1px;}
40 | pre {border: solid 1px;margin: 0px;}
41 | #resultpre{ width:587px; height: 545px; }
42 | #resultpre2{display:block;overflow: auto;background-color: #eeeeee;word-break: normal !important;word-wrap: normal !important;white-space: pre !important;max-height:545px;margin-top: 12px;}
43 | #result{position:fixed;right:50px;width:593px;height:600px;background:white;top:150px;border: solid 10px;}
44 | #colorpalette{position:fixed;right:680px;width:290px;height:600px;background:white;top:150px;border: solid 10px;}
45 | #colorpalettenew{position:fixed;right:680px;width:290px;height:600px;background:white;top:150px;border: solid 10px;}
46 | 
47 | #fontnavigator{position:fixed;right:1000px;width:50px;height:600px;background:white;top:150px;border: solid 10px;overflow: auto;}
48 | #fontnavigator ul {margin: 0px;}
49 | #fontnavigator li {cursor:pointer;}
50 | #coppernavigator{position:fixed;right:0px;height:600px;background:white;top:150px;border: solid 10px;overflow: auto;width:50%;float:right;}
51 | 
52 | 
53 | canvas {cursor:pointer;}
54 | #colorslist > li:nth-child(2) {background-color: red;}
55 | #colorslist > li {cursor:pointer;}
56 | 
57 | .MOVE {background-color: #e2e29c;}
58 | 
59 | .resizable {
60 |     overflow: scroll;
61 |     resize: both;
62 |     max-width: 300px;
63 |     max-height: 460px;
64 | }
65 | 
66 | /* Add a black background color to the top navigation */
67 | .topnav {
68 |     background-color: #333;
69 |     overflow: hidden;
70 | }
71 | 
72 | /* Style the links inside the navigation bar */
73 | .topnav a {
74 |     float: left;
75 |     color: #f2f2f2;
76 |     text-align: center;
77 |     padding: 14px 16px;
78 |     text-decoration: none;
79 |     font-size: 17px;
80 | }
81 | 
82 | /* Change the color of links on hover */
83 | .topnav a:hover {
84 |     background-color: #ddd;
85 |     color: black;
86 | }
87 | 
88 | /* Add a color to the active/current link */
89 | .topnav a.active {
90 |     background-color: #4CAF50;
91 |     color: white;
92 | }
93 | 


--------------------------------------------------------------------------------
/number_interpreter.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE HTML>
  2 | <html>
  3 | 
  4 | <style>
  5 |   pre code {
  6 |     background-color: #eee;
  7 |     border: 1px solid #999;
  8 |     display: block;
  9 |     padding: 20px;
 10 |   }
 11 | </style>
 12 | 
 13 | <head>
 14 |   <link rel="stylesheet" type="text/css" href="css/AmigaFontEditor.css">
 15 |   <script src="js/AmigaFontEditor.js"></script>
 16 | </head>
 17 | 
 18 | <body>
 19 |   <a href="https://github.com/Ozzyboshi/AmigaFontEditor"><img style="position: absolute; top: 0; right: 0; border: 0;"
 20 |       src="https://camo.githubusercontent.com/652c5b9acfaddf3a9c326fa6bde407b87f7be0f4/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6f72616e67655f6666373630302e706e67"
 21 |       alt="Fork me on GitHub"
 22 |       data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_orange_ff7600.png"></a>
 23 |   <div class="topnav">
 24 |     <a href="index.html">Fonts</a>
 25 |     <a href="index_sprite.html">Sprite</a>
 26 |     <a href="index_sprite_position.html">Sprite position</a>
 27 |     <a href="register_conversion.html">Register conversion</a>
 28 |     <a href="copperlist_translator.html">Copperlist translator</a>
 29 |     <a href="diwstartstop.html">Diwstart/stop</a>
 30 |     <a href="projection.html">Point Projection</a>
 31 |     <a href="trigonometry.html">Trigonometric tables</a>
 32 |     <a href="raw2planar.html">Raw 2 planar viewer</a>
 33 |     <a href="rgbcolors.html">RGB Colors</a>
 34 |     <a href="sqrt.html">Square root tables</a>
 35 |     <a href="deltas.html">Deltas table calculator</a>
 36 |     <a class="active" href="number_interpreter.html">Number interpreter</a>
 37 |     <a href="rawdiff.html">Raw diff</a>
 38 |   </div>
 39 |   <div id="content" style="padding:25px">
 40 |     <h2>Amiga number interpreter</h2>
 41 |     <h4>Put a word in hex format inside the hex input area and click generate.<br>
 42 |       The number will be interpreted in various different formats.
 43 |     </h4>
 44 | 
 45 |     <div style="background-color: beige;">
 46 | 
 47 |       <ul>
 48 |         <li>
 49 |             Hex: <input maxlength=4 type="text" id="hexInput" name="hexInput">
 50 |             <input type="button" id="generatefromhex" value="Generate">
 51 |         </li>
 52 |         <li>
 53 |             Bin unsigned: <input maxlength=16 type="text" id="binInput" name="binInput">
 54 |             <input disabled type="button" id="generatefrombin" value="Generate">
 55 |         </li>
 56 |         <li>
 57 |             Bin signed: <input maxlength=16 type="text" id="binsignedInput" name="binsignedInput">
 58 |             <input disabled type="button" id="generatefrombinsigned" value="Generate">
 59 |         </li>
 60 |         <li>
 61 |             Decimal unsigned: <input maxlength=5 type="text" id="decunsignedInput" name="decunsignedInput">
 62 |             <input disabled type="button" id="generatefromdecunsigned" value="Generate">
 63 |         </li>
 64 |         <li>
 65 |             Decimal signed: <input maxlength=5 type="text" id="decsignedInput" name="decsignedInput">
 66 |             <input disabled type="button" id="generatefromdecsigned" value="Generate">
 67 |         </li>
 68 |       </ul>
 69 |     </div>
 70 | 
 71 | 
 72 |     <script>
 73 |     // hex generation
 74 |     obj = document.getElementById('generatefromhex');
 75 |     obj.onclick = function () 
 76 |     {
 77 |         hexInput = document.getElementById('hexInput');
 78 |         const decimalNumber = Number("0x"+hexInput.value);
 79 |         if (!isNaN(decimalNumber)) {
 80 |             binInput = document.getElementById('binInput');
 81 |             binInput.value=decimalNumber.toString(2).padStart(16, '0');
 82 |             decInput = document.getElementById('decunsignedInput');
 83 |             decInput.value=decimalNumber.toString(10);
 84 |             if (decimalNumber>=32768)
 85 |             {
 86 |                 const twosComplement = decimalNumber-1;
 87 |                 const a = (new Uint16Array([~twosComplement]))[0];
 88 |                 decInput = document.getElementById('decsignedInput');
 89 |                 decInput.value="-"+a.toString(10);
 90 |                 decInput = document.getElementById('binsignedInput');
 91 |                 decInput.value="-"+a.toString(2).padStart(16, '0');
 92 |             }
 93 |             else
 94 |             {
 95 |                 decInput = document.getElementById('decsignedInput');
 96 |                 decInput.value="+"+decimalNumber.toString(10);
 97 |                 decInput = document.getElementById('binsignedInput');
 98 |                 decInput.value="+"+decimalNumber.toString(2).padStart(16, '0');;
 99 |             }
100 |         }
101 |     }
102 | 
103 |     
104 |     </script>
105 | </body>
106 | 
107 | </html>
108 | 


--------------------------------------------------------------------------------
/deltas.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE HTML>
  2 | <html>
  3 | 
  4 | <style>
  5 |   pre code {
  6 |     background-color: #eee;
  7 |     border: 1px solid #999;
  8 |     display: block;
  9 |     padding: 20px;
 10 |   }
 11 | </style>
 12 | 
 13 | <head>
 14 |   <link rel="stylesheet" type="text/css" href="css/AmigaFontEditor.css">
 15 |   <script src="js/AmigaFontEditor.js"></script>
 16 | </head>
 17 | 
 18 | <body>
 19 |   <a href="https://github.com/Ozzyboshi/AmigaFontEditor"><img style="position: absolute; top: 0; right: 0; border: 0;"
 20 |       src="https://camo.githubusercontent.com/652c5b9acfaddf3a9c326fa6bde407b87f7be0f4/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6f72616e67655f6666373630302e706e67"
 21 |       alt="Fork me on GitHub"
 22 |       data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_orange_ff7600.png"></a>
 23 |   <div class="topnav">
 24 |     <a href="index.html">Fonts</a>
 25 |     <a href="index_sprite.html">Sprite</a>
 26 |     <a href="index_sprite_position.html">Sprite position</a>
 27 |     <a href="register_conversion.html">Register conversion</a>
 28 |     <a href="copperlist_translator.html">Copperlist translator</a>
 29 |     <a href="diwstartstop.html">Diwstart/stop</a>
 30 |     <a href="projection.html">Point Projection</a>
 31 |     <a href="trigonometry.html">Trigonometric tables</a>
 32 |     <a href="raw2planar.html">Raw 2 planar viewer</a>
 33 |     <a href="rgbcolors.html">RGB Colors</a>
 34 |     <a href="sqrt.html">Square root tables</a>
 35 |     <a class="active" href="deltas.html">Deltas table calculator</a>
 36 |     <a href="number_interpreter.html">Number interpreter</a>
 37 |     <a href="rawdiff.html">Raw diff</a>
 38 |   </div>
 39 |   <div id="content" style="padding:25px">
 40 |     <h2>Amiga delta table calculator</h2>
 41 |     <h4>This little tool helps you to recalculate tables according to the difference between each entry.<br>
 42 |         This is useful to help compressors to shrink data since we assume deltas are more redundant than single entryes of the table.<br>
 43 |         <br>
 44 |         Fill the upper textarea with the table entries for example:
 45 | 
 46 |         <xmp>
 47 |             dc.b %10000000 ; X:1 Y:1 InputValue: 0.250000
 48 |             dc.b %11001011 ; X:1 Y:3 InputValue: 0.397584
 49 |             ...
 50 |         </xmp>
 51 | 
 52 |         Then press the "Generate" button.<br>
 53 |         On the bottom textarea you will see the difference between the current entry and the previous, ready to be copied/pasted into your program.
 54 |         <br> The following is a little m68k ASM snippet/example that can reconstruct the original table.
 55 |         <xmp>
 56 |             lea DATASRC,a0
 57 |             lea DATADST,a1
 58 |             moveq #0,d1
 59 |             move.w #4096-1,d7
 60 |         loop:
 61 |             move.w (a0)+,d0
 62 |             add.w d1,d0
 63 |             move.w d0,(a1)+
 64 |             move.w d0,d1
 65 |             dbra d7,loop
 66 |             ...
 67 |         DATADST:
 68 |             dcb.w 4096,0
 69 |         DATASRC:
 70 |             dc.w 128 ; X:1 Y:1 InputValue: 0.250000
 71 |             ...
 72 |         </xmp>
 73 |     </h4>
 74 | 
 75 |     <div style="background-color: beige;">
 76 | 
 77 |       <input type="button" id="generatetables" value="Generate">
 78 |       <ul>
 79 |         <li><textarea id=asmcode style="width:100%;height:300px;"></textarea></li>
 80 |       </ul>
 81 | 
 82 |       <ul>
 83 |         <li><textarea id=deltatable style="width:100%;height:300px;"></textarea></li>
 84 |       </ul>
 85 | 
 86 |     </div>
 87 | 
 88 | 
 89 |     <script>
 90 |     obj = document.getElementById('generatetables');
 91 |     obj.onclick = function () 
 92 |     {
 93 |         //console.log(outputstring);
 94 |         var inputTextarea = document.getElementById('asmcode');
 95 |         var inputLines = inputTextarea.value.split('\n');
 96 |         var previousNumber = 0;
 97 | 
 98 |         var outputTextarea = document.getElementById('deltatable');
 99 |         outputTextarea.value = "";
100 | 
101 |         for(var i = 0;i < inputLines.length;i++)
102 |         {
103 |             var regex = /dc\.[b|w|l]\s+(.*?)(?:\s*;.*)?$/;
104 |             var match = inputLines[i].match(regex);
105 |             if (match)
106 |             {
107 |                 if (translateToDelta(match[1]) != null)
108 |                 {
109 |                     var numToPrint = parseInt(translateToDelta(match[1])) - previousNumber;
110 |                     if (outputTextarea.value == "")
111 |                     {
112 |                         outputTextarea.value = "dc.w "+numToPrint.toString();
113 |                     }
114 |                     else
115 |                     {
116 |                         outputTextarea.value += "dc.w "+numToPrint.toString();
117 |                     }
118 |                     var indexOfSemicolon = inputLines[i].indexOf(';');
119 |                     if (indexOfSemicolon !== -1)
120 |                         outputTextarea.value += " "+inputLines[i].substring(indexOfSemicolon);
121 | 
122 |                     previousNumber = parseInt(translateToDelta(match[1]));
123 |                     outputTextarea.value += "\n";
124 |                 }
125 |             }
126 |         }
127 |     }
128 |     function translateToDelta(input)
129 |     {
130 |         // If decimal
131 |         if (input[0]=='-' || (input[0]>='0' && input[0]<='9'))
132 |         {
133 |             if (input.match(/^[0-9\-]+$/) == null) return null;
134 |             return input;
135 |         }
136 | 
137 |         // If binary
138 |         else if (input[0]=='%')
139 |         {
140 |             input=input.slice(1);
141 |             if (input.match(/^[0-1]+$/) == null) return null;
142 |             return parseInt(input, 2).toString();
143 |         }
144 | 
145 |         // If hex
146 |         else if (input[0]=='$')
147 |         {
148 |             input=input.slice(1);
149 |             if (input.match(/^[0-9a-fA-F]+$/) == null) return null;
150 |             return parseInt(input, 16).toString();
151 |         }
152 | 
153 |         return null;
154 |     }
155 |     </script>
156 | </body>
157 | 
158 | </html>
159 | 


--------------------------------------------------------------------------------
/sqrt.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE HTML>
  2 | <html>
  3 | 
  4 | <style>
  5 |   pre code {
  6 |     background-color: #eee;
  7 |     border: 1px solid #999;
  8 |     display: block;
  9 |     padding: 20px;
 10 |   }
 11 | </style>
 12 | 
 13 | <head>
 14 |   <link rel="stylesheet" type="text/css" href="css/AmigaFontEditor.css">
 15 |   <script src="js/AmigaFontEditor.js"></script>
 16 | </head>
 17 | 
 18 | <body>
 19 |   <a href="https://github.com/Ozzyboshi/AmigaFontEditor"><img style="position: absolute; top: 0; right: 0; border: 0;"
 20 |       src="https://camo.githubusercontent.com/652c5b9acfaddf3a9c326fa6bde407b87f7be0f4/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6f72616e67655f6666373630302e706e67"
 21 |       alt="Fork me on GitHub"
 22 |       data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_orange_ff7600.png"></a>
 23 |   <div class="topnav">
 24 |     <a href="index.html">Fonts</a>
 25 |     <a href="index_sprite.html">Sprite</a>
 26 |     <a href="index_sprite_position.html">Sprite position</a>
 27 |     <a href="register_conversion.html">Register conversion</a>
 28 |     <a href="copperlist_translator.html">Copperlist translator</a>
 29 |     <a href="diwstartstop.html">Diwstart/stop</a>
 30 |     <a href="projection.html">Point Projection</a>
 31 |     <a href="trigonometry.html">Trigonometric tables</a>
 32 |     <a href="raw2planar.html">Raw 2 planar viewer</a>
 33 |     <a href="rgbcolors.html">RGB Colors</a>
 34 |     <a class="active" href="sqrt.html">Square root tables</a>
 35 |     <a href="deltas.html">Deltas table calculator</a>
 36 |     <a href="number_interpreter.html">Number interpreter</a>
 37 | 	  <a href="rawdiff.html">Raw diff</a>
 38 |   </div>
 39 |   <div id="content" style="padding:25px">
 40 |     <h2>Amiga SQRT tables generator</h2>
 41 |     <h4>Build your ASM sqrt tables</h4>
 42 | 
 43 |     <div style="background-color: beige;">
 44 |      
 45 |       &nbsp;&nbsp;Fixed point format: <select id=fixedpoint>
 46 |         <option integerpart=16 decimalpart=0 format=b value=0>Q16.0</option>
 47 |         <option integerpart=15 decimalpart=1 format=w value=0>Q15.1</option>
 48 |         <option integerpart=14 decimalpart=2 format=w value=1>Q14.2</option>
 49 |         <option integerpart=13 decimalpart=3 format=w value=2>Q13.3</option>
 50 |         <option integerpart=12 decimalpart=4 format=w value=3>Q12.4</option>
 51 |         <option integerpart=11 decimalpart=5 format=w value=4>Q11.5</option>
 52 |         <option integerpart=10 decimalpart=6 format=w value=5>Q10.6</option>
 53 |         <option integerpart=09 decimalpart=7 format=w value=6>Q9.7</option>
 54 |         <option integerpart=8 decimalpart=8 format=w value=0>Q8.8</option>
 55 |         <option integerpart=7 decimalpart=9 format=w value=0>Q7.9</option>
 56 |         <option integerpart=6 decimalpart=10 format=w value=0>Q6.10</option>
 57 |         <option integerpart=5 decimalpart=11 format=w value=0>Q5.11</option>
 58 |         <option integerpart=4 decimalpart=12 format=w value=0>Q4.12</option>
 59 |         <option integerpart=3 decimalpart=13 format=w value=0>Q3.13</option>
 60 |         <option integerpart=2 decimalpart=14 format=w value=0>Q2.14</option>
 61 |         <option integerpart=1 decimalpart=15 format=w value=0>Q1.15</option>
 62 |       </select>
 63 | 
 64 |       <input type="button" id="generatetables" value="Generate">
 65 | 
 66 | 
 67 |       <ul>
 68 |         <li><input type=button id=copy value="Copy to clipboard"></li>
 69 |         <li><textarea id=asmcode style="width:100%;height:300px;"></textarea></li>
 70 |       </ul>
 71 |     </div>
 72 | 
 73 | 
 74 |     <script>
 75 | 
 76 |     document.getElementById("copy").onclick = function()
 77 |     {
 78 |       document.getElementById("asmcode").select();
 79 |       document.execCommand('copy');
 80 |     }
 81 | 
 82 |       obj = document.getElementById('generatetables');
 83 |       obj.onclick = function () {
 84 |         var e = document.getElementById("fixedpoint");
 85 |         var value = e.value;
 86 |         var integerpart = e.options[e.selectedIndex].getAttribute("integerpart");
 87 |         var decimalpart = e.options[e.selectedIndex].getAttribute("decimalpart");
 88 |         var dsign = e.options[e.selectedIndex].getAttribute("format");
 89 |         var indexcounter = 0;
 90 |         //console.log(integerpart);
 91 |         //console.log(decimalpart);
 92 |         var outputstring = "SQRT_TABLE_"+e.options[e.selectedIndex].text.replace(/\./g, "_")+":\n";
 93 | 
 94 |         var integercombinations = Math.pow(2, integerpart);
 95 |         var decimalcombinations = Math.pow(2, decimalpart);
 96 |         //console.log(integercombinations);
 97 |         for (var integercounter = 0; integercounter < integercombinations; integercounter++)
 98 |         {
 99 |             outputnumber = integercounter.toString(2).padStart(integerpart, '0');
100 |             for (var decimalcounter = 0; decimalcounter < decimalcombinations; decimalcounter++)
101 |             {
102 |               var number = translateToVar(integercounter,decimalcounter,decimalpart);
103 |               //console.log(":"+number+" - sqrt"+Math.sqrt(number));
104 | 
105 |               var binaryconversion = translateToBinary(Math.sqrt(number),integerpart,decimalpart);
106 |               var binaryindex = integercounter.toString(2).padStart(integerpart, '0')+decimalcounter.toString(2).padStart(decimalpart, '0')
107 |               if (dsign == "b") binaryconversion = binaryconversion.slice(-8);
108 |               outputstring += "  dc."+dsign+" %"+binaryconversion+" ; (hex value of sqrt is $"+parseInt(binaryconversion, 2).toString(16) +") index = SQRT_TABLE+"+indexcounter+" ("+binaryindex+") "+number+" - sqrt: "+Math.sqrt(number);
109 |               outputstring+="\n";
110 |               if (dsign == "b") indexcounter++;
111 |               else indexcounter += 2;
112 |             }
113 |         }
114 |         //console.log(outputstring);
115 |         document.getElementById("asmcode").innerHTML = outputstring;
116 |       }
117 | 
118 |       function translateToBinary(number, integerpart, decimalpart)
119 |       {
120 |         var numberintegerpart = Math.trunc(number);
121 |         var numberdecimalpart = parseFloat(number % 1);
122 |         var decimalpartstr = "";
123 | 
124 |         //console.log("integer is "+numberintegerpart+"decimal is "+numberdecimalpart);
125 |         //console.log("integer part binary is "+numberintegerpart.toString(2).padStart(integerpart, '0'));
126 | 
127 |         for (var i = 0; i < decimalpart ; i++)
128 |         {
129 |           numberdecimalpart = numberdecimalpart * 2;
130 |           if (numberdecimalpart < 1)
131 |           {
132 |             decimalpartstr+="0";
133 |           }
134 |           else
135 |           {
136 |             decimalpartstr+="1";
137 |             numberdecimalpart--;
138 |           }
139 |         }
140 |         return numberintegerpart.toString(2).padStart(integerpart, '0')+""+decimalpartstr;
141 |       }
142 | 
143 |       function translateToVar(integercounter,decimalcounter,decimalpart)
144 |       {
145 |         var tmp = 0;
146 |         var decimalcounterstr = decimalcounter.toString(2).padStart(decimalpart, '0');
147 |         for (var i = 0 ; i < decimalpart; i++)
148 |         {
149 |           var bit = decimalcounterstr[i];
150 |           tmp += parseInt(bit)*Math.pow(2,-(i+1));
151 |         }
152 |         return parseInt(integercounter)+tmp;
153 |       }
154 | 
155 |     </script>
156 | </body>
157 | 
158 | </html>
159 | 


--------------------------------------------------------------------------------
/register_conversion.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE HTML>
  2 | <html>
  3 |   <head>
  4 |     <link rel="stylesheet" type="text/css" href="css/AmigaFontEditor.css">
  5 | 	<script src="js/AmigaFontEditor.js"></script>
  6 | 	<script src="js/AmigaRegisters.js"></script>
  7 | 	<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjs/4.2.2/math.min.js"></script>
  8 |   </head>
  9 |   <body>
 10 | 	<a href="https://github.com/Ozzyboshi/AmigaFontEditor"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/652c5b9acfaddf3a9c326fa6bde407b87f7be0f4/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6f72616e67655f6666373630302e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_orange_ff7600.png"></a>
 11 | 	<div class="topnav">
 12 | 	  <a href="index.html">Fonts</a>
 13 | 	  <a href="index_sprite.html">Sprite</a>
 14 | 	  <a href="index_sprite_position.html">Sprite position</a>
 15 | 	  <a class="active" href="#">Register conversion</a>
 16 | 	  <a  href="copperlist_translator.html">Copperlist translator</a>
 17 | 	  <a  href="diwstartstop.html">Diwstart/stop</a>
 18 | 	  <a  href="projection.html">Point Projection</a>
 19 | 	  <a  href="trigonometry.html">Trigonometric tables</a>
 20 | 	  <a href="raw2planar.html">Raw 2 planar viewer</a>
 21 | 	  <a href="rgbcolors.html">RGB Colors</a>
 22 | 	  <a href="sqrt.html">Square root tables</a>
 23 | 	  <a href="deltas.html">Deltas table calculator</a>
 24 | 	  <a href="number_interpreter.html">Number interpreter</a>
 25 | 	  <a href="rawdiff.html">Raw diff</a>
 26 | 	</div>
 27 | 	<h2>Amiga register reader</h2>
 28 | 	<div id="content" style="padding:25px">
 29 | 		<p><input type=text size=4 maxlength=4 id=hex value=0000> Hex value
 30 | 		<p><select size=1 id=register> Register
 31 | 		</select>
 32 | 
 33 | 		<p><input type=button value=Convert id=convert>
 34 | 	
 35 | 		<ul>
 36 | 			<li id=bit15>Bit 15</li>
 37 | 			<li id=bit14>Bit 14</li>
 38 | 			<li id=bit13>Bit 13</li>
 39 | 			<li id=bit12>Bit 12</li>
 40 | 			<li id=bit11>Bit 11</li>
 41 | 			<li id=bit10>Bit 10</li>
 42 | 			<li id=bit9>Bit 9</li>
 43 | 			<li id=bit8>Bit 8</li>
 44 | 			<li id=bit7>Bit 7</li>
 45 | 			<li id=bit6>Bit 6</li>
 46 | 			<li id=bit5>Bit 5</li>
 47 | 			<li id=bit4>Bit 4</li>
 48 | 			<li id=bit3>Bit 3</li>
 49 | 			<li id=bit2>Bit 2</li>
 50 | 			<li id=bit1>Bit 1</li>
 51 | 			<li id=bit0>Bit 0</li>
 52 | 
 53 | 		</ul>
 54 | 
 55 | 		<p><pre id=note>Note :</pre>
 56 | 	</div>
 57 | 	<script>
 58 | 		// Init selectbox
 59 | 		for (var registerIndex in AMIGAREGISTERS)
 60 | 		{
 61 | 			var register=AMIGAREGISTERS[registerIndex];
 62 | 			var option = document.createElement("option");
 63 | 		    option.value = register.address;
 64 | 		    option.text = register.address+" ("+register.name+") - "+register.description;
 65 | 			document.querySelector("#register").appendChild(option);
 66 | 		}
 67 | 		
 68 | 
 69 | 		document.querySelector("#convert").addEventListener('click',setfunctionforclick,false);
 70 | 		function setfunctionforclick()
 71 | 		{
 72 | 			var note="Note :";
 73 | 
 74 | 			//var register=registerDesc[document.querySelector("#register").value];
 75 | 			var register=[];
 76 | 			for (var registerIndex in AMIGAREGISTERS)
 77 | 			{
 78 | 				register=AMIGAREGISTERS[registerIndex].bits;
 79 | 				//if (AMIGAREGISTERS[registerIndex].note!=undefined) note+=AMIGAREGISTERS[registerIndex].note;
 80 | 				if (document.querySelector("#register").value==AMIGAREGISTERS[registerIndex].address) 
 81 | 				{ 
 82 | 					if (AMIGAREGISTERS[registerIndex].note!=undefined)
 83 | 						note+=AMIGAREGISTERS[registerIndex].note; 
 84 | 					break 
 85 | 				};
 86 | 			}
 87 | 
 88 | 			// Read ad crunch
 89 | 			var hexValue=parseInt(document.querySelector("#hex").value,16);
 90 | 			var binaryValue=hexValue.toString(2);
 91 | 			//console.log("bin:"+binaryValue);
 92 | 			//console.log("binlength:"+binaryValue.length);
 93 | 			binaryValueLength=binaryValue.length
 94 | 			for (var i=0;i<16-binaryValueLength;i++)
 95 | 			{
 96 | 				binaryValue="0"+binaryValue;
 97 | 			}
 98 | 
 99 | 
100 | 			//console.log("bin:"+binaryValue);
101 | 
102 | 			//console.log("binlength:"+binaryValue.length);
103 | 			for (var i=0;i<16;i++)
104 | 			{
105 | 				var bitNum=15-i;
106 | 				var selector="bit"+bitNum;
107 | 				if (binaryValue[i]=='1') document.querySelector("#"+selector+"").innerHTML='<div style="display:inline-flex;width:100px">Bit '+bitNum+"</div><div id=value"+bitNum+" style='display:inline-flex;width:100px;color:red;font-weight:bold'>"+binaryValue[i]+"</div>";
108 | 				else document.querySelector("#"+selector+"").innerHTML='<div style="display:inline-flex;width:100px">Bit '+bitNum+"</div><div id=value"+bitNum+" style='display:inline-flex;width:100px'>"+binaryValue[i]+"</div>";
109 | 
110 | 				document.querySelector("#"+selector+"").innerHTML+="<div style='display:inline-flex;width:100px'><input type=button class=changestate value='Change' bit="+bitNum+"></div>";
111 | 
112 | 				if (register[bitNum]!=undefined)				
113 | 						document.querySelector("#"+selector+"").innerHTML+= "<div style='display:inline-flex;width:300px'>"+register[bitNum].name+ "</div><pre style='margin:auto;width:50%;display:inline-flex;border:0px;'>"+register[bitNum].description+"</pre>";
114 | 				
115 | 			}
116 | 			document.querySelector("#note").innerHTML=note;
117 | 
118 | 			var changeBtns=document.querySelectorAll(".changestate");
119 | 			for (var i=0;i<changeBtns.length;i++)
120 | 				document.querySelectorAll(".changestate")[i].addEventListener('click',setfunctionChangeState,false);
121 | 			
122 | 		}
123 | 
124 | 		function setfunctionChangeState()
125 | 		{
126 | 			//console.log(this);
127 | 			var bitStr="";
128 | 			for (var i=15;i>=0;i--)
129 | 			{
130 | 				var oldBit=document.querySelector("#value"+i).innerHTML;
131 | 				var changeBit=false;
132 | 
133 | 				//console.log(i+" "+oldBit);
134 | 				if (i==this.getAttribute("bit"))
135 | 					changeBit=true;
136 | 
137 | 				if (changeBit)
138 | 				{
139 | 					if (oldBit==0) bitStr+="1";
140 | 					else bitStr+="0";
141 | 				}
142 | 				else bitStr+=oldBit;
143 | 			}
144 | 			/*console.log(bitStr);
145 | 			console.log(binaryToHex(bitStr));*/
146 | 			document.querySelector("#hex").value=binaryToHex(bitStr).result;
147 | 			document.querySelector("#convert").click();
148 | 		}
149 | 
150 | 		function binaryToHex(s) {
151 | 		    var i, k, part, accum, ret = '';
152 | 		    for (i = s.length-1; i >= 3; i -= 4) {
153 | 		        // extract out in substrings of 4 and convert to hex
154 | 		        part = s.substr(i+1-4, 4);
155 | 		        accum = 0;
156 | 		        for (k = 0; k < 4; k += 1) {
157 | 		            if (part[k] !== '0' && part[k] !== '1') {
158 | 		                // invalid character
159 | 		                return { valid: false };
160 | 		            }
161 | 		            // compute the length 4 substring
162 | 		            accum = accum * 2 + parseInt(part[k], 10);
163 | 		        }
164 | 		        if (accum >= 10) {
165 | 		            // 'A' to 'F'
166 | 		            ret = String.fromCharCode(accum - 10 + 'A'.charCodeAt(0)) + ret;
167 | 		        } else {
168 | 		            // '0' to '9'
169 | 		            ret = String(accum) + ret;
170 | 		        }
171 | 		    }
172 | 		    // remaining characters, i = 0, 1, or 2
173 | 		    if (i >= 0) {
174 | 		        accum = 0;
175 | 		        // convert from front
176 | 		        for (k = 0; k <= i; k += 1) {
177 | 		            if (s[k] !== '0' && s[k] !== '1') {
178 | 		                return { valid: false };
179 | 		            }
180 | 		            accum = accum * 2 + parseInt(s[k], 10);
181 | 		        }
182 | 		        // 3 bits, value cannot exceed 2^3 - 1 = 7, just convert
183 | 		        ret = String(accum) + ret;
184 | 		    }
185 | 		    return { valid: true, result: ret };
186 | 		}
187 | 	</script>
188 |   </body>
189 | </html>  
190 | 


--------------------------------------------------------------------------------
/projection.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE HTML>
  2 | <html>
  3 | 
  4 | <style>
  5 |   pre code {
  6 |   background-color: #eee;
  7 |   border: 1px solid #999;
  8 |   display: block;
  9 |   padding: 20px;
 10 | }
 11 | </style>
 12 | 
 13 | <head>
 14 |   <link rel="stylesheet" type="text/css" href="css/AmigaFontEditor.css">
 15 |   <script src="js/AmigaFontEditor.js"></script>
 16 | </head>
 17 | 
 18 | <body>
 19 |   <a href="https://github.com/Ozzyboshi/AmigaFontEditor"><img style="position: absolute; top: 0; right: 0; border: 0;"
 20 |       src="https://camo.githubusercontent.com/652c5b9acfaddf3a9c326fa6bde407b87f7be0f4/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6f72616e67655f6666373630302e706e67"
 21 |       alt="Fork me on GitHub"
 22 |       data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_orange_ff7600.png"></a>
 23 |   <div class="topnav">
 24 |     <a href="index.html">Fonts</a>
 25 |     <a href="index_sprite.html">Sprite</a>
 26 |     <a href="index_sprite_position.html">Sprite position</a>
 27 |     <a href="register_conversion.html">Register conversion</a>
 28 |     <a href="copperlist_translator.html">Copperlist translator</a>
 29 |     <a href="diwstartstop.html">Diwstart/stop</a>
 30 |     <a class="active" href="projection.html">Point Projection</a>
 31 |     <a href="trigonometry.html">Trigonometric tables</a>
 32 |     <a href="raw2planar.html">Raw 2 planar viewer</a>
 33 |     <a href="rgbcolors.html">RGB Colors</a>
 34 |     <a href="sqrt.html">Square root tables</a>
 35 |     <a href="deltas.html">Deltas table calculator</a>
 36 |     <a href="number_interpreter.html">Number interpreter</a>
 37 |     <a href="rawdiff.html">Raw diff</a>
 38 |   </div>
 39 |   <div id="content" style="padding:25px">
 40 |     <h2>Amiga projection tester</h2>
 41 |     <h4>Test 3d points projection on the screen with the folliwing formula</h4>
 42 | 
 43 |     <div style="display: inline;padding: 110px;float: right;background-color: beige;">
 44 |       Point generator
 45 | 
 46 |       <input type="number" id="numpoints" name="numpoints" min="1" value="1">
 47 |       <label for="numpoints">Number of points</label>
 48 |       <ul>
 49 |         <li><input type="button" id="generatepoints" value="Generate random points"></li>
 50 |         <li><input type="button" id="resetpoints" value="Reset random points"></li>
 51 |         <li><textarea id=asmcode style="width:100%;height:300px;"></textarea></li>
 52 |       </ul>
 53 |     </div>
 54 |   
 55 |     <pre style="border: 0px;width: fit-content;">
 56 |       <code>
 57 | var Xs = 160 + (Xe * Zu * -1) / (Ze - Zu);
 58 | var Ys = 128 + (Ye * Zu * -1) / (Ze - Zu);
 59 | 
 60 | Xe Ye Ze = coords of the point in a 3d space
 61 | Zu = distance of the viewer
 62 | 
 63 | Xs and Ys = projected points on the display monitor
 64 |       </code>
 65 |     </pre>
 66 |     <ul>
 67 |       <li style="width: fit-content;"><input class="inputs" id=Xe type=number value=50>Xe</li>
 68 |       <li style="width: fit-content;"><input class="inputs" id=Ye type=number value=50>Ye</li>
 69 |       <li style="width: fit-content;"><input class="inputs" id=Ze type=number value=50>Ze</li>
 70 |       <li style="width: fit-content;"><input class="inputs" id=Zu type=number value=256>Zu</li>
 71 |     </ul>
 72 |     
 73 | 
 74 |     <p>
 75 |       <p id=Xs value="0">Xs: 0</p>
 76 |       <p id=Ys value="0">Ys: 0</p>
 77 |     </p>
 78 |     <p>
 79 |       <canvas id=canvas width="320" height="256">3d Point tester</canvas>
 80 |     </p>
 81 |     <p>
 82 |       <input id="store" type="button" value="Fix point">
 83 |     </p>
 84 |     <p>
 85 |       <input id="clearpoints" type="button" value="Clear point">
 86 |     </p>
 87 |     <script>
 88 |       lastXs = 0;
 89 |       lastYs = 0;
 90 |       storedPoints = [];
 91 |       randomPoints = [];
 92 | 
 93 |       Xe = parseInt(document.getElementById('Xe').value);
 94 |       Ye = parseInt(document.getElementById('Ye').value);
 95 |       Ze = parseInt(document.getElementById('Ze').value);
 96 | 
 97 |       Zu = parseInt(document.getElementById('Zu').value);
 98 | 
 99 |       var Xs = 160 + (Xe * Zu * -1) / (Ze - Zu);
100 |       var Ys = 128 + (Ye * Zu * -1) / (Ze - Zu);
101 |       clearCanvas();
102 |       printPoint(Xs, Ys, 'green');
103 | 
104 |       obj = document.getElementById('resetpoints');
105 |       obj.onclick = function () {
106 |         randomPoints = [];
107 |         document.getElementById("asmcode").innerHTML="";
108 |       }
109 | 
110 |       obj = document.getElementById('generatepoints');
111 |       obj.onclick = function () {
112 |         var xBorderLeft = 10;
113 |         var xBorderRight = 10;
114 |         var yBorderUp = 10;
115 |         var yBorderDown = 10;
116 | 
117 |         for (i=0;i<parseInt(document.getElementById("numpoints").value);i++)
118 |         {
119 |           var xRandom = getRandomInt(-319/2+xBorderLeft,319/2-xBorderRight);
120 |           var yRandom = getRandomInt(-255/2+yBorderUp,255/2-yBorderDown);
121 |           var zRandom = getRandomInt(0,255);
122 | 
123 |           point = {
124 |             'x': xRandom,
125 |             'y': yRandom,
126 |             'z': zRandom
127 |           };
128 | 
129 |           randomPoints.push(point);
130 | 
131 |           console.log("Generated "+xRandom+":"+yRandom);
132 |           
133 |         }
134 | 
135 |         var asmString ="";
136 |         var index = 0;
137 |         separator="";
138 |         randomPoints.forEach(randomPoint => {
139 |           if (!index) asmString+="POINTS:\n";
140 |           asmString+="\tdc.l ";
141 |           asmString+=randomPoint.x;
142 |           asmString+=",";
143 |           asmString+=randomPoint.y;
144 |           asmString+=",";
145 |           asmString+=randomPoint.z;
146 |           asmString+="\n";
147 |           index++;
148 |           printPoint(randomPoint.x+319/2, randomPoint.y+255/2, 'green');
149 |         });
150 |         document.getElementById("asmcode").innerHTML=asmString;
151 | 
152 |         
153 |       }      
154 | 
155 |       obj = document.getElementById('clearpoints');
156 |       obj.onclick = function () {
157 |         storedPoints = [];
158 |         clearCanvas(); 
159 |       }
160 | 
161 |       obj = document.getElementById('store');
162 |       obj.onclick = function () {
163 |         point = {
164 |           'x': lastXs,
165 |           'y': lastYs
166 |         };
167 |         storedPoints.push(point);
168 |         console.log("store");
169 |       }
170 |       for (i = 0; i < document.getElementsByClassName('inputs').length; i++) {
171 |         obj = document.getElementsByClassName('inputs')[i];
172 |         obj.oninput = function () {
173 |           Xe = parseInt(document.getElementById('Xe').value);
174 |           Ye = parseInt(document.getElementById('Ye').value);
175 |           Ze = parseInt(document.getElementById('Ze').value);
176 | 
177 |           Zu = parseInt(document.getElementById('Zu').value);
178 | 
179 |           var Xs = 160 + (Xe * Zu * -1) / (Ze - Zu);
180 |           var Ys = 128 + (Ye * Zu * -1) / (Ze - Zu);
181 |           console.log("Xs: " + Xs);
182 |           document.getElementById('Xs').innerHTML = 'Xs: ' + Xs;
183 |           document.getElementById('Ys').innerHTML = 'Ys: ' + Ys;
184 |           lastXs = Xs;
185 |           lastXy = Ys;
186 |           console.log("Ys: " + Ys);
187 |           clearCanvas();
188 |           printPoint(Xs, Ys, 'green');
189 |           printStoredPoints();
190 |         }
191 |       }
192 | 
193 |       function printStoredPoints() {
194 |         storedPoints.forEach(element => {
195 |           printPoint(element.x, element.y, 'red');
196 |         });
197 |       }
198 | 
199 | 
200 | 
201 |       function clearCanvas() {
202 |         var canvas = document.getElementById('canvas');
203 |         var context = canvas.getContext('2d');
204 |         context.fillStyle = "white";
205 |         context.fillRect(0, 0, canvas.width, canvas.height);
206 |       }
207 | 
208 | 
209 |       function printPoint(x, y, color) {
210 |         var canvas = document.getElementById('canvas');
211 |         var context = canvas.getContext('2d');
212 |         var radius = 7;
213 |         context.beginPath();
214 |         context.arc(x, y, radius, 0, 2 * Math.PI, false);
215 |         context.fillStyle = color;
216 |         context.fill();
217 |         context.lineWidth = 5;
218 |         context.strokeStyle = '#003300';
219 |         context.stroke();
220 |       }
221 | 
222 |       /**
223 |        * Returns a random integer between min (inclusive) and max (inclusive).
224 |        * The value is no lower than min (or the next integer greater than min
225 |        * if min isn't an integer) and no greater than max (or the next integer
226 |        * lower than max if max isn't an integer).
227 |        * Using Math.round() will give you a non-uniform distribution!
228 |        */
229 |       function getRandomInt(min, max) {
230 |           min = Math.ceil(min);
231 |           max = Math.floor(max);
232 |           return Math.floor(Math.random() * (max - min + 1)) + min;
233 |       }
234 |     </script>
235 | </body>
236 | 
237 | </html>


--------------------------------------------------------------------------------
/rawdiff.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE HTML>
  2 | <html>
  3 |   <head>
  4 |     <link rel="stylesheet" type="text/css" href="css/AmigaFontEditor.css">
  5 | 	<script src="js/AmigaFontEditor.js"></script>
  6 | 
  7 | 	<style>
  8 |         .grigio-background {
  9 |             background-color: #f0f0f0; /* gray */
 10 |         }
 11 |     </style>
 12 | 
 13 |   </head>
 14 |   <body>
 15 | 	<a href="https://github.com/Ozzyboshi/AmigaFontEditor"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/652c5b9acfaddf3a9c326fa6bde407b87f7be0f4/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6f72616e67655f6666373630302e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_orange_ff7600.png"></a>
 16 | 	<div class="topnav">
 17 | 	  <a href="index.html">Fonts</a>
 18 | 	  <a href="index_sprite.html">Sprite</a>
 19 | 	  <a href="index_sprite_position.html">Sprite position</a>
 20 | 	  <a  href="register_conversion.html">Register conversion</a>
 21 | 	  <a  href="copperlist_translator.html">Copperlist translator</a>
 22 | 	  <a  href="diwstartstop.html">Diwstart/stop</a>
 23 | 	  <a  href="projection.html">Point Projection</a>
 24 | 	  <a  href="trigonometry.html">Trigonometric tables</a>
 25 | 	  <a href="raw2planar.html">Raw 2 planar viewer</a>
 26 | 	  <a href="rgbcolors.html">RGB Colors</a>
 27 | 	  <a href="sqrt.html">Square root tables</a>
 28 | 	  <a href="deltas.html">Deltas table calculator</a>
 29 | 	  <a href="number_interpreter.html">Number interpreter</a>
 30 |       <a class="active" href="#">Raw diff</a>
 31 | 	</div>
 32 | 
 33 | 	<div id="content" style="padding:25px;flex: 1;border: 0px ;">
 34 | 		<h2>Raw diff</h2>
 35 | 		<h4>Display difference between 2 raw files - each byte on both tables will get color from the list on the right according to how much difference between the 2 files</h4>
 36 | 		
 37 | 		
 38 | 		<div id=file1 style="width:40%;float:left">
 39 | 			<div>
 40 | 				<input type="file" id="fileChooser" style="display:none;">
 41 | 				<input type="button" value="Import From Raw File" onclick="document.getElementById('fileChooser').click();" />
 42 | 				<label for="start1">Start at byte:</label>
 43 | 				<input type="number" value="0" id="start1" placeholder="Start at byte">
 44 | 			</div>
 45 | 			<table id="table1">
 46 | 				<tr><td class="grigio-background">0</td></tr>
 47 | 			</table>
 48 | 		</div>
 49 |         <div id=file2 style="width:40%;float:left">
 50 | 			<div>
 51 | 				<input type="file" id="fileChooser2" style="display:none;">
 52 | 				<input type="button" value="Import From Raw File" onclick="document.getElementById('fileChooser2').click();" />
 53 | 				<label for="start2">Start at byte:</label>
 54 | 				<input type="number" value="0" id="start2" placeholder="Start at byte">
 55 | 			</div>
 56 |             <table id="table2">
 57 | 				<tr><td class="grigio-background">0</td></tr>
 58 | 			</table>
 59 | 		</div>
 60 | 		<div id=file3 style="width:20%;float:left">
 61 | 			<div>
 62 | 				<input type="button" value="Compare" onclick="startComparison();" />
 63 | 				<ul id="colorlist">
 64 | 					<li><input type=number min=0 max="255" value=0 size="3"><input type="color" value="#00FF00"></li>
 65 | 					<li><input type=number min=0 max="255" value=255 size="3"><input type="color" value="#FF0000"></li>
 66 | 				</ul>
 67 | 				<input type=button value="Add" onclick="AddColor();">
 68 | 			</div>
 69 | 		</div>
 70 | 	</div>
 71 |     <script>
 72 | 	document.querySelector("#fileChooser").addEventListener('change',filesChosen1, false);
 73 | 	document.querySelector("#fileChooser2").addEventListener('change',filesChosen2, false);
 74 | 
 75 | 	function filesChosen1(evt)
 76 | 	{
 77 | 		const table = document.getElementById("table1");
 78 | 		while (table.rows.length > 0) table.deleteRow(0);
 79 | 		table.insertRow();
 80 | 		appendTableEntry("0","table1","grigio-background");
 81 | 		return filesChosen(evt,"table1","#fileChooser",parseInt(document.getElementById("start1").value));
 82 | 	}
 83 | 	function filesChosen2(evt)
 84 | 	{
 85 | 		const table = document.getElementById("table2");
 86 | 		while (table.rows.length > 0) table.deleteRow(0);
 87 | 		table.insertRow();
 88 | 		appendTableEntry("0","table2","grigio-background");
 89 | 		return filesChosen(evt,"table2","#fileChooser2",parseInt(document.getElementById("start2").value));
 90 | 	}
 91 | 
 92 | 	function filesChosen(evt,tableName,fileChooser,startByte){
 93 | 		var chosenFile = evt.target.files[0]; //get the first file in the FileList
 94 | 		var fileName = chosenFile.name; //the name of the file as a string
 95 | 		var fileSize = chosenFile.size; //the size of the file in bytes, as an integer
 96 | 		var fileModifiedDate = chosenFile.lastModifiedDate; //a Date object
 97 | 		//console.log(chosenFile);
 98 | 		reader = new FileReader();
 99 | 		//reader.addEventListener("load", readFile, false);
100 | 		reader.readAsArrayBuffer(document.querySelector(fileChooser).files[0]);
101 | 		reader.onloadend = function () {
102 | 			var module=0;
103 | 			var contEntry = 0;
104 | 			//table.drawRawData(new Uint8Array(reader.result),palette.nBitplanes,module);
105 | 			let rawdata = new Uint8Array(reader.result);
106 | 			//console.log("Loading file with size "+rawdata.length);
107 | 			for (let i = startByte; i < rawdata.length; i++) {
108 | 				appendTableEntry(byteToHex(rawdata[i]),tableName,"");
109 | 				contEntry = contEntry +1;
110 | 				if ((contEntry % 16) == 0)
111 | 				{
112 | 					const table = document.getElementById(tableName);
113 | 					table.insertRow();
114 | 					appendTableEntry(String(contEntry),tableName,"grigio-background");
115 | 				}
116 | 			}
117 | 			//alert('File loaded succesfully');
118 | 			document.getElementById('fileChooser').value = null;
119 | 			return ;
120 | 		}
121 | 	}
122 | 
123 | 	function byteToHex(byte) {
124 |     	return ('0' + byte.toString(16)).slice(-2); // Aggiunge uno zero iniziale se necessario
125 | 	}
126 | 	function appendTableEntry(value,tableName,className)
127 | 	{
128 | 		const table = document.getElementById(tableName);
129 | 		const td = document.createElement("td");
130 | 		if (className != "") td.classList.add(className);
131 | 		td.textContent = value;
132 | 		const lastRow = table.rows[table.rows.length - 1];
133 | 		lastRow.appendChild(td);
134 | 	}
135 | 	function startComparison()
136 | 	{
137 | 		const table1 = document.getElementById("table1");
138 | 		const table2 = document.getElementById("table2");
139 | 		const maxIterations = table1.rows.length>table2.rows.length?table1.rows.length:table2.rows.length;
140 | 		for (let i = 0; i < maxIterations; i++) 
141 | 
142 | 		{
143 | 			const row1 = table1.rows[i];
144 | 			const row2 = table2.rows[i];
145 | 			for (let j = 0; row1 != undefined && row2 != undefined && j < row1.cells.length; j++) 
146 | 			{
147 | 
148 | 				const cell1 = row1.cells[j];
149 | 				const cell2 = row2.cells[j];
150 | 
151 | 				if (cell1.classList.contains("grigio-background")) continue;
152 | 
153 | 				const num1 = parseInt(cell1.textContent, 16);
154 | 				const num2 = parseInt(cell2.textContent, 16);
155 | 
156 | 				let diff = Math.abs(num1 - num2);
157 | 
158 | 				// Select the <ul> element with ID "colorlist"
159 | 				var ulElement = document.getElementById("colorlist");
160 | 
161 |     			// Get a NodeList of <li> elements inside the <ul> element
162 |     			var liElements = ulElement.getElementsByTagName("li");
163 | 
164 |     			// Iterate over each <li> element
165 |     			for (var ii = 0; ii < liElements.length; ii++) 
166 | 				{
167 |         			var li = liElements[ii];
168 |         
169 |         			// Get the input elements inside the <li> element
170 |         			var inputElements = li.getElementsByTagName("input");
171 | 
172 |         			// Ensure there are at least two input elements
173 |         			if (inputElements.length >= 2) 
174 | 					{
175 |             			var inputNumberValue = inputElements[0].value; // Value of the input type=number
176 |             			var inputColorValue = inputElements[1].value;  // Value of the input type=color
177 |             
178 |             			if (diff<=parseInt(inputNumberValue))
179 | 						{
180 | 							cell1.style.backgroundColor = String(inputColorValue);
181 | 							cell2.style.backgroundColor = String(inputColorValue);
182 | 							break;
183 | 						}
184 |         			}
185 |     			}
186 | 				
187 | 
188 | 				//console.log(cell1.textContent);
189 | 				//console.log(cell2.textContent);
190 | 			}
191 | 		}
192 | 		return ;
193 | 	}
194 | 	function AddColor()
195 | 	{
196 | 		var newLi = document.createElement("li");
197 | 
198 | 		// Create a new <input> element of type number
199 | 		var inputNumber = document.createElement("input");
200 | 		inputNumber.type = "number";
201 | 		inputNumber.min = 0;
202 | 		inputNumber.max = 255;
203 | 		inputNumber.size = 3;
204 | 
205 | 		// Create a new <input> element of type color
206 | 		var inputColor = document.createElement("input");
207 | 		inputColor.type = "color";
208 | 
209 | 		var deleteButton = document.createElement("input");
210 | 		deleteButton.type = "button";
211 | 		deleteButton.value = "Cancella";
212 | 
213 | 		// Aggiungi un gestore eventi al pulsante
214 | 		deleteButton.addEventListener("click", deleteLi);
215 | 		
216 | 
217 | 		// Append inputs to the new <li>
218 | 		newLi.appendChild(inputNumber);
219 | 		newLi.appendChild(inputColor);
220 | 		newLi.appendChild(deleteButton);
221 | 
222 |     	// Append the new <li> to the end of the <ul>
223 | 		var ulElement = document.getElementById("colorlist");
224 |     	ulElement.appendChild(newLi);
225 | 	}
226 | 
227 | 	function deleteLi() 
228 | 	{
229 | 	    var ulParent = this.parentNode.parentNode;
230 |     	var liParent = this.parentNode;
231 |     	ulParent.removeChild(liParent);
232 | 	}
233 | 
234 |     </script>
235 |   </body>
236 | </html>
237 | 


--------------------------------------------------------------------------------
/diwstartstop.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE HTML>
  2 | <html>
  3 | 
  4 | <head>
  5 | 	<link rel="stylesheet" type="text/css" href="css/AmigaFontEditor.css">
  6 | 	<script src="js/AmigaFontEditor.js"></script>
  7 | 	<script src="js/AmigaRegisters.js"></script>
  8 | 	<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjs/4.2.2/math.min.js"></script>
  9 | </head>
 10 | 
 11 | <body>
 12 | 	<a href="https://github.com/Ozzyboshi/AmigaFontEditor"><img style="position: absolute; top: 0; right: 0; border: 0;"
 13 | 			src="https://camo.githubusercontent.com/652c5b9acfaddf3a9c326fa6bde407b87f7be0f4/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6f72616e67655f6666373630302e706e67"
 14 | 			alt="Fork me on GitHub"
 15 | 			data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_orange_ff7600.png"></a>
 16 | 	<div class="topnav">
 17 | 		<a href="index.html">Fonts</a>
 18 | 		<a href="index_sprite.html">Sprite</a>
 19 | 		<a href="index_sprite_position.html">Sprite position</a>
 20 | 		<a href="register_conversion.html">Register conversion</a>
 21 | 		<a href="copperlist_translator.html">Copperlist translator</a>
 22 | 		<a class="active" href="#">Diwstart/stop</a>
 23 | 		<a  href="projection.html">Point Projection</a>
 24 | 		<a  href="trigonometry.html">Trigonometric tables</a>
 25 | 		<a href="raw2planar.html">Raw 2 planar viewer</a>
 26 | 		<a href="rgbcolors.html">RGB Colors</a>
 27 | 		<a href="sqrt.html">Square root tables</a>
 28 | 		<a href="deltas.html">Deltas table calculator</a>
 29 | 		<a href="number_interpreter.html">Number interpreter</a>
 30 | 		<a href="rawdiff.html">Raw diff</a>
 31 | 	</div>
 32 | 	<h2>Amiga diwstart/stop simulation</h2>
 33 | 	<div id="content" style="padding:25px">
 34 | 		<canvas id=screen style="border:1px solid;"></canvas>
 35 | 		
 36 | 	
 37 | 	<div  style="float:right;width: 50%;height: 500px;">
 38 | 		<p>DiwXstart: <input type="number" id="diwXStartInput" value="129" min=0 max=255 step=1></p>
 39 | 		<input type="range" min="0" max="255" value="129" class="slider" id="diwXStart">
 40 | 
 41 | 		<p>DiwXstop: <input type="number" id="diwXStopInput" value="193" min=0 max=255 step=1></p>
 42 | 		<input type="range" min="0" max="255" value="193" class="slider" id="diwXStop">
 43 | 
 44 | 		<p>DiwYstart: <input type="number" id="diwYStartInput" value="44" min=0 max=255 step=1></p>
 45 | 		<input type="range" min="0" max="255" value="44" class="slider" id="diwYStart">
 46 | 
 47 | 		<p>DiwYstop: <input type="number" id="diwYStopInput" value="44" min=0 max=255 step=1>		</p> 
 48 | 		<input type="range" min="0" max="255" value="44" class="slider" id="diwYStop">
 49 | 	</div>
 50 | 
 51 | 	<p>DFF08E (DIWSTRT): 
 52 | 		<a id=diwstrt>0000</a>
 53 | 	</p>
 54 | 
 55 | 	<p>DFF090 (DIWSTOP): 
 56 | 		<a id=diwstop>0000</a>
 57 | 	</p>
 58 | 
 59 | 	<p>New image (must be a 320X256 png url): 
 60 | 		<input type="url" id=imgurl value="circles.png">
 61 | 	</p>
 62 | 	
 63 | </div>
 64 | 
 65 | 	
 66 | 	<script>
 67 | 
 68 | 		var diwXStart = document.getElementById("diwXStart");
 69 | 		var diwXSstop = document.getElementById("diwXStop");
 70 | 		var diwYStart = document.getElementById("diwYStart");
 71 | 		var diwYStop = document.getElementById("diwYStop");
 72 | 
 73 | 		var diwXStartInput = document.getElementById("diwXStartInput");
 74 | 		var diwXStopInput = document.getElementById("diwXStopInput");
 75 | 		var diwYStartInput = document.getElementById("diwYStartInput");
 76 | 		var diwYStopInput = document.getElementById("diwYStopInput");
 77 | 
 78 | 		var LineCoords = {
 79 | 			x1: 0,
 80 | 			y1: 0,
 81 | 			x2: 0,
 82 | 			y2: 0
 83 | 		};
 84 | 
 85 | 		var diwXStartLine = Object.create(LineCoords);
 86 | 		var diwXStopLine = Object.create(LineCoords);
 87 | 		var diwYStartLine = Object.create(LineCoords);
 88 | 		var diwYStopLine = Object.create(LineCoords);
 89 | 
 90 | 		const startXDefault = diwXStart.value;
 91 | 		const endXDefault = 129+320;
 92 | 		const startYDefault=44;
 93 | 		const endYDefault=44+255;
 94 | 
 95 | 		var displayScreen = Object.create(LineCoords);
 96 | 		displayScreen.x1=diwXStart.value*1;
 97 | 		displayScreen.x2=diwXSstop.value*1;
 98 | 		displayScreen.y1=diwYStart.value*1;
 99 | 		displayScreen.y2=diwYStop.value*1;
100 | 
101 | 		var canvas = document.getElementById('screen');
102 | 		var startWindowY = 44;
103 | 		var displayYRes = 256;
104 | 
105 | 		var startWindowX = 129;
106 | 		var displayXRes = 320;
107 | 
108 | 		var imageData;
109 | 
110 | 		canvas.height =   displayYRes+127;
111 | 		//canvas.width=startWindowX*2+displayXRes;
112 | 		canvas.width = 255 * 2;
113 | 
114 | 		if (canvas.getContext) {
115 | 			var context = canvas.getContext('2d');
116 | 
117 | 			context.beginPath();
118 | 			context.fillStyle = '#000000';    // color of fill
119 | 			context.globalAlpha = 0.2;
120 | 			context.fillRect(0, 0, canvas.width, canvas.height); // create rectangle  
121 | 			context.globalAlpha = 1;
122 | 
123 | 			context.beginPath();
124 | 			//context.moveTo(startWindowX,StartWindowHeight);
125 | 			//context.lineTo(startWindowX,canvas.height);
126 | 
127 | 			context.moveTo(startWindowX, startWindowY);
128 | 			context.lineTo(startWindowX, startWindowY + displayYRes);
129 | 			context.lineTo(startWindowX + displayXRes, startWindowY + displayYRes);
130 | 			context.lineTo(startWindowX + displayXRes, startWindowY);
131 | 			context.lineTo(startWindowX, startWindowY);
132 | 			context.stroke();
133 | 
134 | 			
135 | 
136 | 
137 | 
138 | 			// save the state of  the canvas here
139 | 			imageData = context.getImageData(0, 0, canvas.width, canvas.height);
140 | 
141 | 			redrawScreen2();
142 | 		}
143 | 
144 | 		function redrawScreen2()
145 | 		{
146 | 			if (imageData)
147 | 				context.putImageData(imageData, 0, 0);
148 | 			drawing = new Image();
149 | 			//drawing.src = "circles.png"; // can also be a remote URL e.g. http://
150 | 			drawing.src = document.getElementById("imgurl").value;
151 | 			drawing.onload = function () {
152 | 				context.drawImage(drawing, startWindowX, startWindowY);
153 | 				context.beginPath();
154 | 				//context.fillStyle = '#FF0000';    // color of fill	
155 | 				context.strokeStyle = "red";
156 | 				console.log("Xvalues : "+displayScreen.x1+" "+displayScreen.x2);
157 | 				console.log("Yvalues : "+displayScreen.y1+" "+displayScreen.y2);
158 | 
159 | 				if (displayScreen.y2>127)
160 | 					context.rect(displayScreen.x1,displayScreen.y1,displayScreen.x2+256-displayScreen.x1,displayScreen.y2+1-displayScreen.y1);
161 | 				else
162 | 					context.rect(displayScreen.x1,displayScreen.y1,displayScreen.x2+256-displayScreen.x1,displayScreen.y2+256-displayScreen.y1);
163 | 				context.stroke();
164 | 
165 | 				context.globalAlpha = 0.2;
166 | 				context.beginPath();
167 | 				context.moveTo(displayScreen.x1-1,displayScreen.y1-1);
168 | 				context.lineTo(displayScreen.x1-1, 0);
169 | 				context.lineTo(0, 0);
170 | 				context.lineTo(0, canvas.height);
171 | 				context.lineTo(displayScreen.x1-1, canvas.height);
172 | 				context.closePath();
173 | 				context.fill();
174 | 				context.globalAlpha = 1;
175 | 
176 | 				context.globalAlpha = 0.2;
177 | 				context.beginPath();
178 | 				context.moveTo(displayScreen.x2+1+256,displayScreen.y1-1);
179 | 				context.lineTo(displayScreen.x2+1+256, 0);
180 | 				context.lineTo(canvas.width, 0);
181 | 				context.lineTo(canvas.width, canvas.height);
182 | 				context.lineTo(displayScreen.x2+1+256, canvas.height);
183 | 				context.closePath();
184 | 				context.fill();
185 | 				context.globalAlpha = 1;
186 | 
187 | 				context.globalAlpha = 0.2;
188 | 				context.beginPath();
189 | 				context.moveTo(displayScreen.x1,displayScreen.y1-1);
190 | 				context.lineTo(displayScreen.x1,0);
191 | 				context.lineTo(displayScreen.x2+256,0);
192 | 				context.lineTo(displayScreen.x2+256,displayScreen.y1-1);
193 | 				context.closePath();
194 | 				context.fill();
195 | 				context.globalAlpha = 1;
196 | 
197 | 				context.globalAlpha = 0.2;
198 | 				context.beginPath();
199 | 				if (displayScreen.y2>127) context.moveTo(displayScreen.x1,displayScreen.y2+1);
200 | 				else context.moveTo(displayScreen.x1,displayScreen.y2+256+1);
201 | 				context.lineTo(displayScreen.x1,canvas.height);
202 | 				context.lineTo(displayScreen.x2+256,canvas.height);
203 | 				if (displayScreen.y2>127) context.lineTo(displayScreen.x2+256,displayScreen.y2+1);
204 | 				else context.lineTo(displayScreen.x2+256,displayScreen.y2+256+1);
205 | 				context.closePath();
206 | 				context.fill();
207 | 				context.globalAlpha = 1;
208 | 
209 | 				updateDiwstrt();
210 | 				updateDiwstop();
211 | 			};
212 | 		}
213 | 
214 | 		diwXStart.oninput = function () {
215 | 			displayScreen.x1=this.value*1;
216 | 			document.getElementById('diwXStartInput').value=this.value*1;
217 | 			redrawScreen2();
218 | 		}
219 | 
220 | 		diwXSstop.oninput = function () {
221 | 			displayScreen.x2=this.value*1;
222 | 			document.getElementById('diwXStopInput').value=this.value*1;
223 | 			redrawScreen2();
224 | 
225 | 		}
226 | 
227 | 		diwYStart.oninput = function () {
228 | 			displayScreen.y1=this.value*1;
229 | 			document.getElementById('diwYStartInput').value=this.value*1;
230 | 			redrawScreen2();
231 | 		}
232 | 
233 | 		diwYStop.oninput = function () {
234 | 			displayScreen.y2=this.value*1;
235 | 			document.getElementById('diwYStopInput').value=this.value*1;
236 | 			redrawScreen2();
237 | 		}
238 | 
239 | 		diwXStartInput.oninput = function ()
240 | 		{
241 | 			displayScreen.x1=this.value*1;
242 | 			diwXStart.value=this.value*1;
243 | 			redrawScreen2();
244 | 		}
245 | 
246 | 		diwXStopInput.oninput = function ()
247 | 		{
248 | 			displayScreen.x2=this.value*1;
249 | 			diwXSstop.value=this.value*1;
250 | 			redrawScreen2();
251 | 		}
252 | 
253 | 		diwYStartInput.oninput = function ()
254 | 		{
255 | 			displayScreen.y1=this.value*1;
256 | 			diwYStart.value=this.value*1;
257 | 			redrawScreen2();
258 | 		}
259 | 
260 | 		diwYStopInput.oninput = function ()
261 | 		{
262 | 			displayScreen.y2=this.value*1;
263 | 			diwYStop.value=this.value*1;
264 | 			redrawScreen2();
265 | 		}
266 | 
267 | 		document.getElementById("imgurl").oninput = function ()
268 | 		{
269 | 			redrawScreen2();
270 | 		}
271 | 
272 | 		function updateDiwstrt()
273 | 		{
274 | 			document.getElementById('diwstrt').innerHTML=(document.getElementById('diwYStart').value*1).toString(16).padStart(2,'0')+(document.getElementById('diwXStart').value*1).toString(16).padStart(2,'0');
275 | 		}
276 | 
277 | 		function updateDiwstop()
278 | 		{
279 | 			document.getElementById('diwstop').innerHTML=(document.getElementById('diwYStop').value*1).toString(16).padStart(2,'0')+(document.getElementById('diwXStop').value*1).toString(16).padStart(2,'0');
280 | 		}
281 | 		
282 | 	</script>
283 | </body>
284 | 
285 | </html>
286 | 


--------------------------------------------------------------------------------
/trigonometry.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE HTML>
  2 | <html>
  3 | 
  4 | <style>
  5 |   pre code {
  6 |     background-color: #eee;
  7 |     border: 1px solid #999;
  8 |     display: block;
  9 |     padding: 20px;
 10 |   }
 11 | </style>
 12 | 
 13 | <head>
 14 |   <link rel="stylesheet" type="text/css" href="css/AmigaFontEditor.css">
 15 |   <script src="js/AmigaFontEditor.js"></script>
 16 | </head>
 17 | 
 18 | <body>
 19 |   <a href="https://github.com/Ozzyboshi/AmigaFontEditor"><img style="position: absolute; top: 0; right: 0; border: 0;"
 20 |       src="https://camo.githubusercontent.com/652c5b9acfaddf3a9c326fa6bde407b87f7be0f4/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6f72616e67655f6666373630302e706e67"
 21 |       alt="Fork me on GitHub"
 22 |       data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_orange_ff7600.png"></a>
 23 |   <div class="topnav">
 24 |     <a href="index.html">Fonts</a>
 25 |     <a href="index_sprite.html">Sprite</a>
 26 |     <a href="index_sprite_position.html">Sprite position</a>
 27 |     <a href="register_conversion.html">Register conversion</a>
 28 |     <a href="copperlist_translator.html">Copperlist translator</a>
 29 |     <a href="diwstartstop.html">Diwstart/stop</a>
 30 |     <a href="projection.html">Point Projection</a>
 31 |     <a class="active" href="trigonometry.html">Trigonometric tables</a>
 32 |     <a href="raw2planar.html">Raw 2 planar viewer</a>
 33 |     <a href="rgbcolors.html">RGB Colors</a>
 34 |     <a href="sqrt.html">Square root tables</a>
 35 |     <a href="deltas.html">Deltas table calculator</a>
 36 |     <a href="number_interpreter.html">Number interpreter</a>
 37 | 	  <a href="rawdiff.html">Raw diff</a>
 38 |   </div>
 39 |   <div id="content" style="padding:25px">
 40 |     <h2>Amiga Trigonometric tables generator</h2>
 41 |     <h4>Build your ASM trigonometric functions</h4>
 42 | 
 43 |     <div style="background-color: beige;">
 44 |       Multiplier
 45 | 
 46 |       <input type="number" id="multiplier" name="multiplier" min="1" value="1">
 47 |       Multiplier helper: <select id="multiplierhelper" size=1>
 48 |         <option value=1 SELECTED>1 (2^0)</option>
 49 |         <option value=2>2 (2^1)</option>
 50 |         <option value=4>4 (2^2)</option>
 51 |         <option value=8>8 (2^3)</option>
 52 |         <option value=16>16 (2^4)</option>
 53 |         <option value=32>32 (2^5)</option>
 54 |         <option value=64>64 (2^6)</option>
 55 |         <option value=128>128 (2^7)</option>
 56 |         <option value=256>256 (2^8)</option>
 57 |         <option value=512>512 (2^9)</option>
 58 |         <option value=1024>1024 (2^10)</option>
 59 |         <option value=2048>2048 (2^11)</option>
 60 |         <option value=4096>4096 (2^12)</option>
 61 |         <option value=8192>8192 (2^13)</option>
 62 |         <option value=16384>16384 (2^14)</option>
 63 |         <option value=32768>32768 (2^15)</option>
 64 |         <option value=65536>65536 (2^16)</option>
 65 |       </select>
 66 |       &nbsp;&nbsp;Function: <select id=trigcol>
 67 |         <option value=0>Sin()</option>
 68 |         <option value=1>-Sin()</option>
 69 |         <option value=2>Cos()</option>
 70 |         <option value=3>-Cos()</option>
 71 |         <option value=4>Zero</option>
 72 |       </select>
 73 |       <input type="button" id="generatetables" value="Add">
 74 |       <input type="button" id="removelast" value="Remove last">
 75 | 
 76 |       &nbsp;&nbsp;Fixed point format: <select id=fixedpoint>
 77 |         <option value=0>Q16.0</option>
 78 |         <option value=6>Q10.6</option>
 79 |         <option value=11>Q5.11</option>
 80 |         <option value=14>Q2.14</option>
 81 |       </select>
 82 | 
 83 |       &nbsp;&nbsp;Add offset: 
 84 |       <input type = number value = 0 id = offset>
 85 |       
 86 | 
 87 |       <ul>
 88 |         <li><input type=button id=copy value="Copy to clipboard"></li>
 89 |         <li><input type="button" id="resettables" value="Reset tables"></li>
 90 |         <li><textarea id=asmcode style="width:100%;height:300px;"></textarea></li>
 91 |       </ul>
 92 |     </div>
 93 | 
 94 | 
 95 |     <script>
 96 | 
 97 |     document.getElementById("copy").onclick = function()
 98 |     {
 99 |       document.getElementById("asmcode").select();
100 |       document.execCommand('copy');
101 |     }
102 | 
103 |       var tables = [];
104 |       var columns = [];
105 | 
106 |       obj = document.getElementById('fixedpoint');
107 |       obj.onchange = function () {
108 |         var e = document.getElementById("fixedpoint");
109 |         var fraction = e.options[e.selectedIndex].value;
110 |         console.log(fraction);
111 |         updateAsm();
112 |       }
113 | 
114 |       obj = document.getElementById('multiplierhelper');
115 |       obj.onchange = function () {
116 |         var e = document.getElementById("multiplierhelper");
117 |         var helperNumber = e.options[e.selectedIndex].value;
118 |         document.getElementById("multiplier").value = helperNumber;
119 |         updateAsm();
120 |       }
121 | 
122 |       obj = document.getElementById('resettables');
123 |       obj.onclick = function () {
124 |         document.getElementById("asmcode").innerHTML = "";
125 |         tables = [];
126 |         columns = [];
127 |       }
128 | 
129 |       obj = document.getElementById('removelast');
130 |       obj.onclick = function () {
131 |         columns.pop();
132 |         updateAsm();
133 |       }
134 | 
135 |       obj = document.getElementById('generatetables');
136 |       obj.onclick = function () {
137 |         columns.push(document.getElementById("trigcol").value);
138 |         updateAsm();
139 |       }
140 | 
141 |       function calculateSine(degrees) {
142 | 	      var radians = (Math.PI / 180) * degrees;
143 |   	    return Math.sin(radians).toFixed(32);
144 |       }
145 | 
146 |       function calculateCosine(degrees) {
147 | 	      var radians = (Math.PI / 180) * degrees;
148 |   	    return Math.cos(radians).toFixed(32);
149 |       }
150 | 
151 |       function updateAsm() {
152 |         var e = document.getElementById("fixedpoint");
153 |         var fraction = parseFloat(e.options[e.selectedIndex].value);
154 | 
155 |         document.getElementById("asmcode").innerHTML = "";
156 |         tables = [];
157 | 
158 |         var offset = parseFloat(document.getElementById("offset").value);
159 | 
160 |         for (i = 0; i < 360; i++) {
161 | 
162 |           table = {
163 |             'sin': offset + (calculateSine(i) * parseInt(document.getElementById("multiplier").value)),
164 |             'sinorig': calculateSine(i),
165 |             'cos': offset + (calculateCosine(i) * parseInt(document.getElementById("multiplier").value)),
166 |             'cosorig': Math.cos(i * Math.PI / 180),
167 |             'sininv': offset + (-1 * calculateSine(i) * parseInt(document.getElementById("multiplier").value)),
168 |             'cosinv': offset + (-1 *calculateCosine(i) * parseInt(document.getElementById("multiplier").value)),
169 |             'zero': 0
170 |           };
171 |           var fraction = parseFloat(e.options[e.selectedIndex].value);
172 | 
173 |           table.sin = table.sin.toFixed(fraction>0?fraction:32);
174 |           table.sininv = table.sininv.toFixed(fraction>0?fraction:32);
175 |           table.cos = table.cos.toFixed(fraction>0?fraction:32);
176 |           table.cosinv = table.cosinv.toFixed(fraction>0?fraction:32);
177 | 
178 |           tables.push(table);
179 |         }
180 | 
181 |         var asmString = "";
182 |         var index = 0;
183 |         // Sin table
184 |         separator = "";
185 |         tables.forEach(table => {
186 |           if (!index) asmString += "SIN_TABLE:\n";
187 |           asmString += "\tdc.w ";
188 |           var virgola = "";
189 |           columns.forEach(column => {
190 |             //console.log(column);
191 |             //console.log(getTrigCol(table,column));
192 |             if (fraction > 0) {
193 |               var qnumber = qformat(parseFloat(getTrigCol(table, column)), fraction);
194 |               //console.log(index+"####"+parseFloat(getTrigCol(table, column).toFixed(fraction))+"-----"+fraction);
195 |               asmString += virgola + "%" + qnumber;
196 |             }
197 |             else asmString += virgola + parseInt(getTrigCol(table, column).toString());
198 |             virgola = ",";
199 |           });
200 | 
201 |           //if (fraction > 0) asmString += "   ; " + index + " deg - True SIN value: " + (parseFloat(table.sinorig).toFixed(fraction));
202 |           //else asmString += "   ; " + index + " deg - True SIN value: " + table.sinorig;
203 |           //asmString+=parseInt(table.sin)+","+parseInt(table.cos)+","+parseInt(table.sininv)+","+parseInt(table.cosinv)+"   ; "+index+" deg - True value: "+table.sinorig;
204 |           asmString+=" ; degrees: "+index;
205 |           asmString += "\n";
206 |           index++;
207 |         });
208 | 
209 | 
210 | 
211 |         document.getElementById("asmcode").innerHTML = asmString;
212 | 
213 |       }
214 | 
215 |       function getTrigCol(table, column) {
216 |         switch (parseInt(column)) {
217 |           case 0: return table.sin;
218 |           case 1: return table.sininv;
219 |           case 2: return table.cos;
220 |           case 3: return table.cosinv;
221 |           case 4: return 0;
222 |           default: return table.sin;
223 |         }
224 |       }
225 | 
226 |       function qformat(number, fractionprecision) {
227 |         //number=0.01745240643728351;
228 |         // number = -1;
229 |         var integerPartBinary = number.toString(2);
230 |         if (integerPartBinary.includes("."))
231 |           var integerPart = integerPartBinary.substr(0, integerPartBinary.indexOf('.'));
232 |         else
233 |           integerPart = integerPartBinary;
234 |         //console.log("Numero:" + number + "##" + integerPart);
235 |         //if (number>=0)
236 |         var isNegative = 0;
237 |         if (number < 0) {
238 |           isNegative = 1;
239 |           number *= -1;
240 |           integerPart = integerPart.replace('-','');
241 |         }
242 |         if (1) {
243 |           var integerPartBinaryPadded = integerPart.padStart(16 - fractionprecision - 1, '0');
244 |           console.log("Integer part padded:" + integerPartBinaryPadded);
245 |           if (integerPartBinary.includes(".")) {
246 |             var fractionalPart = integerPartBinary.split('.')[1];
247 |             fractionalPart = fractionalPart.substring(0, fractionprecision);
248 |           }
249 |           else
250 |             var fractionalPart = "".padStart(fractionprecision, '0');
251 | 
252 |           //console.log("Parte frazionaria:" + fractionalPart);
253 |           var fractionalPartPadded = fractionalPart.padEnd(fractionprecision, '0');
254 |           var finalRes = "0" + integerPartBinaryPadded + "" + fractionalPartPadded;
255 |           if (isNegative == 0) return finalRes;
256 |           var finalResNeg = "";
257 |           for (var i = 0; i < finalRes.length; i++) {
258 |             if (finalRes[i] == '0') finalResNeg += "1";
259 |             else if (finalRes[i] == '1') finalResNeg += "0";
260 |           }
261 | 
262 |           for (var i = finalResNeg.length - 1; i >= 0; i--) {
263 |             if (finalResNeg[i] == '0') {
264 |               finalResNeg=setCharAt(finalResNeg,i,'1');
265 |               break;
266 |             }
267 |             if (finalResNeg[i] == '1') {
268 |               finalResNeg=setCharAt(finalResNeg,i,'0');
269 |             }
270 | 
271 |           }
272 |           return finalResNeg;
273 |         }
274 |       }
275 | 
276 |       function setCharAt(str, index, chr) {
277 |         if (index > str.length -1) return str;
278 |         return str.substring(0, index) + chr + str.substring(index+1);
279 |       }
280 | 
281 | 
282 |     </script>
283 | </body>
284 | 
285 | </html>


--------------------------------------------------------------------------------
/copperlist_translator.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE HTML>
  2 | <html>
  3 |   <head>
  4 |     <link rel="stylesheet" type="text/css" href="css/AmigaFontEditor.css">
  5 | 	<script src="js/AmigaFontEditor.js"></script>
  6 |     <script src="js/AmigaRegisters.js"></script>
  7 |     <style>
  8 |         mark {
  9 |             background-color: #AAAAAA;
 10 |             color: black;
 11 |         }
 12 |         li {cursor:pointer;}
 13 | 
 14 |     </style>
 15 |   </head>
 16 |   <body>
 17 | 	<a href="https://github.com/Ozzyboshi/AmigaFontEditor"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/652c5b9acfaddf3a9c326fa6bde407b87f7be0f4/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6f72616e67655f6666373630302e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_orange_ff7600.png"></a>
 18 | 	<div class="topnav">
 19 | 	  <a href="index.html">Fonts</a>
 20 | 	  <a href="index_sprite.html">Sprite</a>
 21 | 	  <a href="index_sprite_position.html">Sprite position</a>
 22 |           <a  href="register_conversion.html">Register conversion</a>
 23 |           <a class="active" href="#">Copperlist translator</a>
 24 |       <a  href="diwstartstop.html">Diwstart/stop</a>
 25 |       <a  href="projection.html">Point Projection</a>
 26 |       <a  href="trigonometry.html">Trigonometric tables</a>
 27 |       <a href="raw2planar.html">Raw 2 planar viewer</a>
 28 |       <a href="rgbcolors.html">RGB Colors</a>
 29 |       <a href="sqrt.html">Square root tables</a>
 30 |       <a href="deltas.html">Deltas table calculator</a>
 31 |       <a href="number_interpreter.html">Number interpreter</a>
 32 |       <a href="rawdiff.html">Raw diff</a>
 33 | 	</div>
 34 | 	<h2>Copperlist translator</h2>
 35 |     <div id="content" style="padding:25px">
 36 |         
 37 |         <label for="rawcop">Paste your coplist below:</label>
 38 |         <br>
 39 | 
 40 |         <div id="rawcop" contenteditable="false" style="
 41 |         float: left;
 42 |         width: 40%;
 43 |         border: solid 3px;
 44 |         background: white;
 45 |         border-color: black;
 46 |         white-space: pre-wrap;
 47 |         text-align: left;
 48 |         padding: 10px;
 49 |     "><code id="codetxt" contenteditable="true">
 50 | 000BEF50 0001 FFFF 0120 0000 0122 0770 0124 000B  ..... ...".p.$..
 51 | 000BEF60 0126 EC50 0128 000B 012A EC98 012C 000B  .&.P.(...*...,..
 52 | 000BEF70 012E ECE0 0130 000B 0132 ED28 0134 000B  .....0...2.(.4..
 53 | 000BEF80 0136 EDB0 0138 0000 013A 0770 013C 0000  .6...8...:.p.<..
 54 | 000BEF90 013E 0770 2BC7 FFFE 0094 00D0 0092 0030  .>.p+..........0
 55 | 000BEFA0 0108 0116 010A 0116 0102 0044 00E0 0006  ...........D....
 56 | 000BEFB0 00E2 4536 00E4 0006 00E6 1D36 00E8 0005  ..E6.......6....
 57 | 000BEFC0 00EA F536 00EC 0005 00EE CD36 00F0 0005  ...6.......6....
 58 | 000BEFD0 00F2 A536 4BC7 FFFE 0094 00D0 0092 0030  ...6K..........0
 59 | 000BEFE0 0108 0116 010A 0116 0102 0088 00E0 000A  ................
 60 | 000BEFF0 00E2 CD34 00E4 0009 00E6 B534 00E8 0008  ...4.......4....
 61 | 000BF000 00EA 9D34 00EC 0007 00EE 8534 00F0 0006  ...4.......4....
 62 | 000BF010 00F2 6D34 4C01 FFFE 0182 0FD8 0184 0FB7  ..m4L...........
 63 | 000BF020 0186 0F96 0188 0F74 018A 0F07 018C 0B43  .......t.......C
 64 | 000BF030 018E 0056 0190 0234 0192 0500 0194 0005  ...V...4........
 65 | 000BF040 0196 0001 0198 0FE9 019A 0111 019C 0644  ...............D
 66 | 000BF050 019E 0C11 FFDF FFFE 2C01 FFFE 0182 0888  ........,.......
 67 | 000BF060 0184 0800 0186 0008 FFFF FFFE</code>
 68 |     </div>
 69 | 		<p><input type=button value=Convert id=convert>
 70 |     </div>
 71 |     
 72 |     <div id="coppernavigator">
 73 | 		<ul id="fontulnavigator">
 74 | 		</ul>
 75 | 	</div>
 76 | 
 77 | 	<script>
 78 | 
 79 |         var commentArray = [];
 80 |         var copTxt;
 81 | 
 82 |         document.getElementById('convert').addEventListener('click',parseCop, false);
 83 |         document.getElementById('convert').addEventListener('click',updateResults, false);
 84 |         function parseCop()
 85 |         {
 86 |             commentArray=[];
 87 |             // var copTxt = document.getElementById("rawcop").value;
 88 |             copTxt = document.getElementById("codetxt").innerHTML;
 89 | 
 90 |             //console.log(copTxt);
 91 | 
 92 |             //let words = copTxt.match(/ [0-9a-fA-F][0-9a-fA-F][0-9a-fA-F][0-9a-fA-F]/gm);
 93 | 
 94 |             var regexp = /[ >][0-9a-fA-F][0-9a-fA-F][0-9a-fA-F][0-9a-fA-F]/gm;
 95 | 
 96 |             words = [];
 97 |             wordsIndexes = [];
 98 | 
 99 |             while (match = regexp.exec(copTxt))
100 |             {
101 |                 words.push(match[0]);
102 |                 wordsIndexes.push(match.index);
103 |                /* console.log("aaaa"+match);
104 |                 console.log("aaaa"+match.index);*/
105 |             }
106 | 
107 |             console.log(words.length);
108 | 
109 |             words.forEach( function (word,index) {
110 |                 if (index % 2 ) return ; // Count only pair (one copper instruction at time)
111 | 
112 |                 var comment = {};
113 |                 
114 |                 /*var firstWord = parseInt(word.substring(1,3),16);
115 |                 var secondWord = parseInt(word.substring(4,7),16);*/
116 | 
117 |                 // Strip first character (a space)
118 |                 word = word.substring(1);
119 |                 secondword = words[index+1].substring(1);
120 | 
121 |                 comment.firstWord = word;
122 |                 comment.secondWord = secondword;
123 |                 comment.index = wordsIndexes[index];
124 | 
125 |                 var instructionBinary = new Uint8Array(2);
126 |                 instructionBinary.set([parseInt(word.substring(0,2),16),parseInt(word.substring(2,4),16)],0);
127 |                 var secondInstructionBinary = new Uint8Array(2);
128 |                 secondInstructionBinary.set([parseInt(secondword.substring(0,2),16),parseInt(secondword.substring(2,4),16)],0);
129 |                 
130 |                 //var secondWordBinary = new Uint8Array(4);
131 |                 //instructionBinary.set([parseInt(word.substring(1,2),16),parseInt(word.substring(2,3),16),parseInt(word.substring(3,4),16),parseInt(word.substring(4,5),16)],0);
132 |                 //secondWordBinary.set([parseInt(words[index+1].substring(1,2),16),parseInt(words[index+1].substring(2,3),16),parseInt(words[index+1].substring(3,4),16),parseInt(words[index+1].substring(4,5),16)],0);
133 |                 //secondWordBinary.set([parseInt(word.substring(3,4),16),parseInt(word.substring(4,5),16)],0);
134 |                 //console.log("first word: "+instructionBinary);
135 | 
136 |                 // Check if wait OR skip
137 |                 if (instructionBinary[1]&0b00000001)
138 |                 {
139 |                     if (secondInstructionBinary[1]&0b00000001)
140 |                         comment.instructionType = "SKIP";
141 |                     else
142 |                         comment.instructionType = "WAIT";
143 |                     //console.log("Bit 0 set to 1");
144 |                     console.log("First word: "+word);
145 |                     //console.log("Second word: "+words[index+1]);
146 |                     console.log("first word binary: "+instructionBinary);
147 |                     //console.log("second word binary: "+secondWordBinary);
148 |                     
149 | 
150 |                     comment.HP =    
151 |                                 instructionBinary[1]&0b00000010 | // bit 1
152 |                                 instructionBinary[1]&0b00000100 | // bit 2
153 |                                 instructionBinary[1]&0b00001000 | // bit 1
154 |                                 instructionBinary[1]&0b00010000 | // bit 4
155 |                                 instructionBinary[1]&0b00100000 | // bit 5
156 |                                 instructionBinary[1]&0b01000000 | // bit 6
157 |                                 instructionBinary[1]&0b10000000 ; // bit 7
158 |                     
159 |                     comment.HP=comment.HP>>1;
160 | 
161 |                     comment.VP = instructionBinary[0];   
162 | 
163 |                     /*console.log("HP: "+comment.HP);
164 |                     console.log("VP: "+comment.VP);*/
165 | 
166 |                     console.log("second word:"+secondword);
167 |                     comment.HE =
168 |                                 secondInstructionBinary[1]&0b00000010 | // bit 1
169 |                                 secondInstructionBinary[1]&0b00000100 | // bit 2
170 |                                 secondInstructionBinary[1]&0b00001000 | // bit 1
171 |                                 secondInstructionBinary[1]&0b00010000 | // bit 4
172 |                                 secondInstructionBinary[1]&0b00100000 | // bit 5
173 |                                 secondInstructionBinary[1]&0b01000000 | // bit 6
174 |                                 secondInstructionBinary[1]&0b10000000 ; // bit 7
175 |                     
176 |                     comment.HP=comment.HP>>1;
177 |                     comment.VE = secondInstructionBinary[0]&0b01111111;
178 | 
179 |                     comment.VPMasked = comment.VP&comment.VE;
180 |                     comment.HPMasked = comment.HP&(comment.HE<<1);
181 | 
182 |                     /*console.log("HE: "+comment.HE);
183 |                     console.log("VE: "+comment.VE);*/
184 | 
185 |                     if (comment.HP==63&&comment.VP==255&&comment.HE==254&&comment.VE==127)
186 |                         comment.description="End of copperlist (waits for impossible location)";
187 |                     else
188 |                     {
189 |                         if (comment.instructionType == "SKIP")
190 |                             comment.description="Skips next instruction if the ray position is equal OR MORE THAN VPos "+comment.VPMasked+" and HPos "+comment.HPMasked;
191 |                         else
192 |                             comment.description="Wait for the ray position to be equal OR MORE THAN VPos "+comment.VPMasked+" and HPos "+comment.HPMasked;
193 |                     }
194 | 
195 |                     commentArray.push(comment);
196 |                 }
197 |                 // Move instruction
198 |                 else
199 |                 {
200 |                     comment.instructionType = "MOVE"
201 |                     for (var i = 0, len = AMIGAREGISTERS.length,registerDescription=""; i < len; i++) {
202 |                         if (AMIGAREGISTERS[i].address==="DFF"+word.substr(1))
203 |                         {
204 |                             registerDescription = AMIGAREGISTERS[i].description;
205 |                             registerName = AMIGAREGISTERS[i].name;
206 |                         }
207 |                     }
208 |                     comment.description="Move (copies) bytes "+secondword+ " to $DFF"+word.substr(1);
209 |                     if (registerDescription.length>0) comment.description+=" - ("+registerName+") -"+registerDescription;
210 |                     commentArray.push(comment);
211 |                 }                    
212 |             });
213 | 
214 |         }
215 | 
216 |         function updateResults()
217 |         {
218 |             //console.log("Lancio updateresults");
219 |             document.getElementById("fontulnavigator").innerHTML = "";
220 | 
221 |             commentArray.forEach( function (comment,index) 
222 |             {
223 |                 /*     if (index % 2 ) return ; // Count only pair (one copper instruction at time)*/
224 |                 console.log(comment);
225 |                 var li = document.createElement("li");
226 |                 li.addEventListener("click",clickOnCopperInstruction);
227 |                 li.setAttribute("id", "comment"+index);
228 |                 li.setAttribute("index", comment.index);
229 | 
230 |                 li.setAttribute("class", comment.instructionType);
231 | 
232 |                 var p = document.createElement("p");
233 |                 var oTxt = document.createTextNode(comment.firstWord+" "+comment.secondWord+" - Instruction: "+comment.instructionType);
234 |                 p.appendChild(oTxt);
235 |                 li.appendChild(p);
236 | 
237 |                 var p = document.createElement("p");
238 |                 var oTxt = document.createTextNode(comment.description);
239 |                 p.appendChild(oTxt);
240 |                 li.appendChild(p);
241 | 
242 |                 if (comment.instructionType=='SKIP' || comment.instructionType=='WAIT')
243 |                 {
244 |                     p = document.createElement("p");
245 |                     oTxt = document.createTextNode("HP: "+comment.HP+" VP: "+comment.VP+" HE: "+comment.HE+" VE: "+comment.VE);
246 |                     p.appendChild(oTxt);
247 |                     li.appendChild(p);         
248 |                     
249 |                 }
250 |                 document.getElementById('fontulnavigator').appendChild(li);
251 |             });
252 | 
253 |             var text = document.getElementById("rawcop").value;
254 |             //document.getElementById("rawcop").value = text.replace("FFFF","<mark>FFFF</mark>");
255 |         }
256 |         function clickOnCopperInstruction()
257 |         {
258 |             //console.log(this.getAttribute("index"));
259 |             var index = 1+this.getAttribute("index")*1;
260 |             var stringToReplace = copTxt.substring(index,index+9);
261 |             stringReplacement="<MARK>"+stringToReplace+"</MARK>";
262 | 
263 |             var newTxt = copTxt.replace(stringToReplace,stringReplacement);
264 |             //console.log(newTxt);
265 |             document.getElementById("codetxt").innerHTML=newTxt;
266 |         }
267 |     </script>
268 |   </body>
269 | </html>  
270 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE HTML>
  2 | <html>
  3 |   <head>
  4 |     <link rel="stylesheet" type="text/css" href="css/AmigaFontEditor.css">
  5 | 	<script src="js/AmigaFontEditor.js"></script>
  6 | 	<script src="js/UPNG.js"></script>
  7 | 	<script src="js/pako.js"></script>
  8 |   </head>
  9 |   <body>
 10 | 	<a href="https://github.com/Ozzyboshi/AmigaFontEditor"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/652c5b9acfaddf3a9c326fa6bde407b87f7be0f4/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6f72616e67655f6666373630302e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_orange_ff7600.png"></a>
 11 | 	<div class="topnav">
 12 | 	  <a class="active" href="index.html">Fonts</a>
 13 | 	  <a href="index_sprite.html">Sprite</a>
 14 | 	  <a href="index_sprite_position.html">Sprite position</a>
 15 | 	  <a  href="register_conversion.html">Register conversion</a>
 16 | 	  <a  href="copperlist_translator.html">Copperlist translator</a>
 17 | 	  <a  href="diwstartstop.html">Diwstart/stop</a>
 18 | 	  <a  href="projection.html">Point Projection</a>
 19 | 	  <a  href="trigonometry.html">Trigonometric tables</a>
 20 | 	  <a href="raw2planar.html">Raw 2 planar viewer</a>
 21 | 	  <a href="rgbcolors.html">RGB Colors</a>
 22 | 	  <a href="sqrt.html">Square root tables</a>
 23 | 	  <a href="deltas.html">Deltas table calculator</a>
 24 | 	  <a href="number_interpreter.html">Number interpreter</a>
 25 | 	  <a href="rawdiff.html">Raw diff</a>
 26 | 
 27 | 	</div>
 28 | 	<div id="content" style="padding:25px">
 29 | 		<h2>Amiga font editor</h2>
 30 | 		<h4>Draw your fonts on the left grids and get the binary raw data to load into the Amiga copperlist</h4>
 31 | 		<div id="fontnavigator">
 32 | 			<ul id="fontulnavigator">
 33 | 			</ul>
 34 | 		</div>
 35 | 		<div id="colorpalette">
 36 | 			<input type="file" id="fileChooser" style="display:none;">
 37 | 			<input id="nbitplanes" type="range" min="1" max="5" step="1"/><a id="bitplaneslabel">Bitplanes :5</a>
 38 | 			<ul id="colorslist">
 39 | 				<li idcolor="0"><input type=color id="color0" value="#EEE8AA">Color 00</li>
 40 | 				<li idcolor="1"><input type=color id="color1" value="#ff0000">Color 01</li>
 41 | 				<li idcolor="2"><input type=color id="color2" value="#00ff00">Color 02</li>
 42 | 				<li idcolor="3"><input type=color id="color3" value="#0000ff">Color 03</li>
 43 | 				<li idcolor="4"><input type=color id="color4" value="#000000">Color 04</li>
 44 | 				<li idcolor="5"><input type=color id="color5" value="#ff00ff">Color 05</li>
 45 | 				<li idcolor="6"><input type=color id="color6" value="#ff00ff">Color 06</li>
 46 | 				<li idcolor="7"><input type=color id="color7" value="#ff00ff">Color 07</li>
 47 | 				<li idcolor="8"><input type=color id="color8" value="#ff00ff">Color 08</li>
 48 | 				<li idcolor="9"><input type=color id="color9" value="#ff00ff">Color 09</li>
 49 | 				<li idcolor="10"><input type=color id="color10" value="#ff00ff">Color 10</li>
 50 | 				<li idcolor="11"><input type=color id="color11" value="#ff00ff">Color 11</li>
 51 | 				<li idcolor="12"><input type=color id="color12" value="#ff00ff">Color 12</li>
 52 | 				<li idcolor="13"><input type=color id="color13" value="#ff00ff">Color 13</li>
 53 | 				<li idcolor="14"><input type=color id="color14" value="#ff00ff">Color 14</li>
 54 | 				<li idcolor="15"><input type=color id="color15" value="#ff00ff">Color 15</li>
 55 | 				<li idcolor="16"><input type=color id="color16" value="#ff00ff">Color 16</li>
 56 | 				<li idcolor="17"><input type=color id="color17" value="#ff00ff">Color 17</li>
 57 | 				<li idcolor="18"><input type=color id="color18" value="#ff00ff">Color 18</li>
 58 | 				<li idcolor="19"><input type=color id="color19" value="#ff00ff">Color 19</li>
 59 | 				<li idcolor="20"><input type=color id="color20" value="#ff00ff">Color 20</li>
 60 | 				<li idcolor="21"><input type=color id="color21" value="#ff00ff">Color 21</li>
 61 | 				<li idcolor="22"><input type=color id="color22" value="#ff00ff">Color 22</li>
 62 | 				<li idcolor="23"><input type=color id="color23" value="#ff00ff">Color 23</li>
 63 | 				<li idcolor="24"><input type=color id="color24" value="#ff00ff">Color 24</li>
 64 | 				<li idcolor="25"><input type=color id="color25" value="#ff00ff">Color 25</li>
 65 | 				<li idcolor="26"><input type=color id="color26" value="#ff00ff">Color 26</li>
 66 | 				<li idcolor="27"><input type=color id="color27" value="#ff00ff">Color 27</li>
 67 | 				<li idcolor="28"><input type=color id="color28" value="#ff00ff">Color 28</li>
 68 | 				<li idcolor="29"><input type=color id="color29" value="#ff00ff">Color 29</li>
 69 | 				<li idcolor="30"><input type=color id="color30" value="#ff00ff">Color 30</li>
 70 | 				<li idcolor="31	"><input type=color id="color31" value="#ff00ff">Color 31</li>
 71 | 			</ul>
 72 | 			<input id="xres" type="range" min="8" max="32" step="8"/><a id="xreslabel">X resolution :8</a>
 73 | 			<input id="yres" type="range" min="8" max="32" step="1"/><a id="yreslabel">Y resolution :8</a>
 74 | 		</div>
 75 | 		<div id=result>
 76 | 			<div id="buttondiv">
 77 | 				<input type=button id=showbin value="Show Binary" />
 78 | 				<input type=button id=showhex value="Show Hex" />
 79 | 				<input type="button" value="Amiga colors code" id="amigacolorscode" />
 80 | 			</div>
 81 | 			<textarea id="resultpre"></textarea>
 82 | 			<input type=button id=copyresult value="Copy to Clipboard" />
 83 | 			<input type=button id=calculate value="Generate Raw File" />
 84 | 			<input type="button" value="Import From Raw File" onclick="document.getElementById('fileChooser').click();" />
 85 | 		</div>
 86 | 		<ul id="fonttable"></ul>
 87 | 	</div>
 88 |     <script>
 89 | 	var NBITPLANES=4; // The program starts with 2 bitplanes
 90 | 	var NUMPALETTECOLORS=32; // Amiga internal registers manage up to 32 colors from DFF180 (color 00 to DFF1BE color 31)
 91 | 	var SQUARE_PIXELS = 10; // Pixel needed to draw a square
 92 | 	var PIXEL_RESOLUTION=[32,25];
 93 | 
 94 | 	  // set default xres-yres in sliders
 95 | 	  document.getElementById('xres').value=PIXEL_RESOLUTION[0];
 96 | 	  document.getElementById('yres').value=PIXEL_RESOLUTION[1];
 97 | 	  document.getElementById('xreslabel').innerHTML='X Resolution :'+PIXEL_RESOLUTION[0];
 98 | 	  document.getElementById('yreslabel').innerHTML='Y Resolution :'+PIXEL_RESOLUTION[1];
 99 | 	  
100 | 	  // Handle xres change
101 | 	  document.getElementById('xres').addEventListener('change',handleChangeXres,false);
102 | 	  function handleChangeXres(event)
103 | 	  {
104 | 	  	document.getElementById('xreslabel').innerHTML='X Resolution :'+this.value;
105 | 	  	table.changeFontXRes(parseInt(this.value));
106 | 	  }
107 | 
108 | 	  // Handle yres change
109 | 	  document.getElementById('yres').addEventListener('change',handleChangeYres,false);
110 | 	  function handleChangeYres(event)
111 | 	  {
112 | 	  	document.getElementById('yreslabel').innerHTML='Y Resolution :'+this.value;
113 | 	  	table.changeFontYRes(parseInt(this.value));
114 | 	  }
115 | 
116 | 	  // Set default bitplanes in slider
117 | 	  document.getElementById('nbitplanes').value=NBITPLANES;
118 | 	  document.getElementById('bitplaneslabel').innerHTML='Bitplanes :'+NBITPLANES;
119 | 	  for (i=0;i<NUMPALETTECOLORS;i++)
120 | 	  {
121 | 	  	var liColor=document.querySelectorAll("#colorslist > li")[i];
122 | 	  	if (i<Math.pow(2,NBITPLANES))
123 | 	  		liColor.style = "display: show";
124 | 	  	else
125 | 	  		liColor.style = "display: none";
126 | 	  }
127 | 	  
128 | 	  // Manage slider for changing bitplane numbers
129 | 	  document.getElementById('nbitplanes').addEventListener('change',handleChangeBitplaneNumber,false);
130 | 	  function handleChangeBitplaneNumber(event)
131 | 	  {
132 | 	  	palette.changeBitplanes(this.value*1);
133 | 	  	
134 | 	  	// Hide out of range palettes
135 | 	  	for (i=0;i<NUMPALETTECOLORS;i++)
136 | 	  	{
137 | 	  		var liColor=document.querySelectorAll("#colorslist > li")[i];
138 | 	  		if (i<Math.pow(2,this.value*1))
139 | 	  			liColor.style = "display: show";
140 | 	  		else
141 | 	  			liColor.style = "display: none";
142 | 	  		var colorObj=document.querySelectorAll("#colorslist > li > input[type=color]")[i];
143 | 	  		palette.addFont24BitHexColorAtPos(colorObj.value,i);
144 | 
145 | 	  	}
146 | 
147 | 	  	//Bitplane label update
148 | 	  	document.getElementById('bitplaneslabel').innerHTML='Bitplanes :'+this.value;
149 | 
150 | 	  	table.updatePalette(palette);
151 | 	  	palette.setFgColorIndex(1);
152 | 	  	palette.setBgColorIndex(0);
153 | 	  }
154 | 
155 | 	  // Manage palette change color
156 | 	  var palette = new FontColorsTable(NBITPLANES);
157 | 
158 | 	  for (i=0;i<NUMPALETTECOLORS;i++)
159 | 	  {
160 | 	  	var colorObj=document.querySelectorAll("#colorslist > li > input[type=color]")[i];
161 | 	  	palette.addFont24BitHexColor(colorObj.value);
162 | 
163 | 	  	colorObj.addEventListener('input',handleChangePaletteColor, false);
164 | 	  }
165 | 	  palette.setFgColorIndex(1);
166 | 	  palette.setBgColorIndex(0);
167 | 
168 | 	  function handleChangePaletteColor(event) {
169 | 	  	palette.changeColor(parseInt(this.parentNode.getAttribute('idcolor')),this.value);
170 | 	  	table.updateColor(parseInt(this.parentNode.getAttribute('idcolor')),this.value);
171 | 	  }
172 | 
173 | 	  // Manage color selection and palette creation
174 | 	  for (i=0;i<NUMPALETTECOLORS;i++)
175 | 	  {
176 | 	  	var fontLiObj=document.querySelectorAll("#colorslist > li")[i];
177 | 	  	fontLiObj.addEventListener('click',handleChangeColor, false);
178 | 	  }
179 | 	  function handleChangeColor(event) { 
180 | 	  for (i=0;i<NUMPALETTECOLORS;i++)
181 | 	  {
182 | 	  	document.querySelectorAll("#colorslist > li")[i].style.background='#9e9e9e';
183 | 	  }
184 | 	  palette.setFgColorIndex(this.getAttribute('idcolor'));
185 | 	  this.style.backgroundColor  = 'red';
186 | 
187 | 	}
188 | 
189 | 	//Create fonts table for characters from ascii 32 to 127
190 | 	var charset = [];
191 | 	for (var i = 32; i < 127; i++) charset.push(i);
192 | 	var table=createFontTable(charset,palette,{x:PIXEL_RESOLUTION[0],y: PIXEL_RESOLUTION[1]});
193 | 	table.createList(document.getElementById("fonttable"));
194 | 	table.appendListToUl(document.getElementById('fontnavigator'));
195 | 
196 | 	// Set change palette callback to update gui if palette changes
197 | 	table.setChangePaletteCallback(
198 | 		function (paletteArray) {
199 | 			for (var i=0;i<paletteArray.length;i++)
200 | 			{
201 | 				document.querySelectorAll("#colorslist > li > input[type=color]")[i].value=paletteArray[i];
202 | 				palette.setBgColorIndex(0);
203 | 				palette.setFgColorIndex(i);
204 | 				palette.changeColor(i,paletteArray[i]);
205 | 				table.updateColor(i,paletteArray[i]);
206 | 			}
207 | 		}
208 | 	);
209 | 
210 | 	// Handle file export click
211 | 	var calculate = document.getElementById('calculate');
212 | 	calculate.onclick = function() {
213 | 		var binaryData=table.getBinaryData(palette.nBitplanes);
214 | 		//console.log(binaryData);
215 | 		var fileName = prompt("Please enter the name of your export file", "Myfonts.fnt");
216 | 		if (fileName)
217 | 			saveByteArray([binaryData], fileName);
218 | 	};
219 | 
220 | 	var saveByteArray = (function () {
221 | 		var a = document.createElement("a");
222 | 		document.body.appendChild(a);
223 | 		a.style = "display: none";
224 | 		return function (data, name) {
225 | 		    var blob = new Blob(data, {type: "octet/stream"}),
226 | 		    url = window.URL.createObjectURL(blob);
227 | 		    a.href = url;
228 | 		    a.download = name;
229 | 		    a.click();
230 | 		    window.URL.revokeObjectURL(url);
231 | 		};
232 | 	}());
233 | 
234 | 	// Handle click on SHOWBINARYSTRING button
235 | 	var showbin=document.getElementById('showbin');
236 | 	showbin.onclick = function() {
237 | 		var formattedBinary=chunk(table.getBinaryDataString(palette.nBitplanes),8).join(' ');
238 | 		formattedBinary=chunk(formattedBinary, 72).join('\n');
239 | 		document.getElementById("resultpre").innerHTML = formattedBinary;
240 | 	};
241 | 
242 | 	// Handle click on SHOWEXSTRING button
243 | 	var showhex=document.getElementById('showhex');
244 | 	showhex.onclick = function() {
245 | 		var formattedHex=chunk(table.getHexDataString(palette.nBitplanes), 2).join(' ');
246 | 		var formattedHex=chunk(formattedHex, 24).join('\n');
247 | 		document.getElementById("resultpre").innerHTML = formattedHex;
248 | 		return ;
249 | 	};
250 | 
251 | 	function chunk(str, n) {
252 | 		var ret = [];
253 | 		var i;
254 | 		var len;
255 | 
256 | 		for(i = 0, len = str.length; i < len; i += n) {
257 | 		   ret.push(str.substr(i, n))
258 | 		}
259 | 
260 | 		return ret
261 |    	};
262 | 
263 | 	document.querySelector("#fileChooser").addEventListener('change',filesChosen, false);
264 | 	function filesChosen(evt){
265 | 		var chosenFile = evt.target.files[0]; //get the first file in the FileList
266 | 		var fileName = chosenFile.name; //the name of the file as a string
267 | 		var fileSize = chosenFile.size; //the size of the file in bytes, as an integer
268 | 		var fileModifiedDate = chosenFile.lastModifiedDate; //a Date object
269 | 		//console.log(chosenFile);
270 | 		reader = new FileReader();
271 | 		//reader.addEventListener("load", readFile, false);
272 | 		reader.readAsArrayBuffer(document.querySelector("#fileChooser").files[0]);
273 | 		reader.onloadend = function () {
274 | 			var module=0;
275 | 			if (palette.nBitplanes==1) module=parseInt(prompt("Please enter the module for interleaved images (0 not to use it)", "0"));
276 | 			table.drawRawData(new Uint8Array(reader.result),palette.nBitplanes,module);
277 | 			alert('File loaded succesfully');
278 | 			document.getElementById('fileChooser').value = null;
279 | 			return ;
280 | 		}
281 | 	}
282 | 
283 | 	// Handle show amiga colors button click
284 | 	document.querySelector("#amigacolorscode").addEventListener('click',showAmigaColors, false);
285 | 	function showAmigaColors(evt) {
286 | 		document.getElementById("resultpre").innerHTML = '';
287 | 		for (var i=0,startReg=384;i<palette.getTableSize();startReg+=2,i++)
288 | 		{
289 | 			var font=palette.getFontColorById(i);	
290 | 			document.getElementById("resultpre").innerHTML += 'dc.w    $'+startReg.toString(16)+',$'+font.amigaR+font.amigaG+font.amigaB+'    ; color'+i+'\n';
291 | 		}
292 | 	}
293 | 
294 | 	document.querySelector("#copyresult").addEventListener('click',copyToClipboard,false);
295 | 	function copyToClipboard()
296 | 	{
297 | 		var ta = document.getElementById('resultpre');
298 | 		ta.focus();
299 | 		ta.select();
300 | 	}
301 |     </script>
302 |   </body>
303 | </html>  
304 | 


--------------------------------------------------------------------------------
/rgbcolors.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE HTML>
  2 | <html>
  3 |   <head>
  4 |     <link rel="stylesheet" type="text/css" href="css/AmigaFontEditor.css">
  5 | 	<script src="js/AmigaFontEditor.js"></script>
  6 | 	<script src="js/UPNG.js"></script>
  7 | 	<script src="js/pako.js"></script>
  8 |   </head>
  9 |   <body>
 10 | 	<a href="https://github.com/Ozzyboshi/AmigaFontEditor"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/652c5b9acfaddf3a9c326fa6bde407b87f7be0f4/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6f72616e67655f6666373630302e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_orange_ff7600.png"></a>
 11 | 	<div class="topnav">
 12 | 	  <a href="index.html">Fonts</a>
 13 | 	  <a href="index_sprite.html">Sprite</a>
 14 | 	  <a href="index_sprite_position.html">Sprite position</a>
 15 | 	  <a  href="register_conversion.html">Register conversion</a>
 16 | 	  <a  href="copperlist_translator.html">Copperlist translator</a>
 17 | 	  <a  href="diwstartstop.html">Diwstart/stop</a>
 18 | 	  <a  href="projection.html">Point Projection</a>
 19 | 	  <a  href="trigonometry.html">Trigonometric tables</a>
 20 | 	  <a href="raw2planar.html">Raw 2 planar viewer</a>
 21 |       <a class="active" href="#">RGB colors</a>
 22 | 	  <a href="sqrt.html">Square root tables</a>
 23 | 	  <a href="deltas.html">Deltas table calculator</a>
 24 | 	  <a href="number_interpreter.html">Number interpreter</a>
 25 | 	  <a href="rawdiff.html">Raw diff</a>
 26 | 	</div>
 27 | 
 28 | 	<div id="content" style="padding:25px">
 29 | 		<h2>Rgb Color handling</h2>
 30 | 		<h4>Select a color and try to darken/lighten it according to a percentage</h4>
 31 | 		<div id="fontnavigator" style="display:none;">
 32 | 			<ul id="fontulnavigator" style="display:none;">
 33 | 			</ul>
 34 | 		</div>
 35 | 		<div id="colorpalette" style="position:fixed; left:100px; float:left; top:160px; width:435px; left:40px;">	
 36 | 			<input id="darken_factor" type="range" min="0" max="100" step="1" value=0 /><a id="darken_factor_anchor">Darken factor :0</a>
 37 | 			<br><input id="tint_factor" type="range" min="0" max="100" step="1" value=0 /><a id="tint_factor_anchor">Tint factor :0</a>
 38 | 			<ul id="colorslist">
 39 | 				<li idcolor="0"><input type=color id="color0" value="#EEE8AA">Color 00 <input type="button" id="rgb0" class="inpputrgb" value="RGB"></li>
 40 | 				<li idcolor="1"><input type=color id="color1" value="#ff0000">Color 01 <input type="button" id="rgb1" class="inpputrgb" value="RGB"></li>
 41 | 				<li idcolor="2"><input type=color id="color2" value="#00ff00">Color 02 <input type="button" id="rgb2" class="inpputrgb" value="RGB"></li>
 42 | 				<li idcolor="3"><input type=color id="color3" value="#0000ff">Color 03 <input type="button" id="rgb3" class="inpputrgb" value="RGB"></li>
 43 | 				<li idcolor="4"><input type=color id="color4" value="#000000">Color 04 <input type="button" id="rgb4" class="inpputrgb" value="RGB"></li>
 44 | 				<li idcolor="5"><input type=color id="color5" value="#ff00ff">Color 05 <input type="button" id="rgb5" class="inpputrgb" value="RGB"></li>
 45 | 				<li idcolor="6"><input type=color id="color6" value="#ff00ff">Color 06 <input type="button" id="rgb6" class="inpputrgb" value="RGB"></li>
 46 | 				<li idcolor="7"><input type=color id="color7" value="#ff00ff">Color 07 <input type="button" id="rgb7" class="inpputrgb" value="RGB"></li>
 47 | 				<li idcolor="8"><input type=color id="color8" value="#ff00ff">Color 08 <input type="button" id="rgb8" class="inpputrgb" value="RGB"></li>
 48 | 				<li idcolor="9"><input type=color id="color9" value="#ff00ff">Color 09 <input type="button" id="rgb9" class="inpputrgb" value="RGB"></li>
 49 | 				<li idcolor="10"><input type=color id="color10" value="#ff00ff">Color 10 <input type="button" id="rgb10" class="inpputrgb" value="RGB"></li>
 50 | 				<li idcolor="11"><input type=color id="color11" value="#ff00ff">Color 11 <input type="button" id="rgb11" class="inpputrgb" value="RGB"></li>
 51 | 				<li idcolor="12"><input type=color id="color12" value="#ff00ff">Color 12 <input type="button" id="rgb12" class="inpputrgb" value="RGB"></li>
 52 | 				<li idcolor="13"><input type=color id="color13" value="#ff00ff">Color 13 <input type="button" id="rgb13" class="inpputrgb" value="RGB"></li>
 53 | 				<li idcolor="14"><input type=color id="color14" value="#ff00ff">Color 14 <input type="button" id="rgb14" class="inpputrgb" value="RGB"></li>
 54 | 				<li idcolor="15"><input type=color id="color15" value="#ff00ff">Color 15 <input type="button" id="rgb15" class="inpputrgb" value="RGB"></li>
 55 |                 <li idcolor="16"><input type=color id="color16" value="#ff00ff">Color 16 <input type="button" id="rgb16" class="inpputrgb" value="RGB"></li>
 56 |                 <li idcolor="17"><input type=color id="color17" value="#ff00ff">Color 17 <input type="button" id="rgb17" class="inpputrgb" value="RGB"></li>
 57 |                 <li idcolor="18"><input type=color id="color18" value="#ff00ff">Color 18 <input type="button" id="rgb18" class="inpputrgb" value="RGB"></li>
 58 |                 <li idcolor="19"><input type=color id="color19" value="#ff00ff">Color 19 <input type="button" id="rgb19" class="inpputrgb" value="RGB"></li>
 59 |                 <li idcolor="20"><input type=color id="color20" value="#ff00ff">Color 20 <input type="button" id="rgb20" class="inpputrgb" value="RGB"></li>
 60 |                 <li idcolor="21"><input type=color id="color21" value="#ff00ff">Color 21 <input type="button" id="rgb21" class="inpputrgb" value="RGB"></li>
 61 |                 <li idcolor="22"><input type=color id="color22" value="#ff00ff">Color 22 <input type="button" id="rgb22" class="inpputrgb" value="RGB"></li>
 62 |                 <li idcolor="23"><input type=color id="color23" value="#ff00ff">Color 23 <input type="button" id="rgb23" class="inpputrgb" value="RGB"></li>
 63 |                 <li idcolor="24"><input type=color id="color24" value="#ff00ff">Color 24 <input type="button" id="rgb24" class="inpputrgb" value="RGB"></li>
 64 |                 <li idcolor="25"><input type=color id="color25" value="#ff00ff">Color 25 <input type="button" id="rgb25" class="inpputrgb" value="RGB"></li>
 65 |                 <li idcolor="26"><input type=color id="color26" value="#ff00ff">Color 26 <input type="button" id="rgb26" class="inpputrgb" value="RGB"></li>
 66 |                 <li idcolor="27"><input type=color id="color27" value="#ff00ff">Color 27 <input type="button" id="rgb27" class="inpputrgb" value="RGB"></li>
 67 |                 <li idcolor="28"><input type=color id="color28" value="#ff00ff">Color 28 <input type="button" id="rgb28" class="inpputrgb" value="RGB"></li>
 68 |                 <li idcolor="29"><input type=color id="color29" value="#ff00ff">Color 29 <input type="button" id="rgb29" class="inpputrgb" value="RGB"></li>
 69 |                 <li idcolor="30"><input type=color id="color30" value="#ff00ff">Color 30 <input type="button" id="rgb30" class="inpputrgb" value="RGB"></li>
 70 |                 <li idcolor="31"><input type=color id="color31" value="#ff00ff">Color 31 <input type="button" id="rgb31" class="inpputrgb" value="RGB"></li>
 71 | 
 72 | 			</ul>
 73 | 
 74 |             
 75 | 		</div>
 76 |         <div id="colorpalettenew" style="top:180px">	
 77 |             <ul id="colorslistnew">
 78 | 				<li idcolor="new0"><input type=color id="newcolor0" value="#EEE8AA">Color 00</li>
 79 | 				<li idcolor="new1"><input type=color id="newcolor1" value="#ff0000">Color 01</li>
 80 | 				<li idcolor="new2"><input type=color id="newcolor2" value="#00ff00">Color 02</li>
 81 | 				<li idcolor="new3"><input type=color id="newcolor3" value="#0000ff">Color 03</li>
 82 | 				<li idcolor="new4"><input type=color id="newcolor4" value="#000000">Color 04</li>
 83 | 				<li idcolor="new5"><input type=color id="newcolor5" value="#ff00ff">Color 05</li>
 84 | 				<li idcolor="new6"><input type=color id="newcolor6" value="#ff00ff">Color 06</li>
 85 | 				<li idcolor="new7"><input type=color id="newcolor7" value="#ff00ff">Color 07</li>
 86 | 				<li idcolor="new8"><input type=color id="newcolor8" value="#ff00ff">Color 08</li>
 87 | 				<li idcolor="new9"><input type=color id="newcolor9" value="#ff00ff">Color 09</li>
 88 | 				<li idcolor="new10"><input type=color id="newcolor10" value="#ff00ff">Color 10</li>
 89 | 				<li idcolor="new11"><input type=color id="newcolor11" value="#ff00ff">Color 11</li>
 90 | 				<li idcolor="new12"><input type=color id="newcolor12" value="#ff00ff">Color 12</li>
 91 | 				<li idcolor="new13"><input type=color id="newcolor13" value="#ff00ff">Color 13</li>
 92 | 				<li idcolor="new14"><input type=color id="newcolor14" value="#ff00ff">Color 14</li>
 93 | 				<li idcolor="new15"><input type=color id="newcolor15" value="#ff00ff">Color 15</li>
 94 |                 <li idcolor="new16"><input type=color id="newcolor16" value="#ff00ff">Color 16</li>
 95 |                 <li idcolor="new17"><input type=color id="newcolor17" value="#ff00ff">Color 17</li>
 96 |                 <li idcolor="new18"><input type=color id="newcolor18" value="#ff00ff">Color 18</li>
 97 |                 <li idcolor="new19"><input type=color id="newcolor19" value="#ff00ff">Color 19</li>
 98 |                 <li idcolor="new20"><input type=color id="newcolor20" value="#ff00ff">Color 20</li>
 99 |                 <li idcolor="new21"><input type=color id="newcolor21" value="#ff00ff">Color 21</li>
100 |                 <li idcolor="new22"><input type=color id="newcolor22" value="#ff00ff">Color 22</li>
101 |                 <li idcolor="new23"><input type=color id="newcolor23" value="#ff00ff">Color 23</li>
102 |                 <li idcolor="new24"><input type=color id="newcolor24" value="#ff00ff">Color 24</li>
103 |                 <li idcolor="new25"><input type=color id="newcolor25" value="#ff00ff">Color 25</li>
104 |                 <li idcolor="new26"><input type=color id="newcolor26" value="#ff00ff">Color 26</li>
105 |                 <li idcolor="new27"><input type=color id="newcolor27" value="#ff00ff">Color 27</li>
106 |                 <li idcolor="new28"><input type=color id="newcolor28" value="#ff00ff">Color 28</li>
107 |                 <li idcolor="new29"><input type=color id="newcolor29" value="#ff00ff">Color 29</li>
108 |                 <li idcolor="new30"><input type=color id="newcolor30" value="#ff00ff">Color 30</li>
109 |                 <li idcolor="new31"><input type=color id="newcolor31" value="#ff00ff">Color 31</li>
110 | 
111 | 			</ul>
112 |             </div>
113 | 		<div id=result>
114 | 			<div id="buttondiv">				
115 | 				<input type="button" value="Calculate" id="amigacolorscode" />
116 | 				<input type=button id=copyresult value="Copy to Clipboard" />
117 | 			</div>
118 | 			<textarea id="resultpre" style="overflow-y: auto;"></textarea>
119 | 		</div>
120 | 	</div>
121 |     <script>
122 | 
123 | 	var elements = document.getElementsByClassName("inpputrgb");
124 | 	for (var i = 0; i < elements.length; i++) {
125 |     	elements[i].addEventListener('click', inputRgb, false);
126 | 	}
127 | 	function inputRgb(evt) {
128 | 		var outelement = "color"+this.id.substring(3);
129 | 
130 | 		var argb = prompt("Enter Amiga RGB format color :", "$0FFF");
131 | 		if (argb[0] < '0' || argb[0] > '9')  argb = argb.substring(1);
132 | 		if (argb.length == 4) argb = argb.substring(1);
133 | 		if (argb.length != 3)
134 | 		{
135 | 			alert("Wrong format, must be amiga RGB format for example $0FFF");
136 | 			return;
137 | 		}
138 | 
139 | 		var newcolor="#"+argb[0]+argb[0]+argb[1]+argb[1]+argb[2]+argb[2];
140 | 		document.getElementById(outelement).value = newcolor;
141 | 	}
142 | 
143 | 	// Handle show amiga colors button click
144 | 	document.querySelector("#amigacolorscode").addEventListener('click',showAmigaColors, false);
145 | 	function showAmigaColors(evt) {
146 | 
147 | 		document.getElementById("resultpre").innerHTML = '';
148 | 
149 | 		for (var i = 0 ; i < 32; i++)
150 | 		{
151 | 			var color = document.getElementById("color"+i).value;
152 | 			console.log(color);
153 | 
154 | 			var red = color.substring(1,3);
155 | 			var green = color.substring(3,5);
156 | 			var blue = color.substring(5,7);
157 | 
158 | 			/*console.log("red:"+red);
159 | 			console.log("green:"+green);
160 | 			console.log("blue:"+blue);*/
161 | 
162 | 			red = Number("0x"+red);
163 | 			green = Number("0x"+green);
164 | 			blue = Number("0x"+blue);
165 | 
166 | 			/*console.log("red dec:"+red);
167 | 			console.log("green dec :"+green);
168 | 			console.log("blue dec:"+blue);*/
169 | 
170 | 			var factor = parseInt(document.getElementById("darken_factor").value) / 100;
171 | 
172 | 			var newred = Darken(red, factor);
173 | 			var newgreen = Darken(green, factor);
174 | 			var newblue = Darken(blue, factor);
175 | 
176 | 			/*console.log("newred:"+newred);
177 | 			console.log("newgreen:"+newgreen);
178 | 			console.log("newblue:"+newblue);*/
179 | 
180 | 			var factor = parseInt(document.getElementById("tint_factor").value) / 100;
181 | 			newred = Tint(newred, factor);
182 | 			newgreen = Tint(newgreen, factor);
183 | 			newblue = Tint(newblue, factor);
184 | 			
185 | 			/*console.log("newred:"+newred);
186 | 			console.log("newgreen:"+newgreen);
187 | 			console.log("newblue:"+newblue);*/
188 | 
189 | 			var oldcolor = '#'+red.toString(16).padStart(2,'0')+""+green.toString(16).padStart(2,'0')+""+blue.toString(16).padStart(2,'0');
190 | 			var newcolor = '#'+newred.toString(16).padStart(2,'0')+""+newgreen.toString(16).padStart(2,'0')+""+newblue.toString(16).padStart(2,'0');
191 | 			//console.log("Newcolor:"+newcolor);
192 | 
193 | 			document.getElementById("newcolor"+i).value = newcolor;
194 | 			document.getElementById("resultpre").innerHTML +="Color"+i+"_Original: $"+oldcolor[1]+oldcolor[3]+oldcolor[5]+"\nColor"+i+"_Modified: $"+newcolor[1]+newcolor[3]+newcolor[5]+"\n";
195 | 		}
196 | 	}
197 | 
198 | 	function Darken(color,factor)
199 | 	{
200 | 		return parseInt( color * ( 1 - factor));
201 | 	}
202 | 
203 | 	function Tint(color,factor)
204 | 	{
205 | 		return parseInt(color + ( 255 - color) * ( factor ));
206 | 	}
207 | 
208 | 	// Manage slider for changing darken factor
209 | 	document.getElementById('darken_factor').addEventListener('change',handleChangeDarkenFactor,false);
210 | 	function handleChangeDarkenFactor(event)
211 | 	{
212 | 		document.getElementById('darken_factor_anchor').innerHTML='Darken factor :'+this.value;
213 | 	}
214 | 
215 | 	// Manage slider for changing tint factor
216 | 	document.getElementById('tint_factor').addEventListener('change',handleChangeTintFactor,false);
217 | 	function handleChangeTintFactor(event)
218 | 	{
219 | 		document.getElementById('tint_factor_anchor').innerHTML='Tint factor :'+this.value;
220 | 	}
221 | 
222 | 	document.querySelector("#copyresult").addEventListener('click',copyToClipboard,false);
223 | 	function copyToClipboard()
224 | 	{
225 | 		var ta = document.getElementById('resultpre');
226 | 		ta.focus();
227 | 		ta.select();
228 | 	}
229 | 
230 |     </script>
231 |   </body>
232 | </html>
233 | 


--------------------------------------------------------------------------------
/index_sprite_position.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE HTML>
  2 | <html>
  3 |   <head>
  4 |     <link rel="stylesheet" type="text/css" href="css/AmigaFontEditor.css">
  5 | 	<script src="js/AmigaFontEditor.js"></script>
  6 | 	<script src="js/UPNG.js"></script>
  7 | 	<script src="js/pako.js"></script>
  8 | 	<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjs/4.2.2/math.min.js"></script>
  9 |   </head>
 10 |   <body>
 11 | 	<a href="https://github.com/Ozzyboshi/AmigaFontEditor"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/652c5b9acfaddf3a9c326fa6bde407b87f7be0f4/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6f72616e67655f6666373630302e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_orange_ff7600.png"></a>
 12 | 
 13 | 	<div class="topnav">
 14 | 	  <a href="index.html">Fonts</a>
 15 | 	  <a href="index_sprite.html">Sprite</a>
 16 | 	  <a class="active" href="#">Sprite position</a>
 17 | 	  <a  href="register_conversion.html">Register conversion</a>
 18 | 	  <a  href="copperlist_translator.html">Copperlist translator</a>
 19 | 	  <a  href="diwstartstop.html">Diwstart/stop</a>
 20 | 	  <a  href="projection.html">Point Projection</a>
 21 | 	  <a  href="trigonometry.html">Trigonometric tables</a>
 22 | 	  <a href="raw2planar.html">Raw 2 planar viewer</a>
 23 | 	  <a href="rgbcolors.html">RGB Colors</a>
 24 | 	  <a href="sqrt.html">Square root tables</a>
 25 | 	  <a href="deltas.html">Deltas table calculator</a>
 26 | 	  <a href="number_interpreter.html">Number interpreter</a>
 27 | 	  <a href="rawdiff.html">Raw diff</a>
 28 | 	</div>
 29 | 
 30 | 	<div id="content" style="padding:25px">
 31 | 		<h2>Amiga sprite position editor</h2>
 32 | 		<h4>Draw your sprites position on the left grid and get the binary raw data to load into the Amiga copperlist</h4>
 33 | 		<input type="button" class="hideshowcontrols" value="Hide Controls">
 34 | 		<input type="button" value="Function calculator" onclick="window.open('https://www.desmos.com/calculator')" />
 35 | 		<input type="button" value="Convert for bobs" id="convertforbobs" />
 36 | 		
 37 | 		<div id="colorpalette" draggable="true" >
 38 | 			<input type="file" id="fileChooser" style="display:none;">
 39 | 			<ul id="colorslist">
 40 | 				<li idcolor="0"><input type=color id="color0" value="#EEE8AA">Color 00</li>
 41 | 				<li idcolor="1"><input type=color id="color1" value="#ff0000">Color 01</li>
 42 | 				<li idcolor="2"><input type=color id="color2" value="#00ff00">Color 02</li>
 43 | 				<li idcolor="3"><input type=color id="color3" value="#0000ff">Color 03</li>
 44 | 				<li idcolor="4"><input type=color id="color4" value="#000000">Color 04</li>
 45 | 				<li idcolor="5"><input type=color id="color5" value="#ff00ff">Color 05</li>
 46 | 				<li idcolor="6"><input type=color id="color6" value="#ff00ff">Color 06</li>
 47 | 				<li idcolor="7"><input type=color id="color7" value="#ff00ff">Color 07</li>
 48 | 				<li idcolor="8"><input type=color id="color8" value="#ff00ff">Color 08</li>
 49 | 				<li idcolor="9"><input type=color id="color9" value="#ff00ff">Color 09</li>
 50 | 				<li idcolor="10"><input type=color id="color10" value="#ff00ff">Color 10</li>
 51 | 				<li idcolor="11"><input type=color id="color11" value="#ff00ff">Color 11</li>
 52 | 				<li idcolor="12"><input type=color id="color12" value="#ff00ff">Color 12</li>
 53 | 				<li idcolor="13"><input type=color id="color13" value="#ff00ff">Color 13</li>
 54 | 				<li idcolor="14"><input type=color id="color14" value="#ff00ff">Color 14</li>
 55 | 				<li idcolor="15"><input type=color id="color15" value="#ff00ff">Color 15</li>
 56 | 				<li idcolor="16"><input type=color id="color16" value="#ff00ff">Color 16</li>
 57 | 				<li idcolor="17"><input type=color id="color17" value="#ff00ff">Color 17</li>
 58 | 				<li idcolor="18"><input type=color id="color18" value="#ff00ff">Color 18</li>
 59 | 				<li idcolor="19"><input type=color id="color19" value="#ff00ff">Color 19</li>
 60 | 				<li idcolor="20"><input type=color id="color20" value="#ff00ff">Color 20</li>
 61 | 				<li idcolor="21"><input type=color id="color21" value="#ff00ff">Color 21</li>
 62 | 				<li idcolor="22"><input type=color id="color22" value="#ff00ff">Color 22</li>
 63 | 				<li idcolor="23"><input type=color id="color23" value="#ff00ff">Color 23</li>
 64 | 				<li idcolor="24"><input type=color id="color24" value="#ff00ff">Color 24</li>
 65 | 				<li idcolor="25"><input type=color id="color25" value="#ff00ff">Color 25</li>
 66 | 				<li idcolor="26"><input type=color id="color26" value="#ff00ff">Color 26</li>
 67 | 				<li idcolor="27"><input type=color id="color27" value="#ff00ff">Color 27</li>
 68 | 				<li idcolor="28"><input type=color id="color28" value="#ff00ff">Color 28</li>
 69 | 				<li idcolor="29"><input type=color id="color29" value="#ff00ff">Color 29</li>
 70 | 				<li idcolor="30"><input type=color id="color30" value="#ff00ff">Color 30</li>
 71 | 				<li idcolor="31"><input type=color id="color31" value="#ff00ff">Color 31</li>
 72 | 			</ul>
 73 | 			<pre id=pospre>
 74 | 			X: 0
 75 | 			Y: 0
 76 | 			</pre>
 77 | 		</div>
 78 | 		<div id=result>
 79 | 			<div id="buttondiv">
 80 | 				<input type="button" id="mirrormode" value="Mirror mode Off" />
 81 | 				<input type="button" id="horizintalpixelforclick" value="Set horizontal pixels for click">
 82 | 				<input type="button" id="verticalpixelforclick" value="Set vertical pixels for click">
 83 | 				<input type="button" id="setfunctionclick" value="Set function">
 84 | 			</div>
 85 | 			<textarea id="resultpre"></textarea>
 86 | 			<input type=button id=copyresult value="Copy to Clipboard" />
 87 | 			<input type=button id=calculate value="Generate Raw File" />
 88 | 			<input type="button" value="Import From Raw File" onclick="document.getElementById('fileChooser').click();" />
 89 | 			<input type="button" class="hideshowcontrols" value="Hide Controls">
 90 | 
 91 | 		</div>
 92 | 		<ul id="fonttable"></ul>
 93 | 	</div>
 94 |     <script>
 95 | 	var NBITPLANES=2; // The program starts with 2 bitplane
 96 | 	var NUMPALETTECOLORS=32; // Amiga internal registers manage up to 32 colors from DFF180 (color 00 to DFF1BE color 31)
 97 | 	var SQUARE_PIXELS = 10; // Pixel needed to draw a square
 98 | 	var PIXEL_RESOLUTION=[320,256];
 99 | 	var XCOORDINATES=[];
100 | 	var YCOORDINATES=[];
101 | 
102 | 	  for (i=0;i<NUMPALETTECOLORS;i++)
103 | 	  {
104 | 	  	var liColor=document.querySelectorAll("#colorslist > li")[i];
105 | 	  	if (i<Math.pow(2,NBITPLANES))
106 | 	  		liColor.style = "display: show";
107 | 	  	else
108 | 	  		liColor.style = "display: none";
109 | 	  }
110 | 	  
111 | 	  // Manage palette change color
112 | 	  var palette = new FontColorsTable(NBITPLANES);
113 | 
114 | 	  for (i=0;i<NUMPALETTECOLORS;i++)
115 | 	  {
116 | 	  	var colorObj=document.querySelectorAll("#colorslist > li > input[type=color]")[i];
117 | 	  	palette.addFont24BitHexColor(colorObj.value);
118 | 
119 | 	  	colorObj.addEventListener('input',handleChangePaletteColor, false);
120 | 	  }
121 | 	  palette.setFgColorIndex(1);
122 | 	  palette.setBgColorIndex(0);
123 | 
124 | 	  function handleChangePaletteColor(event) {
125 | 	  	palette.changeColor(parseInt(this.parentNode.getAttribute('idcolor')),this.value);
126 | 	  	table.updateColor(parseInt(this.parentNode.getAttribute('idcolor')),this.value);
127 | 	  }
128 | 
129 | 	  // Manage color selection and palette creation
130 | 	  for (i=0;i<NUMPALETTECOLORS;i++)
131 | 	  {
132 | 	  	var fontLiObj=document.querySelectorAll("#colorslist > li")[i];
133 | 	  	fontLiObj.addEventListener('click',handleChangeColor, false);
134 | 	  }
135 | 	  function handleChangeColor(event) { 
136 | 	  for (i=0;i<NUMPALETTECOLORS;i++)
137 | 	  {
138 | 	  	document.querySelectorAll("#colorslist > li")[i].style.background='#9e9e9e';
139 | 	  }
140 | 	  palette.setFgColorIndex(this.getAttribute('idcolor'));
141 | 	  this.style.backgroundColor  = 'red';
142 | 
143 | 	}
144 | 
145 | 	//Create fonts table for characters from ascii 32 to 127
146 | 	var charset = [];
147 | 	for (var i = 48; i <= 48; i++) charset.push(i);
148 | 	//var spriteTable=createSpriteTable(charset,palette,{x:PIXEL_RESOLUTION[0],y: PIXEL_RESOLUTION[1]});
149 | 	//spriteTable.createList();
150 | 	var table=createMonitorTable(charset,palette,{x:PIXEL_RESOLUTION[0],y: PIXEL_RESOLUTION[1]}, function (square) {
151 | 		var xPos=parseInt(parseInt(square.x/2)+64);
152 | 		var yPos=parseInt(parseInt(square.y)+44);
153 | 		console.log(xPos+"-"+xPos.toString(16));
154 | 		console.log(yPos+"-"+yPos.toString(16));
155 | 
156 | 		xPos=xPos<<1;
157 | 		if (square.x%2==1)
158 | 		{
159 | 			xPos=xPos|1;
160 | 		}
161 | 
162 | 		XCOORDINATES.push("$"+xPos.toString(16));
163 | 		YCOORDINATES.push("$"+yPos.toString(16));
164 | 
165 | 		updateResults();
166 | 	},function (square_selected) {
167 | 		document.getElementById('pospre').innerHTML='X : '+square_selected.x+'\nY : '+square_selected.y;
168 | 	});
169 | 	table.createList(document.getElementById("fonttable"));
170 | 	table.appendListToUl(document.getElementById('fontnavigator'));
171 | 
172 | 	// Set change palette callback to update gui if palette changes
173 | 	table.setChangePaletteCallback(
174 | 		function (paletteArray) {
175 | 			for (var i=0;i<paletteArray.length;i++)
176 | 			{
177 | 				document.querySelectorAll("#colorslist > li > input[type=color]")[i].value=paletteArray[i];
178 | 				palette.setBgColorIndex(0);
179 | 				palette.setFgColorIndex(i);
180 | 
181 | 				palette.changeColor(i,paletteArray[i]);
182 | 				table.updateColor(i,paletteArray[i]);
183 | 			}
184 | 		}
185 | 	);
186 | 
187 | 	// Handle file export click
188 | 	var calculate = document.getElementById('calculate');
189 | 	calculate.onclick = function() {
190 | 		var binaryData=table.getBinaryData(palette.nBitplanes);
191 | 		//console.log(binaryData);
192 | 		var fileName = prompt("Please enter the name of your export file", "Myfonts.fnt");
193 | 		if (fileName)
194 | 			saveByteArray([binaryData], fileName);
195 | 	};
196 | 
197 | 	var saveByteArray = (function () {
198 | 		var a = document.createElement("a");
199 | 		document.body.appendChild(a);
200 | 		a.style = "display: none";
201 | 		return function (data, name) {
202 | 		    var blob = new Blob(data, {type: "octet/stream"}),
203 | 		    url = window.URL.createObjectURL(blob);
204 | 		    a.href = url;
205 | 		    a.download = name;
206 | 		    a.click();
207 | 		    window.URL.revokeObjectURL(url);
208 | 		};
209 | 	}());
210 | 
211 | 	document.querySelector("#fileChooser").addEventListener('change',filesChosen, false);
212 | 	function filesChosen(evt){
213 | 		var chosenFile = evt.target.files[0]; //get the first file in the FileList
214 | 		var fileName = chosenFile.name; //the name of the file as a string
215 | 		var fileSize = chosenFile.size; //the size of the file in bytes, as an integer
216 | 		var fileModifiedDate = chosenFile.lastModifiedDate; //a Date object
217 | 		//console.log(chosenFile);
218 | 		reader = new FileReader();
219 | 		//reader.addEventListener("load", readFile, false);
220 | 		reader.readAsArrayBuffer(document.querySelector("#fileChooser").files[0]);
221 | 		reader.onloadend = function () {
222 | 			table.drawRawData(new Uint8Array(reader.result),palette.nBitplanes);
223 | 			alert('File loaded succesfully');
224 | 			document.getElementById('fileChooser').value = null;
225 | 			return ;
226 | 		}
227 | 	}
228 | 
229 | 	
230 | 	document.querySelector("#copyresult").addEventListener('click',copyToClipboard,false);
231 | 	function copyToClipboard()
232 | 	{
233 | 		var ta = document.getElementById('resultpre');
234 | 		ta.focus();
235 | 		ta.select();
236 | 	}
237 | 
238 | 	document.querySelector("#horizintalpixelforclick").addEventListener('click',horizontalpixelforclick,false);
239 | 	function horizontalpixelforclick ()
240 | 	{
241 | 		newValue=window.prompt("Set horizontal pixels number for each click (from 1 to 320)","1");
242 | 		if (parseInt(newValue)>=1 && parseInt(newValue)<=320)
243 | 		{
244 | 			table.changeHorizontalPixelToDraw(parseInt(newValue));
245 | 			alert('Horizontal pixels set to '+parseInt(newValue));
246 | 		}
247 | 	}
248 | 
249 | 	document.querySelector("#verticalpixelforclick").addEventListener('click',verticalpixelforclick,false);
250 | 	function verticalpixelforclick ()
251 | 	{
252 | 		newValue=window.prompt("Set vertical pixels number for each click (from 1 to 256)","1");
253 | 		if (parseInt(newValue)>=1 && parseInt(newValue)<=320)
254 | 		{
255 | 			table.changeVerticalPixelToDraw(parseInt(newValue));
256 | 			alert('Vertical pixels set to '+parseInt(newValue));
257 | 		}
258 | 	}
259 | 	document.querySelector("#setfunctionclick").addEventListener('click',setfunctionforclick,false);
260 | 	function setfunctionforclick ()
261 | 	{
262 | 		newValue=window.prompt("Enter function, ex f(x)=x^2+x+1, empty to do not use it, help yourself at https://www.desmos.com/calculator","f(x)=x^2+x+1");
263 | 		
264 | 		table.changeFunctionPixelToDraw(newValue);
265 | 		if (newValue.length==0) alert('Function cleared');
266 | 		else {
267 | 			spriteWidth=window.prompt("Enter sprite width");
268 | 			table.changeSpriteWidth(spriteWidth);
269 | 			alert('Function set to '+newValue+" with sprite width to "+spriteWidth+"px");
270 | 		}
271 | 	}
272 | 
273 | 	document.querySelector("#mirrormode").addEventListener('click',setmirrormode,false);
274 | 	function setmirrormode()
275 | 	{
276 | 		if (this.value=="Mirror mode Off") this.value="Mirror mode On";
277 | 		else this.value="Mirror mode Off";
278 | 		updateResults();
279 | 	}
280 | 
281 | 	//document.querySelector(".hideshowcontrols").addEventListener('click',hideshowcontrols,false);
282 | 	var classname = document.getElementsByClassName("hideshowcontrols");
283 | 	for (var i = 0; i < classname.length; i++) {
284 |     	classname[i].addEventListener('click', hideshowcontrols, false);
285 | 	}
286 | 	function hideshowcontrols()
287 | 	{
288 | 		if (this.value=="Hide Controls")
289 | 		{
290 | 			document.querySelector(".hideshowcontrols").value="Show Controls";
291 | 			document.querySelector("#colorpalette").style.display = "none";
292 | 			document.querySelector("#result").style.display = "none";
293 | 			return;
294 | 		}
295 | 		document.querySelector(".hideshowcontrols").value="Hide Controls";
296 | 		document.querySelector("#colorpalette").style.display = "block";
297 | 		document.querySelector("#result").style.display = "block";
298 | 	}
299 | 
300 | 	document.querySelector("#convertforbobs").addEventListener('click',convertforbobs,false);
301 | 	function convertforbobs()
302 | 	{
303 | 		
304 | 		for (var i=0;i<XCOORDINATES.length;i++)
305 | 		{
306 | 			if (XCOORDINATES[i][0]=='$')
307 | 			{
308 | 				var decimalX=parseInt(XCOORDINATES[i].substring(1),16);
309 | 				var absoluteDecimalX=decimalX-128;
310 | 				XCOORDINATES[i]=absoluteDecimalX;
311 | 			}
312 | 			if (YCOORDINATES[i][0]=='$')
313 | 			{
314 | 				console.log(YCOORDINATES[i].substring(1));
315 | 				var decimalY=parseInt(YCOORDINATES[i].substring(1),16);
316 | 				var absoluteDecimalY=decimalY-44;
317 | 				YCOORDINATES[i]=absoluteDecimalY;
318 | 			}
319 | 		}
320 | 		updateResults();
321 | 	}
322 | 
323 | 	function updateResults()
324 | 	{
325 | 		var mirror=0;
326 | 		if (document.querySelector("#mirrormode").value=="Mirror mode On") mirror=1;
327 | 
328 | 		document.getElementById("resultpre").innerHTML = 'TABX\n\tdc.w ';
329 | 
330 | 		for (var i=0;i<XCOORDINATES.length;i++)
331 | 		{
332 | 			var virgola="";
333 | 			if (i>0) virgola=",";
334 | 			if (i>0 && i%10==0) { document.getElementById("resultpre").innerHTML +='\n\tdc.w '; virgola="";}
335 | 			document.getElementById("resultpre").innerHTML += virgola+XCOORDINATES[i];
336 | 		}
337 | 		if (mirror)
338 | 		{
339 | 			document.getElementById("resultpre").innerHTML += '\nTABXMIRROR\n\tdc.w ';
340 | 			for (var i=0;i<XCOORDINATES.length;i++)
341 | 			{
342 | 				var virgola="";
343 | 				if (i>0) virgola=",";
344 | 				if (i>0 && i%10==0) { document.getElementById("resultpre").innerHTML +='\n\tdc.w '; virgola="";}
345 | 				document.getElementById("resultpre").innerHTML += virgola+XCOORDINATES[XCOORDINATES.length-1-i];
346 | 			}
347 | 		}
348 | 		document.getElementById("resultpre").innerHTML += '\nFINETABX';
349 | 
350 | 		document.getElementById("resultpre").innerHTML += '\n\nTABY\n\tdc.w ';
351 | 		for (var i=0;i<YCOORDINATES.length;i++)
352 | 		{
353 | 			var virgola="";
354 | 			if (i>0) virgola=",";
355 | 			if (i>0 && i%10==0) { document.getElementById("resultpre").innerHTML +='\n\tdc.w '; virgola="";}
356 | 			document.getElementById("resultpre").innerHTML += virgola+YCOORDINATES[i];
357 | 			
358 | 		}
359 | 		if (mirror)
360 | 		{
361 | 			document.getElementById("resultpre").innerHTML += '\n\nTABYMIRROR\n\tdc.w ';
362 | 			for (var i=0;i<YCOORDINATES.length;i++)
363 | 			{
364 | 				var virgola="";
365 | 				if (i>0) virgola=",";
366 | 				if (i>0 && i%10==0) { document.getElementById("resultpre").innerHTML +='\n\tdc.w '; virgola="";}
367 | 				document.getElementById("resultpre").innerHTML += virgola+YCOORDINATES[YCOORDINATES.length-1-i];
368 | 			}
369 | 		}
370 | 		document.getElementById("resultpre").innerHTML += '\nFINETABY';
371 | 	}
372 | 	document.getElementById("colorpalette").addEventListener('dragover',dragfunction,false);
373 | 	function dragfunction (data)
374 | 	{
375 | 		console.log(data);
376 | 		 document.getElementById("colorpalette").style.left = data.screenX + 'px';
377 |     	document.getElementById("colorpalette").style.top = data.screenY + 'px';
378 | 	}
379 |     </script>
380 |   </body>
381 | </html>  
382 | 


--------------------------------------------------------------------------------
/js/UPNG.js:
--------------------------------------------------------------------------------
  1 | 
  2 | 
  3 | var UPNG = {};
  4 | 
  5 | UPNG.toRGBA8 = function(out)
  6 | {
  7 | 	//console.log(out.ctype, out.depth);
  8 | 	var w = out.width, h = out.height, area = w*h, bpp = UPNG.decode._getBPP(out);
  9 | 	var bpl = Math.ceil(w*bpp/8);	// bytes per line
 10 | 	
 11 | 	var bf = new Uint8Array(area*4), bf32 = new Uint32Array(bf.buffer);
 12 | 	var data = out.data, ctype = out.ctype, depth = out.depth;
 13 | 	var rs = UPNG._bin.readUshort;
 14 | 	
 15 | 	if     (ctype==6) { // RGB + alpha
 16 | 		var qarea = area<<2;
 17 | 		if(depth== 8) for(var i=0; i<qarea;i++) {  bf[i] = data[i];  /*if((i&3)==3) bf[i]=255;*/  }
 18 | 		if(depth==16) for(var i=0; i<qarea;i++) {  bf[i] = data[i<<1];  }
 19 | 	}
 20 | 	else if(ctype==2) {	// RGB
 21 | 		var ts=out.tabs["tRNS"], tr=-1, tg=-1, tb=-1;
 22 | 		if(ts) {  tr=ts[0];  tg=ts[1];  tb=ts[2];  }
 23 | 		if(depth== 8) for(var i=0; i<area; i++) {  var qi=i<<2, ti=i*3;  bf[qi] = data[ti];  bf[qi+1] = data[ti+1];  bf[qi+2] = data[ti+2];  bf[qi+3] = 255;
 24 | 			if(tr!=-1 && data[ti]   ==tr && data[ti+1]   ==tg && data[ti+2]   ==tb) bf[qi+3] = 0;  }
 25 | 		if(depth==16) for(var i=0; i<area; i++) {  var qi=i<<2, ti=i*6;  bf[qi] = data[ti];  bf[qi+1] = data[ti+2];  bf[qi+2] = data[ti+4];  bf[qi+3] = 255; 
 26 | 			if(tr!=-1 && rs(data,ti)==tr && rs(data,ti+2)==tg && rs(data,ti+4)==tb) bf[qi+3] = 0;  }
 27 | 	}
 28 | 	else if(ctype==3) {	// palette
 29 | 		var p=out.tabs["PLTE"], ap=out.tabs["tRNS"], tl=ap?ap.length:0;
 30 | 		if(depth==1) for(var y=0; y<h; y++) {  var s0 = y*bpl, t0 = y*w; 
 31 | 			for(var i=0; i<w; i++) { var qi=(t0+i)<<2, j=((data[s0+(i>>3)]>>(7-((i&7)<<0)))& 1), cj=3*j;  bf[qi]=p[cj];  bf[qi+1]=p[cj+1];  bf[qi+2]=p[cj+2];  bf[qi+3]=(j<tl)?ap[j]:255;  }
 32 | 		}
 33 | 		if(depth==2) for(var y=0; y<h; y++) {  var s0 = y*bpl, t0 = y*w; 
 34 | 			for(var i=0; i<w; i++) { var qi=(t0+i)<<2, j=((data[s0+(i>>2)]>>(6-((i&3)<<1)))& 3), cj=3*j;  bf[qi]=p[cj];  bf[qi+1]=p[cj+1];  bf[qi+2]=p[cj+2];  bf[qi+3]=(j<tl)?ap[j]:255;  }
 35 | 		}
 36 | 		if(depth==4) for(var y=0; y<h; y++) {  var s0 = y*bpl, t0 = y*w;  
 37 | 			for(var i=0; i<w; i++) { var qi=(t0+i)<<2, j=((data[s0+(i>>1)]>>(4-((i&1)<<2)))&15), cj=3*j;  bf[qi]=p[cj];  bf[qi+1]=p[cj+1];  bf[qi+2]=p[cj+2];  bf[qi+3]=(j<tl)?ap[j]:255;  }
 38 | 		}
 39 | 		if(depth==8) for(var i=0; i<area; i++ ) {  var qi=i<<2, j=data[i]                      , cj=3*j;  bf[qi]=p[cj];  bf[qi+1]=p[cj+1];  bf[qi+2]=p[cj+2];  bf[qi+3]=(j<tl)?ap[j]:255;  }
 40 | 	}
 41 | 	else if(ctype==4) {	// gray + alpha
 42 | 		if(depth== 8)  for(var i=0; i<area; i++) {  var qi=i<<2, di=i<<1, gr=data[di];  bf[qi]=gr;  bf[qi+1]=gr;  bf[qi+2]=gr;  bf[qi+3]=data[di+1];  }
 43 | 		if(depth==16)  for(var i=0; i<area; i++) {  var qi=i<<2, di=i<<2, gr=data[di];  bf[qi]=gr;  bf[qi+1]=gr;  bf[qi+2]=gr;  bf[qi+3]=data[di+2];  }
 44 | 	}
 45 | 	else if(ctype==0) {	// gray
 46 | 		var tr = out.tabs["tRNS"] ? out.tabs["tRNS"] : -1; 
 47 | 		if(depth== 1) for(var i=0; i<area; i++) {  var qi=i<<2, gr=255*((data[i>>3]>>(7 -((i&7)   )))& 1), al=(gr==tr*255)?0:255;  bf32[i]=(al<<24)|(gr<<16)|(gr<<8)|gr;  }
 48 | 		if(depth== 2) for(var i=0; i<area; i++) {  var qi=i<<2, gr= 85*((data[i>>2]>>(6 -((i&3)<<1)))& 3), al=(gr==tr* 85)?0:255;  bf32[i]=(al<<24)|(gr<<16)|(gr<<8)|gr;  }
 49 | 		if(depth== 4) for(var i=0; i<area; i++) {  var qi=i<<2, gr= 17*((data[i>>1]>>(4 -((i&1)<<2)))&15), al=(gr==tr* 17)?0:255;  bf32[i]=(al<<24)|(gr<<16)|(gr<<8)|gr;  }
 50 | 		if(depth== 8) for(var i=0; i<area; i++) {  var qi=i<<2, gr=data[i  ] , al=(gr           ==tr)?0:255;  bf32[i]=(al<<24)|(gr<<16)|(gr<<8)|gr;  }
 51 | 		if(depth==16) for(var i=0; i<area; i++) {  var qi=i<<2, gr=data[i<<1], al=(rs(data,i<<1)==tr)?0:255;  bf32[i]=(al<<24)|(gr<<16)|(gr<<8)|gr;  }
 52 | 	}
 53 | 	else console.log("unsupported color type", ctype);
 54 | 	return bf;
 55 | }
 56 | 
 57 | UPNG.encode = function(buff, w, h, ps)
 58 | {
 59 | 	if(ps==null) ps=0; 
 60 | 	var img = new Uint8Array(buff);
 61 | 	var data = new Uint8Array(img.length+100);
 62 | 	var wr=[0x89, 0x50, 0x4e, 0x47, 0x0d, 0x0a, 0x1a, 0x0a];
 63 | 	for(var i=0; i<8; i++) data[i]=wr[i];
 64 | 	var offset = 8,  bin = UPNG._bin, crc = UPNG.crc.crc;
 65 | 	
 66 | 	var nimg = UPNG.encode.compress(img, w, h, ps);
 67 | 	
 68 | 	bin.writeUint (data,offset, 13);     offset+=4;
 69 | 	bin.writeASCII(data,offset,"IHDR");  offset+=4;
 70 | 	bin.writeUint (data,offset,w);  offset+=4;
 71 | 	bin.writeUint (data,offset,h);  offset+=4;
 72 | 	data[offset] = nimg.depth;  offset++;  // depth
 73 | 	data[offset] = nimg.ctype;  offset++;  // ctype
 74 | 	data[offset] = 0;  offset++;  // compress
 75 | 	data[offset] = 0;  offset++;  // filter
 76 | 	data[offset] = 0;  offset++;  // interlace
 77 | 	bin.writeUint (data,offset,crc(data,offset-17,17));  offset+=4; // crc
 78 | 	
 79 | 	
 80 | 	if(nimg.ctype==3) {
 81 | 		var dl = nimg.plte.length;
 82 | 		bin.writeUint (data,offset, dl*3);  offset+=4;
 83 | 		bin.writeASCII(data,offset,"PLTE");  offset+=4;
 84 | 		for(var i=0; i<dl; i++){
 85 | 			var ti=i*3, c=nimg.plte[i], r=(c)&255, g=(c>>8)&255, b=(c>>16)&255;
 86 | 			data[offset+ti+0]=r;  data[offset+ti+1]=g;  data[offset+ti+2]=b;
 87 | 		}
 88 | 		offset+=dl*3;
 89 | 		bin.writeUint (data,offset,crc(data,offset-dl*3-4,dl*3+4));  offset+=4; // crc
 90 | 		
 91 | 		if(nimg.gotAlpha) {
 92 | 			bin.writeUint (data,offset, dl);  offset+=4;
 93 | 			bin.writeASCII(data,offset,"tRNS");  offset+=4;
 94 | 			for(var i=0; i<dl; i++)  data[offset+i]=(nimg.plte[i]>>24)&255;
 95 | 			offset+=dl;
 96 | 			bin.writeUint (data,offset,crc(data,offset-dl-4,dl+4));  offset+=4; // crc
 97 | 		} 
 98 | 	}
 99 | 	
100 | 	var dl = nimg.data.length;
101 | 	bin.writeUint (data,offset, dl);     offset+=4;
102 | 	bin.writeASCII(data,offset,"IDAT");  offset+=4;
103 | 	for(var i=0; i<dl; i++) data[offset+i] = nimg.data[i];
104 | 	offset += dl;
105 | 	bin.writeUint (data,offset,crc(data,offset-dl-4,dl+4));  offset+=4; // crc
106 | 	
107 | 	bin.writeUint (data,offset, 0);     offset+=4;
108 | 	bin.writeASCII(data,offset,"IEND");  offset+=4;
109 | 	bin.writeUint (data,offset,crc(data,offset-4,4));  offset+=4; // crc
110 | 	
111 | 	return data.buffer.slice(0,offset);
112 | }
113 | 
114 | UPNG.encode.compress = function(img, w, h, ps)
115 | {
116 | 	if(ps!=0) img = UPNG.quantize(img, w, h, ps);
117 | 	
118 | 	var ctype = 6, depth = 8, plte=[], bpp = 4, bpl = 4*w;
119 | 	var img32 = new Uint32Array(img.buffer);
120 | 	var gotAlpha=false, cmap=[];
121 | 	for(var i=0; i<img.length; i+=4) {
122 | 		var c = img32[i>>2];  if(plte.length<600 && cmap[c]==null) {  cmap[c]=plte.length;  plte.push(c);  }
123 | 		if(img[i+3]!=255) gotAlpha = true;
124 | 	}
125 | 	var cc=plte.length;
126 | 	if(cc<=256) {
127 | 		if(cc<= 2) depth=1;  else if(cc<= 4) depth=2;  else if(cc<=16) depth=4;  else depth=8;
128 | 		bpl = Math.ceil(depth*w/8), nimg = new Uint8Array(bpl*h);
129 | 		for(var y=0; y<h; y++) {  var i=y*bpl, ii=y*w;
130 | 			if(depth==1) for(var x=0; x<w; x++) nimg[i+(x>>3)]  |=  (cmap[img32[ii+x]]<<(7-(x&7)  )); 
131 | 			if(depth==2) for(var x=0; x<w; x++) nimg[i+(x>>2)]  |=  (cmap[img32[ii+x]]<<(6-(x&3)*2));  			
132 | 			if(depth==4) for(var x=0; x<w; x++) nimg[i+(x>>1)]  |=  (cmap[img32[ii+x]]<<(4-(x&1)*4));  
133 | 			if(depth==8) for(var x=0; x<w; x++) nimg[i+ x    ]   =   cmap[img32[ii+x]];
134 | 		}
135 | 		img=nimg;  ctype=3;  bpp=1;
136 | 	}
137 | 	else if(gotAlpha==false) {
138 | 		var nimg = new Uint8Array(w*h*3), area=w*h;
139 | 		for(var i=0; i<area; i++) { var ti=i*3, qi=i*4;  nimg[ti]=img[qi];  nimg[ti+1]=img[qi+1];  nimg[ti+2]=img[qi+2];  }
140 | 		img=nimg;  ctype=2;  bpp=3;  bpl=3*w;
141 | 	}
142 | 	
143 | 	var data = new Uint8Array(w*h*bpp+h);
144 | 	return {ctype:ctype, depth:depth, plte:plte, gotAlpha:gotAlpha, data: UPNG.encode._filterZero(img,h,bpp,bpl,data)  };
145 | }
146 | 
147 | UPNG.encode._filterZero = function(img,h,bpp,bpl,data)
148 | {
149 | 	var fls = [];
150 | 	for(var t=0; t<5; t++) {  if(h*bpl>500000 && (t==2 || t==3 || t==4)) continue;
151 | 		for(var y=0; y<h; y++) UPNG.encode._filterLine(data, img, y, bpl, bpp, t);
152 | 		fls.push(pako["deflate"](data));  if(bpp==1) break;
153 | 	}	
154 | 	var ti, tsize=1e9;
155 | 	for(var i=0; i<fls.length; i++) if(fls[i].length<tsize) {  ti=i;  tsize=fls[i].length;  }
156 | 	//console.log("top filter", ti);
157 | 	return fls[ti];
158 | }
159 | UPNG.encode._filterLine = function(data, img, y, bpl, bpp, type)
160 | {
161 | 	var i = y*bpl, di = i+y, paeth = UPNG.decode._paeth
162 | 	data[di]=type;  di++;
163 | 	
164 | 	if(type==0) for(var x=0; x<bpl; x++) data[di+x] = img[i+x];
165 | 	else if(type==1) {
166 | 		for(var x=  0; x<bpp; x++) data[di+x] =  img[i+x];
167 | 		for(var x=bpp; x<bpl; x++) data[di+x] = (img[i+x]-img[i+x-bpp]+256)&255; 
168 | 	}
169 | 	else if(y==0) {
170 | 		for(var x=  0; x<bpp; x++) data[di+x] = img[i+x];  
171 | 			
172 | 		if(type==2) for(var x=bpp; x<bpl; x++) data[di+x] = img[i+x];
173 | 		if(type==3) for(var x=bpp; x<bpl; x++) data[di+x] = (img[i+x] - (img[i+x-bpp]>>1) +256)&255;
174 | 		if(type==4) for(var x=bpp; x<bpl; x++) data[di+x] = (img[i+x] - paeth(img[i+x-bpp], 0, 0) +256)&255;
175 | 	}
176 | 	else {
177 | 		if(type==2) { for(var x=  0; x<bpl; x++) data[di+x] = (img[i+x]+256 - img[i+x-bpl])&255;  }
178 | 		if(type==3) { for(var x=  0; x<bpp; x++) data[di+x] = (img[i+x]+256 - (img[i+x-bpl]>>1))&255;  
179 | 					  for(var x=bpp; x<bpl; x++) data[di+x] = (img[i+x]+256 - ((img[i+x-bpl]+img[i+x-bpp])>>1))&255;  }
180 | 		if(type==4) { for(var x=  0; x<bpp; x++) data[di+x] = (img[i+x]+256 - paeth(0, img[i+x-bpl], 0))&255;  
181 | 					  for(var x=bpp; x<bpl; x++) data[di+x] = (img[i+x]+256 - paeth(img[i+x-bpp], img[i+x-bpl], img[i+x-bpp-bpl]))&255;  }
182 | 	}
183 | }
184 | 
185 | UPNG.crc = {
186 | 	table : ( function() {
187 | 	   var tab = new Uint32Array(256);
188 | 	   for (var n=0; n<256; n++) {
189 | 			var c = n;
190 | 			for (var k=0; k<8; k++) {
191 | 				if (c & 1)  c = 0xedb88320 ^ (c >>> 1);
192 | 				else        c = c >>> 1;
193 | 			}
194 | 			tab[n] = c;  }    
195 | 		return tab;  })(),
196 | 	update : function(c, buf, off, len) {
197 | 		for (var i=0; i<len; i++)  c = UPNG.crc.table[(c ^ buf[off+i]) & 0xff] ^ (c >>> 8);
198 | 		return c;
199 | 	},
200 | 	crc : function(b,o,l)  {  return UPNG.crc.update(0xffffffff,b,o,l) ^ 0xffffffff;  }
201 | }
202 | 
203 | UPNG.quantize = function(img, w, h, ps)
204 | {
205 | 	var nimg = new Uint8Array(img.length), pind = new Uint16Array(w*h), area=w*h, edist=UPNG.quantize.dist;
206 | 	for(var i=0; i<area; i++) {
207 | 		var qi=i<<2, a=img[qi+3]/255;  
208 | 		nimg[qi+0] = img[qi+0]*a;  nimg[qi+1] = img[qi+1]*a;  nimg[qi+2] = img[qi+2]*a;  nimg[qi+3] = img[qi+3];
209 | 	}
210 | 	var plte=[], used=[], pr=0, plim = Math.max(100, 10*ps);
211 | 	while(true) {
212 | 		used=[];  plte=[];
213 | 		var msk = 0xff - ((1<<pr)-1), add = ((1<<pr))>>1;
214 | 		for(var i=0; i<area; i++) {  var qi=i<<2;  var r=nimg[qi],g=nimg[qi+1],b=nimg[qi+2],a=nimg[qi+3];  
215 | 			var nr=(r&msk)+add, ng=(g&msk)+add, nb=(b&msk)+add, na=(a&msk)+add, key=(na<<24)|(nb<<16)|(ng<<8)|nr;
216 | 			if(used[key]) {  var pv=plte[used[key]];  pv.occ++;  }
217 | 			else {  used[key]=plte.length;  plte.push(  {occ:1, r:nr,g:ng,b:nb,a:na}  );  }
218 | 			if(plte.length>plim) break;
219 | 		}
220 | 		if(plte.length>plim) {  pr++;  continue;  }
221 | 		break;
222 | 	}
223 | 	if(pr==0 && plte.length<=ps) return img;
224 | 	plte.sort(function(a,b) {return b.occ-a.occ;});
225 | 	
226 | 	ps = Math.min(ps, plte.length);
227 | 	var nplte = new Uint8Array(ps*4);
228 | 	for(var i=0; i<ps; i++) {  var qi=i<<2,c=plte[i];  nplte[qi]=c.r;  nplte[qi+1]=c.g;  nplte[qi+2]=c.b;  nplte[qi+3]=c.a;  }
229 | 	plte = nplte;  //*/
230 | 	
231 | 	var icnt = Math.max(1, Math.min(10, Math.floor(1024/ps)));
232 | 	for(var it=0; it<icnt; it++)
233 | 	{
234 | 		var hist=new Uint32Array(ps), nplt=new Uint32Array(ps*4);
235 | 		var ndst=new Uint32Array(ps), nind=new Uint32Array(ps  );
236 | 		for(var i=0; i<ps; i++) { var qi=i<<2;
237 | 			var r=plte[qi], g=plte[qi+1], b=plte[qi+2], a=plte[qi+3];
238 | 			var ci=0; cd=1e9;
239 | 			for(var j=0; j<ps; j++) {  if(j==i) continue; 
240 | 				var dst = edist(r,g,b,a,plte,j<<2);
241 | 				if(dst<cd) {  ci=j;  cd=dst;  }
242 | 			}
243 | 			ndst[i]=cd;  nind[i]=ci;
244 | 		}
245 | 		for(var i=0; i<area; i++) {  var qi=i<<2;
246 | 			var r=nimg[qi], g=nimg[qi+1], b=nimg[qi+2], a=nimg[qi+3];
247 | 			var ci=0, cd=1e9;
248 | 			ci=pind[i];  cd=edist(r,g,b,a,plte,ci<<2);  if(cd<=(ndst[ci]>>1)) {}  else
249 | 			for(var j=0; j<ps; j++) {
250 | 				var dst = edist(r,g,b,a,plte,j<<2);
251 | 				if(dst<cd) {  ci=j;  cd=dst;  
252 | 					if(dst<=(ndst[ci]>>1)) break;
253 | 					var dst = edist(r,g,b,a,plte,nind[j]<<2);
254 | 					if(dst<=(ndst[ci]>>1)) {  ci=nind[j];  break;  }
255 | 				}
256 | 			}
257 | 			pind[i]=ci;  hist[ci]++;  var qci=ci<<2;
258 | 			nplt[qci]+=r;  nplt[qci+1]+=g;  nplt[qci+2]+=b;  nplt[qci+3]+=a; 
259 | 		}
260 | 		for(var i=0; i<ps; i++) {  var qi=i<<2, den=1/hist[i];
261 | 			plte[qi]=nplt[qi]*den;  plte[qi+1]=nplt[qi+1]*den;  plte[qi+2]=nplt[qi+2]*den;  plte[qi+3]=nplt[qi+3]*den;  
262 | 		}
263 | 	}
264 | 	//UPNG.quantize.dither(nimg, w,h, pind,plte, ps);  // I think that (current) dithering is not worth it
265 | 	for(var i=0; i<area; i++) {
266 | 		var qi=i<<2, ci=pind[i], qci=ci<<2, ia = plte[qci+3]==0 ? 0 : 255/plte[qci+3];
267 | 		nimg[qi+0] = plte[qci+0]*ia;  nimg[qi+1] = plte[qci+1]*ia;  nimg[qi+2] = plte[qci+2]*ia;  nimg[qi+3] = plte[qci+3];
268 | 	}
269 | 	return nimg;
270 | }
271 | UPNG.quantize.dist = function(r,g,b,a,ba,bi)
272 | {
273 | 	var pr=ba[bi], pg=ba[bi+1], pb=ba[bi+2], pa=ba[bi+3];
274 | 	return (pr-r)*(pr-r)+(pg-g)*(pg-g)+(pb-b)*(pb-b)+(pa-a)*(pa-a);
275 | }
276 | UPNG.quantize.dither = function(nimg, w, h, pind, plte, ps)
277 | {
278 | 	var err = new Float32Array(w*h*4), i16 = 1/16;
279 | 	var edist = UPNG.quantize.dist, round=Math.round, qw=w<<2;
280 | 	for(var y=0; y<h; y++)
281 | 		for(var x=0; x<w; x++) {
282 | 			var i = y*w+x, qi=i<<2;
283 | 			for(var j=0; j<4; j++) err[qi+j] = Math.max(-8, Math.min(8, err[qi+j]));
284 | 			var r=round(nimg[qi]+err[qi]), g=round(nimg[qi+1]+err[qi+1]), b=round(nimg[qi+2]+err[qi+2]), a=round(nimg[qi+3]+err[qi+3]);
285 | 			var ci=0, cd=1e9;
286 | 			for(var j=0; j<ps; j++) {
287 | 				var dst = edist(r,g,b,a,plte,j<<2);
288 | 				if(dst<cd) {  ci=j;  cd=dst;  }
289 | 			}
290 | 			pind[i]=ci;
291 | 			var ciq = ci<<2;
292 | 			var dr=r-plte[ciq], dg=g-plte[ciq+1], db=b-plte[ciq+2], da=a-plte[ciq+3];
293 | 			
294 | 			err[qi   +4+0] += (7*dr*i16);  err[qi   +4+1] += (7*dg*i16);  err[qi   +4+2] += (7*db*i16);  err[qi   +4+3] += (7*da*i16);
295 | 			err[qi+qw-4+0] += (3*dr*i16);  err[qi+qw-4+1] += (3*dg*i16);  err[qi+qw-4+2] += (3*db*i16);  err[qi+qw-4+3] += (3*da*i16);
296 | 			err[qi+qw  +0] += (5*dr*i16);  err[qi+qw  +1] += (5*dg*i16);  err[qi+qw  +2] += (5*db*i16);  err[qi+qw  +3] += (5*da*i16);
297 | 			err[qi+qw+4+0] += (1*dr*i16);  err[qi+qw+4+1] += (1*dg*i16);  err[qi+qw+4+2] += (1*db*i16);  err[qi+qw+4+3] += (1*da*i16);
298 | 		}
299 | }
300 | 
301 | UPNG.decode = function(buff)
302 | {
303 | 	var data = new Uint8Array(buff), offset = 8, bin = UPNG._bin, rUs = bin.readUshort;
304 | 	var out = {tabs:{}};
305 | 	var dd = new Uint8Array(data.length), doff = 0;	 // put all IDAT data into it
306 | 	
307 | 	while(true)
308 | 	{
309 | 		var len = bin.readUint(data, offset);  offset += 4;
310 | 		var type = bin.readASCII(data, offset, 4);  offset += 4;
311 | 		//console.log(offset, len, type);
312 | 		
313 | 		if     (type=="IHDR")  {  UPNG.decode._IHDR(data, offset, out);  }
314 | 		else if(type=="IDAT") {
315 | 			for(var i=0; i<len; i++) dd[doff+i] = data[offset+i];
316 | 			doff += len;
317 | 		}
318 | 		else if(type=="pHYs") {
319 | 			out.tabs[type] = [bin.readUint(data, offset), bin.readUint(data, offset+4), data[offset+8]];
320 | 		}
321 | 		else if(type=="cHRM") {
322 | 			out.tabs[type] = [];
323 | 			for(var i=0; i<8; i++) out.tabs[type].push(bin.readUint(data, offset+i*4));
324 | 		}
325 | 		else if(type=="tEXt") {
326 | 			if(out.tabs[type]==null) out.tabs[type] = {};
327 | 			var nz = bin.nextZero(data, offset);
328 | 			var keyw = bin.readASCII(data, offset, nz-offset);
329 | 			var text = bin.readASCII(data, nz+1, offset+len-nz-1);
330 | 			out.tabs[type][keyw] = text;
331 | 		}
332 | 		else if(type=="iTXt") {
333 | 			if(out.tabs[type]==null) out.tabs[type] = {};
334 | 			var nz = 0, off = offset;
335 | 			nz = bin.nextZero(data, off);
336 | 			var keyw = bin.readASCII(data, off, nz-off);  off = nz + 1;
337 | 			var cflag = data[off], cmeth = data[off+1];  off+=2;
338 | 			nz = bin.nextZero(data, off);
339 | 			var ltag = bin.readASCII(data, off, nz-off);  off = nz + 1;
340 | 			nz = bin.nextZero(data, off);
341 | 			var tkeyw = bin.readUTF8(data, off, nz-off);  off = nz + 1;
342 | 			var text = bin.readUTF8(data, off, len-(off-offset));
343 | 			out.tabs[type][keyw] = text;
344 | 		}
345 | 		else if(type=="PLTE") {
346 | 			out.tabs[type] = bin.readBytes(data, offset, len);
347 | 		}
348 | 		else if(type=="hIST") {
349 | 			var pl = out.tabs["PLTE"].length/3;
350 | 			out.tabs[type] = [];  for(var i=0; i<pl; i++) out.tabs[type].push(rUs(data, offset+i*2));
351 | 		}
352 | 		else if(type=="tRNS") {
353 | 			if     (out.ctype==3) out.tabs[type] = bin.readBytes(data, offset, len);
354 | 			else if(out.ctype==0) out.tabs[type] = rUs(data, offset);
355 | 			else if(out.ctype==2) out.tabs[type] = [ rUs(data,offset),rUs(data,offset+2),rUs(data,offset+4) ];
356 | 			else console.log("tRNS for unsupported color type",out.ctype, len);
357 | 		}
358 | 		else if(type=="gAMA") out.tabs[type] = bin.readUint(data, offset)/100000;
359 | 		else if(type=="sRGB") out.tabs[type] = data[offset];
360 | 		else if(type=="bKGD") 
361 | 		{
362 | 			if     (out.ctype==0 || out.ctype==4) out.tabs[type] = [rUs(data, offset)];
363 | 			else if(out.ctype==2 || out.ctype==6) out.tabs[type] = [rUs(data, offset), rUs(data, offset+2), rUs(data, offset+4)];
364 | 			else if(out.ctype==3) out.tabs[type] = data[offset];
365 | 		}
366 | 		else if(type=="IEND") {
367 | 			if(out.compress ==0) dd = UPNG.decode._inflate(dd);
368 | 			else console.log("unsupported compression method:", out.interlace);
369 | 			
370 | 			if(out.filter!=0) console.log("unsupported filter method:", out.filter);
371 | 			
372 | 			if(out.interlace==0) out.data = UPNG.decode._filterZero(dd, out, 0, out.width, out.height);
373 | 			else if(out.interlace==1) out.data = UPNG.decode._readInterlace(dd, out);
374 | 			else console.log("unsupported interlace method:", out.interlace);
375 | 			
376 | 			break;
377 | 		}
378 | 		else {  console.log("unknown chunk type", type, len);  }
379 | 		offset += len;
380 | 		var crc = bin.readUint(data, offset);  offset += 4;
381 | 	}
382 | 	delete out.compress;  delete out.interlace;  delete out.filter;
383 | 	return out;
384 | }
385 | 
386 | UPNG.decode._inflate = function(data) {  return pako["inflate"](data);  }
387 | 
388 | UPNG.decode._readInterlace = function(data, out)
389 | {
390 | 	var w = out.width, h = out.height;
391 | 	var bpp = UPNG.decode._getBPP(out), cbpp = bpp>>3, bpl = Math.ceil(w*bpp/8);
392 | 	var img = new Uint8Array( h * bpl );
393 | 	var di = 0;
394 | 	
395 | 	var starting_row  = [ 0, 0, 4, 0, 2, 0, 1 ];
396 | 	var starting_col  = [ 0, 4, 0, 2, 0, 1, 0 ];
397 | 	var row_increment = [ 8, 8, 8, 4, 4, 2, 2 ];
398 | 	var col_increment = [ 8, 8, 4, 4, 2, 2, 1 ];
399 | 
400 | 	var pass=0;
401 | 	while(pass<7)
402 | 	{
403 | 		var ri = row_increment[pass], ci = col_increment[pass];
404 | 		var sw = 0, sh = 0;
405 | 		var cr = starting_row[pass];  while(cr<h) {  cr+=ri;  sh++;  }
406 | 		var cc = starting_col[pass];  while(cc<w) {  cc+=ci;  sw++;  }
407 | 		var bpll = Math.ceil(sw*bpp/8);
408 | 		UPNG.decode._filterZero(data, out, di, sw, sh);
409 | 		
410 | 		var y=0, row = starting_row[pass];
411 | 		while(row<h)
412 | 		{
413 | 			var col = starting_col[pass];
414 | 			var cdi = (di+y*bpll)<<3;
415 | 			
416 | 			while(col<w)
417 | 			{
418 | 				if(bpp==1) {
419 | 					var val = data[cdi>>3];  val = (val>>(7-(cdi&7)))&1;
420 | 					img[row*bpl + (col>>3)] |= (val << (7-((col&3)<<0)));
421 | 				}
422 | 				if(bpp==2) {
423 | 					var val = data[cdi>>3];  val = (val>>(6-(cdi&7)))&3;
424 | 					img[row*bpl + (col>>2)] |= (val << (6-((col&3)<<1)));
425 | 				}
426 | 				if(bpp==4) {
427 | 					var val = data[cdi>>3];  val = (val>>(4-(cdi&7)))&15;
428 | 					img[row*bpl + (col>>1)] |= (val << (4-((col&1)<<2)));
429 | 				}
430 | 				if(bpp>=8) {
431 | 					var ii = row*bpl+col*cbpp;
432 | 					for(var j=0; j<cbpp; j++) img[ii+j] = data[(cdi>>3)+j];
433 | 				}
434 | 				cdi+=bpp;  col+=ci;
435 | 			}
436 | 			y++;  row += ri;
437 | 		}
438 | 		if(sw*sh!=0) di += sh * (1 + bpll);
439 | 		pass = pass + 1;
440 | 	}
441 | 	return img;
442 | }
443 | 
444 | UPNG.decode._getBPP = function(out) {
445 | 	var noc = [1,null,3,1,2,null,4][out.ctype];
446 | 	if(noc==null) console.log("unsupported color type", ctype);
447 | 	return noc * out.depth;
448 | }
449 | 
450 | UPNG.decode._filterZero = function(data, out, off, w, h)
451 | {	
452 | 	var bpp = UPNG.decode._getBPP(out), bpl = Math.ceil(w*bpp/8), paeth = UPNG.decode._paeth;
453 | 	bpp = Math.ceil(bpp/8);
454 | 	
455 | 	for(var y=0; y<h; y++)  {
456 | 		var i = off+y*bpl, di = i+y+1;
457 | 		var type = data[di-1];
458 | 		
459 | 		if     (type==0) for(var x=  0; x<bpl; x++) data[i+x] = data[di+x];
460 | 		else if(type==1) {
461 | 			for(var x=  0; x<bpp; x++) data[i+x] = data[di+x]; 
462 | 			for(var x=bpp; x<bpl; x++) data[i+x] = (data[di+x] + data[i+x-bpp])&255;
463 | 		}
464 | 		else if(y==0) {
465 | 			for(var x=  0; x<bpp; x++) data[i+x] = data[di+x];  
466 | 			if(type==2) for(var x=bpp; x<bpl; x++) data[i+x] = (data[di+x])&255;
467 | 			if(type==3) for(var x=bpp; x<bpl; x++) data[i+x] = (data[di+x] + (data[i+x-bpp]>>1) )&255;
468 | 			if(type==4) for(var x=bpp; x<bpl; x++) data[i+x] = (data[di+x] + paeth(data[i+x-bpp], 0, 0) )&255;
469 | 		} 
470 | 		else {  			
471 | 			if(type==2) { for(var x=  0; x<bpl; x++) data[i+x] = (data[di+x] + data[i+x-bpl])&255;  }
472 | 			
473 | 			if(type==3) { for(var x=  0; x<bpp; x++) data[i+x] = (data[di+x] + (data[i+x-bpl]>>1))&255;  
474 | 			              for(var x=bpp; x<bpl; x++) data[i+x] = (data[di+x] + ((data[i+x-bpl]+data[i+x-bpp])>>1) )&255;  }
475 | 			
476 | 			if(type==4) { for(var x=  0; x<bpp; x++) data[i+x] = (data[di+x] + paeth(0, data[i+x-bpl], 0))&255;  
477 | 						  for(var x=bpp; x<bpl; x++) data[i+x] = (data[di+x] + paeth(data[i+x-bpp], data[i+x-bpl], data[i+x-bpp-bpl]) )&255;  }
478 | 		}
479 | 	}
480 | 	return data;
481 | }
482 | 
483 | UPNG.decode._paeth = function(a,b,c)
484 | {
485 | 	var p = a+b-c, pa = Math.abs(p-a), pb = Math.abs(p-b), pc = Math.abs(p-c);
486 | 	if (pa <= pb && pa <= pc)  return a;
487 | 	else if (pb <= pc)  return b;
488 | 	return c;
489 | }
490 | 
491 | UPNG.decode._IHDR = function(data, offset, out)
492 | {
493 | 	var bin = UPNG._bin;
494 | 	out.width  = bin.readUint(data, offset);  offset += 4;
495 | 	out.height = bin.readUint(data, offset);  offset += 4;
496 | 	out.depth     = data[offset];  offset++;
497 | 	out.ctype     = data[offset];  offset++;
498 | 	out.compress  = data[offset];  offset++;
499 | 	out.filter    = data[offset];  offset++;
500 | 	out.interlace = data[offset];  offset++;
501 | }
502 | 
503 | UPNG._bin = {
504 | 	nextZero   : function(data,p)  {  while(data[p]!=0) p++;  return p;  },
505 | 	readUshort : function(buff,p)  {  return (buff[p]<< 8) | buff[p+1];  },
506 | 	writeUshort: function(buff,p,n){  buff[p] = (n>>8)&255;  buff[p+1] = n&255;  },
507 | 	readUint   : function(buff,p)  {  return (buff[p]*(256*256*256)) + ((buff[p+1]<<16) | (buff[p+2]<< 8) | buff[p+3]);  },
508 | 	writeUint  : function(buff,p,n){  buff[p]=(n>>24)&255;  buff[p+1]=(n>>16)&255;  buff[p+2]=(n>>8)&255;  buff[p+3]=n&255;  },
509 | 	readASCII  : function(buff,p,l){  var s = "";  for(var i=0; i<l; i++) s += String.fromCharCode(buff[p+i]);  return s;    },
510 | 	writeASCII : function(data,p,s){  for(var i=0; i<s.length; i++) data[p+i] = s.charCodeAt(i);  },
511 | 	readBytes  : function(buff,p,l){  var arr = [];   for(var i=0; i<l; i++) arr.push(buff[p+i]);   return arr;  },
512 | 	pad : function(n) { return n.length < 2 ? "0" + n : n; },
513 | 	readUTF8 : function(buff, p, l) {
514 | 		var s = "", ns;
515 | 		for(var i=0; i<l; i++) s += "%" + UPNG._bin.pad(buff[p+i].toString(16));
516 | 		try {  ns = decodeURIComponent(s); } 
517 | 		catch(e) {  return UPNG._bin.readASCII(buff, p, l);  }
518 | 		return  ns;
519 | 	}
520 | }
521 | 


--------------------------------------------------------------------------------
/raw2planar.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE HTML>
  2 | <html>
  3 |   <head>
  4 |     <link rel="stylesheet" type="text/css" href="css/AmigaFontEditor.css">
  5 | 	<script src="js/AmigaFontEditor.js"></script>
  6 | 	<script src="js/UPNG.js"></script>
  7 | 	<script src="js/pako.js"></script>
  8 | 	<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjs/4.2.2/math.min.js"></script>
  9 |   </head>
 10 |   <body>
 11 | 	<a href="https://github.com/Ozzyboshi/AmigaFontEditor"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/652c5b9acfaddf3a9c326fa6bde407b87f7be0f4/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6f72616e67655f6666373630302e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_orange_ff7600.png"></a>
 12 | 
 13 | 	<div class="topnav">
 14 | 	  <a href="index.html">Fonts</a>
 15 | 	  <a href="index_sprite.html">Sprite</a>
 16 | 	  <a href="index_sprite_position.html">Sprite position</a>
 17 | 	  <a href="register_conversion.html">Register conversion</a>
 18 | 	  <a href="copperlist_translator.html">Copperlist translator</a>
 19 | 	  <a href="diwstartstop.html">Diwstart/stop</a>
 20 | 	  <a href="projection.html">Point Projection</a>
 21 | 	  <a href="trigonometry.html">Trigonometric tables</a>
 22 | 	  <a class="active" href="#">Raw 2 planar viewer</a>
 23 | 	  <a href="rgbcolors.html">RGB Colors</a>
 24 | 	  <a href="sqrt.html">Square root tables</a>
 25 | 	  <a href="deltas.html">Deltas table calculator</a>
 26 | 	  <a href="number_interpreter.html">Number interpreter</a>
 27 | 	  <a href="rawdiff.html">Raw diff</a>
 28 | 	</div>
 29 | 
 30 | 	<div id="content" style="padding:25px">
 31 | 		<h2>Raw 2 planar viewer</h2>
 32 | 		<p style="white-space: pre-line;">Upload here your raw file containing bitplanes data.
 33 | 			Each bitplane must be not interleaved.
 34 | 			After loading you should see which pixel are turned on into the Amiga planar screen</p>
 35 | 		<input type="button" class="hideshowcontrols" value="Hide Controls">
 36 | 		<input type="button" id="hidehex" value="Show Hex">
 37 |         <input type="button" value="Import From Raw File" onclick="document.getElementById('fileChooser').click();" />
 38 | 		<input type=button id=calculate value="Export to Raw" />
 39 | 		<input type=button id=calculate2 value="Export to 68k ASM" />
 40 | 		<input type="button" value="Clear all squares" onclick="clearAllSquares();" />
 41 | 
 42 | 		<div id="colorpalette" draggable="true" >
 43 | 			<input type="file" id="fileChooser" style="display:none;">
 44 | 			<input type="file" id="fileChooserColors" style="display:none;">
 45 | 			<input id="nbitplanes" value=2 type="range" min="1" max="5" step="1"/><a id="bitplaneslabel">Bitplanes :2</a>
 46 | 			<ul id="colorslist">
 47 | 				<li idcolor="0"><input type=color id="color0" value="#EEE8AA">Color 00</li>
 48 | 				<li idcolor="1"><input type=color id="color1" value="#ff0000">Color 01</li>
 49 | 				<li idcolor="2"><input type=color id="color2" value="#00ff00">Color 02</li>
 50 | 				<li idcolor="3"><input type=color id="color3" value="#0000ff">Color 03</li>
 51 | 				<li idcolor="4"><input type=color id="color4" value="#000000">Color 04</li>
 52 | 				<li idcolor="5"><input type=color id="color5" value="#ff00ff">Color 05</li>
 53 | 				<li idcolor="6"><input type=color id="color6" value="#ff00ff">Color 06</li>
 54 | 				<li idcolor="7"><input type=color id="color7" value="#ff00ff">Color 07</li>
 55 | 				<li idcolor="8"><input type=color id="color8" value="#ff00ff">Color 08</li>
 56 | 				<li idcolor="9"><input type=color id="color9" value="#ff00ff">Color 09</li>
 57 | 				<li idcolor="10"><input type=color id="color10" value="#ff00ff">Color 10</li>
 58 | 				<li idcolor="11"><input type=color id="color11" value="#ff00ff">Color 11</li>
 59 | 				<li idcolor="12"><input type=color id="color12" value="#ff00ff">Color 12</li>
 60 | 				<li idcolor="13"><input type=color id="color13" value="#ff00ff">Color 13</li>
 61 | 				<li idcolor="14"><input type=color id="color14" value="#ff00ff">Color 14</li>
 62 | 				<li idcolor="15"><input type=color id="color15" value="#ff00ff">Color 15</li>
 63 | 				<li idcolor="16"><input type=color id="color16" value="#ff00ff">Color 16</li>
 64 | 				<li idcolor="17"><input type=color id="color17" value="#ff00ff">Color 17</li>
 65 | 				<li idcolor="18"><input type=color id="color18" value="#ff00ff">Color 18</li>
 66 | 				<li idcolor="19"><input type=color id="color19" value="#ff00ff">Color 19</li>
 67 | 				<li idcolor="20"><input type=color id="color20" value="#ff00ff">Color 20</li>
 68 | 				<li idcolor="21"><input type=color id="color21" value="#ff00ff">Color 21</li>
 69 | 				<li idcolor="22"><input type=color id="color22" value="#ff00ff">Color 22</li>
 70 | 				<li idcolor="23"><input type=color id="color23" value="#ff00ff">Color 23</li>
 71 | 				<li idcolor="24"><input type=color id="color24" value="#ff00ff">Color 24</li>
 72 | 				<li idcolor="25"><input type=color id="color25" value="#ff00ff">Color 25</li>
 73 | 				<li idcolor="26"><input type=color id="color26" value="#ff00ff">Color 26</li>
 74 | 				<li idcolor="27"><input type=color id="color27" value="#ff00ff">Color 27</li>
 75 | 				<li idcolor="28"><input type=color id="color28" value="#ff00ff">Color 28</li>
 76 | 				<li idcolor="29"><input type=color id="color29" value="#ff00ff">Color 29</li>
 77 | 				<li idcolor="30"><input type=color id="color30" value="#ff00ff">Color 30</li>
 78 | 				<li idcolor="31"><input type=color id="color31" value="#ff00ff">Color 31</li>
 79 | 			</ul>
 80 | 			<pre id=pospre>
 81 | 			X: 0
 82 | 			Y: 0
 83 | 			</pre>
 84 | 
 85 | 			<div id="swapbuttondiv" style="background-color: antiquewhite;">
 86 | 				Color 1: <select name=swapcolor1 id=swapcolor1>
 87 | 					<option value="0">Color 0</option>
 88 | 					<option value="1" SELECTED>Color 1</option>
 89 | 					<option value="2">Color 2</option>
 90 | 					<option value="3">Color 3</option>
 91 | 					<option value="4">Color 4</option>
 92 | 					<option value="5">Color 5</option>
 93 | 					<option value="6">Color 6</option>
 94 | 					<option value="7">Color 7</option>
 95 | 				</select>
 96 | 				<br>Color 2: <select name=swapcolor2 id=swapcolor2>
 97 | 					<option value="0">Color 0</option>
 98 | 					<option value="1">Color 1</option>
 99 | 					<option value="2" SELECTED>Color 2</option>
100 | 					<option value="3">Color 3</option>
101 | 					<option value="4">Color 4</option>
102 | 					<option value="5">Color 5</option>
103 | 					<option value="6">Color 6</option>
104 | 					<option value="7">Color 7</option>
105 | 				</select>
106 | 				<br><input type=button id=swapcolors value="Swap colors" />
107 | 				<br>Swap palette colors also<input type="checkbox" id="swappalette" />
108 | 				<input id="xres" type="range" min="0" max="320" step="8" value="320" /><a id="xreslabel">X RES :<input type=number id=xresvalue min=0 max=320 step="8" value="320" size="3"></a>
109 | 				<input id="yres" type="range" min="0" max="256" step="1" value="256" /><a id="yreslabel">Y RES :<input type=number id=yresvalue min=0 max=256 step="1" value="256" size="3"></a>
110 | 				<input type=button id=showhex value="Show Hex" />
111 | 				<br><input id="squaresize" type="range" min="10" max="25" step="1" value="5"/><a id="squaresizelabel"></a>
112 | 				<br><input type=button id=importcolors value="Import colors from raw file" onclick="document.getElementById('fileChooserColors').click();" />
113 | 			</div>
114 | 		</div>
115 | 		<div id=result style="display:none;">
116 | 			<textarea id="resultpre"></textarea>
117 | 			<input type=button id=copyresult value="Copy to Clipboard" />
118 | 			<input type="button" class="hideshowcontrols" value="Hide Controls">
119 | 		</div>
120 | 		<ul id="fonttable"></ul>
121 | 	</div>
122 |     <script>
123 | 	var NBITPLANES=2; // The program starts with 2 bitplane
124 | 	var NUMPALETTECOLORS=32; // Amiga internal registers manage up to 32 colors from DFF180 (color 00 to DFF1BE color 31)
125 | 	var SQUARE_PIXELS = 5; // Pixel needed to draw a square
126 | 	var PIXEL_RESOLUTION=[320,256];
127 | 	var XCOORDINATES=[];
128 | 	var YCOORDINATES=[];
129 | 
130 | 	  for (i=0;i<NUMPALETTECOLORS;i++)
131 | 	  {
132 | 	  	var liColor=document.querySelectorAll("#colorslist > li")[i];
133 | 	  	if (i<Math.pow(2,NBITPLANES))
134 | 	  		liColor.style = "display: show";
135 | 	  	else
136 | 	  		liColor.style = "display: none";
137 | 	  }
138 | 
139 | 	  // Manage palette change color
140 | 	  var palette = new FontColorsTable(NBITPLANES);
141 | 
142 | 	  for (i=0;i<NUMPALETTECOLORS;i++)
143 | 	  {
144 | 	  	var colorObj=document.querySelectorAll("#colorslist > li > input[type=color]")[i];
145 | 	  	palette.addFont24BitHexColor(colorObj.value);
146 | 
147 | 	  	colorObj.addEventListener('input',handleChangePaletteColor, false);
148 | 	  }
149 | 	  palette.setFgColorIndex(1);
150 | 	  palette.setBgColorIndex(0);
151 | 
152 | 	  function handleChangePaletteColor(event) {
153 | 	  	palette.changeColor(parseInt(this.parentNode.getAttribute('idcolor')),this.value);
154 | 	  	table.updateColor(parseInt(this.parentNode.getAttribute('idcolor')),this.value);
155 | 	  }
156 | 
157 | 	  // Manage color selection and palette creation
158 | 	  for (i=0;i<NUMPALETTECOLORS;i++)
159 | 	  {
160 | 	  	var fontLiObj=document.querySelectorAll("#colorslist > li")[i];
161 | 	  	fontLiObj.addEventListener('click',handleChangeColor, false);
162 | 	  }
163 | 	  function handleChangeColor(event) { 
164 | 	  for (i=0;i<NUMPALETTECOLORS;i++)
165 | 	  {
166 | 	  	document.querySelectorAll("#colorslist > li")[i].style.background='#9e9e9e';
167 | 	  }
168 | 	  palette.setFgColorIndex(this.getAttribute('idcolor'));
169 | 	  this.style.backgroundColor  = 'red';
170 | 
171 | 	}
172 | 
173 | 	//Create fonts table for characters from ascii 32 to 127
174 | 	var charset = [];
175 | 	for (var i = 48; i <= 48; i++) charset.push(i);
176 | 	//var spriteTable=createSpriteTable(charset,palette,{x:PIXEL_RESOLUTION[0],y: PIXEL_RESOLUTION[1]});
177 | 	//spriteTable.createList();
178 | 	var table=createMonitorTable(charset,palette,{x:PIXEL_RESOLUTION[0],y: PIXEL_RESOLUTION[1]}, function (square) {
179 | 		var xPos=parseInt(parseInt(square.x/2)+64);
180 | 		var yPos=parseInt(parseInt(square.y)+44);
181 | 		console.log(xPos+"-"+xPos.toString(16));
182 | 		console.log(yPos+"-"+yPos.toString(16));
183 | 
184 | 		xPos=xPos<<1;
185 | 		if (square.x%2==1)
186 | 		{
187 | 			xPos=xPos|1;
188 | 		}
189 | 
190 | 		XCOORDINATES.push("$"+xPos.toString(16));
191 | 		YCOORDINATES.push("$"+yPos.toString(16));
192 | 
193 | 		updateResults();
194 | 	},function (square_selected) {
195 | 		document.getElementById('pospre').innerHTML='X : '+square_selected.x+'\nY : '+square_selected.y;
196 | 	});
197 | 	table.createList(document.getElementById("fonttable"));
198 | 	table.appendListToUl(document.getElementById('fontnavigator'));
199 | 
200 | 	// Set change palette callback to update gui if palette changes
201 | 	table.setChangePaletteCallback(
202 | 		function (paletteArray) {
203 | 			for (var i=0;i<paletteArray.length;i++)
204 | 			{
205 | 				document.querySelectorAll("#colorslist > li > input[type=color]")[i].value=paletteArray[i];
206 | 				palette.setBgColorIndex(0);
207 | 				palette.setFgColorIndex(i);
208 | 
209 | 				palette.changeColor(i,paletteArray[i]);
210 | 				table.updateColor(i,paletteArray[i]);
211 | 			}
212 | 		}
213 | 	);
214 | 
215 | 	// Handle file export click
216 | 	var calculate = document.getElementById('calculate');
217 | 	calculate.onclick = function() {
218 | 		var binaryData=table.getBinaryData(palette.nBitplanes);
219 | 		//console.log(binaryData);
220 | 		var fileName = prompt("Please enter the name of your export file", "Mybitplanes.raw");
221 | 		if (fileName)
222 | 			saveByteArray([binaryData], fileName);
223 | 	};
224 | 
225 | 	// Handle file export click
226 | 	var calculate2 = document.getElementById('calculate2');
227 | 	calculate2.onclick = function() {
228 | 		var binaryData=table.getBinaryDataStringAsm(palette.nBitplanes);
229 | 		console.log(binaryData);
230 | 		var fileName = prompt("Please enter the name of your export file", "MybitplanesASM.s");
231 | 		if (fileName)
232 | 		{
233 | 			var blob = new Blob([binaryData],
234 |                 { type: "text/plain;charset=utf-8" });
235 | 				const a = document.createElement('a');
236 | 
237 | 				a.href= URL.createObjectURL(blob);
238 | 				a.download = fileName;
239 | 				a.click();
240 | 
241 | 				URL.revokeObjectURL(a.href);
242 | 		}
243 | 	};
244 | 
245 | 	var saveByteArray = (function () {
246 | 		var a = document.createElement("a");
247 | 		document.body.appendChild(a);
248 | 		a.style = "display: none";
249 | 		return function (data, name) {
250 | 		    var blob = new Blob(data, {type: "octet/stream"}),
251 | 		    url = window.URL.createObjectURL(blob);
252 | 		    a.href = url;
253 | 		    a.download = name;
254 | 		    a.click();
255 | 		    window.URL.revokeObjectURL(url);
256 | 		};
257 | 	}());
258 | 
259 | 	document.querySelector("#fileChooser").addEventListener('change',filesChosen, false);
260 | 	function filesChosen(evt){
261 | 		var chosenFile = evt.target.files[0]; //get the first file in the FileList
262 | 		var fileName = chosenFile.name; //the name of the file as a string
263 | 		var fileSize = chosenFile.size; //the size of the file in bytes, as an integer
264 | 		var fileModifiedDate = chosenFile.lastModifiedDate; //a Date object
265 | 		//console.log(chosenFile);
266 | 		reader = new FileReader();
267 | 		//reader.addEventListener("load", readFile, false);
268 | 		reader.readAsArrayBuffer(document.querySelector("#fileChooser").files[0]);
269 | 		reader.onloadend = function () {
270 | 			table.drawRawImg(new Uint8Array(reader.result),parseInt(document.getElementById("nbitplanes").value));
271 | 			alert('File '+fileName+' loaded succesfully');
272 | 			document.getElementById('fileChooser').value = null;
273 | 			return ;
274 | 		}
275 | 	}
276 | 
277 | 
278 | 	document.querySelector("#copyresult").addEventListener('click',copyToClipboard,false);
279 | 	function copyToClipboard()
280 | 	{
281 | 		var ta = document.getElementById('resultpre');
282 | 		ta.focus();
283 | 		ta.select();
284 | 	}
285 | 
286 | 
287 | 	//document.querySelector(".hideshowcontrols").addEventListener('click',hideshowcontrols,false);
288 | 	var classname = document.getElementsByClassName("hideshowcontrols");
289 | 	for (var i = 0; i < classname.length; i++) {
290 |     	classname[i].addEventListener('click', hideshowcontrols, false);
291 | 	}
292 | 	function hideshowcontrols()
293 | 	{
294 | 		if (this.value=="Hide Controls")
295 | 		{
296 | 			document.querySelector(".hideshowcontrols").value="Show Controls";
297 | 			document.querySelector("#colorpalette").style.display = "none";
298 | 			return;
299 | 		}
300 | 		document.querySelector(".hideshowcontrols").value="Hide Controls";
301 | 		document.querySelector("#colorpalette").style.display = "block";
302 | 	}
303 | 
304 | 	function updateResults()
305 | 	{
306 | 
307 | 		for (var i=0;i<XCOORDINATES.length;i++)
308 | 		{
309 | 			var virgola="";
310 | 			if (i>0) virgola=",";
311 | 			if (i>0 && i%10==0) { document.getElementById("resultpre").innerHTML +='\n\tdc.w '; virgola="";}
312 | 			document.getElementById("resultpre").innerHTML += virgola+XCOORDINATES[i];
313 | 		}
314 | 
315 | 		document.getElementById("resultpre").innerHTML += '\nFINETABX';
316 | 
317 | 		document.getElementById("resultpre").innerHTML += '\n\nTABY\n\tdc.w ';
318 | 		for (var i=0;i<YCOORDINATES.length;i++)
319 | 		{
320 | 			var virgola="";
321 | 			if (i>0) virgola=",";
322 | 			if (i>0 && i%10==0) { document.getElementById("resultpre").innerHTML +='\n\tdc.w '; virgola="";}
323 | 			document.getElementById("resultpre").innerHTML += virgola+YCOORDINATES[i];
324 | 		}
325 | 
326 | 		document.getElementById("resultpre").innerHTML += '\nFINETABY';
327 | 	}
328 | 	document.getElementById("colorpalette").addEventListener('dragend',dragfunction,false);
329 | 	function dragfunction (data)
330 | 	{
331 | 		document.getElementById("colorpalette").style.left = data.screenX + 'px';
332 |     	document.getElementById("colorpalette").style.top = data.screenY-173 + 'px';
333 | 	}
334 | 	// Manage slider for changing bitplane numbers
335 | 	document.getElementById('nbitplanes').addEventListener('change',handleChangeBitplaneNumber,false);
336 | 	function handleChangeBitplaneNumber(event)
337 | 	{
338 | 		palette.changeBitplanes(this.value*1);
339 | 
340 | 		var swap1elem = document.getElementById("swapcolor1");
341 | 		for(i = swap1elem.options.length - 1; i >= 0; i--) swap1elem.remove(i);
342 | 		var swap2elem = document.getElementById("swapcolor2");
343 | 		for(i = swap2elem.options.length - 1; i >= 0; i--) swap2elem.remove(i);
344 | 
345 | 	  	// Hide out of range palettes
346 | 	  	for (i=0;i<NUMPALETTECOLORS;i++)
347 | 	  	{
348 | 	  		var liColor=document.querySelectorAll("#colorslist > li")[i];
349 | 	  		if (i<Math.pow(2,this.value*1))
350 | 			{
351 | 	  			liColor.style = "display: show";
352 | 				var option = document.createElement("option");
353 | 				option.text = "Color "+(i+0);
354 | 				option.value = i;
355 | 				swap1elem.add(option);
356 | 				var option = document.createElement("option");
357 | 				option.text = "Color "+(i+0);
358 | 				option.value = i;
359 | 				swap2elem.add(option);
360 | 			}
361 | 			else
362 | 	  			liColor.style = "display: none";
363 | 	  		var colorObj=document.querySelectorAll("#colorslist > li > input[type=color]")[i];
364 | 	  		palette.addFont24BitHexColorAtPos(colorObj.value,i);
365 | 	  	}
366 | 
367 | 	  	//Bitplane label update
368 | 	  	document.getElementById('bitplaneslabel').innerHTML='Bitplanes :'+this.value;
369 | 
370 | 	  	table.updatePalette(palette);
371 | 	  	palette.setFgColorIndex(1);
372 | 	  	palette.setBgColorIndex(0);
373 | 	}
374 | 	function clearAllSquares()
375 | 	{
376 | 		table.clearRawImg();
377 | 	}
378 | 
379 | 	var swapcolors=document.getElementById('swapcolors');
380 | 	swapcolors.onclick = function() {
381 | 		var colorswap1 = document.getElementById("swapcolor1").value;
382 | 		var colorswap2 = document.getElementById("swapcolor2").value;;
383 | 		var color1 = document.getElementById('color'+colorswap1).value;
384 | 		var color2 = document.getElementById('color'+colorswap2).value;
385 | 
386 | 		//console.log(color1);
387 | 		//console.log(color2);
388 | 
389 | 		table.swapColors(colorswap1,colorswap2); // swap squares
390 | 
391 | 		if (document.getElementById("swappalette").checked)
392 | 		{
393 | 			palette.changeColor(colorswap2,color1);
394 | 			document.getElementById('color'+colorswap2).value = color1;
395 | 			table.refreshColor(colorswap2,color1);
396 | 
397 | 			palette.changeColor(colorswap1,color2);
398 | 			document.getElementById('color'+colorswap1).value = color2;
399 | 			table.refreshColor(colorswap1,color2);
400 | 		}
401 | 
402 | 		return ;
403 | 	};
404 | 
405 | 	// Handle xres change
406 | 	document.getElementById('xresvalue').addEventListener('change',handleChangeXres,false);
407 | 	document.getElementById('xres').addEventListener('change',handleChangeXres,false);
408 | 	function handleChangeXres(event)
409 | 	{
410 | 		document.getElementById('xreslabel').innerHTML='X RES :<input type=number id=xresvalue min=0 max=320 step="8" value="' + this.value+ '" size="3">';
411 | 		document.getElementById('xresvalue').addEventListener('change',handleChangeXres,false);
412 | 		document.getElementById('xres').value = this.value;
413 | 		table.changeFontXRes(parseInt(this.value));
414 | 	}
415 | 
416 | 	// Handle yres change
417 | 	document.getElementById('yresvalue').addEventListener('change',handleChangeYres,false);
418 | 	document.getElementById('yres').addEventListener('change',handleChangeYres,false);
419 | 	function handleChangeYres(event)
420 | 	{
421 | 		document.getElementById('yreslabel').innerHTML='Y RES :<input type=number id=yresvalue min=0 max=255 step="1" value="' + this.value+ '" size="3">';
422 | 		document.getElementById('yresvalue').addEventListener('change',handleChangeYres,false);
423 | 		document.getElementById('yres').value = this.value;
424 | 		table.changeFontYRes(parseInt(this.value));
425 | 	}
426 | 
427 | 	// Handle click on SHOWEXSTRING button
428 | 	var showhex=document.getElementById('showhex');
429 | 	showhex.onclick = function() {
430 | 		var formattedHex=chunk(table.getHexDataString(palette.nBitplanes), 2).join(' ');
431 | 		var formattedHex=chunk(formattedHex, 24).join('\n');
432 | 		document.getElementById("resultpre").innerHTML = formattedHex;
433 | 		document.getElementById("result").style.display="block";
434 | 		return ;
435 | 	};
436 | 	function chunk(str, n) {
437 | 		var ret = [];
438 | 		var i;
439 | 		var len;
440 | 
441 | 		for(i = 0, len = str.length; i < len; i += n) {
442 | 		   ret.push(str.substr(i, n))
443 | 		}
444 | 
445 | 		return ret
446 |    	};
447 | 
448 | 	// Set default square size
449 | 	document.getElementById('squaresize').value=SQUARE_PIXELS;
450 | 	document.getElementById('squaresizelabel').innerHTML='Square size :'+SQUARE_PIXELS;
451 | 
452 | 	// Manage slider for changing bitplane numbers
453 | 	document.getElementById('squaresize').addEventListener('change',handleChangeSquareSize,false);
454 | 	function handleChangeSquareSize(event)
455 | 	{
456 | 		table.updateSquareSize(this.value*1);
457 | 		document.getElementById('squaresizelabel').innerHTML='Square size :'+SQUARE_PIXELS;
458 | 	}
459 | 
460 | 	document.getElementById('hidehex').addEventListener('click',handleChangeHideHex,false);
461 | 	function handleChangeHideHex(event)
462 | 	{
463 | 		if (document.getElementById('result').style.display=='none')
464 | 		{
465 | 			var formattedHex=chunk(table.getHexDataString(palette.nBitplanes), 2).join(' ');
466 | 			var formattedHex=chunk(formattedHex, 24).join('\n');
467 | 			document.getElementById("resultpre").innerHTML = formattedHex;
468 | 			document.getElementById("result").style.display="block";
469 | 			document.getElementById('result').style.display='block';
470 | 			document.getElementById('hidehex').value="Hide hex";
471 | 		}
472 | 		else
473 | 		{
474 | 			var formattedHex=chunk(table.getHexDataString(palette.nBitplanes), 2).join(' ');
475 | 			document.getElementById('result').style.display='none';
476 | 			document.getElementById('hidehex').value="Show hex";
477 | 		}
478 | 	}
479 | 	document.querySelector("#fileChooserColors").addEventListener('change',filesChosenColors, false);
480 | 	function filesChosenColors(evt){
481 | 		var chosenFile = evt.target.files[0]; //get the first file in the FileList
482 | 		var fileName = chosenFile.name; //the name of the file as a string
483 | 		var fileSize = chosenFile.size; //the size of the file in bytes, as an integer
484 | 		var fileModifiedDate = chosenFile.lastModifiedDate; //a Date object
485 | 		//console.log(chosenFile);
486 | 		reader = new FileReader();
487 | 
488 | 		reader.readAsArrayBuffer(document.querySelector("#fileChooserColors").files[0]);
489 | 		reader.onloadend = function () {
490 | 			var colors = new Uint8Array(reader.result);
491 | 			var colindex=0;
492 | 			for (var colcounter = 0; colcounter < colors.byteLength ; colcounter += 2)
493 | 			{
494 | 				console.log("Processing color "+colindex);
495 | 				// get red
496 | 				var byte = colors[colcounter];
497 | 				byte&=0x0f;
498 | 				var byte2=byte;
499 | 				byte2=byte2 << 4;
500 | 				byte = byte|byte2;
501 | 				var red = byte;
502 | 				console.log("Red is "+red.toString(16));
503 | 
504 | 				byte = colors[colcounter+1];
505 | 				byte &= 0xf0;
506 | 				byte2 = byte;
507 | 				byte2 = byte2 >> 4;
508 | 				var green = byte|byte2;
509 | 				console.log("Green is"+green.toString(16));
510 | 
511 | 				byte = colors[colcounter+1];
512 | 				byte &= 0x0f;
513 | 				byte2 = byte;
514 | 				byte2 = byte2 << 4;
515 | 				var blue = byte|byte2;
516 | 				console.log("Blue is"+blue.toString(16));
517 | 
518 | 				var convertedcolor="#"+red.toString(16).padStart(2, '0')+green.toString(16).padStart(2, '0')+blue.toString(16).padStart(2, '0');
519 | 				console.log("converted color is "+convertedcolor);
520 | 
521 | 				document.getElementById("color"+colindex).value=convertedcolor;
522 | 				palette.changeColor(parseInt(colindex),convertedcolor);
523 | 				table.updateColor(parseInt(colindex),convertedcolor);
524 | 
525 | 				colindex++;
526 | 			}
527 | 			alert('File '+fileName+' loaded succesfully');
528 | 			document.getElementById('fileChooserColors').value = null;
529 | 			return ;
530 | 		}
531 | 	}
532 | 
533 |     </script>
534 |   </body>
535 | </html>
536 | 


--------------------------------------------------------------------------------
/index_sprite.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE HTML>
  2 | <html>
  3 |   <head>
  4 |     <link rel="stylesheet" type="text/css" href="css/AmigaFontEditor.css">
  5 | 	<script src="js/AmigaFontEditor.js"></script>
  6 | 	<script src="js/UPNG.js"></script>
  7 | 	<script src="js/pako.js"></script>
  8 |   </head>
  9 |   <body>
 10 | 	<a href="https://github.com/Ozzyboshi/AmigaFontEditor"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/652c5b9acfaddf3a9c326fa6bde407b87f7be0f4/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6f72616e67655f6666373630302e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_orange_ff7600.png"></a>
 11 | 	<div class="topnav">
 12 | 	  <a href="index.html">Fonts</a>
 13 | 	  <a class="active" href="#">Sprite</a>
 14 | 	  <a href="index_sprite_position.html">Sprite position</a>
 15 | 	  <a  href="register_conversion.html">Register conversion</a>
 16 | 	  <a  href="copperlist_translator.html">Copperlist translator</a>
 17 | 	  <a  href="diwstartstop.html">Diwstart/stop</a>
 18 | 	  <a  href="projection.html">Point Projection</a>
 19 | 	  <a  href="trigonometry.html">Trigonometric tables</a>
 20 | 	  <a href="raw2planar.html">Raw 2 planar viewer</a>
 21 | 	  <a href="rgbcolors.html">RGB Colors</a>
 22 | 	  <a href="sqrt.html">Square root tables</a>
 23 | 	  <a href="deltas.html">Deltas table calculator</a>
 24 | 	  <a href="number_interpreter.html">Number interpreter</a>
 25 | 	  <a href="rawdiff.html">Raw diff</a>
 26 | 	</div>
 27 | 
 28 | 	<div id="content" style="padding:25px">
 29 | 		<h2>Amiga sprite editor</h2>
 30 | 		<h4>Draw your sprite on the left grid and get the binary raw data to load into the Amiga copperlist</h4>
 31 | 		<input type="button" id="loadpngsprite" value="Load png sprite" onClick="document.getElementById('loadpngspritereal').click();" DISABLED>
 32 | 		<input type=file id="loadpngspritereal" style="display:none;">
 33 | 		<input type="button" class="hideshowcontrols" value="Hide Controls">
 34 | 
 35 | 		<div id="fontnavigator" style="display:none;">
 36 | 			<ul id="fontulnavigator" style="display:none;">
 37 | 			</ul>
 38 | 		</div>
 39 | 		<div id="colorpalette" draggable=false>
 40 | 			<input type="file" id="fileChooser" style="display:none;">
 41 | 			<input type="file" id="fileChooserColors" style="display:none;">
 42 | 			<input id="numattachedsprites" type="range" min="0" max="7" step="1" value="0"/><a id="numattachedspriteslabel"></a>
 43 | 			<input id="squaresize" type="range" min="10" max="25" step="1" value="10"/><a id="squaresizelabel"></a>
 44 | 			<input id="nbitplanes" type="range" min="2" max="4" step="2"/><a id="bitplaneslabel">Bitplanes :5</a>
 45 | 			<ul id="colorslist">
 46 | 				<li idcolor="0"><input type=color id="color0" value="#EEE8AA">Color 16</li>
 47 | 				<li idcolor="1"><input type=color id="color1" value="#ff0000">Color 17</li>
 48 | 				<li idcolor="2"><input type=color id="color2" value="#00ff00">Color 18</li>
 49 | 				<li idcolor="3"><input type=color id="color3" value="#0000ff">Color 19</li>
 50 | 				<li idcolor="4"><input type=color id="color4" value="#000000">Color 20</li>
 51 | 				<li idcolor="5"><input type=color id="color5" value="#ff00ff">Color 21</li>
 52 | 				<li idcolor="6"><input type=color id="color6" value="#ff00ff">Color 22</li>
 53 | 				<li idcolor="7"><input type=color id="color7" value="#ff00ff">Color 23</li>
 54 | 				<li idcolor="8"><input type=color id="color8" value="#ff00ff">Color 24</li>
 55 | 				<li idcolor="9"><input type=color id="color9" value="#ff00ff">Color 25</li>
 56 | 				<li idcolor="10"><input type=color id="color10" value="#ff00ff">Color 26</li>
 57 | 				<li idcolor="11"><input type=color id="color11" value="#ff00ff">Color 27</li>
 58 | 				<li idcolor="12"><input type=color id="color12" value="#ff00ff">Color 28</li>
 59 | 				<li idcolor="13"><input type=color id="color13" value="#ff00ff">Color 29</li>
 60 | 				<li idcolor="14"><input type=color id="color14" value="#ff00ff">Color 30</li>
 61 | 				<li idcolor="15"><input type=color id="color15" value="#ff00ff">Color 31</li>
 62 | 			</ul>
 63 | 			<input id="xres" type="range" min="16" max="16" step="8"/><a id="xreslabel">X resolution :8</a>
 64 | 			<input id="yres" type="range" min="8" max="256" step="1"/><a id="yreslabel">Y resolution :8</a>
 65 | 			<div id="swapbuttondiv" style="background-color: antiquewhite;">
 66 | 				Color 1: <select name=swapcolor1 id=swapcolor1>
 67 | 					<option value="0">Color 16</option>
 68 | 					<option value="1" SELECTED>Color 17</option>
 69 | 					<option value="2">Color 18</option>
 70 | 					<option value="3">Color 19</option>
 71 | 				</select>
 72 | 				<br>Color 2: <select name=swapcolor2 id=swapcolor2>
 73 | 					<option value="0">Color 16</option>
 74 | 					<option value="1">Color 17</option>
 75 | 					<option value="2" SELECTED>Color 18</option>
 76 | 					<option value="3">Color 19</option>
 77 | 				</select>
 78 | 				<br><input type=button id=swapcolors value="Swap colors" /> <input type=button id=importcolors value="Import colors from copperlist fragment" onclick="document.getElementById('fileChooserColors').click();" />
 79 | 				<br>Swap palette colors also<input type="checkbox" id="swappalette" />
 80 | 			</div>
 81 | 		</div>
 82 | 		<div id=result>
 83 | 			<div id="buttondiv">
 84 | 				<input type=button id=showbin value="Show Binary" />
 85 | 				<input type=button id=showhex value="Show Hex" />
 86 | 				<input type="button" value="Amiga colors code" id="amigacolorscode" />
 87 | 				<input type="button" value="Sprite binary code" id="spritebinarycode" />
 88 | 			</div>
 89 | 			<textarea id="resultpre" style="overflow-y: auto;"></textarea>
 90 | 			<input type=button id=copyresult value="Copy to Clipboard" />
 91 | 			<input type=button id=calculate value="Generate Raw File" />
 92 | 			<input type="button" value="Import From Raw File" onclick="document.getElementById('fileChooser').click();" />
 93 | 		</div>
 94 | 		<ul id="fonttable"></ul>
 95 | 	</div>
 96 |     <script>
 97 | 	  var NBITPLANES=2; // The program starts with 2 bitplanes
 98 | 	  var NUMPALETTECOLORS=16; // Amiga internal registers manage up to 16 colors for sprites
 99 | 	  var SQUARE_PIXELS = 10; // Pixel needed to draw a square
100 | 	  var PIXEL_RESOLUTION=[16,16];
101 | 	  var NUMATTACHEDSPRITES = 0;
102 | 
103 | 	  // set default xres-yres in sliders
104 | 	  document.getElementById('xres').value=PIXEL_RESOLUTION[0];
105 | 	  document.getElementById('yres').value=PIXEL_RESOLUTION[1];
106 | 	  document.getElementById('xreslabel').innerHTML='X Resolution :'+PIXEL_RESOLUTION[0];
107 | 	  document.getElementById('yreslabel').innerHTML='Y Resolution :'+PIXEL_RESOLUTION[1];
108 | 
109 | 	  // Handle xres change
110 | 	  document.getElementById('xres').addEventListener('change',handleChangeXres,false);
111 | 	  function handleChangeXres(event)
112 | 	  {
113 | 	  	document.getElementById('xreslabel').innerHTML='X Resolution :'+this.value;
114 | 	  	table.changeFontXRes(parseInt(this.value));
115 | 	  }
116 | 
117 | 	  // Handle yres change
118 | 	  document.getElementById('yres').addEventListener('change',handleChangeYres,false);
119 | 	  function handleChangeYres(event)
120 | 	  {
121 | 	  	document.getElementById('yreslabel').innerHTML='Y Resolution :'+this.value;
122 | 	  	table.changeFontYRes(parseInt(this.value));
123 | 	  }
124 | 
125 | 	  // Set default num attached sprites
126 | 	  document.getElementById('numattachedsprites').value=NUMATTACHEDSPRITES;
127 | 	  document.getElementById('numattachedspriteslabel').innerHTML='Attached sprites :'+NUMATTACHEDSPRITES;
128 | 
129 | 	  // Manage slider for changing bitplane numbers
130 | 	  document.getElementById('numattachedsprites').addEventListener('change',handleChangeNumAttachedSprites,false);
131 | 	  function handleChangeNumAttachedSprites(event)
132 | 	  {
133 | 		var ulElement = document.getElementById("fonttable");
134 | 		if (ulElement) 
135 | 		{
136 |   			while (ulElement.firstChild) 
137 | 			{
138 |     			ulElement.removeChild(ulElement.firstChild);
139 |   			}
140 | 		}
141 | 		//table.updateSquareSize(this.value*1);
142 | 		NUMATTACHEDSPRITES = parseInt(document.getElementById('numattachedsprites').value);
143 | 
144 | 		var charset = [];
145 | 		for (var i = 48; i <= 48+NUMATTACHEDSPRITES; i++) charset.push(i);
146 | 		table=createSpriteTable(charset,palette,{x:PIXEL_RESOLUTION[0],y: PIXEL_RESOLUTION[1]});
147 | 		table.createList(document.getElementById("fonttable"));
148 | 		table.appendListToUl(document.getElementById('fontnavigator'));
149 | 
150 | 		// Set change palette callback to update gui if palette changes
151 | 		table.setChangePaletteCallback(
152 | 			function (paletteArray) {
153 | 				for (var i=0;i<paletteArray.length;i++)
154 | 				{
155 | 					document.querySelectorAll("#colorslist > li > input[type=color]")[i].value=paletteArray[i];
156 | 					palette.setBgColorIndex(0);
157 | 					palette.setFgColorIndex(i);
158 | 					palette.changeColor(i,paletteArray[i]);
159 | 					table.updateColor(i,paletteArray[i]);
160 | 				}
161 | 			}
162 | 		);
163 | 		document.getElementById('numattachedspriteslabel').innerHTML='Attached sprites :'+NUMATTACHEDSPRITES;
164 | 		document.getElementById('loadpngsprite').disabled = NUMATTACHEDSPRITES>0?false:true;
165 | 	  	table.changeFontYRes(parseInt(document.getElementById('yres').value));
166 | 	  }
167 | 
168 | 	  // Set default square size
169 | 	  document.getElementById('squaresize').value=SQUARE_PIXELS;
170 | 	  document.getElementById('squaresizelabel').innerHTML='Square size :'+SQUARE_PIXELS;
171 | 
172 | 	  // Manage slider for changing bitplane numbers
173 | 	  document.getElementById('squaresize').addEventListener('change',handleChangeSquareSize,false);
174 | 	  function handleChangeSquareSize(event)
175 | 	  {
176 | 		table.updateSquareSize(this.value*1);
177 | 		document.getElementById('squaresizelabel').innerHTML='Square size :'+SQUARE_PIXELS;
178 | 	  }
179 | 
180 | 	  // Set default bitplanes in slider
181 | 	  document.getElementById('nbitplanes').value=NBITPLANES;
182 | 	  document.getElementById('bitplaneslabel').innerHTML='Bitplanes :'+NBITPLANES;
183 | 	  for (i=0;i<NUMPALETTECOLORS;i++)
184 | 	  {
185 | 	  	var liColor=document.querySelectorAll("#colorslist > li")[i];
186 | 	  	if (i<Math.pow(2,NBITPLANES))
187 | 	  		liColor.style = "display: show";
188 | 	  	else
189 | 	  		liColor.style = "display: none";
190 | 	  }
191 | 
192 | 	  // Manage slider for changing bitplane numbers
193 | 	  document.getElementById('nbitplanes').addEventListener('change',handleChangeBitplaneNumber,false);
194 | 	  function handleChangeBitplaneNumber(event)
195 | 	  {
196 | 	  	palette.changeBitplanes(this.value*1);
197 | 
198 | 		var swap1elem = document.getElementById("swapcolor1");
199 | 		for(i = swap1elem.options.length - 1; i >= 0; i--) swap1elem.remove(i);
200 | 		var swap2elem = document.getElementById("swapcolor2");
201 | 		for(i = swap2elem.options.length - 1; i >= 0; i--) swap2elem.remove(i);
202 | 
203 | 	  	// Hide out of range palettes
204 | 	  	for (i=0;i<NUMPALETTECOLORS;i++)
205 | 	  	{
206 | 	  		var liColor=document.querySelectorAll("#colorslist > li")[i];
207 | 	  		if (i<Math.pow(2,this.value*1))
208 | 			{
209 | 	  			liColor.style = "display: show";
210 | 				var option = document.createElement("option");
211 | 				option.text = "Color "+(i+16);
212 | 				option.value = i;
213 | 				swap1elem.add(option);
214 | 				var option = document.createElement("option");
215 | 				option.text = "Color "+(i+16);
216 | 				option.value = i;
217 | 				swap2elem.add(option);
218 | 			}
219 | 			else
220 | 	  			liColor.style = "display: none";
221 | 	  		var colorObj=document.querySelectorAll("#colorslist > li > input[type=color]")[i];
222 | 	  		palette.addFont24BitHexColorAtPos(colorObj.value,i);
223 | 
224 | 	  	}
225 | 
226 | 	  	//Bitplane label update
227 | 	  	document.getElementById('bitplaneslabel').innerHTML='Bitplanes :'+this.value;
228 | 
229 | 	  	table.updatePalette(palette);
230 | 	  	palette.setFgColorIndex(1);
231 | 	  	palette.setBgColorIndex(0);
232 | 	  }
233 | 
234 | 	  // Manage palette change color
235 | 	  var palette = new FontColorsTable(NBITPLANES);
236 | 
237 | 	  for (i=0;i<NUMPALETTECOLORS;i++)
238 | 	  {
239 | 	  	var colorObj=document.querySelectorAll("#colorslist > li > input[type=color]")[i];
240 | 	  	palette.addFont24BitHexColor(colorObj.value);
241 | 
242 | 	  	colorObj.addEventListener('input',handleChangePaletteColor, false);
243 | 	  }
244 | 	  palette.setFgColorIndex(1);
245 | 	  palette.setBgColorIndex(0);
246 | 
247 | 	  function handleChangePaletteColor(event) {
248 | 	  	palette.changeColor(parseInt(this.parentNode.getAttribute('idcolor')),this.value);
249 | 	  	table.updateColor(parseInt(this.parentNode.getAttribute('idcolor')),this.value);
250 | 	  }
251 | 
252 | 	  // Manage color selection and palette creation
253 | 	  for (i=0;i<NUMPALETTECOLORS;i++)
254 | 	  {
255 | 	  	var fontLiObj=document.querySelectorAll("#colorslist > li")[i];
256 | 	  	fontLiObj.addEventListener('click',handleChangeColor, false);
257 | 	  }
258 | 	  function handleChangeColor(event) {
259 | 	  for (i=0;i<NUMPALETTECOLORS;i++)
260 | 	  {
261 | 	  	document.querySelectorAll("#colorslist > li")[i].style.background='#9e9e9e';
262 | 	  }
263 | 	  palette.setFgColorIndex(this.getAttribute('idcolor'));
264 | 	  this.style.backgroundColor  = 'red';
265 | 
266 | 	}
267 | 
268 | 	//Create fonts table for characters from ascii 32 to 12
269 | 	var table=createSpriteTable([48],palette,{x:PIXEL_RESOLUTION[0],y: PIXEL_RESOLUTION[1]});
270 | 	table.createList(document.getElementById("fonttable"));
271 | 	table.appendListToUl(document.getElementById('fontnavigator'));
272 | 
273 | 	// Set change palette callback to update gui if palette changes
274 | 	table.setChangePaletteCallback(
275 | 		function (paletteArray) {
276 | 			for (var i=0;i<paletteArray.length;i++)
277 | 			{
278 | 				document.querySelectorAll("#colorslist > li > input[type=color]")[i].value=paletteArray[i];
279 | 				palette.setBgColorIndex(0);
280 | 				palette.setFgColorIndex(i);
281 | 				palette.changeColor(i,paletteArray[i]);
282 | 				table.updateColor(i,paletteArray[i]);
283 | 			}
284 | 		}
285 | 	);
286 | 
287 | 	// Handle file export click
288 | 	var calculate = document.getElementById('calculate');
289 | 	calculate.onclick = function() {
290 | 		let arrayResult = new Uint8Array();
291 | 
292 | 		for (contfont = 0 ; contfont <= NUMATTACHEDSPRITES; contfont++)
293 | 		{
294 | 			var binaryData=table.getBinaryDataByFont(contfont,palette.nBitplanes);
295 | 			var concatenatedArray = new Uint8Array(arrayResult.length + binaryData.length);
296 | 			//concatenatedArray.set(binaryData, 0);
297 | 			//concatenatedArray.set(arrayResult, binaryData.length);
298 | 			concatenatedArray.set(arrayResult, 0);
299 | 			concatenatedArray.set(binaryData, arrayResult.length);
300 | 
301 | 			arrayResult = concatenatedArray;
302 | 
303 | 			//console.log(binaryData);
304 | 		}
305 | 		var fileName = prompt("Please enter the name of your export file", "Myfonts.fnt");
306 | 		if (fileName)
307 | 			saveByteArray([arrayResult], fileName);
308 | 	};
309 | 
310 | 	var saveByteArray = (function () {
311 | 		var a = document.createElement("a");
312 | 		document.body.appendChild(a);
313 | 		a.style = "display: none";
314 | 		return function (data, name) {
315 | 		    var blob = new Blob(data, {type: "octet/stream"}),
316 | 		    url = window.URL.createObjectURL(blob);
317 | 		    a.href = url;
318 | 		    a.download = name;
319 | 		    a.click();
320 | 		    window.URL.revokeObjectURL(url);
321 | 		};
322 | 	}());
323 | 
324 | 	// Handle click on SHOWBINARYSTRING button
325 | 	var showbin=document.getElementById('showbin');
326 | 	showbin.onclick = function() {
327 | 		document.getElementById("resultpre").innerHTML = "";
328 | 		for (contfont = 0 ; contfont <= NUMATTACHEDSPRITES; contfont++)
329 | 		{
330 | 			var data = table.getBinaryDataStringByFont(contfont,palette.nBitplanes);
331 | 			var formattedBinary=chunk(data,8).join(' ');
332 | 			formattedBinary=chunk(formattedBinary, 72).join('\n');
333 | 			if (contfont) document.getElementById("resultpre").innerHTML += "\n";
334 | 			document.getElementById("resultpre").innerHTML += formattedBinary;
335 | 		}
336 | 	};
337 | 
338 | 	// Handle click on SHOWEXSTRING button
339 | 	var showhex=document.getElementById('showhex');
340 | 	showhex.onclick = function() {
341 | 		document.getElementById("resultpre").innerHTML = "";
342 | 		for (contfont = 0 ; contfont <= NUMATTACHEDSPRITES; contfont++)
343 | 		{
344 | 			var data = table.getHexDataStringByFont(contfont,palette.nBitplanes)
345 | 			var formattedHex=chunk(data, 2).join(' ');
346 | 			var formattedHex=chunk(formattedHex, 24).join('\n');
347 | 			if (contfont) document.getElementById("resultpre").innerHTML += "\n";
348 | 			document.getElementById("resultpre").innerHTML += formattedHex;
349 | 		}
350 | 		return ;
351 | 	};
352 | 
353 | 	// Handle click on Show amiga binary code button
354 | 	var spritebinarycode=document.getElementById('spritebinarycode');
355 | 	spritebinarycode.onclick = function() {
356 | 		document.getElementById("resultpre").innerHTML = "";
357 | 		for (contfont = 0 ; contfont <= NUMATTACHEDSPRITES; contfont++)
358 | 		{
359 | 			var totalResolution=table.resolution.x*table.resolution.y*palette.nBitplanes/4;
360 | 			totalResolution/=(palette.nBitplanes/2);
361 | 			console.log("res = "+totalResolution);
362 | 			var totalHexCode = table.getHexDataStringByFont(contfont,palette.nBitplanes);
363 | 			var amigaCode="";
364 | 			for (var contBitplanes=0;contBitplanes<palette.nBitplanes;contBitplanes+=2)
365 | 			{
366 | 				var hexCode="";
367 | 				var vStop=table.resolution.y+48;
368 | 				if (contBitplanes==0)
369 | 				{
370 | 					amigaCode = "MYSPRITE"+contfont+"\nVSTART	dc.b $30\nHSTART\tdc.b $90\nVSTOP\tdc.b $"+vStop.toString(16)+",$00\n";
371 | 					hexCode=totalHexCode.slice(0,totalResolution);
372 | 				}
373 | 				else
374 | 				{
375 | 					amigaCode += "MYSPRITE"+contfont+"\nVSTART	dc.b $30\nHSTART\tdc.b\t$90\nVSTOP\tdc.b\t$"+vStop.toString(16)+",%10000000\n";
376 | 					hexCode=totalHexCode.slice(totalResolution,totalResolution*2);
377 | 				}
378 | 				var imgLength=hexCode.length/2;
379 | 				var line=0;
380 | 				for (var i=0;i<imgLength;i+=4)
381 | 				{
382 | 					line++;
383 | 					amigaCode+="\tdc.w $"+hexCode[i]+hexCode[i+1]+hexCode[i+2]+hexCode[i+3]+",$"+hexCode[i+imgLength]+hexCode[i+1+imgLength]+hexCode[i+2+imgLength]+hexCode[i+3+imgLength]+" ; line "+line+"\n";
384 | 				}
385 | 				amigaCode+="\tdc.w 0,0\n";
386 | 			}
387 | 			console.log(amigaCode);
388 | 			document.getElementById("resultpre").innerHTML += amigaCode;
389 | 		}
390 | 		return ;
391 | 	};
392 | 
393 | 	function chunk(str, n) {
394 | 		var ret = [];
395 | 		var i;
396 | 		var len;
397 | 
398 | 		for(i = 0, len = str.length; i < len; i += n) {
399 | 		   ret.push(str.substr(i, n))
400 | 		}
401 | 
402 | 		return ret
403 |    	};
404 | 
405 | 	document.querySelector("#fileChooser").addEventListener('change',filesChosen, false);
406 | 	function filesChosen(evt){
407 | 		var chosenFile = evt.target.files[0]; //get the first file in the FileList
408 | 		var fileName = chosenFile.name; //the name of the file as a string
409 | 		var fileSize = chosenFile.size; //the size of the file in bytes, as an integer
410 | 		var fileModifiedDate = chosenFile.lastModifiedDate; //a Date object
411 | 		//console.log(chosenFile);
412 | 		reader = new FileReader();
413 | 		//reader.addEventListener("load", readFile, false);
414 | 		reader.readAsArrayBuffer(document.querySelector("#fileChooser").files[0]);
415 | 		reader.onloadend = function () 
416 | 		{
417 | 			for (var i = 0; i<NUMATTACHEDSPRITES+1; i++)
418 | 			{
419 | 				var FullArray = new Uint8Array(reader.result);
420 | 				//table.drawRawData(i,new Uint8Array(reader.result),palette.nBitplanes);
421 | 				console.log(divideUint8Array2(FullArray, NUMATTACHEDSPRITES+1, i+1));
422 | 				table.drawRawDataByFont(i,divideUint8Array(FullArray, NUMATTACHEDSPRITES+1, i+1), palette.nBitplanes);
423 | 				alert('File loaded succesfully');
424 | 				document.getElementById('fileChooser').value = null;
425 | 			}
426 | 			return ;
427 | 		}
428 | 	}
429 | 	function divideUint8Array2(array, numberOfParts, partNumber) 
430 | 	{
431 | 		let splicedArray = new Uint8Array(88);
432 | 		splicedArray.set(array.subarray(0, 88));
433 | 		return splicedArray;
434 | 	}
435 | 
436 | 
437 | 	function divideUint8Array(array, numberOfParts, partNumber) 
438 | 	{
439 |     	if (partNumber < 1 || partNumber > numberOfParts) {
440 |         	throw new Error("partNumber deve essere compreso tra 1 e numberOfParts");
441 |     	}
442 | 
443 |     	const totalLength = array.length;
444 |     	const partLength = Math.ceil(totalLength / numberOfParts);
445 |     	const startIndex = (partNumber - 1) * partLength;
446 |     	const endIndex = Math.min(startIndex + partLength, totalLength);
447 | 
448 |     	return array.subarray(startIndex, endIndex);
449 | 	}
450 | 
451 | 	document.querySelector("#fileChooserColors").addEventListener('change',filesChosenColors, false);
452 | 	function filesChosenColors(evt){
453 | 		var chosenFile = evt.target.files[0]; //get the first file in the FileList
454 | 		var fileName = chosenFile.name; //the name of the file as a string
455 | 		var fileSize = chosenFile.size; //the size of the file in bytes, as an integer
456 | 		var fileModifiedDate = chosenFile.lastModifiedDate; //a Date object
457 | 		//console.log(chosenFile);
458 | 		reader = new FileReader();
459 | 
460 | 		reader.readAsText(document.querySelector("#fileChooserColors").files[0]);
461 | 		reader.onloadend = function () {
462 | 			console.log(reader.result);
463 | 			var lines = reader.result.split('\n');
464 | 			lines.forEach(function (item, index) {
465 | 				var data = item.match(/([a-zA-Z0-9]+),\$([a-zA-Z0-9]+)/);
466 | 				if (data && data[0] && data[1] && data[2])
467 | 				{
468 | 					var color = data[2];
469 | 					var register = data[1];
470 | 					var convertedcolor="#"+color[0]+""+color[0]+color[1]+""+color[1]+color[2]+""+color[2];
471 | 					var convertedregister = "0";
472 | 					if (register=="1a2") convertedregister = "1";
473 | 					if (register=="1a4") convertedregister = "2";
474 | 					if (register=="1a6") convertedregister = "3";
475 | 					if (register=="1a8") convertedregister = "4";
476 | 					if (register=="1aa") convertedregister = "5";
477 | 					if (register=="1ac") convertedregister = "6";
478 | 					if (register=="1ae") convertedregister = "7";
479 | 					if (register=="1b0") convertedregister = "8";
480 | 					if (register=="1b2") convertedregister = "9";
481 | 					if (register=="1b4") convertedregister = "10";
482 | 					if (register=="1b6") convertedregister = "11";
483 | 					if (register=="1b8") convertedregister = "12";
484 | 					if (register=="1ba") convertedregister = "13";
485 | 					if (register=="1bc") convertedregister = "14";
486 | 					if (register=="1be") convertedregister = "15";
487 | 					console.log("Found color "+color+" converted color "+convertedcolor+" at register "+register);
488 | 					document.getElementById("color"+convertedregister).value=convertedcolor;
489 | 					palette.changeColor(parseInt(convertedregister),convertedcolor);
490 | 					table.updateColor(parseInt(convertedregister),convertedcolor);
491 | 				}
492 | 			});
493 | 			alert('File loaded succesfully');
494 | 			document.getElementById('fileChooserColors').value = null;
495 | 			return ;
496 | 		}
497 | 	}
498 | 
499 | 	// Handle show amiga colors button click
500 | 	document.querySelector("#amigacolorscode").addEventListener('click',showAmigaColors, false);
501 | 	function showAmigaColors(evt) {
502 | 		document.getElementById("resultpre").innerHTML = '';
503 | 		var font=palette.getFontColorById(0);
504 | 		document.getElementById("resultpre").innerHTML += 'dc.w    $1a0,$'+font.amigaR+font.amigaG+font.amigaB+'    ; color transparency\n';
505 | 		for (var i=0,startReg=418;i<palette.getTableSize()-1;startReg+=2,i++)
506 | 		{
507 | 			var contcolor=i+17;
508 | 			var font=palette.getFontColorById(i+1);
509 | 			document.getElementById("resultpre").innerHTML += 'dc.w    $'+startReg.toString(16)+',$'+font.amigaR+font.amigaG+font.amigaB+'    ; color'+contcolor+'\n';
510 | 		}
511 | 	}
512 | 
513 | 	document.querySelector("#copyresult").addEventListener('click',copyToClipboard,false);
514 | 	function copyToClipboard()
515 | 	{
516 | 		var ta = document.getElementById('resultpre');
517 | 		ta.focus();
518 | 		ta.select();
519 | 	}
520 | 
521 | 	// Handle click on SHOWEXSTRING button
522 | 	var swapcolors=document.getElementById('swapcolors');
523 | 	swapcolors.onclick = function() {
524 | 		var colorswap1 = document.getElementById("swapcolor1").value;
525 | 		var colorswap2 = document.getElementById("swapcolor2").value;;
526 | 		var color1 = document.getElementById('color'+colorswap1).value;
527 | 		var color2 = document.getElementById('color'+colorswap2).value;
528 | 
529 | 		//console.log(color1);
530 | 		//console.log(color2);
531 | 
532 | 		table.swapColors(colorswap1,colorswap2); // swap squares
533 | 
534 | 		if (document.getElementById("swappalette").checked)
535 | 		{
536 | 			palette.changeColor(colorswap2,color1);
537 | 			document.getElementById('color'+colorswap2).value = color1;
538 | 			table.refreshColor(colorswap2,color1);
539 | 
540 | 			palette.changeColor(colorswap1,color2);
541 | 			document.getElementById('color'+colorswap1).value = color2;
542 | 			table.refreshColor(colorswap1,color2);
543 | 		}
544 | 
545 | 		return ;
546 | 	};
547 | 
548 | 	document.getElementById("colorpalette").addEventListener('dragover',dragfunction,false);
549 | 	function dragfunction (data)
550 | 	{
551 | 		console.log(data);
552 | 		document.getElementById("colorpalette").style.left = data.screenX + 'px';
553 |     	document.getElementById("colorpalette").style.top = data.screenY + 'px';
554 | 	}
555 | 
556 | 	var classname = document.getElementsByClassName("hideshowcontrols");
557 | 	for (var i = 0; i < classname.length; i++) {
558 |     	classname[i].addEventListener('click', hideshowcontrols, false);
559 | 	}
560 | 	function hideshowcontrols()
561 | 	{
562 | 		if (this.value=="Hide Controls")
563 | 		{
564 | 			document.querySelector(".hideshowcontrols").value="Show Controls";
565 | 			document.querySelector("#colorpalette").style.display = "none";
566 | 			document.querySelector("#result").style.display = "none";
567 | 			return;
568 | 		}
569 | 		document.querySelector(".hideshowcontrols").value="Hide Controls";
570 | 		document.querySelector("#colorpalette").style.display = "block";
571 | 		document.querySelector("#result").style.display = "block";
572 | 	}
573 | 
574 | 	document.getElementById("loadpngspritereal").addEventListener('change',selectpngfunction,false);
575 | 	function selectpngfunction()
576 | 	{
577 | 		var fileReader = new FileReader();
578 | 		fileReader.onloadend = function (e) 
579 | 		{
580 | 			var arrayCounters = [];
581 | 			for (var i = 0; i < NUMATTACHEDSPRITES+1; i++) 
582 | 			{
583 |     			arrayCounters.push(0);
584 | 			}
585 | 
586 | 			NUMATTACHEDSPRITES = parseInt(document.getElementById('numattachedsprites').value);
587 | 			var xres = parseInt(document.getElementById('xres').value);
588 | 			var yres = parseInt(document.getElementById('yres').value);
589 |     		var arrayBuffer = e.target.result;
590 | 			//console.log(arrayBuffer);
591 | 			var img = UPNG.decode(arrayBuffer);
592 | 			if (img.width!=xres*(NUMATTACHEDSPRITES+1) || img.height!=yres)
593 | 			{
594 | 				alert('Image resolution invalid, png resolution : '+img.width+'X'+img.height+' pixels, change the png resolution or adjust settings in this page, width should be '+xres*(NUMATTACHEDSPRITES+1)+'px and height should be ' + yres+'px');
595 | 				return ;
596 | 			}
597 | 			if (img.depth>palette.nBitplanes)
598 | 			{
599 | 				alert('Image color depth '+img.depth+' is too high, please change the png color depth or increase the bitplanes (if possible)');
600 | 				return ;
601 | 			}
602 | 			//console.log(img);
603 | 			var img2=UPNG.toRGBA8(img);
604 | 			//console.log(img2);
605 | 
606 | 			var usePreviousPNGPaletteSchema=0;
607 | 			if (PNG_MAPPING.length>0)
608 | 			{
609 | 				if (window.confirm("Use previous png palette schema?"))
610 | 					usePreviousPNGPaletteSchema=1;
611 | 				else
612 | 					PNG_MAPPING=[];
613 | 			}
614 | 			var arrayPixel=[];
615 | 			for (var i=0;i<img2.length;i+=4)
616 | 			{
617 | 				var idx = i/4;
618 | 				idx = idx%(xres*(NUMATTACHEDSPRITES+1));
619 | 				idx=Math.floor(idx/xres);
620 | 				console.log("indice "+i + "x "+idx);
621 | 				var squareIndex = arrayCounters[idx];
622 | 
623 | 				var squaresObjs = table.fontArray[idx].squaresObjs;
624 | 				var pixel = {r:img2[i],g:img2[i+1],b:img2[i+2]};
625 | 				var found=0;
626 | 				for (var j=0;found==0&&j<arrayPixel.length;j++)
627 | 				{
628 | 					if (arrayPixel[j].r==pixel.r && arrayPixel[j].g==pixel.g && arrayPixel[j].b==pixel.b)
629 | 					{
630 | 						found=1;
631 | 						if (squaresObjs[squareIndex]!=undefined)
632 | 						{
633 | 							squaresObjs[squareIndex].code=j;
634 | 						}
635 | 						squaresObjs[squareIndex].reset(palette.getBgFontColor());
636 | 						if (j>0)
637 | 							squaresObjs[squareIndex].storeClick(palette.getBgFontColor(),palette.getFontColorById(j));
638 | 						arrayCounters[idx]++;
639 | 					}
640 | 				}
641 | 				if (found==0) 
642 | 				{
643 | 					var mapping_found=0;
644 | 					for (var cont_mapping=0;usePreviousPNGPaletteSchema==1&&cont_mapping<PNG_MAPPING.length&&mapping_found==0;cont_mapping++)
645 | 					{
646 | 						var pngMap=PNG_MAPPING[cont_mapping].pixel;
647 | 						if (pngMap.r==pixel.r && pngMap.g==pixel.g && pngMap.b==pixel.b)
648 | 						{
649 | 							mapping_found=1;
650 | 							var code=PNG_MAPPING[cont_mapping].code;
651 | 							if (squaresObjs[squareIndex]!=undefined) squaresObjs[squareIndex].code=code;
652 | 							squaresObjs[squareIndex].reset(palette.getBgFontColor());
653 | 							if (code>0)
654 | 								squaresObjs[squareIndex].storeClick(palette.getBgFontColor(),palette.getFontColorById(code));
655 | 							arrayCounters[idx]++;
656 | 						}
657 | 					}
658 | 					if (mapping_found==0)
659 | 					{
660 | 						if (squaresObjs[squareIndex]!=undefined) squaresObjs[squareIndex].code=arrayPixel.length;
661 | 						squaresObjs[squareIndex].reset(palette.getBgFontColor());
662 | 						if (arrayPixel.length>0)
663 | 							squaresObjs[squareIndex].storeClick(palette.getBgFontColor(),palette.getFontColorById(arrayPixel.length));
664 | 						PNG_MAPPING.push({'code':arrayPixel.length,'pixel':pixel});
665 | 						arrayPixel.push(pixel);
666 | 						arrayCounters[idx]++;
667 | 					}
668 | 				}
669 | 			}
670 | 			
671 | 			//console.log(arrayPixel);
672 | 			if (!window.confirm('Use new colors extracted from the png file?')) return ;
673 | 			var arrayPixelRgb = [];
674 | 			for (var i=0;i<arrayPixel.length;i++)
675 | 			{
676 | 				var rgbRes=table.fontArray[idx].rgbToHex(arrayPixel[i].r,arrayPixel[i].g,arrayPixel[i].b);
677 | 				while (rgbRes.length < 6)  rgbRes="0"+rgbRes;
678 | 				arrayPixelRgb.push('#'+rgbRes);
679 | 			}
680 | 			table.fontArray[idx].changePaletteCallback(arrayPixelRgb);
681 | 		};
682 | 		fileReader.readAsArrayBuffer(this.files[0]);
683 | 		this.value=null;	
684 | 	}
685 | 
686 |     </script>
687 |   </body>
688 | </html>
689 | 


--------------------------------------------------------------------------------