Clickable areas at image - java

I am trying to implement this for so many days. I have read every single post here but I cannot get it done. Everything thas was suggested using methods such as getIntrisicHeight() doesn't seem to work as I want on every screen that I try it. So I am thinking o a solution like this: https://stackoverflow.com/a/4942812/1113997. The problem is that I don't understand many points of that answer:
Can anyone give me an example of the xml file?
What should I check after the return? I mean I will have something like a map and have several areas colored with different colors (in my invisible image,right?) and then if I press the area with the red colour do something, if the green one do something else.
Can anyone complete the answer by giving an example of the code?
How do I know that the same red I draw my image on paint for example, will be the same that it will be compared?
Code form the link:
private int getColour(int x, int y) {
ImageView img=(ImageView)findViewById(R.id.img2);
img.setDrawingCacheEnabled(true);
Bitmap hotspots=Bitmap.createBitmap(img.getDrawingCache());
img.setDrawingCacheEnabled(false);
return hotspots.getPixel(x, y);
}

Here is a general solution to the image map for Android: http://catchthecows.com/?p=113
I haven't tried it myself, though it appears promising imho

Related

How to draw curved text in Android

I'm trying to build a text editing app that allows the user to edit text using different fonts, colors, sizes, rotations, etc. I'm working on a feature that is supposed to curve the text but I've got no clue how to do it. I found this StackOverflow post HERE and searching through the comments, I found this post HERE but for what I'm trying to achieve, that is how I want it to end up. What I want it to do is start as a normal line of text and then based on the value of a seekbar I want it to curve, until it reaches the MAX value at which point it's in a circle (as seen in the second link). If you can help me figure out how to do this I would really appreciate it. I figure it's going to use path.addArc or something like that but I'm not sure.
Thank you
PS
I'll post the images below just in case you don't want to go look at the links
You can draw your circle text in your custom view, use canvas function drawTextOnPath(String text,Path path, float hOffset, float vOffset,Paint paint), and then construct the path by yourself requirement.

libgdx- padding didn't solve black lines on tilemap

I read all the million posts about the problem with black lines shown on screen when rendering tilemaps on libgdx. All the solutions talk about add padding to the tile sets. So I did it, but it didn't solved the problem.
I think maybe I didn't understand it well, so I will post here the process I'm doing, and I will be glad if someone can point out my mistake, if any:
This is an image of my initial tile set:
This is an image of my tile set after adding padding using GIMP plugin which was suggested from this post:
Then in Tiled, I add this tileset and set Margin to 1px and Spacing to 2px like written in this post.
Now as I understand the problem should be solved, but still when I run the program I get:
I can add code parts if you want, but there is really nothing special the way I render my map- just load it with TmxMapLoader and render with MapRenderer (using camera also, of course, otherwise the problem wouldn't appear).
I know this thread is very old, but it took me two hours to figure out the solution myself. So in case somebody has the same problem in the future:
I noticed that only some tiles behaved like this - for example, a grass tile would, a water tile wouldn't. Even if they were used on the exact same position in the map.
For me the problem was - apparently - that my PNG tile sheet's height was not a power of 2. A few days before, I added a line to an existing tilesheet and changed the height from 1024px to 1056px. After a lot of experimenting, I found out that after removing this line again, the black stripes would disappear.
Load your maps like this:
TmxMapLoader.Parameters() params = new TmxMapLoader.Parameters();
params.generateMipMaps = true;
TmxMapLoader mapLoader = new TmxMapLoader();
TiledMap map = mapLoader.load("pathToMap", params);
I had the same problem I fixed it by changing the size of my spritesheet to a power of two
example :
640*640 --> wrong
512*512 --> right

How to identify an specif 'thing' in an image (Image Processing)

I'll start saying what I'm doing:
I'll take a photo with a webcam, in this photo there will be an object, always the same object, in a square format with letters inside it. I need to identify those letters. The step of identifying those letters is already done, the problem is the quality of the image coming from the webcam: it won't be the best nor in the best positioning, and the api I'm using to identify those letters requires positioning and quality.
The reason why I have a square is to help to identify where those letters are, so I can 'look for an square' in the image an then do what I've already done to identify the letters. My question is: is there more things I have to do in order to achieve this? Os is it only 're positioning the image, look for the square and then it's done'. If I need to study image processing there is no problem, I'm here because I don't even know what I have to look for.
I'm developing in Java because 'school things', so if there's already and api (I've heard and tried OpenCV, but I don't know what to do with it) it would really help me.
Thanks in advance.
Edit 1: As asked by Springfield762, I took some photos and I'll explain them below.
First let me explain what are the photos: the 'square thing' that will contain the letters isn't done yet, another department is taking care of it, so I had to improvise something here with pens and batteries. The letters will all be made of wood in a nice shape, I had to replace them with some Magicka cards as I don't have them yet, but the cards fits well to explain the example. I also made an example of the the square (that actually ended as an rectangle) in paint, so it has absolutely nothing of beautiful.
I took 3 photos, one using the light coming from the window, the second using the light of my room and the third using the flash of the webcam. (Sorry about links, I can't post images nor links, although I'm always here, this is the first time I post a question...)
Window light:
Room light:
Flash:
Square (rectangle) example:
The 'project' of the square you guys can ignore, I did it so that you can understand the images. And the reason I took 3 different photos was just to show all different possibilities that the webcam might be in. Also, the quality of the Magicka cards isn't a problem, since each card represents one letter, so it'll be easy to 'see' them.
Well, I found most answers to this question, I'll explain them below.
First it's not a square, but a rectangle, and it is still to be made. So I started testing the software using anything that was a rectangle, first I had to 'locate' the rectangle in the frame captured by the camera, then show it in the original image seen by the user, I accomplished that by:
Capturing the actual frame
Converting that frame to HSV;
Applying some kind of threshold (using the Core.inRange function, so that I could find a specific color in the range specified in the function);
Applying the Imgproc.findContours to find the contours of the rectangle;
Finally drawing a rectangle using the points found by the findContours;
How it ended: i.imgur.com/wmNVai0.jpg
After that I knew that I could place the rectangle in a way that all the letters inside it would be in a straight line, so I didn't need to care about the positioning of the letters. Now I had to fight with the OCR.
I chose Tesseract as it is OpenSource and seems to be a strong tool (supported by Google, that's for sure something), then I started to test some images.
In the beginning it was tough and I thought I'd have to train OCR even more, but the thing is that it has some kind of dictionary that tries to find words which are listed in this dictionary, and I didn't need that as I was looking for characters that could be in a total random way. I had to turn off that dictionary by adding the following line to a conf file:
load_system_dawg F
load_freq_dawg F
After that I had to change somethings in the image as well:
Transform into Grayscale;
Resize it by ~80%;
Original images (I can't post links...):
i.imgur.com/DFqNSYB.jpg
i.imgur.com/2Ntfqy3.jpg
Grayscale:
imgur.com/XUZ9b1Z.jpg
i.imgur.com/yjXMH5Q.jpg
Resized:
i.imgur.com/zgX9bKF.jpg
i.imgur.com/CWPRU3I.jpg
(Sometimes I had problems with resized images and on other moments I didn't, that's something I have to test even more.)
Then I could get some good results, though I'm still afraid as the light of the environment makes a whole difference, I still have to test it and mainly I still need the god da** base, I'll post it as an edit later.
If I did anything wrong or if anyone wants to correct me, please feel free to say it!

Inconsistency between px and dp in android

OK, so here's a wobbly one... Before asking my question, I'll point out that I have read this:
What is the difference between "px", "dp", "dip" and "sp" on Android?
So here's my problem, I have some squares on screen (EditText) which I define in my XML using dp units, and identifying them square1, square2 etc., and they are positioned in a FrameLayout (since absolute layout is deprecated and that I don't see any other layout that would suit my purposes;
I want to control the position of the squares on screen by programming, soI use
square1.setX(cc1x);
square1.setY(cc1y);
square2.setX(cc2x);
square2.setY(cc2y);
and so on, and where cc1x, cc1y, cc2x, cc2y are int variables that change according to the logic of the app. The problem is that the java syntax doesn't allow adding a unit to this integer value of the variables, so on some screens my app works just perfectly, but on screens with a different density, everything is either too far apart, either overlapping...
And finally the question(s):
Is there a way of "forcing" the units into the setX / setY statements?
or
Is there a way to get the density of the screen of the device where my app will run? (in which case I could recalculate the X/Y coordinates accordingly)
(I didn't do research on this second possibility yet, as I just thought of it whilst writing this, so please accept my apologies if it is a duplicate of some other question).
Thanks in advance for your thoughts.
You can add this method to easily convert between DP on the screen and PX of the device
public static float convertDpToPx(Context context, int dp) {
return TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, dp, context.getResources().getDisplayMetrics());
}
I wanted to update on this thread, since I've found a far better solution to the problem, though the answers you guys (& girls?) really did teach me a lot, for which my gratitude. Finally, njzk2's answer has made me reconsider the whole approach to what I wanted to do. So, instead of moving my boxes around, which resulted in the dimensioning problems, now I just move the content of the boxes around, leaving the boxes nicely positioned in place, which is by far more easy. Anyway, I hope this will result usefull to other starters like me.

Could someone please explain the Matrix (Mr.Anderson)?

I'm pretty new to manually manipulating images, so please bear with me.
I have an image that I'm allowing the user to shrink/grow and move around.
The basic behavior works perfectly. However, I need to be able to grab whatever is in the "viewport" (visible clipping region rectangle) and save it out as a separate bitmap.
Before I can do this, I need to get a fix on WHERE the image actually is and what is being displayed. This is proving more tricky than I would have imagined.
My problem is that the Matrix documentation is absurdly vague, and I'm lost as to how I can measure the coordinates and dimensions of my transformed image. As I see it, the X,Y of the image remain constant even as the user shrinks/grows it. So, even though it reports at being at 0,0 it's displayed at (say) 100,100. And the only way I can get those coordinates is to do a fairly ugly computation (again... I'm probably not doing it the most elegant way, since geometry is not my forte).
I'm kind of hoping that I'm missing something and that there's some way to pull the object's auto translated coordinates and dimensions.
in an ideal world I would be able to call (pseudo) myImg.getDisplayedWidth() and myImg.getDisplayedX().
Oh, and I should add that this may all be a problem that I'm causing myself by using the center of the image as the point from which to grow/shrink. If I left the default 0,0 coordinate as the non changing point, I think the location would be correct no matter what its size was. So... maybe the answer to all this is to simply figure out my center offset and apply that to my translations?
All help greatly appreciated (and people not arbitrarily messing with my question's title even more so!).
The Matrix method mapPoints(float[] dst, float[] src) can be used to get a series of translated points by applying the Matrix translation. Or in (slightly) more layman's terms, an instance of the Matrix class contains not only the translation instruction but also convenience methods to apply the Matrix translation to a series of points.
So in your case, you just need the corners of your untranslated Bitmap (x, y, width, height) and pass the corner points into that method to get the translated points.

Categories