2

enter image description here

hi all, I have this image and I wanna to draw line "the path" between the two point.

what i'm tried:

is draw the path , using main point which is save in database. "x,y for the point" and draw line between multi-points until arrive the end point. like in image number 2 enter image description here

what i'm thinking about is if I divide the image to square grid for example 15*15 ,and give each square x,y,tag where tag can be 0,1 which mean wall or any thing 0 can't walk throw it 1 u can. and create the bath dynamically.

that are all the idea that i have for now :) if there is anyother way i don't know it. plz help me :)

Update :

-The user can zoom in/out. -what i'm trying to do is something like this

7 Answers 7

3

You could modify the Bitmap directly or you could put a SurfaceView on top of the bitmap and draw on the SurfaceView. All you would have to do in this scenario is draw your lines in the onDraw method of the SurfaceView.

I draw a lot of lines in my Turtle Draw app... here is how I extend SurfaceView

public class DrawView extends SurfaceView {

    Paint paint = new Paint();

    List < float[] > lines = new ArrayList < float[] > ();
    List < Integer > colors = new ArrayList < Integer > ();
    int curColor = Color.WHITE;
    int bgColor = Color.BLACK;

    Bitmap mBitmap;

    ImageView turtle;

    float curX, curY, curTurn = 0f;

    Matrix transform = new Matrix();

    public DrawView(Context context, AttributeSet attrs) {
        super(context, attrs);
        mBitmap = getBitmapFromDrawable(context);
        paint.setColor(Color.BLACK);
        paint.setStrokeWidth(DpiUtils.getPxFromDpi(getContext(), 2));
        setScrollContainer(true);
        // clear();
    }

    public DrawView(Context context) {
        super(context);

    }

    public void addLine(float...l) {
        synchronized(lines) {
            lines.add(l);
            colors.add(curColor);
        }
    }

    public List < float[] > getLines() {
        return lines;
    }

    public List < Integer > getColors() {
        return colors;
    }

    @Override
    public void onDraw(final Canvas canvas) {

        synchronized(lines) {
            super.onDraw(canvas);
            int i = 0;
            for (float[] l: lines) {
                paint.setAntiAlias(true);
                paint.setColor(colors.get(i++));
                canvas.drawLines(l, paint);
                curX = l[2];
                curY = l[3];
            }

            transform.setTranslate(curX - 13, curY - 13);
            transform.preRotate(360 - curTurn, 13, 13);

            paint.setColor(Color.BLACK);
            canvas.drawBitmap(mBitmap, transform, paint);
        }
    }

    public void setTurn(float turn) {
        this.curTurn = turn;
    }

    public void clear() {
        lines.clear();
        colors.clear();
        DisplayMetrics metrics = DpiUtils.getDisplayMetrics(getContext());

        curX = metrics.widthPixels / 2f;
        curY = (metrics.heightPixels / 2f) - DpiUtils.getPxFromDpi(getContext(), 50);
        curTurn = 0;

        scrollTo(0, 0);
    }

    public static Bitmap getBitmapFromAsset(Context context, String strName) {
        AssetManager assetManager = context.getAssets();

        InputStream istr;
        Bitmap bitmap = null;
        try {
            istr = assetManager.open(strName);
            bitmap = BitmapFactory.decodeStream(istr);
        } catch (IOException e) {
            return null;
        }

        return bitmap;
    }

    public static Bitmap getBitmapFromDrawable(Context context) {
        Bitmap icon = BitmapFactory.decodeResource(context.getResources(), R.drawable.turtle_26);
        return icon;
    }

    public void setDrawColor(int color) {
        paint.setColor(color);
        curColor = color;
    }

    public int getDrawColor() {
        return curColor;
    }

    int x, y = 0;
    int scrollByX, scrollByY = 0;

    @Override
    public boolean onTouchEvent(MotionEvent event) {

        int action = (event.getAction() & MotionEvent.ACTION_MASK);

        if (action == MotionEvent.ACTION_DOWN) {
            x = (int) event.getX() + scrollByX;
            y = (int) event.getY() + scrollByY;
        } else if (action == MotionEvent.ACTION_MOVE) {
            scrollByX = x - (int) event.getX();
            scrollByY = y - (int) event.getY();
            scrollTo(scrollByX, scrollByY);
        }

        return true;
    }

    @Override
    public void scrollTo(int x, int y) {
        // TODO Auto-generated method stub
        super.scrollTo(x, y);
        scrollByX = x;
        scrollByY = y;
    }

    @Override
    public void setBackgroundColor(int color) {
        // TODO Auto-generated method stub
        super.setBackgroundColor(color);
        bgColor = color;
    }

    public int getBackgroundColor() {
        return bgColor;
    }

}
1
  • 1
    what happened if the user start zoom in/out ? and can u give me the sample code if there is one , because it dose not work with me :(
    – Omarj
    Oct 7, 2013 at 15:06
2

You can make use of the Path class. Good luck!

2

If I understand well, your main problem is not do draw lines over an image. You are searching for WHICH PATH to take in a given map, dinamically. Is this correct?

Well, if this is the case, you are looking for the A* search algorithm. It's a well known method for path finding, and very common in games and other applications that need this kind of AI.

You can develop your own implementation of this algorithm, fitted to your needs, or you can try to use an API from 3rd party.

Here's one you can use from google code. It's simple java and apache license, so it can be used in your android app.

But wait, I took a brief look at github too and it seems there's a lot more different implementations of this ready to use!

Search web and you will also find a lot of articles, tutorials, papers...

Good luck!

EDIT

As you explained in comments below, your main problem is to dinamically process a "map" to find "walls" so that you can apply A* search, and then, finally, draw lines above all that.

Well, to proccess images dinamically you will need some 3rd party library to do so, there are many out there, but probably the better solution is to use OpenCV. It's compatible with android, has a good documentation and many articles about it. Here's a tutorial with an example for finding "lines" in an image. This can be applied to your maps as well. Probably you will need to adjust the threshold until you detect only the thicker lines of the walls.

2
  • thx. but i'm already now that :) but the problem when i'm trying to apply A* find-path "dinamically" i need to know all obstacle location or do som image processing stuff which is hard for floor image like the one i attached unless u have a good idea ??
    – Omarj
    Oct 23, 2013 at 17:58
  • OK! Well, I'll edit my answer. But next time, keep in mind that more precise questions will lead to better solutions... ;)
    – PFROLIM
    Oct 23, 2013 at 20:25
2

You can use Dijkstra's_algorithm to find the shortest path.

enter image description here

There are more efficient ways to do this like A* algorithm, but I think Dijkstra's is most easy to implement.

1
  • that what i'm trying to do :) do u have any idea how to build it in my case ?
    – Omarj
    Nov 1, 2013 at 22:09
0

try to search for a white colored pixels in your image (it would be your path you can walk throw)

0

My answer assumes that you are attempting to calculate the easiest path for someone to travel from the black circle to the red circle. Disregard this answer if you are only looking for help with the actual painting of lines. I am also assuming that you can define all points of intersection ahead of time. If you need to derive them programmatically from the picture you should probably start with a new question.

I would start with the (x,y) points that you are suggesting but leave off the tag value. Then I would add connections between those points as a related object that adds more detail than your tag value. Each Point would have a set of Connections to other neighboring Points. On each connection I would put a bunch of attributes to use in your calculation, such as distance, obstacles and any other enhancements such as privileges. Distance would be easy (hint: use Pythagorean Theorem). Obstacles may include doors, steps, elevators, etc. Privileges may include restricted access areas (that diagonal corridor near the top of your diagram looks restricted).

Looks like at the black starting point you can go east or west. That would be two different paths. The first point to the east would offer four choices: go through the door to the north, the door to the south, continue east or head back west. The west option would lead back to the original point at which the path can be disregarded as a loop. The option to the south would only return back to this point where it can be disregarded as a loop. The option to the north is interesting because it should continue through the diagonal corridor and eventually offer a path to the destination although obviously not the best path. The option to the east will continue on and eventually return several options. When a path reaches the destination it notes a positive response and the difficulty in getting there based on the Connections traversed (distance, obstacles and privileges).

Implementing this would then involve introducing a Path that includes the list of Points traversed as well as the accumulated difficulty of each Connection along those points. Starting at the origin I would try to write something that branches out one step in all directions rather than trying to traverse every path fully. Add to the accumulated difficulty with each step. If the point is the destination then you have a successful path (although it might not be the most efficient path). If the point is already in the path, then it is a loop, so stop traversing that path. If the accumulated difficulty of the path is greater than another one that has already been found, then stop traversing that path.

0

I don't think this is possible without using OpenGL (and letting it do the job of converting the X/Y position of your lines to the actual X/Y position on the screen).

In OpenGL you would render the floorplan image in a 2D plane. You would need to precalculate the world space positions (x,y,z) of each intersection point between which you would draw the lines, and create a collection where each position has an array of the other positions it can connect to. Then you would need to perform the (recursive) logic to determine what points are between the start and end points and draw 2D lines between each one.

So, it's very possible, but the need to pan and zoom pretty much obviates the need for a camera, which is where OpenGL comes in.

Panning and zooming would be handled by moving the camera around, while keeping it within predefined bounds, so that (based on the FOV chosen) it would not display (too much) beyond the edge of the image.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.