Forums > MaxMSP

[Sharing is Fun] Max5 to HTML


September 4, 2009 | 9:40 pm

Dear Maxers,

Looking for a way to display a dynamic music sheet on any possible platform (including any computer, iPhone or any phone aso), I finally thought the more universal would be to use… a web browser !

And I came to a solution which seems to work. Maybe some of you, skilled Maxers came to something close to the system I describe below but I didn’t find any post about it on the list. So I thought that may interest some of you…

Here is the first prototype I came to :
http://bencello.net/images/Max2HTML.png
The idea is the following :
-the Apache Server which receives a request from any browser executes a php script (nothing fancy here)
-the php script (with sockets extension of php) opens a udp port and waits (while loop) for a incoming message
-Max sends messages through a udpsend object (on the port opened in php of course)
-As soon as the php scripts receives a message, it parses it and closes the socket, allowing the apache server to finally send the page to the web browser
-the web page contains a in its header so it will refresh as soon as it’s done displaying. Then it restarts from the begin and waits for a new message from Max.

NB: Max and the Web (Apache + php) server do not actually need to be on the same machine (you may need to open the chosen port on your internet router if you do it through internet).

I haven’t tried this system on a large network or through internet yet but on a local network with various connexion types (ethernet and wifi) it works rather well with different browsers (Safari/FireFox/Opera/IE).
It is also rather well synchronised when displaying simultaneously on several machines (which is actually the most important point). But you need to open and send on a different port to each client (web browser) because of the php blocking loop.

That’s all folks !

But I’ll probably try to improve and consolidate that system. It opens some nice possibilities of network performances.

Any remark/critic/idea is of course welcome !

Cheers

BenCello

September 5, 2009 | 5:29 pm

This sounds cool. Some miscellaneous comments:

If I were building something like this, I’d probably load a single page and then use an ajax polling mechanism to fetch the latest data from the server to update the current page with javascript (instead of the meta refresh 0 technique). If that sounds interesting, it could be a good reason to learn prototype or jquery. Meta refresh is fine, but if you start doing more fancy stuff with the web UI then it might make sense to not regenerate the entire page each time.

The one port per client situation does not sound so good. If this is just for use with a small group of people and doesn’t need to scale up, then it probably doesn’t matter. But if it did need to scale up (maybe a performance/installation where people can access the page on their phones?), the solution would be to have a connection pool of a set number of udp ports. Each request coming in grabs an open connection from the pool and then returns it when done, or waits until a connection becomes available. Or you could do something else entirely…

My ajm.ruby object’s help file has an example of running a webserver inside of Max. The cool thing about this is you can send messages directly to the ajm.ruby object in Max and the next time a request comes in, all that data is available to the ruby code that’s generating the web pages. So you don’t need to worry about juggling udp connections. And you can easily get some 2 way communication going on. The example shows how you can make a form submission send a message to the Max patch. With javascript on the client side you could take this idea a lot further.

If you don’t like ruby, you can do similar things with mxj. Nick Rothwell has a net.loadbang.web object for this sort of thing, or if you like python there’s probably something you could do with his jython object. Off the top of my head I don’t know of any embedded servers that do php.

September 5, 2009 | 10:08 pm

hi ben,

i’ve been running such a system on a local network to monitor max patchs states on a web browser.

adam is right, the meta refresh method will give you blinking html pages. you have to use ajax in order to reload only some

sections of your web page. but there is a way to avoid the data to be requested by the client-side software :

i had great results using ‘data push’ mechanism with a JMS (Java Messages Service, i was using ActiveMQ : http://activemq.apache.org/). in this kind of system, client-side web browser doesn’t request for data (as it usually works with a web browser), but follows what’s called a ‘topic’. when a message arrives in the topic queue (on the server), the JMS ‘pushes’ it to every listener. this kind of solution is used to monitor real time data (rates, messages, meteorologic data, etc…) you should start here to learn how this works : http://www.eaipatterns.com/ObserverJmsExample.html.
(it will be more efficient than my quick explanation).

have fun Smile

g

September 6, 2009 | 4:50 pm

Hi !

Thank you all for your replies !

Your advice about AJAX, prototype or jquery or JMS, ActiveMQ are very good leads ! I was actually looking for some stuff like this which would allow the web browser to actually "receive" messages at the right time instead of permanently listen.
So I’ll have a look into all of these and try at least some of them. Thank’s a lot.

Only one thing bothers me a bit : Apache/PHP is a very very usual configuration for a web server and does not require anything special on the client-side.
Although AJAX is a client-side framework, I believe it still requires a specific server configuration. I am right ? And I don’t know how Javascript is handle in common mobile phones/PDA devices.
As for JMS I have, right now, absolutely no idea how it works but if it based on Java, it will probably exclude the iPhone which does not (yet) supports Java Applets. Or is it only on the server side ?

One more thing about WebServers embedded in Max (with mxj or ruby or python that does not matter). For that particular project I am working on, I am actually not entirely convinced that Max is the best way to drive the system. In fact, as it is about synchronously displaying music staves on several remote locations (+ some additional infos), the only thing I need is a sequencer/a timeline to trigger the display. So I could actually do that in almost any language !
But Max is very handy to test and design the system… especially with the Max5 transport system.

Anyway, I’ll have a look in those elements and improvements you suggested and keep you posted !

Thank’s

PS : @Adam : Yes, I knew from the begin that the "one port – one user" system is not a nice solution. And I’ll try to do better. I’m sure it’s possible.
However for the project I’m working on, I need exactly 4 clients in parallel, so choosing 4 ports will work as a first solution.

September 6, 2009 | 8:30 pm
BenCello wrote on Sun, 06 September 2009 09:50
Although AJAX is a client-side framework, I believe it still requires a specific server configuration. I am right ?

No, not really. You just serve up prototype.js or jquery.js as a static file, and include it in the page via the HTML

It really depends on how you decide handle ajax requests. They look like a normal HTTP request but typically the server handles them differently. You could just send back chunks of HTML to update a section of the page. This would be easiest, and you can generate HTML as usual.

Often though, people send ajax responses back as chunks of javascript (JSON) or XML, which is what you might be thinking. This might require reconfiguring things or adding a library on the server-side, but you don't have to do it that way. I'd expect you can use PHP to generate JSON or XML instead of HTML without too much of a hassle. You could also do formatted plaintext if you always respond with the same set of data, but then you'd need to write javascript to interpret that text (it could be simple like splitting some strings at the whitespace)

Quote:
And I don't know how Javascript is handle in common mobile phones/PDA devices.

That's a good question. I'm not sure. The iPhone handles it fine, and most newer phones are bound to have some level of javascript support. But some might not be able to handle ajax. You'd have to try and see I guess. The meta refresh is a good fallback option.

Quote:
For that particular project I am working on, I am actually not entirely convinced that Max is the best way to drive the system. ... So I could actually do that in almost any language !
But Max is very handy to test and design the system...

Yeah, there's lots of trade-offs either way. If you are interfacing with Max patches, then the embedded option can make Max-to-web communication a lot easier. But moving away from a solid apache setup and tightly coupling things to the Max environment has its downsides: it's definitely trickier to setup, and if you accidentally close the web server patch or Max crashes then the whole system goes down.

As far as programming in any language: if you use a ruby/java/python embedded server, you'd probably code most of the logic in that language. I tend to develop a lot of Ruby code that runs outside Max, and then hook things up to Max later when I want to interface with a patch.

I'm not saying any of these alternative are any better, just giving you some options in case you get stuck with you current approach.

September 6, 2009 | 10:21 pm

Wow ! Thanks a lot Adam.
I’ll need a bit of time to think about and try several solutions (or combinations) you sketched…

But I’ll definitively continue to work on such a system even after the end of my current project. Because it really looks interesting and promising for a lot of different kind of interactive art.

I’ll keep you posted and hopefully this topic will help and give some ideas to a few other Maxers

Cheers

September 6, 2009 | 10:55 pm
Quote:
As for JMS I have, right now, absolutely no idea how it works but if it based on Java, it will probably exclude the iPhone which does not (yet) supports Java Applets. Or is it only on the server side ?

with JMS, no java applet is required on the client side browser. all the java code is executed on the server.

the only thing you will have to use in the browser is html+javascript.

there are some simple examples coming with ActiveMQ…

cheers !

g

September 13, 2009 | 2:26 pm

Another option that might be worth checking out is combining Ruby On Rails and Max.

If you run Rails with a sqlite database, it should even be possible to access it from and integrate with FTM using ftm.sqlite, with all the possibilities for web-based analysis of sound that it would open up for…

Best,
Trond

Links:

http://rubyonrails.org/
http://github.com/fugalh/rosc

September 25, 2010 | 1:38 am

Hi!
I’m using JSP with http://www.loadbang.net/space/Software/net.loadbang.web, and I have a question.
Does anybody knows how to change values in jweb without reloading the entire page? I think it soulf be done with ajax, but I have noi dea how it works.
I anybody knows plase answer!
Thanks you!
j

Viewing 9 posts - 1 through 9 (of 9 total)

Forums > MaxMSP