Forum

You need to log in to create posts and topics.

HtmlUIPanel Not Displaying Images

Hi there,

We have been using your Power UI and we are very impressed, well done!

But we do have a small issue with the HtmlUIPanel, we load data dynamically from JSON, some of which contains embedded HTML with links to images, etc.

Below is a sample of the JSON file:

{

"type": "html",

"page": 4,

"inlineHTML": "<p><img src=\"assets/img/positivity/Russell-Brand.jpg\"></p>",

"audio": "",

"video": "",

"video_poster": "",

"socialVideo": "",

"border": "none"

},

We then set the innerHTML of the HtmlUIPanel to this HTML string as follows:

rawImageHTMLGameObject.GetComponent<HtmlUIPanel>().document.innerHTML = session.questions[currentQuestion].inlineHTML;

This works fine for normal text, but for images nothing appears. We thought it may be a pathing issue so we double checked with your docs and examples and made sure everything was relevant to the Resources folder we created in the same place as the Scene.

So the image we are trying to show above is located here:

PROJECTROOT\Assets\Scenes\Resources\assets\img\positivity

We have even tried moving the image to the root of the Resources folder and change the escape quotes to a single quote such as:

{

"type": "html",

"page": 2,

"inlineHTML": "<p><img src='Albert-Einstein-quotes.jpg'></p>",

"audio": "",

"video": "",

"video_poster": "",

"socialVideo": "",

"border": "none"

},

But still nothing appears.

Any ideas?

Any help would be greatly appreciated.

This is really URGENT since we are already way behind schedule with this work.

Many thanks,

David.

Also, why is the HTML text blurry?

 

I have attached a screenshot showing this.

Also on my Android the text is massive so only a few words fit on the screen, any ideas?

Many thanks,

David.

Uploaded files:
  • Android.jpg
  • PC-Editor.png
  • PC-Fullscreen.png

Hello! Hmm and I presume that if you have the image straight in the HTML then it appears correctly? (All UI's are loaded via innerHTML so I'd imagine there isn't a difference and the problem might be with the actual image).

With the text quality - have you got your texture quality set low or are you scaling the UI panel that contains the HTML? Ideally it should have a scale of 1 to avoid it essentially stretching out the image the panel renders 🙂

Thanks for getting back to me, yes the scale is set to 1 on the raw image that the HtmlUIPanel is associated with.

When you say have the image straight in the HTML, what do you mean? You mean by testing with an actual HTML file with the image contained within it? Instead of loading it with the innerHtml as we are doing now?

We need to use innerHTML to keep it dynamic since as I said it is loaded from the JSON.

Unless your UI Engine is strict so we need to make sure the <img> is wrapped in <html> tags? Maybe a header tag too?

As I said in my previous posts, it currently uses:

<p><img src='Albert-Einstein-quotes.jpg'></p>

Many thanks,

David.

 

 

 

So essentially rather than adding it via code and innerHTML, drop <img src='Albert-Einstein-quotes.jpg'> straight in the .html file you're using for the UI just to make sure your src works properly (the "Html File" or "URL" options on the HtmlUIPanel). PowerUI does also have a simple network console under Window > PowerUI > Network so you can see the file requests going out there. Open up that console then hit play.

Internally setting "Html File" or "URL" does the same thing as setting innerHTML, so it most likely won't be any different (and you'll possibly see a 404 on the network console along with the full path it's trying to use). This is more just about cancelling out other portions of your code to try and get to what the issue is.

And on strictness, nope - PowerUI uses a full standardised HTML5 "tag soup" parser, so it's essentially very good at figuring out missing tags or fixing incorrectly balanced ones. You can completely omit <html>, <head>, <body> etc and it'll handle that fine (many of the example scenes do this too).

Ok Thanks but we are not using any HTML files, as I said it is all dynamic and is why we are using the innerHTML property.

I checked in your console and can see that the JPG's have a state of OPEN so it looks like it does find them but still nothing appears?

We are also trying to display SVG files, I presume you do not support these? Since for those it gives a 404 error.

I have attached a screenshot of the console log.

 

Regarding the text quality, how do I check if it is set to low? Everything will be on the defaults. No, we are not scaling the UIPanel and its scale is set to 1. Any other ideas of why it is blurry?

Also, why does it appear very large on my android but on desktop it is normal size?

Any help would be really appreciated.

Many thanks,

David.

 

 

 

I have done some more detective work into this and it appears you do not properly support JPG or PNG format. You only seem to support the PNG files in your demos, not any others.

 

So I am not sure what is different about the PNG's you are using and the many I have tried to use? Do you only support certain dimensions, bit rates or something?

Some special encoding I am not aware off?

I have attached a few of the images we are trying to use, please see if you can get yours to display them? Thanks.

I have checked the Network Monitor and they all load fine with status of 200.

I have even tried changing the district52-base.png file you use in your Sprite Example to see if it would work but nothing gets rendered. So it looks like your control is cashing somewhere internally because it does not properly support all image types or even all PNG types.

Many thanks,

David.

Uploaded files:
  • 640.png
  • 8celebs.png
  • Albert-Einstein-quotes.jpg

Hey there,

JPEG is fine - essentially any format Unity supports at runtime is supported plus GIF too. PowerUI's image system is just wrapping Unity's so I would guess it's more to do with your URLs rather than the images themselves. Unity does have a security sandbox which affects images being streamed from the web on some platforms so you might be hitting issues with that.

Its definitely not the URL's, since as I said your network window shows status 200 so it loads them fine, I have even put my images (PNG and JPEG) into your own example HTML files and nothing is shown at all. Not even the HTML so its as if the images cause an exception to be thrown somewhere in your code, but I have no idea what this is?

Are there any logs or something maybe I could look at?

Many thanks,

David.

Want the latest updates? Check out the repositories.