This question, while web based, is something that can probably be answered by folks intimate with the QtWebKit, since it involves browser technology, the user of Canvas APIs, perhaps SVG APIs, and the HTML img element.

I need to create a web page which contains an image control that gets updated at 30 frame per second, or perhaps more quickly. The communications protocol for doing the update could be a browser pull technology, such as AJAX, or a web push technology such as reverse AJAX or web sockets. The web server will be for an embedded platform, very light weight, not likely to have scripting support, written in C++ or C. The client side will contain JavaScript, which would receive the updated pixel matrix content and render it visually.

I need to be able to change the pixels on the browser display, which is arranged in a fixed 250 x 250 pixel grid real time, without display flashing. At the 30 fps rate, I would need to change potentially each bit in the 250 x 250 pixel image programmatically, from a black color to a non-black color, or from a non-black color to a black color.

I do not anticipate having to scale the size of the pixel representation for various display resolutions. The content will represent overlaid lines that are rendered else where, so increasing the size must maintain the look of a continuous line. Perhaps the grid could be made larger in pixels, but the pixel dots would have to track the scaling to maintain line appearance continuity.

I have considered using a JavaScript based scatter chart, but that seems too heavy weight for what I need to do, and it has to be fast without flicker between updates.

One consideration is to simply use an image (HTML img element), and have the server compose a proper image file representing the content, have the browser update the image at the frame rate, but that approach seems again to be too heavy weight and may require more messaging than desired and network traffic.

I can not cache the image tiles in advance as they are generated on the fly on the server. I was pondering direct drawing using Canvas APIs or SVG APIs as opposed to supplying images to retrieve on the server. The data to be transferred in notionally similar to a bitmap file, using one bit per pixel (1 bpp), no color map other than an ON color which is uniform for each frame, and an implicit OFF color as black.

There is some information related to using Canvas APIs to draw single pixels which seems to be really drawing a single line, or vector based. I want to accomplish a bit of the same thing, but it will be a pixel array, 250 x 250 pixels, single color for ON pixels, black color for OFF pixels, need to be fast enough to keep up with a 30 fps rate. In the desktop environment, I would composite the contents to a memory resident bitmap, and then do a BitBlt to the user interface. I am trying to accomplish similar goals in a thin client environment, maybe using Canvas.putImageData().

The other option to drawing the content on the browser is to create a standard image, say a bitmap file on the server, which could be used with perhaps a standard HTMML <img>element. But in this case, a larger BMP file would be pulled or pushed over the network at the frame refresh rate, which may not be as efficient. I would prefer to keep the JavaScript side as simple as possible and have higher processing on the server side.

Anybody have thoughts or experiences of a similar nature?