Dashboard Theming (Custom CSS) and Mounting Hardware Ideas

Great idea, Egin…

We haven’t explored embedded “images” other than basic Video Streams and Images (as Video Tiles).

We’re 100% focused on getting “V6” = ActionTiles released at the moment, but then we’ll have some bandwidth for exploring stuff … Experimenting with how our easily (or not…) our new rendering engine will handle various types of embedding will be interesting.

If google staticmap API supported traffic (it doesn’t from what I could find) we could do something like this as a SmartTiles camera URL:
https://maps.googleapis.com/maps/api/staticmap?center=42.293545,-71.531715&zoom=10&size=200x200&maptype=roadmap

1 Like

Not a bad idea…

If you pull up the debug on the Google map that @Hybridtracer embedded in his post, you’ll see that it uses an <iframe>. They have various complications, but that’s the direction I’d like to explore instead of hacking an <img> or <video>

Hi, Newbie to SmartTiles.

If you run the SmartTiles launcher on an android tablet, will it log itself out at some point? I have a tablet on the wall and want to keep SmartTiles running all the time although the tablet does go into lock mode after a period of time.

Thanks in advance,

Hi, I’m trying to add presence tile to my ST but nothing seems to work. I took the sample codes in this thread (.presence, .tile.presence) but it doesn’t even show up on my dashboard. Any tips to get started down this path?

It is definitely likely; folks have had varying degrees of success. One thing that helps is to use Tasker or a browser like Fully that can periodically (every 15 minutes?) refresh/reload the page.

Please see the main SmartTiles Topic for more information.

(And please note that ActionTiles, coming soon, replaces SmartTiles with completely new code and back-end that no longer has logout risk).

@JeffSGeorge Where did you get all those awesome icons for your setup? I have just been stuck with the Font Awesome ones. Thanks.

1 Like

Does the presence tile show up with the standard icon?
If not, you may have to go through and make sure you have your presence device selected in the SmartTiles setup.

Under Things, it’s under the “View state of things…” section. There is a spot for Presence Sensors. Tap that and select yours.

1 Like

Thanks diehllane! That was the fix.

1 Like

I am new to smart tiles and haven’t read this entire thread. I have a few questions. Any help can be appreciated.

  1. Can these tiles be used as widgets on Android?

  2. I assume the reason this has to be a webpage is that the ST app prevents integration directly

  3. Are there preset dashboards that can be integrated?

SmartThings does not, at this time, have a fully pre-packaged API for alternative apps (also known as “clients” in the old “client-server” terminology), but using a “web services SmartApp”, we are able to provide our own APIs.

SmartTiles v5.8 actually stretched this so far as to embedding an entire web-page inside a SmartApp … but that has a lot of limitations and complications. We are very happy that so many folks love it and have found ways to customize it.

But… in order to get around the most critical limitations and various performance issues, we have completely re-built it with a new architecture … SmartTile “V6” is now called ActionTiles and is in final stages of Beta testing.

ActionTiles is still a “web app”, but now hosted externally from the SmartThings cloud (but connects to your SmartThings Account via a web services SmartApp). We chose a web-app to maximize compatibility: It runs on all “modern” HTML5 compliant browsers / browsing devices without us having to write a separate App for Android, iOS, Windows, Mac, etc…

The ActionTiles “platform”, though, has the potential to lend itself to native Apps. If ActionTiles is sufficiently popular, we will listen to our Customers and expand in the most popular directions.

If you want Android “widgets” in the meantime, we highly recommend Sharp Tools by @joshua_lyon – it is available in the Play Store.

Follow ActionTiles on Facebook, Twitter, Google+ … etc., to keep up with the latest news and help us promote the product, as its success will be proportionate to our customer growth.

Thank-you!

1 Like

Is it true that action tiles is going to have a monthly fee?

Pricing and price structure (one-time, recurring, tiers, etc.) have not been set, nor announced. There will definitely be a free trial available, and but the ActionTiles will not be free.

I picked up a cheap Android tablet to try to use as a guest interface. I’ve been using SmartTiles on my iOS devices w/o any trouble by adding the shortcut to the launch page to my home screen. On iOS (and honestly I thought Android did this the first time but I might be wrong) once I tap Launch then login to ST, I see my SmartTiles interface with just the normal black bar at the top with my signal strength/time/battery/etc, there is no address bar. For some reason now when I try to do the same on my Android tablet (running 6.? if that matters) I get this quasi-address bar stuck between the normal signal strength/time/battery/etc bar at the top and my SmartTiles (see screen shot). The first time I launched with the home screen button (and didn’t see the address bar) I did have it pointing to the wrong address (the address after the login screen that gives an auth error when you time out), is that why I didn’t have the address bar before? Am I picking that up because of the redirects? TIA!!

hey everyone!

I can’t seem to find any 7 days forecast images around here from any local stations. Anyone knows a good/free website snapshot service I could use instead to create the image I need?

Just wanted to share what I have come up with for my house

Single gang recessed outlet from Amazon
Leviton receptacle with USB
MagBak iPad mount strips
Right angle micro usb cable

LG Android Tablet
Fully Kiosk Browser
Smarttiles

10 Likes

Hi! Just wanted to contribute with my design draft, i just got the ST 2 weeks ago so i don’t have so much devices yet. I was really thrilled when I found SmartTiles though!

5 Likes

That looks amazing. Would you mind sharing the css? It’s clean, simple and elegant.

1 Like

Here is my first try at customizing my CSS. All I did was change the icons to actual pictures of the devices. Its still a work in progress.

4 Likes

Thank you, of course! But as I said, I have only configured the devices I have so far, but simple copy, paste should take care of the most.

/*** Custom CSS Start ***/

.ui-page {background-image: url(“http://i.imgur.com/WoRwTCH.jpg”); background-attachment: fixed; background-position: center; background-size: cover; background-color: #2d2d2d}

/* FONT */

  • {
    font-family: “HelveticaNeue-Light”, “Helvetica Neue Light”, “Helvetica Neue”, Helvetica, Arial, “Lucida Grande”, sans-serif;
    font-weight: 300; text-transform: uppercase;
    }

/* SLIDERS /
.music .ui-slider.ui-mini{padding:0 10px 10px 40px}
.ui-slider.ui-mini{padding:0 10px 10px 12px}
.ui-page-theme-a .tile.active .ui-slider-track .ui-btn-active {background-color: rgba(250, 180, 4, 1)} /
active left slider bar /
.ui-page-theme-a .ui-slider-track .ui-btn-active {background-color:#DADADA} /
inactive left slider bar /
.ui-slider-handle.ui-btn.ui-shadow {background-color: #DADADA} /
inactive slider button /
.tile.active .ui-slider-handle.ui-btn.ui-shadow {background-color: #DADADA} /
active slider button /
.ui-page-theme-a .ui-bar-inherit {background-color: #DADADA} /
inactive right slider bar */
.ui-page-theme-a .tile.active .ui-bar-inherit {background-color: #DADADA}

.footer {color: #DADADA;} /* Footer is the text at the bottom of the tiles and includes the thermometer icon for Temperature tiles /
.tile {background-color: rgba(0, 0, 0, 0.15);}
.weather {background-color: rgba(0, 0, 0, 0.15);}
.clock {background-color: rgba(0, 0, 0, 0.15);}/blue gray/
.presence {background-color: rgba(0, 0, 0, 0.15);}/indigo/
.lock {background-color: rgba(0, 0, 0, 0.15);/red/}
.hello-home {background-color: rgba(0, 0, 0, 0.15);}/purple/
.switch, .dimmer, .momentary, .light {background-color: rgba(0, 0, 0, 0.15);} /green/
.contact {background-color: rgba(0, 0, 0, 0.15);}/pink/
.refresh {background-color: rgba(0, 0, 0, 0.15);} /blue gray/
.temperature {background-color: rgba(0, 0, 0, 0.15);} /amber 900/
.mode {background-color: rgba(0, 0, 0, 0.15);}/deep purple/
.motion {background-color: rgba(0, 0, 0, 0.15);}/blue/
.humidity {background-color: rgba(0, 0, 0, 0.15);}/brown/
.link {background-color: rgba(0, 0, 0, 0.15);}
.thermostat {background-color: rgba(0, 0, 0, 0.15)} /teal/
.energy {background-color: rgba(0, 0, 0, 0.15)} /l green 800/
.power {background-color: rgba(0, 0, 0, 0.15)} /l green 900/
.water {background-color: rgba(0, 0, 0, 0.15)} /cyan a900/
.music {background-color: rgba(0, 0, 0, 0.15)} /purple a700/
.battery {background-color: rgba(0, 0, 0, 0.15)}
.camera{background-color: rgba(0, 0, 0, 0.15)} /lime/
.video {background-color:rgba(0, 0, 0, 0.15)} /dropcam grey/
.blank.tile{background:none;}
.dashboard {background-color: red;} /
red /
.switch.active .icon {color:#FFFF00}
.light.active .icon {color:#00FF00}
.dimmerLight.active .icon {color: rgba(250, 180, 4, 1)}
.lock.active .icon {color:#990000}
.dimmer.active .icon {color:#00FF00}
.motion.active .icon {color:#990000}
.contact.active .icon I {color:#990000}
.presence.active .icon {color: #ADFE33}
.tile.switch[data-device=‘XXX’] .icon i.inactive:before {content : “”}
.tile.switch[data-device=‘XXX’] .icon i.active:before {content : “”}
.tile.switch[data-device=‘XXX’] .icon i.inactive:before {content : “”}
.tile.switch[data-device=‘XXX’] .icon i.active:before {content : “”}
.tile.switch[data-device=‘XXX’] .icon i.inactive:before {content : “”}
.tile.switch[data-device=‘XXX’] .icon i.active:before {content : “”}
.tile.presence[data-device=‘XXX’] .icon i.inactive:before {content : “”}
.tile.presence[data-device=‘XXX’] .icon i.active:before {content : “”}
.tile.presence[data-device=‘XXX’] .icon i.inactive:before {content : “”}
.tile.presence[data-device=‘XXX’] .icon i.active:before {content : “”}
.tile.presence[data-device=‘XXX’] .icon i.inactive:before {content : “”}
.tile.presence[data-device=‘XXX’] .icon i.active:before {content : “”}
/
** Custonm CSS End *****/

2 Likes

© 2019 SmartThings, Inc. All Rights Reserved. Terms of Use | Privacy Policy

SmartThings; SmartApps®; Physical Graph; Hello, Home; and Hello, Smart Home are all trademarks of the SmartThings, Inc.