Controlling a Wifi Plug over the network using TCP Messages

We recently purchased some TP-Link HS100 Kasa Smart Wi-Fi Plugs to allow us to remotely turn on speaker amps to support our outdoor speaker systems. Turning the amps on each time by going to the physical amp location in the racks located all across the campus was very inconvenient, so this was a great upgrade.

HS100(US)2.0-package_1508143441338j.jpg
This is what the plug looks like.

It pairs with an app called Kasa to allow you to turn the outlets on and off pretty easily, however in our testing, we couldn’t get it to work with more than one smartphone. Plus, we didn’t want volunteers to have to install this app on their phone, or provide a phone just to run this app.

The TP-Link protocol has been reverse engineered pretty well, so I had hopes that this would be a quick and easy project, and it was! The core protocol uses JSON to communicate, however it is obfuscated heavily to the user and you have to send a hexadecimal payload to it in the end in order to trigger an action.

Once we set up the devices as recommended through the app to use our internal network WiFi, I had our IT department create IP address reservations based on the MAC addresses of the outlets, so that they would always have the same IP address. If you use these plugs, I recommend doing that in your setup as well.

Then, I researched the protocol and figured out what the hexadecimal payloads needed to be to power it on and off. I didn’t really care about any of the other status settings. Just a simple on and off.

Here is the function needed to do that, written in ogScript for Ross Dashboard:

function tellOutlet(address, port, protocol, command)
{
    var enabled = ogscript.getObject('outletEnabled');

    if (enabled)
    {
        switch(protocol)
        {
            case "TPLINK-HS100":
                var payload_on_hex = "0000002AD0F281F88BFF9AF7D5EF94B6C5A0D48BF99CF091E8B7C4B0D1A5C0E2D8A381F286E793F6D4EEDFA2DFA2";
                var payload_off_hex = "0000002AD0F281F88BFF9AF7D5EF94B6C5A0D48BF99CF091E8B7C4B0D1A5C0E2D8A381F286E793F6D4EEDEA3DEA3";
                  
                var sendCommand = "";
                  
                if (command == "on")
                {
                    sendCommand = payload_on_hex;
                }
                else if (command == "off")
                {
                    sendCommand = payload_off_hex;
                }
                                 
                rosstalk.sendAsBytes(address, port, sendCommand, callback);
                ogscript.debug("Outlet turned " + command + ".");
                break;
            default:
                break;
        }
    }
}

The key function here is the RossTalk SendAsBytes command which sends the TCP message as hexadecimal data.

Once I did a test and was satisfied it was working properly, I built out custom panels that use our master production control system, so now volunteers can easily turn the amps on or off by just clicking a button!

I also built a stand-alone version in case anyone else could benefit from it.

Screen Shot 2018-07-25 at 4.06.54 PM.png
The buttons are first disabled when you open the panel until you’ve configured the outlet in the setup tab.
Screen Shot 2018-07-25 at 4.07.00 PM.png
In the setup tab, you can configure the outlet IP address, the port (the default is 9999), and choose the protocol. Currently, the panel only supports the TP-Link HS100/101 models.
Screen Shot 2018-07-25 at 4.06.42 PM.png
Just click On or Off to toggle the outlet!

The panel is up on my Github repository, if you’d like to download it.

On-Screen Tally Light for ProPresenter using software

I wrote a new piece of software recently that I’m really excited about. It’s called ProTally and it is designed to display video tally markers directly on the screen.

icon_512x512@2x

What’s tally? In broadcast setups, it is often helpful to be able to tell camera operators, computer graphics workers, etc. when their shot is being used on-air or visible on screens. Most broadcast equipment comes with some sort of tally light that, when connected to the right system, lights up to let the operator know.

With today’s broadcast equipment, a lot of this tally information can be communicated directly over the network, in real time using a variety of protocols. One particular protocol is TSL UMD, from Television Systems Limited for Under Monitor Displays. It is supported by a wide variety of broadcast industry equipment and allows the devices to know the tally state of one another.

In church environments where we use computer software like ProPresenter to send CG content to a video switcher, it can be very helpful to have a tally light that the user can see so they don’t accidentally change a graphic while it is live or on the screen. While there are a variety of external tally lights available for this purpose, I wanted to design something that would allow for a green (in preview) or red (in program/on-air) box directly on the screen that the user can easily see while operating the software, without having to purchase additional hardware.

For this project, I used Node JS and the Electron libraries, along with an existing Node JS module that acts as a TSL 3.1 Protocol server. I was able to whip up a demo in just a few short hours. Then it was just a matter of finessing and adding features.

Using ProTally, you can monitor up to 4 Tally Addresses using TSL UMD 3.1 and keep track of their Preview, Program, and Preview+Program states. You can even customize the colors as needed! The boxes can be resized and moved around on the screen and those positions will be saved and recalled the next time the software launches.

Screen Shot 2018-07-11 at 10.31.00 PM

Screen Shot 2018-07-11 at 10.32.26 PM

I decided to add options to allow the user to choose whether they wanted a filled-in box or a transparent box with a color border. It also reads the label data and stores that as it comes in, to give names to the tally addresses. And, because we use two Carbonite switchers at my church, I also wrote in an object array that uses the TSL UMD protocol implementation described by Ross here: http://help.rossvideo.com/carbonite-device/Topics/Devices/UMD/TSL.html

Screen Shot 2018-07-11 at 10.31.31 PM
The software stores the label names of the devices as they are read in the tally data over time, so as the software runs longer, this drop down list becomes mnemonicly helpful.

Due to some limitations of the Electron framework, I had to make the windows appear “always on top” of other windows, to ensure they would be visible while clicking around in ProPresenter (or ProVideoServer or whatever software being used). This can be a little annoying if you’re using the computer for another task and don’t want to see the tally boxes, so to help with that, I added a “Hide All Boxes” option that can be used rather than quitting the software.

Screen Shot 2018-07-11 at 10.30.45 PM

Here is ProTally in action:

 

Screen Shot 2018-07-11 at 10.35.13 PM
This is a transparent window with a border sitting on the output window of ProPresenter.

 

 

Screen Shot 2018-07-11 at 10.33.51 PM
This is a filled-in box.

 

This solves a problem for a lot of people who want on-screen tally for ProPresenter, ProVideoServer, or whatever software they may be using. You can even use it to monitor general inputs like cameras, etc. Just assign the tally address, position the box, and you’re set!

I will have this available in my GitHub repository soon. Feel free to check it out and if you use it, let me know how you like it! I plan to add more features to it as I have time.

Two Quick Updates

Just two quick updates, if you are using my software.

First, I’ve added a couple more features to the Countdowns/Clock system. You can now have a custom name for each countdown, which is pretty helpful. And, the page now displays a progress bar/meter that shows how long until the next page refresh, which has been increased to 15 seconds.

Screen Shot 2018-07-02 at 3.05.06 PM

Second, my VideoHub custom panel for Dashboard will now auto detect how many inputs/outputs you have on your router, which is mainly used for building out the drop down lists of inputs and outputs to choose a route.

Hope this helps! You can get the latest versions on my Github repository.

Customizable Clock and Countdowns for Production, in a Web Browser, Part 2

A quick update on this post.

We used this in production this week and it worked great! I decided quickly though that this needed some form and style, not just function.

Screen Shot 2018-06-25 at 7.54.31 AM

I also added the ability to be able to send a custom message to the screen!

Screen Shot 2018-06-25 at 7.52.58 AM

The two buttons, “Send to Screens” and “Screens Back to Normal” in this panel are for my team, we use them to control MiniMEs on our Ross Carbonite switchers that send to our confidence monitors in the auditoriums.

I’ve updated the files on Github, if you want to go grab them!

Customizable Clock and Countdowns for Production, in a Web Browser

Accurate clocks and countdowns can be a huge help when it comes to keeping services and productions on time. In our control rooms, we use these clocks:

943

They’re made by a company called ESE and they are basically network-based POE-powered NTP clocks. Because they are synced to NTP (Network Time Protocol), they are all in sync to the exact same time down to the second. We like them because they are big and grab your attention. We have them mounted above the multiviewers in each control room along with a couple of others in the actual tech booths out in the auditoriums.

But what about everyone else, like the band or people on stage? We don’t have clocks like this where they can easily see. And, the ESE clocks just tell the time, they don’t count down to a specific time.

I decided to do something about that. We have a server in the video rack room that has a video out connection into the video systems. It’s just a simple output of the secondary monitor. So, I figured it would be pretty easy to display a clock in a browser, and run it full screen on that secondary monitor, that feeds into the video router where I can then easily send it to any screen in the system that needs it.

I found some examples online and eventually came across this article where someone had created a full screen clock: https://www.nayuki.io/page/full-screen-clock-javascript

clockThis computer’s time is synced to NTP, so it stays in sync with the clocks in the control rooms, too.

I quickly decided to take this a step further and incorporate some countdowns. I had a couple of self-imposed restrictions though:

  1. I wanted the countdowns to be customizable as our needs change, not just always count down to the same date/time.
  2. I didn’t want to run a web server just to accomplish this, in order to pass new data to the locally running page/JavaScript.

I decided an easy method would be to have a separate JavaScript file that defines some countdown data, and include that in my main clock page, and just refresh the page to get the new data. I set the page to reload every 30 seconds by putting this in the <head> of the HTML:

<meta http-equiv="refresh" content="30">

I want my volunteers to be able to easily change this countdown data, without having to know JavaScript. Time for Dashboard! My directors have a Dashboard Custom Panel that I created for them which they use every week. It has a myriad of control options for them, so it was simple to just add another tab for the new countdowns.

countdowns_

Dashboard has a built in date picker and time picker, which makes it super easy.

I added two options in addition to the date and time, publish time, and expire time.

countdowns_publishtime
I limited it to these few options, between 2 minutes and 7 days. This determines when the countdown will appear on the screen.
countdowns_expiretime
When a countdown expires, it turns red so it grabs your attention.

When the user clicks, “Update”, it runs a simple function that grabs all of this data, writes the JavaScript into a string, and then saves that into a file using the ogscript.saveToFile function. The file is saved to a common Dropbox folder that the server running the web page clock has access to.

countdowndata

clock-and-countdowns.png
Here it is in action. The countdowns automatically update when the page reloads every 30 seconds.

 

I’ve made the files available on my Github, if you can benefit from them! We will be giving this a trial run on Sunday.

Triggering Wirecast Remotely using Elgato Stream Deck

Wirecast is a great tool for live streaming. At Fellowship Greenville, we use it as our encoder to stream to YouTube Live, whether it be the regular Sunday morning sermon live stream, or for special events, conferences, funerals, etc.

Lately, I’ve been working specifically on some improvements to make it easier for me to operate a live stream from our second auditorium, where we typically host funeral services and special events. Our live stream server is located in our control rooms in the main building, so when I am working tech for an event in the second auditorium, I am completely separated from the control rooms.

For regular Sunday services, that’s not a problem to be separated because we have a great team of volunteers working in both areas who stay in communication with and support each other. But for smaller services like a funeral, where it is typically only me and one other staff member running everything, it can be challenging to run a full production while I am sitting in the tech booth, far away from the control room areas where the live stream server and video switcher are located.

This is where my Stream Deck Production Controller software is going to be a great help. I have created a button set that allows me to send RossTalk commands to the Ross Carbonite switcher, change the necessary routes on the BlackMagic VideoHub router, and start/stop the Wirecast live stream.

IMG_5668.JPG-1.jpeg

So how does this work? The Stream Deck software is sending a GPI trigger request to Dashboard, where I have these buttons in my production control custom panel:

Screen Shot 2018-06-15 at 11.18.59 AM

Clicking the “Wirecast – Start Streaming” button runs a custom ogscript function that runs this AppleScript:

Screen Shot 2018-06-15 at 11.23.04 AM

And that’s it! By using the existing infrastructure I’ve designed for our production control, I’m now able to easily run the live stream but still maintain high value in what is streamed. By using the stream deck to operate not only Wirecast, but the video switcher remotely, I can change sources as needed, play videos, show cameras, etc. I even have a button that jumps to my PTZ camera control where I can recall presets that I’ve designed specifically for special events like this!

My Stream Deck software is available on Github if you would like to use it, and feel free to reach out if I can help!

Controlling BlackMagic VideoHub from Ross Dashboard, Part 2

In Part 1 of this post, I wrote about the technical side of how to use Ross Dashboard to send a TCP message to a Blackmagic VideoHub video router.

I thought I would expand on that recently and now I have made available a panel that, when set up with the IP address and port of the router, will automatically load the input (source) and output (destination) names into dropdown lists where the user can easily choose a source and destination to make a route.

Screen Shot 2018-06-14 at 2.32.25 PM

Screen Shot 2018-06-14 at 2.32.39 PM

Screen Shot 2018-06-14 at 2.32.31 PM

It’s up on my Github respository if you can benefit from it!