contrib/pep8analysis/www/index.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4         <title>Pep/8 Analysis</title>
   5
   6     <meta charset="utf-8">
   7     <meta http-equiv="X-UA-Compatible" content="IE=edge">
   8         <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
   9
  10         <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
  11         <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  12         <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
  13
  14         <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/4.2.0/codemirror.css">
  15         <script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/4.2.0/codemirror.min.js"></script>
  16         <script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/4.2.0/mode/z80/z80.js"></script>
  17
  18         <script>
  19           (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  20           (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  21           m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  22           })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
  23
  24           ga('create', 'UA-574578-5', 'xymus.net');
  25           ga('send', 'pageview');
  26         </script>
  27
  28         <script>
  29                 // Redirect print to HTML
  30                 var Module = {
  31                         'print': function(text) {
  32                                 $("#console").append(text + "<br>")
  33                         },
  34                         'noInitialRun': true,
  35                 }
  36
  37                 // Both Viz and Pep8 use emscripten
  38                 // We put aside the module of each program and bring it back before each use
  39                 var VizModule = null
  40                 $(document).ready(function() {
  41                         // Report full loading
  42                         $("#loading").hide()
  43                         $("#analyze").prop('disabled', false)
  44
  45                 });
  46
  47                 function exec() {
  48                         // Clean output console
  49                         $("#console").text("")
  50
  51                         // Get code
  52                         var input = editor.getValue()
  53
  54                         // Invoke the full Nit program
  55                         Module = Pep8Module
  56                 ret = Module['callMain']([input])
  57
  58                         // Shot and set color of output console
  59                         $("#consolePanel").removeClass("panel-success panel-warning panel-danger")
  60                         $("#consolePanel").show()
  61                         var analysis = $("#consolePanel").text();
  62                         if (analysis.indexOf("Error") >= 0)
  63                                 $("#consolePanel").addClass("panel-danger")
  64                         else if (analysis.indexOf("Warning") >= 0)
  65                                 $("#consolePanel").addClass("panel-warning")
  66                         else
  67                                 $("#consolePanel").addClass("panel-success")
  68                 }
  69
  70                 function load(file) {
  71                         // Load a sample program
  72                         $.get('samples/' + file, function(data){
  73                                 editor.setValue(data)
  74                         })
  75                 }
  76
  77                 function show_graph(source) {
  78                         Module = VizModule
  79                         var res = Viz(source, "svg", "dot")
  80                         VizModule = Module
  81                         $("#graph").html(res)
  82                 }
  83         </script>
  84 </head>
  85 <body>
  86
  87 <nav class="navbar navbar-default" role="navigation">
  88   <div class="container-fluid">
  89     <div class="navbar-header">
  90       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
  91         <span class="sr-only">Toggle navigation</span>
  92                 <span class="icon-bar"></span>
  93                 <span class="icon-bar"></span>
  94                 <span class="icon-bar"></span>
  95       </button>
  96       <a class="navbar-brand">Pep/8 Analysis</a>
  97     </div>
  98
  99     <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
 100       <ul class="nav navbar-nav">
 101         <li class="active"><a>Web interface</a></li>
 102         <li><a href="https://github.com/privat/nit/tree/master/contrib/pep8analysis/">Tool source and manual</a></li>
 103       </ul>
 104       <ul class="nav navbar-nav navbar-right">
 105         <li><a href="http://nitlanguage.org/">nitlanguage.org</a></li>
 106         <li><a href="https://code.google.com/p/pep8-1/">Pep/8 project</a></li>
 107       </ul>
 108     </div>
 109   </div>
 110 </nav>
 111
 112 <div class="container-fluid">
 113         <div class="alert alert-warning" id="loading">Loading the tool... This may take some time.</div>
 114
 115         <div class="row">
 116           <div class="col-sm-12 col-lg-6">
 117                 <div class="panel panel-default" id="panelIntro">
 118                         <div class="panel-heading">Description and Usage
 119                                 <button type="button" class="close" onClick="$('#panelIntro').hide()" aria-hidden="true">&times;</button>
 120                         </div>
 121                         <div class="panel-body" id="code-panel">
 122                                 <p>This tools finds strange behavior in Pep/8 programs by exploring all detectable execution paths.</p>
 123                                 <p>Upon analyzing a program, this tool reports dead code blocks and data within the execution path. It also detects wrongful use of data such as accessing uninitialized memory, printing a word and reading code.</p>
 124                                 <p><strong>To use:</strong> copy-paste your code in the source code block and launch the analysis using the <em>Analyze</em> button.</p>
 125                         </div>
 126                 </div>
 127
 128                 <div class="panel panel-default">
 129                         <div class="panel-heading">Pep/8 Source Code</div>
 130                         <div class="panel-body" id="code-panel">
 131                                 <textarea id="listing"></textarea>
 132                                 <script>
 133                                         var editor = CodeMirror.fromTextArea(listing, {
 134                                                 lineNumbers: true,
 135                                                 mode: "z80"
 136                                         });
 137                                         editor.setSize("100%", 500);
 138                                 </script>
 139
 140                                 <div class="btn-group">
 141                                   <button type="button" class="btn btn-default" id="analyze" onclick="exec();" disabled>Analyze program</button>
 142                                   <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
 143                                          <span class="glyphicon glyphicon-folder-open"></span>
 144                                         Load sample program
 145                                         <span class="caret"></span>
 146                                   </button>
 147                                   <ul class="dropdown-menu">
 148                                         <li><a onclick="load('02-fibo.pep')">fibo.pep - clean program </a></li>
 149                                         <li><a onclick="load('06-calc-non-pur.pep');">calc-non-pur.pep - self rewriting program </a></li>
 150                                         <li><a onclick="load('types.pep');"/>types.pep - strange data manipulation </a></li>
 151                                         <li><a onclick="load('directive-in-code.pep');">directive-in-code.pep - mixed directives and instructions</a></li>
 152                                   </ul>
 153                                 </div>
 154                         </div>
 155                 </div>
 156           </div>
 157
 158           <div class="clearfix visible-xs"></div>
 159           <div class="col-sm-12 col-lg-6">
 160                 <div class="panel" id="consolePanel" style="display: none;">
 161                         <div class="panel-heading">Analysis Result</div>
 162                         <div class="panel-body">
 163                                 <samp id="console"></samp>
 164                                 <button type="button" class="btn btn-default" onclick="$('#panelGraph').show();$('#panelGraphExp').show();">
 165                                         Show control flow graph</button>
 166                                 <em class="pull-right" id="panelGraphExp" style="display: none;">The graph is at the bottom of the page...</em>
 167                         </div>
 168                 </div>
 169           </div>
 170
 171           <div class="col-sm-12 col-lg-6">
 172                 <div class="panel panel-default" id="panelRef">
 173                         <div class="panel-heading">Output Documentation
 174                                 <button type="button" class="close" onClick="$('#panelRef').hide()" aria-hidden="true">&times;</button>
 175                         </div>
 176                         <div class="panel-body" id="code-panel">
 177                                 <h4>Line and memory references</h4>
 178                                 <p>Shorthand are used in the error messages, some refer directly to the line numbers others to the address in the memory of the running program.</p>
 179                                 <table class="table table-striped">
 180                                 <tr>
 181                                         <th>Shorthand</th>
 182                                         <th>Description</th>
 183                                 </tr><tr>
 184                                         <td>web:5</td>
 185                                         <td>Source line 5</td>
 186                                 </tr><tr>
 187                                         <td>L8</td>
 188                                         <td>Source line 8</td>
 189                                 </tr><tr>
 190                                         <td>rA, rX</td>
 191                                         <td>Registers A, X</td>
 192                                 </tr><tr>
 193                                         <td>m24</td>
 194                                         <td>Memory at address 24 (bytes)</td>
 195                                 </tr><tr>
 196                                         <td>instr@m24</td>
 197                                         <td>Intruction at address 24 (bytes). Usually, this would be the (24/4+1=) 7th instruction, if there is no data blocks. And the 7th line if there is no data blocks or comments.</td>
 198                                 </tr>
 199                                 </table>
 200
 201                                 <h4>Common errors and warnings</h4>
 202
 203                                 <p>Note that the tool reports <em>possible</em> errors and strange behaviors. For an advanced or expert user, it may raise errors on correct code.</p>
 204
 205                                 <table class="table table-striped">
 206                                 <tr>
 207                                         <th>Error</th>
 208                                         <th>Meaning</th>
 209                                 </tr><tr>
 210                                         <td>... the CFG may be wrong</td>
 211                                         <td>The program structure is too complex to analyze. This happens when jumping to dynamic addresses and when using switch statements.</td>
 212                                 </tr><tr>
 213                                         <td>unreachable instructions</td>
 214                                         <td>There's dead code.</td>
 215                                 </tr><tr>
 216                                         <td>data in program flow</td>
 217                                         <td>The program may execute raw data. There's probably a <code>BR</code> missing.</td>
 218                                 </tr><tr>
 219                                         <td>overwriting code at...</td>
 220                                         <td>An instruction writes over an existing instruction (probably your code).</td>
 221                                 </tr><tr>
 222                                         <td>expected "type" in "address", got "something"</td>
 223                                         <td>An instruction uses data with an unexepected type. It may be a <code>CHARO</code> using something other than a char. Or a copy of uninitialized data over an initialized word.<br>
 224                                         </td>
 225                                 </tr>
 226                                 </table>
 227                         </div>
 228                 </div>
 229           </div>
 230         </div>
 231
 232           <div class="col-sm-12 col-lg-12">
 233                 <div class="panel panel-default" id="panelGraph" style="display: none;">
 234                         <div class="panel-heading">Control Flow Graph (CFG)
 235                                 <button type="button" class="close" onClick="$('#panelGraph').hide()" aria-hidden="true">&times;</button>
 236                         </div>
 237                         <div class="panel-body">
 238                                 <div id="graph"></div>
 239                         </div>
 240                 </div>
 241           </div>
 242
 243         <script>
 244                 var Module = {
 245                         'print': function(text) {
 246                                 $("#console").append(text + "<br>")
 247                         },
 248                         'noInitialRun': true,
 249                 }
 250         </script>
 251         <script src="pep8analysis.js"></script>
 252         <script>Pep8Module = Module</script>
 253         <script src="viz.js"></script>
 254 </div>
 255
 256 </body>
 257 </html>