We are developing image mapping for education.
The teacher can add question with image.
The schema answer is based on the image touched selection by the teacher.
For example;
Which are the area represent district that having gold.
then the teacher can choose the correct answer(B and E district) by pressing the schema answer at picture
The question are
As a teacher how to do the schema answer with touching the image and what value to store into database
As a student how student can press the correct answer
Anyone can suggest or help me?
I'm newbie in android..
Thanks!
You should use two different image. First image is original image. Second image is "map" image. Map image contains zones of different colors. "Map" image must be saved to file with lossless compression (i.e. png).
Original image shows in ImageView. "Map" image must be decoded to Bitmap.
final ImageView imageView = ...; //TODO: bind imageView
imageView.setImageResource(R.drawable.original_image);
final Bitmap map = ...; //TODO: load map bitmap
imageView.setOnTouchListener((v, event) -> {
final int x = event.getX();
final int y = event.getY();
final float scale = ...//TODO calc image scale;
final int realX = (int) (x * scale);
final int realY = (int) (y * scale);
final int color = map.getPixel(realX, realY);
if (color == Color.RED) {
//Correct answer!
} else {
//something else
}
});
Sorry for my english.
Related
Here the link of GitHub Code https://github.com/thanhniencung/LuckyWheel
I try to change the rotation of canvas using this piece of code
private void drawText(Canvas canvas, float tmpAngle, float sweepAngle, String mStr) {
Path path = new Path();
path.addArc(mRange,tmpAngle,sweepAngle);
float textWidth = mTextPaint.measureText(mStr);
int hOffset = (int) (mRadius * Math.PI / mLuckyItemList.size()/2-textWidth/2);
int vOffset = mRadius/2/4;
canvas.drawTextOnPath(mStr, path, hOffset, vOffset, mTextPaint);
}
I want to change orientation of text like picture shown below
In the latest version of the LuckyWheel, when initialising LuckyItems data, you can set the values for luckyItem.secondaryText instead of luckyItem.topText, and you will have the wanted text orientation.
Like this:
List<LuckyItem> data = new ArrayList<>();
for (int i = 0; i < sectorsTitles.length; i++) {
LuckyItem luckyItem = new LuckyItem();
// luckyItem.topText = sectorsTitles[i]; // Don't use this
luckyItem.secondaryText = sectorsTitles[i]; // Use this instead
luckyItem.color = Color.parseColor(ROULETTE_COLORS[i]);
data.add(luckyItem);
}
luckyWheelView.setData(data);
In XML code you can change the rotation by using
android:rotation="120" (Then any angle you want positive or negative)
But, you may need to rotate this image when it is in the bottom and then rotate it again when it is in the top. So you can rotate it programatically whenever you want.
TextView textView = findViewById(R.id.textView);
ImageView imageView = findViewById(R.id.imageView);
textView.setRotation(120);
imageView.setRotation(120);
And then if you want to comeback it latter to the position it was in the beginning. You just add the negative sign.
textView.setRotation(-120);
imageView.setRotation(-120);
Of course, the angle is up to you.
Am creating a document scanning application in android, am using OpenCV and Scan library in my project for cropping,I have created a rectangle using drawrect in camera view, now I need to capture the images inside that rectangle portion only and display it in another activity.
The image in question:
For me , I will take whole image, then crop.
Your question : "how do I know which part of the image is inside the rectangular portion, then only I can pass it nah, hope u understood". My answer is you can using relativity scaling of whole image dimension and camera display screen dimension. Then you will know which part of rectangular to be cropped.
This is the code example.
Note that you need to fill some codes to make it can save file into jpg, and save it after cropped.
// 1. Save your bitmap to file
public class MyPictureCallback implements Camera.PictureCallback {
#Override
public void onPictureTaken(byte[] data, Camera camera) {
try {
//mPictureFile is a file to save the captured image
FileOutputStream fos = new FileOutputStream(mPictureFile);
fos.write(data);
fos.close();
} catch (FileNotFoundException e) {
Log.d(TAG, "File not found: " + e.getMessage());
}
}
}
// Somewhere in your code
// 2.1 Load bitmap from your .jpg file
Bitmap bitmap = BitmapFactory.decodeFile(path+"/mPictureFile_name.jpg");
// 2.2 Rotate the bitmap to be the same as display, if need.
... Add some bitmap rotate code
// 2.3 Size of rotated bitmap
int bitWidth = bitmap.getWidth();
int bitHeight = bitmap.getHeight();
// 3. Size of camera preview on screen
int preWidth = preview.getWidth();
int preHeight = preview.getHeight();
// 4. Scale it.
// Assume you draw Rect as "canvas.drawRect(60, 50, 210, 297, paint);" command
int startx = 60 * bitWidth / preWidth;
int starty = 50 * bitHeight / preHeight;
int endx = 210 * bitWidth / preWidth;
int endy = 297 * bitHeight / preHeight;
// 5. Crop image
Bitmap blueArea = Bitmap.createBitmap(bitmap, startx, starty, endx, endy);
// 6. Save Crop bitmap to file
This will work for you: How to programmatically take a screenshot in Android?
Make sure that the view (v1 in the code sample's case) passed in Bitmap.createBitmap(v1.getDrawingCache()) is a viewgroup that contains the image you want ot send to the second activity
Edit:
I don't think your intended flow is feasible. As far as I know, camera intents don't take arguments allowing to draw such a rectangle (I could be wrong though).
Instead, I suggest you take a picture, and then edit it with a library such as this one (https://github.com/ArthurHub/Android-Image-Cropper) or programatically as suggested above.
I have a code that can only give hex code on touch pixel on image.
Now I want to give the name of the color as well.
How is this possible using Android?? Please suggest a way.
public boolean onTouch(View v, MotionEvent event) {
// get x coordinates
int x = (int) event.getX();
// get y coordinates
int y = (int) event.getY();
// get bitmap in touch listener
final Bitmap bitmap = ((BitmapDrawable) image.getDrawable()).getBitmap();
//xand y coordinates stored in to pixel
int pixel = bitmap.getPixel(x, y);
//RGB values
redValue = Color.red(pixel);
blueValue = Color.blue(pixel);
greenValue = Color.green(pixel);
selected_colour.setText(""+redValue+""+blueValue+""+greenValue);
selected_colour.setText("touched color:" + "#" + Integer.toHexString(redValue) + Integer.toHexString(greenValue) + Integer.toHexString(blueValue));
selected_colour.setTextColor(pixel);
return false;
}
});
What you're asking for is a bit tricky, because although there are many colours whose names are widely agreed upon (for instance, FFFFFF is called "White" everywhere), most other colour names are not a global convention but rather developed by the specific people who are naming the colours.
That being said, there are several tools out there which can do this. Check out this link, it's a website which you can provide a colour in hex code, and it will name it according to the closest pre-defined list of colour names.
You can view the javascript code and adapt it to Android. It's a pretty straight-forward algorithm which measures the distance of the colour you gave to the closest hit in a predefined colour list, by measuring the distance in RGB and HSL.
I am selecting some area of image in displayed imageview. Then i do some work on selected pixels of that bitmap which is displayed in imageview. But i am not able to hit those pixel which user selected. I know i have to do some pixel mapping of displayed image and actual bitmap. See images for better understanding of my problem.
User select some pixel using circular selector
After processing affected pixels are different not those which user selected
I have tried some thing like this to get accurate pixels
Bitmap image = EyeColorChangerActivity.getImageBitmap();
int displayedwidht = image.getWidth();
int displayedheight = image.getHeight();
x = x*((float)displayedwidht/mScreenWidth);
y = y*((float)displayedheight/mScreenHeight);
Set OnTouchListener on your ImageView.
Inside onTouch method of OnTouchListener use the following code to get the selected bitmap pixel.
#Override
public boolean onTouch(View arg0, MotionEvent arg1) {
int x = (int) arg1.getX();
int y = (int)arg1.getY();
int pixel = mBitmap.getPixel(x, y);
// process new color for selected pixel.
....
//set new color to bitmap pixel
return false;
}
My activity has a background image 1280x800 pixels. I set it using android:scaleType="centerCrop".
There's a flagstaff depicted on a background image and I need to position another image ("flag") above the flagstaff.
If device's screen dimension was exactly 1280x800, then "flag"'s position would be (850, 520). But screen size can vary and Android scales and shifts the background image accordingly to centerCrop flag. Hence I need to assign somehow scale and shift to "flag" image to make it placed nicely above the flagstaff.
I have examined ImageView.java and found that scaleType is used to set a private Matrix mDrawMatrix. But I have no read access to this field as it's private.
So, given
#Override
public void onGlobalLayout()
{
ImageView bg = ...;
ImageView flag = ...;
int bgImageWidth = 1280;
int bgImageHeight = 800;
int flagPosX = 850;
int flagPosY = 520;
// What should I do here to place flag nicely?
}
You can see the size of the screen (context.getResources().getDisplayMetrics().widthPixels, context.getResources().getDisplayMetrics().heightPixels;) and calculate what is visible from the image, for example you could do something like this (haven't really tested it but you should get the idea):
private void placeFlag(Context context) {
ImageView bg = new ImageView(context);
ImageView flag = new ImageView(context);
int bgImageWidth = 1280;
int bgImageHeight = 800;
int flagPosX = 850;
int flagPosY = 520;
int screenWidth = context.getResources().getDisplayMetrics().widthPixels;
int screenHeight = context.getResources().getDisplayMetrics().heightPixels;
//calculate the proportions between the width of the bg and the screen
double widthScale = (double) bgImageWidth / (double) screenWidth;
double heightScale = (double) bgImageHeight / (double) screenHeight;
//see the real scale used, it will be the maximum between the 2 values because you are using crop
double realScale = Math.max(widthScale, heightScale);
//calculate the position for the flag
int flagRealX = (int) (flagPosX * realScale);
int flagRealY = (int) (flagPosY * realScale);
}
Also, you should be doing that in the method onGlobalLayout, you could do this in onCreate() or inside the constructor if you want a custom view.
you can use a LayerDrawable approach here to make one drawable image in it's static (In which you can set background image and icon on top of background image in custom_drawable.xml and can use that file as single drawable in activity).For reference go to android developer. Otherwise
For scale issue according to different device resolution put images in different drawable folder and can also design layout different .