Importing/loading local javascript file with WebIO


#1

I am building a 3D visualization system for my models based on three.js using WebIO, inspired by the proof of concept here. I have managed to do some basic rendering so far but now I would like to use a local version of three.min.js plus other local js files that add functionality. However, I cannot figure out how to do so through WebIO, just adding the file to import! does not work and I cannot figure out how to add a script tag with the source and get it to work. I went through the source code of the package but I simply was not able to understand what was going on. I am using Blink as frontend. I tried loading the file directly into the Blink window with loadfile but that did not work either…

I wonder if there are any examples of what I am trying to achieve or if someone knows how to do it?


#2

This probably isn’t the most correct method, but you may be able to hook into function loadhtml(win::Window, html::AbstractString) in Blink/atomshell, copy the js files to the tempdir and they should be accessible with src="./script.js" through html. Not sure why a full path to the script wouldn’t work though, rather than moving to temp
Add- that does happen if julia acts as a webserver to the page, the script http requests will go to julia
the address will be localhost/etc rather than file://etc.html if it is displayed


#3

In case you’re interested, I have a related project over in MeshCat.jl. Rather than using WebIO, I am manually starting an HTTP server to serve the three.js frontend and then communicating with that server over ZMQ. The architecture was designed to make it easy to communicate with the viewer from a variety of different languages, and I have a compatible python version here: https://github.com/rdeits/meshcat-python

I’m still thinking about whether it would be possible or desirable for meshcat to interact with WebIO in some way, so I’d be interested to hear how your project goes.


#4

I finally figured out how to do it. For reference, I write the solution here as I could not find any documentation on this (in the end the clue was looking at source code of PlotlyWebIO). If I create an assets folder inside the package, then WebIO can find the file as pkg/<pkg_name>/<file_name> as long as the package is in the Pkg.dir() directory.

I was aware of it from your announcement. I tried it and looked into it but I have no experience in web development so I was not able to understand the details and how to extend it. Something important for my application is to be able to send information in both directions. Is that possible or within the scope of MeshCat.jl?


#5

Got it. And I’m not surprised–I’m not a particularly fluent web developer and I’m sure I haven’t made my js/html easy to understand or extend.

It’s not currently possible to push messages in both directions in meshcat, but it’s something that I know will eventually be needed. I’ve been looking at WebIO myself recently trying to get some inspiration or implementation ideas.


#6

@AleMorales by the way, I’ve been working on porting MeshCat.jl over to use WebIO: https://github.com/rdeits/MeshCat.jl/pull/28 , and that will definitely make it possible to send information in both directions (which wasn’t possible in the old implementation). Another significant benefit of using WebIO is that it will be possible to run MeshCat.jl on a remote Jupyter server like https://juliabox.com/ If you’re interested in collaborating, I’d certainly be grateful for the help. I’ve also cleaned up the meshcat javascript code and converted it to a proper node package, so it should be a bit easier to develop.