Problem with images and html5/javascript version

[Vicente Aristizabal Ospina]

Hi Genlogic team,

When I insert an scalable or fixed size image in thee graphic builder and then open it in a browser using theHTML5/Javascript module, everything appears ok (the other resources, widgets, etc)  except that the image doesn't appear. I have tried with .jpg and .png formats, also in Base64 encoded string. But none works

Thanks for your time

[glg_devel]

The most probable cause is using an absolute image path. When an image file is selected in the Graphics Builder using a file browser, the file browser returns an absolute path to the image file, which is stored in the image's ImageFile attribute. The absolute path will cause problems if the drawing is deployed in HTML, or if the project directory is moved to a different location.

To fix it, change the image's ImageFile attribute to a relative path relative to the drawing location. For example, if the drawing and the image file are located in the same directory, use the image file name without a path. When the drawing is loaded, it will search for image in the same location as the drawing, making the drawing portable.

To debug the problem when the drawing is loaded in a browser, open the browser's Developer Tools and check for error messages in the Console window. If you click on the Network tab and hover the mouse over the image file name, it will show the URL used to load the image. You can try loading this image directly by pasting this URL in the browser's address bar to see if the browser can load it.

If you still have the problem, please provide the value of the ImageFile attribute and the errors displayed in the browser console.

[David Giraldo Cano]

Hi!

Thanks for replying so promptly. I'm taking over Vicente on this matter within our team.

We've already tried with a relative path for ImageFile both within Graphics Builder and JavaScript, also we've tried with .jpg and .png formats. Within JavaScript we've been reassigning it with SetSResourceIf("ourWidget/ImageFile", './image.png', true) and SetSResource("ourWidget/ImageFile", './image.png'), calling the Update() method afterwards. It's also important to note that there are no errors within the Console and that the Network inspector shows that our image is being retrieved from the root of our localhost.

Is there any chance that this issue is related to the size of either the image or its viewport?

Thanks again!

- David

[glg_devel]

The size of either the image or its viewport should not be a problem. I assume that ourWidget in your "ourWidget/ImageFile" path is the name of the image object in the drawing, and not the name of its viewport, is that correct? If it's so, please send us a test case we could try to sup...@genlogic.com and we'll check it out.

Thanks

[David Giraldo Cano]

That is correct. I've sent an email with one of our tests as per your request.
Thank you

[glg_devel]

The image was not appearing because the application didn't handle image loading messages.

In HTML environment, images are a loaded asynchronously. When the GLG drawing containing images gets displayed, it generates requests for loading images. When the images got loaded, the application gets notified by receiving a GLG message with the ImageLoad format.  In order to provide more control over rendering for applications with fast periodic updates, the drawing doesn't get automatically updated when each image is loaded. Instead, an application can invoke Update() when it receives ImageLoad message.

If an application has periodic timer-based updates, the next periodic update will render the image when the image gets ready. The test case you provided doesn't have periodic updates, and the image gets rendered only if the drawing is resized:

function StartProcessDemo(viewport) 

{

   viewport.InitialDraw();                 // Generates image loading requests

   UpdateProcessResources();     // Set some initial drawing resources

   viewport.Update();

   // The application will get notified about loaded images only after exiting this function.

}

To get the image properly rendered on the initial appearance in an application without periodic updates, it has to add an Input callback and handle ImageLoad messages in it:

function StartProcessDemo(viewport) 

{

   viewport.AddListener( GLG.GlgCallbackType.INPUT_CB, InputCallback );

   UpdateProcessResources();     // Set some initial drawing resources

   viewport.InitialDraw();

}

function InputCallback( /* GlgObject */ viewport, /* GlgObject */ message_obj )

{

    format = message_obj.GetSResource( "Format" );

    if( format == "ImageLoad" )

        viewport.Update();

}

That should solve your problem.

----------------------------------------------------------------

As a side note, it is more efficient to invoke UpdateProcessResources() before InitialDraw() and eliminate the Update() call after it, as shown in the fixed example.

In the original example, the drawing gets rendered first by InitialDraw(), and then rendered the second time by Update() after changing resources. The only exception is for resources that get created only after the drawing is drawn, which is only the case in complex drawings.

[David Giraldo Cano]

We weren't aware of the nature of the object and the need for a callback on that specific message, we were able to find the regarding section on the documentation after your assistance.
Thanks for the help!

[glg_devel]

Great, you're welcome!