Feeds:
Posts
Comments

Archive for the ‘Nexus One’ Category

Happy Greg

A portrait of me by a friend.

The JavaScript touch APIs can be used with the canvas tag to easily create a painting application in a web page that work in multiple clients which include the iPad / iPhone / and Nexus One. Given the iPad will have such a large working are a touch painting application would be very fun.

The Touchpaint application which you can find here is pretty straight forward. The key code for event tracking is :

function move( e ) {  
  if ( _widget.drawing ) {  
      var te =  e.touches.item(0);  
      var _current = { x : te.clientX - _widget.pos.x, y : te.clientY - _widget.pos.y };  
      if ( _widget.last !== null) {  
              _widget.drawLine( _widget.last, _current );  
      }  
      _widget.last = _current;  
    }  
    e.preventDefault();  
}  

The main code of interest is the access to the e.touches to get the location of the touch event and the e.preventDefault(); which prevents the event from propagating to the page and causing a page scroll.

And for non touch users the equivalent is :

function moveMouse( e ) {  
  if ( _widget.drawing ) {  
      var _current = { x : e.pageX - _widget.pos.x, y : e.pageY - _widget.pos.y };  
      if ( _widget.last !== null) {  
              _widget.drawLine( _widget.last, _current );  
      }  
      _widget.last = _current;  
    }  
    e.preventDefault();  
}  

In a future post I will show how to store the drawing in the HTML 5 based local storage and or send to a server component. For now if you want to play with the source go to http://gregmurray.org/ipad/touchpaint.

Read Full Post »

I had the chance to get my hands on a Nexus One and was able to run though my touch and gesture tests at http://gregmurray.org/ipad. Given both the Nexus one and the iPhone / iPad all use a variant of Webkit I found the following :

  • ontouchstart, ontouchmove, ontouchend work fine.
  • ongesturestart, ongesturechange, ongestureend do not work.

What does this mean?

You can create some UIs that use patterns such page swipe / flick gestures as seen in my carousel widget but some other gestures like stack spread and pinch to zoom will not. See the gesture page if you want to try yourself. While limited there is still the chance to develop some HTML interfaces that work across a wide array of touch devices.

Hope for Standardized Touch Support

Let’s hope going forward that the Nexus One ( Android ) browser will expand it’s support for gestures. For now we will have to work with touch events which are the basis for the gestures. Let’s keep our fingers crossed that other touch based operating system providers expose gestures and touch events in their browsers. An even better solution would be to have gesture and touch events in a future HTML standard.

Read Full Post »