In [17]:

    

from IPython.html.widgets import DOMWidget
from IPython.display import display
from IPython.utils.traitlets import Unicode, Int
class FITSWidget(DOMWidget):
    _view_module = Unicode('FITSViewModule', sync=True)
    _view_name = Unicode('FITSView', sync=True)
    value = Int(500, sync=True)


    

In [19]:

    

%%javascript
delete requirejs.s.contexts._.defined.FITSViewModule;
define('FITSViewModule', ['jquery', 'widgets/js/widget'], function($, widget) {
    console.log('x3');
    
    var FITSView = widget.DOMWidgetView.extend({
        render: function() {
            this.viewer = $('<div></div>');
            this.viewer.attr('id', 'fv1');
            this.viewer.attr('style', 'width: 500px; height: 500px; padding: 10px 5px 5px 5px;' );
            this.$el.append(this.viewer);
       }
    });
    
    return {FITSView: FITSView};
});


    

In [22]:

    

%%html
<div id="fv2" style="width: 500px; height: 500px; padding: 10px 5px 5px 5px;"></div>

<script type="text/javascript">
    {
        onFireflyLoaded= function() {

                var data2= { "Type"      : "URL",
                             "URL"       : "http://web.ipac.caltech.edu/staff/roby/demo/2mass-m31-green.fits",
                             "Title"     : "FITS from a URL",
                             "ZoomType"  : "TO_WIDTH",
                             "ZoomToWidth" : "500",
                             "PlotToDiv"  : "fv2"
                           };
                firefly.plotGroupedImage(data2, "group1");
          }

   }
    
</script>

<script type="text/javascript" language='javascript' src='http://localhost:8080/fftools/fftools.nocache.js'></script>


    

In [20]:

    

f=FITSWidget()


    

In [23]:

    

%%javascript
var data2= { "Type"      : "URL",
            "URL"       : "http://web.ipac.caltech.edu/staff/roby/demo/2mass-m31-green.fits",
             "Title"     : "FITS from a URL",
                             "ZoomType"  : "TO_WIDTH",
                             "ZoomToWidth" : "500",
                             "PlotToDiv"  : "fv1"
                           };
                firefly.plotGroupedImage(data2, "group1");


    

In [21]:

    

display(f)


    

In [ ]: