Free Meteored Weather Widget = Cool Dashboard Tile

💬 Lounge
1

Since my Wunderground weather map has stagnated (last updated Sept. 20, 2023), I have been looking for alternatives.

I found a cool weather widget from https://www.theweather.com/widget/. There are plenty of customization options to fit most/any style dashboard.

Example Screenshots

weather1
weather11436×723 113 KB

weather2
weather2818×289 25.7 KB

Creating a Weather Widget

  • Visit https://www.theweather.com/widget/ webpage.

  • Here is a screenshot showing the widget preview and associated options.

    weather3
    weather31119×873 76.4 KB

    1. Change Location and Language
      • Select language, desired weather location, and alter the text shown at the top of the widget.
    2. Format
      • This one has a lot of options.
      • Select the number of days to display in the tile.
      • Adjust how the tile will display (I used the "width" option).
      • The other formats are just as cool (depending on your preference and dashboard style).
      • Here is the "normal" mode; showing 7 days (for example).
        weather4
    3. Content
      • Select which attributes to show in the weather tile.
      • Note: Selecting "complete" in step 2 (Format) will yield the most attributes.
      • Here is a widget with all attributes enabled.
        weather5
    4. Style
      • This is the really fun part!
      • Select the icon palette to use (lots of neat options here).
      • Adjust various colors and fonts used in the widget.

  • Once all settings have been adjusted; scroll down and enter an email address.

  • Scroll to the bottom of the page:

    weather6
    weather61101×367 34.3 KB

    • Select "An image" for the widget; and click the "Generate Code" button.
    • Copy the source attribute for the image (see screenshot).

  • Now, in the Hubitat dashboard, create a new tile, set it to the "image" template, and paste the link to the image. Set the refresh rate as desired.

Notes

  1. There are no usage limits from what I can see.
  2. The rendered output is an image.
  3. The image updates every day.
13 Likes
2

I went to the website theweather.com and couldn't find how to get to the widget option from home page. Once I clicked on your link straight to https://www.theweather.com/widget/, I could get to the creation options. However, Brave browser didn't like the page for some reason. There were no scroll bars. Switched to Chrome browser... all good. Thanks for the find.

1 Like
3

Thank you. I updated my links in the OP. The links were correct; I just typed the base url. That was definitely confusing. No clue about Brave (not very "brave" if you ask me... lol). But glad you got it working in the end!

4

https://weatherwidget.io/ is pretty cool too if you don't need all the details.

1 Like
5

Yeah, I saw that one in my travels.
The problem is it requires a script element to render; it's not a basic image.
Have you inserted this into your dashboard? If so, I'm curious how.

6

Thank you, i forgot where i got this!

The basic 7 day has been on my dash for a long time and has worked well

1 Like
7

I create an Html page and save it to the hub file manager and load the html file to the iframe device. something like this.

html file

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="refresh" content="120" />
<meta http-equiv=”Content-type” CONTENT=”text/html; charset=utf-8?>
</head>
<body style='margin:0;padding:0;'>

	
<!--Paste the code from weather.io here!-->
 <a class="weatherwidget-io" href="https://forecast7.com/en/49d28n123d12/vancouver/" data-label_1="VANCOUVER" data-label_2="WEATHER" data-theme="weather_one" >VANCOUVER WEATHER</a>
<script>
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src='https://weatherwidget.io/js/widget.min.js';fjs.parentNode.insertBefore(js,fjs);}}(document,'script','weatherwidget-io-js');
</script>
<!--End code from weather.io here!-->


</body>

dashboard looks like this

Capture
Capture1787×214 367 KB

the background of the weather.io changes depending on the weather.
I have the weather tile refreshes every 120 minutes with this in the code
meta http-equiv="refresh" content="120"

2 Likes
8

What do you mean an iframe device?
Is that an additional app you use?

9

Not sure where I copy this iframe driver from. I take no credit for it.

preferences {
        input("src", "text", title: "iFrame Url",  required: true)
    }
metadata {
    definition (name: "googleIframe", namespace: "srp", author: "srp") {
        capability "Switch"
        attribute "myFrame", "text"
    }
}
def on() {
    sendEvent(name: "switch", value: "on")
    sendEvent(name: "myFrame", value: "<div style='height: 100%; width: 100%'><iframe src='${src}' style='height: 100%; width:100%; border: none;'></iframe><div>")
}
def off() {
    sendEvent(name: "switch", value: "off")
}
def installed() {
    on()
}

create a virtual device with the driver above.

Go into the device detail and add the file location of your html.

Capture
Capture1637×900 104 KB

When you add the device to your dashboard. Select attribute as your template and "myframe" as your attribute.

Capture1
Capture11011×730 182 KB

2 Likes
10

That was the missing piece.
Thank you so much!
You've opened up a whole new world for me.
Thank you.

2 Likes
11

Great find/contribution, thanks very much for sharing!

1 Like
12

Not sure if anyone else is having this problem. But my dashboard image link is now always blank. I went to the site and recreated a fresh image widget but on Hubitat dashboard it is blank.

Any suggestions. This was working since Oct/23.

13

My apologies for my delay.
It is still working fine on my end.
Did it start working for you again, or is it still broken?

14

Mine has been coming and going for a couple of weeks now.

15

Okay, I'll start watching mine more closely.
Admittedly, life got super busy over the past few months, and I've been neglecting my hubitat.
This is unfortunately all-too-common with free API's.
The service works great for a while, until the person who maintains the server/application moves on to other things.

If someone can catch it, when it's broken.
Take the url and paste it into your browser window.
See if there is any error reporting being generated back to the browser window.
This would help us in determining what the root cause might be.

16

Thank you for responding. It's working now, not sure what the problem was, just started up again. It has gone out/in, but not frequent enough for me to worry over.

Edit: ok then, so I checked just after posting and its out, go figure!

17

What do you guys have set as the "Refresh Interval" in the tile options?
I set mine to 3600, which calls the API once per hour.

It's possible if your limit is less, it's hitting a threshold (if his server is tracking IP, for example), and is timing out until the next interval begins. The documentation mentions nothing of this; I'm just saying as a developer, it's possible.

So maybe try setting your refresh interval to a higher value, and see if the issue persists.

18

Mine was 2000, now 3600 , set in dashboard.
With it not working, URL copy and paste just gives broken image picture.
Android tablet, no idea how to find error information.

19

Okay, good. That goes into alignment with my thoughts.
That'll be a good test to see if a difference is noticed.

Okay, well, if you're feeling super brave.
Right click on the page with the broken image after pasted into the browser; and select "Inspect" or "Inspect Element" (this is the developer console).
From the window that slides out; make sure you are on the "Console" tab.
Now, reload the page (from the URL you pasted into the browser) and see if anything is logged in that console.

20

Got mine working :slight_smile:

image
image848×451 101 KB

1 Like