[Abandoned] Weather Widget Custom Tile Collection

[Michael]

This is a set of widgets that call the OpenWeather API

Admin Note: The author is no longer supporting this custom tile or sharing the code. They’ve indicated that anyone who already has it can continue to use it, but others should seek an alternative solution. We thank them for their contributions.

You might be interested in this alternative:

’Open Weather’ Custom Tile - Current and Forecast

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

7 Day Forecast and Current Conditions

Options include: Unit Measure (Celsius/Fahrenheit), Language, Time Format (12HR, 24HR), Weather (Forecast, Include Current Conditions), Icon Style (Outline, Solid, Color), Icon Animation, Icon Color, Icon (color) Elements (Sun/Thunder, Raindrops, Snow, Broken Cloud), Text Color, Widget Notification.

TIP: Tap (click) on the tile to toggle the forecast (hourly/daily).

---

Live Weather Widget

Background updates based on current conditions and time of day (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)

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”).

---

Horizontal (Header/Footer) Weather Widget

Forecast and/or Current Conditions

Options include: Unit Measure (Celsius/Fahrenheit), Language, Time Format (12HR, 24HR), Weather (Current, Forecast, Both), Forecast Days/Hours (3, 5, 7), Display (Column, Row), Icon Style (Outline, Solid, Color), Icon Animation, Themes, Background Color, Icon Color, Icon (color) Elements (Sun/Thunder, Moon, Raindrops, Snow, Broken Cloud), Text Color, Text Size, Widget Notification.

TIP: Tap (click) on the tile to toggle the forecast (hourly/daily).
NOTE: Custom Background Color must be entered as a hex value (e.g. #2196f3)

---

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.

---

Analog Clock Weather Widget

An Analog Clock and Weather Forecast (includes current conditions)

Options include: Language, Unit Measure (Celsius/Fahrenheit), Clock Display (Temperature, Time, Both, None), Time Format (12HR, 24HR, Roman Numerals), Time Opacity, Time Text Size, Icon Style (Outline, Solid), Icon Color, Face Style (Solid, Weather Ambience, Wood Grain, Transparent), Face Color, Clock Hands (color), Second Hand (color), Widget Notification.

TIPS/NOTE:

• Tap (click) on the tile to toggle the weather (forecast/current condition).

• The Weather Ambience (Face Style) setting will display a color based on the current conditions and time of day.

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

---

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/Icon Color: White

Note : The notification option is turned ON by default.

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

Supported language codes (click to expand)

• 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

[James]

@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.

[Terri]

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

[Michael]

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.

[Shai_Dotan]

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

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

[Michael]

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.

[Michael]

New and Updated Weather Widgets.
See above

[Chris_C]

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

[Michael]

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.

[Shai_Dotan]

Took me some time to find. I’m sharing for everyone that wants to change the language . It can be found here:

Current weather data - OpenWeatherMap

in my case Hebrew is he

[Shai_Dotan]

Didn’t worked for me. Still getting:

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"

No minus sign. If that have a meaning.

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

[James]

@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.

[josh]

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

https://imgur.com/LKGleEI

And configuring the tile…

https://imgur.com/i7zZLh7

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 icon and select ‘Update from Source’
   

[Michael]

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?

[josh]

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

[Shai_Dotan]

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 !!!

[Stan_Silverman]

@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!

[Michael]

@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.

[Tony_Hobbs]

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

[James]

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