I’m trying to figure out how to show a image from an external url. ChatGPT is some help but only comes with a pretty complicated iframe construction, same goes for a image as background.
Last time I worked with html it was a simple img scr=”img-url” and body background=”img-url” but can’t get it to work.
That seems to be right. Maybe the image is an unsupported format or too lage?
Nope, works fine on firefox browser and in a iframe. Image is on my homey and reachable with the http/ftp app
Ah my confusion: you were talking about an ‘external’ image, so I assumed an image not locally stored on your Homey.
Are you using the Gallery app to store images on your Homey?
If so, check this post on how to reference images in that app:
No, not useing the gallery app. The Ftp/Http server app. But a http://myhomeyip:8000/image.jpg should work also ? It does when I enter the url in firefox…
Strange indeed. As a test, are you able to get the widget to show a random image from the internet (via its URL)? And what if you try a local PNG image instead of a JPG?
Nope, and nope.
What does work (even after I stripped al the useless ChatGPT junk) is :
<iframe id="Stooklijn" width="300" height="350" src="http://192.168.200.128:8000/imagefile.png " style="position:absolute; inset:0; border:0;"></iframe>
I just tested to display a random image from Wikipedia in an EDW status widget. In my case it works.
It’s this image:
https://upload.wikimedia.org/wikipedia/commons/thumb/9/97/Rijkswapen_der_Nederlanden.svg/2560px-Rijkswapen_der_Nederlanden.svg.png
Result in the status widget:
Flow:
Ok, you actually build a whole html page including html doctype body etc. around it ?
I was in the assumption it wasn’t necessary. Might explain why it only works when I use iframe ?
I don’t think that is necessary. I am just following good practices for building HTML pages. If you don’t have separate styling, you can start directly with the table definition:
This simplified flow:
Results in:
The image is displayed, but the colors are inverted (as I use dark mode). In my prior example I corrected the inversion, but since I removed the styling code, this is the effect.
That’s funny, mine does no invertion.
I now remember why I hate HTML codeing. Wondering if a good pagebuilder would help, ChatGPT isn’t.
Last websites I created where CMS like Joomla…
Maybe Homey leaves the contents of iframes untouched. Icons and images used directly in the status widget are inverted when switching between light and dark mode (at least in my case). Similar like the device icons (black when in light mode, white when in dark mode).
Finally ! Success !
Which basicly is :
An image with plotted curve on a tranparent background in black or white *:
Image put in a Widget and added as overlay a table with values (The ‘hairpulling and clawing the wallpaper from the walls-bit)
…some calculations
The ‘Stooklijn’ for my heatpump visualised. Now if I change settings I can see in Homey what the effects are, instead of needing my excelsheet with graf…
*Need to figure out how to switch, depending on light or dark theme.
Great to see that you got it to work.
I noticed that there is a trailing space in the image name. Could that be the reason you could not get the image displayed in the table (without iframe) in your prior attempt?
OK then I am out of thoughts 
. I have no idea why it won’t work in your case without using an iframe.
Guess what, this works….
So even though I call the image on Homey through a ‘external’ URL, it doesn’t work…
So much for hosting image on your own Homey..
Right…
Well, not sure whether you want to use it, but the Gallery app I mentioned before does work. It just stores images locally on your Homey. And you can use them in the status widget.
Oh well, this works for now.
I just sent you a log of my device with a text field updating values.
