Display generated image


I'm trying to display a dynamic image on a webscreen. The image is generated by custom java code, so it isn't stored somewhere on a webserver, nor it is stored in a database. How do I have to implement this?

Hi bvado,

First of all, welcome to the Community!

I would say that the cleanest way to do what you want is to have the Java code generate the image, store it (albeit temporarily) on an Entity and then having the page include an Image of type Database that will fetch it.

Quick question: When is the Java code executed? Does it have to be synchronously with the page load?


Thank you for your quick answer.
That is the way I tried, but probably I'm missing a step somewhere.

The java code is executed during the opening of a detail page of a product and is only executed once, not x times for each product.
The image uses the "Binary Data" field from the entity as Attribute, but it doesn't load.

When I use the Action from the extension in a download action, the image is correctly generated and downloaded.
Am I correct in assuming you are calling the extension inside the screen's Preparation action, and then storing the return value (binary) in the DB with a call to CreateDynamicImage (assuming your image Entity is called DynamicImage)? Then, if you use a DB image with the ID you get from that call it should work.

Can you share an OML with just the screen that does this so I can look at it? No need to include the extension itself or the rest of the eSpace.


In the extension, I created an action "GenerateImage" in which I implemented the creation of the image, assign it to the entity data and return that result. In the preparation stage, I call "GenerateImage" (which returns an Entity - I tried with a Structure as well - containing the binary data) so, no, I didn't use CreateDynamicImage...
To be honest, I wouldn't know anyway where I could implement the image creation if I would use that action...

I have to come back to you anyway on monday, since we're currently having network issues and the database is currently unavailable, so I can't publish anything new anymore
[Edit] You answered meanwhile so I will adapt this reply :)

What you seem to be missing is the insertion of GenerateImage.Output (if your out variable is called Output) into the DB so that the image request inside the page can fetch it later.

I cooked up a very simple (and incomplete) eSpace that uses a binary image (embedded in the eSpace) to create a DB image and then show it on the page for you to have an idea of how it can be done.

You would substitute the reference to the embedded jpg binary (i.e. Resources.Desert_jpg) for the return value of your call to java (GenerateImage.Output if that is the straight binary, or something like GenerateImage.Output.MyEntity.ImageBinary if the return is an entity WITH the image as a binary attribute), and it should work out the same.

Let me know,

bvado wrote:

I'm trying to display a dynamic image on a webscreen. The image is generated by custom java code, so it isn't stored somewhere on a webserver, nor it is stored in a database. How do I have to implement this?


 Hi bvado,

There's yet another option than doesn't force you to store the image binary.
The image widget has several types as you can check here:  Overview of Images

Here are the steps:
  1. Create a new webscreen, e.g.: DynamicImage
  2. On the preparation of that webscreen invoke your extension action that returns the binary of the image (you'll need to pass to this screen the necessary parameters for you extension action)
  3. End the preparation with a download node instead of a end node.
  4. Set the values for the download load passing the binary content as the output of your extension call and setting the content type and filename. You'll probably want to set the Save property to no.
  5. Back to your screen and the image widget set it to use an external source in the type property.
  6. Now the trick is to know what URL to use, which should be /youreSpacename/DynamicImage.jsp - DynamicImage because this is the webscreen you created, jsp if you're installation of the Agile Platform is in the Java Stack, if it is not than you'd use .aspx instead.

And that's it. You can now consider adding some cache to the webscreen so that you don't calculate all the time the image for the same inputs.

Hope this helps you out.

Thank you, André,
That solution is working perfectly, as I prefered not to store the images in the database.

I'm using the Java stack, but the page isn't accessible through .jsp but through .jsf. The input parameters can be passed using ? as expected, so that means the dynamic image is now configured to be external to the url "/youreSpacename/DynamicImage.jsp?parameter=value"

Thank you all for the quick responses.
A JS Solution is in the forge: http://www.outsystems.com/forge/component/578/fileuploader-image-preview/