Titanium Community Questions & Answer Archive

We felt that 6+ years of knowledge should not die so this is the Titanium Community Questions & Answer Archive

Finding an (x,y) coordinate on an image

All,
For a class project, our application will include geolocation on a png map of a theme park. As we're trying not to use Google Maps overlays for the program, we'd like to find a way to find a specific x,y pixel position on the image.
Does anyone know how to place a label on a specific pixel position on the image? For instance, on a 1024x768 image, we'd like to find out how to place a label at 423,129.
Any thoughts on this?
Thanks!

— asked January 21st 2012 by Mark Myers
  • geolocation
  • image
  • imageview
  • mobile
0 Comments

2 Answers

  • You can place a label or any other view type on an x,y position of a parent view by adding it as a child:

    var myLabel = Ti.UI.createLabel({width:150, height:30, top: 423, left:129, text:'Test'}; //width & height v important
    var imageContainer = Ti.UI.createView({backgroundImage:'/images/test.png', width:1024, height:768});
    imageContainer.add(myLabel);
    

    Use e.globalPoint for a click x & y and you can animate a label or view around the image to simulate moving across the theme park..

    Good luck ;)

    — answered January 21st 2012 by Mark Henderson
    permalink
    2 Comments
    • I think globalPoint is deprecated, but idea is right.

      — commented January 21st 2012 by Arturs Sosins
    • Works great, but I'm running into 2 issues;

      • I can't seem to get our map displaying where we can scroll around it without using a webView (as we're using a 5617x4084 pixel image)..
      • When I use the webView, the label I've created moves around on the map when I scroll around. Any ideas?
      var mapAnimals = Ti.UI.createWebView({url:'animals.png', transform:scale, size:{ width:800, height:900 }, top:0, scalesPageToFit:true});
      
      winAnimals.add(mapAnimals);
      
      var myLabel = Ti.UI.createLahttp://developer.appcelerator.com/question/130965/finding-an-xy-coordinate-on-an-image#bel({
          width:150, height:30, top: 423, left:129, 
          text:'Test'}); //width & height v important
      
      
      winAnimals.add(myLabel);
      

      — commented January 22nd 2012 by Mark Myers
  • Works great, but I'm running into 2 issues;

    • I can't seem to get our map displaying where we can scroll around it without using a webView (as we're using a 5617x4084 pixel image)..
    • When I use the webView, the label I've created moves around on the map when I scroll around. Any ideas?
    
    var mapAnimals = Ti.UI.createWebView({url:'animals.png', transform:scale, size:{ width:800, height:900 }, top:0, scalesPageToFit:true});
    
    winAnimals.add(mapAnimals);
    
    var myLabel = Ti.UI.createLahttp://developer.appcelerator.com/question/130965/finding-an-xy-coordinate-on-an-image#bel({
        width:150, height:30, top: 423, left:129, 
        text:'Test'}); //width & height v important
    
    
    winAnimals.add(myLabel);
    
    — answered January 22nd 2012 by Mark Myers
    permalink
    3 Comments
    • And, for the life of me, I can't figure out how to remove a comment :/

      — commented January 22nd 2012 by Mark Myers
    • You need to wrap your large image view in a scrollView. Then you can pan and scroll it around. For Android add 2 scrollViews one horizontal and one vertical.. Probably better to go with a webView for Android as it supports multidirectional panning in 1 diagonal gesture and pinch/zoom..

      Suggest you setup the Kitchensink project and see the examples..

      — commented January 22nd 2012 by Mark Henderson
    • Mark,
      Appreciate the help (and hell of a name, by the way)… We've had it in a webview, but the issue with the label attaching to the screen pixel position, and not the image pixel position, still remains. Is there some glaring thing I'm missing?

      — commented January 22nd 2012 by Mark Myers
The ownership of individual contributions to this community generated content is retained by the authors of their contributions.
All trademarks remain the property of the respective owner.