Project

General

Profile

Actions

Support #1931

closed

Rendering of dynamic image content

Added by Anonymous almost 11 years ago. Updated over 10 years ago.

Status:
Closed
Priority:
Normal
Assignee:
Target version:
-
Start date:
05/24/2013
Due date:
% Done:

0%

Estimated time:

Description

I need to demonstrate the capability to populate a canvas with pixel values that are generated in the application. So far I have only found examples for display of images read from disk files.

Currently I have an application with a class derived from WPaintedWidget. In the paintEvent handler I would like to use an instance of WImage or maybe WPainter::Image, and then set the pixel data based on the results of an image generation routine I have in the application, and then call WPainter::drawImage to get the resulting image to the browser.

Is there an example of this or can anyone suggest another Wt strategy? Thanks

Actions #1

Updated by Wim Dumon almost 11 years ago

Hello,

Not sure what you want to do, but I assume you have pixel data and you want to show it on screen. I also assume you have the pixel data compressed as png (or jpg or another format that a browser understands). The easiest way to send this to the browser without saving it to a file first, is to use a WMemoryResource in combination with a WImage. The WImage will display the contents of the WMemoryResource.

Is that what you want?

BR,

Wim.

Actions #2

Updated by Tom Puckett almost 11 years ago

Thanks for the response.

Currently I am generating RGB pixel data with a rendering engine that runs on the server. I suppose it could be converted to a compressed format, if necessary, but I would have guessed that the framework might support the transport of raw pixel data to a canvas, and automate/hide the compression details, no? Sorry but this is my first work on web / browser issues so context is foggy. Is there any Wt functionality for me to do the compression?

This application is somewhat interactive, so there will be user input coming from the browser, and a generated image goes back to the canvas as fast as the framework will support. So performance is a goal to support the interactive nature of the application. The images are going to be fairly large and I see on the WMemoryResource reference page that this is intended for small resources, please comment on whether this is a constraint. I will try to get something happening as you suggested but if you have any sample code beyond the extremely short example in the reference page it would be much appreciated.

-T

Actions #3

Updated by Wim Dumon almost 11 years ago

Hi Tom,

There's a number of things I would like to note:

  • browsers are optimized to work with compressed images such as PNG, JPG, GIF when the data is provided by the server. If we're talking about full image updates, I'd recommend to compress your generated picture (lossless in a PNG if necessary), and use a WMemoryResource in combination with a WImage to render the compressed image.
  • on the question of how to compress an image: there are libraries for that (libpng,libjpg, ...)
  • Can Wt do all this work for you? Yes, you can also do this through the Wt interface, by rendering to a WRasterImage (which will generate a png), and then serve that rasterimage to the browser. Code example is available in the widget gallery, but that one generates pdf instead of png: http://www.webtoolkit.eu/widgets/media/pdf-output#media/pdf-images You can render every one of your pixels by calling drawPoint: http://www.webtoolkit.eu/wt/doc/reference/html/classWt_1_1WPainter.html#a9159b8ae72494b4973642143296daa96

The WRasterImage inherits from WResource, so it can be passed directly as source for the WImage. Added benifit is that your code is easily portable to render on a pdf device, which could be usefull if you also want report generation functionality in your application.

Best regards,

Wim.

BR,

Wim.

Actions #4

Updated by Koen Deforche almost 11 years ago

Hey,

WRasterImage has support for directly setting pixel values using WRasterImage::setPixel, bypassing the vector rendering engine that is abstracted by WPaintedWidget and WPainter.

http://www.webtoolkit.eu/wt/doc/reference/html/classWt_1_1WRasterImage.html#a96888a696b1f98c2d36fda556595ab08

And WRasterImage will indeed handle the compression for you. I think this is the best option for what you want to achieve.

Regards,

koen

Actions #5

Updated by Koen Deforche almost 11 years ago

  • Status changed from New to Resolved
  • Assignee set to Koen Deforche
  • Target version set to 3.3.0
Actions #6

Updated by Tom Puckett almost 11 years ago

Thanks to you both for the suggestions; I will experiment with WRasterImage.

Yesterday I found an interesting sample using WVirtualImage. Is this a realistic alternative? Are there any performance advantages to either technique, considering that the ultimate objective is to render frames as fast as possible since this is supposed to be an interactive user experience?

-T

Actions #7

Updated by Koen Deforche over 10 years ago

  • Status changed from Resolved to Closed
  • Target version deleted (3.3.0)
Actions

Also available in: Atom PDF