<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/4.2.0/codemirror.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/4.2.0/codemirror.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/4.2.0/mode/z80/z80.js"></script>
+
<script>
- // Redirect print to HTML
- var Module = {
- 'print': function(text) {
- $("#console").append(text + "<br>")
- },
- 'noInitialRun': true,
- }
- $(document).ready(function() {
- // Report full loading
+ var _gaq = _gaq || [];
+ _gaq.push(['_setAccount', 'UA-574578-5']);
+ _gaq.push(['_trackPageview']);
+
+ (function() {
+ var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+ var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+ })();
+
+ // Both Viz and Pep8 use emscripten
+ // We put aside the module of each program and bring it back before each use
+ var VizModule = null
+
+ function ready() {
$("#loading").hide()
$("#analyze").prop('disabled', false)
- });
+ }
+
+ function complete() {
+ // Show and set color of output console
+ $("#consolePanel").removeClass("panel-success panel-warning panel-danger")
+ var analysis = $("#console").text();
+ if (analysis.indexOf("Error") >= 0) {
+ $("#consolePanel").addClass("panel-danger")
+ _gaq.push(['_trackEvent', 'Result', 'Error'])
+ }
+ else if (analysis.indexOf("Warning") >= 0) {
+ $("#consolePanel").addClass("panel-warning")
+ _gaq.push(['_trackEvent', 'Result', 'Warning'])
+ }
+ else {
+ $("#consolePanel").addClass("panel-success")
+ _gaq.push(['_trackEvent', 'Result', 'Success'])
+ }
+ $("#working").hide()
+ $("#consolePanel").show()
+ $("#analyze").prop('disabled', false)
+ }
+
+ function exception(ex) {
+ console.debug("Tool invocation failed, with:\n" + $("#console").text() + "\n" + ex )
+ _gaq.push(['_trackEvent', 'Bug', 'Analysis', $("#console").text()])
+ $("#fatal-error").show()
+ $("#analyze").prop('disabled', true)
+ }
+
+ function stdout(text) {
+ $("#console").append(text + "<br>")
+ }
function exec() {
+ $("#working").show()
+ $("#consolePanel").hide()
+
// Clean output console
$("#console").text("")
// Get code
var input = editor.getValue()
+ // Update GA stats
+ _gaq.push(['_trackEvent', 'Action', 'Analyze'])
+
// Invoke the full Nit program
- ret = Module['callMain']([input])
+ if(typeof(Worker) !== "undefined") {
+ // Async version
+ $("#analyze").prop('disabled', true)
+ worker.postMessage(input)
+ } else {
+ // Sync version
+ _gaq.push(['_trackEvent', 'Bug', 'No Webworkers', $("#console").text()])
+ Module = Pep8Module
+ try {
+ run_analysis = Module.cwrap('pep8analysis_web___CString_run_analysis', null, ['string'])
+ run_analysis(input)
- // Shot and set color of output console
- $("#consolePanel").removeClass("panel-success panel-warning panel-danger")
- $("#consolePanel").show()
- var analysis = $("#consolePanel").text();
- if (analysis.indexOf("Error") >= 0)
- $("#consolePanel").addClass("panel-danger")
- else if (analysis.indexOf("Warning") >= 0)
- $("#consolePanel").addClass("panel-warning")
- else
- $("#consolePanel").addClass("panel-success")
+ complete()
+ } catch(e) {
+ exception(e)
+ }
+ }
}
function load(file) {
editor.setValue(data)
})
}
+
+ function show_graph(source) {
+ Module = VizModule
+ var res = Viz(source, "svg", "dot")
+ VizModule = Module
+ $("#graph").html(res)
}
</script>
</head>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
- <a class="navbar-brand">Pep/8 Analysis</a>
+ <a class="navbar-brand" href="http://xymus.net/">Xymus.net</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
- <li class="active"><a>Web interface</a></li>
- <li><a href="https://github.com/privat/nit/tree/master/contrib/pep8analysis/">Tool source and manual</a></li>
+ <li><a href="http://xymus.net/ens/">Enseignement</a></li>
+ <li><a href="http://xymus.net/opportunity/"><img height="22px" src="/static/opportunity-small-fr.png"></a></li>
+ <li><a href="http://xymus.net/tnitter/"><img height="22px" src="/static/tnitter-small.png"></a></li>
+ <li class="active"><a href="http://xymus.net/pep8/">Pep/8 Analysis</a></li>
+ <li><a href="http://xymus.net/benitlux/">Benitlux</a></li>
</ul>
- <ul class="nav navbar-nav navbar-right">
- <li><a href="http://nitlanguage.org/">nitlanguage.org</a></li>
+
+ <ul class="nav navbar-nav pull-right">
+ <li><a href="https://github.com/nitlang/nit/tree/master/contrib/pep8analysis/">Source and manual</a></li>
<li><a href="https://code.google.com/p/pep8-1/">Pep/8 project</a></li>
</ul>
</div>
</nav>
<div class="container-fluid">
-
<div class="alert alert-warning" id="loading">Loading the tool... This may take some time.</div>
+ <div class="alert alert-danger" id="fatal-error" style="display: none;">
+ <h2>The JavaScript tool crashed</h2>
+ <p>Please refresh the page to try again, or use Firefox. An error report has been sent to the developer</p>
+ </div>
<div class="row">
<div class="col-sm-12 col-lg-6">
+ <div class="panel panel-default" id="panelIntro">
+ <div class="panel-heading">Description and Usage
+ <button type="button" class="close" onClick="$('#panelIntro').hide()" aria-hidden="true">×</button>
+ </div>
+ <div class="panel-body" id="code-panel">
+ <p>This tools finds strange behavior in Pep/8 programs by exploring all detectable execution paths.</p>
+ <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>
+ <p><strong>To use:</strong> copy-paste your code in the source code block and launch the analysis using the <em>Analyze program</em> button.</p>
+ </div>
+ </div>
+
<div class="panel panel-default">
<div class="panel-heading">Pep/8 Source Code</div>
<div class="panel-body" id="code-panel">
<div class="clearfix visible-xs"></div>
<div class="col-sm-12 col-lg-6">
+ <div class="alert alert-warning" id="working" style="display: none;">The tool is evaluating all possible execution paths... This may take some time.</div>
<div class="panel" id="consolePanel" style="display: none;">
<div class="panel-heading">Analysis Result</div>
<div class="panel-body">
<samp id="console"></samp>
+ <button type="button" class="btn btn-default" onclick="$('#panelGraph').show();$('#panelGraphExp').show();">
+ Show control flow graph</button>
+ <em class="pull-right" id="panelGraphExp" style="display: none;">The graph is at the bottom of the page...</em>
+ </div>
+ </div>
+ </div>
+
+ <div class="col-sm-12 col-lg-6">
+ <div class="panel panel-default" id="panelRef">
+ <div class="panel-heading">Output Documentation
+ <button type="button" class="close" onClick="$('#panelRef').hide()" aria-hidden="true">×</button>
+ </div>
+ <div class="panel-body" id="code-panel">
+ <h4>Line and memory references</h4>
+ <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>
+ <table class="table table-striped">
+ <tr>
+ <th>Shorthand</th>
+ <th>Description</th>
+ </tr><tr>
+ <td>web:5</td>
+ <td>Source line 5</td>
+ </tr><tr>
+ <td>L8</td>
+ <td>Source line 8</td>
+ </tr><tr>
+ <td>rA, rX</td>
+ <td>Registers A, X</td>
+ </tr><tr>
+ <td>m24</td>
+ <td>Memory at address 24 (bytes)</td>
+ </tr><tr>
+ <td>instr@m24</td>
+ <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>
+ </tr>
+ </table>
+
+ <h4>Common errors and warnings</h4>
+
+ <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>
+
+ <table class="table table-striped">
+ <tr>
+ <th>Error</th>
+ <th>Meaning</th>
+ </tr><tr>
+ <td>... the CFG may be wrong</td>
+ <td>The program structure is too complex to analyze. This happens when jumping to dynamic addresses and when using switch statements.</td>
+ </tr><tr>
+ <td>unreachable instructions</td>
+ <td>There's dead code.</td>
+ </tr><tr>
+ <td>data in program flow</td>
+ <td>The program may execute raw data. There's probably a <code>BR</code> missing.</td>
+ </tr><tr>
+ <td>overwriting code at...</td>
+ <td>An instruction writes over an existing instruction (probably your code).</td>
+ </tr><tr>
+ <td>expected "type" in "address", got "something"</td>
+ <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>
+ </td>
+ </tr>
+ </table>
</div>
</div>
</div>
</div>
+
+ <div class="col-sm-12 col-lg-12">
+ <div class="panel panel-default" id="panelGraph" style="display: none;">
+ <div class="panel-heading">Control Flow Graph (CFG)
+ <button type="button" class="close" onClick="$('#panelGraph').hide()" aria-hidden="true">×</button>
+ </div>
+ <div class="panel-body">
+ <div id="graph"></div>
+ </div>
+ </div>
+ </div>
- <script src="pep8analysis.js"></script>
+ <script>
+ if(typeof(Worker) !== "undefined") {
+ // Async version
+ var worker = new Worker("worker.js")
+ worker.onmessage = function(event) {
+ if (event.data.type == "ready") {
+ ready()
+ } else if (event.data.type == "complete") {
+ complete()
+ } else if (event.data.type == "exception") {
+ exception(event.data.data)
+ } else if (event.data.type == "stdout") {
+ stdout(event.data.data)
+ } else if (event.data.type == "show_graph") {
+ show_graph(event.data.data)
+ } else {
+ console.out(event.data)
+ }
+ }
+ } else {
+ // Synced version
+ $(document).ready(function() {
+ // Report full loading
+ $("#loading").hide()
+ $("#analyze").prop('disabled', false)
+ });
+ var Module = {
+ 'print': stdout,
+ 'TOTAL_MEMORY': 512000000
+ }
+ importScripts("pep8analysis.js")
+ var Pep8Module = Module
+ }
+ </script>
+ <script src="viz.js"></script>
</div>
</body>