Shared Control

Below is an application that generates balls on a canvas. Alone, it is just drawing the ball's current position to the screen. By sharing the ball's state through the Data API, other applications can manipulate ball positions.

Note: While these examples are running on the same domain (codepen), they are not domain bound. You can have a codepen snippet talk to a jsfiddle, plunkr, jsbin, ect. The benefit of the IWC here is minimal overhead for developers in cross domain communication.

Ball Viewer

Ball Apps (opens in new window)

These applications set resources to the IWC to create & modify balls on the Ball Viewer above.

Stationary Ball Sequenced Ball User Controlled Ball Manipulator: Shake a ball

IWC Resources Used by Ball Viewer

API	Resource	Action	Reason	Resource Value Sample
Data	/github/example/balls	Watch	Listen for ball collection	n/a
Data	/github/example/balls/{ballId}	Watch	Listen for individual ball updates	`{ x: 50, y: 50, radius: 20, color: "#FF0000" }`

Data Api: /github/example/balls

A resource for applications to watch for addition/deletion of ball resources. This information is in the resources collection.

Data Api: /github/examples/balls/{ballId}

Shared data on a ball drawn to the example below. Any IWC application can manipulate the state of the ball and update its position on the screen. The format of the value of the ball is as so:

{
   x: 12, // Number between 0-100
   y: 50, // Number between 0-100
   radius: 20, // Number between 0-50. Relative to the width of the canvas
   color: "#F0F0F0" // String hex value to set the balls color
}