Using HTML5 Canvas / SVG for GUI

General JUCE discussion
1

The last few weeks I've been looking into HTML/CSS/JavaScript.

Due to unrelenting strain injuries I'm going to have to look for funding to continue my IT projects by outsourcing, so I am focusing on putting my ideas up online with a view to seeking cash.

So that's what got me into webdev. But even before that I was wondering about extending JUCE so as to target browsers as well as desktops.

It looks as though HTML5 Canvas is providing a rich UI platform -- you can draw using SVG or WebGL (same as GLES2).

So if I design my UI in JavaScript on a Canvas, then I would just need JUCE to render a full screen HTML page.  And I could make use of all .js libraries in the public domain.  Things like http://d3js.org/ and http://raphaeljs.com/ .

Then I could provide an abstraction layer that connects the UI to the main code. Maybe using localhost UDP.

This would mean that there is a clean separation between UI and the main engine. In this way I can reuse UI components between web/desktop. I can even provide lightweight .js engine implementations.

That's something I like the idea of. I'm just putting this out as an idea / conversation topic.

I think it's going to be a good few years before heavy real-time audio processing becomes a genuine possibility on browsers -- not being able to compile code is a serious problem. But already there are some impressive illustrations of audio projects on the web, e.g. http://mudcu.be/piano/

For devs this may be a good thing -- punters would be able to play on the website with a demo, but would have to download the full product as a standalone app. If they could do everything on the web, it's harder to monetise and you run the risk of people nicking your code, as it's all client-side JavaScript.

My only sadness here is that I can't see a place for Python. I prefer Python to JavaScript, and I put a lot of work into connecting Python with C++. I've also written a lot of gamelogic in Python.  Python and JavaScript have much in common with one another, I am constantly surprised I don't find much mention of this on the web. But they seem to be built using the same "everything is an object, even a function" architectural principle.

π

2 Likes
2

Hi,

I'm looking into doing the same, using CEF.

https://bitbucket.org/chromiumembedded/cef

 

Some people have managed to integrate it into Juce more or less.

http://www.magpcss.org/ceforum/viewtopic.php?f=6&t=11367

 

Specifically, I'd love to use the 3D stuff from Cinder, do the UI in html and css with CEF and export everything into a plugin with Juce. That would be the ultimate combination.

 

Rob

 

3

I think this idea has a lot of potential. 

Looks like there was some discussion this a while back: http://www.juce.com/forum/topic/juce-styling-needs?page=1

An interesting link from there is to http://librocket.com - CSS/HTML middleware for C++

Being involved in web dev as my current day job, I am very used to using CSS and HTML to describe UI elements. I don't know if its the best format to use, maybe SVG would fit better, but its certainly familiar to many people.

 

4

This definitely sounds interesting as the chromium code is very well optimized. We will look into this but it's not super high priority for us at the moment.

5

When I originally posted I just assumed ( naïvely) that it would be trivial to do, since the JUCE demo illustrates and embedded web browser component. 

Just checking now, everything on http://threejs.org/examples appears to work from the demo browser component.

The only hurdle I see is bidirectional communication between the .js-rich HTML and the JUCE code.   While I suspect something can be done using UDP/localhost, I'm not 100% sure.

Is there anyone familiar enough with networking concepts and their implementation in JS and JUCE that might be able to confirm whether this proposed bridge is actually possible?

If so, I will probably get round to doing it sometime over the summer.

π

PS Checking on IRC, it appears that bidirectional Communication via UDP/localhost is probably going to work.

6

One year on and I’m looking at this topic again.

Just wanted to give it a bump.

It’s possible to make some really funky stuff happen with very few lines of JavaScript, thanks mainly to available libraries like D3. Technology will be moving towards a point where we can get an HTML5 canvas on all five platforms.

π

7

Yep. CEF is still an interesting approach, I’ve wanted to explore this too. Maybe a project for a juce intern to investigate…

3 Likes
8

This is interesting, is it not possible to bind an html view with the javascript engine inside JUCE? Perhaps something like this could be added?

9

I also need it! because on Windows, JUCE application’s rendering result is so awful, especially the blurry, thick text…that’s why none of my friends willing to use JUCE, they even refuse to look any JUCE application more than once… it’s true, don’t blame on me!

10

You can also piggyback on Electron:


Its built on top of Chromium and used by projects like VS Code, Atom and Slack.

2 Likes
11

how is this idea going? :slight_smile: it seems very interesting