elcc/elccide.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4 <meta http-equiv="X-UA-Compatible" content="IE=9">
   5 <meta charset="UTF-8">
   6 <title>ELCC-IDE</title>
   7 <style type="text/css">
   8         h1, h2, h3 {
   9                 margin:0px;
  10         }
  11         body, textarea {
  12                 font-family: Consolas, 'Courier New', Courier, Monaco, monospace;
  13                 font-size: 14px;
  14                 line-height: 1.2;
  15         }
  16         #fileDropZone {
  17                 border: 2px dashed #bbb;
  18                 padding: 25px;
  19                 text-align: center;
  20                 font: 20pt bold;
  21                 color: #bbb;
  22         }
  23 </style>
  24 <script type="text/javascript" src="./header.js" charset="UTF-8"></script>
  25 <script type="text/javascript">
  26
  27 var mainCPU = null;
  28 var mainCompiler = null;
  29 var codeTextArea = null;
  30 var debugMessageTextArea = null;
  31 var maxDebugMessageLength = 0x1000;
  32 var binStr = null;
  33
  34 onload = function(){
  35         debugMessageTextArea = document.getElementById('debugMessageText');
  36         mainCPU = new WebCPU();
  37         mainCompiler = new ELCHNOSCompiler(messageOut);
  38
  39         mainCPU.setMainWindowCanvasDOMObject("mainWindowCanvas");
  40         enableDebugMode();
  41
  42         // Setup the dnd listeners.
  43         var dropZone = document.getElementById('fileDropZone');
  44         dropZone.addEventListener('dragover', handleDragOver, false);
  45         dropZone.addEventListener('drop', handleFileSelect, false);
  46
  47         //Enable Tab key in textarea
  48         codeTextArea = document.getElementById('codeText');
  49         //http://d.hatena.ne.jp/hokaccha/20111028/1319814792
  50         codeTextArea.addEventListener("keydown", function(e) {
  51                 if (e.keyCode === 9) {
  52                         e.preventDefault();
  53                         var elem = e.target;
  54                         var val = elem.value;
  55                         var pos = elem.selectionStart;
  56                         elem.value = val.substr(0, pos) + '\t' + val.substr(pos, val.length);
  57                         elem.setSelectionRange(pos + 1, pos + 1);
  58                 }
  59         });
  60
  61 }
  62
  63 function messageOut(s){
  64         var str = debugMessageTextArea.value + s;
  65         if(str.length > maxDebugMessageLength){
  66                 str = str.slice(str.length - (maxDebugMessageLength >> 1));
  67         }
  68         debugMessageTextArea.value = str;
  69         debugMessageTextArea.scrollTop = debugMessageTextArea.scrollHeight;
  70 }
  71
  72 function compile(){
  73         debugMessageTextArea.value += "****Compile Started****\n";
  74         if(mainCompiler.compile(codeTextArea.value) == null){
  75                 messageOut("*\n****Compile Succeeded!****\n*\n");
  76                 binStr = mainCompiler.bin.stringAsHexByte()
  77         } else{
  78                 messageOut("*\n****Compile Failed...****\n*\n");
  79                 binStr = null;
  80         }
  81 }
  82
  83 function run(){
  84         if(binStr){
  85                 mainCPU.loadBinaryText(binStr);
  86                 mainCPU.execute();
  87         }
  88 }
  89
  90 function enableDebugMode(){
  91         mainCPU.setDebugMessageDOMObject("debugMessageText");
  92         mainCPU.message("****Debug mode enabled.\n");
  93 }
  94
  95 function disableDebugMode(){
  96         mainCPU.message("****Debug mode disabled.\n");
  97         mainCPU.setDebugMessageDOMObject(null);
  98 }
  99
 100 // http://www.html5rocks.com/ja/tutorials/file/dndfiles/
 101 function handleFileSelect(evt){
 102         evt.stopPropagation();
 103         evt.preventDefault();
 104
 105         var files = evt.dataTransfer.files; // FileList object.
 106
 107         // files is a FileList of File objects. List some properties.
 108         var output = [];
 109         for(var i = 0, f; f = files[i]; i++){
 110                 output.push('<li><strong>', escape(f.name), '</strong> ', f.size, ' bytes, last modified: ', f.lastModifiedDate.toLocaleDateString(), '</li>');
 111                 var r = new FileReader();
 112                 r.onload = (function(file){
 113                         return function(e){
 114                                 var a = r.result;
 115                                 codeTextArea.value = a;
 116                         }
 117                 })(f);
 118                 r.readAsArrayBuffer(f);
 119         }
 120 }
 121
 122 function handleDragOver(evt){
 123         evt.stopPropagation();
 124         evt.preventDefault();
 125         evt.dataTransfer.dropEffect = 'copy'; // Explicitly show this is a copy.
 126 }
 127 </script>
 128 </head>
 129 <body>
 130 <h1>ELCC-IDE</h1>
 131 <div style="float:left;">
 132         <h2>mainWindow</h2>
 133         <canvas id="mainWindowCanvas" width="640" height="480" style="border:1px solid #000000;"></canvas>
 134         <h2>Internal Information</h2>
 135         <input type="checkbox" onchange="">message</input><br />
 136         <textarea id="debugMessageText" cols="66" rows="16"></textarea>
 137         <form onsubmit="return false;">
 138                 <button onclick="compile();">Compile</button>
 139                 <button onclick="run();">Run</button>
 140                 <button onclick="mainCPU.stopFlag = true;">Break</button><br />
 141                 <button onclick="enableDebugMode();">EnableDebugMode</button>
 142                 <button onclick="disableDebugMode();">DisableDebugMode</button>
 143         </form>
 144 </div>
 145 <div style="float:left;">
 146         <h2>Code</h2>
 147         <textarea id="codeText" cols="80" rows="48" wrap="off">
 148 unsigned char table[32] = {
 149         196, 100, 187,  61, 164,  29, 129,   9,
 150          90,   5,  53,  17,  23,  44,   7,  81,
 151           7, 119,  23, 156,  53, 183,  90, 195,
 152         129, 191, 164, 171, 187, 139, 196, 100,
 153 };
 154
 155 procedure inline drawLine(int mode, x0, y0, x1, y1, col){
 156         @asm OSECPU
 157         REMARK 05 0100000003;
 158         R30 = 0xff45;
 159         R31 = mode;
 160         R32 = x0;
 161         R33 = y0;
 162         R34 = x1;
 163         R35 = y1;
 164         R36 = col;
 165         CALL P28;
 166         REMARK 01 00;
 167         @end
 168 }
 169
 170 procedure main()
 171 {
 172         int x0, y0, x1, y1, col, i, j;
 173         unsigned char *p, *q;
 174
 175         p = table;
 176         for (i = 0; i != 15; i++) {
 177                 x0 = *p;
 178                 p++;
 179                 y0 = *p;
 180                 p++;
 181
 182                 q = table;
 183                 for (j = -8; j != 8; j++) {
 184                         x1 = *q;
 185                         q++;
 186                         y1 = *q;
 187                         q++;
 188                         col = i - j;
 189                         if (col <= 0){
 190                                 col = 1 - col;
 191                         }
 192                         if (col <= 7) {
 193                                 drawLine(1 + 4, x0, y0, x1, y1, col);
 194                         }
 195                 }
 196         }
 197 }
 198         </textarea>
 199         <div id="fileDropZone">Drop SourceCode.elc here</div>
 200         <div id="fileList"></div>
 201 </div>
 202 </body>
 203 </html>