Friday, June 20, 2014

Embedding Sage Cells in HTML Pages


Update:  I finally found what looks like very complete documentation on the Sage cell server.

I'm taking a little break from the Alcubierre work[1] and jotting down a few notes on how to embed +Sage Mathematical Software System cells into html pages.  I couldn't find any documentation or howto pages for this, so here are my instructions for the next time I get ready to do this.

Insert Sage Javascript at the Bottom of the Page
For whatever reason, my blogspot entries will erease code placed at the top of a post.  They will however allow scripts that are included at the end of the page, go figure.  So, at the bottom of the page place the following html code:

<script>
$(function() {
sagecell.makeSagecell({
inputLocation: '#graphdemo',
evalButtonText: 'Analyze the Alcubierre tophat function'});
});
</script>


In the position on the page where you want your actualy sage cell to be displayed insert a div wrapping your sage code like so

<div id="graphdemo">
<script type="text/code">
ftophat(s,r, R)=((tanh(s*(r+R)))-(tanh(s*(r-R))))/(2*tanh(s*R))
ftophat(s,r, R)=((tanh(s*(r+R)))-(tanh(s*(r-R))))/(2*tanh(s*R))
@interact
def _(sigma=(1..23), R=(1..7)):
  ftp = ftophat(sigma, r, R)
  pt = plot(ftp, -R-1, R+1,color='blue', thickness=2)
  html('$f(r)\;=\;\dfrac{tanh(\sigma(r+R)) - tanh(\sigma(r-R))}{2 tanh(\sigma R)}$')

  show(pt, ymin = -0.1, ymax = 1.1)</script></div>



You can choose the div id to be anything you want, however, it needs to match the text for inputlocation in the scripting block.  Within the <script type="text/code> tags, put whatever Sage code you'd like to demonstrate on your web page.  Finally, place the text you want displayed on the blue button that will start the Sage cell in the evalButtonText field of the Javascript block. For a page that demonstrates all this, see the latest Alcubierre demo on this site. That's all there is to it! Please let me know if you have any questions or ideas. By the way, does anyone know how to specify the size of the Sage demo block on the html page? Mine exceeds my page width and turns on scroll bars.


References:
1.  Alcubierre work
http://copaseticflow.blogspot.com/2014/06/the-alcubierre-warp-drive-tophat.html


No comments: