Dashboard Theming (Custom CSS) and Mounting Hardware Ideas

I’m most amazed that you found a tablet with that width and length :wink:

Nice work!

1 Like

Oh, I use my phone to control the house. I stitched together the full app from a couple screenshots.

I used an app called RoomScan to make a blueprint of my house (well, first floor, but I don’t have any smart stuffs on my second floor). I then exported it and made it pretty in a photoshop-like app (Pixelmator). Lastly, I edited the CSS to position devices (I target devices by the device GUID which is in the DOM, making this not fragile to device ordering) and position it on the blueprint. That, plus some more CSS to change some icons, resize some others, hide some labels (since I don’t need most of them anymore) and a few other tweaks.

5 Likes

I hope one day we will be able to offer you a sane way of achieving the same result.

5 Likes

Speaking of sane, I wanted to share here with the people who gave me so many good ideas. You guys were very inspiring!

Here’s what I’ve been able to patch together in the past 2 weeks, along with excluding all my Z-wave stuff from ST, including it to a new network, and setting up reliable logic.

This isn’t final, more a trial by me to learn Control Pages.

Sorry I can’t fit it all in a screen shot, as it’s designed for a Retina iPad and the resolution is bigger than my monitor!

9 Likes

Yup… we want to be able to offer as rich of an interface as depicted (though retaining some trademark simplicity), subject to the effort vs benefit ratio (i.e., based on number of users, etc.).

1 Like

Id pay for a feature rich 6.0

2 Likes

That’s really nice. Can’t imagine that on a 10" table on the wall.

1 Like

The first 2 official Fire tablet mounts and an Echo Dot mount!

Now, to decide their mounting location!

2 Likes

anyone knows a way to set a webpage (i.e. smarttiles) as home screen?
i’m not referring at bookmark it but to have one of the home screens the webpage with the dashboard.

1 Like

At one point I was color coding my tiles based on location, so I had an upstairs color, kitchen color, family room, basement and a few color based on a device with multiple sensor data points.

Visually it was all over the place and I abandoned the concept.

I then sought out a way to color the border of the tile, but the only option changed the color between the tiles, which is just one big background color.

I found a way that is close to what I want, leaving the theme tile colors intact, but adding a small color board to group items/locations.

The magic code is

{border: 3px solid purple; box-sizing: border-box;}

3px is the thickness of the border

Solid is the border style which could also be:
none; hidden; dotted; dashed; solid; double; groove; ridge; inset; outset; dotted solid double dashed; dotted; solid

Purple is border color and the value can be in Hexcolor.

“box-sizing: border-box” is the key to creating a border around the tile.

Examples:

.tile {border: 3px double #669900; box-sizing: border-box;}

.tile[data-device=‘Your Code’] {border: 3px solid #d2d2d2 ;box-sizing: border-box;} /* Side Light */

.tile.momentary {border: 3px solid #CC9900; box-sizing: border-box;}
.momentary.active[data-device=‘Your Code’] {border: 3px solid #d2d2d2 ;box-sizing: border-box;} /*Outside Timed */

.alarm {border: 3px solid #FFCC00 ;box-sizing: border-box;}

.tile.power {border: 3px solid purple ;box-sizing: border-box;}

I hope people can find this option useful.

6 Likes

That looks awesome with the borders.
Thank you for sharing this.

I might switch my background to white to match my tiles and then use the borders to separate by room.
Then I’ll have to add a special legend tile… First thoughts have me using a throwaway URL tile that when clicked links back to the same dashboard and changing the icon to be my color-code legend.

Possible to color power tile 3 different colors, one for <0, =0, >0?

Less than zero?

Grid power meter reports < 0 when I’m sending excess solar back into the grid

3 Likes

Ah. Okay. That makes sense. I was thinking in terms of a standard smart power outlet or something similar.

.tile.power {background-color: green;}
.tile.power[data-value=‘0W’] {background-color: white;}
.tile.power[data-value|=’-’] {background-color: red;}

Maybe this if your <0 starts with a negative symbol.

Hey! Just wanted to say thanks for SmartTiles. I’ve occasionally played with it in the past, but now I just put my first kindle fire up on the wall next to the thermostat with it. Your simple looking, complex acting display tech is really awesome. Soon they’ll be one out in the pool shed, next to my bed, down the basement… :wink:

4 Likes

i have 2 issues i cannot find the answer:

  1. how can I move a tile to a desired position, like for example position: relative; top: 15px; left: 20px?
    it doesn’t matter what values i enter, it remains in the same position :frowning2:
  2. how to remove the spaces between tiles? i would like to have all tiles connected to each other.

thank you!

I haven’t noticed this from the screenshots I’ve seen so thought I’d share, you can add weather radar to SmartTiles. You just have to poke around your favorite weather site (try local tv station) and find the animated gif you like. Avoid the interactive maps that let you pan around, try the weather blog or animated thumbnail image at the main website. Also at a lot of local TV stations, you can find the 7 day forecast as an image, or a nice weather/traffic camera image.

Then you can either:
(1) right click in chrome, open image in new tab, if it looks good, copy that URL
(2) sometimes the gif is behind an overlay, so once you find the image you want, right click it in chrome and Inspect, to the right you will see the html and look for the gif URL buried in the html, copy it.

** Test the URL in browser window and make sure the image loads as expected before going into SmartTiles. Extra text or spaces around the URL caused big problems in SmartTiles for me. The URL should start with “http” and end with “.gif” or “.jpg”

Now go into SmartTiles - Video Stream - Stop Motion and paste it in.

12 Likes