voyent
How to display a dynamic image from blob data  XML
Forum Index -> General Help
Author Message
gus315

Joined: 14/Nov/2006 00:00:00
Messages: 158
Offline


Hi,

I am wondering whether there is a way to display a dynamic image from database blob data. I know there is a dynamic image component in Tomahawk, but I don't want to integrate Tomahawk to ICEfaces. Another single dynamic image component is posted in Seam wiki, is it compatible with ICEfaces? Any suggestion? Thank you in advance.
hurzeler

Joined: 13/Dec/2006 00:00:00
Messages: 33
Offline


Well that is an excellent question. The component you are refering to is at http://jroller.com/page/pmuir?entry=dynamicimagecomponent_for_jsf and there is another excellent at AJAX4JSF (mediaOutput) http://webdownload.exadel.com/downloads/ajax4jsf/documentation/tldDoc/.

Am I correct in saying that strait JSF and AJAX4JSF is not compatible with icefaces (unless you use different viewhandlers on different pages with just-ice.jar).

My request is that we get a tutorial that shows how one would convert a strait JSF component such as the dynamic image component on SEAM wiki to a Direct to DOM component (like the basicInputText tutorial).

If you analyse the SEAM wiki dynamic Image Comonent you notice in the PhaseListener that:
Code:
 ...
 Image image = (Image) obj;
 response.setContentType(image.getMimeType());
 response.setStatus(HttpServletResponse.SC_OK);
 ServletOutputStream os = response.getOutputStream();
 os.write(image.getImage());
 ...


The question is how do you write to the HttpServletResponse an OutputStream in the encodeEnd method of the DOMRenderer or do we have to do it somewhere else all together?

Your help would be greatly appreciated.
lurjon

Joined: 08/Feb/2008 00:00:00
Messages: 5
Offline


Hi,

I have used the http://jira.icefaces.org/browse/ICE-1451 to render an image from byte[] and it seems to work ok. (have only tried to render one image per page).

In our application the image is created by some input parameters which we are toggling with checkboxes.

And here is where our problem occur.

When clicking on one of the checkboxes, the phaselistener comes with a NullPointerException because it cannot find the id in the session. So I modified the code a bit to handle the NPE, but then it doesnt handle the checkboxes.

does anyone have an idea on how to solve this? how can I continue handle both the dynamic image and the checkbox changes?

code from page.jspx
Code:
 <ice:form >
         	<ice:panelGroup>
         	<ice:graphicImage id = "mapImg"
         		url="#{map.image}"
                 width="#{map.width}"
                 height="#{map.height}"                    
                 alt="#{map.image.description}"/>
             </ice:panelGroup>
             <!-- Check boxes - select language -->                
                 <ice:panelGroup>
                     <ice:selectManyCheckbox id="SlctUsgBnd"
                                             value="#{usagebandSelection.selectedUsageBands}"
                                             partialSubmit="true">
                         <f:selectItems  id="SlctUsgBndItms"
                                         value="#{usagebandSelection.usageBands}"/>
                     </ice:selectManyCheckbox>
                 </ice:panelGroup>
    
         	
         </ice:form>
 


modified DBPhaseListener
Code:
 private void handleBlobImageRequest(PhaseEvent phaseEvent) {
 		
 		FacesContext facesContext = phaseEvent.getFacesContext();
 		ExternalContext externalContext = facesContext.getExternalContext();
 		
 		// todo: Portlet support (Response can be a portler response not http)
 		HttpServletResponse response = (HttpServletResponse) externalContext.getResponse();
 		Map requestMap = externalContext.getRequestParameterMap();
 		Map sessionMap = externalContext.getSessionMap();
 
 		//log.info("ID Class: " + requestMap.get("id").getClass().getName());
 		String id = (String)requestMap.get("id");
 				
 		try {
 			Image image = (Image) sessionMap.get(id);
 			response.setContentType(image.getContentType());
 			OutputStream out = response.getOutputStream();
 			out.write(image.getImage()); 
 			out.flush();
 			out.close();
 		} catch (Exception e) {
 			log.error("", e);
 		} finally {
 			emptySession(sessionMap, id);			
 			facesContext.responseComplete();
 		}
 	}
 
 	public void beforePhase(PhaseEvent phaseEvent) {
 
 	}
 
 	public PhaseId getPhaseId() {
 		return PhaseId.RESTORE_VIEW;
 	}
 
 	private void emptySession(Map sessionMap, String id) {
 		if (id != null) {
 			sessionMap.remove(id);
 		}		
 	}


Does anyone have an idea on how to move forward from this?

Best regards
Jone Lura
zzzz8

Joined: 07/Dec/2005 00:00:00
Messages: 270
Offline


I opened a JIRA issue for a dynamic image component a while back:

http://jira.icefaces.org/browse/ICE-2528

Please vote on it and get the nice ICEfaces folks to make this component. :)
georges.goebel@pch.etat.l


Joined: 23/Jun/2007 00:00:00
Messages: 276
Offline


Hi,

I am using the seam component <s:graphicImage /> and it works well

Code:
 <s:graphicImage value="#{line.pdImage}"/>
 


with line being a bean and the property "pdImage"
Code:
 private byte[] pdImage;
 


Georges
[Email]
zzzz8

Joined: 07/Dec/2005 00:00:00
Messages: 270
Offline


Hi Georges,

It's funny you should say that you used the Seam graphicImage component. :) I also tried it out this week - and it does work - however, to a certain point.

The point is that it does work if you are not doing Ajax push to the page. If you are, then you're going to come across the annoying problem of full image refreshes even for the "same" image (if the component binds to a byte array) - which is very annoying for the user.

The graphicImage component seems to save a temporary version of the image in a temporary directory - since I'm away from the app right now, I don't remember the exact directory name. But for each render pass, an image file is saved into the directory. The browser then retrieves the image.

For example, let's say I have the following binding:

<s:graphicImage value="#{myappbean.retrieveImage}" />

Where the retrieveImage method returns a byte array (I'm using Seam EL where one can bind to a method). Each time the method is invoked during a render pass, a NEW temporary image is saved. This is especially annoying if the image you are retrieving is the same image. The browser has to then retrieve the image on each and every render pass because of the new image link, making for fairly poor performance - unnecessary network traffic.

For example, the first render pass would generate something like:

/WEB-INF/temp/image001a.jpg

then on the second pass:

/WEB-INF/temp/image001b.jpg

Again, this is for the same image (i.e. same byte array).

So we still need a good ICEfaces dynamic image component. What would be nice is if the component had an attribute that specified a "key" for the image - i.e. specifying a unique name for the image - and possibly an attribute that binds to a method or property that returns a hash value for the component. So if the image changes - i.e. the hash changes, the component would then know that it should create a new temporary image for the browser to retrieve - the browser is updated with a new link to the updated image. Otherwise, if on the render pass the image does not change (the hash stays the same), then the link to the image does not change. But essentially, some sort of mechanism to prevent full image refreshes even if the value attribute binds to a byte array.
rocky_wind

Joined: 02/May/2009 00:00:00
Messages: 2
Offline


Well No need to Use Any Custom component it can be done with ICEfaces 1.8 if any one want the complete tutorial mail me on
pavan_suryawanshi@rediffmail.com

i'll create and send the complete tutorial for you
[Email]
michelle2

Joined: 14/Nov/2007 00:00:00
Messages: 449
Offline


rocky_wind wrote:
Well No need to Use Any Custom component it can be done with ICEfaces 1.8 if any one want the complete tutorial mail me on
pavan_suryawanshi@rediffmail.com

i'll create and send the complete tutorial for you 


What exactly do you mean by dynamic image. my take on a dynamic image is an image that is generated from a database or online servlet.

You can just use the java imaging api and do something like this.


import java.awt.*;
import java.awt.image.*;
import java.io.*;
import com.sun.image.codec.jpeg.*;
import javax.servlet.*;
import javax.servlet.http.*;

public class ShowOriginalImageServlet extends HttpServlet
{
public void doGet(HttpServletRequest request,
HttpServletResponse response)
throws IOException
{
// Make sure the browser calls this servlet every time
response.setHeader("Cache-Control", "no-cache");
response.setHeader("Pragma", "no-cache");
response.setHeader("Expires", "0");

HttpSession session = request.getSession();

// Get the in-memory image
BufferedImage buffImage =
(BufferedImage) session.getAttribute("image");

// If the image doesn't exist, create a blank one
if (buffImage == null)
{
buffImage = new BufferedImage(100, 100,
BufferedImage.TYPE_INT_RGB);
}

// Create an encoder to convert the image into JPEG format, using
// the servlet's output stream as the stream for writing the image
JPEGImageEncoder encoder = JPEGCodec.createJPEGEncoder(
response.getOutputStream());

// Convert the image to JPeg
encoder.encode(buffImage);

}
}

As for displaying the image you could do it a number of ways.

Look at my iphone specific (but you can modify it ) selectList component.

But there is nothing special there, you can just get the image like

I do here:

http://www.icefaces.org/JForum/posts/list/13139.page


actionListener="#{artShowBean.actionListener}">
<ice:panelGroup >

<img src="#{var.image}" id="img" />

<ice:outputText value="#{var.label}" styleClass="text1" />
<div id="img1" ></div>


In a few weeks I will be posting a component based on the yui carousel which will do a lot of different type of "dynamic images"

I had already created an iphone specific version of that

http://web.me.com/cannonwc/Site_4/contents/Entries/2009/1/28_Building_A_carousel_in_5_steps.html

and it occurred to me that maybe a more general version would be in order.

So I started building one based on the panelSeries component, that way it can take a container component which will allow a very rich li.

As for getting the image, since I am going to use webservices, I have the component doing a get request to get the images which are binary data stored in a json formated table. Again not unlike selectList does.

Again please explain the context of the way you're using dynamic images.

[Email]
georges.goebel@pch.etat.l


Joined: 23/Jun/2007 00:00:00
Messages: 276
Offline


Hi,

probably I miss understand the problematic, but I think the inital problem was how to display an image which is saved as BLOB in a DB on a page.

Since the inital post is quite old there was something new since version 1.7.1 where you can use the graphicImage to siplay an image which exists as blob or available as http resource

Code:
 <ice:graphicImage value="#{bean.imageBytes}"/> 
 

check http://www.icefaces.org/JForum/posts/list/10166.page

Georges
[Email]
michelle2

Joined: 14/Nov/2007 00:00:00
Messages: 449
Offline


georges.goebel@pch.etat.l wrote:
Hi,

probably I miss understand the problematic, but I think the inital problem was how to display an image which is saved as BLOB in a DB on a page.

Since the inital post is quite old there was something new since version 1.7.1 where you can use the graphicImage to siplay an image which exists as blob or available as http resource

Code:
 <ice:graphicImage value="#{bean.imageBytes}"/> 
 

check http://www.icefaces.org/JForum/posts/list/10166.page

Georges 


But as I explained above you don't even need icefaces, just use a standard

form img like this.

<img src="#{var.image}" id="img" />

I sometimes have problems applying webkit styles to the ice:graphicImage component.

normal css seems fine.
[Email]
michelle2

Joined: 14/Nov/2007 00:00:00
Messages: 449
Offline


We've been designing a native iphone application, it will allow network image sharing and have chat like webmc has.

One thing we wanted to avoid in the design was to have to worry about absolute path names. Images would be transient , stored in application scope until removed or the appserver is shut down.

With that in mind there was no need to save the uploaded image anywhere , the device would upload (share) the image with the web app, the web app would store the image in application scope as a byte Array , which is just the right format for an ice:graphicImage

Here's what we did

Native iphone application calls a servlet in our icefaces application.

The servlet uses java advanced imaging to create a jpeg bufferedImage.

JAI is again used to convert the buffered image to a byte Array

A new ImageItem is added to the item array in an application scoped (singleton ) controller, the unique device id is used as the key.

A sessionRenderer is than executed to update all sessions with the new image info.

The sessionRenderer causes the getItem method in the backingBean to be called which renders a new (twitter ) style line on the page using a couple custom icefaces style components and a ice:graphicImage.

At no time are any files written to the file system. everything is handled in memory.

Here a link that explains it further, same code later today.

http://web.me.com/cannonwc/Site_6/StoryBoard.html


the servlet is attached.


 Filename HttpTunnelingServlet.java [Disk] Download
 Description The java servlet
 Filesize 3 Kbytes
 Downloaded:  1100 time(s)

[Email]
 
Forum Index -> General Help
Go to:   
Powered by JForum 2.1.7ice © JForum Team