search

JuliaGizmos / Escher.jl

Composable Web UIs in Julia
https://juliagizmos.github.io/Escher.jl
Other
337 stars 63 forks source link

Features Overview #1

Open shashi opened 9 years ago

shashi commented 9 years ago

Quick list

ViralBShah commented 9 years ago

How do Gadfly plots fit in here?

shashi commented 9 years ago

A Gadfly plot get converted into a Tile via a convert(::Type{Tile}, ::Plot) method (and when rendered becomes a Patchwork node) - this already works. Added an item to expand convert functionality to the list.

mturok commented 9 years ago

This project looks great....but was wondering how hard it would be for me to create Patchwork-compatible elements on other plotting engines, other than Gadfly. Any thoughts on what would be involved if my starting point is d3, for example?

rohitvarkey commented 9 years ago

Hi. I've been working on creating Patchwork compatible elements for Compose3D.jl and help it work with Escher. Escher uses Polymer (0.5.5) under the hood to provide the web component functionality.

PolymerLabs has some custom elements implemented for libraries like d3, three-js etc already. But they haven't been maintained for some time now. So for Compose3D, I use three-js to render my elements and so I forked the three-js custom elements and customized it to fit my own needs. I think creating a set of custom elements to work with d3 would be the first step to getting such elements to work nicely with Patchwork and Escher.

Then, inside Escher, add your element files to the assets/bower_components, make an asset file importing the d3 library and then in the julia file just push the asset to the window and then you can just use Patchwork elements to output these custom tags and it should all just work!

PS: I found some more libraries implementing d3 as custom elements. And a nice example of d3 web components.

mturok commented 9 years ago

Thank you....is there a bit of a simple example I could learn from (even one that is already there?)

mturok commented 9 years ago

BTW, another question would be: if I have an html snippet that I wanted to simply embed as an Elem(), is there a simple example to follow?

shashi commented 9 years ago

I think a nice concise example is the Latex support in Escher. I have this custom element called "ka-tex" https://github.com/shashi/Escher.jl/blob/master/assets/tex.html which wraps the KaTeX library library. Then I have some code that creates a TeX tile and a render method for it: https://github.com/shashi/Escher.jl/blob/master/src/library/tex.jl. So a value of type TeX just creates a "ka-tex" custom element. Subsequent updates usually update the source property (because of diffing which figures out only the source property changed) which is handled by the sourceChanged method in the polymer element declaration.

shashi commented 9 years ago

If you have some HTML string that you want to embed in an element, the best way to do it would be: Elem(:div, innerHTML="<Your>HTML goes <Here>...") but note that this does not get you any benefits of DOM reconciliation due to DOM diffing by Patchwork.

mturok commented 9 years ago

Thank you. Will check it out.

On Fri, Jul 24, 2015, 3:02 PM Shashi Gowda notifications@github.com wrote:

If you have some HTML string that you want to embed in an element, the best way to do it would be: Elem(:div, innerHTML="HTML goes

...") — Reply to this email directly or view it on GitHub https://github.com/shashi/Escher.jl/issues/1#issuecomment-124635397.
lanzafame commented 9 years ago

Is there a eta on when Escher will move to Polymer 1.0?

shashi commented 9 years ago

I've been doing that over the past couple of days. I thought it's going to be a day's work. But there are weird issues that make no sense with some widgets. It should happen in a couple of more days though...

lanzafame commented 9 years ago

Awesome to hear that it's in the works.

robertfeldt commented 9 years ago

@shashi I tried to implement the vega-plot component you proposed in Vega.jl discussion here:

https://github.com/robertfeldt/Escher.jl/commit/3422a8e0a096b9461ad89d32f964734c5ef09eb3

but get an error when running:

feldt:~/dev/forked/Escher.jl/examples$ ~/.julia/v0.3/Escher/bin/escher --serve
Listening on 0.0.0.0:5555...
Error handling websocket connection:
VegaPlot cannot be rendered.
 in error at error.jl:21
 in render at /Users/feldt/.julia/v0.3/Escher/src/basics/tile.jl:12
 in anonymous at /Users/feldt/.julia/v0.3/Escher/src/cli/serve.jl:143
 in anonymous at /Users/feldt/.julia/v0.3/Mux/src/Mux.jl:15
 in anonymous at /Users/feldt/.julia/v0.3/Mux/src/Mux.jl:8
 in splitquery at /Users/feldt/.julia/v0.3/Mux/src/basics.jl:28
 in anonymous at /Users/feldt/.julia/v0.3/Mux/src/Mux.jl:8
 in wcatch at /Users/feldt/.julia/v0.3/Mux/src/websockets_integration.jl:12
 in anonymous at /Users/feldt/.julia/v0.3/Mux/src/Mux.jl:8
 in todict at /Users/feldt/.julia/v0.3/Mux/src/basics.jl:21
 in anonymous at /Users/feldt/.julia/v0.3/Mux/src/Mux.jl:12 (repeats 2 times)
 in anonymous at /Users/feldt/.julia/v0.3/Mux/src/Mux.jl:8
 in anonymous at /Users/feldt/.julia/v0.3/Mux/src/server.jl:38
 in handle at /Users/feldt/.julia/v0.3/WebSockets/src/WebSockets.jl:287
 in on_message_complete at /Users/feldt/.julia/v0.3/HttpServer/src/HttpServer.jl:359
 in on_message_complete at /Users/feldt/.julia/v0.3/HttpServer/src/RequestParser.jl:99
 in http_parser_execute at /Users/feldt/.julia/v0.3/HttpParser/src/HttpParser.jl:106
 in add_data at /Users/feldt/.julia/v0.3/HttpServer/src/RequestParser.jl:148
 in process_client at /Users/feldt/.julia/v0.3/HttpServer/src/HttpServer.jl:330
 in anonymous at task.jl:340

I'm not surprised ( ;) ) since I don't fully understand what I'm doing in Escher.jl yet but if you have any insight that would be great. I had to -f add the bower_components stuff so not sure it's all in the commit. Scroll to the bottom and check the escher-specific files if you have time to take a look. Thanks.

robertfeldt commented 9 years ago

Note that I fixed what I think was a bug in my first commit on vega-plot component:

https://github.com/robertfeldt/Escher.jl/commit/7a48a68c742db338b6d37cbb37d651cfb3e0cbe6