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, document.getElementById('downloadBox'));
  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         binStr = mainCompiler.compile(codeTextArea.value);
  75         if(binStr != null){
  76                 messageOut("*\n****Compile Succeeded!****\n*\n");
  77         } else{
  78                 messageOut("*\n****Compile Failed...****\n*\n");
  79         }
  80 }
  81
  82 function run(){
  83         if(binStr){
  84                 mainCPU.loadBinaryText(binStr);
  85                 mainCPU.execute();
  86         } else{
  87                 messageOut("run: No available binary.\n");
  88         }
  89 }
  90
  91 function showAssembly(){
  92         if(binStr){
  93                 mainCPU.loadBinaryText(binStr);
  94         } else{
  95                 messageOut("showAssembly: No available binary.\n");
  96         }
  97 }
  98
  99 function enableDebugMode(){
 100         mainCPU.setDebugMessageDOMObject("debugMessageText");
 101         mainCPU.message("****Debug mode enabled.\n");
 102 }
 103
 104 function disableDebugMode(){
 105         mainCPU.message("****Debug mode disabled.\n");
 106         mainCPU.setDebugMessageDOMObject(null);
 107 }
 108
 109 // http://www.html5rocks.com/ja/tutorials/file/dndfiles/
 110 function handleFileSelect(evt){
 111         evt.stopPropagation();
 112         evt.preventDefault();
 113
 114         var files = evt.dataTransfer.files; // FileList object.
 115
 116         // files is a FileList of File objects. List some properties.
 117         var output = [];
 118         for(var i = 0, f; f = files[i]; i++){
 119                 output.push('<li><strong>', escape(f.name), '</strong> ', f.size, ' bytes, last modified: ', f.lastModifiedDate.toLocaleDateString(), '</li>');
 120                 var r = new FileReader();
 121                 r.onload = (function(file){
 122                         return function(e){
 123                                 codeTextArea.value = r.result;
 124                         }
 125                 })(f);
 126                 r.readAsText(f);
 127         }
 128 }
 129
 130 function handleDragOver(evt){
 131         evt.stopPropagation();
 132         evt.preventDefault();
 133         evt.dataTransfer.dropEffect = 'copy'; // Explicitly show this is a copy.
 134 }
 135 </script>
 136 </head>
 137 <body>
 138 <h1>ELCC-IDE</h1>
 139 <div style="float:left;">
 140         <h2>MainWindow</h2>
 141         <canvas id="mainWindowCanvas" width="640" height="480" style="border:1px solid #000000;"></canvas>
 142         <h3>Message</h3>
 143         <textarea id="debugMessageText" cols="66" rows="16"></textarea>
 144         <form onsubmit="return false;">
 145                 <button onclick="compile();">Compile</button>
 146                 <button onclick="showAssembly();">Show Assembly</button>
 147                 <button onclick="run();">Run</button>
 148                 <button onclick="mainCPU.stopFlag = true;">Break</button>
 149                 <br />
 150                 <button onclick="enableDebugMode();">EnableDebugMode</button>
 151                 <button onclick="disableDebugMode();">DisableDebugMode</button>
 152                 <button onclick="mainCPU.showIntegerRegister();">ShowIntegerRegister</button>
 153                 <button onclick="mainCPU.showPointerRegister();">ShowPointerRegister</button>
 154                 <br />
 155                 <button onclick="if(binStr){ mainCompiler.saveBinary(); }">Create bin.ose</button>
 156
 157         </form>
 158         <h3>Downloads</h3>
 159         <div id="downloadBox"></div>
 160 </div>
 161 <div style="float:left;">
 162         <h2>Code</h2>
 163         <textarea id="codeText" cols="80" rows="48" wrap="off">
 164 unsigned char table[32] = {
 165         196, 100, 187,  61, 164,  29, 129,   9,
 166          90,   5,  53,  17,  23,  44,   7,  81,
 167           7, 119,  23, 156,  53, 183,  90, 195,
 168         129, 191, 164, 171, 187, 139, 196, 100,
 169 };
 170
 171 procedure inline drawLine(int mode, x0, y0, x1, y1, col){
 172         @asm OSECPU
 173         REMARK 05 0100000003;
 174         R30 = 0xff45;
 175         R31 = mode;
 176         R32 = x0;
 177         R33 = y0;
 178         R34 = x1;
 179         R35 = y1;
 180         R36 = col;
 181         CALL P28;
 182         REMARK 01 00;
 183         @end
 184 }
 185
 186 procedure main()
 187 {
 188         int x0, y0, x1, y1, col, i, j;
 189         unsigned char *p, *q;
 190
 191         p = table;
 192         for (i = 0; i != 15; i++) {
 193                 x0 = *p;
 194                 p++;
 195                 y0 = *p;
 196                 p++;
 197
 198                 q = table;
 199                 for (j = -8; j != 8; j++) {
 200                         x1 = *q;
 201                         q++;
 202                         y1 = *q;
 203                         q++;
 204                         col = i - j;
 205                         if (col <= 0){
 206                                 col = 1 - col;
 207                         }
 208                         if (col <= 7) {
 209                                 drawLine(1 + 4, x0, y0, x1, y1, col);
 210                         }
 211                 }
 212         }
 213 }
 214         </textarea>
 215         <div id="fileDropZone">Drop SourceCode.elc here</div>
 216 </div>
 217 </body>
 218 </html>