REACTIVE WEB INTERFACES WITH
POLYMER AND ROS
Justin Huang and Maya Cakmak
Paul G. Allen School, University of Washington
September 21-22, 2017

GREAT INTERFACES, DIFFICULT SETUP

2TETHERED TO COMPUTERS

3

WHY THE WEB• Cross platform, cross device• Huge community of UI devs
• App-like features:• Add to Home Screen• Push Notifications• Loads even when offline

Example: ROS Explorer (https://wiki.ros.org/ros_explorer)

https://youtu.be/rz7NWRXNwu85

OUTLINE• Web components• ROS web components• Examples

6

WEB COMPONENTS• New HTML standard• “Build your own HTML element”• Works in all browsers (natively or with polyfill)

7

ANATOMY OF A WEB COMPONENT<head><!-- Web components polyfill --><script src="path/to/webcomponents-loader.js"></script><!-- Import web component to use --><link rel="import" href="path/to/ros-websocket.html /></head><body><!-- Add component to document --><ros-websocket id="websocket"></ros-websocket></body>8

<ros-websocket id="websocket"></ros-websocket><script>
var websocket = document.getElementById("websocket");// Add event listenerwebsocket.addEventListener("connection", onConnected);// Get / set properties
console.log(websocket.url);
websocket.url = "ws://demo.robotwebtools.org:9090";// Call methods
websocket.connect();</script>
9

POLYMER• JavaScript library for creating web components• Provides declarative syntax and data binding, otherconveniences• https://www.polymer-project.org• Not needed to use web components
10DATA BINDING WITH POLYMER<ros-websocket url="{{url}}"></ros-websocket><paper-dialog modal id="disconnected"><h2>Disconnected from websocket server</h2><paper-input label="Websocket URL" value="{{url}}"></paper-input>...
</paper-dialog>
1112DATA BINDING: SECOND EXAMPLE<ros-websocket auto ros="{{ros}}"></ros-websocket><ros-topic auto ros="{{ros}}"
topic="/clock" msg-type="rosgraph_msgs/Clock"last-message="{{time}}"></ros-topic><p>Time: {{time.clock.secs}}.{{time.clock.nsecs}}</p>13

14
https://youtu.be/-X7cuDufCQ8

ROS WEB COMPONENTS• A collection of ROS-related web components• Search for “ROS” at https://www.webcomponents.org/

15

Click on an element to see documentation, sample code, and demos16<ros-rviz>: like RViz, but an HTML element

https://youtu.be/tqXdg5eAw6g

17

BUILDING BLOCKS FOR WEB APPS
• Using web components like <ros-rviz>• Reactive database pattern• User event pattern18

<ros-rviz> embedded inside rapid_pbd, a programming by demonstration system

https://youtu.be/Bv10RSzbw8w

19

REACTIVE DATABASE PATTERN• Publish state using latched publisher, republish when state changes
Database::Update(const string& id, const Program& program) {db_->updateID(id, program);

Do database update

if (publishers_.find(id) == publishers_.end()) {Create latched publisher
to topic /program/59b9aa..
if it doesn’t already exist

int queue_size = 1;bool latched = true;
publishers_[id] = nh_.advertise<Program>("program/" + id, queue_size, latched);}
publishers_[id].publish(program);}

Publish updated data20

• Web clients get data by subscribing to a topic• Can use data binding from URL all the way to view<app-route route="route"pattern="/program/:id"
data="{{routeData}}"Parse URL and set
routeData.id to59b9aaf1a4065...

></app-route><ros-topic auto ros="{{ros}}"
topic="program/{{routeData.id}}" msg-type="pbd_msgs/Program"

Subscribe to/program/59b9aaf...

last-message="{{program}}"></ros-topic><pbd-program program="{{program}}"></pbd-program>

Bind data and pass it toprogram element21https://youtu.be/KlNBqsMW7iY
22

USER EVENT PATTERN• Frontend publishes events to server to modify data
• Server interprets event, modifies data, and republishes it• Easy to record frontend interactions with rosbag• Downside: frontend is sluggish if server connection is slow

23

Browsers

ServerUserEvent.msg
type: Add step
program_id: 59b9aaf...
step: { ... }Modify program
Save to DB
Republish program

Database::Update(id, program) {db_->updateID(id, program);
publishers_[id].publish(program);}

24

QUICKSTART

25

INSTALL NODE.JS• Install Node.js if you don’t already have it.
• Recommended: install Node using NVM (Node Version Manager)> curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.4/install.sh | bash
> source ~/.bashrc> nvm install node

26

INSTALL BOWER AND POLYMER• Bower is a package manager for frontend projects> npm install -g bower polymer-cli

27

CREATE A NEW PROJECT> mkdir my_project> cd my_project> bower init
(Answer questions)28

DOWNLOAD WEB COMPONENTS• Bower will download projects at specified GitHub URLS, as wellas its dependencies, to the bower_components/ folder• --save adds the entry to bower.json• Future developers just run “bower update” to download/update
components> bower install --save jstnhuang/ros-websocket> bower install --save jstnhuang/ros-rviz

29

FIND DOCUMENTATION• Find documentation on webcomponents.org• https://www.webcomponents.org/element/jstnhuang/rosrviz/elements/ros-rviz• https://www.webcomponents.org/element/jstnhuang/roswebsocket/elements/ros-websocket• Learn more about Polymer athttps://www.polymer-project.org/2.0/start/
30

CREATE INDEX.HTML<!doctype html><html><head><title>ros-rviz</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes"><script src="bower_components/webcomponentsjs/webcomponents-loader.js"></script><link rel="import" href="bower_components/ros-websocket/ros-websocket.html" /><link rel="import" href="bower_components/ros-rviz/ros-rviz.html" /><link rel="import" href="bower_components/polymer/lib/elements/dom-bind.html" /><style>html, body {height: 100%;
margin: 0;}</style></head><body><dom-bind><template is="dom-bind"><ros-websocket auto id="websocket" ros="{{ros}}" url="{{url}}"></ros-websocket><ros-rviz ros="{{ros}}" websocket-url="{{url}}"></ros-rviz></template></dom-bind></body></html>31

SERVE THE WEBPAGE• At this point, you should see <ros-rviz> and be able to add a grid
• Adding more displays will require backend support> cd my_project> python -m SimpleHTTPServer 8080 .

32

VISUALIZE A URDF
• Set up and run a mesh file server according tohttps://github.com/hcrlab/wiki/blob/master/web_development/serving_urdf.md• Run rosbridge_server and tf2_web_republisher as shown below

roslaunch rosbridge_server rosbridge_websocket.launchrosrun tf2_web_republisher tf2_web_republisher

33

FOR REACT USERS• React data-binding sets attributes rather than properties. To
set object/array properties or listen to events, get a ref tothe element.
• See https://robdodson.me/interoperable-custom-elements/and https://custom-elements-everywhere.com

34

REFERENCE
Learn more about web components
Find web components

https://www.webcomponents.org

Polymer libraryhttps://www.polymer-project.org

ROS components and web applications
ROS web components

https://www.webcomponents.org/search/ros

ROS Explorer

https://wiki.ros.org/ros_explorer

Rapid PbD

https://github.com/jstnhuang/rapid_pbd

CodeIt!

https://github.com/hcrlab/code_it

Robot Web Server

https://github.com/hcrlab/rws

35

WEB INTERFACES IN THE WILD

36

REACTIVE WEB INTERFACES WITH
POLYMER AND ROS
Justin Huang and Maya Cakmak
Paul G. Allen School, University of Washington
September 21-22, 2017