Drawing over /Editing an Image in the Android Emulator

vishalmk · by **vishalmk** » Fri Feb 22, 2008 6:37 am

Hi Friends,

I have an Image in my screen (emulator) and I want to draw a square over some area of the image (actually record information for some area of the image ) and store the coordinates (top-left and bottom-right) of the square, so that when the image is opened next time and a mouse event happens over it, the mouse icon changes into a clickable one - over the area of the image recorded earlier.

And also when next time a mouse is dragged over the recorded area it shows a subtitle over the area of the image on the screen for example some name with-which I stored it last time.

Then I want to click that text and open a new activity..

Do you have any suggestions? Would appreciate that.

Thanks,
Vishal

vishalmk · by **vishalmk** » Fri Feb 22, 2008 8:19 am

Any ideas what is the following error I am getting: I am getting this when I use the MotionEvent inside TagPhoto activity (method below). I mean when I click on the image to draw I get this error and the window crashes and returns to its parent (activity screen)

Syntax: [ Download ] [ Hide ]

Using java Syntax Highlighting

INFO/WindowManager(508): WIN DEATH: Window{40211030 test.androidintelliimage/test.androidintelliimage.tag.TagPhoto}
 
INFO/ActivityManager(508): APP DEATH: test.androidintelliimage
 
DEBUG/ActivityManager(508): Restarting: HistoryRecord{40095f00 {test.androidintelliimage/test.androidintelliimage.animation.Transition3d}}
 
INFO/WindowManager(508): WIN DEATH: Window{402534a8 test.androidintelliimage/test.androidintelliimage.AndoidIntelliImage}
 
INFO/WindowManager(508): WIN DEATH: Window{40291488 test.androidintelliimage/test.androidintelliimage.animation.Transition3d}
 
INFO/WindowManager(508): WINDOW DIED during motion dispatch: Window{40211030 test.androidintelliimage/test.androidintelliimage.tag.TagPhoto}
 
WARN/WindowManager(508): Requested window android.os.BinderProxy@40210ec8 does not exist
 
WARN/WindowManager(508): java.lang.RuntimeException
 
WARN/WindowManager(508):     at android.server.WindowManagerService.windowForClientLocked(WindowManagerService.java:3881)
 
WARN/WindowManager(508):     at android.server.WindowManagerService.windowForClientLocked(WindowManagerService.java:3873)
 
WARN/WindowManager(508):     at android.server.WindowManagerService.removeWindow(WindowManagerService.java:584)
 
WARN/WindowManager(508):     at android.server.WindowManagerService.dispatchPointer(WindowManagerService.java:1641)
 
WARN/WindowManager(508):     at android.server.WindowManagerService.access$300(WindowManagerService.java:80)
 
WARN/WindowManager(508):     at android.server.WindowManagerService$InputDispatcherThread.process(WindowManagerService.java:2514)
 
WARN/WindowManager(508):     at android.server.WindowManagerService$InputDispatcherThread.run(WindowManagerService.java:2437)
 
INFO/ActivityManager(508): Starting app process test.androidintelliimage to host activity {test.androidintelliimage/test.androidintelliimage.animation.Transition3d}: pid=1080
 
INFO/jdwp(1080): prepping for JDWP over ADB
 
INFO/jdwp(1080): PID sent as '0438' to ADB
 
INFO/jdwp(1080): trying to receive file descriptor from ADB
Parsed in 0.044 seconds,  using GeSHi 1.0.8.4

Following is the piece of code I am using
-------------------------------------------------------------

Syntax: [ Download ] [ Hide ]

Using java Syntax Highlighting

public boolean onTouchEvent(MotionEvent event) {
 
                int action = event.getAction();
 
                mCurDown = action == MotionEvent.ACTION_DOWN ;
 
                mCurUp = action == MotionEvent.ACTION_UP;
 
                float x1,y1,x2,y2;
 
                x1=y1=x2=y2=0F;
 
                newCanvas = new Canvas();
 
                if(mCurDown){
 
                        x1 = event.getX();
 
                        y1 = event.getY();
 
                }
 
                if(mCurUp){
 
                        x1 = event.getX();
 
                        y1 = event.getY();
 
                }
 
                Log.i("x1",String.valueOf(x1));
 
                Log.i("y1",String.valueOf(y1));
 
                Log.i("s2",String.valueOf(x2));
 
                Log.i("y2",String.valueOf(y2));
 
                Log.i("Planing Canvas Drawing ",newCanvas.getClass().getName());
 
                Log.i("Draw Canvas...","");
 
                mImageView.setDrawingCacheEnabled(true);
 
                Bitmap bitmap = mImageView.getDrawingCache();
 
                //newCanvas.setDevice(bitmap);
 
                newCanvas.drawRect(x1, y1, x2, y2, mPaint);
 
                mImageView.draw(newCanvas);              
 
                return true;
 
        }
Parsed in 0.035 seconds,  using GeSHi 1.0.8.4

plusminus · by **plusminus** » Fri Feb 22, 2008 1:02 pm

Hello vishalmk,

you error seems to be a native error. Probably with drawing to canvas.
Try uncommenting every line that does sth. with a canvas and check if it runs then.

Regards,
plusminus

vishalmk · by **vishalmk** » Fri Feb 22, 2008 2:32 pm

Thanks for replying..

And true the problem is with canvas - but then how do I draw over an image in my screen and the store information regarding that area.. I actually want to tag an area on the image

Regards,
Vishal

res · by **res** » Fri Feb 22, 2008 5:29 pm

Syntax: [ Download ] [ Hide ]

Using java Syntax Highlighting

 
newCanvas.drawRect(x1, y1, x2, y2, mPaint);
 
mImageView.draw(newCanvas);  
 
Parsed in 0.033 seconds,  using GeSHi 1.0.8.4

Have you setup your canvas object so you can access it outside the native draw method? I would suggest keeping your drawing to the draw method, simply update the co-ordinates in your touch event and maybe set a boolean to true so your image is drawn only after a specific touch event occurred.

edit: I just re-read your code and notice you are setting up a new canvas object. I would be careful trying to create a new canvas outside the onDraw method because the canvas you create and the canvas called by onDraw may be different so you might get some weird symptoms.

res · by **res** » Fri Feb 22, 2008 5:41 pm

This is what I would do

Declare the variables for class use

Syntax: [ Download ] [ Hide ]

Using java Syntax Highlighting

 
float x1 = 0;
 
float x2 = 0;
 
float y1 = 0;
 
float y2 = 0;
 
Parsed in 0.034 seconds,  using GeSHi 1.0.8.4

Syntax: [ Download ] [ Hide ]

Using java Syntax Highlighting

 
public boolean onTouchEvent(MotionEvent event) {
 
          int action = event.getAction();
 
          mCurDown = action == MotionEvent.ACTION_DOWN ;
 
          mCurUp = action == MotionEvent.ACTION_UP;
 
          if(mCurDown){
 
               x1 = event.getX();
 
               y1 = event.getY();
 
          }
 
          if(mCurUp){
 
               x1 = event.getX();
 
               y1 = event.getY();
 
          }
 
          Log.i("x1",String.valueOf(x1));
 
          Log.i("y1",String.valueOf(y1));
 
          Log.i("s2",String.valueOf(x2));
 
          Log.i("y2",String.valueOf(y2));
 
          Log.i("Planing Canvas Drawing ",newCanvas.getClass().getName());
 
          Log.i("Draw Canvas...","");
 
          return true;
 
        }
 
Parsed in 0.039 seconds,  using GeSHi 1.0.8.4

I presume you are using a View so this would be in onDraw()

Syntax: [ Download ] [ Hide ]

Using java Syntax Highlighting

 
protected void onDraw(Canvas canvas)
 
{
 
    ..... do whatever other drawing you require
 
    mImageView.setDrawingCacheEnabled(true);
 
    Bitmap bitmap = mImageView.getDrawingCache();
 
    if (x1 > 0 || x2 > 0 || y1 > 0 || y2 > 0)
 
        canvas.drawRect(x1, y1, x2, y2, mPaint);
 
    mImageView.draw(canvas);     
 
}
 
Parsed in 0.036 seconds,  using GeSHi 1.0.8.4

Use onTouchEvent and onKeyDown to update variables but leave all the drawing to be done in onDraw and any methods it may call.

plusminus · by **plusminus** » Fri Feb 22, 2008 9:38 pm

Yes res, that should work.

vishalmk · by **vishalmk** » Mon Feb 25, 2008 7:28 am

I appreciate your suggestions.Thanks!
I wish to elaborate more on this.

Following is the class i modified my class to.. But there are two things that happen now:

1) My Image is gone and is replaced by a blank black screen. (If I remove the ondraw(canvas) method from this class - I am able to see the image on the screen).
2)Doing this I am able to get the XY coordiates on mouse down and up click(can see them in my logs)- but not able to see anything(Rectangle in my case) getting drawn on the screen (might be because of the blank screen)..

I am in a learning mode of this but getting somewhat lost here.

Syntax: [ Download ] [ Hide ]

Using java Syntax Highlighting

public class MyView extends ImageView {
 
     public MyView(Context c) {
 
            super(c);
 
            mPaint = new Paint();
 
            mPaint.setAntiAlias(true);
 
            mPaint.setARGB(255, 255, 255, 255);
 
        }
 
        private final Paint mPaint;
 
        private boolean mCurDown, mCurUp;
 
        float x1=0F,y1=0F,x2=0F,y2=0F;
 
      public boolean onTouchEvent(MotionEvent event) {
 
                int action = event.getAction();
 
                mCurDown = action == MotionEvent.ACTION_DOWN ;
 
                mCurUp = action == MotionEvent.ACTION_UP;
 
                if(mCurDown){
 
                        if(!(x1 > 0) && !(y1 > 0)){
 
                                x1 = event.getX();
 
                                y1 = event.getY();
 
                        }
 
                }
 
                if(mCurUp){
 
                        if(!(x2 > 0) && !(y2 > 0)){
 
                                x2 = event.getX();
 
                                y2 = event.getY();
 
                        }
 
                }
 
                Log.i("x1",String.valueOf(x1));
 
                Log.i("y1",String.valueOf(y1));
 
                Log.i("x2",String.valueOf(x2));
 
                Log.i("y2",String.valueOf(y2));
 
                Log.i("Draw Canvas...","Draw Canvas...");
 
        return true;
 
        }
 
        protected void onDraw(Canvas canvas) 
 
        { 
 
            mImageView.setImageResource(resID);
 
            mImageView.setDrawingCacheEnabled(true); 
 
            Bitmap bitmap = mImageView.getDrawingCache(); 
 
            Log.i("Bitmap = ",String.valueOf(bitmap));
 
            if (bitmap != null) {
 
                    if (x1 > 0 || x2 > 0 || y1 > 0 || y2 > 0) 
 
                        canvas.drawRect(x1, y1, x2, y2, mPaint);
 
                    mImageView.draw(canvas);
 
            }
 
        }       
 
   }  
 
Parsed in 0.042 seconds,  using GeSHi 1.0.8.4

Please pass on any more knowledge/information you can share on this. Thank you - Vishal

plusminus · by **plusminus** » Mon Feb 25, 2008 10:11 am

Hello vishalmk,

what is the purpose of the ImageView :?:

You can create a BitMap directly from the Resources:

Syntax: [ Download ] [ Hide ]

Using java Syntax Highlighting

     protected void onDraw(Canvas canvas){
          if (x1 > 0 || x2 > 0 || y1 > 0 || y2 > 0){
               // What is this supposed to do ? Clear the background ???
               canvas.drawRect(x1, y1, x2, y2, mPaint);
 
               // Load the bitmap in Constructor for performance reasons!
               Bitmap bm = BitmapFactory.decodeResource(c.getResources(), resID); 
               canvas.drawBitmap(bm, left, top, mPaint); // Maybe choose another paint here
          }
     }
Parsed in 0.037 seconds,  using GeSHi 1.0.8.4

to obtain the Resource, you need to save the Context-Reference that is passed to your constructor.

Regards,
plusminus

vishalmk · by **vishalmk** » Mon Feb 25, 2008 11:31 am

I want to tag some area in an image/photo and store the coordinates, so that when I open a photograph/image next time, I can click in that area and start a new activity...

I am using ImageView to show image in the screen using something like this.
protected void onCreate(Bundle icicle) {
super.onCreate(icicle);
mImageView = new MyView(this);
setContentView(mImageView);
//mImageView.setImageResource(resID);
}