[Android] OpenGLの簡易画像ビュアーにSDカード内の画像を表示する

How to load the image files in a SD card

前回 はフリーサイズの画像を伸縮してOpenGL APIで表示するアプリを作りました。
このアプリはプロジェクトのリソースとして組み込んだ画像しか表示することができません。
今回はSDカードに保存されている画像をOpenGL APIで表示するアプリを作ります。
既に次の様な操作方法が実装済みです。
・スクロールで移動
・ピンチアウトで拡大
・ピンチインで縮小

SDカードには複数の画像ファイルが保存されているとし、一枚ずつ表示する画像を差し替えていきます。
画像を差し替える操作方法
・画面の左から右へ大きくスワイプしたら次の画像を表示
・画面の右から左へ大きくスワイプしたら前の画像を表示
とします。
画面の横幅の半分以上の距離をスワイプしたら画像を差し替える様にします。

画像の表示順は画像ファイル検索時に見つけた順です。
表示する画像の種類は拡張子が「.png」「.jpg」「.jpeg」「.gif」のファイルとします。拡張子の大文字小文字は区別しません。
隠しファイルに設定されている画像ファイルや隠しフォルダーに保存されている画像ファイルは表示しないことにします。

ところでAndroid端末のSDカードのパスは機種ごとに異なります。
実際に手持ちの機種で調べたところメーカーごとに違うことを確認しています。
SDカードのパスを取得するに当たり
とむ・やむくんさんの 戌印-INUJIRUSHI- （Androidあれこれ）
http://inujirushi123.blog.fc2.com/blog-entry-30.html
を参考にさせて頂きました。

このブログを書いている時点の開発環境は次の通りです。
・Windows8 (64bit)
・Eclipse Juno (32bit) (XP互換モードで起動)
・Android SDK r21.0.1

SDカード内の画像ファイルの検索は時間がかかるので AsyncTask を使います。
検索が完了したら最初に見つけた画像を表示します。

以下ソースです。

Activity(MainActivity.java)
package jp.fujiu.GL_SDImageViewerSD; import java.io.File; import java.nio.ByteBuffer; import java.nio.ByteOrder; import java.nio.FloatBuffer; import java.util.ArrayList; import javax.microedition.khronos.egl.EGLConfig; import javax.microedition.khronos.opengles.GL10; import android.opengl.GLES20; import android.opengl.GLSurfaceView; import android.opengl.GLU; import android.opengl.GLUtils; import android.opengl.GLSurfaceView.Renderer; import android.os.AsyncTask; import android.os.Bundle; import android.os.Environment; import android.view.MotionEvent; import android.view.ScaleGestureDetector; import android.view.ScaleGestureDetector.OnScaleGestureListener; import android.widget.Toast; import android.app.Activity; import android.content.Context; import android.graphics.Bitmap; import android.graphics.BitmapFactory; import android.graphics.Canvas; import android.graphics.Matrix; public class MainActivity extends Activity implements OnScaleGestureListener { private MainSurface surface = null; //ジェスチャー private ScaleGestureDetector scaleGgesture= null; private float scaleFactor = 1; //画像ファイルの拡張子 private static final String[] EXTENTIONS = new String[]{".png", ".jpg", ".jpeg", ".gif"}; //画像ファイル private ArrayList<String> fileLlist = null; private int llistIndex; // タッチイベント処理 private float touchedX = 0; private float touchedY = 0; //スライド操作 float slideWidth; float touchDownX; //ファイルリスト処理中フラグ private boolean isListReady = false; //画像ファイルを検索するためのAsyncTask private class ReadFileTask extends AsyncTask<Object, Object, Object>{ @Override protected Object doInBackground(Object... params) { //排他フラグロック isListReady = false; // SDへのパス取得 String sdPath = getSdPath(); //画像ファイルのパスをリストアップ fileLlist = new ArrayList<String>(); readFileList(sdPath); llistIndex = 0; return null; } private void readFileList(String path) { File[] files = new File(path).listFiles(); int len = files.length; for (int i = 0; i < len; i++) { File f = files[i]; if (f.isHidden() == false) { if (f.isFile()) { // 拡張子によるフィルター int exPosi = f.getAbsolutePath().lastIndexOf("."); if (exPosi > -1) { //ファイルの拡張子の種類が画像ならファイルのフルパスをリストに追加 String extension = f.getAbsolutePath().substring(exPosi); for (int j = 0; j < EXTENTIONS.length; j++) { if (extension.equalsIgnoreCase(EXTENTIONS[j])) { fileLlist.add(f.getAbsolutePath()); break; } } } } else { readFileList(f.getAbsolutePath()); } } } } @Override protected void onPostExecute(Object result) { //排他フラグ解除 isListReady = true; //最初の画像表示 surface.changeTexture(fileLlist.get(0)); } } @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); surface = new MainSurface(this); surface.setRenderer(surface); surface.setFocusable(true); surface.setKeepScreenOn(true); setContentView(surface); } @Override protected void onResume() { super.onResume(); //スライド量は画面の幅の半分 slideWidth = (float) getWindowManager().getDefaultDisplay().getWidth() / 2; if (scaleGgesture==null){ scaleGgesture = new ScaleGestureDetector(getApplicationContext(), this); } if (fileLlist == null) { //非同期で画像ファイルのパスをリストアップ ReadFileTask readFileTask = new ReadFileTask(); readFileTask.execute(null, null, null); } } @Override public boolean onTouchEvent(MotionEvent event) { scaleGgesture.onTouchEvent(event); //フリック操作ならカメラ移動、スライド操作なら画像変更 if (event.getPointerCount()==1){ switch (event.getAction()) { case MotionEvent.ACTION_MOVE: float x = event.getX(); float y = event.getY(); surface.setCameraPotision((touchedX - x), (touchedY - y)); touchedX = x; touchedY = y; break; case MotionEvent.ACTION_DOWN: touchedX = event.getX(); touchedY = event.getY(); touchDownX = event.getX(); break; case MotionEvent.ACTION_UP: if (event.getX() - touchDownX > slideWidth ){ //左から右で次の画像を表示 showPrevImage(1); } else if (touchDownX - event.getX() > slideWidth ){ //右から左で前の画像を表示 showPrevImage(-1); } } } return true; } private String getSdPath() { String sdPath; // Sumsung, Vi30 sdPath = System.getenv("EXTERNAL_STORAGE2"); if (sdPath != null) { return sdPath; } // 旧 Sumsung, SH-03C, IS01 sdPath = System.getenv("EXTERNAL_STORAGE"); if (sdPath != null) { return sdPath; } // MOTOROLA sdPath = System.getenv("EXTERNAL_ALT_STORAGE"); if (sdPath != null) { return sdPath; } sdPath = Environment.getExternalStorageDirectory().getPath(); // HTC File file = new File(sdPath + "/ext_sd"); if (file.exists()) { sdPath = file.getPath(); } return sdPath; } //次の画像を表示 private void showPrevImage(int diff){ if (isListReady){ if (fileLlist.size()>0){ llistIndex += diff; if (llistIndex < 0){ llistIndex -= diff; Toast.makeText(getApplicationContext(), "First", Toast.LENGTH_SHORT).show(); return; } else if (llistIndex >= fileLlist.size()){ llistIndex -= diff; Toast.makeText(getApplicationContext(), "Last", Toast.LENGTH_SHORT).show(); return; } //次に表示する画像のファイル名を渡す surface.changeTexture(fileLlist.get(llistIndex)); } else { //SDカードに画像が保存されていない場合のメッセージ Toast.makeText(getApplicationContext(), "No image files", Toast.LENGTH_SHORT).show(); } } else { //SDカードに画像ファイル検索中のメッセージ Toast.makeText(getApplicationContext(), "Pease wait", Toast.LENGTH_SHORT).show(); } } @Override public boolean onScale(ScaleGestureDetector detector) { scaleFactor *= detector.getScaleFactor(); surface.setScale(scaleFactor); return true; } @Override public boolean onScaleBegin(ScaleGestureDetector detector) { return true; } @Override public void onScaleEnd(ScaleGestureDetector detector) { scaleFactor *= detector.getScaleFactor(); } // OpenGLのViewクラス private class MainSurface extends GLSurfaceView implements Renderer { //画像1辺のサイズ private static final int IMAGE_PIXCEL = 512; //視野関連 private float fovy = 45f; private float aspect; // カメラの位置 private float cameraX = 0; private float cameraY = 0; //カメラの移動量 private float cameraDist; // 頂点座標 private float apexs[] = new float[] { -1f, -1f, 1f, -1f, -1f, 1f, 1f, 1f, }; // 頂点座標バッファ private FloatBuffer apexBuff; // 頂点テクスチャ private float coords[] = new float[] { 0.0f, 1.0f, 1.0f, 1.0f, 0.0f, 0.0f, 1.0f, 0.0f, }; // 頂点テクスチャバッファ private FloatBuffer coordsBuff; private boolean isTextureOrderedChange = false; private StringBuffer imagePath = new StringBuffer(256); private int textureID = 0; void setCameraPotision(float x, float y) { //移動量が極端に大きい場合は無視 if (Math.abs(x)> 100 || Math.abs(y)> 100){ return; } cameraX += x/cameraDist; cameraY += -y/cameraDist; //画像が画面の外に出ない様にブレーキ if (cameraX> 1)cameraX = 1; if (cameraX<-1)cameraX = -1; if (cameraY> 2)cameraY = 2; if (cameraY<-2)cameraY = -2; } void setScale (float scale){ this.fovy = 45f / scale; //画像の極端な拡大縮小を防ぐ if(this.fovy > 150) this.fovy = 150; if(this.fovy < 10) this.fovy = 10; } public void changeTexture(String imagePath){ this.imagePath.delete(0, this.imagePath.length()); this.imagePath.append(imagePath); isTextureOrderedChange = true; //表示する位置を中心に戻す cameraX = 0; } private void loadTexture(GL10 gl){ Bitmap srcImage = BitmapFactory.decodeFile(imagePath.toString()); float width = (float) srcImage.getWidth(); float height= (float) srcImage.getHeight(); float scale; float left; float top; if (width > height){ scale = IMAGE_PIXCEL / width; left = 0; top = ((width - height) / 2) * scale; }else{ scale = IMAGE_PIXCEL / height; top = 0; left = ((height - width) / 2) * scale; } //画像を伸縮する Matrix matrix = new Matrix(); matrix.postScale(scale, scale); Bitmap stretchedImage = Bitmap.createBitmap(srcImage, 0, 0, (int)width, (int)height, matrix, true); srcImage.recycle(); //画像を正方形に納める Bitmap dstImage = Bitmap.createBitmap(IMAGE_PIXCEL, IMAGE_PIXCEL, Bitmap.Config.ARGB_8888); Canvas canvas = new Canvas(dstImage); canvas.drawBitmap(stretchedImage, left, top, null); stretchedImage.recycle(); // テクスチャ管理番号バインド gl.glBindTexture(GL10.GL_TEXTURE_2D, textureID); // 画像ファイルをテクスチャにバインド GLUtils.texImage2D(GL10.GL_TEXTURE_2D, 0, dstImage, 0); gl.glTexParameterf(GL10.GL_TEXTURE_2D, GL10.GL_TEXTURE_MIN_FILTER, GL10.GL_LINEAR); gl.glTexParameterf(GL10.GL_TEXTURE_2D, GL10.GL_TEXTURE_MAG_FILTER, GL10.GL_LINEAR); dstImage.recycle(); } public MainSurface(Context context) { super(context); } @Override public void onSurfaceCreated(GL10 gl, EGLConfig config) { // バッファの生成 apexBuff = makeFloatBuffer(apexs); coordsBuff = makeFloatBuffer(coords); // テクスチャ管理番号割り当て int[] textures = new int[1]; gl.glDeleteTextures(1, textures, 0); gl.glGenTextures(1, textures, 0); textureID = textures[0]; } @Override public void onSurfaceChanged(GL10 gl, int width, int height) { cameraDist =(float)(width/2); gl.glViewport(0, 0, width, height); gl.glMatrixMode(GL10.GL_PROJECTION); gl.glLoadIdentity(); aspect = (float) width / (float) height; // 背面塗り潰し色の指定 gl.glClearColor(0.0f, 0.0f, 0.0f, 1.0f);// 黒 } @Override public void onDrawFrame(GL10 gl) { // 画面クリア gl.glClear(GL10.GL_COLOR_BUFFER_BIT); gl.glPushMatrix(); //視野 GLU.gluPerspective(gl, this.fovy, aspect, 0.1f, 100f); // カメラ GLU.gluLookAt(gl, cameraX, cameraY, 3, cameraX, cameraY, 0, 0, 1, 0); gl.glPushMatrix(); //テクスチャの変更が要求されたらテクスチャ変更 if (isTextureOrderedChange){ isTextureOrderedChange = false; loadTexture(gl); } // テクスチャーの有効化 gl.glEnable(GL10.GL_TEXTURE_2D); gl.glEnableClientState(GL10.GL_TEXTURE_COORD_ARRAY); // 頂点配列の指定 gl.glVertexPointer(2, GL10.GL_FLOAT, 0, apexBuff); gl.glEnableClientState(GL10.GL_VERTEX_ARRAY); //テクスチャの表示方法 GLES20.glTexParameteri(GLES20.GL_TEXTURE_2D, GLES20.GL_TEXTURE_WRAP_S, GLES20.GL_CLAMP_TO_EDGE); // テクスチャ配列の指定 gl.glBindTexture(GL10.GL_TEXTURE_2D, textureID); gl.glTexCoordPointer(2, GL10.GL_FLOAT, 0, coordsBuff); //位置 gl.glTranslatef(0, 0, 0); // 描画 gl.glDrawArrays(GL10.GL_TRIANGLE_STRIP, 0, 4); // テクスチャーの無効化 gl.glDisableClientState(GL10.GL_VERTEX_ARRAY); gl.glDisable(GL10.GL_TEXTURE_2D); gl.glDisableClientState(GL10.GL_TEXTURE_COORD_ARRAY); gl.glPopMatrix(); gl.glPopMatrix(); } } //頂点の配列をバッファーに変換するメソッド private static FloatBuffer makeFloatBuffer(float[] values) { ByteBuffer bb = ByteBuffer.allocateDirect(values.length * 4); bb.order(ByteOrder.nativeOrder()); FloatBuffer fb = bb.asFloatBuffer(); fb.put(values); fb.position(0); return fb; } }
※特別な権限(Permission)は不要なのでマニフェストは省略します。
Android2.2以降で動作します。
Target SDK Version が8以上の設定でビルドできます。

実行すると下の様になります。

本のページをめくるようにフリックするとスマートフォンのカメラ機能で撮影した画像や保存したスクリーンショットが次々と表示されます。

関連ブログ
[Android] フリーサイズの画像をOpenGLのテクスチャに表示する
[Android] OpenGLで簡易画像ビュアーを作る
[Android] ジェスチャーでOpenGL簡易画像ビュアーに拡大縮小機能を追加する
[Android] OpenGLでプロ生ちゃんをアニメーションさせる
[Android] OpenGL ESで文字を表示する
[Android] OpenGLで頂点の多いポリゴンを扱うには
[Android] OpenGLでシャープ製端末用3D（立体視）アプリケーションを作る
[Blender] obj2opengl.plをJava用に改造する
[Windows8][Android] Can't bind to local 8600 for debugger

以上、参考になれば幸いです。