Great idea. Now I need to find the time to do it for my devices.
Awesome work! Are you willing to share an example of the code? Did you have to manipulate the images to a specific size?
That’s the biggest challenge I get. I still have not figured it out properly. I think I get it working then if I resize my browser and the tiles adjust it goes pear-shaped.
I forget where I read the recommended size. I grabbed my images from a stock site. Can’t remember where off the top of my head. It had toggles for what size you wanted to download.
I then uploaded them to tinypic account and used the Url reference it gives to plug into the CSS in smarttiles.
I did all this a little while ago so my memory is little rough. I can look when I get back to my desktop it’s all on there. Not home right now so be a little bit.
I’ll post a screen shot of tiles on and off so you can see and my CSS I used. There’s probably a picture of it here someplace in some of my old post.
2 Likes
Here is where they talk about the recommended size of icons.
4 Likes
Okay, I got my icons from:
If I remember right when I downloaded them I selected custom and kept trying different sizes till I found the size that fit my layout best.
I then uploaded those icons to my tinypic account and used the Url it gives you in my css.
Here is 2 images of the tablet with various things on and off. Their not very good just taken quickly with my phone.
I didn’t want to post all my CSS as it would be cluttered. Here is a piece that shows the icon addressing to get them to show.
/Fish Tank Plug/
.tile.switch[data-device=‘9eca6a90-f8ec-4852-9f33-3c576854f483’] .icon i.active:before {content: url(http://i64.tinypic.com/2m3s3.jpg);position: relative; left: -5px; top: 25px;}
.tile.switch[data-device=‘9eca6a90-f8ec-4852-9f33-3c576854f483’] .icon i.inactive:before {content: url(http://i67.tinypic.com/35j2p.jpg);position: relative; left: -5px; top: 25px;}
I was going to go back and work in more icons. Just never got back to it.
I was working from my phone so sorry for any typo and errors. Any questions just ask. If I don’t know the answer someone else will.
4 Likes
That looks good.
Here where I have gotten my Dashboard to know for my tablet. I used the code above from #Arnqvist for the background and tile colors and the text.
I made all of my icons and for off they are at 50% opacity.
6 Likes
I didn’t see where this has been answered so here is what I used to resize my radar tiles. Match your data-link-i # to your radar tile.
.tile.video[data-link-i=“1”] {width:840px;height:480px;} /* Video Tile 7x4 */
These are on a secondary dashboard that just shows local radar and they fill up the screen in portrait mode. You can adjust the width and height to suit your needs.
You can also enlarge the image and shift it so only the “area / county” you want to see is centered in the video square of smarttiles.
/Video Tiles Size and Position Edits/
.video.tile[data-link-i=“1”] .video-container {
overflow: hidden;
}
.video.tile[data-link-i=“1”] img {
height: 130%;
left: -15%;
position: relative;
top: -5%;
width: 130%;
}
.video.tile[data-link-i=“2”] .video-container {
overflow: hidden;
}
.video.tile[data-link-i=“2”] img {
height: 200%;
left: -85%;
position: relative;
top: -80%;
width: 200%;
}
First is my forcast image . I zoomed and shifted it to hide some of the station logo and framework around their image.
Second is my radar image. I had to select a large region (what was available) and zoom , shift it to center the image around our local counties vice the whole region.
4 Likes
Very good. I have a need for this, thanks.
Hey guys…
New thread on Fire Tablet battery monitoring linked below. Not particularly high priority, but figured I’d cross-link the post for ideas…
I tried adding this to my css and it didn’t change anything so I would assume I did something wrong.
I changed the “1” to “2” because the radar tile in the second url I have under Stop Motion video streams.
Just a polite PSA folks. Remember that when v6 comes out (ActionTiles) there will be no CSS customization. I’ve invested a lot of time myself so not knocking anyone. Just reminding all that things will change.
4 Likes
Thanks for helping folks prepare for this change, @Nezmo.
@625alex and I repeat that we keep a constant watch on this thread/Topic and are incredibly amazed at the creativity, effort, and sharing that’s taken place. You all are maximizing and optimizing your SmartTiles configurations and help others do the same. We’re super appreciative of it and don’t take it for granted.
Obviously, getting ActionTiles released to the broad public is taking all our time and effort, including all the pesky administrative details, and having great interactions with our Beta testers.
We have a list of nearly 100 “Feature Requests”, but we’ve also ranked them by priority and will be polling our Customers after the launch to confirm this.
###Customizability will not fall off our radar…
Our advice in the meantime is to keep your ideas in mind, feel free to experiment and do “conceptual prototyping” using SmartTiles, keep sharing, and … do what you can to help promote us during the ActionTiles “kick-off” so that we’ll be well resourced to maximize new features in this and other areas.
5 Likes
Great post.
1 Like
Not sure but try
.video.tile[data-link-i=“1”] {width:840px;height:480px;} /* Video Tile 7x4 */
EDIT: I also just noticed that what you posted of what you tried you were missing the 1st period? Could be typo on what.you tried or what you said you tried?
Try it in a fresh/clean Dashboard for testing. I noticed in my Main Dashboard it was erratic depending on other tiles and their placement. Once I got it right in a test Dashboard I incorporated it into a new Dashboard. You might also check the Preferences>Video Tile Size (Small/Medium) as that seems to make a difference.
1 Like
Wanted to share mine as I’ve finally got it mostly cleaned up and looking decent. Thanks for all the inspiration and snippets of CSS I’ve grabbed from here and the SmartTiles website. Here’s what I did to get a mounted tablet in the hallway where we enter the house from the garage.
Hardware
- Cut the drywall.
- Added a recessed outlet with USB charger receptacle. – Had to pull wiring from elsewhere (not from the pictured switch) because the switch didn’t have a neutral.
- Used the pad tab wall mount – but had to attach it to something raised in order to make room for the charging cable and the recessed outlet lip – so attached 1/4 inch plastic piece with drywall anchors, then mounted the pad tab on there.
- Plugged in angled charging cable
- Used old Nexus tablet and have Smarttiles, Tasker (to wake upon motion), Airfoil Commander (Home audio speaker selection with Airfoil & Airplay) and Spotify (using the Connect option to control the PC running Airfoil and distributing sound throughout the home). Would love if I could have Airfoil Commander and Spotify controls visible on the same screen with Smarttiles – any screen/app splitter out there for Android?
- Added some picture frame spacers on the back so it wouldn’t wobble when touched.
I have an extra Android phone hanging around and would like to put it to use in another location…any easy options our for mounting? My current recessed outlet is probably too large and would like a bit of an easier project overall.
Regarding the dashboard design:
I’m new to CSS, so spent a bit of time trying to get the icons and button backgrounds to my liking as I wanted a more consistent color scheme, but still identify groupings by colors. Icons are mostly from Icons8.com, though I’ve also doctored up some of them – most were downloaded or I sized at ~60 pixels. Backgrounds are merely shapes and gradients that were made in Powerpoint. Images were uploaded to Tinypic.
For the most part, icons are dim when inactive, but icons that could have a different image do as well (door close/open, window close/open, garage closed/open, light bulb off/on). I can’t figure out how to do the CSS on custom modes I’ve created – such as: I want “Vacation” mode to have an airplane taking off instead of just showing the word “Vacation”. I’ve got it to work for “Away” & “Night” because those were created by SmartThings.
Hoping to add an IP camera, Skybell and maybe a door lock later this year and would like to include them on the dashboard as well.
Any other suggestions for the dashboard??
Please note: I have a few extra ghost sensors at the bottom of the dashboard that I can’t get rid of…let me know if any solves!
4 Likes
You should add some sparkling diamonds to your wife’s (I’m guessing) crown. 
Did she put you up to this?!?
haha – whatever makes her put up with this home automation stuff (especially once I start cutting into the walls like for this project :-P)
1 Like