TUniImage Draw and Update

[nimarufa]

I need to draw updating  data to my web application. Due some problems I cannot move all drawing code to JS. The all drawing is done in some library to Bitmap. After that the bitmap is assigned to TUniImage . 

As i understand unigui does the following:

1. Prepare bitmap on server's cache folder (some jpeg file).

2. Clear existing image.

3. Transfer new bitmap to client

4. Show it in client's browser.

At the step 2-3 the image became clear white in browser and the picture is flicker when updated.

I'm attaching small test case.

I'm using TUniImage because i'm using this drawing on desktop and on mobile platform.

Have any suggestion to workaround/minimize this effect?

 

ImageDrawing.zip

[nimarufa]

Got 1 Solution!

[nimarufa]

Replaced UniImage with UniHTMLFrame

In UniFormReady add

  UniHTMLFrame1.HTML.Text :='<div ID="img_container" style="width:100%; height:100%;"><img src="blank.jpg" id="preloaded_image" /></div>';

in Timer event (when need to repaint picture)  - actually not paint to Image but paint to Bitmap or PNG then save it to file. Then create an TImage in JS and fire AJAX when client loaded image (this will done in background!!!)

  FName:=UniServerModule.NewCacheFileUrl(False, 'png', '', '', url, false);
  oPNGDest := TPNGObject.Create;
  try
    oPNGDest.Assign(bmp);
    oPNGDest.SaveToFile(FName);
  finally
    oPNGDest.Free;
  end;

  UniSession.AddJS(
    'var my_image = new Image();'+
    'my_image.onload = ajaxRequest(' + self.Image.JSName + ', "ImageUpdated", []);'+
    'my_image.src = '''+url+''';'
    );

Create AJAX event to HTMLFrame.

  if( SameText(EventName, 'ImageUpdated') ) then
  begin
    UniSession.AddJS('document.getElementById("preloaded_image").src = '''+url+''';');
  end;
  

Now the image is in browser cache and it will display very fast, just assign .src to image url.

 

Hope this help someone who use pictures with updating data or drawing to image.

Glad to hear any optimizations to more speed up this code.

 

[jaromir]

Hello nimarufa,

 I use Your code to replace TUniCanvas which makes GDI leaks for me.

I think that You don't need to create var image. It is enough to call (after png save):

UniSession.AddJS(Format('ajaxRequest(%s, "ImageUpdated", ["ImageUrl=%s"]);', [fFrame.JSName, lUrl]));

And in Ajax frame event:

if SameText(EventName, 'ImageUpdated') then
  UniSession.AddJS(Format('document.getElementById("preloaded_image").src = "%s";', [Params.Values['ImageUrl']]));

So it is not necessary to create global url variable.

[nimarufa]

Hi jaromir! I think in this way precaching will not work. I need ImageUpdated to be called _after_ the png image has uploaded to cleint's browser cache.

Maybe i must declare

 

var my_image = new Image();

one time, somewhere, but i don't know there to do this.