Site Navigation

Your Account

Choose Language

How to create a software plugin for OpenROV Cockpit

User-Contributed Guide

User-Contributed Guide

This guide is not managed by the site's staff.

Walkthrough on creating a plugin focused on javascript. This walkthrough creates a rotating ROV on the screen that uses the navdata feed to have it mirror the physical orientation of the actual ROV.

  • Author: Brian Adams
  • Time estimate: 2 hours
  • Difficulty: Easy

Edit Step 1 How to create a software plugin for OpenROV Cockpit  ¶ 

No image

Edit Step 1 How to create a software plugin for OpenROV Cockpit  ¶ 

Edit Step 2  ¶ 

Image 1/1: We will start with a clean workspace, so we need to comment out the other plugins that are used.

Edit Step 2  ¶ 

  • Use your favorite text editor to open /src/static/testviews.html

  • We will start with a clean workspace, so we need to comment out the other plugins that are used.

  • Commend out all of the script.push(...) lines about midway down the document. You can use the /* ... */ to comment out multiple lines easily.

  • Save the file

  • Note there is a commandline option in the comments for how to launch chrome in a special file access mode. You will need to close any running instances of node, open a command window, and then start chrome in this special mode.

    • OSX: /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --allow-file-access-from-files

      • If you get issues with getting a profile lock, shut down any currently running instances of chrome

  • From Chrome, do a file open, and select the testviews.html file you edited above. If you get "Cross origin requests" JS error try running a HTTP server, e.g. `python -m SimpleHTTPServer 8000` and access through http://localhost:8000/src/static/testviews.html.

Edit Step 3  ¶ 

Image 1/2: You are now in a sandbox environment where you can modify all of the browser code and see it actually work without needing a node process connected to it. Image 2/2: You are now in a sandbox environment where you can modify all of the browser code and see it actually work without needing a node process connected to it.

Edit Step 3  ¶ 

  • Once you open up the file you should get a blank canvas with a warning dialog that socket.io could not be found. Just dismiss the message.

  • You are now in a sandbox environment where you can modify all of the browser code and see it actually work without needing a node process connected to it.

Edit Step 4  ¶ 

No image

Edit Step 4  ¶ 

  • Now we need to create our base files for our new plugin. The easiest way to do this it to clone an existing plugin. I recommend starting with /src/plugins/example folder in to a new one called /src/plugins/visualisation3d. [br][code]cp -r src/plugins/example src/plugins/visualisation3d[/code]

  • Inside the new folder, the convention is to name your javascript file that runs in the browser with the same name as your folder. So rename /src/plugins/visualisation3d/public/js/example.js to visualisation3d.js [br][code]mv src/plugins/visualisation3d/public/js/example.js src/plugins/visualisation3d/public/js/visualisation3d.js[/code]

Edit Step 5  ¶ 

Image 1/2: Go back to the textviews.html file you edited in the first step.  Right below the lines you commented out before, you are going to add a new push command to push your plugin it to the array of registered plugins. Image 2/2: Add the line as shown in the image.  scripts.push('...

Edit Step 5  ¶ 

  • Test the new plugin by adding it to the test harness.

  • Go back to the textviews.html file you edited in the first step. Right below the lines you commented out before, you are going to add a new push command to push your plugin it to the array of registered plugins.

  • Add the line as shown in the image. scripts.push('...

  • Save you file. Reload the chrome tab that was displaying the file. Nothing obvious has changed.

  • Open up Chrome developer tools however, and you should see a message that says the plugin example has loaded, and on the right hand side you should see the file listed is you visualisation3d.js file.

Edit Step 6  ¶ 

Image 1/3: Begin by opening up your visualisation3d.js file and delete the "hidden" class from the div tag being inserted in the code. Image 2/3: And since the background is black, we should also change the font color to something that 'pops'. Since we are using bootstrap.js we can use one of there special classes. In this case where you removed hidden, replace it with 'label label-success' Image 3/3: While we are at it, go ahead and change the log message so that is kicks out the name of your new plugin instead of 'example'.

Edit Step 6  ¶ 

  • Now that all of the plumbing for the new plugin is in place, it is time to start changing the interface around.

  • Begin by opening up your visualisation3d.js file and delete the "hidden" class from the div tag being inserted in the code.

  • And since the background is black, we should also change the font color to something that 'pops'. Since we are using bootstrap.js we can use one of there special classes. In this case where you removed hidden, replace it with 'label label-success'

  • While we are at it, go ahead and change the log message so that is kicks out the name of your new plugin instead of 'example'.

  • And finally, clean up all of the rest of the references of Example with the name of your plugin.

  • Now reload the page in chrome and you should see a green 'example' at the top of the page.

Edit Step 7  ¶ 

Image 1/2: For this plugin we have chosen to use a third party library that makes 3d in javascript easier.  We are using babylon.js. Image 2/2: If you go to http://www.babylonjs-playground.com/ you get a tool that lets you dial in your code with an online browser.

Edit Step 7  ¶ 

  • Now the fun part. To replace the example innards with a call to your working plugin code.

  • For this plugin we have chosen to use a third party library that makes 3d in javascript easier. We are using babylon.js.

  • If you go to http://www.babylonjs-playground.com/ you get a tool that lets you dial in your code with an online browser.

  • We have an image of the modified code we are using that presents more of an ROV shape ;-)

  • You can now download the code which gives a .html file and a .js file which we will place in to the plugin.

Edit Step 8  ¶ 

Image 1/1: The example code from the site simply adds a canvas to the page.  We are going to do the same thing in the plugin, but we have to decide where to put it.

Edit Step 8  ¶ 

  • Copy the babylon.js file in to the same /public/js folder as your plugin. All .js files will automatically be loaded.

  • The example code from the site simply adds a canvas to the page. We are going to do the same thing in the plugin, but we have to decide where to put it.

  • Plugins have some references for a concept of the cockpit, global event emitter, etc.

  • The fully updated plugin code picture is here.

Edit Step 9  ¶ 

Image 1/2: Woot! There is our purple take on an ROV swirling around with real telemetry. Image 2/2: Things to still do: Convert the degrees to radian which is what the library uses to get "real" orientation

Edit Step 9  ¶ 

  • To get the plugin on to the ROV, go to it default web address (usually 192.168.254.1). From the dashboard start the file sharing. Login to the ROV. Copy the folder for your plugin to the plugin folder on the ROV. Restart the cockpit process.

  • Woot! There is our purple take on an ROV swirling around with real telemetry.

  • Things to still do: Convert the degrees to radian which is what the library uses to get "real" orientation

  • Add some love to the 3d model to make it look more like an ROV

You're Done!

3 Comments

For others benefit that are new like myself.

I'm on a Mac. To enable file sharing (on the mac side) Goto System Preferences -> Sharing and click on File Sharing in the list. Then, click on Options, and in the pop-up window click (enable) "Share files and folders using SMB" You can now close System Preferences and go to a Finder window.

In Finder, press Command+K. This will bring up a "Connect to Server" window. In the Server Address bar, enter the address from the OpenROV Dashboard (making sure that you have started the service) smb://192.168.254.1/OpenROV A prompt comes up asking for credentials, I logged in as guest.

Once you are able to connect, the path on the OpenROV to drop the plugin is:

/opt/openrov/cockpit/src/plugins

Michael Sinclair - Reply

--allow-file-access-from-files does not work for me on MacOSX on Chrome 38.0.2125.122. I get a lonely iframe and "XMLHttpRequest cannot load file:///Users/pawelsz/GitHub/openrov-software/src/views/index.ejs. Cross origin requests are only supported for protocol schemes: http, data, chrome-extension, https, chrome-extension-resource." in JS errors.

kelebron - Reply

Solved. `python -m SimpleHTTPServer 8000` works like a charm.

kelebron -

View Statistics:

Past 24 Hours: 0

Past 7 Days: 16

Past 30 Days: 89

All Time: 3,473