Draw in vvvv from a webpage


#1

I’m guessing this should be pretty easy but I havent looked at html for many years. I need to get finger data from a web page on a mobile phone into vvvv so I can draw it. Server a page from vvvv I get, but how do you stream finger data for example, bonus points for multiple users!


#2

You can use https://vvvv.org/contribution/websocket-(network-server). Then the webpage needs to connect to it with standard javascript and send all the touch events. This is also multiuser.
Just extracted some of the javascript from an old project. This should get you going:

// init function  //////////////////////////// 
	
window.onload = function init(){
	
	startWebSocket()
}

// websocket stuff///////////////////////////////////////	
// /////////////////////////////////////////////////////	

// start WebSocket  	

function startWebSocket(){			
	if (window.WebSocket){
		ws = new WebSocket("ws://localhost:81");
		ws.addEventListener('open', function(evt){ webSocketOnOpen(evt); });
		ws.addEventListener('message', function(evt){ webSocketOnMessage(evt); });
		ws.addEventListener('close', function(evt){ webSocketOnClose(evt); });
	}
	else alert("WebSocket NOT supported by your Browser :("); 
}		

// websocket send message // send string to v4 server

			
function Send(message){
ws.send(message);
};

// run when onopen websocket event

function webSocketOnOpen(evt){

ws.send("HelloServer");

};	
		
			
// run when websocket recieves message // recieve v4 server messages 

function webSocketOnMessage(evt){	
    
	
}
		   
// run when websocket is closed. /////////////////////////////////////////////// 
function webSocketOnClose(evt){			


    };
	
		
// send mouse ///////////////////////////////////////	
	
document.onmousemove = function readMouseMove(evt){
	Send("mouse," + evt.clientX +","+evt.clientY );
}

// send touch
// create Event Listeners and call websocket send //////////////////////////////////	

var xStart, yStart = 0;
 
document.addEventListener('touchstart',function(e) {
    xStart = e.touches[0].screenX;
    yStart = e.touches[0].screenY;
	Send("mouse," + e.touches[0].screenX +","+e.touches[0].screenY );
});
 
document.addEventListener('touchmove',function(e) {
    var xMovement = Math.abs(e.touches[0].screenX - xStart);
    var yMovement = Math.abs(e.touches[0].screenY - yStart);
	Send("mouse," + e.touches[0].screenX +","+e.touches[0].screenY );
    e.preventDefault();
});

#3

I’m sorry, pretend your explaining bitcoin to your dad…!
I added the code you posted between some tags in an index.html, but I’m not sure how to connect the vvvv node to it, what does the input to the node take?
This newfangled web thing will never catch on!


#4

These snippets might not “just work” completely after copy paste. Meant more like recipe list ;)
Maybe just start from the devtools in the browser only. Start the websocket patch then hit F12 in your browser (chrome or firefox), go to console and paste these lines and hit enter:

function startWebSocket(){			
	if (window.WebSocket){
		ws = new WebSocket("ws://localhost:81");
		ws.addEventListener('open', function(evt){ webSocketOnOpen(evt); });
	}
	else alert("WebSocket NOT supported by your Browser :("); 
}	

function webSocketOnOpen(evt){

ws.send("HelloServer");

};


startWebSocket()

You should see a client connection at the clients pin of the WS node. If you connect an s+h to the output you should also catch a “Hello Server” string that is send on opening the websocket.

Pay attention to the port in the java script so it matches the one you set in the patch (81 should be fine).
Also i assume you are testing on local machine so the adress is localhost. Also make sure windows firewall is allowing all this.

When this is working add these lines and you should get mouse data:

function Send(message){
ws.send(message);
};

document.onmousemove = function readMouseMove(evt){
	Send("mouse," + evt.clientX +","+evt.clientY );
}

The input on the node is for sending something back to the webpage, so ignore for now

Then put everything in your html and test with you phone (really just a more stripped down version of the code above):

function startWebSocket(){			
	if (window.WebSocket){
		ws = new WebSocket("ws://localhost:81");
		ws.addEventListener('open', function(evt){ webSocketOnOpen(evt); });
	}
	else alert("WebSocket NOT supported by your Browser :("); 
}	

function webSocketOnOpen(evt){

ws.send("HelloServer");

};


startWebSocket()



function Send(message){
ws.send(message);
};

document.onmousemove = function readMouseMove(evt){
	Send("mouse," + evt.clientX +","+evt.clientY );
}



var xStart, yStart = 0;
 
document.addEventListener('touchstart',function(e) {
    xStart = e.touches[0].screenX;
    yStart = e.touches[0].screenY;
	Send("mouse," + e.touches[0].screenX +","+e.touches[0].screenY );
});
 
document.addEventListener('touchmove',function(e) {
    var xMovement = Math.abs(e.touches[0].screenX - xStart);
    var yMovement = Math.abs(e.touches[0].screenY - yStart);
	Send("mouse," + e.touches[0].screenX +","+e.touches[0].screenY );
    e.preventDefault();
});

#5

So here is a super reduced html file that i just tested.
It does send mouse and touch coordinates to a websocket server on localhost port 81.
Also add a mainloop to your patch to keep up with your browsers 60fps, the ws node is queueing.
script.zip (529 Bytes)


#6

thanks i’ll try it tomorrow


#7

websocket.zip (126.6 KB)

Really pretend I last looked at HTML in 2003…
I have a websocket, which presumably hooks into the browser in some manner (lets call it magic) I open the script.html? and it magically works? Do I not need to host this page so it can be accessed?
F12 and pasting the code into the console doesnt seem to do anything. I feel like I’m missing something fundemental here! I will of course get some to make a webpage for me, but I need to understand how the interface works/workflow of getting it running.
I’ve tried hosting the script.html with an http node, and that doesn’t seem to work either, sorry to seem so dense, but this is why I last looked at html in 2003, seems unduely complicated!
Thanks!
Also can it run on any webserver local to the vvvv patch, can it be run on one remote to the patch?


#8

You can host the html however you like, even just open it from disk. Did you grant vvvv the right for inbound and outbound traffic in the windows firewall? Maybe just disable the windows firewall for testing.
What you sent in the zip works rightaway. Just open the html in a browser.
Regarding the patch, you connected on data to the queue reset, but anyway you should see a connection on the client pin.
image


#9

Well that was odd, just retried and it all works! thank you!