<span id="mailbox-conversation"><div>Hey Matthew, Cyrille,</div>
<div><br></div>
<div>I’m developing a three.js-based web app for image/object annotation called landmarker.io (I work in computer vision/machine learning, getting high quality annotations of 3D and 2D data is often critical to training models). It’s located here</div>
<div><br></div>
<div>www.landmarker.io (tool, launches in demo by default)</div>
<div><div>https://github.com/menpo/landmarker.io (code)</div></div>
<div><br></div>
<div>I’m also one of the developer’s of Menpo (www.menpo.io), which is a Python package for building and testing deformable models. I’m going to be developing an IPython widget-version of the landmarker.io tool, so we can correct annotations as we sport problems in the notebook.</div>
<div><br></div>
<div>I mention all this as:</div>
<div><br></div>
<div>1. I’m also interested in understanding how we can transfer large arrays efficiently to IPython widgets</div>
<div>2. I have a little experience in how best to handle this in a traditional client/server model, but I don’t know how well this will translate to the comm interface.</div>
<div><br></div>
<div>Basically, landmarker.io expects to be able to talk to a RESTful interface that is implemented currently by:</div>
<div><br></div>
<div>https://github.com/menpo/landmarkerio-server</div>
<div><br></div>
<div>Originally, I sent meshes as large JSON objects, but this was pretty slow as:</div>
<div><br></div>
<div>1. It’s more work in JS to parse the JSON into an array</div>
<div>2. It’s more work to turn this into the most efficient JS type for numerical arrays (which WebGL loves) which is an ArrayBuffer.</div>
<div><br></div>
<div>
<div>https://developer.mozilla.org/en-US/docs/Web/API/ArrayBuffer</div>
<div>https://developer.mozilla.org/en-US/docs/Web/API/Float32Array</div>
</div>
<div><br></div>
<div>This meant that even with a server on localhost, skipping through faces to annotate felt a little sluggish.</div>
<div><br></div>
<div>Instead now I just directly build a pure ArrayBuffer in Python on the server and ship it to the client. That happens here in the server:</div>
<div><br></div>
<div>
<div>https://github.com/menpo/landmarkerio-server/blob/master/landmarkerio/cache.py#L165</div>
<br></div>
<div>(I’m a little lazy here and literally save the file to disk, then gzip it. It could be done in memory with StringIO through, but I do this as a caching process so it’s going to disk anyway).</div>
<br><div>On the client side, I make an XMLHttpRequest and demand an array buffer from the server:</div>
<div>
<div>https://github.com/menpo/landmarker.io/blob/master/src/js/app/lib/get.js#L9</div>
<br></div>
<div>For completion, the actual parsing of the array buffer is done here:</div>
<div>
<div id="mb-reply">https://github.com/menpo/landmarker.io/blob/master/src/js/app/model/mesh.js#L104</div>
<div id="mb-reply"><br></div>
</div>
<div>Because three.js supports ArrayBuffers, this is really fast. I just point three to the array and we are away. With this implementation, browsing through subjects to annotate with a server on localhost (akin to moving between slices in your brain scan I imagine) is very fast.</div>
<div><br></div>
<div>I’m afraid I don’t have much knowledge of the comm interface - is there a document I could be pointed out that lays out the protocol? Does it sound possible to send a pure array to JS in the way I’m doing in the landmarkerio-server?</div>
<div><br></div>
<div>Best,</div>
<div>James</div>
<div><br></div>
<div><br></div></span><div class="mailbox_signature">—<br>Sent from <a href="https://www.dropbox.com/mailbox">Mailbox</a>
</div>
<br><br><div class="gmail_quote"><p>On Wed, Aug 27, 2014 at 9:53 PM, Cyrille Rossant <span dir="ltr"><<a href="mailto:cyrille.rossant@gmail.com" target="_blank">cyrille.rossant@gmail.com</a>></span> wrote:<br></p><blockquote class="gmail_quote" style="margin:0 0 0 .8ex;border-left:1px #ccc solid;padding-left:1ex;"><p>We have pretty similar requirements for Vispy, as we target fast
<br>visualization of big datasets using OpenGL in the IPython notebook. In
<br>particular, we can't use Canvas or SVG because it's just too slow for
<br>big data, so we have to use WebGL. This lets us leverage the GPU for
<br>visualization.
<br><br>I would be very interested in seeing the answers to your questions.
<br>Notably, is it possible to use binary sockets for transferring large
<br>amounts of binary data between Python and JavaScript?
<br><br>Cyrille
<br><br>2014-08-27 20:52 GMT+01:00 Matthew Brett <matthew.brett@gmail.com>:
<br>> Guys / gals,
<br>>
<br>> I want to ask for advice about writing a brain image display widget for
<br>> IPython.
<br>>
<br>> I would like to make an IPython widget that can take an in-memory numpy array
<br>> and do an interactive display of orthogonal slices from the array.  The
<br>> display will look something like Papaya:
<br>>
<br>> http://rii.uthscsa.edu/mango/papaya
<br>>
<br>> where clicking or moving the mouse causes matching slices to be displayed
<br>> through the three axes of the numpy array (here a brain image).
<br>>
<br>> Papaya is pure javascript, so I am assuming that it loads the whole array
<br>> (brain image) into a javascript variable and takes slices from that.
<br>>
<br>> What I would like to do, is to be able to keep the whole 3D array only in
<br>> Python, and pass the slices as needed to a javascript viewer.
<br>>
<br>> In my ignorance, I am not sure which approach to go for first.
<br>>
<br>> Should I use the comm / widget interface for this?  In that case I guess the
<br>> procedure would be:
<br>>
<br>> * mouse movement generates a 'need slice' message from javascript
<br>> * python kernel accepts 'need slice' message, takes slice from array, base64
<br>>   encodes into JSON, sends 'here is your slice' message back to javascript
<br>>   with the data
<br>> * javascript accepts message, unpacks base64'ed JSONed slice into variable and
<br>>   displays slice variable
<br>>
<br>> Is that right?  I guess that involves Is there any chance that this
<br>> will be fast enough for
<br>> satisfying interactive movement through the image, which would likely require
<br>> something like 20 slices per second, each of say 64 x 64 floating point?
<br>>
<br>> If not - is there something else I should look at instead?
<br>>
<br>> Another question for more thanks - should I use a Canvas or SVG element to
<br>> display the images?  The fabric.js README [1] seems to imply the
<br>> Canvas element is
<br>> faster for some interactive stuff, does anyone have relevant experience to
<br>> share?
<br>>
<br>> Thanks a lot,
<br>>
<br>> Matthew
<br>>
<br>> [1] https://github.com/kangax/fabric.js/#history
<br>> _______________________________________________
<br>> IPython-dev mailing list
<br>> IPython-dev@scipy.org
<br>> http://mail.scipy.org/mailman/listinfo/ipython-dev
<br>_______________________________________________
<br>IPython-dev mailing list
<br>IPython-dev@scipy.org
<br>http://mail.scipy.org/mailman/listinfo/ipython-dev
<br></p></blockquote></div><br>