[Abandoned] Weather Tile & Dashboard Examples

[Michael]

I’ve seen a few topics and posts, looking for a weather app and or ideas. I have a device handler (SmartThings) that includes: Current Conditions, 7 Day Forecast, Icons, Custom City (3) Forecast and Severe Weather Alert. In addition to adding the information to a dashboard… you can also use it in a ‘Rule’ (e.g. If temperature is greater than X - do this), there’s even an attribute called ‘Rain’ (currently raining) which returns a true/false (e.g. If Rain is True and Window is open - do this) or ‘ForecastForRain’ (e.g. If ForecastForRain is True and QPF >=.25 - don’t run the sprinkler).

The device handler comes with a few settings/options
Current Version: 3.2

Location: (Zip Code / Latitude,Longitude) Defaults to location
NOTE: Enter Latitude separated by a comma,Longitude (e.g. 51.529,-0.234)
Update frequency: (optional) 15 minute default
Display measure units (i.e. C/F, MPH/KPH, etc.): Default is Off
Display measure symbols (°, ↑↓, %): Default is Off
Display weather forecast as (Icon, Phrase, Both) Default is Phrase
Default alert message (Message to display when there are no alerts): Default is ‘none’
Check for precipitation on this day (Today, Tomorrow, Following Day): Default is Today
Show precipitation day (Added to precipitation data): Default is Off
Additional Locations (Zip Code / Latitude,Longitude): Default is New York City, Los Angeles, Denver

Weather Device Handler
Open link and right click Save as… to your computer.

How to create the DTH:
Login to the SmartThings IDE, click My Device Handlers, click Create New Device Handler, click the From Code tab and paste in the code. Click Create, Save, Publish (For Me).

Then goto/click My Devices, New Device and fill in the fields (leave the Zigbee Id blank) - select the WeatherForecast from the Type drop down and click Create.

Note: Device Network Id can be anything… just make it unique.

Then… Open the SmartThings app, find the newly created device, click on it and change the settings if you want (hamburger menu - settings). Last step would be to add it in the SharpTools App (under temperature sensors).

Special Note: If you already have a previous version (WeatherForecast) installed - You can update to this version by…

Login to the IDE, open the previously create device and paste in/over the old code - Save - Publish. Then goto/click My Devices and click on the device/name you previously installed - scroll to the bottom and click Edit - Update. You can then update the device settings in the smartthings app (i.e. measures, forecast display…) and you will need to update it in the SharpTools App - Simply click through (next/done).

Notes:
Attributes are available after adding it (Thing) to your dashboard and changing the Layout to ‘Hero Attributes’ and selecting the primary and secondary (optional).

Precip Type, QPF and Type+QPF values are based on the reported precipitation type (i.e. rain, snow) and app settings (e.g. Tomorrow) - Snow Range and Forecast for Rain are also based on the app settings (3 Day option).

QPF Attribute: Check the ‘Show Decimals’ box

If NO Precip Type is being reported… The value for this attribute will be shown as: ‘N/A’

Change the Main Content Overflow option to reflect the desired tile appearance - Collated content is formatted.

Depending on your device/os, Icons may render differently than in the examples.

---

Besides the device handler, I’ve included some examples and the CSS to create these.

Note: These examples use background images (url required). You can find additional examples here, that do not require an image.

Dashboard Settings:

Size: Scalable
Columns: 10
Spacing: No Gap (required for examples 1 & 2)

CSS:
Weather Example - CSS
After creating your Theme and adding in the Custom CSS - You will need to add the following style reference to your Theme.

ex1, e2, ex3, ex4, ex5, ex6, ex7, ex7left, ex7right, ex8, ex9, ex10

Assets: (right click the image to save)

tile_divider.png

weather_bkgrd.png

current_temp_bkkgrd.png

weather_image_1.png, weather_image_2.png, weather_image_3.png

Edit Mode - Tile Dimensions

[George_Vassilakis]

Thank you for this guide. I am trying to re-create the first example but I guess I am somehow lost.
I have added the Device Handler and I have successfully sync the new device with Sharptools.

I have added 2 devices - as based on the “Edit Mode” I need 2 tiles of the same device.
I then have changed their layout to Hero attributes but I am unable to get the results.

Any thoughts of what I am doing wrong?

ps. i don’t know what to do with the CSS file sorry. I have tried to add the text into my theme, but I am not sure if that worked

[Michael]

@George_Vassilakis Sorry - Example 1 uses both the Weather Tile and Hero Attribute - All other examples use the Hero Attribute (only).

How To Create Ex 1:

1 Create a Theme under ‘Manage Resources’ > Turn on Advanced (upper right) and paste in the CSS code/file. Next… Click Add Style (do that 4X) and edit the style name for each to: ex1, ex2, ex3, ex4 (just need the reference) > Create

2 Create a Dashboard > Select Configuration > Turn on Advanced (upper right) - Set ‘Tile Space’ to No Gap and under ‘Theme’ - select the theme you just created > Save

3 Add the ‘Things’ (Weather Forecast) to your dashboard 5X. Then change the layout on 4 of the tiles to ‘Hero Attribute’.

4 You should now have 1 (1X2) Weather tile and 4 (1X1) Hero Attribute tiles. Next: ‘Edit’ each tile and change the Style to: Top left = ex1, Top right = ex2, Bottom left/center = ex3, Bottom right = ex4.

Note :
If you don’t want to see the Header (city) and Footer… Click Configuration > Edit Theme > Add/Remove Customization to ex1 and Select ‘Header Color’ and or ‘Footer Color’ and set the color to transparent - To hide all other header/title (hero tiles) - Edit the individual tiles > select ‘Label’ and enter an empty string (i.e. tap the space bar).

Hero Tiles: Select the appropriate Primary Attribute (e.g. TodayShort) and change the Content Size to 1x and the Overflow to Wrap

[George_Vassilakis]

Thank you Michael. I am almost there. The only tile that is not matching is the weather tile (Top Left). I get the full tile including the city the sunrize hour etc… How do i change it to match your example?

[Michael]

After you add the customization style (i.e. Header Color/Footer Color) reference to ex1 - You probably need to then click on the appropriate style (header/footer) and change the color option to transparent.

[George_Vassilakis]

I dont think my issue is the colour - take a look below

The weather tile different than yours…

[Michael]

@George_Vassilakis, Changing the color value to transparent, would have done the trick. Instead… I’ve created a new style sheet for you that will force (hide) the title and footer in the weather tile, along with the title for the hero tiles not to display - This also includes the divider (no image needed).

Remove/Delete the previous Custom CSS code (not the Theme) and replace it with this: Example 1 CSS
NOTE: Keep the previously created style references (e.g. ex1, ex2, ex3, ex4)
Be sure to change the Overflow to Wrap on the Hero Tiles

[George_Vassilakis]

Now it works great! Thank you so much for your support!

[Carlos_Juarez]

Hi @Michael, you have made a really cool stuff my friend, your weather dashboard really rocks ! Thanks for share ! I hope yu can help me with some guide and tips…
I have tried adjust it to my personal dashboard in iPhone 3 tiles wide, but I have some issues I do not know how to solve it, trying to understand your guides and CSS instructions but my tech knowledge is limited about it. I think I almost get it, but I have 2 issues to do to get there:

1. How can I add “Feels Like” data just below of Temp (blue circle) and how can I take up the “Weather” data to take it to a better centre of the circle?

2. How I can get that day of week as a title in the forecast tiles (2x1) and get a bigger size of it?, how can a skip each data row? to read as separated lines each data and not just a continuous line (like in your sample) (Weather, High, Low, Precipitacion (there is a typo …“Percip”) and Humidity
   Thanks again in advance my friend…I would like to share with the commuinity the final result !

[Michael]

@Carlos_Juarez,
First - Thanks for spotting my typo (UGH!) - I’ve uploaded a corrected version.

I’ve attached a couple example that you may be interested in (including CSS)

Example CSS
Add Style reference op1, op2 to your Theme.

How can I add “Feels Like” data just below of Temp (blue circle) and how can I take up the “Weather” data to take it to a better centre of the circle?

Option 1 (CSS) - Hero Attribute: Positions the Temp and Weather towards the middle. Unfortunately… I currently do not have an attribute that includes both the current temp and feels like into one - I may add it later.

Option 2 (CSS) - Weather Tile: This includes the current temp, feels like and the weather icon.
Note: I’m not sure if your ‘circle’ is part of the background image or the tile but the css code included creates a circle (no image url). Delete that declarations (i.e border-radius) if needed.

How I can get that day of week as a title in the forecast tiles (2x1) and get a bigger size of it?, how can a skip each data row? to read as separated lines each data and not just a continuous line (like in your sample) (Weather, High, Low, Precipitacion (there is a typo …“Percip”) and Humidity
Thanks again in advance my friend…I would like to share with the commuinity the final result !

I can’t dynamically change the title/label. Its possible to create a rule and variable that updates to a device attribute but for now… I don’t have a separate day of week attribute (Its part of a forecast summary)

Forecast summaries are formatted to break at specific points but will read out in a row, unless you change the ‘Content Overflow’ to wrap.

Your iPhone dashboard looks great!

[Carlos_Juarez]

Thanks a lot my friend, I struggled a little with this, but after 3 hours looking why nothing is happening in the dashboard even I enter the CSS code I understood that I have to create a new style “Op1” …haha… great learning…

I almost there:

FORECAST TILES:
For Forecast tiles (also 2x1) I modified the content size (2x) for left tile trying to fit all stuff but now it seems too bigger, how can I set b.e. 1.5x to try a better fit ?
It seems Forecast Long is the data that you are using in your example (the days of the week are in Upper case letters). And looks like in wrap mode display is jumping lines correctly. I noted in your example there is a blank line space below the day of the week and another blank line space below weather, how did you do that?

Also I would love add a tile only with the weather icon, that could be done ? UPDATE (after 1 more hour)—> I DID IT !!!

Thanks for share all your knowledge my friend !!

PD: I have noted that sometimes “TodayHigh” data is missed, some tip about it ?

[Michael]

@Carlos_Juarez,
Glad to hear you figured it out - Yes!

Tips:
If you plan on using Custom CSS, create (‘+Add Style’) a style in your Theme and use a ‘targeted’ approach.

Doing so will:

Allow you to target a specific tile type by creating a variation of the element. Add a double dash, theme-style, and your style name:

.tile.weather.- - theme-style-custom-style-name {css-instructions}

Otherwise

.tile.weather {css-instructions} – Will apply to All tiles of this type
.tile {css-instructions} Will apply to ALL tiles

Note: Use lowercase with no spaces when naming.

---

Forecast Tiles:
1 Create (Add) 3 styles called forecast1, forecast2, forecast3 and add this CSS to your theme. You will then need to change the image url for each. Now that you’re a pro at this… adjust the font size and or position if necessary.

2 It appears you may have an earlier version of the device handler (why your spacing is different). If you want to update… The link (Device Handler) at the top of the page has the most recent version and there are instruction on how to update the device.
Note: This update also includes a change to the daily High temperature. It will no longer report null (occurred at appx 15:00).

[N_J_H]

Really neat, I’m playing with this quite a bit this morning.

For your first example, I’ve found some overlap with the first tile (comprehensive daily), so that I have to extend it to 1x3. That gives me room for a fourth day under that block - is there a way to add a fourth day of weather in the handler? I’m pretty inexperienced, but I tried making some changes I thought appropriate to the code (day4Long, etc. etc.) but couldn’t get anything to show.

Thank you very much for this, really - I think it’s a real bangup job.

[Michael]

Short answer is Yes.

I’ll update the DTH to include a 5 Day Forecast (plus current day), and will update this post, once its available.

[N_J_H]

Great thanks! I managed to make some progress - for some reason in a new dashboard there was overlap, but in my primary dashboard, no overlap.

Thanks again, I’m enjoying the trial and error and learning a bunch about dashboards through this effort!

[N_J_H]

Here’s a bit what I’m going for. What I’m still trying to figure out is the background color I want for the tiles. That is a work in progress because I have no idea what I’m doing there. Somehow I managed to get the two semi-transparent colors there by toying with the CSS code. I figured it out by just using rgba coding instead

[Michael]

Using rgba is a good (readable) approach. (153,153,153,.25) = Grey with 25% Transparency

FYI: You CAN add a transparency value to a Hex, by adding a 2 digit value between 00 and FF #99999940 (not as straight forward).

[Carlos_Juarez]

Hi, I like and enjoy it !!..Thanks for share your knowledge @Michael , I remembered years in University and my first years as programmer a long time ago (Pascal, Cobol, C and DBase …ha ha…yes Im that old ) Play with DTH and CSS code to get this weather dashboard that I personally think its great !, want to share with Sharptool tribe. To get it to the next leveI I imagine could be very cool if I can integrate weather icon correspondent to the each forecast tiles (below the day of week), can it be done ?..

[Michael]

Unfortunately, No. There aren’t any device capabilities for image attributes. I do however have exposure to icon codes and could possibly, at a future ‘Feature Release’… dynamically change a media tile from a rule/variable and display it on a dashboard.

Awesome job on your dashboard @Carlos_Juarez - Thanks for sharing!

[Michael]

A new version (V3.0 [2021-02-27]) of the weather device handle is now available. Updated information and link can be found at the top of the page.

---

Reminder:

After creating or updating your device handler…

1)Open the SmartThings app, locate your device and change the settings as needed.

2)Add/Update Device for SharpTools - VERY IMPORTANT!

• New Device:
  Add the device in the SharpTools App (SmartThings) under ‘Temperature Sensors’ or by checking the device and ‘Authorize’ SmartThings under Manage connections in Account (SharpTools) Settings.

• Update Device:
  Update the device in the SharpTools App (SmartThings) - Simply click through (next/done) or Re-‘Authorize’ under Manage connections in Account (SharpTools) Settings.