Network.build_widget is now Network.dashboard; added plot function to…

… widgets

conx/network.py

@@ -1688,12 +1688,12 @@ def get_train_targets_length(self):
         else:
             return self.train_targets.shape[0]
 
-    def build_widget(self, width="100%", max_height="550px"):
+    def dashboard(self, width="100%", max_height="550px", iwidth="800px"): ## FIXME: iwidth hack
         """
-        Build the control-panel for Jupyter widgets. Requires running
+        Build the dashboard for Jupyter widgets. Requires running
         in a notebook/jupyterlab.
         """
-        from ipywidgets import HTML, Button, VBox, HBox, IntSlider, Select, Layout
+        from ipywidgets import HTML, Button, VBox, HBox, IntSlider, Select, Layout, Tab
 
         def dataset_move(position):
             if control_select.value == "Train":
@@ -1805,9 +1805,20 @@ def prop_one(button):
 
         # Put them together:
         control = VBox([control_select, control_slider, control_buttons], layout=Layout(width='100%'))
-        widget = VBox([net_svg, control], layout=Layout(width='100%'))
-        widget.on_displayed(lambda widget: update_slider_control({"name": "value"}))
-        return widget
+        net_page = VBox([net_svg, control], layout=Layout(width='100%'))
+        graph_page = VBox()
+        analysis_page = VBox()
+        camera_page = VBox([Button(description="Turn on webcamera")])
+        help_page = HTML('<iframe style="width: %s" src="https://conx.readthedocs.io" width="100%%" height="%s"></frame>' % (iwidth, max_height),
+                         layout=Layout(width="100%"))
+        net_page.on_displayed(lambda widget: update_slider_control({"name": "value"}))
+        tabs = [("Network", net_page), ("Graphs", graph_page), ("Analysis", analysis_page),
+                ("Camera", camera_page), ("Help", help_page)]
+        tab = Tab([t[1] for t in tabs])
+        for i in range(len(tabs)):
+            name, widget = tabs[i]
+            tab.set_title(i, name)
+        return tab
 
     def pp(self, *args, **opts):
         """

conx/tests/test_network.py

@@ -181,7 +181,7 @@ def test_cifar10():
                 metrics=['accuracy'])
     model = net.model
 
-    net.build_widget()
+    net.dashboard()
 
     x_train = x_train.astype('float32')
     x_test = x_test.astype('float32')

conx/widgets.py

@@ -24,6 +24,7 @@
 from IPython.display import Javascript, display
 from ipywidgets import Widget, register, widget_serialization, DOMWidget
 from traitlets import Bool, Dict, Int, Float, Unicode, List, Instance
+import matplotlib.pyplot as plt
 
 @register("Camera")
 class Camera(DOMWidget):
@@ -51,9 +52,9 @@ def get_camera_javascript(width=320, height=240):
             audio: false,
             video: true,
         }),
-        
+
         initialize: function() {
-            
+
             var div = document.createElement('div');
             var el = document.createElement('video');
             el.setAttribute('id', "video_widget");
@@ -69,7 +70,7 @@ def get_camera_javascript(width=320, height=240):
             var button = document.createElement('button');
             button.innerHTML = "Take a Picture";
             var that = this;
-            button.onclick = function(b) { 
+            button.onclick = function(b) {
                 var video = document.querySelector("#video_widget");
                 var canvas = document.querySelector("#video_canvas");
                 if (video) {
@@ -85,24 +86,24 @@ def get_camera_javascript(width=320, height=240):
             this.setElement(div);
             CameraView.__super__.initialize.apply(this, arguments);
         },
-        
+
         render: function() {
             var that = this;
              that.model.stream.then(function(stream) {
                  that.el.children[0].src = window.URL.createObjectURL(stream);
                  that.el.children[0].play();
              });
         }
-    });    
-    
+    });
+
     var CameraModel = widgets.DOMWidgetModel.extend({
         defaults: _.extend({}, widgets.DOMWidgetModel.prototype.defaults, {
             _model_name: 'CameraModel',
             _model_module: 'camera',
             audio: false,
             video: true
         }),
-        
+
         initialize: function() {
             CameraModel.__super__.initialize.apply(this, arguments);
             // Get the camera permissions
@@ -143,3 +144,31 @@ def uri_to_image(image_str, width=320, height=240):
     image_binary = base64.b64decode(image_b64)
     image = PIL.Image.open(io.BytesIO(image_binary)).resize((width, height))
     return image
+
+def plot(lines, width=8.0, height=4.0, xlabel="time", ylabel=""):
+    """
+    SVG(plot([["Error", "+", [1, 2, 4, 6, 1, 2, 3]]],
+             ylabel="error",
+             xlabel="hello"))
+    """
+    plt.rcParams['figure.figsize'] = (width, height)
+    fig = plt.figure()
+    for (label, symbol, data) in lines:
+        kwargs = {}
+        args = [data]
+        if label:
+            kwargs["label"] = label
+        if symbol:
+            args.append(symbol)
+        plt.plot(*args, **kwargs)
+    if any([line[0] for line in lines]):
+        plt.legend()
+    if xlabel:
+        plt.xlabel(xlabel)
+    if ylabel:
+        plt.ylabel(ylabel)
+    bytes = io.BytesIO()
+    plt.savefig(bytes, format='svg')
+    svg = bytes.getvalue()
+    plt.close(fig)
+    return svg.decode()