Live manipulate another website

April, 2016

After experimenting with the gyroscope, I wanted to manipulate a div on my desktop computer with my smartphone gyroscope. Maybe to use the phone as a digital pen for the desktop.

What’s a simple way to live transmit a variable from one website to another? Just write a file with the data on the Transmitter-Website and let the Receiver-Website read this file.

I know that’s not very performant and you could use a database, but that solution is enough for the first tests.
Here is how I made the first demo and send a text from Website1 to Website2:

Transmitter Website:


//JS SCRIPT TO GET TEXT
$( "input" ).keyup(function() {
var text = $("input").val();
$.post('index.php', {variable: text});
});

//PHP SCRIPT TO WRITE TEXT TO FILE
$myfile = fopen("file.txt", "w");
$variable = $_POST['variable'];
$txt = $variable;
fwrite($myfile, $txt);
fclose($myfile);

Receiver Website:


//JS SCRIPT TO READ FILE EVERY 10ms
function read(){
	$.get('file.txt',function(data){
	$(".text").empty().append(data);
	});
	setTimeout(function(){read();},10);
	}
read();

Here we go! Now the Text appears at the Receiver Website.

demo-long

 

Now I wanted to use this technique to combine it with the gyroscope manipulation.

I pushed the x,y and z coordinates of the smartphone rotation to the file and read it from the transmitter website. Looks kinda smooth!

remote

Test it here and refresh the desktop link after having both links opened:

Open this link on Desktop

Open this link on the Smartphone

Quite cool. I worked on a version where you can taphold on the smartphone and draw a line on the receiver website. Like a Pen&Canvas, but it’s not that precise, cause you need the acceleration data of the device to make the drawing feel native.

Test the drawing version here:

Open this link on Desktop

Open this link on Smartphone