[Abandoned] Weather Widget Custom Tile Collection

Per @Michael’s comment above…

It sounds like imgur won’t work since it won’t keep the URLs / image names consistent with what the custom tile is expecting.

PS. I moved your reply over to the original Weather Widget Custom Tile Collection thread so you can get relevant help. :grinning:

I haven’t used imgur before, but it does look like the files get renamed.
Because of that… You will need to change the image references (i.e. thunderstorm = “your_file_name”) and or the file (image) extension (i.e. “png”) in the getWeatherBkgrd function.

NOTE: For imgur - Use the URL: https://i.imgur.com/

1 Like

Hello everyone, Newbie here but can someone explain how do I go about loading the images to a server, I can’t seem to figure this part out to get the animated images, Thanks.

It varies, depending on the hosting provider. Most provide an “Upload” button (select files), and or a “drag and drop” option. Before you upload… Be sure to unzip the file.

A couple (free) options are:
imgur.com, github.com

NOTE : Imgur will rename the uploaded image files - You will need to update the getWeatherBkgrd function (code) to reflect the new file name(s) (i.e. thunderstorm = “new_file_name”).

Thanks for the response Michael, I am new to this so forgive my knowledge issue, I went to GitHub and tried to upload an image but it is saying they have to be less than 1mb, after unzipping to I need to do anything to the files they are named 200, 300 500 and so on, thanks.

You do not want to change the file names (200, 300, etc) - Choose a hosting service and upload the files as is. IF they get renamed… you will have to change the function variables (i.e thunderstorm = “new name”, rain = “new_name”, and so on).


You should be able to upload the images to GitHub - (100 MB Limit)
After signing up for an account and creating a repository… you should see a set of buttons inside the repository that looks like this:

upload

Click ‘Add file’ > ‘Upload files’ which will then take you here:

Click ‘choose your files’ (which will open up the file window) and select the folder which contains the images. Then, drag the entire folder and drop it in the boxed area. After it finishes adding all the files > Scroll to the bottom and click the ‘Commit changes’ button. You should now have a folder (presumably named “images”) containing the images in your repository.

Thanks again MIchael, I did as you mentioned, now question is how do I get the url to put into the weather tile, thanks.

Background image: URL Path

url_path
Dashboard Tile Settings


GitHub:

https://raw.githubusercontent.com/account/repository/branch/folder/

Replace account, repository, branch (usually main/master), and folder (if created) with your details.

Imgur:

https://i.imgur.com/

:exclamation:Be sure to include the trailing /

1 Like

Michael thank you so much was able to finally get it to work i guess I forgot to publish it thanks again for the assistance.

The Weather Widget Collection has been updated to fully support, 34 languages. The complete list with language codes can be found above under Setup.


To update your current widget(s)

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

:warning: Be sure to scroll down and click ‘Update’

4 Likes

It occurred to me that… In order to get (be aware of) a possible update, you would need to visit the community on a regular basis. I’ve updated the Weather Collection widgets, to include an option to be notified (via the dashboard tile) if an update is available.

update_notice

Go into the Developer Tools to update (recommended) your current version (see how above).

Note: The notification option is turned off by default. Go into the tile settings to change it (on/off).

3 Likes

A New Weather Widget (Post-it Note) has been added to the collection. See details above.

2 Likes

Is it possible to CSS increase The size of The text and icons in The horizontal bar? What function should i target?

Christian,
A couple notes on this:
The Horizontal Widget is thought to fill the width of a dashboard (max 10x)


1)You could increase the font size slightly to 1.25vw (currently 1vw) but anything larger… the text will begin to overlap.

2)The max tile dimension (width) is currently 10 - If the dashboard (width/columns) is larger than the tiles width… the font will scale relative to the dashboard, and at some point, become too small to read.

3)You could create some custom tiles that ‘split up’ the week,

Example: Create 1 custom tile for days 1-3 and a second for 4-6. The font size could then be increased appx 3X.

but if your dashboard is greater than 30 columns… you may want to consider a different solution/design approach.

There is a SmartThings driver that would give you a little more flexibility when working with a large dashboard size/columns. You would need a SmartThings account to install the handler and the app to enter the location (ie. zip code or latitude & longitude) and authorize access/add it to SharpTools.

NOTE: Enter latitude & longitude, separated by a comma (i.e. 123.456,789.123), in the zip code setting.

First off, great reply. I hadnt considered this. If this works off The weather station ide mine hasnt worked for a while, dont know why but The old or The new doesnt update The temp. Going to remove and re add this then try these Tiles.thanks again

A New version (V2) of the Weather Widget and Horizontal Weather Widget is available to download. This update includes several additional options/features and is fully customizable.

The import button(s) can be found above.

To update an earlier version

  1. Open the Developer Tools

  2. Select the desired Custom Tile from the list

  3. In the code editor, tap the ‘gear’ icon and select ‘Update from Source’

Be sure to scroll down and click ‘Update’
:exclamation:IMPORTANT NOTE: You will need to edit the tile and update the Unit Measure ( Celsius/Fahrenheit). Your API, Geo Location and Language will be saved.


Features:

  • Icons: Choose from 3 designs (Default/Outline, Solid, Color), with an option to animate the ‘color’ icons.
    icon_type

  • You can customize the Icon Color, Text Color, and If ‘Color’ icons are selected … ALL elements are customizable (i.e. Sun/Thunder, Raindrops, Snow, Broken Cloud).


New Options (Horizontal Widget) include:

  • Weather: Current condition, Forecast (Daily/Hourly), or Both.
    NOTE: Tap the tile to toggle between daily and hourly forecast.

  • Forecast (Days/Hours): Select from 3,5,7

  • Display Style: View weather horizontally in a Row (across) or vertically as Columns in a row.

  • Themes: Select from pre-defined styles or create your own.

  • If you select the ‘Transparent’ or ‘Custom’ theme… You can customize the Background Color, Icon Color and Text Color. If ‘Color’ icons are selected … ALL elements are customizable (i.e. Sun/Thunder, Raindrops, Snow, Broken Cloud).
    NOTE: When ‘Transparent’ is selected… the background color of the Tile will show through.

  • Text Size: Enter a number. NOTE: Decimals are accepted (e.g. 1.5).

  • Time Format: 12HR or 24HR clock.


New Options (Weather Widget) include:


Example: Forecast with Current Conditions (left) or Forecast Only (right)

img4
Example: Weather Tile (Thing) with Custom Tile (Forecast Only)

  • Weather: Forecast (Daily/Hourly) with Current Conditions or Forecast Only.
    NOTE: Tap the tile to toggle between daily and hourly forecast.

  • Time Format: 12HR or 24HR clock.

2 Likes

A New Weather Widget (Analog Clock) has been added to the collection. See details above.

3 Likes

That first screenshot is a really striking visual combination! Nice work!

1 Like

I am a very new user here and can’t tell you how much I appreciate these custom tiles. I had a questions @MIchael regarding the Live Weather Widget. Have the descriptions provided from the OpenWeather API changed? I see in the code that “partly cloudy” is described, however with the API, I am starting to see different descriptions displayed (ie. “Overcast Clouds” or “Light Snow”). More of a curiousity than anything on my part.

1 Like

Welcome to the community @Marz

The code descriptions (e.g. partly cloudy…) are internal references only. The tile will display conditions sent/pulled from OpenWeather

2 Likes