HTM5 on iPhone and iPad - MouseMove() - How?

Monkey Targets Forums/HTML5/HTM5 on iPhone and iPad - MouseMove() - How?

Difference

(Posted 2011) [#1]

Does anybody have a working HTML example of a simple

If MouseDown(0) or TouchDown(0)
get MouseX() , MouseY() ?

on the iPad or iPhone.

I've tried various HTML5 templates on the iPad and different monkey code, but I can't seem get it working,

Monkeytest

Import mojo

Class MyApp Extends App

	Field touching
	
	Field mx:Float
	Field my:Float
		
	Method OnCreate()
		SetUpdateRate 30
	End
	
	Method OnUpdate()
		touching=0
		For Local i=0 Until 32
			If TouchDown( i ) touching+=1
			If MouseHit( 0 ) touching+=200  '< this gets registered but only on finger up -:(
		Next
		
		mx = TouchX()
		my = TouchY()
		
	End
	
	Method OnRender()
		Cls
		SetColor 255,255,255
		DrawText "Here " + touching +" , " + mx + " , " + my,10,20
	End
End

Function Main()
	New MyApp

End Function

HTML

<!DOCTYPE html>

<html>
<head>


<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"> 

<style type="text/css">
body{
	height: 100%;
	overflow: hidden; /* keeps scrollbar off IE */
	font-family: arial,sans-serif;
	font-size: 13px;
	color: #000;
	background-color: #fff;
	padding:0px;
	margin:0px;
}
canvas:focus{
	outline:none;
}

</style>



</head>
<script>
 function BlockMove(event) {
  // Tell Safari not to move the window.
  event.preventDefault() ;
 }
</script>
<body ontouchmove="BlockMove(event);" >

<canvas id="GameCanvas" onclick="javascript:this.focus();" width=640 height=480 tabindex=1></canvas><br>

<textarea id="GameConsole" style="width:640px;height:240px;border:0;padding:0;margin:0" readonly></textarea><br>

<script language="javascript" src="main.js">Javascript not supported!</script>

</body>
</html>

skid	(Posted 2011) [#2]

Mojo does not currently support the HTML events touchstart, touchmove and touchend which need to be processed for this to work.

http://developer.apple.com/library/safari/#documentation/AudioVideo/Conceptual/HTML-canvas-guide/AddingMouseandTouchControlstoCanvas/AddingMouseandTouchControlstoCanvas.html

Difference

(Posted 2011) [#3]

Thanks for the feedback.

Got a Dom based version working using the concept from the link.
The dom module needs a few additions to allow it.

If anyone is interested, I'd be happy to share my solution.

It would be great this came with mojo by default.