Andrew Benson

Screen Shot 2019-03-01 at 11.11.12 AM.png

Max-Calendar.zip

When creating an art or commercial installation, it’s often helpful to create an admin page to schedule events and check status of the system. This recipe provides a template for running an audiovisual installation that responds to scheduled events and provides a form to create new events through a web front end. To accomplish all of this, we use a bunch of libraries that will be very familiar to JavaScript and NodeJS programmers, but might be new to Max users. Express provides routing services for the Node server, while React provides a reactive user interface in the browser. We also use 

 to simplify the HTTP communication between the web page and server.

Using ReactJS to generate a dynamic web front-end for Max.

When creating an art or commercial installation, it’s often helpful to create an admin page to schedule events and check status of the system. This recipe provides a template for running an audiovisual installation that responds to scheduled events and provides a form to create new events through a web front end. To accomplish all of this, we use a bunch of libraries that will be very familiar to JavaScript and NodeJS programmers, but might be new to Max users. Express provides routing services for the Node server, while React provides a reactive user interface in the browser. We also use Axios to simplify the HTTP communication between the web page and server.

ExpressJS : quick and easy web server package for node

ReactJS : dynamic front-end framework built around modular components

Axios: simplifies HTTP and JSON communication between front-end page and server

To get the React site working properly, you can either build an optimized production site or run the React development server. If you just want to get running right away, I recommend running the “script npm run build” message, which will compile all the React source files and make a page that our Max server can load. After that is built, and you’ve started the node.script, you can launch a browser to “localhost:5000” on your local machine.  While editing the React source files, you’ll probably want to run in development mode, which can be done by opening a terminal to the root folder of this recipe and typing in “npm start”. This will automatically launch a browser to a page at “localhost:3000” that updates when the React files change. Note that this React dev server communicates via proxy with our Max server on port 5000.

The node.script object outputs a variety of messages using “Max.outlet()” calls. These are passed around by using route or select.

We break down the different “scheduledevent” messages coming from node.script to provide triggers to the mock installation we’ve got running below. The web interface provides a menu to define these when creating a new event.

To create the React front end, I started off by bootstrapping the project using the create-react-app NPM library. From there it was mostly a matter of setting up the different components (EventEntry, EventEntries, EventForm, Stats) and how they were to interact with the API I created using Node and Express.

The React front-end communicates with our Max-driven Node server (server.js) through ExpressJS on the server and Axios on the front end. The server is set up to respond to the form inputs by storing new entries into a file. To see how that works see the functions starting with “app.get” or “app.post” in server.js and the React-side calls inside of App.jsx.

To store our event entries, we use a file-based storage system, which is largely implemented inside of services/events.js. It’s important to note that all functions that interact with the file system or call APIs make use of the “async/await” feature of NodeJS to run asyncronous code.

On the Node side of things, we set up Timeouts to trigger scheduled events, as well as sending occasional “report” messages that will trigger a status update from the Max patch.

Learn More: See all the articles in this series 

In this recipe we put Node to work as a portal for us to control and build a schedule for an audiovisual installation patch via a dynamic web page. To accomplish this we lean on some popular web libraries and the built-in features of Node for Max to communicate with a running patcher.

node-recipe-01-installation-calendar

I tried the patch and the update status works. (with some delay)

When i add an event it appears in the dict.view but it doesn't get executed?

i tried different actions which doesn't make any difference. The event stays also in the dict.view even if the time is passed. It looks like the time is set correct (also the timezone). Are there any other things i have to be aware of?

i just run the tutorial patch without any modifications, and on the localhost 5000 in the browser (chrome and firefox)

Nice! 
I tried the patch and the update status works. (with some delay)
When i add an event it appears in the dict.view but it doesn't get executed?
i tried different actions which doesn't make any difference. The event stays also in the dict.view even if the time is passed. It looks like the time is set correct (also the timezone). Are there any other things i have to be aware of?

i just run the tutorial patch without any modifications, and on the localhost 5000 in the browser (chrome and firefox)
Max 8.0.3
MacOS 10.14

It turns out there were a couple of minor patcher errors in that first upload. Please download again and see if that fixes it.

is there a smart way to combine this with a calendar from google/apple/.. with for instance a calendar sync function?

Thanks, it working now!
also multiple events 

is there a smart way to combine this with a calendar from google/apple/..  with for instance a calendar sync function?

Thanks! Just a small bug note on the webPage front end on my mac in chrome in order to add "launch" as a command, you have to first select something else, and then launch again.

Thanks!  Just a small bug note on the webPage front end on my mac in chrome in order to add "launch" as a command, you have to first select something else, and then launch again.  

@aartcore Google Calendar is totally possible, but was beyond the scope of this recipe. I recommend checking out the googleapis documentation, as they have bits of example code that work pretty well.

dear, Andrew. Could you tell me please is it good practise use two node.script objects at one patch.

nodeTEST.jpg

At your tutorials you use one node.script = one max patch.

dear, Andrew. Could you tell me please is it good practise use two node.script objects at one patch. 

Node Recipe 01: Installation Calendar