Languages

Menu
Sites
Language
touch input

Hi,

 

I want to add a button to my Watchface for Gear 2. I will show battery status if the button is pressed.

Which function should I use for touch input event ? 

 

is it about Canvas api ?

canvas.addEventListener("touchstart", touchStartHandler, false);

 

Actually, I would like to search this in the Tizen Dev Guide, but there is no search option. And I couldn't find a downloadable version of the guide.

 

Thanks.

 

List

Responses

17 Replies
Marco Buettner

I think its better to use "tap" or "click" instead "touchstart"

mekabe remain

thanks. where can I find the usage of these commands ?

 

Marco Buettner

I see tap is only available on jQuery Mobile ... so you can use only "click"...

click is a default event of HTML... so you can find it on www.w3.org

mekabe remain

w3.org ?

but I am trying to do it on a Tizen watchface. It must be an event supported on Tizen wearable SDK with JAvascript language. No ?

 

Marco Buettner

omfg... learn javascript basics, than read documentation and than write an app... *Facepalm* ... 

AVSukhov

Hello,

You can find documentation in IDE (with Search) Help -> Help Contents

mekabe remain

I could only make it work  with touchstart.

canvas.addEventListener("touchstart", touchStartHandler, false);

I couldn't add an invisible button as I required.

anyway, it works.

 

Marco Buettner

canvas elements support "click" ... You had only to replace touchstart with click.

mekabe remain

ok. how can I check or limit cick on screen position ?

 

Marco Buettner

Add a div-container on the screen position :)

CSS

div.clickArea {
    position: absolute;
    top: 0;
    left: 0;
    width: 100px;
    height: 100px;
    z-index:1000px;
}

HTML

<body>
    <div id="#main">
        <div class="clickArea"></div>
        <div class="other area"></div>
    </div>
</body>

 

mekabe remain

thank you. 

but my index.html has a <canvas> statement in it. I access to the context with canvas id.

Should I put the <div> statements within the <canvas> or out of it ?

[code]

<body>
    <canvas id="cnvs" class="canvas">        
    </canvas>
</body>

[/code]

Marco Buettner

If you use absolute you can set it before your canvas.

mekabe remain

thanks.

and then, how shall I access that in the javascript code ?

var clickarea  = document.getElementById('#main.clickArea');

clickarea.addEventListener("click", onClick);

would this work ?

Marco Buettner

No.. The "dot" isn't allowed as character on id... Also if you use document.getElementById() you must remove the hashtag... 

Its better if you use document.querySelector("#main div.clickArea") if clickArea the class of div and #main is parent of div.clickArea.... 

mekabe remain

thank you.

but with that command app crashes.

var clickarea  = document.querySelector("#main div.clickArea");
clickarea.addEventListener("click", onClick);

doesn't crash if I remove the addEventListener from clickarea

how can I add a eventlistener to the area referred by document.querySelector ?

 

Also, I am trying to add an audio to play when screen is clicked. It works when I cklick the first time. But in the second and further clicks, the sound is played from half.

I read some place that I should set currenttime parameter to 0 to play from beginning. But it didn't help. What am I missing below ?

function onClick {
    audio1 = document.getElementById("audio1");
    audio1.pause();
    audio1.volume = 1;
    audio1.currentTime = 0;
    audio1.play();
}

 

AVSukhov

probably, querySelector return null

try to:

var clickarea = document.querySelector(".clickArea");

if(clickarea) {

clickarea.addEventListener(....);

}

mekabe remain

it worked this way but the area was not correct.

Although I wrote ;

div.clickArea {
    position: absolute;
    top: 173;
    left: 287;
    width: 33px;
    height: 82px;
}

in the css. the area was working like ;

    top: 0;
    left: 0;
    width: 33px;
    height: 82px;

do you have any idea why ?

I made the position fixed in html ;

     <div style="position:absolute;top:173px;left:287px" class="clickArea"></div>

it works now. but why the css top/left definition didn't work ?