How to draw big scrollable PNG?

android
#1

Hi guys, I have a big PNG (5000x1080) and I want to make it scrollable.I don’t know how to do it, so for now I am drawing the PNG in this way:

ofPushMatrix();
myImage.getTextureReference().drawSubsection(0, 0, ofGetWindowWidth(), ofGetWindowHeight(), myImageLocation_x, 0);
ofPopMatrix();

but I don’t know if it is the best way to do it, and maybe I will need to draw a bigger image in this way.

Any help will be appreciated, thanks guys :smiley:

#2

An alternative might be to use texture coordinates.

For an explanation see the textures paragraph of the OpenGL tutorial.

#3

Thanks, I read entire tutorial and it was helpfull! However, the problems is still here.

Now I am drawing images with bind() and unbind() in this way

ofApp.h

int touchX;
ofImage myImage;
ofPlanePrimitive backPrimitive;

ofApp.cpp

void ofApp::setup() {
myImage.loadImage("image.png");
backPrimitive.set(myImage.getWidth(), myImage.getHeight());
}

void ofApp:update() {
backPrimitive.mapTexCoords(touchX, 0, touchX+ofGetWindowWidth(), ofGetWindowHeight());
}

void ofApp::draw() {
myImage.getTextureReference().bind();
backPrimitive.draw();
myImage.getTextureReference().unbind();
}

On OF for Windows in Codeblocks, no problems, it draws the image (stretched, but it draws)… on Android nothing to do, all white :\

#4

Perhaps you can check the maximum texture size of your hardware. Maybe it’s lower than 5000, which might cause a problem. You can check it with something like the snippet below:

int maxSize = 0;
glGetIntegerv(GL_MAX_TEXTURE_SIZE, &maxSize);
cout << maxSize << endl;
#5

Thanks a lot for your help.

It give me 4096 on Android (One Plus One), but PNG image is now 4000x864… I am thinking to put a series of images and make them scrollable so it looks like a single image… but I think it is so expensive in RAM usage.

EDIT: I just noticed that with this method it doesn’t draw neither smaller images (2000x400)… maybe I am wrong with something

#6

Perhaps on Android you need normalized coordinates?

backPrimitive.mapTexCoords(0, 0, 1, 1);

I don’t use OF for Android, so unfortunately I can’t provide much support on that front.

#7

Nothing to do, Android only display white screen…

But I just noticed that I get two errors in the console:

01-25 21:25:20.150: E/Adreno-ES11(13902): <qglDrvAPI_glGetString:619>: GL_INVALID_ENUM
01-25 21:25:20.311: A/libc(13902): Fatal signal 11 (SIGSEGV) at 0x0000000c (code=1), thread 13953 (Thread-11076)

Maybe it’s a problem related to GLES… with openGL on Windows it works fine

#8

OK, for now I resolved putting an horizontal tile of images, and it seems to works very good, but I think it isn’t the best ways to do it.

Now I have another question: is there a method to draw images only when they are on the screen? I think it is heavy to draw images when they are not visible on the screen… I am doing something like this for now:

ofTranslate(imagePosition.x, 0);
if (imagePosition.x < ofGetWindowWidth() && imagePosition.x > 0) {
     myImage.draw(0, 0);
}
#9

You can try this

It worked for me, and I had it running on android as well.

#10

Wow thanks, it is what I need!

Only I don’t understand how can I add it in my code… I don’t understand how to add addons in my codes :\

#11

Just add the name of the addon to the addons.make file and then implement it in your code.

#12

Yeah I managed it to works, thank you, but unfortunately it is not compatible with RGBA images in PNG :\ thanks a lot however, I done it with making a “handmade” tiled image