Image in a window - Feature request

Hi Gregg,



I havent checked out the new GUI features but it seems the development is moving along nicely. Is there any support to show an image in a GUI window? If not I appreciate some pointers as how I can add an image to the GUI window.



tomcat

Hi tomcat,



Can you give me a few more details about what you’re wanting to do?



Thanks,

Gregg

Ok, I basically like to have a window with a couple of buttons and inside it I like display a jpg or gif image and some text underneath it. A bit like mission information you get in games. It would be great if I can have animation to go with it so I can give it a series of images and it animates it for me (just basic animation). But for now showing the static image inside the window with some text would be great.



tomcat

I don’t think it will be too difficult to do the static image. I’ll try to come up with something this weekend for you to try out.



For the animation, if you mean loading and playing a Quicktime video or something similar, that will take quite a bit more effort. You might check out the render to texture demos, those could be a first step to getting what you want.



Gregg

I don't think it will be too difficult to do the static image. I'll try to come up with something this weekend for you to try out.


Thx, look forward to this.

For the animation, if you mean loading and playing a Quicktime video or something similar, that will take quite a bit more effort. You might check out the render to texture demos, those could be a first step to getting what you want.


I was really looking for something basic a bit like animated gif. For example I would have a list of six images which will be shown one after the other. I guess once we figure out how to do the static image there might be a way of replacing it with other images say after x milisecs in a round robin format. What do you think?

tomcat

We should be able to do that.



Gregg

Hi Gregg,

Any luck with this feature?

tomcat

gregg has alot on his plate at the moment. So you might have to patient with it, or I might give it a bash myself. :slight_smile:

Sorry tomcat, I haven’t had time to do it.



I think it can be done by adding a set/getBackgoundImage method to the Widget interface and then cutting in the code to support it.



I’ll be happy to advise anyone who wants to take a swing at doing it.



Gregg

Sorry guys, understand you are pushed at the moment. My knowledge of opengl is not very good so if DarkProphet can give it a go (providing he is not busy), i’ll appreciate it.

tomcat

no problem, il give it a good bash

Let me know if you have any questions.



Gregg

Consider this another vote for image support in widgets, both for buttons with simple animation as well as non-input-handling but animatible image “labels”. (I tried to cheat by just assigning a TextureState to a WidgetButton, but it obviously failed.)



And thanks for your Widget stuff, Gregg! I’m making good use of your WidgetViewport code.



-Mike

Well, figuring I had a relatively good understanding of the Widget way of doing things, and having no understanding of GL, I attempted to create a WidgetImage and WidgetLWJLGImage class. So far, the only things I’ve accomplished are causing Windows 2000 to blue screen twice :slight_smile:



If anyone out there has some minimal knowledge of GL, maybe you can point out what needs to be changed to make this work.



I suspect some problems with how I created the ByteBuffer, but that’s probably not sufficient to cause the system to crash (then again, since it was a KMODE exception, that may be EXACTLY what caused it.)



Looking at other jME code, I think I’ve now corrected the ByteBuffer allocation, and things do appear to be working better.



I’ve hardcoded in an example image to keep things as simple as possible at first. I used the following URL as an example for creating the image as well as for generating the GL calls.



http://www.parallab.uib.no/SGI_bookshelves/SGI_Developer/books/OpenGL_PG/sgi_html/ch09.html#id5491519



The error I get is

org.lwjgl.opengl.OpenGLException: Invalid operation (1282)
   at org.lwjgl.opengl.Util.checkGLError(Unknown Source)
   at org.lwjgl.opengl.Window.update(Unknown Source)
   at com.jme.renderer.lwjgl.LWJGLRenderer.displayBackBuffer(LWJGLRenderer.java:400)



Here's the render code I use. No doubt there are serious flaws, but as I said above, I'm ignorant of GL.

        initWidgetProjection(wt);

        float x = (wt.getX()) + wt.getXOffset();
        float y = wt.getY() + wt.getHeight() + wt.getYOffset();


        //// EXAMPLE glDrawImage code found on the web, converted from C
        int i, j, c;
        int checkImageWidth = 64;
        int checkImageHeight = 64;
        // byte checkImage[checkImageHeight][checkImageWidth][3];
        byte[] checkImage = new byte[checkImageHeight * checkImageWidth * 3];
       
        int checkImageIndex = 0;
        for (i = 0; i < checkImageHeight; i++) {
           for (j = 0; j < checkImageWidth; j++) {
               boolean first = ((i & 0x8)==0);
               boolean second = ((j & 0x8)==0);
               c = ((first ? 1 : 0) ^ (second ? 1 : 0)) * 255;
//              checkImage[i][j][0] = (byte) c;
//              checkImage[i][j][1] = (byte) c;
//              checkImage[i][j][2] = (byte) c;
             checkImage[checkImageIndex++] = (byte) c;
             checkImage[checkImageIndex++] = (byte) c;
             checkImage[checkImageIndex++] = (byte) c;
           }
        }

        // NOTE: Using wrap may not create a LWJGL compatible ByteBuffer
        // ByteBuffer checkImageByteBuffer = ByteBuffer.wrap(checkImage);
       
        ByteBuffer checkImageByteBuffer= ByteBuffer.allocateDirect(checkImage.length).order(ByteOrder.nativeOrder());
        checkImageByteBuffer.put(checkImage);
        checkImageByteBuffer.rewind();
       
        //// END EXAMPLE glDrawImage code found on the web, converted from C
       
        //Begin rendering quads
        GL11.glBegin(GL11.GL_QUADS);

         // GL11.glDrawPixels(int width, int height, int format, int type, java.nio.ByteBuffer pixels);

         GL11.glPixelStorei(GL11.GL_UNPACK_ALIGNMENT, 1);

         GL11.glClear(GL11.GL_COLOR_BUFFER_BIT);
         GL11.glRasterPos2i(0, 0);
         GL11.glDrawPixels(checkImageWidth, checkImageHeight, GL11.GL_RGB,
            GL11.GL_UNSIGNED_BYTE, checkImageByteBuffer);
         GL11.glFlush();


        //Stop rendering quads
        GL11.glEnd();

        resetWidgetProjection();

Never mind. After much editing and changing and error solving, I actually have this thing working!



I’ll try to post something more comprehensive tomorrow.



-Mike

I have a very basic version of ImageWidget now finished.



However, I have some questions about image scaling.



Right now, it outputs the image as whatever size the image originally was, being clipped only by the viewport rather than the Widget.



I’m heading out the door for awhile, and I can probably figure out how to clip to the Widget by myself if no one posts a response before I get back to it (although assistance makes things go faster).



What I’m not entirely certain on is scaling.



I’m assuming we want to have the image scaling configurable:



possibly:



If larger,


  1. unscaled, clipped.


  2. scaled to fit widget



    If smaller,


  3. scaled to fit widget


  4. left alone, and aligned vertically/horizontally


  5. tiled





    Any ideas on where this should be done (ImageWidget level, LWGLJ level, Image level (probably not)) and hints on the most efficient ways to do it would be appreciated. For my first pass, my goal is to scale-to-fit.



    -Mike

Howdy,



The slider widget is an example of mapping an image to a widget. If you have a debugger, I suggest stepping through TestWidgetSlider and the Widget slider classes to start getting a feel for how it works.



In the mean time, I’ll put together some documentation to explain how widgets work in general, and in particular, how someone might go about getting an image on a widget. It will take me a few days to get it done. I’ll post it here when I’m finished.



Gregg

Maybe I wasn’t clear enough. I have a working ImageWidget. I wish I had known about the image support in the slider before I started, though :slight_smile:



-Mike

Gregg, I should have workable WidgetImage classes posted to the issue tracker later today.



I decided to start with fit-to-widget image scaling, which I appear to have accomplished via glPixelZoom.



My biggest remaining problem is that the image is drawn at the wrong x position (but oddly enough, the y position works just fine.



The other minor (right now) problem is that I haven’t figure out how to force any ImageWidget drawing to be clipped to the bounds of the ImageWidget.



-Mike

I’ve posted ImageWidget source to issue #106 in the tracker.



https://jme.dev.java.net/issues/show_bug.cgi?id=106



Scaling (4 varieties) works. Alignment doesn’t. Clipping doesn’t (won’t be a problem if properly scaled and aligned). If you set an alignment other than NONE, the image will end up being drawn at some odd location.



I thought of another comment to add to the issue, but as an observer I don’t appear to be able to comment on my own issues.



At some point, ImageWidget.initWidgetRenderer() needs to be updated to call WidgetRendererFactory rather than handling that detail itself.



-Mike