Weather Widget Custom Tile Collection

This is a proof-of-concept for calling the OpenWeather API
The One Call API provides the following weather data for any geographical coordinates (latitude and longitude):

  • Current weather
  • Minute forecast for 1 hour
  • Hourly forecast for 48 hours
  • Daily forecast for 7 days
  • National weather alerts

Weather Widget

This creates a simple tile but the underlying call to the weather API allows you to then create dynamic dashboards (tiles) by adding some JavaScript and HTML.

Options include: Unit Measure (Celsius/Fahrenheit), Language, Text Color, Widget Notification.

download


Live Weather Widget

Background updates based on current conditions and time of day (after sunset).

Options include: Daily or Hourly Forecast, Background Image, Text Colors, Clock, Navigation (back) button, Unit Measure (Celsius/Fahrenheit), Language, Widget Notification.
TIP: Tap (click) somewhere (middle/upper area) on the tile to change (toggle) the forecast (hourly/daily) view ‘on-the-fly’.

NOTE : Background images are not required to use this tile. If the option if not selected, the background color will change based on current weather conditions and time of day.

Background Images (click zip file)
zip

IMPORTANT : Upload image files to a hosting service - Do not rename the provided images. If you decide to use your own/rename images, you will need to update the getWeatherBkgrd function to reflect the file name(s) and or extension (i.e. thunderstorm = “your_file_name”).

download


Horizontal (Header/Footer) Weather Widget

Horizontal 7-Day Forecast

Options include: Unit Measure (Celsius/Fahrenheit), Language, Text Color, Vertical Alignment, Widget Notification.

download


Post-it Note Weather Widget

The days weather forecast in a ‘Post-it note’.
Options include: Post-it Note Color, Text Color, Font Style (Plain/Cursive), Text Size, Note Angle, Personal Message, Widget Notification.
Note: English only

TIPS:

  • Tap on the tile (toggle) to view more details and get the current conditions.

  • Edit the tile (Style) and set the background color to transparent and turn shadow off.

download


Setup

  1. An API key is required to use the tile(s). Go to OpenWeather for information and signup.

  2. Click the import button above to install the Weather Widget Tile into your SharpTools account and click Save

  3. Add the tile to your dashboard, click edit, and enter the required information (API Key, Latitude, Longitude) and optional display options in the tile settings.

Default Settings:
Unit measure: Fahrenheit
Language: English (en)
Text Color: White

Note : The notification option is turned off by default.

Quick Language Reference Guide: English: en, Spanish: es, German: de, French: fr

Supported language codes

• ar - Arabic
• bg - Bulgarian
• ca - Catalan
• da - Danish
• de - German
• el - Greek
• en - English
• fa - Persian (Farsi)
• fi - Finnish
• fr - French
• he - Hebrew
• hi - Hindi
• hr - Croatian
• hu - Hungarian
• id - Indonesian
• it - Italian
• ja - Japanese
• lt - Lithuanian
• no - Norwegian
• nl - Dutch
• pl - Polish
• pt - Portuguese
• ro - Romanian
• ru - Russian
• sv - Swedish
• sk - Slovak
• sl - Slovenian
• es - Spanish
• sr - Serbian
• th - Thai
• tr - Turkish
• uk - Ukrainian
• vi - Vietnamese
• zh - Chinese

7 Likes

@Michael, thanks for sharing, and this is an awesome idea. Showed it to my wife, and my wife asked me to have it on our dashboards. She loves it. Wife approved. :rofl:

2 Likes

For someone who is still learning, will you explain how you turned the weather tile into the live tile please? Thank you

It’s achieved by writing some custom JavaScript and HTML. You would either import/create a new weather tile and or replace the current JavaScript and HTML with the new code. There are specific (identified) areas inside the tile (source code), where to place custom content.

I plan on creating some additional ‘templates’ (JavaScript/HTML) that could be used with this tile and will update this post when they are available.

3 Likes

Didn’t worked for me. Even that I entered the Lat. and the Lon. and the API key I’m always getting
image

When trying to preview.
What is wrong ? I’m not sw oriented , just follow your instructions.

Sorry to hear its not working for you. The pop-up message would only appear if ALL the required fields are empty/blank in the tile settings (not in the source code)

Please delete the previous tile and Import a new instance to see if that changes anything.

New and Updated Weather Widgets.
See above

2 Likes

These are awesome! Have you considered uploading the images to somewhere like github so its easier to use the tile with the backgrounds?

I’ve updated the Live Weather Widget to include an action to change the forecast (hourly/daily) view ‘on-the-fly’. Simply tap (click) somewhere (middle/upper area) on the tile to display the modal. This does not change the default (view when dashboard/tile loads) setting but gives you a way to toggle the forecast without having to edit the tile.

modal

1 Like

Took me some time to find. I’m sharing for everyone that wants to change the language . It can be found here:
https://openweathermap.org/current#multi
in my case Hebrew is he

Didn’t worked for me. Still getting:
image
I’m suspecting that my API key is too long. I have 32 digits, in your example it is only 11 digits. also my Lat, Lon looks like that"
image
No minus sign. If that have a meaning.

@James I’m not in your beta program , can I use Custom Tiles ?

@Shai_Dotan it may be easier for @Michael or others to help troubleshooting if you post a screenshot. Custom Tiles is production released, so you don’t need to be in beta to use it.

Hard to tell for sure, but it looks like the custom tile definition was edited.

When you import a custom tile, you typically would not change any of the settings in the developer tools. You would usually just scroll down and save the custom tile definition. Then go to your dashboard and add the custom tile to it. From there you would edit the tile to add your desired settings for each tile instance.

See further below for steps on how to reset a custom tile to it’s original imported definition.

Example Installation

And configuring the tile…

:warning: It usually takes a few hours before OpenWeatherMap API keys become enabled, so you may have to wait a few hours before setting things up.

Restore Custom Tile Definition

To restore the custom tile to the original definition from the author:

  1. Open your SharpTools.io Developer Tools
  2. Select the desired Custom Tile definition from the list
  3. In the code editor, tap the :gear: icon and select ‘Update from Source’
    image
2 Likes

The tile settings screen shot above is only a representation - The API Key is currently 32 characters (letters/numbers) and the Longitude/Latitude could be a positive or negative number depending on your location.

@Shai_Dotan, I replied to your PM - Your screen shot (tile settings) looks different. I suspect the original code is being changed/adapted?

@Shai_Dotan I updated my reply above with some additional details and example videos. Please let me know if it helps. :slight_smile:

OK !!! THAT’S did the job…
I follow @josh movie and entered the parameters within my DASHBOARD. Before I entered the parameters in the Custom Tile Editor and pressed Preview which didn’t showed nothing.
I used to do a PREVIEW for Media Tiles. I thought PREVIEW work for Custom Tiles as well… apparently not.
Thanks a lot (as usual) for the great support !!!

@Michael, I really love your new widget and it’s "smart background!

However I have gone back to the version based on your prior work. The reason is that the current weather takes so little space on the tile that it’s difficult to read. I haven’t discovered a solution to that. Maybe if I delved into the code I might see how to enlarge it.

I would use the new version to show the hourly forecast, and continue to use the prior version for the daily forecast.

To show what I’m trying to describe, this is the dashboard using your prior effort:

In this dashboard I’ve replaced the current weather info with the new widget:

Shows how you’ve spoiled us: if I didn’t have the previous app I would have eagerly used the new widget.

Thanks for the good stuff!

@Stan_Silverman, Thanks

The ‘Live’ Weather Widget was designed and intended to fill (majority) a screen - All about the graphic! The content will scale but at some point… if the tile is too small (relative to the dashboard) the text may then become unreasonably too small to read.

You could insert your own HTML/JavaScript and create a new widget that is specific to your set up. There are specific/identified areas in the Weather Widget (original) where you can safely place your custom markup.

Here’s an example that may give you some ideas.

img

2 Likes

Thanks Josh,

i’ve got most of that working but can’t get the images to load, iv’e got them saved Here but it keeps coming up with this

any ideas?

Tony

What’s the background image URL path used in the tile editor? Looks like it is not pointing to raw images correctly.