Weather Widgets

Questions
#1

Hi Bill,
How can I add a weather widget ?!
I’m trying to use web browser control but it’s not working :

Thank you again

#2

Attached is an example showing how to load an HTML widget from weatherwidget.io
WeatherWidgetIO.hrp (6.7 KB)

The body of the HTML you can get from the WeatherWidget.IO website. The rest is standard. You can change the background to whatever you wish. I’ve got it set to #333333. The line “initial-scale=1.0” is something needed if you plan to run on iOS.

weather-widget
weather-widget1744×1693 632 KB

Open Weather Map
Weatherwidget.io
Ring camera in web browser control
#3

Thank you very much again Bill!!

#4

This does not seem to load correctly has something changed in the way the widget code is being read?

#5

Nothing has changed. I just tested this & it is still working for me.

#6

Hi, I downloaded your example and the Remote Designer crashes when I try to test run it.
I also tried doing on my own and got the same issue. Any suggestion?

UPDATE: After I disabled and made unvisible the web browser component, I got asked to download some runtime related to Windows Edge. After that everything worked!

#7

Hello Bill,

I’m new here, and really enjoying the THR experience! Thanks for all the effort you put in!

Question on the web browser and using it to load a weather widget - how do you get rid of the white border around the widget (my page has a dark background)? This is visible in the simulator and on the app on my iPad.
image

Thanks
Lawrence

2 Likes
#8

Hey, I have the same question. This white padding annoys me. Anyone knows how to remove it?

EDIT: I noticed that Bill did this and it is visible in the gif he posted. It seems that the code has to be:

<html>
<head>
<style>
body, html {
background: #000000;  [of course you put any color you want here]
}
</style>
<meta name="viewport" content="initial-scale=1.0" />  [you need this line only for iOS scale]
</head>
<body>
[here goes your html widget code, as you copy it from the website]
</body>
</html>
#9

Change the color specified in the line background: #000000 and select a color that matches your page background or widget background (if the widget background is static)

#10

Yeah, I managed to dig it out from that gif, as I mentioned above.
I also thought I will paste the whole code here as absolute newbies like me might really get confused when they don’t have those lines just put out there.
Thank you for being ready to help!