Connection is important.
Kind of a deep statement to start things off on… but it’s true.
It’s true from a social and societal perspective, of course, but beyond that it’s becoming increasingly true in the workplace. We see this evident in workplace productivity. Our workplace tools (Google Docs, Trello, Slack, etc.) are progressively facilitating real-time connections between us and our colleagues.
With noticing this trend, one thing I have been playing around with for a bit now is the idea of building real-time connections to (and between) my Adobe applications. CEP panels have had this capability for a while now using Bridgetalk messaging, but this caters to applications within the same system.
What if I wanted to control an instance of Premiere across a network? Or fire off an After Effects command from within an Illustrator panel? Or better yet, remotely control one of my CC apps from my phone via a web browser?
Lucky for us, we can! And we can do so by utilizing a similar technology that the above applications (Trello, Slack) use for real-time feedback, Websockets.
New to the world of WebSockets? In short, a websocket is a persistent connection between two systems, rather than the one-way, back-and-forth communication used by HTTP. For more info check out this article by GeeksforGeeks.com. And the best part about them? They are super simple to use, and supported in the Adobe CEP environment! So without further ado…
Lets connect to our Adobe apps via a Heroku hosted websocket app.
The Proof is in the pudding
Nice to knows (but certainly not necessary):
- Adobe CEP panel development (your choice of App)
- Node.js with libraries Express.js and Socket.io
The Project:
Today, we are going to build a simple websocket connection to our favorite Adobe app, in my case this will be Adobe Premiere (but you can follow along with an app of your choice). This connection will allow you to control certain features within your open application. You can control these features from anywhere with an internet connection and a browser (your phone, your laptop, your Apple watch?… maybe… I don’t have an Apple watch, but someone should try! ).
In my case, I want to start off simple. We will be remotely viewing a list of sequences in Premiere, and then queueing them for export into Adobe Media Encoder.
The Steps:
- The Plan
- Build a server to host the socket
- Build a simple front end to access via url
- Add event emitters that will control Premiere
- Build a premiere panel that subscribes to the socket
- Add listener’s that perform actions based when events are heard
- Return list of all sequences
- Queue a sequence to render
- Add listener’s that perform actions based when events are heard
- Push all web app components live (heroku’s free service)
- Next Steps (not covered… but mentioned)
- Authentication
- Error checking
- Unique Id tracking for multiple systems to subscribe
- Adding on new features
Today’s Topic – The Plan
In order to get this project up and running, we will need three separate components. First off, we will need the Premiere panel. This panel will subscribe to our websocket, and upon certain events, will trigger extendscript functions. Second, we will need our remote controller. We will build this as a webpage with a few simple UI elements (2 buttons and 1 select menu). Finally, we will pop a server up in the middle. This server will act as the Websocket host, and serve the files to make the webpage run.
Websockets run on emitting, and listening to, events. Just like in simple Javascript, where I can listen for a click event using element.on(‘click’, ()=>{}), with websockets I can listen for an event with Socket.on(‘EventName’, (data)=>{}). And I can emit one just as easily, via Socket.emit(‘EventName’, data).
But before we go off and start firing off events, I find it helpful to plan out what our system will look like, and what events will trigger what.
Here’s what I’ve come up with, a very simple flow with some defined events.
- When the user clicks button one we will send the “Retrieve_Sequences” event to the server. The server then sends the “Request_Sequences_Ppro” event to the panel.
- On hearing the “Request_Sequences_Ppro” event, the Extendscript will gather a list of all sequences in the project to send back. These will be structured as an object with Name and NodeId properties. It will then return these to the webpage via the “Sequence_List”, and “Update_Sequence_List” events.
- Once the data is received, we will update our select menu with the names of all sequences in the Premiere project.
- When the user click button two, it will send the NodeId of the selected sequence back to Premiere, via the “Render_Seq” and “Render_Seq_Ppro” events.
- On hearing the “Render_Seq_Ppro” event, Premiere will locate the desired sequence, and queue it up in Adobe Media Encoder.
And there it is. Over the next 4 posts/videos I will cover the steps listed above, and at the end you will have the foundational knowledge to integrate WebSockets into your projects, and remotely control your Adobe applications.
