webcpu/index.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>webcpu</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 // bball backend bin
  29 var demoBin = "\
  30 05  e1  ae  3a  0c  46  4b  b3  da  41  d8  10  95  a0  53  51\n\
  31 11  72  c0  75  10  77  71  79  c3  5b  75  ac  38  1b  fa  4a\n\
  32 bb  b8  bc  46  46  50  8f  88  01  08  81  10  43  26  66  b8\n\
  33 88  88  22  08  83  20  49  54  5a  aa  54  01  49  54  bf  ac\n\
  34 11  a5  48  72  45  38  51\n\
  35 ";
  36 onload = function(){
  37         mainCPU = new WebCPU();
  38
  39         mainCPU.setMainWindowCanvasDOMObject("mainWindowCanvas");
  40         enableDebugMode();
  41         document.getElementsByName("binaryCodeText")[0].value = demoBin;
  42
  43         // Setup the dnd listeners.
  44         var dropZone = document.getElementById('fileDropZone');
  45         dropZone.addEventListener('dragover', handleDragOver, false);
  46         dropZone.addEventListener('drop', handleFileSelect, false);
  47 }
  48
  49 function loadBinaryTextToCPU(){
  50         mainCPU.loadBinaryText(document.getElementsByName("binaryCodeText")[0].value);
  51         return false;
  52 }
  53
  54 function enableDebugMode(){
  55         mainCPU.setDebugMessageDOMObject("debugMessageText");
  56         mainCPU.setDebugIntegerRegisterDOMObject("debugIntegerRegisterText");
  57         mainCPU.setDebugPointerRegisterDOMObject("debugPointerRegisterText");
  58         mainCPU.message("****Debug mode enabled.\n");
  59 }
  60
  61 function disableDebugMode(){
  62         mainCPU.message("****Debug mode disabled.\n");
  63         mainCPU.setDebugMessageDOMObject(null);
  64         mainCPU.setDebugIntegerRegisterDOMObject(null);
  65         mainCPU.setDebugPointerRegisterDOMObject(null);
  66
  67 }
  68
  69 var stepInTimer = null;
  70 var autoStepInCount = 0;
  71
  72 function stepInMs(){
  73         stepInTimer = window.setInterval(stepInMs_Tick, 1);
  74 }
  75
  76 function stepInMs_Tick(){
  77         if(mainCPU.executeStepIn_Internal(false) != 0){
  78                 window.clearTimeout(stepInTimer);
  79         } else{
  80                 autoStepInCount++;
  81                 if((autoStepInCount & 0xff) == 0){
  82                         mainCPU.API.API_flushWin(mainCPU, mainCPU.API.mainWindowCanvas.width, mainCPU.API.mainWindowCanvas.height, 0, 0);
  83                 }
  84         }
  85 }
  86
  87
  88
  89 // http://www.html5rocks.com/ja/tutorials/file/dndfiles/
  90 function handleFileSelect(evt){
  91         evt.stopPropagation();
  92         evt.preventDefault();
  93
  94         var files = evt.dataTransfer.files; // FileList object.
  95
  96         // files is a FileList of File objects. List some properties.
  97         var output = [];
  98         for(var i = 0, f; f = files[i]; i++){
  99                 output.push('<li><strong>', escape(f.name), '</strong> ', f.size, ' bytes, last modified: ', f.lastModifiedDate.toLocaleDateString(), '</li>');
 100                 var r = new FileReader();
 101                 r.onload = (function(file){
 102                         return function(e){
 103                                 var a = r.result;
 104                                 var v = new DataView(a);
 105                                 var ds = "";
 106                                 for(var i = 0; i < a.byteLength; i++){
 107                                         ds += ("00" + v.getUint8(i).toString(16).toUpperCase()).slice(-2);
 108                                 }
 109                                 document.getElementsByName("binaryCodeText")[0].value = ds;
 110                                 console.log(ds);
 111                         }
 112                 })(f);
 113                 r.readAsArrayBuffer(f);
 114         }
 115         document.getElementById('fileList').innerHTML = '<ul>' + output.join('') + '</ul>';
 116 }
 117
 118 function handleDragOver(evt){
 119         evt.stopPropagation();
 120         evt.preventDefault();
 121         evt.dataTransfer.dropEffect = 'copy'; // Explicitly show this is a copy.
 122 }
 123 </script>
 124 </head>
 125 <body>
 126 <h1>WebCPU</h1>
 127 <div style="float:left;">
 128         <h2>mainWindow</h2>
 129         <canvas id="mainWindowCanvas" width="640" height="480" style="border:1px solid #000000;"></canvas>
 130 </div>
 131 <div style="float:left;">
 132         <h2>binaryCode</h2>
 133         <textarea name="binaryCodeText" cols="64" rows="24"></textarea>
 134         <div id="fileDropZone">Drop Binary.ose here</div>
 135         <div id="fileList"></div>
 136 </div>
 137 <div style="clear:both;">
 138         <form onsubmit="return false;">
 139                 <button onclick="loadBinaryTextToCPU();">Load</button><br />
 140                 <button onclick="mainCPU.executeStepIn();">StepIn</button>
 141                 <button onclick="stepInMs();">StepInMs</button>
 142                 <button onclick="for(var i = 0; i < 100; i++){ mainCPU.executeStepIn(); }">StepIn100</button>
 143                 <button onclick="mainCPU.execute();">Execute</button>
 144                 <button onclick="mainCPU.stopFlag = true;">Break</button><br />
 145                 <button onclick="enableDebugMode();">EnableDebugMode</button>
 146                 <button onclick="disableDebugMode();">DisableDebugMode</button>
 147         </form>
 148         <h2>Internal Information</h2>
 149         <div style="float:left;">
 150                 <input type="checkbox" onchange="">message</input><br />
 151                 <textarea name="debugMessageText" cols="66" rows="16"></textarea>
 152         </div>
 153         <div style="float:left;">
 154                 <input type="checkbox" onchange="">IntegerRegister</input><br />
 155                 <textarea name="debugIntegerRegisterText" cols="32" rows="16"></textarea>
 156         </div>
 157         <div style="float:left;">
 158                 <input type="checkbox" onchange="">PointerRegister</input><br />
 159                 <textarea name="debugPointerRegisterText" cols="32" rows="16"></textarea>
 160         </div>
 161 </div>
 162 </body>
 163 </html>