HTML Generator for JSmol - The Sage Command Line

Skip to content
Back to top
View this page
Edit this page

# 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 (default: `'/nbextensions/jupyter-jsmol/jsmol'`). The path (relative or absolute) where `JSmol.min.js` is served on the web server.

  - `width` – integer or string (default: `'100%'`). The width of the JSmol applet using CSS dimensions.

  - `height` – integer or string (default: `'100%'`). The height of the JSmol applet using CSS dimensions.

  EXAMPLES:

  Sage

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

  Python

      >>> from sage.all import *
      >>> from sage.repl.display.jsmol_iframe import JSMolHtml
      >>> JSMolHtml(sphere(), width=Integer(500), height=Integer(300))                            # needs sage.plot
      JSmol Window 500x300

  iframe()

    Return HTML iframe.

    OUTPUT: string

    EXAMPLES:

    Sage

        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>

    Python

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

  inner_html()

    Return a HTML document containing a JSmol applet.

    EXAMPLES:

    Sage

        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>

    Python

        >>> from sage.all import *
        >>> from sage.repl.display.jsmol_iframe import JSMolHtml
        >>> from sage.repl.rich_output.output_graphics3d import OutputSceneJmol
        >>> jmol = JSMolHtml(OutputSceneJmol.example(), width=Integer(500), height=Integer(300))
        >>> 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

        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');

    Python

        >>> from sage.all import *
        >>> from sage.repl.display.jsmol_iframe import JSMolHtml
        >>> from sage.repl.rich_output.output_graphics3d import OutputSceneJmol
        >>> jsmol = JSMolHtml(OutputSceneJmol.example(), width=Integer(500), height=Integer(300))
        >>> 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

        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>

    Python

        >>> from sage.all import *
        >>> from sage.repl.display.jsmol_iframe import JSMolHtml
        >>> from sage.repl.rich_output.output_graphics3d import OutputSceneJmol
        >>> jmol = JSMolHtml(OutputSceneJmol.example(), width=Integer(500), height=Integer(300))
        >>> print(jmol.outer_html())
        <html>
        <head>
          <title>JSmol 3D Scene</title>
        </head>
        </body>
        <BLANKLINE>
        <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

        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'

    Python

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