HTML Generator for JSmol#

This is all an evil iframe hack to get JSmol to display 3-d graphics while separating JSmol’s j2s machinery from your actual web page.

There are some caveats for how to load JSmol, in particular it cannot just load its code from a file:// uri. To use a html file generated by this module, you need

A web server,
The JSmol directory tree must be served by your web server,
The output of JSMolHtml.inner_html() or JSMolHtml.outer_html() must be served by the same web server.

See https://github.com/phetsims/molecule-polarity/issues/6 for a discussion of loading JSMol.

class sage.repl.display.jsmol_iframe.JSMolHtml(jmol, path_to_jsmol=None, width='100%', height='100%')#

Bases: SageObject

INPUT:

jmol – 3-d graphics or sage.repl.rich_output.output_graphics3d.OutputSceneJmol instance. The 3-d scene to show.
path_to_jsmol – string (optional, default is '/nbextensions/jupyter-jsmol/jsmol'). The path (relative or absolute) where JSmol.min.js is served on the web server.
width – integer or string (optional, default: '100%'). The width of the JSmol applet using CSS dimensions.
height – integer or string (optional, default: '100%'). The height of the JSmol applet using CSS dimensions.

EXAMPLES:

sage: from sage.repl.display.jsmol_iframe import JSMolHtml
sage: JSMolHtml(sphere(), width=500, height=300)
JSmol Window 500x300

iframe()#

Return HTML iframe

OUTPUT:

String.

EXAMPLES:

sage: from sage.repl.display.jsmol_iframe import JSMolHtml
sage: from sage.repl.rich_output.output_graphics3d import OutputSceneJmol
sage: jmol = JSMolHtml(OutputSceneJmol.example())
sage: print(jmol.iframe())
<iframe srcdoc="
...
</iframe>

inner_html()#

Return a HTML document containing a JSmol applet

EXAMPLES:

sage: from sage.repl.display.jsmol_iframe import JSMolHtml
sage: from sage.repl.rich_output.output_graphics3d import OutputSceneJmol
sage: jmol = JSMolHtml(OutputSceneJmol.example(), width=500, height=300)
sage: print(jmol.inner_html())
<html>
<head>
  <style>
    * {
      margin: 0;
      padding: 0;
        ...
</html>

js_script()#

The script() as Javascript string.

Since the many shortcomings of Javascript include multi-line strings, this actually returns Javascript code to reassemble the script from a list of strings.

OUTPUT:

String. Javascript code that evaluates to script() as Javascript string.

EXAMPLES:

sage: from sage.repl.display.jsmol_iframe import JSMolHtml
sage: from sage.repl.rich_output.output_graphics3d import OutputSceneJmol
sage: jsmol = JSMolHtml(OutputSceneJmol.example(), width=500, height=300)
sage: print(jsmol.js_script())
[
  'data "model list"',
  ...
  'isosurface fullylit; pmesh o* fullylit; set antialiasdisplay on;',
].join('\n');

outer_html()#

Return a HTML document containing an iframe with a JSmol applet

OUTPUT:

String

EXAMPLES:

sage: from sage.repl.display.jsmol_iframe import JSMolHtml
sage: from sage.repl.rich_output.output_graphics3d import OutputSceneJmol
sage: jmol = JSMolHtml(OutputSceneJmol.example(), width=500, height=300)
sage: print(jmol.outer_html())
<html>
<head>
  <title>JSmol 3D Scene</title>
</head>
</body>

<iframe srcdoc="
        ...
</html>

script()#

Return the JMol script file.

This method extracts the Jmol script from the Jmol spt file (a zip archive) and inlines meshes.

OUTPUT:

String.

EXAMPLES:

sage: from sage.repl.display.jsmol_iframe import JSMolHtml
sage: from sage.repl.rich_output.output_graphics3d import OutputSceneJmol
sage: jsmol = JSMolHtml(OutputSceneJmol.example(), width=500, height=300)
sage: jsmol.script()
'data "model list"\n10\nempt...aliasdisplay on;\n'