Weather Tile & Dashboard Examples

Hi my friend @Michael , I just had replace my “old” ADT hub for a new Aeotec one, and I deleted my weather dashboard and now I found there is a DTH update and its GREAT !.. I will recreate my weather dashboard and take advantages from your new DTH, thanks for share !.

There is a forecast display I would like to replicate, but I have not found how, I will appreciate a lot if you can give me some path and tips … The tiles I am trying is:

image

Its really cool: Icon + Day + Weather + Low + High.

Thanks in advance for your kindly guidance …

1 Like

Each day has 2 (1 over the other) attribute tiles (dayIcon / dayShort) - Ex: TodayIcon, TodayShort / Day5Icon, Day5Short

Attribute Steps:

1 Add Things (WeatherForecast) to your dashboard X times.

2 Click the tile menu () and ‘Change Layout’ to ‘Hero Attribute

3 Click the tile menu () ‘Edit’ and change the Primary Attribute to: Chosen Attribute (ie TodayIcon)

Style Steps:

1 Click the tile menu (…) Check the ‘Style’ box and click ‘Style States

2 Click ‘Add State’ and select the Attribute (ie TodayIcon) from the dropdown. Set the ‘Operator’ to: != (leave ‘Target’ empty/null) and click ‘Style’.

3 Check ‘Custom Style’ and create your customization (ie transparent background) OR Select/Create a custom CSS

Tips:

1 Icon: Change the ‘Main Content Size’

2 Days Weather: Change the ‘Main Content Size’ (accordingly) and ‘Main Content Text Overflow’ to Wrap

3 Remove Tile Label: Check the ‘Label’ box and enter a blank space

Note : Depending on your device/OS, Icons may render slightly different than example

1 Like

Greeeat !, I will have a try tomorrow and let you know !..thanks my friend !

Hi! I really like this setup and would want to use it. Is it possible to set up outside the US (i.e no zip code)?

This ‘SmartThings’ device handler should default to your location (if setup) - Zip code is optional.

1 Like

I would also add that @Michael has a really cool collection of weather related custom tiles which you can find here:

They use OpenWeather for the data and the latitude/longitude you enter to determine the location. :slight_smile:

2 Likes

Hi Michael, I have tested DayXShort with wrap mode and I almost have it !..but in the icon tile I cannot get the correspondent icon, I got:

I have seen some screen shots from other users about their IDEs and I have seen the icons are displayed correctly, but in my case in the IDE the icon value has the same codes chars. Im using a mac and the dashboards in iphones, I do not know what is about, I have read your DTH and I found this special chars are in the icon sections, also I read “Do not change this icons…” warning, any idea how to get them right my friend!

Note: The icon of the Weather Tile is displayed ok …

This is my current advance …

THANKS !

@Carlos_Juarez,
This could be a UTF Icons encoding issue, but I’m wondering…

Are you copying directly from the link/site (AWS) and pasting it straight into your IDE console? If so - You need to save the file to your computer and then paste the code into IDE/Device Handler.

1 Like

Okey !.. I was suspicious something about mac… yes I copied and pasted directly from the code in your link posted to IDE DTH editor, tomorrow I will test copying first in a Mac OS text editor before take it to IDE…lets see what happen and keep getting fun …! thanks again brother…

Please SAVE the file to your computer before opening it in a text editor.

1 Like

Hi my friend, I have tried somethings:

1.- Copy DTH code to a Mac Text Editor
2.- Save and close the file locally in my mac
3.- Copy code from .txt file to IDE DTH editor
4.- Refresh DTH for Weather device (I changed DTH and turn it back to Weather DTH to assure updating)
5.- Uncheck Weather device in Sharptools access, update
6.- Recheck Weather device in Sharptools access, update
7.- SAME RESULT

I asked to my daughter for her Windows laptop to make a try, then copy paste the DTH code, I repeated the procedure but I got exactly same result, this is what I see on each step, maybe could be some clues:

In your original code I see this:

In text editor:

In DTH editor:

In IDE device status:

So finally, I really stuck right now, I have seen other IDE screens with icon displayed as supposed to be … I do not have any idea what to do about it , if you can guide me I will appreciate it a lot …again ! Thanks in advance…

UPDATE> I have tried a longshot entering directly in IDE DTH edition the Unicode Hexa from Mac UTF keyboard (alt+code) and now in IDE icons are displayed, also in Sharptools dashboard !!!, what a luck !..but I wonder if this is going to fail thinking about your warning message, or maybe if I can get codes numbers I can go with same codes …

Any thoughts my friend ?

The lucky striker.

@Carlos_Juarez,

If you’re copying and pasting the code directly from the AWS url to either a text editor or straight into the IDE console… the end result will be the same - The file needs to be SAVED (ie Right click > Save as) to your computer (allowing the characters to can get converted).

I will send you a PM with some additional trouble shooting help

1 Like

Thanks @Michael !

1 Like

@Michael I don’t know if it was ment to be or not. But all the short attributes don’t have the ° or F/C in them.

I have to think back, but it was probably a ‘by design’ decision (minimal characters). However, I think the degree symbol would be OK. Let me look at it again. Thanks for the call-out.

1 Like

@Michael I was wondering if you can remember how this weather widget was made if so would you mind sharing how?

This by far is my favorite of your designs.

I used background images that had a portion (right-hand side) that was transparent. This gave the illusion that the icon was ‘hanging’ over the edge. We can still achieve the same look (without the images) with a little CSS.

Here’s the Style Sheet

How To:
Create a New Theme and Add the follow style references

  1. current, icon, botton-left, middle, bottom-right, city
  2. Toggle ‘Advance’ (top right)
  3. Paste in the style sheet in the ‘Custom CSS’ section (at the bottom)
  4. Click Create

Dashboard Configuration:

Sizing Approach: Scalable, Tile Space: No Gap
Theme: Select your newly created theme from the dropdown

Dashboard Example

Add/Edit Tile:
Clock w/Date: Dimension: 2x1

Weather Forecast (10x) – Change Layout to ‘Hero Attribute’
Current (top right): Dimension: 2x2, Style: current, Primary Attribute: CurrentIcon, Secondary Attribute: Temperature
Forecast Icons: Main Content Size: 5x, Style: icon
Forecast Days: Main Content Size: 1x, Main Content Text Overflow: Wrap, Style: bottom-left, middle, bottom-right (accordingly)
Cities: Dimension: 1x2, Style: city

2 Likes

@Michael Thank you that’s awesome!

Sorry for the rudimentary question, but how do I add an image to the tile background?

@JoeT, Welcome to the community

CSS
background-image: url(https://image_location.jpg) - By default, background images are placed at the top-left corner of an element, and repeated both directions.

Other properties that might be used (optional):
background-position: value; Example - top left, center center, …
background-repeat: value; Example - no-repeat, repeat-y (vertical), repeat-x (horizontal), …

1 Like