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

Comments

The Valentine's Day Magnetic Monopole

There's an assymetry to the form of the two Maxwell's equations shown in picture 1. While the divergence of the electric field is proportional to the electric charge density at a given point, the divergence of the magnetic field is equal to zero. This is typically explained in the following way. While we know that electrons, the fundamental electric charge carriers exist, evidence seems to indicate that magnetic monopoles, the particles that would carry magnetic 'charge', either don't exist, or, the energies required to create them are so high that they are exceedingly rare. That doesn't stop us from looking for them though! Keeping with the theme of Fairbank[1] and his academic progeny over the semester break, today's post is about the discovery of a magnetic monopole candidate event by one of the Fairbank's graduate students, Blas Cabrera[2]. Cabrera was utilizing a loop type of magnetic monopole detector. Its operation is in...

Cool Math Tricks: Deriving the Divergence, (Del or Nabla) into New (Cylindrical) Coordinate Systems

Now available as a Kindle ebook for 99 cents ! Get a spiffy ebook, and fund more physics The following is a pretty lengthy procedure, but converting the divergence, (nabla, del) operator between coordinate systems comes up pretty often. While there are tables for converting between common coordinate systems , there seem to be fewer explanations of the procedure for deriving the conversion, so here goes! What do we actually want? To convert the Cartesian nabla to the nabla for another coordinate system, say… cylindrical coordinates. What we’ll need: 1. The Cartesian Nabla: 2. A set of equations relating the Cartesian coordinates to cylindrical coordinates: 3. A set of equations relating the Cartesian basis vectors to the basis vectors of the new coordinate system: How to do it: Use the chain rule for differentiation to convert the derivatives with respect to the Cartesian variables to derivatives with respect to the cylindrical variables. The chain ...

More Cowbell! Record Production using Google Forms and Charts

First, the what : This article shows how to embed a new Google Form into any web page. To demonstrate ths, a chart and form that allow blog readers to control the recording levels of each instrument in Blue Oyster Cult's "(Don't Fear) The Reaper" is used. HTML code from the Google version of the form included on this page is shown and the parts that need to be modified are highlighted. Next, the why : Google recently released an e-mail form feature that allows users of Google Documents to create an e-mail a form that automatically places each user's input into an associated spreadsheet. As it turns out, with a little bit of work, the forms that are created by Google Docs can be embedded into any web page. Now, The Goods: Click on the instrument you want turned up, click the submit button and then refresh the page. Through the magic of Google Forms as soon as you click on submit and refresh this web page, the data chart will update immediately. Turn up the:...

Copasetic Flow

Search This Blog