About SageMathCell

SageMathCell is an open-source, scalable, and easy-to-use web interface to Sage, a comprehensive open-source math software system. Additionally, SageMathCell can be used to embed Sage computations into any webpage.

Embedding into a webpage

Embedding a Sage cell into a webpage is straightforward:
  1. Include the following HTML at the top of the webpage (optionally replacing sagecell.sagemath.org with the name of your server). The second line makes it so that any element with a class of sage will turn into a Sage cell.

    <script src="https://sagecell.sagemath.org/static/embedded_sagecell.js"></script>
    <script>sagecell.makeSagecell({"inputLocation": ".sage"});</script>

    If you are embedding into a webpage with lots of styling (like a blog, or a deck.js presentation), there might be conflicts between the page styling and the styles for the Sage cell. If you notice that the Sage cell is not looking normal, you might also include the following code after the above in order to fix the Sage cell styles.

    <link rel="stylesheet" type="text/css" href="https://sagecell.sagemath.org/static/sagecell_embed.css">
  2. Include code in the body of the page. The code is wrapped in <script> tags so that it is not treated as HTML.
    <div class="sage">
      <script type="text/x-sage">1+2</script>
    </div>
  3. Subscribe to the discussion group sage-cell to be aware of changes and issues.
There are lots of options controlling how cells are embedded, including:

Full Example

Here is a complete web page example:
<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>SageMathCell</title>
    <script src="https://sagecell.sagemath.org/static/embedded_sagecell.js"></script>
    <script>$(function () {
    // Make the div with id 'mycell' a Sage cell
    sagecell.makeSagecell({inputLocation:  '#mycell',
                           template:       sagecell.templates.minimal,
                           evalButtonText: 'Activate'});
    // Make *any* div with class 'compute' a Sage cell
    sagecell.makeSagecell({inputLocation: 'div.compute',
                           evalButtonText: 'Evaluate'});
    });
    </script>
  </head>
  <body>
  <h1>Embedded Sage Cells</h1>

  <h2>Factorial</h2>
  Click the “Activate” button below to calculate factorials.
    <div id="mycell"><script type="text/x-sage">
@interact
def _(a=(1, 10)):
    print(factorial(a))
 </script>
</div>

<h2>Your own computations</h2>
Type your own Sage computation below and click “Evaluate”.
    <div class="compute"><script type="text/x-sage">plot(sin(x), (x, 0, 2*pi))</script></div>
    <div class="compute"><script type="text/x-sage">
@interact
def f(n=(0,10)):
    print(2^n)
</script></div>
  </body>
</html>
SageMathCell has two types of permalinks generated with each computation (accessible from links at the upper right of any output).
Permalink
A URL which contains a compressed version of the code. This is a truly permanent link that does not depend on the server storing the code (since the text is encoded in the URL itself). This URL can be used with a different server simply by changing the domain name. If the code is too long, the length of the URL may cause problems in some browsers.
Shortened Temporary Link
A shorter URL containing an identifier for the code. The code is stored in a database and retrieved using the ID, so the link will be valid only with servers connected to the same database, and only as long as the database retains the input.

Where is it used?

SageMathCell is used in a variety of places. If you know of another use of SageMathCell, please let us know.

Technology used

SageMathCell is built on top of the IPython architecture for executing Python code remotely. We use:

A short history

In January 2011 at Sage Days 27, William Stein and Jason Grout implemented a proof-of-concept “Single Cell” server designed to be a web interface for a single Sage computation. Ira Hanson soon joined the project and Jason and Ira continued building a prototype. Many helpful design discussions with Robert Bradshaw, Fernando Perez, Min Ragan-Kelly, and Brian Granger at Sage Days 29 pushed the design further. Alex Kramer joined the project in May 2011, and Jason, Ira, and Alex (the “Drake Sage Group”) worked full-time at Drake University (thanks to the UTMOST NSF funding and a Drake internal grant) to design and implement the first version of SageMathCell in the summer of 2011. Ira Hanson worked with Michael Gage, Jason Aubrey, Davide Cervone, and John Travis from WeBWorK at Sage Days 31 to allow Sage cells to be embedded in WeBWorK problems and other external pages. In July 2011, the SageMathCell developers announced the release of an open beta for SageMathCell Version 1 on a public server for testing.

Version 1 of SageMathCell reimplemented much of the IPython 0.12 messaging protocol in a custom layer on top of Sage (since IPython was not yet mature enough to be included in Sage). Jason, Ira, and Alex continued maintaining and improving this codebase throughout the 2011–2012 academic year. The Android and iOS apps, which relied on SageMathCell, were built by Ivan Andrus and Volker Braun. People started incorporating Sage cells into their curricular materials, and momentum was gathering. Alex and Jason attended Sage Days 35.5 to help in these and other efforts.

By the spring of 2012, the IPython codebase had matured enough to be included in Sage and serve as a base for SageMathCell. Steven Johnson joined Jason, Ira, and Alex to work full-time (under NSF funding) during the summer of 2012 to go back to the drawing board and redesign and reimplement SageMathCell to take advantage of insights gained during the first year. Byron Varberg also joined the Drake Sage Group to implement the Sage Interact website. SageMathCell Version 2 went beta in July 2012.

In the summer and fall of 2012, David Smith started transitioning the MAA Calculus book to use Sage interacts for all interactive activities, which was tested at Hood College during the 2012–2013 academic year. Jason, Ira, and Alex continued maintaining and improving SageMathCell codebase during the academic year as well.

In the summer of 2014, Andrey Novoseltsev picked up maintenance and continued further development of SageMathCell.

Authors

This material is based upon work supported by the National Science Foundation under Grant No. DUE-1022574. Any opinions, findings and conclusions or recomendations expressed in this material are those of the author(s) and do not necessarily reflect the views of the National Science Foundation (NSF).