Use uniform JSON API

js/lib/example.js

@@ -2,6 +2,7 @@ var widgets = require('@jupyter-widgets/base');
 var _ = require("underscore");
 
 var wwtmodule = require('./wwtsdk.js');
+var wwtjson = require('./wwt_json_api.js');
 
 var WWTModel = widgets.DOMWidgetModel.extend({
     defaults: _.extend(widgets.DOMWidgetModel.prototype.defaults(), {
@@ -45,9 +46,7 @@ var WWTView = widgets.DOMWidgetView.extend({
 
     handle_custom_message: function(msg) {
       console.log(msg);
-      if (msg['event'] == 'center_on_coordinates') {
-        this.wwt.gotoRaDecZoom(msg['ra'], msg['dec'], msg['fov'], msg['instant']);
-      }
+      wwt_apply_json_message(this.wwt, msg)
     }
 
 });

js/lib/wwt_json_api.js

@@ -0,0 +1 @@
+../../pywwt_web/wwt_json_api.js

pywwt_web/model.py

@@ -1,4 +1,21 @@
-class WWTModel:
+from traitlets import Bool, HasTraits
+
+
+class WWTModel(HasTraits):
+
+    # TODO: need to add all settings
+    constellation_figures = Bool(False, help='Whether to show the constellations').tag(wwt='showConstellationFigures', sync=True)
+
+    def __init__(self):
+        super(WWTModel, self).__init__()
+        self.observe(self._on_trait_change, type='change')
+
+    def _on_trait_change(self, changed):
+        wwt_name = self.trait_metadata(changed['name'], 'wwt')
+        if wwt_name is not None:
+            self.send_msg(event='setting_set',
+                          setting=wwt_name,
+                          value=changed['new'])
 
     def center_on_coordinates(self, ra, dec, fov, instant=True):
         self.send_msg(event='center_on_coordinates',

pywwt_web/qt_widget.py

@@ -12,6 +12,10 @@ from .model import WWTModel
 __all__ = ['WWTQtWidget']
 
 WWT_HTML_FILE = os.path.join(os.path.dirname(__file__), 'wwt.html')
+WWT_JSON_FILE = os.path.join(os.path.dirname(__file__), 'wwt_json_api.js')
+
+with open(WWT_JSON_FILE) as f:
+    WWT_JSON = f.read()
 
 with open(WWT_HTML_FILE) as f:
     WWT_HTML = f.read()
@@ -65,12 +69,23 @@ class WWTQWebEnginePage(QWebEnginePage):
                 self.wwt_ready.emit()
 
 
-class WWTQtWidget(QtWidgets.QWidget, WWTModel):
+class WWTQtWidget(WWTModel):
+
+    def __init__(self):
+        super(WWTModel, self).__init__()
+        self.widget = WWTQtWebpage()
+        self.widget.show()
+
+    def send_msg(self, **kwargs):
+        msg = json.dumps(kwargs)
+        return self.widget._run_js("wwt_apply_json_message(wwt, {0})".format(msg))
+
+
+class WWTQtWebpage(QtWidgets.QWidget):
 
     def __init__(self, parent=None):
 
-        QtWidgets.QWidget.__init__(self, parent=parent)
-        WWTModel.__init__(self)
+        super(WWTQtWebpage, self).__init__(parent=parent)
 
         self.web = QWebEngineView()
         self.page = WWTQWebEnginePage()
@@ -89,9 +104,10 @@ class WWTQtWidget(QtWidgets.QWidget, WWTModel):
 
     def send_msg(self, **kwargs):
         msg = json.dumps(kwargs)
-        self._run_js("wwt_receive_message({0})".format(msg))
+        return self._run_js("wwt_apply_json_message(wwt, {0})".format(msg))
 
     def _on_wwt_ready(self):
+        self._run_js(WWT_JSON)
         self._wwt_ready = True
         self._run_js(self._js_queue)
         self._js_queue = ""
@@ -101,7 +117,7 @@ class WWTQtWidget(QtWidgets.QWidget, WWTModel):
             return
         if self._wwt_ready:
             print('Running javascript: %s' % js)
-            self.page.runJavaScript(js)
+            return self.page.runJavaScript(js)
         else:
             print('Caching javascript: %s' % js)
             self._js_queue += js + '\n'

pywwt_web/wwt.html

@@ -8,6 +8,7 @@
     <title>Simple WWT Web Client</title>
     <script src="http://www.worldwidetelescope.org/scripts/wwtsdk.aspx"></script>
     <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
+    <script src="{WWT_JSON_API}"></script>
 
     <!-- The following is to avoid scrollbars -->
     <style type="text/css">
@@ -43,12 +44,6 @@
         wwt_ready = 1;
       }
 
-      function wwt_receive_message(msg) {
-        if (msg['event'] == 'center_on_coordinates') {
-          wwt.gotoRaDecZoom(msg['ra'], msg['dec'], msg['fov'], msg['instant']);
-        }
-      }
-
     </script>
 
   </head>

pywwt_web/wwt_json_api.js

@@ -0,0 +1,22 @@
+// This file is a mini-library that translates JSON messages into actions
+// on the WWT side. The reason for having this in it's own file is that
+// we can then use it for both the Jupyter widget and other front-ends such
+// as the Qt one.
+
+function wwt_apply_json_message(wwt, msg) {
+
+  switch(msg['event']) {
+
+    case 'center_on_coordinates':
+      wwt.gotoRaDecZoom(msg['ra'], msg['dec'], msg['fov'], msg['instant']);
+      break;
+
+    case 'setting_set':
+      var name = msg['setting'];
+      wwt.settings["set_" + name](msg['value']);
+
+  }
+
+}
+
+window.wwt_apply_json_message = wwt_apply_json_message