Dashboard Theming (Custom CSS) and Mounting Hardware Ideas

My wife and I just talked about this today… we tossed around the picture frame idea vs turning off vs leaving on and decided that leaving the dashboard on full-time made the most sense so you could look at a quick glance and see what the house status is.

Just the other day we realized that the washer never finished because power was at 3W and never sent a “washer done” notice. It was because it had a power event (PF on main screen) and stopped, but never actually turned off. Had we not seen that we would have forgotten about it, gone to bed and likely had skunky clothes the next day that needed rewashed.

4 Likes

I have mine dimmed by default but goes to full brightness when motion. It greatly reduces power usage but is always visible.

2 Likes

Super Job!

Now, what of everything did I want to change :wink:

2 Likes

Thanks, @sgnihttrams @Deanderson2 and @beckwith!

I am testing it out with leaving it on using StayAlive which also lets it dim when not used which I wanted. I would like to find a way to make it dim more but have not found anything yet. I would want it to almost dim to next to nothing then go full with a tap or motion.
My biggest issue right now is my foscam front door cam. Every once in a while when the browser refreshes the tile is just blank until I refresh ST. I have actually watched the browser do it’s refresh and seen the cam tile blank out. I thought it was just when I was turning the tablet back on from sleep but it does it while left on too. When someone knocks at the door we like to see who it is first and the tablet idea seemed the best but with having to wait for the refresh it takes too long. We can handle the delay but it would be nice to get it fixed. I am not at all saying this is ST’s fault but probably the browser or the website itself, I just come here because of all the great ideas :wink:
I have tried Kiosk Browser Lockdown, Chrome and Firefox so far. I have not seen Firefox do it but trying to get Firefox full screen had some quirks when the broswer refreshed killing fullscreen.
I am now trying Dolphin browser but for some reason I cannot even get it to show the camera image, I must be missing something.

Thanks,
Scott

Attached are the icons you are looking for.



4 Likes

This CSS guide is great, can i add too it? I have a few other things as well.

2 Likes

Here are the additional ones I use that were not listed:

/* 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: white} /
active left slider bar /
.ui-page-theme-a .ui-slider-track .ui-btn-active {background-color:#666666} /
inactive left slider bar /
.ui-slider-handle.ui-btn.ui-shadow {background-color: #666666} /
inactive slider button /
.tile.active .ui-slider-handle.ui-btn.ui-shadow {background-color: white} /
active slider button /
.ui-page-theme-a .ui-bar-inherit {background-color: #666666} /
inactive right slider bar */
.ui-page-theme-a .tile.active .ui-bar-inherit {background-color: white}

/* ICON OPACITY /
.fa-toggle-off {opacity: 1!important} /
Icons no longer transparent /
.fa-toggle-on {opacity: 1!important} /
Icons no longer transparent /
.fa-shield {opacity: 1!important} /
Icons no longer transparent /
.fa-expand {opacity: 1!important} /
Icons no longer transparent /
.fa-compress {opacity: 1!important} /
Icons no longer transparent /
.fa-lightbulb-o {opacity: 1!important} /
Icons no longer transparent /
.fa-tint {opacity: 1!important} /
Icons no longer transparent /
.fa-exchange {opacity: 1!important} /
Icons no longer transparent */

/* WEATHER /
.weather[data-weather=‘mostlycloudy’] {background-color: #D3D3D3} /
Changes the tile background color based on mostly-cloudy conditions /
.weather[data-weather=‘nt_partlycloudy’] {background-color: #D3D3D3} /
Changes the tile background color based on partly-cloudy conditions /
.weather[data-weather=‘cloudy’] {background-color: #D3D3D3} /
Changes the tile background color based on cloudy conditions /
.weather[data-weather=‘fog’] {background-color: #D3D3D3} /
Changes the tile background color based on fog conditions /
.weather[data-weather=‘rain’] {background-color: #6666CE} /
Changes the tile background color based on rain conditions /
.weather[data-weather=‘clear’] {background-color: #FFD700} /
Changes the tile background color based on clear conditions /
.weather[data-weather=‘sunny’] {background-color: #FFD700} /
Changes the tile background color based on sunny conditions /
.weather[data-weather=‘snow’] {background-color: #FFFFFF} /
Changes the tile background color based on snow conditions */

/* Battery /
.battery[data-value^=‘0’] .icon {color: #FF0040} /
Changes battery value color based on percentage /
.battery[data-value^=‘0’] .footer {width: 40px;height: 20px;transform: rotate(0deg);padding:105px 0px 0px 0px;content : url(http://www.yourdomainhere)} /
Changes battery icon in footer based on percentage /
.battery[data-value^=‘1’] .icon {color: #FF0040} /
Changes battery value color based on percentage /
.battery[data-value^=‘1’] .footer {width: 40px;height: 20px;transform: rotate(0deg);padding:105px 0px 0px 0px;content : url(http://www.yourdomainhere)}} /
Changes battery icon in footer based on percentage /
.battery[data-value^=‘2’] .icon {color: #FF0040} /
Changes battery value color based on percentage /
.battery[data-value^=‘2’] .footer {width: 40px;height: 20px;transform: rotate(0deg);padding:105px 0px 0px 0px;content : url(http://www.yourdomainhere)}} /
Changes battery icon in footer based on percentage /
.battery[data-value^=‘3’] .icon {color: #FFD700} /
Changes battery value color based on percentage /
.battery[data-value^=‘3’] .footer {width: 40px;height: 20px;transform: rotate(0deg);padding:105px 0px 0px 0px;content : url(http://www.yourdomainhere)}} /
Changes battery icon in footer based on percentage /
.battery[data-value^=‘4’] .icon {color: #FFD700} /
Changes battery value color based on percentage /
.battery[data-value^=‘4’] .footer {width: 40px;height: 20px;transform: rotate(0deg);padding:105px 0px 0px 0px;content : url(http://www.yourdomainhere)}} /
Changes battery icon in footer based on percentage /
.battery[data-value^=‘5’] .icon {color: #FFD700} /
Changes battery value color based on percentage /
.battery[data-value^=‘5’] .footer {width: 40px;height: 20px;transform: rotate(0deg);padding:105px 0px 0px 0px;content : url(http://www.yourdomainhere)}} /
Changes battery icon in footer based on percentage /
.battery[data-value^=‘6’] .icon {color: #32CD32} /
Changes battery value color based on percentage /
.battery[data-value^=‘6’] .footer {width: 40px;height: 20px;transform: rotate(0deg);padding:105px 0px 0px 0px;content : url(http://www.yourdomainhere)}} /
Changes battery icon in footer based on percentage /
.battery[data-value^=‘7’] .icon {color: #32CD32} /
Changes battery value color based on percentage /
.battery[data-value^=‘7’] .footer {width: 40px;height: 20px;transform: rotate(0deg);padding:105px 0px 0px 0px;content : url(http://www.yourdomainhere)}} /
Changes battery icon in footer based on percentage /
.battery[data-value^=‘8’] .icon {color: #32CD32} /
Changes battery value color based on percentage /
.battery[data-value^=‘8’] .footer {width: 40px;height: 20px;transform: rotate(0deg);padding:105px 0px 0px 0px;content : url(http://www.yourdomainhere)}} /
Changes battery icon in footer based on percentage /
.battery[data-value^=‘9’] .icon {color: #32CD32} /
Changes battery value color based on percentage /
.battery[data-value^=‘9’] .footer {width: 40px;height: 20px;transform: rotate(0deg);padding:105px 0px 0px 0px;content : url(http://www.yourdomainhere)}} /
Changes battery icon in footer based on percentage /
.battery[data-value^=‘10’] .icon {color: #32CD32} /
Changes battery value color based on percentage /
.battery[data-value^=‘10’] .footer {width: 40px;height: 20px;transform: rotate(0deg);padding:105px 0px 0px 0px;content : url(http://www.yourdomainhere)}} /
Changes battery icon in footer based on percentage */

3 Likes

^^This is great. Thanks to all that have contributed!. I thought my dashboard looked good before, cannot wait to get into it!

1 Like

[quote=“sgnihttrams, post:1028, topic:11222, full:true”]

@swindmiller
Whenever I see something in this area that adds some kind of helping mechanism, I bookmark it, and I just bookmarked your post.

So far, I’m only using an external motion sensor, and I too would like something that works quicker…[/quote]

NOTE: To everyone else that may have already posted these particular concepts or tools in here, sorry. I’m not trying to say this is necessarily anything NEW. I just didn’t do enough searching this time. I’m tired and irritated right now (completely unrelated) and just decided to post anyway. :slight_smile:

I just discovered (for myself) a possible solution for this (i.e. getting the screen to come on with local proximity/vibration sensors on the Android itself), AND also re-discovered another one that didn’t seem to work well for me before, but does now.

For now, I have the following working…

  1. Proximity Sensor Turns Screen-On Using ‘Smart Screen On’
    [APP] Smart Screen ON | XDA Forums
    I couldn’t find it in Google Play. So, I just got it from the Amazon app store (Not sure how problematic that may be).
    It’s not ideal, but works consistently, predictably and reliability as long as I ‘do it right’.
    Unlike my mind initially thinks, this doesn’t work by simply waving the hand in front of it (at least not in my case). In order to trigger it, I have to actually touch the physical screen and swipe a finger across the proximity sensor. When I do that, it turns the screen on.

  2. Vibration Sensor Turns Screen-On Using ‘Gravity Screen’
    This one works very well. With the sensitivity all the way up, all I have to do is barely touch any part of the Android, and BOOM! screen comes on. I already had this on my phone for testing something else (or maybe this and I forgot). Now, it seems to be working just fine.

Now…the catch for me is that I’ve been testing all of this on my nice, new Motorola Droid Turbo 1.
I have no idea whether any of this will work on my cheapo tablets. Next is testing on other devices.

Again, I’m not trying to say this is necessarily anything NEW.
I’m just lazy-posting without searching enough first. :slight_smile:

p.s. One thing that comes to mind is that I think SmartTiles (or something like it) MUST (some day) eventually, somehow have all of this kind of stuff built into it; in order to maximize user-base, and to take all of the potential configuration oddness out of the way so that, for less-savvy users who just want something that works, all in one thing, they won’t have to go through all of this tinkering and testing, etc.

For me, it’s no big deal (I’m at least an aspiring tinkerer-apprentice lol ), but I know for certain, there are users who, when they encounter something like this, and it’s not just a matter of clicking a checkbox or radio button within the primary app they’re using for dashboard/control panel solutions, they’ll just abandon it and (maybe) pick it back up some day when (if) such functionality gets backed-in. Such built-in functionality would no-doubt increase the value proposition when it comes time to buy the ‘Pro’ version after having tested the Free version, or to renew their subscription if that’s how this thing eventually goes.

Of course, there are differences between OS and hardware versions and all that, and that adds levels of complexity that you may or may not want to ‘bake-in’ or support. I just think it might be worth the effort. $0.02. :slight_smile:

3 Likes

Thank you for the contributions.
I have added them.

I will also be going back through this thread and adding shoutouts to people whose content I know I used (there are at least 2 items that I know I borrowed from this thread, so I will make sure to give proper creds).

1 Like

Just one other thing, if your trying to color all tiles for a specific type you won’t need the .tile

.tile.motion {background-color: white;} /* This will change the background color for Motion Sensor tiles. */

You can just have:

.motion {background-color: white;} /* This will change the background color for Motion Sensor tiles. */

the .tile is only required if your trying to change something for a single specific tile that your adding the data-device.

Also not sure if we can post icons that people have requested as well?

Smart tiles works/looks great out of the box and if you have the understanding of CSS you can customize the solution to make it personal. The quick guide that @diehllane has added above is a great set of information to make the personalized touches.

2 Likes

Here is the temperature CSS I have with a larger scale and based off of color value to temp:

/* TEMPERATURE ICON COLOR */
.temperature[data-value=‘140°’] .icon {color: #FF0040}
.temperature[data-value=‘139°’] .icon {color: #FF0038}
.temperature[data-value=‘138°’] .icon {color: #FF0030}
.temperature[data-value=‘137°’] .icon {color: #FF0028}
.temperature[data-value=‘136°’] .icon {color: #FF0020}
.temperature[data-value=‘135°’] .icon {color: #FF0018}
.temperature[data-value=‘134°’] .icon {color: #FF0010}
.temperature[data-value=‘133°’] .icon {color: #FF0008}
.temperature[data-value=‘132°’] .icon {color: #FF0000}
.temperature[data-value=‘131°’] .icon {color: #FF0500}
.temperature[data-value=‘130°’] .icon {color: #FF0A00}
.temperature[data-value=‘129°’] .icon {color: #FF0F00}
.temperature[data-value=‘128°’] .icon {color: #FF1400}
.temperature[data-value=‘127°’] .icon {color: #FF1900}
.temperature[data-value=‘126°’] .icon {color: #FF1E00}
.temperature[data-value=‘125°’] .icon {color: #FF2300}
.temperature[data-value=‘124°’] .icon {color: #FF2800}
.temperature[data-value=‘123°’] .icon {color: #FF2D00}
.temperature[data-value=‘122°’] .icon {color: #FF3200}
.temperature[data-value=‘121°’] .icon {color: #FF3700}
.temperature[data-value=‘120°’] .icon {color: #FF3C00}
.temperature[data-value=‘119°’] .icon {color: #FF4100}
.temperature[data-value=‘118°’] .icon {color: #FF4600}
.temperature[data-value=‘117°’] .icon {color: #FF4B00}
.temperature[data-value=‘116°’] .icon {color: #FF5000}
.temperature[data-value=‘115°’] .icon {color: #FF5500}
.temperature[data-value=‘114°’] .icon {color: #FF5A00}
.temperature[data-value=‘113°’] .icon {color: #FF5F00}
.temperature[data-value=‘112°’] .icon {color: #FF6400}
.temperature[data-value=‘111°’] .icon {color: #FF6900}
.temperature[data-value=‘110°’] .icon {color: #FF6E00}
.temperature[data-value=‘109°’] .icon {color: #FF7300}
.temperature[data-value=‘108°’] .icon {color: #FF7800}
.temperature[data-value=‘107°’] .icon {color: #FF7D00}
.temperature[data-value=‘106°’] .icon {color: #FF8200}
.temperature[data-value=‘105°’] .icon {color: #FF8700}
.temperature[data-value=‘104°’] .icon {color: #FF8C00}
.temperature[data-value=‘103°’] .icon {color: #FF9100}
.temperature[data-value=‘102°’] .icon {color: #FF9600}
.temperature[data-value=‘101°’] .icon {color: #FF9B00}
.temperature[data-value=‘100°’] .icon {color: #FFA000}
.temperature[data-value=‘99°’] .icon {color: #FFA500}
.temperature[data-value=‘98°’] .icon {color: #FFAA00}
.temperature[data-value=‘97°’] .icon {color: #FFAF00}
.temperature[data-value=‘96°’] .icon {color: #FFB400}
.temperature[data-value=‘95°’] .icon {color: #FFB900}
.temperature[data-value=‘94°’] .icon {color: #FFBE00}
.temperature[data-value=‘93°’] .icon {color: #FFC300}
.temperature[data-value=‘92°’] .icon {color: #FFC800}
.temperature[data-value=‘91°’] .icon {color: #FFCD00}
.temperature[data-value=‘90°’] .icon {color: #FFD200}
.temperature[data-value=‘89°’] .icon {color: #FFD700}
.temperature[data-value=‘88°’] .icon {color: #FFDC00}
.temperature[data-value=‘87°’] .icon {color: #FFE100}
.temperature[data-value=‘86°’] .icon {color: #FFE600}
.temperature[data-value=‘85°’] .icon {color: #FFEB00}
.temperature[data-value=‘84°’] .icon {color: #FFF000}
.temperature[data-value=‘83°’] .icon {color: #FFF500}
.temperature[data-value=‘82°’] .icon {color: #FFFA00}
.temperature[data-value=‘81°’] .icon {color: #FEFC00}
.temperature[data-value=‘80°’] .icon {color: #FDFF00}
.temperature[data-value=‘79°’] .icon {color: #EAFF00}
.temperature[data-value=‘78°’] .icon {color: #D7FF00}
.temperature[data-value=‘77°’] .icon {color: #C3FF00}
.temperature[data-value=‘76°’] .icon {color: #B0FF00}
.temperature[data-value=‘75°’] .icon {color: #9DFF00}
.temperature[data-value=‘74°’] .icon {color: #8AFF00}
.temperature[data-value=‘73°’] .icon {color: #77FF00}
.temperature[data-value=‘72°’] .icon {color: #65FF00}
.temperature[data-value=‘71°’] .icon {color: #51FF00}
.temperature[data-value=‘70°’] .icon {color: #3EFF00}
.temperature[data-value=‘69°’] .icon {color: #2AFF00}
.temperature[data-value=‘68°’] .icon {color: #17FF00}
.temperature[data-value=‘67°’] .icon {color: #0BFF08}
.temperature[data-value=‘66°’] .icon {color: #00FF10}
.temperature[data-value=‘65°’] .icon {color: #00FF23}
.temperature[data-value=‘64°’] .icon {color: #00FF36}
.temperature[data-value=‘63°’] .icon {color: #00FF49}
.temperature[data-value=‘62°’] .icon {color: #00FF5C}
.temperature[data-value=‘61°’] .icon {color: #00FF6F}
.temperature[data-value=‘60°’] .icon {color: #00FF83}
.temperature[data-value=‘59°’] .icon {color: #00FF95}
.temperature[data-value=‘58°’] .icon {color: #00FFA8}
.temperature[data-value=‘57°’] .icon {color: #00FFBC}
.temperature[data-value=‘56°’] .icon {color: #00FFD0}
.temperature[data-value=‘55°’] .icon {color: #00FFE2}
.temperature[data-value=‘54°’] .icon {color: #00FFF4}
.temperature[data-value=‘53°’] .icon {color: #00F1F9}
.temperature[data-value=‘52°’] .icon {color: #00E4FF}
.temperature[data-value=‘51°’] .icon {color: #00DCFF}
.temperature[data-value=‘50°’] .icon {color: #00D4FF}
.temperature[data-value=‘49°’] .icon {color: #00CCFF}
.temperature[data-value=‘48°’] .icon {color: #00C4FF}
.temperature[data-value=‘47°’] .icon {color: #00BCFF}
.temperature[data-value=‘46°’] .icon {color: #00B4FF}
.temperature[data-value=‘45°’] .icon {color: #00ACFF}
.temperature[data-value=‘44°’] .icon {color: #00A4FF}
.temperature[data-value=‘43°’] .icon {color: #009CFF}
.temperature[data-value=‘42°’] .icon {color: #0094FF}
.temperature[data-value=‘41°’] .icon {color: #008CFF}
.temperature[data-value=‘40°’] .icon {color: #0084FF}
.temperature[data-value=‘39°’] .icon {color: #007CFF}
.temperature[data-value=‘38°’] .icon {color: #0074FF}
.temperature[data-value=‘37°’] .icon {color: #006CFF}
.temperature[data-value=‘36°’] .icon {color: #0064FF}
.temperature[data-value=‘35°’] .icon {color: #005CFF}
.temperature[data-value=‘34°’] .icon {color: #0054FF}
.temperature[data-value=‘33°’] .icon {color: #004CFF}
.temperature[data-value=‘32°’] .icon {color: #0044FF}
.temperature[data-value=‘31°’] .icon {color: #003BFF}
.temperature[data-value=‘30°’] .icon {color: #0032FF}
.temperature[data-value=‘29°’] .icon {color: #002AFF}
.temperature[data-value=‘28°’] .icon {color: #0022FF}
.temperature[data-value=‘27°’] .icon {color: #001AFF}
.temperature[data-value=‘26°’] .icon {color: #0012FF}
.temperature[data-value=‘25°’] .icon {color: #000AFF}
.temperature[data-value=‘24°’] .icon {color: #0002FF}
.temperature[data-value=‘23°’] .icon {color: #0001FF}
.temperature[data-value=‘22°’] .icon {color: #0000FF}
.temperature[data-value=‘21°’] .icon {color: #0000FF}
.temperature[data-value=‘20°’] .icon {color: #0100FF}
.temperature[data-value=‘19°’] .icon {color: #0100FF}
.temperature[data-value=‘18°’] .icon {color: #0200FF}
.temperature[data-value=‘17°’] .icon {color: #0200FF}
.temperature[data-value=‘16°’] .icon {color: #0300FF}
.temperature[data-value=‘15°’] .icon {color: #0300FF}
.temperature[data-value=‘14°’] .icon {color: #0400FF}
.temperature[data-value=‘13°’] .icon {color: #0400FF}
.temperature[data-value=‘12°’] .icon {color: #0500FF}

Sorry if I’m somehow looking at the wrong post or something (on phone right now), but how does your response have anything whatsoever to do with the post of mine that you quoted from?

The MotionDetector app does a good job of turning screens on. There’s also a “screen filter” app of some sort that dims the screen waaaay down, in case you want to leave it on but have it dim. My system also captures Ino the cloud still images from the motion-sensing camera if there has been a security breach.

Later I’ll post the details of my arrangement. As others have said, I stand on the shoulders of people before me who did similar systems.

1 Like

@diehllane Something else to add in the specific device tile section: how to find your device ID (unless there is an easier way, but this was the only way i was able to do it).

Log into the IDE => My Devices => “Dining Room Light” (the device in question) => List Events => 2016-04-04 12:01:29.743 AM EDT 13 hours ago (click on any event) => See ‘deviceId’

1 Like

The other option to view idea is to View Page Source for the SmartTiles view you want to modify. That information is after your established custom CSS work.

3 Likes

Thanks - that’s way easier than what I was doing before!

No problem. I used to do it the way you described until last week, I notice the same information in the webpage view.