[Abandoned] Weather Tile & Dashboard Examples

Carlos_Juarez · June 28, 2021, 8:29pm

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:

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

Thanks in advance for your kindly guidance …

Michael · June 28, 2021, 11:55pm

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

Carlos_Juarez · June 29, 2021, 12:26am

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

Christian_Ytterstrom · June 29, 2021, 1:35pm

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)?

Michael · June 29, 2021, 2:45pm

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

josh · June 29, 2021, 2:59pm

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.

Carlos_Juarez · June 30, 2021, 12:33am

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 !

Michael · June 30, 2021, 1:42am

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

Carlos_Juarez · June 30, 2021, 1:47am

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…

Michael · June 30, 2021, 2:11am

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

Carlos_Juarez · July 1, 2021, 4:41am

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.

Michael · July 1, 2021, 12:27pm

@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

Carlos_Juarez · July 3, 2021, 5:06am

Thanks @Michael !

just_jake · February 6, 2022, 1:05am

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

Michael · February 6, 2022, 10:46am

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.

just_jake · February 6, 2022, 5:58pm

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

Michael · February 7, 2022, 4:31pm

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

current, icon, botton-left, middle, bottom-right, city
Toggle ‘Advance’ (top right)
Paste in the style sheet in the ‘Custom CSS’ section (at the bottom)
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

just_jake · February 7, 2022, 6:52pm

@Michael Thank you that’s awesome!

JoeT · February 7, 2022, 7:44pm

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

Michael · February 7, 2022, 9:37pm

@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), …