retinafunk resolume-arena-api-gui

[VJ-Retinafunk]

I am so happy about the REST API.

For me the best Arena feature in years.

Best Xmas present ...Thanks for all the effort

Especially that it supports clip thumbnails preview makes it it for remote so much more easier and usefull then just OSC

Finally I can use my web developer coding skills to control Resolume.

I forked the provided example and played a bit with the provided open source clip trigger react app to learn how to use it.
and started an custom GUI for mobile phones.

For an experienced react dev the code is pretty straight forward and the example is very well structured and documented

I modified it to :

use TalwindCSS as CSS framework for easier and faster Styling

optimize layout for mobile phone devices portrait , so use it on a such device or on desktop in mobile emulation mode ( dev Tools)

show up to 3 layers stacked

allow horizinatal swipe touch scrolling between the layer clips using css snap API

add a button to clear the active clip in each layer

more features coming soon!



Its not much yet but it works well on my phone so far

If you want the code here it is

https://github.com/retinafunk/resolume- ... ree/master

Feel free to contribute improve or fork it .

If you do anything with it I'll be happy to hear.

[bart]

Very nice work Retinafunk!

[PERCYJOSEPH]

how do we run this
https://github.com/retinafunk/resolume- ... ree/master.
can somebody describe how to create our own controller using the REST-API, is this similar to TouchOsc way of doing things. Please explain as we are not good in programming.

[hive8]

tried to recreate with npm install got a bunch of errors, is it possible to go more in detail how to install

[Zoltán]

Moved to it's separate topic, I assume there will be a lot of questions

[VJ-Retinafunk]

I see some of you have problems with getting this web app to work.

Not sure what errors you get..( maybe post here) but I will try to help

As it is a fork of the provided clip trigger example it works the same, with a few caveats

I tried to put step instructions how to build the app and use it with resolume Arena in the read me file in the git repo here:

https://github.com/retinafunk/resolume- ... /README.md

To build the app you need to clone the repo with GIT ,

Then go in Code with an IDE or Editor adjust the host ip and port nuber in src/index.js (line 19,20) to the same you put in your Arena Prefewrence Webserver

Then install the dependecies / JS modules ( Terminal , cd into the folder where package.json is and type yarn or npm install in terminal)

After that type in Terminal :

yarn build

or

npm build

to build (compile) the app for production .

You will get a build folder where everything is

Now Copy the build/static Folder to the root of Resolume Webserver folder (ussually in document/Resolume Arena/Webserver , the path is in the ARENA preferences ) and also the build/index.html to same folder, but can be in a subfolder (example : /arena-rest-triggered/build) no need for root .

No theARENA API Server will serve your app

The you can access your app with an URL similar to the provided examples

For example

http://192.168.178.20:7676/arena-rest-t ... index.html

or just

http://192.168.178.20:7676/arena-rest-triggered/build/

Open that in your phone ( connected to same WIFI network as Arena )

and you should be able to see your layer & clips in the app and trigger or clear them

Hope that helps .

Should not take more then few minutes to deploy this