Skip to content

Remote Page Control

The user-defined Page that's currently displayed in SKipper on one device can be selected by SKipper running on another device. For example, let's say you have SKipper running on a Pi and displaying on a large screen mounted on the wall in your boat's salon. You don't want to have to access the Pi's keyboard or mouse to change the SKipper Page being displayed. So you install SKipper on your phone, configure SKipper on both devices appropriately (see below), and now whatever Page you select on your phone will also be displayed on the big screen. Your phone then functions like a television remote control.

You can also have the SKipper page be automatically selected when some action or particular set of circumstances occurs, using the Node Red Signal K plugin. Assume you have two Pages that you want to automatically display on your flat screen in the salon: an "At Anchor" Page and an "Underway" Page. Using Node Red to monitor the correct Signal K path(s) to determine if the boat is moving or not, SKipper will automatically display the appropriate Page.

How Does It Work?

First, some terminology. An instance of SKipper that is configured to display a Page based on some outside input is called a "Listener". An instance of SKipper that's acting like a TV remote control is called a "Controller". A single instance of SKipper can be only one of these two things at any one time. (If it is neither, then Remote Page Control should be set to "Disabled" in SKipper Settings.)

A Listener is constantly monitoring a Signal K path called 'skipper.remote.page'. It is either blank, or it contains a SKipper Page ID. When that path changes, the Listener looks for the new Page ID among its Pages, and if it finds it, it displays that Page. If the new Page ID is not among the Listener's Pages, it does nothing.

In the "TV remote control" example above, whenever the user displays a new page on the phone (the Controller), it sends the Page ID of that Page to the 'skipper.remote.page' field on the server. Any Listener that has a Page with that Page ID automatically displays it. (It's possible to have more than one Listener for any Controller, and even more than one Controller-Listener pair. More details below.)

In the Node Red example, Node red is configured to put the appropriate Page ID into the 'skipper.remote.page' field whenever the appropriate Signal K path(s) values indicate that the boat has started moving, or has stopped moving. Any Listener that has a Page with that Page ID automatically displays it. Of course, this is just an example - you can use Node Red to look for any activity / circumstance and send an appropriate SKipper Page ID to the 'skipper.remote.page' path, and the Page you define in SKipper can display any data you like.

Configuration

In SKipper

On each device, in Settings, select the appropriate value for the Remote Page Control property: set it to Listener, Controller, or leave it at Disabled. Note that you have to have at least one Listener, but you don't have to have a Controller if you're using Node Red to initiate the process.

If you're setting it up with a Controller and a Listener, both of those instances of SKipper need to have the same Pages. Here's how to do that.

  1. On either the Controller or the Listener, define the Pages you want to be remotely controlled. It's probably easier on a computer than a phone, but it doesn't matter which one you do it on. For this example, we'll assume you're defining the Pages on the Listener.
  2. On the Listener, go to Settings - Signal K - Load or save UI on Signal K server, and chose "Save to server". This will copy every aspect of the UI on the Listener to the server, including all the user-defined Pages, which is what we care about.
  3. On the Controller, go to Settings - Signal K - Load or save UI on Signal K server, and chose "Load UI from server". This will copy every aspect of the UI from the server to the Controller. Now the UI is identical on the Controller and the Listener, which means all the user-defined Pages have the same Page ID.

At this point, you can add new Pages to either the Listener or the Controller and that won't break anything, but if you want the new Pages to be remotely controlled, you have to do the "Save to server" / "Load from server" process, saving from the device on which you added the new Pages.

You can edit any of the Pages on either device, and that won't break anything. But if you want to keep the pages identical on both the Listener and Controller, you need to repeat the "Save UI to server" and "Load UI from server" process any time you edit any of the Pages.

If you want to have Pages on either device that are not on the other device, you can simply delete them after each time you do the "Save to server" / "Load from server" process. Or add Pages to one device, and don't do the "Save / Load" process.

In Node Red

You need to know what Page ID to send to the 'skipper.remote.page' path in Signal K. Here are the steps, using the Node Red example above:

  1. In SKipper on the device that's the Listener, go to Settings, and set the "Remote Page Control" property to "Controller".
  2. In SKipper, display the "At Anchor" Page. That will send the Page ID of the "At Anchor" Page to the 'skipper.remote.page' path in Signal K.
  3. In the Signal K Dashboard, bring up the Data Browswer. Scroll down to the 'skipper.remote.page' entry, and copy the "Value" somewhere you can easily get to it. That "Value" is the Page ID of the "At Anchor" Page. See image below. Page ID in Data Browser
  4. In Node Red, that long alphanumeric Page ID is going to be the 'msg.payload' that's sent to Signal K and put into the 'skipper.remote.page' path when Node Red detects that the boat is not moving (at anchor, moored, or in a marina). See the image below. Node Red setup
  5. Repeat steps 2, 3, and 4 for the "Underway" Page.
  6. You MUST change the "Remote Page Control" property back to "Listener" on the device that's going to be the Listener!

Now, when Node Red sends the Page ID to the 'skipper.remote.page' path, the Listener will see it, it will find that Page, and it will display it.

Any more detailed explanation of using Node Red to do this is beyond the scope of this SKipper documentation. See Node Red plugin page on GitHub.

Notes

  1. After a Page is automatically displayed in SKipper using this feature, there's nothing that prevents you from changing to a different Page. The automatic display happens only once, whenever the 'skipper.remote.page' path is changed. The Page will change again only after the 'skipper.remote.page' path is changed again, either by a SKipper Controller, or by Node Red.
  2. After setting this up in Node Red, be sure to change the Listener back to "Listener" in Settings. (Step 6 in the Configuration section above.)

Multiple Listeners and/or Controllers

You can have any combination of Listeners and Controllers: one of each, or one Controller with multiple Listeners, or multiple Controllers with one Listener, or multiple Controllers and Listeners. You can have multiple Controller/Listeners sets that will act totally independent of each other. It's all about the shared Page ID's:

  • If a Controller displays a Page, and its Page ID exists on any Listener, that Page will be displayed on that Listener.
  • If a Controller displays a Page, and its Page ID does NOT exist on any Listener, that Listener will ignore it.
  • Use the above-described "Save UI to server" / "Load UI from server" steps to get the Page ID's onto all the correct Controllers and Listeners.
  • Delete any Pages from any Listener that you want that Listener to ignore.
  • Delete any Pages from any Controller that you don't want that Controller to control.