Over the past few Twitch streams, we’ve been working on building control panels for TouchDesigner using Node-red. This has been an interesting and exciting set of experiments for a lot of reasons. The main one being that Node-red is a node-based programming environment very similar to TouchDesigner. Without needing any long coding sessions in Javascript or HTML or CSS, we were able to setup a visually pleasing control panel that was sending OSC messages back to TouchDesigner. Let’s take a look!
What is Node-red?
Node-red is super cool. Imagine TouchDesigner for javascript. Imagine working on web interfaces or services with a node-based programming environment. That’s what we have with node-red:
It’s pretty easy to use with only basic knowledge of the web development and can be used for everything from dashboards, control panels, social media scrapers, logging systems, database front-ends, and more.
Node-red basics
The first step to getting started with node-red is to choose an installation method. Node-red can run on a ton of different things. This includes your own local PC, various cloud providers (AWS, Azure, etc), Raspberry Pi’s, Beaglebones, and Android devices. So you’ve got options! To get started most simply, I’d recommend either installing it locally or using Docker. On our Twitch stream we used Docker, but I think running it locally would be easier for most folks. In that case you can follow the quick instructions below:
- Install Node.js from their website. Node-red recommends using Node.js version 10 or 12 (the current stable version).
- Open up a console window after Node.js is installed and run the follow command:
npm install -g --unsafe-perm node-red - Profit!
Maybe not profit…yet! But at least node-red should be up and running now. You can test if node-red is working by running the following in your command line:
node-redThen after a few moments of it running, you can open your web browser and go to the following address to drop into the node-red interface:
http://localhost:1880Great, you’re off to the races!
Getting up and running
Now that you have node-red up and running, you’ll need to get your first steps. Node-red has 2 great starting tutorials that will help you get some values injected into your flow and then fetching some data from public data sources:
https://nodered.org/docs/tutorials/first-flow
https://nodered.org/docs/tutorials/second-flow
But those aren’t that exciting… so what is?
Third-party libraries
One of the great features of node-red is the active community. Just like the TouchDesigner community, there are tons of developers out there extending the functionality of node-red with custom nodes. Here’s a handful of them that I’ve used and seen that could take give your node-red abilities a quick and meaningful boost. Not only that, they’re very easy to install. All you have to do is click on the top-right menu, click on Manage Palette and then select Install to expose a search menu for installing plugins:
Node-red OSC
This one is must if you’re using node-red with TouchDesigner locally. It might not be the best protocol to use if you do end up running node-red on a remote server in the cloud (maybe Websockets is better), but for local and smaller projects it’s extremely quick and easy to use. It provides a new node to your node-red environment that can encode or decode messages into the OSC format. In normal usage, this means you’d either put it after a UDP input node or right before a UDP output node, as OSC is traditionally sent over UDP. You can read more about it here:
https://flows.nodered.org/node/node-red-contrib-osc
Node-red Dashboard
If you’re gearing up to make web user interfaces for your installation, node-red-dashboard is for you. It’s a whole tool that includes common user interface elements that you’d see in any kind of admin dashboard. This includes, buttons, sliders, toggles, forms, gauges, charts, and even things like colour pickers! It’s pretty simple to get up and running with it’s default settings, and they have a great documentation that can give you more insight into building dashboards with it.
https://flows.nodered.org/node/node-red-dashboard
Node-red-node-twitter
If you want to interact with Twitter in your installation, it doesn’t get much easier than this. This package will give you two new nodes in your node-red environment for sending and receiving data from Twitter. This can be used to do all the common things you’d want to do with Twitter such as fetching tweets based on search terms, fetching tweets from a user or specific account, or posting new tweets to your own account.
https://flows.nodered.org/node/node-red-node-twitter
Get Our 7 Core TouchDesigner Templates, FREE
We’re making our 7 core project file templates available – for free.
These templates shed light into the most useful and sometimes obtuse features of TouchDesigner.
They’re designed to be immediately applicable for the complete TouchDesigner beginner, while also providing inspiration for the advanced user.
Other interesting nodes
Three other interesting node-red nodes I’ve checked out are related to communications. The first is one designed to make sending email notifications easier. This is a must have for permanent installations where you want to know if the installation ever has any issues or problems:
https://flows.nodered.org/node/node-red-node-email
The next is one that can send you SMS messages by connecting to Twilio’s API. Twilio is incredibly powerful, not just for sending SMS text messages, but it is a pretty feature complete service for handling anything that has to do with the phone. This node can get you up and running with some basic connections to Twilio:
https://flows.nodered.org/node/node-red-node-twilio
Telegram is heavily used for it’s bots and the capabilities of groups. If you wanted to create an installation that had it’s own Telegram group that it could send and receive media to users on, then this node is for you. It allows you to both send and receive messages from a Telegram bot you can setup:
https://flows.nodered.org/node/node-red-contrib-telegrambot
More resources
If you’re looking to dive into more of node-red’s available third-party nodes, this is a great resource to check out:
https://flows.nodered.org/search?type=node
Wrap up
You can clearly tell we’re excited for node-red. I’ve heard a lot of good things about it from many of my colleagues and friends. I finally took the time to dive in and found it to be a fantastic tool that I’ll be using going forward. Hopefully this post has give you a quick setup and some interesting directions you can take your usage of node-red in. Enjoy!
