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                 <br />
 153                 <button onclick="if(binStr){ mainCompiler.saveBinary(); }">Create bin.ose</button>
 154
 155         </form>
 156         <h3>Downloads</h3>
 157         <div id="downloadBox"></div>
 158 </div>
 159 <div style="float:left;">
 160         <h2>Code</h2>
 161         <textarea id="codeText" cols="80" rows="48" wrap="off">
 162 unsigned char table[32] = {
 163         196, 100, 187,  61, 164,  29, 129,   9,
 164          90,   5,  53,  17,  23,  44,   7,  81,
 165           7, 119,  23, 156,  53, 183,  90, 195,
 166         129, 191, 164, 171, 187, 139, 196, 100,
 167 };
 168
 169 procedure inline drawLine(int mode, x0, y0, x1, y1, col){
 170         @asm OSECPU
 171         REMARK 05 0100000003;
 172         R30 = 0xff45;
 173         R31 = mode;
 174         R32 = x0;
 175         R33 = y0;
 176         R34 = x1;
 177         R35 = y1;
 178         R36 = col;
 179         CALL P28;
 180         REMARK 01 00;
 181         @end
 182 }
 183
 184 procedure main()
 185 {
 186         int x0, y0, x1, y1, col, i, j;
 187         unsigned char *p, *q;
 188
 189         p = table;
 190         for (i = 0; i != 15; i++) {
 191                 x0 = *p;
 192                 p++;
 193                 y0 = *p;
 194                 p++;
 195
 196                 q = table;
 197                 for (j = -8; j != 8; j++) {
 198                         x1 = *q;
 199                         q++;
 200                         y1 = *q;
 201                         q++;
 202                         col = i - j;
 203                         if (col <= 0){
 204                                 col = 1 - col;
 205                         }
 206                         if (col <= 7) {
 207                                 drawLine(1 + 4, x0, y0, x1, y1, col);
 208                         }
 209                 }
 210         }
 211 }
 212         </textarea>
 213         <div id="fileDropZone">Drop SourceCode.elc here</div>
 214 </div>
 215 </body>
 216 </html>