Use your Smartphone to move a pointer on a remote page with JavaScript

Sanjeet Chatterjee built this nice demo where your smartphone can act as a virtual pointer for a webpage.

With a fundamental shift to the web, we are able to do really cool things right from our browser. In this tutorial, we will be utilising the Generic Sensor API to turn your smartphone into a pointer with real-time tracking.

Just like you use a Wiimote (Wii Controller), you can tilt/move your phone to move the dot on the page:

The “quaternions” provided by the AbsoluteOrientationSensor API are converted to yaw and roll, which are then transferred to the canvas-page using websockets.

Unfortunately the demo doesn’t work on iOS (MobileSafari) or Firefox, as those browsers do not support AbsoluteOrientationSensor:

Data on support for the mdn-api__AbsoluteOrientationSensor feature across the major browsers

💡 Shown above is an interactive CanIUse.com embed, showing an always up-to-date support table. By the time you are reading this browser support might have become better.

For those browsers, a fallback using the deviceorientation event could be implemented.

Track Your Smartphone in 2D With JavaScript (Article) →
PhoneTrackingDemo Canvas Page →
PhoneTrackingDemo Controller →
PhoneTrackingDemo Source (repl.it) →

💵 This linked article is stuck behind Medium's metered paywall, which may prevent you from reading it. Open the link in an incognito window to bypass Medium's ridiculous reading limit.

☝️ If you lack an Android Smartphone with a modern Chrome on it, you can test it all out using Chrome on Desktop: Open the controller page in Chrome and use the DevTools’ Sensors panel to emulate/override the position of the device.

Connect multiple mobile screens together with Swip.js

What if all your mobile devices were a single screen? This probably isn’t the most common question to ask yourself.

But, just for a second, actually think about it. Think about all the possibilities of being able to combine any kind of mobile device, independent of its operating system. That’s what Swip.js does.

Place two or more devices next to each other, pinch ‘m together and – *BOOM* – they’re connected. Once connected you – thanks to websockets – can throw/move stuff over ‘m, as if they were one big screen.

One of the examples included is the golf game shown above.

The Story of Swip.js
Swip.js (GitHub) →

How Reddit built r/Place

Each year for April Fools’, rather than a prank, we like to create a project that explores the way that humans interact at large scales. This year we came up with Place, a collaborative canvas on which a single user could only place a single tile every five minutes. This limitation de-emphasized the importance of the individual and necessitated the collaboration of many users in order to achieve complex creations. Each tile placed was relayed to observers in real-time.

This post details how we approached building Place from a technical perspective.

Next to detailing how the data is stored, synced, and drawn on the canvas; the article also covers some realtime problem solving after the RabbitMQ CPU load avg shot up from 6 to 60 (!) …

The 72h timelapse – condensed to 4’30 – is embedded above. The source code of r/Place is also available.

Reddit Blog: How We Built r/Place →
r/Place Source (GitHub) →

Unnumbered Sparks

unnumbered-sparks

Unnumbered Sparks is a monumental interactive sculpture in the sky. Choreographed by visitors in real time through their mobile devices, at night the sculpture became a crowd-controlled visual artwork on a giant, floating canvas.

Built using Chrome; Powered by Go, WebGL, WebSockets, Web Audio, and Polymer:

Truly impressive.

Unnumbered Sparks →

ocppjs – An experimental OCPP Simulator

ocpp

Simulator for the Open Charge Point Protocol — the protocol by which a Charge Point of an electric vehicle communicates with a Central System — supporting both OCPP-S (standard OCPP, using SOAP over HTTP) and the new OCPP-J (“new” OCPP, using a Wamp inspired protocol over WebSockets). Version 1.2 and 1.5 of OCPP are supported.

Once you have your Central System Service running, use it as follows:

$ node gir-ocppjs.js start_cp ws://127.0.0.1:9999 BRAMUS-123
> [2013-10-31 23:02:55] Connected to Central System.
> bootnotification chargePointVendor="DBT" chargePointModel="NQC-ACDC"
> [2013-10-31 23:03:06] cp#BRAMUS-123: >>cs [2,"iYeg02bC9K4YNb8kjbo5fqyiJ7VTqN6a","BootNotification",{"chargePointVendor":"DBT","chargePointModel":"NQC-ACDC","chargePointSerialNumber":"gir.vat.mx.000e48","chargeBoxSerialNumber":"gir.vat.mx.000e48","firmwareVersion":"1.0.49","iccid":"","imsi":"","meterType":"DBT NQC-ACDC","meterSerialNumber":"gir.vat.mx.000e48"}]
> [2013-10-31 23:03:06] cp#BRAMUS-123: <<cs [3,"iYeg02bC9K4YNb8kjbo5fqyiJ7VTqN6a",{"status":"Accepted","currentTime":"2013-10-31T22:03:10.000000Z","heartbeatInterval":1200}]
> heartbeat
> [2013-10-31 23:03:13] cp#BRAMUS-123: >>cs [2,"Lo7JIBdE4CncZ8TfC9Xx6rDrWGPY4XH4","Heartbeat",{}]
> [2013-10-31 23:03:13] cp#BRAMUS-123: <<cs [3,"Lo7JIBdE4CncZ8TfC9Xx6rDrWGPY4XH4",{"currentTime":"2013-10-31T22:03:17.000000Z"}]
> quit
> [2013-10-31 23:03:18] End of simulation : interrupted by user.
$ 

The project also allows one to simulate a Central System.

ocppjs – An experimental OCPP Simulator →

Listen to Wikipedia

listen-to-wikipedia

Bells are additions, strings are subtractions. There’s something reassuring about knowing that every user makes a noise, every edit has a voice in the roar. (Green circles are anonymous edits and purple circles are bots. White circles are brought to you by Registered Users Like You.)

Quit relaxing as it turns out. Uses Websockets, the aforementioned howler, d3.js, etc.

Listen to Wikipedia →

(via )

Chrome Experiment – Google “Roll It”

Roll It links your devices through Chrome: roll a ball from your phone to your laptop. Since the whole thing runs on Chrome, no apps, installs, or special configurations are needed – and any smartphone that runs Chrome can play.

Use your phone as a remote controller, thanks to websockets.

Roll It →

Pusher — HTML5 WebSocket Powered Realtime Messaging Service

pusher_cloud_diagram

Pusher is a hosted API for quickly, easily and securely adding scalable realtime functionality to web and mobile apps

It’s as easy as subscribing to a channel:

var channel = pusher.subscribe('my-channel');
channel.bind('my-event', function(data) {
  alert('Received my-event with message: ' + data.message);
});

and pushing messages to it:

pusher.trigger('my-channel',
               'my-event',
               { "message": "hello world" }
);

Libs for pushing messages exist for PHP, Ruby, JS, and .Net

Pusher →

gifsockets

This library shows how to achieve realtime text communication using GIF images as transport.

The idea is pretty simple. We use Animated Gif images to stream data in real time to the browser. Since a gif image doesn’t specify how many frames it has, once the browser opens it, it will keep waiting for new frames until you send the bits indicating that there’s no more image to fetch.

And yes. It works in IE6.

gifsockets →