I'm trying to do something similar but struggling with getting the picture size correct to sit under the 3 columns of tiles visible on my Iphone. what dimensions did you end up with? I have it going through Google photos as well. https://photos.app.goo.gl/r7GSuGjjTmGxPgop7 (my attempts here)
Go to whatismyscreenresolution.net and it will give you what you are after. For example, for my phone, it told me it was 414x896, so in my layout I made a rectangle of that size and then just scale it to fit my layout. I then exported a photo using the rectangle as "frame".
thanks, that does help, but the image does a weird sizing thing when i look at it on phone vs desktop, looks completely different so it makes an overlay of devices difficult. Anyone figure this out?
This sounds like a grid settings issue. I documented the process in my Guide to HE Dashboard write up.
Thanks for the link! Useful into there. I did not have the grid set up properly (now I do) but the issue of some tiles overlapping the modal seems to be brought about by a line of css I added:
.tile { -webkit-backdrop-filter: saturate(3) blur(20px); }
when I remove it, everything is fine. When it’s there, the "Change mode to:" modal for example is overlapped by any tile added to the dash after the "Mode" tile, which brings about the modal. 
Grid setup seems not to affect it.
Talking about the grid setup, the coloring of cells in the mini-map confused me briefly initially, I expected the filled (green) cells to indicate placed tiles / occupied cells and empty (light gray) cells to indicate the available grid slots rather then green indicating availability. Hope we can boost Hubitat’s business enough for an investment in some kind of drag-and-drop solution in the future ;).
Using smartly you can add your mobile devices (both portrait, and landscape) to the calibration section and it will size your dashboard correctly. smartly will create a custom CSS entry for each of your device.
I had no idea about Smartly. Thank you - just duplicated my dashboard to run off of Smartly! Lots of the aesthetic choices I’m going for are squarely shared with Smartly for both the overall dash look and esp. the layout inside specific tiles. The few things I prefer about the default dash styling are easy enough to tweak (larger & full-size tiles, font). Smartly does remove the awkward margin from the right which is great (I do prefer to see a sliver of any off-screen tiles as an indication that it’s not the end the dashboard).
I think I understand. You would need to create “device specific” dashboards: one set for your phone and a different set for your desktop; more work but possible. You would then need a landing dashboard different on your phone and on your desktop.
I don’t run into that problem as I only use my phone for dashboards.
1 Like
Have you seen....
Anything you want to do over and above smartly's default can be done with simple CSS. smartly 1.8 (2.0 pre-release) exposes tile attributes in such a way that makes CSS targeting easier and more effective. Even something gimmicky like making the tile rotate 360 degrees when turned on.
.tile.switch.on {
transform: rotate(360deg);
}
have you tried targeting selective tiles instead of all of them? Maybe try them one by one until you find the one creating the issue, and them we can target it with something else. Try
.tile.dimmer { -webkit-backdrop-filter: saturate(3) blur(20px);
.tile.switch { -webkit-backdrop-filter: saturate(3) blur(20px);
and so on.
Have you seen....
Woah. I missed that. Need to read through that thread more. Installed through HPM; need to figure out adding a virtual device part... There should be drag-n-drop out of the box really...
have you tried targeting selective tiles instead of all of them?
Just tried more specific selectors like .title.dimmer {…} and the behavior seems to be the same. Not a huge deal though - "Mode" is the only tile I have that spawns a modal.
Thanks for suggestions.
ok, feeling better about this now--love the Smartly solution. Need to work on the text for the ater sensors, and will likley swap out the radar to get some additional controls space. but good for now.
![image|690x415] lighting with the new sliders (upload://2TSWcFGxbQ43nDcrl06J7tKU98e.jpeg) and air quality details
5 Likes
I've seen a couple dashboard that show current traffic maps. How are people adding it to the dashboard? I have only been able to add weather radar maps from the local news website.
I use a google maps url.
https://www.google.com/maps/vt/data=gHboVBsVg09JBnGgPCGS4Wpk_WyhYlaBxc3lKcJd7OI7210L7LF9P-Mnsa7JzxwWnu6cKKpMmG1pqx_8cxKweIebRzXxY6bDSgJaQL7b9Kp7Ht8J0OzqeIiKKZiD-uLn2mOyo4zWJj65dnEFrgA4BjLdZ0A1r91XP2LmYQkWFffCe5L05ZzBGWleT5FjB_b2bA
3 Likes
Thank you! I was wondering how to get it as an image file. It looks like you are using the image that appears in the google search. Initially I was trying to use the URL once you go into google maps.
2 Likes
What sources (Links) are you using for the weather tiles? Thanks
Those look like local weather charts from ABC.
Weather underground and ABC are the ones I'm using
I am using Hubigraph for the weather tiles
can you tell me the configuration ie options size for your dashbaord as i cannot get the windy radar to take up an entire tile..
ie
unfort. i am limited by the width as i need it to display correctly in my lg v20
I've had to use Smartly for the formatting--and has an option to remove scroll bars and fills the window. It works magic...
ya im using smartly too but still not working for me.. will try again.
ya the problem is i need to increase tile size to 145 and 90 for other tiles and that screws up the radar one.
got it with a little mucking around thanks
1 Like
I need help figuring this out:
I have a tile for HSM and currently it look like this:
I want to remove the text and only show the icon:
How do I do it in the CSS?
I already tried
#tile-3.tile-primary {visibility: hidden;}
and it hides both icon and text.
I also tried secondary, tertiary, title with no success.
Can someone help me?
- I won’t go the smartly route.
