Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/kikocorreoso/tutormagic

Jupyter notebook magics to embed pythontutor.com within an IFrame in the Jupyter (classic or Lab) notebook using the code from a Jupyter code cell.
https://github.com/kikocorreoso/tutormagic

jupyter-lab jupyter-notebook learning pythontutor

Last synced: about 2 months ago
JSON representation

Jupyter notebook magics to embed pythontutor.com within an IFrame in the Jupyter (classic or Lab) notebook using the code from a Jupyter code cell.

Awesome Lists containing this project

README 

        
tutormagic extension for the Jupyter notebook

=============================================



Recommendation

==============



Have a look to `nbtutor `_, a more polished and better solution.



-------------------------------------------------------------------------



Jupyter notebook magics to embed http://www.pythontutor.com within an IFrame in

the Jupyter notebook or to open a new tab in the browser using the code from a

notebook code cell (using the IPython kernel).



Install

-------



.. code:: python



    pip install tutormagic

    

or with conda



.. code:: python



    conda install -c kikocorreoso tutormagic



or (for the development version)



.. code:: python



    pip install git+https://github.com/kikocorreoso/tutormagic.git



Tested on Python 2.7.x/3.4.x/3.5.x/3.6.x/3.7.x/3.8.x/3.9.x and Jupyter 3.x/4.x/5.x/6.x.



Usage

-----



First, load the extension:



.. code:: python



    %load_ext tutormagic



Once loaded, in a code cell in the notebook type the following:



.. code:: python



    %%tutor --lang python3

    # some python code

    # ...



to create an IFrame within the notebook with the http://www.pythontutor.com page

with the code included in the Jupyter code cell or:



.. code:: python



    %%tutor --lang python3 --tab

    # some python code

    # ...



to open http://www.pythontutor.com page in a new browser tab with the code 

included in the Jupyter code cell.



Options

-------



``--lang`` or ``-l``: it allows you to

choose one of the available languages supported by

`pythontutor `__. If this option is not used then

it will consider the code in the cell as Python3 code.



-  ``%%tutor --lang python3`` or ``%%tutor -l python3`` or ``%%tutor``

   to show a pythontutor IFrame with **python3** code.

-  ``%%tutor --lang python2`` or ``%%tutor -l python2`` to show a

   pythontutor IFrame with **python2** code.

-  ``%%tutor --lang py3anaconda`` or ``%%tutor -l py3anaconda`` to show a

   pythontutor IFrame with **py3anaconda** code. This option allows you to import libs like `numpy`. This is experimental.

-  ``%%tutor --lang java`` or ``%%tutor -l java`` to show a pythontutor

   IFrame with **java** code.

-  ``%%tutor --lang javascript`` or ``%%tutor -l javascript`` to show a

   pythontutor IFrame with **javascript** code.

-  ``%%tutor --lang typescript`` or ``%%tutor -l typescript`` to show a 

   pythontutor IFrame with **typescript** code.

-  ``%%tutor --lang ruby`` or ``%%tutor -l ruby`` to show a 

   pythontutor IFrame with **ruby** code.

-  ``%%tutor --lang c`` or ``%%tutor -l c`` to show a 

   pythontutor IFrame with **c** code.

-  ``%%tutor --lang c++`` or ``%%tutor -l c++`` to show a 

   pythontutor IFrame with **c++** code.

 

 .. image:: https://raw.githubusercontent.com/kikocorreoso/tutormagic/master/imgs/normal.png

   :width: 500 px



``--height`` or ``-h``: it changes the height of the output area display in pixels. It is used to define the height of the IFrame used to embed http://pythontutor.com within the notebook. If the `--tab` option is used 

this option will be ignored.



 .. image:: https://raw.githubusercontent.com/kikocorreoso/tutormagic/master/imgs/height.png

   :width: 500 px



``--tab`` or ``-t``: it will open http://pythontutor.com in a new tab 

instead of within an IFrame within the notebook.



``--secure`` or ``-s``: it will use HTTPS to open PythonTutor.com. This is useful when being used in a notebook that uses SSL.



``--link`` or ``-k``: it will display a link to PythonTutor, not via an iFrame.



 .. image:: https://raw.githubusercontent.com/kikocorreoso/tutormagic/master/imgs/link1.png

   :width: 500 px



``--run`` or ``-r``: Use this option if you also want to run the code in the cell in the notebook.



 .. image:: https://raw.githubusercontent.com/kikocorreoso/tutormagic/master/imgs/run1.png

   :width: 500 px



You can customize how PythonTutor is rendered via the options available below in the URL params. The following options are available:



- Use the ``--cumulative`` option to tell PythonTutor to the cumulative to True



 .. image:: https://raw.githubusercontent.com/kikocorreoso/tutormagic/master/imgs/cumulative1.png

   :width: 500 px



- Use the ``--heapPrimitives`` option to tell PythonTutor to render objects on the heap

  

 .. image:: https://raw.githubusercontent.com/kikocorreoso/tutormagic/master/imgs/test_heap1.png

   :width: 500 px



- Use the ``--textReferences`` option to tell PythonTutor to use text labels for references

- Use the ``--curInstr`` followed by a number to start the visualisation at the defined step

  

 .. image:: https://raw.githubusercontent.com/kikocorreoso/tutormagic/master/imgs/current1.png

   :width: 500 px



- Use the ``--verticalStack`` to set visualization to stack atop one another.

  

 .. image:: https://raw.githubusercontent.com/kikocorreoso/tutormagic/master/imgs/vertical1.png

   :width: 500 px



Examples

--------



`Example notebook included in the repository `__.



`Example (in spanish)

notebook `__.



Name of the extension

---------------------



The name of the extension was suggested by Doug S. Blank 

(`@dsblank `__).



Changelog

---------



Version 0.3.1

-------------



- Added option `--lang py3anaconda` (thanks to `@naereen `__).



Version 0.3.0

~~~~~~~~~~~~~



- Added options ``--secure``, ``--link``, ``--cumulative``, ``--heapPrimitives`` and ``--textReferences`` (thanks to James Quacinella (`@jquacinella `__)).

- Added options ``--run``, ``--curInstr`` and ``--verticalStack``.



Version 0.2.0

~~~~~~~~~~~~~



-  Added new ``--tab`` option (thanks to Holger Karl (`@hkarl `__)).

-  Added new ``--height`` option (thanks to Tom Simonart(`@tomsimonart `__)).

-  Added new languages available on http://pythontutor.com (Typescript, Ruby, C and C++).



Version 0.1.0

~~~~~~~~~~~~~



-  Initial version