v5-unity/live.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<!--
  Python Tutor: https://github.com/pgbovine/OnlinePythonTutor/
  Copyright (C) Philip Guo (philip@pgbovine.net)
  LICENSE: https://github.com/pgbovine/OnlinePythonTutor/blob/master/LICENSE.txt
-->

<!-- OPT live programming prototype started on 2016-05-30 -->

<head>
  <title>Live Programming Mode - Python Tutor - Visualize Python and JavaScript code</title>
  <meta http-equiv="Content-type" content="text/html; charset=UTF-8"/>

  <!-- let Webpack take care of everything. Use the [hash] feature to
       create unique filenames for releases:
       https://webpack.github.io/docs/long-term-caching.html -->
  <script type="text/javascript" src="build/opt-live.bundle.js?86c9ef6fe3" charset="utf-8"></script>

<!-- insert google-analytics.txt contents here -->

</head>

<body>

  <div id="liveModeHeader">

  This is the live programming mode (<a href="https://www.youtube.com/watch?v=JjGt95Te0wo" target="_blank">video intro</a>), which
  continually runs and visualizes your code as you type. It's
  <span style="font-weight: bold; color: #e93f34;">highly experimental</span>
  and does not yet support all languages and
  features of the <a href="visualize.html" target="_blank">regular
  Python Tutor visualizer</a>.

  <span id="surveyPane"></span>

  <!-- taken down on 2016-12-06
  <p>Help us improve this live programming mode by filling out this <a
  target="_blank"
  href="https://docs.google.com/forms/d/1XT-rPaWxDRNOPAfBxIqzCXs7nYGUgOjNofmUnuQZYV8/viewform">two-question
  survey</a>.</p>
  -->

  </div>

<table id="experimentalHeader">
<tr>
<td valign="top" id="headerTdLeft"></td>
<td valign="top" id="headerTdRight"></td>
</tr>
</table>

  <table>
    <tr>
      <td valign="top">
        <div id="pyInputPane">
          <div id="codeInputWarnings">Write code in
            <select id="pythonVersionSelector">
              <option value="2">Python 2.7</option>
              <option value="3" selected>Python 3.6</option>
              <option value="js">JavaScript ES6</option>
            </select>

            <span id="liveModeExtraWarning" style="color: #888; font-size: 8pt; float: right;">(drag lower right corner to resize code editor)</span>
          </div>
          <div id="someoneIsTypingDiv" style="color: #e93f34; font-weight: bold; display: none;">Someone is typing ...</div>

          <div id="codeInputPane"></div>
          <div id="legendDiv"></div>
          <div id="executionSlider" style="margin-top: 10px;"></div>

          <!-- copied and pasted from pytutor.js
               TODO: integrate all this together and modularize -->

          <div id="vcrControls" style="display: none;">
            <button id="jmpFirstInstr", type="button">&lt;&lt; First</button>
            <button id="jmpStepBack", type="button">&lt; Back</button>
            <span id="curInstr"></span>
            <button id="jmpStepFwd", type="button">Forward &gt;</button>
            <button id="jmpLastInstr", type="button">Last &gt;&gt;</button>
          </div>

          <div id="rawUserInputDiv" style="display: none;">
            <span id="userInputPromptStr"></span>
            <input type="text" id="raw_input_textbox" size="30"/>
            <button id="raw_input_submit_btn">Submit</button>
          </div>

          <div id="frontendErrorOutput"></div>
        </div>
        <div id="eurekaSurveyPane"></div>
      </td>
      <td valign="top">
        <div id="pyOutputPane"/>
      </td>
    </tr>
  </table>

<div id="footer">

<div id="optionsPane">
  <select id="cumulativeModeSelector">
    <option value="false">hide exited frames [default]</option>
    <option value="true">show exited frames (Python)</option>
    <!-- <option value="holistic">holistic mode (experimental)</option> -->
  </select>
  <select id="heapPrimitivesSelector">
    <option value="false">inline primitives and try to nest objects</option>
    <option value="nevernest" selected>inline primitives but don't nest objects [default]</option>
    <option value="true">render all objects on the heap (Python)</option>
  </select>
  <select id="textualMemoryLabelsSelector">
    <option value="false">draw pointers as arrows [default]</option>
    <option value="true">use text labels for pointers</option>
  </select>
</div>

<p>
  <button id="genUrlBtn" class="smallBtn" type="button">Generate permanent link</button> <input type="text" id="urlOutput" size="70"/>
</p>
<p>
  <button id="genUrlShortenedBtn" class="smallBtn" type="button">Generate shortened link</button> <input type="text" id="urlOutputShortened" size="25"/>
</p>


<p>Click the button above to create a permanent link to your
visualization (<a href="https://www.youtube.com/watch?v=h4q3UKdEFKE" target="_blank">video demo</a>). To report a bug, paste the link along with a brief error
description in an email addressed to philip@pgbovine.net</p>

<p style="margin-top: 35px;">
This live programming mode of
<a href="http://pythontutor.com/">Python Tutor</a> (<a href="https://github.com/pgbovine/OnlinePythonTutor">code on GitHub</a>) supports three
languages: Python <a href="https://docs.python.org/2.7/">2.7</a> and <a
href="https://docs.python.org/3.6/">3.6</a> with limited module
imports, and
JavaScript running in Node.js v6.0.0 with limited support for ES6.

Try the regular
<a href="http://pythontutor.com/visualize.html">Python Tutor</a>
visualizer for additional language support.</p>

<p style="margin-top: 30px;">Privacy Policy: By using Python
Tutor, your visualized code, options, user interactions, text chats, and
IP address are logged on our server and may be analyzed for research
purposes. Nearly all Web services collect this basic information from
users. However, the Python Tutor website (pythontutor.com) does
not collect any personal information or session state from users, nor
does it issue any cookies.</p>

<p>Use this website at your own risk. The developers of Python Tutor are
not responsible for the chat messages or behaviors of any of the users
on this website. We are also not responsible for any damages caused by
using this website. It is your responsibility to follow appropriate academic integrity standards.</p>

<p style="margin-top: 25px;">
Copyright &copy; <a href="http://www.pgbovine.net/">Philip Guo</a>.  All rights reserved.
</p>

</div>

</body>
</html>