Develop Reference

Textures with programmable color in Rajawali

All works great for me with Rajawali in Android, except textures.
I would like to programmatically load a transparent image as a texture, with a chessboard pattern where each black square is in fact fully transparent while each white square is just white.
I would like to use this as a texture over an object, that otherwise has diffuse and specular color properties that can be changed programmatically. So if the user has inputted the color blue, I would like the object to show a blue-white pattern.
How can I do that?
The rajawali tutorials do not really help, since for textures rajawali changed a lot in the last update. Also the Rajawali examples app does not really help, as they all seem to deal with environment maps.
What I tried was e.g.:
protected void initScene() {
objParser = new LoaderOBJ(mContext.getResources(), mTextureManager, R.raw.stdblock_obj);
try{
Texture jetTexture = new Texture("jetTexture", R.drawable.chessboardtexture);
mTextureManager.getInstance().addTexture(jetTexture);
semiglossMaterial.addTexture(jetTexture);
semiglossMaterial.setColorInfluence(0);
}catch(TextureException e){
e.printStackTrace();
}
}
The object is rendered, but without any texture. The chessboard image does have a size power-of-2, and it is located in the right folder R.raw.stdblock_obj. It is a jpg image, but I also tried png which didn't work either.
I also tried a different approach:
semiglossMaterial.enableLighting(true);
semiglossMaterial.setDiffuseMethod(new DiffuseMethod.Lambert());
phongMethod.setShininess(iShininess); semiglossMaterial.addTexture(new Texture("jetTexture",R.drawable.chessboardtexture));
semiglossMaterial.addTexture(new AlphaMapTexture("alphaMapTex", R.drawable.simpletexture3));
semiglossMaterial.setColorInfluence(0);
but also this did not work.
Anyone an idea?

You have to add that texture as a child, a child of the .obj file, if you don´t know how many child have your .obj and the name of them, use:
"your3DobjectName".numChildren(),
then use a simple
for(int i = 0; i < "your3DobjectName".numChildren(); i++)
{
String name = "your3DobjectName".getChildAt(i).name();
Log.d("rajawali", "Name: "+name);
}
At this way you will know how many childs and the name of your childs declared at your obj

Get the number of objects in the image from the edges drawn

I am trying to detect the number of blobs for example placed on a surface. What i have tried so far:
Converted image to grayscale
Applied threshold to the image
3, Obtained the edges
Drawn the edges using the mat (the image below)
I am using opencv for android in my case, and i need help in order to find the number of objects in the image. Could anyone please help me. I have tried filling the image using the code below but it doesnot help
for(int ii=0;ii<dst.rows();ii++) {
for(int j=0;j<dst.cols();j++) {
double checker = dst.get(ii, j)[0];
if(checker == 255) {
Imgproc.floodFill(dst, matMask,
new Point(j,ii), new Scalar(255),
null,new Scalar(255), new Scalar(255), 8);
}
}
}
EDIT:
The captured image on which processing has to be done:
the background might look like this
!
Or another possibility
Thanking you

Canvas draw : not able to render animation with runtime generated Bitmap images

Need a little help here : I'm out of ideas now...
Here's what I need to do :
Render "base" image [ it is created from an ARGB.8888 byte array ]
user clicks 2 points on the screen; I need to perform the the pixel manipulation on a region of pixels around the path taken from one point to another... [ I need to calculate a squre block of pixel for each pixel on the whole path ].
display the modification of the image as the code progresses in animation form.
I am able to display the whole path; I am able to calculate & manipulate the pixels properly .. But what I am unable to do is show the animation as my code is progressing on the path... with the current implementation I am able to display the whole calculated path at the end ...
public void onDraw(Canvas canvas){
canvas.drawColor(Color.WHITE);
Paint p = new Paint();
canvas.drawBitmap(base,0,0,p);
traverse clickEvent1.x -> clickEvent2.x
traverse for clickEvent1.Y -> clickEvent2.Y
{
newBitMap = calculateNewBitMap(base)
// I nee to redraw Canvas with (newBitMap)
// canvas.drawBitMap(newBitMap);
//Doesn't work
//postInvalidate();
//invalidate()
//AnimationDrawable.addFrame(newBitMap)
// I am not calling start here
//but just wanted to let you know that I do call animation start to display the frames stored in it
// animation.start();
}
// obviously wouldn't work here As it is already out of the loop
//invalidate();
}
Please NOTE :
The newBitMap image is generated at runtime, it would not be available to me beforehand...
I tried invalidate() in the loop as well ; but it would only draw the cumulative result after the whole loop has traversed and not the intermediate states of the newBitMaps.
Performance is of critical importance + I am dealing with HUGE image sizes .. so please keep that in mind as well ... if I create multiple bitmaps for temporary storing the JVM crashes due to "OutofMemory" ..
I tried storing the new Images in "AnimationDrawable" form as well; but tht's not solving the problem as well....
AnimationDrawable animDrawable = new AnimationDrawable();
Drawable frame1 = new BitmapDrawable(newCaclBitMap);
animDrawable.addFrame(frame1, 250);
Thanks for any pointers / suggestions ..

It seems like what you are doing is running all of your drawing logic in a single call to onDraw() when I think what you want is to have onDraw() called once for each frame of your animation.
So, instead of something like this in your trace:
onDraw()
drawFrame()
drawFrame()
drawFrame()
...
You would have this:
onDraw()
drawFrame()
onDraw()
drawFrame()
onDraw()
drawFrame()
...
The CubeLiveWallpaper example has an example of this type of thing.

Animation objects are used to animate View objects. What you want to do is animate a canvas. This is more complicated but potentially more powerful. Essentially you need to derive an equation that will govern the movement of you drawing as a function of time. When the animation starts you get the current time stamp and then in you onDraw method you draw what the canvas should look like at that point in time. Basically you have to draw every step.

How to add text to image and save as new image

I'm trying to create an Android app that adds a random quote to images.
The general process is this:
Start from a custom given image that shows when starting the app.
From this image all the user can do is tap on it and generate a new random "quote" that get overlaid on the image.
The user can save the newly created image with the quote he chose and set it as wallpaper.
I have got to the point where I can display the image in an ImageView.
My list of quotes is stored in my strings.xml file.

I do something like this in an app. Use Canvas.
I edited down a piece of my code, which actually adds a couple of other images on the background and stuff too.
Meat of code:
private static Bitmap getPoster(...) {
Bitmap background = BitmapFactory.decodeResource(res, background_id)
.copy(Bitmap.Config.ARGB_8888, true);
Canvas canvas = new Canvas(background);
Typeface font = Typeface.createFromAsset(res.getAssets(), FONT_PATH);
font = Typeface.create(font, Typeface.BOLD);
Paint paint = new Paint();
paint.setTypeface(font);
paint.setAntiAlias(true);
paint.setColor(Color.WHITE);
paint.setStyle(Style.FILL);
paint.setShadowLayer(2.0f, 1.0f, 1.0f, Color.BLACK);
float fontSize = getFontSize(background.getWidth(), THE_QUOTE, paint); //You'll have to define a way to find a size that fits, or just use a constant size.
paint.setTextSize(fontSize);
canvas.drawText(THE_QUOTE, (background.getWidth() - paint.measureText(THE_QUOTE)) / 2,
background.getHeight() - FILLER_HEIGHT, paint); //You might want to do something different. In my case every image has a filler in the bottom which is 50px.
return background;
}
Put your own version of that in a class and feed it the image id and anything else. It returns a bitmap for you to do whatever you want with (display it in an imageview, let the user save it and set as wallpape).

I know i did this for the PC with imagemagick a few years ago(save image with text on)
Seems like imagemagick have been ported to android, so I would start digging into thier documentation.
https://github.com/lilac/Android-ImageMagick

Ok! Francesco my friend, I've an idea although not a working code ('cuz I'm not really good at it). So, here it is:
Implement an onClickListener() on your ImageView like below:
ImageView iv = (ImageView)findViewById(R.id.imageview1);
iv.setOnClickListener(new View.OnClickListener()
{
public void onClick(View v)
{
/** When I say do your stuff here, I mean read the user input and set your wallpaper here. I'm sorry that I don't really know how to save/set the wallpaper */
}
});
When it comes to reading user input/generating random quotes, you can do this:
You said you already have the quotes saved in the strings.xml file. Using the ids of those strings, I think you can implement a switch case scenario where it uses java imports - java.util.Scanner and java.util.Random. Ultimately, using these in your ImageView onClickListener could/should result in the desired output.
I know my answer is too vague, but I've a faint hope that it has given you a minute lead as to what you can implement. I seriously hope there are better answers than this. If not, then I hope this helps you some, and I also hope that I'm not leading you in the wrong direction since this is just a mere speculation. Sorry, but this is all I've got.

Spritesheet programmatically cutting: best practices

I have a big spritesheet (3808x1632) composed by 42 frames.
I would present an animation with these frames and I use a thread to load a bitmap array with all the frames, with a splash screen waiting for its end.
I'm not using a SurfaceView (and a draw function of a canvas), I just load frame by frame in an ImageView in my main layout.
My approach is similar to Loading a large number of images from a spritesheet
The completion actually takes almost 15 seconds, not acceptable.
I use this kind of function:
for (int i=0; i<TotalFramesTeapotBG; i++) {
xStartTeapotBG = (i % framesInRowsTeapotBG) * frameWidthTeapotBG;
yStartTeapotBG = (i / framesInRowsTeapotBG) * frameHeightTeapotBG;
mVectorTeapotBG.add(Bitmap.createBitmap(framesBitmapTeapotBG, xStartTeapotBG, yStartTeapotBG, frameWidthTeapotBG, frameHeightTeapotBG));
}
framesBitmapTeapotBG is the big spritesheet.
Looking more deeply, I've read in the logcat that the createBitmap function takes a lot of time, maybe because the spritesheet is too big.
I found somewhere that I could make a window on the big spritesheet, using the rect function and canvas, creating small bitmaps to be loaded in the array, but it was not really clear. I'm talking about that post: cut the portion of bitmap
My question is: how can I speed the spritesheet cut?
Edit:
I'm trying to use this approach but I cannot see the final animation:
for (int i=0; i<TotalFramesTeapotBG; i++) {
xStartTeapotBG = (i % framesInRowsTeapotBG) * frameWidthTeapotBG;
yStartTeapotBG = (i / framesInRowsTeapotBG) * frameHeightTeapotBG;
Bitmap bmFrame = Bitmap.createBitmap(frameWidthTeapotBG, frameHeightTeapotBG, Bitmap.Config.ARGB_8888);
Canvas c = new Canvas(bmFrame);
Rect src = new Rect(xStartTeapotBG, yStartTeapotBG, frameWidthTeapotBG, frameHeightTeapotBG);
Rect dst = new Rect(0, 0, frameWidthTeapotBG, frameHeightTeapotBG);
c.drawBitmap(framesBitmapTeapotBG, src, dst, null);
mVectorTeapotBG.add(bmFrame);
}
Probably, the Bitmap bmFrame is not correctly managed.

The short answer is better memory management.
The sprite sheet you're loading is huge, and then you're making a copy of it into a bunch of little bitmaps. Supposing the sprite sheet can't be any smaller, I'd suggest taking one of two approaches:
Use individual bitmaps. This will reduce the memory copies as well as the number of times Dalvik will have to grow the heap. However, these benefits may be limited by the need to load many images off the filesystem instead of just one. This would be the case in a normal computer, but Android systems may get different results since they're run off flash memory.
Blit directly from your sprite sheet. When drawing, just draw straight from sprite sheet using something like Canvas.drawBitmap(Bitmap bitmap, Rect src, Rect dst, Paint paint). This will reduce your file loads to one large allocation that probably only needs to happen once in the lifetime of your activity.
I think the second option is probably the better of the two since it will be easier on the memory system and be less work for the GC.

Thanks to stevehb for the suggestion, I finally got it:
for (int i = 0; i < TotalFramesTeapotBG; i++) {
xStartTeapotBG = (i % framesInRowsTeapotBG) * frameWidthTeapotBG;
yStartTeapotBG = (i / framesInRowsTeapotBG) * frameHeightTeapotBG;
Bitmap bmFrame = Bitmap.createBitmap(frameWidthTeapotBG, frameHeightTeapotBG, Bitmap.Config.ARGB_8888);
Canvas c = new Canvas(bmFrame);
Rect src = new Rect(xStartTeapotBG, yStartTeapotBG, xStartTeapotBG+frameWidthTeapotBG, yStartTeapotBG+frameHeightTeapotBG);
Rect dst = new Rect(0, 0, frameWidthTeapotBG, frameHeightTeapotBG);
c.drawBitmap(framesBitmapTeapotBG, src, dst, null);
mVectorTeapotBG.add(bmFrame);
}
The computation time falls incredibly! :)

Use a LevelListDrawable. Cut the sprites into individual frames and drop them in your drawable resource directory. Either programmatically or through an xml based level-list drawable create your drawable. Then use ImageView.setImageLevel() to pick your frame.

I use a method of slicing based on rows and columns. However your sprite sheet is rather huge. You have to think you are putting that whole sheet into memory. 3808x1632x4 is the size of the image in memory.
Anyway, what I do is I take an image (lets say a 128x128) and then tell it there are 4 columns and 2 rows in the Sprite(bitmap, 4, 2) constructor. Then you can slice and dice based on that. bitmap.getWidth() / 4 etc... pretty simple stuff. However if you want to do some real stuff use OpenGL and use textures.
Oh I also forgot to mention there are some onDraw stuff that needs to happen. Basically you keep an index counter and slice a rectangle from the bitmap and draw that from a source rectangle to a destination rectangle on the canvas.