Multi-Touch indicators for touch devices

rp-7

#1

Hi, everyone!

I’m excited to share a cool concept I threw together this morning after reading this thread: Click Point/Touch Point visual display

James shared a way of showing touch indication using Axure interactions, but unfortunately within Axure this wouldn’t work with multi-touch gestures. Inspired, I made something that would, which you can see here: Example (you won’t see anything on a device or browser that doesn’t support touch events).

I have not thoroughly tested this and am still cleaning it up and making it look nicer will cool effects, so I’ll refrain from sharing the code at the moment but will share it once I’m happy with it. If I can’t find time to work on it then I’ll simply share it then.

I’ve tested on my Nexus 4 and Chrome in device emulation mode and it seems to work. If you find any issues, please let me know.

Enjoy!


#2

Hi Nathan,

Sorry for the slow reply, but I wanted to say that this is awesome! I tested it out on a few Android devices at the office and had (probably too much) fun dragging the indicators around with all five fingers. I wasn’t able to get it to work on any iOS devices–is that something you’re planning to implement?

Thanks for sharing!


#3

Thanks for the feedback. No idea it didn’t work on iOS, I’ll have to look into it as I didn’t have an iOS device to test on. This is really just a simple implementation using the touch events API so I’ll just have to look into the implementation on iOS.


#4

Cool. Did you do this using only Axure or with some Javascript injection? I’d be interested because I have to do a tutorial with multi-touch and could use this as a framework to simulate multi touch events. Would it be possible to get a hand on the Axure file of this demo?


#5

This is currently done entirely with plugins in Axshare, or injected Javascript within Axure if you wanted. This isn’t currently possible natively in Axure. My intent was for it to be something that someone could easily copy/paste into an Axshare plugin.

I haven’t had a lot of free personal time to work on it but perhaps I’ll just post what I got so someone else could run with it if they wanted to.


#6

Haven’t had time to do much more recently so here’s the code I used for the example (warts and all):


//Add needed styles
var styles = '.touch {' +
		'border-radius: 50%;' +
		'background: green;' +
		'height: 5vw;' +
		'width: 5vw;' +
		'position: absolute;' +
		'visibility: hidden;' +
	'}',
s = document.createElement('style');
s.innerHTML = styles;
document.head.appendChild(s);

//Create and add touch marker elements to document
var touchMarks = document.createDocumentFragment();
for (i = 0; i < 5; i++){
	var div = document.createElement('div');
	div.classList.add('touch');
	touchMarks.appendChild(div);
}
document.body.appendChild(touchMarks);
var marks = document.querySelectorAll('.touch');

//Define handlers for touch events
var touchStartHandler = function(e){
	for (var i = 0; i < e.changedTouches.length; i++){
		var currentMark = marks[e.changedTouches[i].identifier];
		//currentMark.style.top = e.changedTouches[i].pageY - 25 + 'px';
		//currentMark.style.left = e.changedTouches[i].pageX - 25 + 'px';

		currentMark.style.top = 'calc(' + e.changedTouches[i].pageY + 'px - 2.5vw)';
		currentMark.style.left = 'calc(' + e.changedTouches[i].pageX + 'px - 2.5vw)';

		currentMark.style.visibility = 'visible';
	}
}

var touchEndHandler = function(e){
	for (var i = 0; i < e.changedTouches.length; i++){
		var currentMark = marks[e.changedTouches[i].identifier];
		currentMark.style.visibility = 'hidden';
	}
}

var touchMoveHandler = function(e){
	for(var i = 0; i < e.changedTouches.length; i++){
		var currentMark = marks[e.changedTouches[i].identifier];
		//currentMark.style.top = e.changedTouches[i].pageY - 25 + 'px';
		//currentMark.style.left = e.changedTouches[i].pageX - 25 + 'px';

		currentMark.style.top = 'calc(' + e.changedTouches[i].pageY + 'px - 2.5vw)';
		currentMark.style.left = 'calc(' + e.changedTouches[i].pageX + 'px - 2.5vw)';

		//currentMark.style.visibility = 'visible';
	}
}

//Add handlers to event listeners
document.addEventListener('touchstart', touchStartHandler);
document.addEventListener('touchend', touchEndHandler);
document.addEventListener('touchmove', touchMoveHandler);


unlisted #7

closed #8