Dashboard Theming (Custom CSS) and Mounting Hardware Ideas

You could always create another page and link to it. That way you’d have a whole page of just your battery percentages and you wouldn’t need to see them on your main page.

2 Likes

This is what I have done, it includes all power related information. I also have one for Climate and Security.

1 Like

Would it be “sufficient” to have a Tile that just displays the “lowest” battery condition of a set of Things?

It would be fairly easy to throw together a Virtual Battery Device that is linked to a simple SmartApp that sets the Value to the minimum. Heck … The SmartApp could cycle through battery values, but there is currently nothing in Capability to change the Label at the same time.

Wow… this has me brainstorming … Tiles that cycle through values!!!

2 Likes

What about cycling through battery(ies) if < X otherwise it shows ‘all good’

1 Like

For at least the “Proof-Of-Concept” phase (and to avoid being too distracted from SmartTiles V6 development…), we have to stick with the concept that SmartTiles works “only” (with a few exceptions) with SmartThings official Capabilities (only a subset of them, actually).

The battery Capability only has one Attribute: % Capacity (numeric, 0 to 100). So without changing SmartTiles, we can only read a simple 0 to 100 value from this “Virtual Battery Summary Device” I implied above.

In other words – we can have as complex a Virtual Device and SmartApp behind the scenes as you want, but the output has to match some sort of existing SmartTiles Tile; and a battery Tile is a particularly limited one.

We’ve had this discussion before … a Temperature Tile can also display arbitrary numbers (ummm… not sure if we have an upper or lower limit).

I don’t think SmartTiles has a generic “Value Tile” (that could display text, for example) … but it’s something I’ll ask @625alex to think about. It would probably have to be very plain with no icon, and it would truncate strings over a certain length. But then, well, it could grab data from any Virtual Device with “Text Value” as the primary output…

1 Like

We were brainstroming… :slight_smile:

2 Likes

Beckwith, so I understand how the charging coil and receiver work for the Kindle. How did you get power to the coils? Did you have 120V come into some other device and then convert it to get into the coils? I see something in the image you posted, but I am not quite sure what is going on there or how to make it happen. Thanks.

Ready to play with some more CSS. Gotta feed the habit you know!

How do I change the sliders on dimmables to be dim when a light or fan is off but still be white when it is on?

Thanks in advance for enabling my addiction! :smile:

1 Like

I’ve added a FAQ since many have asked for more details:

2 Likes

I thought I would share what I have done so far to my dashboard. I have changed the icons for the ceiling fans, change the icon for a fan is plugged in for “white noise” when we sleep, and I have started to color code things that are like groups. The two sandwich presses that I have are the same color, all the lights (dimming or not) are the same, and the fans are all the same.

Let me know what you think so far and any ideas that you might have.

12 Likes

Really like that one.

I already have a few SmartTiles Androids mounted around the house, and working very well. Now though, I’d like to know how to change the colors on tiles like that (including the background, the icon, and the text/caption, etc). Also, is it possible to create customized sizes of tiles?

Where’s the best place in this 600+ post thread for a guide into customizations with css, etc?

2 Likes

I started with the “cobalt” theme and then changed some things (by adding custom CSS). The basic changes were for the device type colors:

.theme-cobalt .switch {background-color: #006666}
.theme-cobalt .dimmerLight {background-color: #004c4d}
.theme-cobalt .light {background-color: #004c4d}

Since I had already changed the icons for the ceiling fans (since SmartThings sees them as a dimmerLight, I already had the device ID so that I could change the colors of thouse.

.theme-cobalt .tile.dimmerLight[data-device='youDeviceIdHere'] {background-color: #003333} /* Living Room Ceiling Fan Color*/
.theme-cobalt .tile.dimmerLight[data-device='youDeviceIdHere'] {background-color: #003333} /* Master Bedroom Ceiling Fan Color*/
.theme-cobalt .tile.switch[data-device='youDeviceIdHere'] {background-color: #003333} /* Nighttime Fan Color*/

The best way to add the custom CSS is to bring up the form within a browser on your PC or laptop. Take the URL of your dashboard (minus the access token) and add /css to the URL. for example:

https://graph.api.smartthings.com/api/smartapps/installations/xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx/css

5 Likes

To change the icon, there are a few steps.

  1. Get the ID of your device from the IDE (https://graph.api.smartthings.com/). Log into the IDE, go to My Devices
  2. click on the device you want to change the icon for.
  3. Click on List Events to bring up the event list for that device.
  4. Click on one of the events in the list and you will find the Device ID.
  5. Find the UNICODE image that you want to use for the device (There are many sources)
  6. Add the custom CSS to specify the icon for that individual device. Make sure that you select the proper device type in the CSS (.dimmerLight, .light, .switch, etc.)

.tile.dimmerLight[data-device='yourDeviceIdHere'] .icon i::before {content: "✢"} /* Living Room Ceiling Fan Icon */

7 Likes

Thanks. I will bookmark these posts and come back when I have time. Thanks a lot for the tutorial. :slight_smile:

1 Like

Let us know how it works out! I’ve been thinking about doing that with my coffee table yet you won’t be able to tell they’re there.

1 Like

Just now starting to investigate custom CSS for my setup. Do I need to do more than paste these temp-color ranges into the smartTiles custom CSS window to get them to work?

Edit: I see that I don’t need to do more than that! Thanks much.

1 Like

I have a C1 and it works with SmartTiles. search around in the forums here for the right URL you need to have the stream in ST.

Though at the moment mine only works on my LAN, since I don’t have port forwarding working for the MJPEG stream from the camera. And as far as I know, I would need to have two different versions of the dashboard–one with the LAN link and the other with the external IP address.

If the port forwarded URL works externally, then it will also work when on your LAN, though not at optimal performance.

Send me a PM sometime if you want to review Port Forwarding ideas.

@antman2 Looking through this at your dashboard (which looks great!), are you using FontAwesome for all your icons or is there another way to do icons? Also, does your garage tile always accurately show status? I tried to get this working; it works when it changes states, but when I do a refresh, it then always shows the closed icon.

Thanks.

Also, is there any way to display the LUX (luminance) from the SmartThings Weather tile in SmartTiles? I have the weather tile, but I would love just to show the LUX.

Thanks.