How do you limit the size of an iframe?

Third party integrations HADashboard
1

I have an iframe widget that is calling an animated .gif. in my layout I have tried to limit it to a 2x2, however it’s not shrinking the .gif to stay inside of the 2x2. inside of HA it shrinks it to fit in the frame, but not in HAhashboard. in hadashboard I have to drag it around to see what’s on it.

is there anyway to have the .gif shrink to fit? it’s get a new gif from weatherunderground so I can’t just resize the gif. I was hoping to have hadashboard shrink it to fit inside of the 2x2.

2

at this point you cant change the size from anything inside the iframe.
normally you get scrollbars if the page is bigger then the webpage.
but for pics you can resize. (and you say its a gif)
but the questions is if an animated gif also would work, but you could try.
in the docs https://appdaemon.readthedocs.io/en/dev/DASHBOARD_CREATION.html#iframe

there is a link to https://czm.io/posts/2013/04/google-image-resizer/
which can be used to resize an image by changing the url.

3

ok thanks for the info. this is a animated gif I am getting from the weather station:
https://icons.wxug.com/data/weather-maps/radar/united-states/columbus-georgia-region-current-radar-animation.gif
so they update it frequently.

which bring up the next question, I see lots of folks using a weather radar and forcast and they have it resized on their hadashboard. so where are they getting that from? or are they using something other another widget?

4

most of them use weather from a sensor in HA and put that on their dashboard as weather widget.

but there are way more weather widgets on the net that can be used with iframe.

you can google for “online weather widgets” and you get more options.

1 Like
5

I went through this (kind of still am) and here are ones that I looked at and liked. I ended up creating a www folder in my main folder, and then creating an html page for each one. I then put them all on a dashboard and navigated with my iPad. It is important to note that the widgets looked different on my computer vs the iPad. Then I just picked the one I liked the most.





https://weatherwidget.io
https://www.willyweather.com/widget/create.html?sid=5c746c93675ec
1 Like
6

Would you mind sharing the html and .dash on how you did it?

7

If you don’t already have a www directory in the same directory as your configuration.yaml file, go ahead and create one.

Almost all of the widgets will create the html code for you. Save this as a file with anyname.html inside the www folder you just created.

Now in your dashboard that you want put this in.

nameyouwant:
    widget_type: iframe
    refresh: 900 (you can put anything you want here...it is in seconds)
    url_list:
      - http://ipofhass:8123/local/anyname.html

and finally in your layout just reference it and give it an appropriate amount of space.

also if you want you can put two (or more) urls, one for the forecast and one for the weather, in the same iframe. The refresh time will then cycle through the included urls.

1 Like
8

tman75, I have a directory in config/www but when ever I put a .html file in there I can’t call it.

http://192.168.1.17:8123/config/www/test.html only brings me to the main pain. http://192.168.1.17:8123/www/test.html doesn’t work either.

I always get a 404 not found. is there a way I have to enable that to be published?

9

Never mind I figured it out. /config/www/test.html is http://192.168.1.17:8123/local/test.html

now of course I am back to the same issue with having the make an .html fit in the panel size though.

10

I am not very good with web coding. I used a “spare” dash I made for testing out things. Then I just mess around with the size until it looks good. Mine actually had 6 different weather widgets and I let my wife pick which one she liked the most. Buy in is a good thing!

11

I figured out how to do the image files. but not the java script.

image was easy. I’m lost on the java

<html>
    <body>
        <img src="https://media-beta.wsbtv.com/photo/MAP/27381361/27381361_Position9_660_500.JPG" style="width:480px; height:200px">
    </body>
</html>

I put the file in config/www/weather.html
pointed my iframe to
-http://HAIP:8123/local/weather.html

this works perfectly. the style didn’t do anything in the script tags

12

What java?

13

Instead of using the img line I was using the script line from the dark sky widget:

14

Landed here is a Google search. I know its a 2 year old thread but want to note to future finders. Just use a picture card, and it will resize it.

15

Can you give an example on how - I can’t figure it out.