WorldWideTelescope / wwt-web-client

The WorldWide Telescope web client lets you explore the universe in your browser.
https://worldwidetelescope.org/webclient/
MIT License
105 stars 35 forks source link

Provide a way to properly shut down/restart WWT web client #169

Open astrofrog opened 6 years ago

astrofrog commented 6 years ago

(this was already reported initially to @astrojonathan by email, but this is a more complete record with code)

I am working on a WWT widget for the Jupyter notebook. When creating a widget in Jupyter notebooks, we can add nodes to the output cell, so I am adding a WWTCanvas <div> to the output cell, then initializing the WWTControl. This works fine, but if the cell is cleared then re-executed, or if I simply re-execute the cell, things stop working. This is equivalent to removing the WWTCanvas node, adding it back, and re-initializing the WWTControl.

The following simple code reproduces the issue:

<html>
  <head>

    <meta charset="utf-8" http-equiv="X-UA-Compatible" content="chrome=1, IE=edge"/>

    <title>Simple WWT Web Client</title>
    <script src="http://www.worldwidetelescope.org/scripts/wwtsdk.aspx"></script>

    <script>
      var wwt;
      function initialize_canvas() {
        // Find container on page
        container = document.getElementById('container');
        // This simulates resetting the output cell in Jupyter notebooks
        while (container.hasChildNodes()) {
          container.removeChild(container.lastChild);
        }
        // Make the WWTCanvas div that will then contain <canvas>
        var div = document.createElement("div");
        div.setAttribute("id", "WWTCanvas");
        div.setAttribute("style", "width: 640px; height: 480px; border-style: none; border-width: 0px;")
        container.appendChild(div);
        // Initialize WWTControl
        wwt = wwtlib.WWTControl.initControlParam('WWTCanvas');
      }
    </script>
  </head>

  <body>
    <input value='Start WWT' type='button' onclick='initialize_canvas()'>
    <div id='container'></div>
  </body>

</html>

Click on the button, and WWT will appear. Click on the button again and WWT disappears.

If I use my forked version of the web client JS code:

https://raw.githubusercontent.com/astrofrog/pywwt-web/master/js/lib/wwtsdk.js

(see private email communications with @astrojonathan), then when clicking again I get WebGL errors related to the GL context not being correct.

astrofrog commented 6 years ago

Following advice from @astrojonathan, this can be done using iframes