Camera Sync.ipynb

{
 "metadata": {
  "name": "",
  "signature": "sha256:f88798579aecb201216786ce2de6dce71ec9e8734b5e5b1a7de1a69b89db2de3"
 },
 "nbformat": 3,
 "nbformat_minor": 0,
 "worksheets": [
  {
   "cells": [
    {
     "cell_type": "markdown",
     "metadata": {},
     "source": [
      "# Chemview can render multiple widgets and sync between their controls"
     ]
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "from chemview import MolecularViewer\n",
      "from chemview import enable_notebook\n",
      "enable_notebook()\n",
      "\n",
      "import numpy as np"
     ],
     "language": "python",
     "metadata": {},
     "outputs": [
      {
       "javascript": [
        "$(\"head\").append($(\"<link/>\").attr({\n",
        "  rel:  \"stylesheet\",\n",
        "  type: \"text/css\",\n",
        "  href: \"/nbextensions/context.standalone.css\"\n",
        "}));\n",
        "\n",
        "require.config({\n",
        "    paths: {\n",
        "        'three': '/nbextensions/three.min',\n",
        "        'exporter' : '/nbextensions/objexporter',\n",
        "        'filesaver' : '/nbextensions/filesaver',\n",
        "        'base64-arraybuffer': '/nbextensions/base64-arraybuffer',\n",
        "        'jqueryui': '/nbextensions/jquery-ui.min',\n",
        "        'contextmenu': '/nbextensions/context',\n",
        "        'ArcballControls' : '/nbextensions/ArcballControls',\n",
        "        'chemview': '/nbextensions/chemview',\n",
        "    },\n",
        "    shim: {\n",
        "        three: {\n",
        "            exports: 'THREE'\n",
        "        },\n",
        "\n",
        "        chemview: {\n",
        "            deps: ['three', 'ArcballControls'],\n",
        "            exports: 'MolecularViewer'\n",
        "        },\n",
        "\n",
        "        exporter: {\n",
        "            deps: ['three'],\n",
        "            exports: 'THREE.OBJExporter'\n",
        "        },\n",
        "\n",
        "        ArcballControls: {\n",
        "            deps: ['three'],\n",
        "            exports: 'THREE.ArcballControls',\n",
        "        },\n",
        "\n",
        "        jqueryui: {\n",
        "            exports: \"$\"\n",
        "        },\n",
        "\n",
        "    },\n",
        "});\n"
       ],
       "metadata": {},
       "output_type": "display_data",
       "text": [
        "<IPython.core.display.Javascript at 0x7f21e853a7d0>"
       ]
      },
      {
       "javascript": [
        "require([\n",
        "    \"jquery\",\n",
        "    \"widgets/js/widget\",\n",
        "    \"chemview\",\n",
        "    \"exporter\",\n",
        "    \"filesaver\",\n",
        "    \"contextmenu\",\n",
        "    \"base64-arraybuffer\", // provides decode\n",
        "    'jqueryui',\n",
        "    'ArcballControls',\n",
        "    ],\n",
        "function($, WidgetManager) {\n",
        "    var HEIGHT = 600,\n",
        "        WIDTH = 600,\n",
        "        HEIGHT_PX = '600px',\n",
        "        WIDTH_PX = '600px';\n",
        "\n",
        "    var MolecularView = IPython.DOMWidgetView.extend({\n",
        "\n",
        "        render : function() {\n",
        "\n",
        "            console.log(this);\n",
        "            var WIDTH = this.model.get('width'),\n",
        "                HEIGHT = this.model.get('height');\n",
        "\n",
        "            var model = this.model;\n",
        "            var canvas = $(\"<canvas/>\").height(HEIGHT).width(WIDTH);\n",
        "            var mv = new MolecularViewer(canvas);\n",
        "            this.mv = mv;\n",
        "\n",
        "            var container = $('<div/>').height(HEIGHT).width(WIDTH) \n",
        "                .resizable({\n",
        "                    aspectRatio: false,\n",
        "                    resize: function(event, ui) {\n",
        "                        mv.resize(ui.size.width, ui.size.height);\n",
        "                        model.set('width', ui.size.width);\n",
        "                        model.set('height', ui.size.height);\n",
        "\n",
        "                    },\n",
        "                    stop : function(event, ui) {\n",
        "                        mv.render();\n",
        "                    },\n",
        "                });\n",
        "\n",
        "            this.setupContextMenu(this);\n",
        "\n",
        "            container.append(canvas);\n",
        "            this.setElement(container);\n",
        "            mv.renderer.setSize(WIDTH, HEIGHT);\n",
        "\n",
        "            this.setupFullScreen(canvas, container);\n",
        "            // That was pretty hard.\n",
        "            // The widget is added at THE VERY END, and this event gets called.\n",
        "            this.model.on('displayed', function () {\n",
        "                mv.animate();\n",
        "                mv.controls.handleResize();\n",
        "            });\n",
        "\n",
        "            // Update the camera when the controls are changed\n",
        "            var model = this.model;\n",
        "            var that = this;\n",
        "\n",
        "            // We update the camera info at all times\n",
        "            that.mv.controls.staticMoving = this.model.get('static_moving');\n",
        "            this.model.on('change:static_moving', function () {\n",
        "                that.mv.controls.staticMoving = this.model.get('static_moving');\n",
        "            }\n",
        "                );\n",
        "            mv.controls.addEventListener( 'change' , \n",
        "                                            function () {\n",
        "                                                that.model.set(\n",
        "                                                    {'camera_str': JSON.stringify(\n",
        "                                                        { cid : that.cid,\n",
        "                                                          position : that.mv.camera.position,\n",
        "                                                          quaternion : that.mv.camera.quaternion })\n",
        "                                                    });\n",
        "\n",
        "                                                that.touch();\n",
        "                                            }\n",
        "            );\n",
        "\n",
        "\n",
        "            // We listen for changes in the camera\n",
        "            this.model.on(\"change:camera_str\", function (context) {\n",
        "                var camera_spec = JSON.parse(that.model.get('camera_str'));\n",
        "                \n",
        "                // This function is only for external updates to the camera.\n",
        "                // Avoid updating yourself in an infinite loop\n",
        "                if (camera_spec.cid != that.cid) {\n",
        "                    var q = camera_spec.quaternion,\n",
        "                        p = camera_spec.position;\n",
        "\n",
        "                    that.mv.controls.lastPosition.set( p.x, p.y, p.z );\n",
        "                    that.mv.camera.position.set( p.x, p.y, p.z );\n",
        "\n",
        "                    that.mv.controls.lastQuaternion.set( q._x, q._y, q._z, q._w );\n",
        "                    that.mv.camera.quaternion.set( q._x, q._y, q._z, q._w );\n",
        "\n",
        "                    that.mv.render();\n",
        "                }\n",
        "\n",
        "            });\n",
        "\n",
        "            mv.render();\n",
        "        },\n",
        "\n",
        "        update : function () {\n",
        "            return MolecularView.__super__.update.apply(this);\n",
        "        },\n",
        "\n",
        "        setupFullScreen : function(canvas, container) {\n",
        "            // currently only works in chrome. need other prefixes for firefox\n",
        "            var mv = this.mv;\n",
        "            var model = this.model;\n",
        "            canvas.dblclick(function () {\n",
        "                if ('webkitCancelFullScreen' in document) {\n",
        "                    if (!document.webkitIsFullScreen) {\n",
        "                        canvas[0].webkitRequestFullScreen();\n",
        "                        mv.resize(screen.width, screen.height);\n",
        "                        mv.render();\n",
        "                    }\n",
        "                } else if ('mozCancelFullScreen' in document) {\n",
        "                    if (!document.mozIsFullScreen) {\n",
        "                        canvas[0].webkitRequestFullScreen();\n",
        "                        mv.resize(screen.width, screen.height);\n",
        "                        mv.render();\n",
        "                    }\n",
        "                }\n",
        "            });\n",
        "\n",
        "            if ('webkitCancelFullScreen' in document) {\n",
        "                document.addEventListener(\"webkitfullscreenchange\", function() {\n",
        "                        if (!document.webkitIsFullScreen) {\n",
        "                            var width = model.get('width'),\n",
        "                                height = model.get('height');\n",
        "\n",
        "                            container.width(width).height(height);\n",
        "                            mv.resize(width, height);\n",
        "                        }\n",
        "                    });\n",
        "            } else if ('mozCancelFullScreen' in document) {\n",
        "                document.addEventListener(\"mozfullscreenchange\", function() {\n",
        "                        if (!document.mozIsFullScreen) {\n",
        "                            var width = model.get('width'),\n",
        "                                height = model.get('height');\n",
        "\n",
        "                            container.width(width).height(height);\n",
        "                            mv.resize(width, height);\n",
        "                        }\n",
        "                    });\n",
        "            }\n",
        "        },\n",
        "\n",
        "        /* We receive custom messages from our python conterpart with DOMWidget.send */\n",
        "        on_msg: function(msg) {\n",
        "            if (msg.type == 'callMethod') {\n",
        "                this[msg.methodName].call(this, msg.args);\n",
        "            }\n",
        "\n",
        "            return MolecularView.__super__.update.apply(this);\n",
        "        },\n",
        "\n",
        "        addRepresentation : function (args) {\n",
        "            var type = args.type,\n",
        "                repId = args.repId,\n",
        "                options = args.options;\n",
        "            // Pre-process the options to convert numpy arrays or \n",
        "            // other data structures\n",
        "            var that = this;\n",
        "            _.each(options, function(value, key) {\n",
        "                                if (typeof value == 'object' && 'data' in value) {\n",
        "                                    // This is a numpy array\n",
        "                                    options[key] = that.ndarrayToTypedArray(value);\n",
        "                                }\n",
        "                            });\n",
        "\n",
        "\n",
        "            if (type == 'points') {\n",
        "                var rep = new PointsRepresentation(options.coordinates, options.colors, options.sizes);\n",
        "                this.mv.zoomInto(options.coordinates);\n",
        "                this.mv.addRepresentation(rep, repId);\n",
        "            } else if (type == 'lines') {\n",
        "                var rep = new LineRepresentation(options.startCoords, options.endCoords, options.startColors, options.endColors);\n",
        "                this.mv.zoomInto(options.startCoords);\n",
        "                this.mv.addRepresentation(rep, repId);\n",
        "\n",
        "            } else if (type == 'surface') {\n",
        "                var rep = new SurfaceRepresentation(options.verts, options.faces, options.style);\n",
        "                this.mv.addRepresentation(rep, repId);\n",
        "            } else if (type == 'spheres') {\n",
        "                var rep = new SphereRepresentation(options.coordinates, options.radii, options.colors, options.resolution);\n",
        "                this.mv.addRepresentation(rep, repId);\n",
        "                this.mv.zoomInto(options.coordinates);\n",
        "            } else if (type == 'box') {\n",
        "                var rep = new BoxRepresentation(options.start, options.end, options.color);\n",
        "                this.mv.addRepresentation(rep, repId);\n",
        "            } else if (type == 'smoothline') {\n",
        "                var rep = new SmoothLineRepresentation(options.coordinates, options.color, options.resolution);\n",
        "                this.mv.addRepresentation(rep, repId);\n",
        "                this.mv.zoomInto(options.coordinates);\n",
        "            } else if (type == 'smoothtube') {\n",
        "                var rep = new SmoothTubeRepresentation(options.coordinates, options.radius, options.color, options.resolution);\n",
        "                this.mv.addRepresentation(rep, repId);\n",
        "            } else if (type == 'cylinders') {\n",
        "                var rep = new CylinderRepresentation(options.startCoords, options.endCoords, options.radii, options.colors, options.resolution);\n",
        "                this.mv.addRepresentation(rep, repId);\n",
        "                this.mv.zoomInto(options.startCoords);\n",
        "            }\n",
        "            else {\n",
        "                console.log(\"Undefined representation \" + type);\n",
        "            }\n",
        "\n",
        "            this.mv.controls.handleResize();\n",
        "            this.mv.render();      \n",
        "        },\n",
        "\n",
        "        updateRepresentation : function (args) {\n",
        "            // Updates a previously created representation\n",
        "            var repId = args.repId,\n",
        "                options = args.options;\n",
        "\n",
        "            // Pre-process for numpy arrays\n",
        "            var that = this;\n",
        "            _.each(options, function(value, key) {\n",
        "                    if (typeof value == 'object' && 'data' in value) {\n",
        "                        // This is a numpy array\n",
        "                        options[key] = that.ndarrayToTypedArray(value);\n",
        "                    }\n",
        "                });\n",
        "\n",
        "            var rep = this.mv.getRepresentation(repId);\n",
        "            rep.update(options);\n",
        "            this.mv.render();\n",
        "        },\n",
        "\n",
        "        removeRepresentation: function (args) {\n",
        "            this.mv.removeRepresentation(args.repId);\n",
        "            this.mv.render();\n",
        "        },\n",
        "\n",
        "        ndarrayToTypedArray: function (array) {\n",
        "            var buffer = decode(array['data']);\n",
        "\n",
        "            if (array['type'] == 'float32') {\n",
        "                return new Float32Array(buffer);\n",
        "            }\n",
        "            else if (array['type'] == 'int32') {\n",
        "                return new Int32Array(buffer);\n",
        "            }\n",
        "            else {\n",
        "                console.log('Type ' + array['type'] + ' is not supported');\n",
        "            }\n",
        "\n",
        "        },\n",
        "\n",
        "        setupContextMenu : function(viewer) {\n",
        "            context.init({preventDoubleContext: true});\n",
        "            this.on('exportImg', this._handle_export.bind(this));\n",
        "            var menu = [{header: 'Inline Display'},\n",
        "                    {text: 'PNG',\n",
        "                    action: function () {\n",
        "                        viewer.trigger(\"exportImg\");\n",
        "                    }\n",
        "                },];\n",
        "            context.attach('canvas', menu);\n",
        "\n",
        "        },\n",
        "        \n",
        "        _handle_export: function(){\n",
        "            // Handles when the displayimage menu is clicked\n",
        "            var dataURL = this.mv.renderer.domElement.toDataURL('image/png');\n",
        "            this.send({event: 'displayImg', dataUrl: dataURL});\n",
        "        },\n",
        "\n",
        "        _handle_serialize: function () {\n",
        "            this.send({event: 'serialize', json: this.mv.serialize()});\n",
        "        }\n",
        "    });\n",
        "\n",
        "    WidgetManager.register_widget_view('MolecularView', MolecularView);\n",
        "});"
       ],
       "metadata": {},
       "output_type": "display_data",
       "text": [
        "<IPython.core.display.Javascript at 0x7f21cf936510>"
       ]
      },
      {
       "javascript": [
        "/**\n",
        " * Trajectory control Widget for IPython\n",
        " *\n",
        " */\n",
        "\n",
        "require([\n",
        "    \"jquery\",\n",
        "    \"widgets/js/widget\",\n",
        "    'jqueryui',\n",
        "    ],\n",
        "function($, WidgetManager) {\n",
        "    var TrajectoryControls = IPython.DOMWidgetView.extend({\n",
        "        render : function() {\n",
        "\n",
        "            this.fps = this.model.get('fps');\n",
        "            this.width = 600;\n",
        "            this.height = 20;\n",
        "            var model = this.model;\n",
        "            // Create the ui elements\n",
        "            // \n",
        "            var tc = $('<div/>');\n",
        "            tc.addClass(\"ui-widget-header\")\n",
        "              .addClass(\"ui-corner-all\")\n",
        "              .css({ padding: \"6px\", display: 'flex'})\n",
        "              .width(this.width);\n",
        "\n",
        "            var that = this;\n",
        "            var slider = $('<div/>').slider({\n",
        "                value: 0,\n",
        "                max: this.model.get('n_frames'),\n",
        "                slide: function (event, ui) {\n",
        "                    model.set('frame', ui.value);\n",
        "                    that.touch();\n",
        "                },\n",
        "                start: function(event, ui) {\n",
        "                    that.pause();\n",
        "                    that.running = false;\n",
        "                },\n",
        "            });\n",
        "\n",
        "            this.running = false;\n",
        "\n",
        "            var playButton = $('<button/>').button({\n",
        "                    text: false,\n",
        "                    icons: {\n",
        "                        primary: \"ui-icon-play\"\n",
        "                    },\n",
        "                });\n",
        "\n",
        "            playButton.click(function(event) {\n",
        "                    if (!that.running) {\n",
        "                        that.play();\n",
        "                        that.running = true;\n",
        "                    } else {\n",
        "                        that.pause();\n",
        "                        that.running = false;\n",
        "                    }\n",
        "                });\n",
        "\n",
        "            playButton.width(this.height).height(this.height);\n",
        "            playButton.css(\"float\", \"left\");\n",
        "            playButton.appendTo(tc);\n",
        "\n",
        "            // Calculate the number of character to prepare for the correct space\n",
        "            \n",
        "            var maxLength = String(model.get(\"n_frames\")).length;\n",
        "\n",
        "            var frameIndicator = $(\"<span/>\").text(model.get(\"frame\") + \"/\" + model.get(\"n_frames\"))\n",
        "                                             .css( { \"width\": (2*maxLength) + \"em\",\n",
        "                                                     \"text-align\": \"right\",\n",
        "                                                     \"margin-right\": \"6px\" } );\n",
        "\n",
        "\n",
        "            model.on(\"change:frame\", function () {\n",
        "                frameIndicator.text(model.get(\"frame\") + \"/\" + model.get(\"n_frames\"));\n",
        "            });\n",
        "            // We add an extra container for the slider just for the styling\n",
        "            var sliderContainer = $(\"<div/>\").css({ \"margin\": \"4px 16px\" ,\n",
        "                                                    \"flex-grow\" : \"1\" });\n",
        "\n",
        "            slider.appendTo(sliderContainer);\n",
        "            sliderContainer.appendTo(tc);\n",
        "            frameIndicator.appendTo(tc);\n",
        "\n",
        "            this.setElement(tc);\n",
        "\n",
        "            this.slider = slider;\n",
        "            this.playButton = playButton;\n",
        "        },\n",
        "\n",
        "\n",
        "        update : function () {\n",
        "            this.fps = this.model.get('fps');\n",
        "            return TrajectoryControls.__super__.update.apply(this);\n",
        "        },\n",
        "\n",
        "        play : function () {\n",
        "            var slider = this.slider;\n",
        "            var that = this;\n",
        "            this.playButton.button('option', { icons: { primary : \"ui-icon-pause\"} });\n",
        "\n",
        "            if (slider.slider('value') == slider.slider('option', 'max')) {\n",
        "                slider.slider('value', 0);\n",
        "            }\n",
        "\n",
        "            this.playCallbackId = setInterval( function () {\n",
        "                \n",
        "                if (slider.slider('value') < slider.slider('option', 'max')) {\n",
        "                    slider.slider('value', slider.slider('value') + 1);\n",
        "                    that.model.set('frame', slider.slider('value'));\n",
        "                    that.touch();\n",
        "                } else {\n",
        "                    that.pause();\n",
        "                    that.running = false;\n",
        "                }\n",
        "\n",
        "            }, 1000/this.fps);\n",
        "\n",
        "        },\n",
        "\n",
        "        pause : function () {\n",
        "            this.playButton.button('option', { icons: { primary : \"ui-icon-play\"} });\n",
        "            clearInterval(this.playCallbackId);\n",
        "        },\n",
        "\n",
        "        /* We receive custom messages from our python conterpart with DOMWidget.send */\n",
        "        on_msg: function(msg) {\n",
        "            if (msg.type == 'callMethod') {\n",
        "                this[msg.methodName].call(this, msg.args);\n",
        "            }\n",
        "\n",
        "            return TrajectoryControls.__super__.update.apply(this);\n",
        "        },\n",
        "\n",
        "    });\n",
        "\n",
        "    WidgetManager.register_widget_view('TrajectoryControls', TrajectoryControls);\n",
        "});"
       ],
       "metadata": {},
       "output_type": "display_data",
       "text": [
        "<IPython.core.display.Javascript at 0x7f21cf936390>"
       ]
      }
     ],
     "prompt_number": 13
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "from IPython.display import display\n",
      "from IPython.utils.traitlets import link\n",
      "from IPython.html.widgets import ContainerWidget\n",
      "# Drawing a water molecule\n",
      "mvs = []\n",
      "\n",
      "for i in range(3):\n",
      "    mv = MolecularViewer(np.array([[0.0, 0.0, 0.0], [1.0, 0.0, 0.0], [0.0, 1.0, 0.0]]),\n",
      "                         {'atom_types': ['Na', 'O', 'Cl'],\n",
      "                          'bonds': [[0, 1], [1, 2]]},\n",
      "                         width = 300,\n",
      "                         height = 300)\n",
      "    mv.static_moving = True\n",
      "    mv.points()\n",
      "    mv.lines()\n",
      "    mvs.append(mv)\n",
      "    #display(mv)\n",
      "    \n",
      "link(*[(mv, \"camera_str\") for mv in mvs])\n",
      "\n",
      "container = ContainerWidget()\n",
      "container.children = mvs\n",
      "\n",
      "display(container)\n",
      "container.remove_class('vbox')\n",
      "container.add_class('hbox')"
     ],
     "language": "python",
     "metadata": {},
     "outputs": [],
     "prompt_number": 15
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [],
     "language": "python",
     "metadata": {},
     "outputs": []
    }
   ],
   "metadata": {}
  }
 ]
}