Free Meteored Weather Widget = Cool Dashboard Tile

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

Creating a Weather Widget

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

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

    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:

    • 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.
9 Likes

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

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!

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

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.

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

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

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"

1 Like

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

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.

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

1 Like

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

2 Likes

Great find/contribution, thanks very much for sharing!

1 Like