Articles

Content You Need: Miraweb

Get ready to control your Max patch from every device you own....

With Mira, we made it possible to control and mirror a Max patch on an iPad, giving multitouch control from any iPad on your local network. This is pretty magical, but one problem nagged at us from the start: What if you don’t have an iPad? A few tireless elves in a shadowy corner of Cycling '74 have been working steadily to seek another way. Today we celebrate the results of their dedication to expanding Max control - Miraweb and Xebra.js.

Miraweb

Miraweb provides a responsive, websocket-based portal into your Max patch from any compatible browser. Just define a region of your Max UI to control, using the mira.frame object and point a browser to the provided URL to start interacting with the patch. Since it works in any browser with websocket support, you can use it with Android devices, iPhones, various laptops and multitouch-enabled computers on your home network. In our testing, we were delighted by how effortless and responsive it was. You’ll have to try it to believe it.

Xebra.js

Not content to just open a Max UI up to multi-platform browsers, our team is also opening up the websocket-driven technology used to do the heavy lifting in Miraweb. With Xebra.js, our Open Source (MIT License) Javascript client library for communication with a Max patch, you can create your own event-based custom web interfaces. We’ve included lots of useful examples to get started, including Miraweb itself, and the API is fully documented. To put it more simply, Xebra.js lets you connect your own websites and web applications to a remote Max patch.

To learn more and explore Xebra.js for yourself, head over to our Github page.

Miraweb is available in the Max 7 Package Manager (Max 7 > File > Show Package Manager) and will require installing the latest Mira package update from the Package Manager. The latest version of Max is recommended for best results.

by Andrew Benson on December 20, 2016

Creative Commons License
Max Gardener's icon

As my colleague Ben Bracken has said elsewhere....

As far as browser support, we recommend Firefox and Chrome. Due to some issues with touch support, Microsoft Edge is not currently officially supported, but we hope to improve this down the road.

Aside from the Max Package which you can download directly from Max, here are a few relevant links to GitHub repositories and npm Packages related to Miraweb:

O's icon

Isn't that cool? Hey, you guys really rock! I was always wondering about how the phone and android problem could be solved, and now all of a sudden there comes this surprise... That is so great!
Wish all you guys a merry Christmas! And thank very much you for this early present :)

foldh's icon

Hats off to those few tireless elves beavering away in the corner. Tried it on my iphone and I almost can't believe how easy it is to set up. Great work!

Curveau's icon

Agreed - well done :)

All I need to do now is get a full licence!

gbravetti's icon

Awesome! ^^

This was on my Santa's wish list since long time ago as: "please make Mira available on iPhones", and here we are... thanks!

zipb's icon

Really nice. And free. Lovely!

Basvlk's icon

soooo cool. Thank you thank you

andrej's icon

Amazing, great work.

Nuno Guimaraes's icon

BIG....BIG...work... a long time wish.... controll over web browser.
Now one of the directions could be having more objetcs reconized by mira frame. When we get a lot of objects (mostly related to interface) we can use our max apps for amazing stuff.

Congratulations for this new feature.

Best xmas for all.

Mike OConnor's icon

dang! this is slick!

i did a little demo... the demo is about 7 minutes long. it's WAY longer than it took to actually push the user-interface of the patch out to the web.

the patch is the final project i did for Matt Wright's fabulous Max class at Kadenze.

OCH's icon

oh my goodness, oh my dayum.

@Mike OConnor Nice to see you here :)
Cool stuff you're already doing with miraweb!

Best

Gmix's icon

What does this message mean?

websocket connection available at http://none:-1

Tried with Firefox, Chrome and Safari as default browser... no luck either way.

comaberlin georg klein's icon

Hi, trying out Mira now - cool.
But I would also need a video control monitor on the iPad. Just a small jitter-movie-window. Does any body has an idea, how to integrate this ?
best
-g-

mb28's icon

Hey GMIX, not sure if you were successful getting the websocket issue sorted out. I was able to get this working on Windows 7. You need to download the Bonjour print service from Apple in order for this to work.

https://developer.apple.com/bonjour/index.html

Check out the link 'Bonjour print services for Windows' Once that's installed, restart Max and you should be good to go

reso kiknadze's icon

Dear maxers, could someone help me in my struggle with miraweb? My localhost connection works just fine, the html page i created connects, responds and sends data to my max patch without any problems, but as soon as i access the same page (html file) on my web server, no connection is possible. tried to change my html code, replacing "localhost" with ip address of my computer i have max patch running on, but - everything invain. could somebody give me a little nice hint what else could i change in html? again - the same html-file on my hard disk, and the same html-file on my server, in both cases, work properly, when i access them from my laptop where i have my patch running. but i want the input made from OTCHER device, another computer, smatrphone, etc.. so that my max patch on my laptop still gets data... how could I achieve this?

(here is the link of the page, a listener has to enter his name):

ma max patch is open and interacts wonderfully, when i access this website from MY OWN laptop.. other devices fail...

thanks in advance!