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
  71 function stepInMs(){
  72         stepInTimer = window.setInterval(stepInMs_Tick, 1);
  73 }
  74
  75 function stepInMs_Tick(){
  76         if(mainCPU.executeStepIn() != 0){
  77                 window.clearTimeout(stepInTimer);
  78         }
  79 }
  80
  81
  82
  83 // http://www.html5rocks.com/ja/tutorials/file/dndfiles/
  84 function handleFileSelect(evt){
  85         evt.stopPropagation();
  86         evt.preventDefault();
  87
  88         var files = evt.dataTransfer.files; // FileList object.
  89
  90         // files is a FileList of File objects. List some properties.
  91         var output = [];
  92         for(var i = 0, f; f = files[i]; i++){
  93                 output.push('<li><strong>', escape(f.name), '</strong> ', f.size, ' bytes, last modified: ', f.lastModifiedDate.toLocaleDateString(), '</li>');
  94                 var r = new FileReader();
  95                 r.onload = (function(file){
  96                         return function(e){
  97                                 var a = r.result;
  98                                 var v = new DataView(a);
  99                                 var ds = "";
 100                                 for(var i = 0; i < a.byteLength; i++){
 101                                         ds += ("00" + v.getUint8(i).toString(16).toUpperCase()).slice(-2);
 102                                 }
 103                                 document.getElementsByName("binaryCodeText")[0].value = ds;
 104                                 console.log(ds);
 105                         }
 106                 })(f);
 107                 r.readAsArrayBuffer(f);
 108         }
 109         document.getElementById('fileList').innerHTML = '<ul>' + output.join('') + '</ul>';
 110 }
 111
 112 function handleDragOver(evt){
 113         evt.stopPropagation();
 114         evt.preventDefault();
 115         evt.dataTransfer.dropEffect = 'copy'; // Explicitly show this is a copy.
 116 }
 117 </script>
 118 </head>
 119 <body>
 120 <h1>WebCPU</h1>
 121 <div style="float:left;">
 122         <h2>mainWindow</h2>
 123         <canvas id="mainWindowCanvas" width="640" height="480" style="border:1px solid #000000;"></canvas>
 124 </div>
 125 <div style="float:left;">
 126         <h2>binaryCode</h2>
 127         <textarea name="binaryCodeText" cols="64" rows="24"></textarea>
 128         <div id="fileDropZone">Drop Binary.ose here</div>
 129         <div id="fileList"></div>
 130 </div>
 131 <div style="clear:both;">
 132         <form onsubmit="return false;">
 133                 <button onclick="loadBinaryTextToCPU();">Load</button><br />
 134                 <button onclick="mainCPU.executeStepIn();">StepIn</button>
 135                 <button onclick="stepInMs();">StepInMs</button>
 136                 <button onclick="for(var i = 0; i < 100; i++){ mainCPU.executeStepIn(); }">StepIn100</button>
 137                 <button onclick="mainCPU.execute();">Execute</button>
 138                 <button onclick="mainCPU.stopFlag = true;">Break</button><br />
 139                 <button onclick="enableDebugMode();">EnableDebugMode</button>
 140                 <button onclick="disableDebugMode();">DisableDebugMode</button>
 141         </form>
 142         <h2>Internal Information</h2>
 143         <div style="float:left;">
 144                 <input type="checkbox" onchange="">message</input><br />
 145                 <textarea name="debugMessageText" cols="66" rows="16"></textarea>
 146         </div>
 147         <div style="float:left;">
 148                 <input type="checkbox" onchange="">IntegerRegister</input><br />
 149                 <textarea name="debugIntegerRegisterText" cols="32" rows="16"></textarea>
 150         </div>
 151         <div style="float:left;">
 152                 <input type="checkbox" onchange="">PointerRegister</input><br />
 153                 <textarea name="debugPointerRegisterText" cols="32" rows="16"></textarea>
 154         </div>
 155 </div>
 156 </body>
 157 </html>