Getting location of the touchscreen when touched

Thu Aug 30, 2012 10:31 am

Is there a way when the touchscreen it touched. I can get the location?
In my APP i need to place a red dot at the place where the screen is touched.

Thu Aug 30, 2012 1:57 pm

Hello Eric! You can check whether tap or click events return the coordinates where you clicked in the browser window. Then, you could use something like Canvas to draw a dot there. This might be a better fit for a native app, than HTML5 or hybrid app.

Fri Aug 31, 2012 6:28 am

Thanks for the reply,

This might be indeed better for a native app.
but i have not found a good native app editor with drag and drop.
All native app editors i have seen so far are only coding.

I do not mind coding. but i do not like to make the I-face of the app with coding as well.

Anyone knows a good native app editor?

Fri Aug 31, 2012 7:26 am

I have found the solution for getting the location of an image click.
here is the code.

$('[dsid="Image1"]').bind('tap', function(e){
var x = e.pageX;
var y = e.pageY;

alert([x, y]);
})

Fri Aug 31, 2012 7:43 am

Have not found out yet how to draw on the canvas.
any suggestions?

Fri Aug 31, 2012 9:05 am

This should help http://html5tutorial.com/how-to-draw-...
http://stackoverflow.com/questions/78...

Fri Aug 31, 2012 1:46 pm

Thanks for the reply,

That code is very usefull

just to explain myself, I am new at Tiggzi or any app building,
I do program in vb.net, C, C++

The coding on it own is not really my problem.

I have just no idea how to get it to work in the app.
I did read some tutorials and made some example apps.
This all is no problem

However from the html5tutorial i have the following code, which i like to see to work in the app:

code
<html>
<head>
<script type="application/javascript">
function draw() {
var canvas = document.getElementById("canvas");
if (canvas.getContext) {
var ctx = canvas.getContext("2d");

Code: Select all

     ctx&#46;fillStyle = "rgb(200,0,0)&quot 
     ctx&#46;fillRect (10, 10, 55, 50); 

     ctx&#46;fillStyle = "rgba(0, 0, 200, 0&#46;5)&quot 
     ctx&#46;fillRect (30, 30, 55, 50); 
   } 
 }

</script>
</head>
<body onload="draw();">
<canvas id="canvas" width="150" height="150"></canvas>
</body>
</html>
/code

I do understand this code.
However i have no idea where to put that code.
I did try different ways with no luck at all.
just nothing shows up at all.

So my main question is.
how do i get the code to work in the app?
Where do i need to put this code?

just need a little start on this. The rest i can figure out myself.

Fri Aug 31, 2012 2:28 pm

You can try putting this in Panel component: var canvas = document.getElementById("canvas"); if (canvas.getContext) { var ctx = canvas.getContext("2d"); ctx.fillStyle = "rgb(200,0,0)"; ctx.fillRect (10, 10, 55, 50); ctx.fillStyle = "rgba(0, 0, 200, 0.5)"; ctx.fillRect (30, 30, 55, 50); } }

Fri Sep 07, 2012 7:21 am

Thanks for all the help,

But i think i give up.
I do not get it to work
And no one can help me here.

help like. "try putting this in Panel component" is not helping me.

I got a Panel component. The only place where i can think of putting the code
is under the click event. then java script.

I did ask where to put the code in the previous question. but obvious, no one can exactly explain me where to put it.

Also i did rename the Panel component to canvas.
but no luck.

Once again for all the help.
but i think i need to find an other development program, where they give beginners better support.

(Sorry. but disappointed with the support i get here)

Fri Sep 07, 2012 7:26 am

I also did try to put the code in the panel, where you can put html in.
no luck either