Touch event with webrender

General TouchDesigner Discussion
1

I am trying to use the web-render with multi-touch events.

Browser supports them but having issues passing this sort of data into the web render top.

I feel this may be more of a JS question, but wondering if anyone has tried sending touches and not just mouse clicks.
Here is the JS I am trying to send to the browser, would multi-line strings not work for some reason. I don’t think javascript cares if it has a semicolon

Is there any way to see the web-console for any errors or debug messaging chromium returns?

WR = op('webrender')


def makeJSString(type, px, py, id):
	returnString = ""
	returnString+="var event = document.createEvent('TouchEvent');"
	returnString+="event.initTouchEvent('touch"+type+"', true, true);"     
	returnString+="event.touches = [{"
	returnString+="identifier: "+str(id)+","
	returnString+="pageX: "+str(px)+","
	returnString+="pageY: "+str(py)
	returnString+="}];"
	returnString+="dispatchEvent(event);"

	return returnString
	
x = int(touch.u * 1280)
y = int(touch.v * 720)
strN = makeJSString('start',x,y,touch.id)
	
WR.executeJavaScript(strN)
1 Like
2

Not answering your question, just something about the way you set this up.
You can post your JS String into a TextDAT and just refference the text member of that dat.
Also check out python fomrat function!

3

ah yeah, I think you mean format() ?

That would probably be a lot simpler. I have never gotten the hang of it tho. Ill post a revision in a few

4

Yo yo. I’d take an approach like this with a Template over Format() since format gets spicy when presented with erroneous curly brackets.

We’ll add a JavaScript function for building touch events and keeping track of which ones are still active. add_handler_if_needed takes in the element you want to pass the touch events to, and adds the handler just once.

From there on out make_js_string will turn a touch type (‘start’, ‘move’, ‘end’), an id for the touch, and an X, Y position into a call to the handler that was added previously.

from string import Template

webrender = op("webrender")

touch_handler_function = Template("""

var activeTouches = {};

function sendTouchEvent(id, x, y, element, eventType) {
  const touchObj = new Touch({
    identifier: id,
    target: element,
    clientX: x,
    clientY: y,
    radiusX: 2.5,
    radiusY: 2.5,
    rotationAngle: 10,
    force: 0.5,
  });
  
  activeTouches[id] = touchObj;
  if (eventType == 'touchend') {
  	delete activeTouches[id]
  }

  const touchEvent = new TouchEvent(eventType, {
    cancelable: true,
    bubbles: true,
    touches: Object.values(activeTouches),
    targetTouches: [],
    changedTouches: Object.values(activeTouches),
    shiftKey: false,
  });
  element.dispatchEvent(touchEvent);
}

const touchElement = document.getElementById('$element_name')
""")

send_touch_command = Template("sendTouchEvent($id, $x, $y, touchElement, 'touch$mode');")
has_added_handler = False

def add_handler_if_needed(element_name):
	global has_added_handler
	if has_added_handler == False:
		print("added handler")
		webrender.executeJavaScript(touch_handler_function.substitute(element_name=element_name))
		has_added_handler = True

def make_js_string(type, id, pageX, pageY):
	return send_touch_command.substitute(mode=str(type), id=str(id), x=str(pageX), y=str(pageY))

add_handler_if_needed('whatever-element')
webrender.executeJavaScript(make_js_string('start', 0, 100, 200))
webrender.executeJavaScript(make_js_string('move', 0, 200, 100))
webrender.executeJavaScript(make_js_string('end', 0, 200, 100))
3 Likes