Dashboard Theming (Custom CSS) and Mounting Hardware Ideas

Over the last couple days I’ve noticed it gets warm on the blank plate. Not any warmer then it did while i was using it on my desk though. I’m going to keep monitoring it, since I work from home. In the meantime I’m going to think of some ways to improve the hack (proof of concept) and also maybe spend a bit more on a better wireless charger, since you’ve had some first hand experience with this one. Thanks for the heads up

Which charger did you go with @NoMoreClaymores?

I’ve owned quite a few of these chargers and they all get warm. It’s if it ever gets hot (as in it could burn your fingers) that you need to be alarmed.

The most recent generic one I purchased has been working great for over a year. Link is post below.

Ebay QI puck

1 Like

Sadly this almost sounds like a potential need for any temperature sensor to alert high temperature. :smile:

I actually have the exact same one sitting on my desk right now. Maybe I’ll switch it out. I have another design in mind where i’ll make a plate and have the puck recessed in the plate so it is visible and can be pulled out without hiding it behind the wall. Would take more time to make the plate with perfect cut outs though…

hmm i do have an extra temp sensor I haven’t found a use for :slight_smile:

Decided to try the command strip idea. Apparently we own stock in Command Strips so I did not have to go to the store :smile:

easy to remove to charge and just leaves the strips behind:

Hopefully its not removed very often. For a quick mount it works great!

8 Likes

We use command strips for a lot of things.

If you also put strips on a photo or poster that’s the same size of the thing you take down, and then put that up when you take the tablet down, it makes the house look a lot nicer. :blush:

4 Likes

So I’ve had this one in my wall charging the tablet for 4 days straight and it doesn’t seem to get hot, just warm, or put off a burning smell of any kind. I looked at the reviews for the wireless charging plate I used and there hasn’t been anyone that mentions over heating, melting or even fire with use. I did also have this thing charging my tablet and phone for weeks on my desk, and nightstand over night, before I took it apart and put it in the wall.

I noticed on amazon the manufacture has this statement in the description “Short-circuit protection of the receiver to avoid overcharge & overheating, security and reliable. With anti-skid four feet for stable placement.”

That said I did see some other models that looked similar to the one I am using and the internal circuit board looks different, it’s smaller and possibly less sophisticated. Maybe missing the overheating protection. See this https://www.youtube.com/watch?v=Gch9-7CcYa8 you can see he has a black charging plate that looks like mine but the internal circuit board looks different.

Also I know these are cheap Chinese devices so can’t always trust what the manufacture is saying and how reliable they are. For now it works and doesn’t seem to cause a problem with overheating. For added protection I am going to go and get some heat shielding tape and mount my temp sensor behind the plate.

Awesome research. The one that melted said it had “circuit protection”. The one that caught fire did not although they appeared identical.

Sounds like you have done your due diligence to prevent damage. Keep up the good work.

1 Like

I like the remote sensor concept, it’s not built as solid as the Nest, all plastic, but the touch screen is very responsive. Before the Nest I had the EcoBee Smart Thermostat and it had some very nice alerting features which the Nest does not. Ie my ecobee sent me an email saying "Huy Nguyen, you have an alert message from ecobee for thermostat: 105945406886: There maybe a problem with the Furnace. For the past 2 hours the thermostat has been calling for heat, but the room temperature has decreased by 1.6C. " This saved my home from freezing over while I was away for a month on christmas holidays with the family. Not sure if the EcoBee3 has the same type but I liked the older thermostat and I figured I’d go back to supporting a Canadian company :smile:

3 Likes

Thanks; that’s helpful.

@625alex, pardon my ignorance but is there an easy way to change the title of an individual tile?
The reason I ask is for devices that have multiple sensors, for example a door sensor that also shows temperature. I have 2 separate tiles named Front Door, one being the open/close and the other being the temperature. It would be nice to be able to rename the temperature tile to say Livingroom, would be less confusing for my family.
I know you can specify:

[data-device='1234-56789']

in CSS for example but I don’t think that would help since it’s specifying the device and not the individual sensors.

I guess you would need to name the “alias” when you pick what you want shown on the dashboard from within the app, which is fine but is it doable?

Would be nice but no biggie.

Replying to @DarcRanger from a question in the main smarttiles thread.

See here for weather tile device type changes. For clock, I modified clock tile to be w1 instead of w2 size IIRC. And changed date format in smarttiles.groovy line 695 to do three letter month, plus some custom css changes.

def tf = new java.text.SimpleDateFormat("MMM d")

My custom css looks like this:

/*** Custonm CSS Start ***/
.tile {border-radius:2px;color:white;}
.tiles {margin:2px;}
.switch, .dimmer, .momentary, .clock, .lock, .refresh, .link, .dashboard, .menu, .thermostat, .music i, .holiday, .camera, .light {cursor: pointer;}
.tiles {overflow:hidden}
.tile {width: 100px; height: 100px;}
.w2 {width: 200px;}
.h2 {height: 200px;}
.w3 {width: 400px;}
.h3 {height: 200px;}


.icon {font-size:2.5em;line-height:2.5em;width:100%;margin-top: -1.2em;position: absolute;text-align: center;top: 50%;white-space:nowrap;}
.icon.text {font-size:1.5em;line-height:1.8em;width:100%;margin-top: -1em;}

.icon span.text {font-size: 0.75em; margin-right: 15px;}

.footer {bottom: 5px;color: white;font-size: 11px;left: 5px;position: absolute;line-height:10px;}
.footer.right {right:5px;text-align:right;}
.footer i {font-size:16px}
.spinner {bottom: 2px;right:2px;color: white;font-size: 10px;line-height:10px;position: absolute; display:none}
.opaque {opacity: 0.3;}

.mode:not(.Home) .icon.Home {display:none}
.mode.Home .icon.text{display:none}
.mode:not(.Away) .icon.Away {display:none}
.mode.Away .icon.text{display:none}
.mode:not(.Night) .icon.Night {display:none}
.mode.Night .icon.text{display:none}
.icon, .icon * {text-shadow: 0px 4px 3px rgba(0,0,0,0.4), 0px 8px 13px rgba(0,0,0,0.1), 0px 18px 23px rgba(0,0,0,0.1);}

.thermostatHeat .icon.up {margin-top: -2.3em; font-size:1.8em; line-height:1.8em;}
.thermostatHeat .icon {margin-top: -1.0em; font-size:2.4em; line-height:2.4em; align: center;}
.thermostatHeat .icon.down {margin-top: 0.9em; font-size:1.8em; line-height:1.8em;}
.thermostatHeat .title  {font-size: 0.8em; line-height: 0.8em; text-align: left;}
.thermostatHeat .title2  {color: #00B800; font-size: 2.0em; line-height: 1.0em; text-align: left;}
.thermostatHeat .footer .wi-sprinkles {color: #00B800; position: relative; left: -7px; top: 4px; font-size: 1.2em;}
.thermostatHeat .footer {color: #00B800; position: absolute; left: -18px; font-size: 1.2em; }

.power .icon {color: #E68A00;}
.power .fa {color: #E68A00;}

.weather .title2 {font-size: 1.0em; color: #00B800;}
.weather .icon i {font-size: 0.7em; position: relative; top: 2px; left: -10px; opacity: 0.8;}
.weather .text  {color: #00B800; position: relative; top: 0px; left: -10px; font-size: 1.4em;}
.weather .fa  {color: #00B800;}
.weather .wi-horizon-alt {color: #E68A00;}
.weather .footer.right {color: #00B800;}
.weather .fa-umbrella {color: #00B800; position: relative; left: -2px; top: 2px;}
.weather .wi-sprinkles {color: #00B800; position: relative; left: -4px; top: 3px;}
.temperature .wi-thermometer {color: #00B800;}
.humidity .wi-sprinkles {color: #E68A00;}

.mode .fa {color: #E0D1B2;}
.clock .footer5 {font-size: 1.2em; text-align: center; padding: 3px; margin-top: 5px; line-height:1.1em;}
.clock .icon {margin-top: -5px; align: center; font-size: 2.0em;}
.temperature .icon {color: #00B800;}
.humidity .icon {color: #E68A00;}

.battery .icon {color: #E0D1B2;}
.battery .fa-bolt {color: #E0D1B2;}


/*******/
.r45 {
    -moz-transform:rotate(45deg);
    -webkit-transform:rotate(45deg);
    -o-transform:rotate(45deg);
    -ms-transform:rotate(45deg);
    transform:rotate(45deg)
}

/* SLIDER **********/
.ui-page-theme-a .ui-bar-inherit {background-color:grey;}

.ui-page-theme-a .ui-slider-track .ui-btn-active {background-color:white;}
.ui-slider-handle.ui-btn.ui-shadow {background-color:white;}

.ui-slider-handle.ui-btn.ui-shadow {box-shadow: 0px 4px 3px rgba(0,0,0,0.4), 0px 8px 13px rgba(0,0,0,0.1), 0px 18px 23px rgba(0,0,0,0.1);
-webkit-box-shadow: 0px 4px 3px rgba(0,0,0,0.4), 0px 8px 13px rgba(0,0,0,0.1), 0px 18px 23px rgba(0,0,0,0.1);
-moz-box-shadow: 0px 4px 3px rgba(0,0,0,0.4), 0px 8px 13px rgba(0,0,0,0.1), 0px 18px 23px rgba(0,0,0,0.1);
}

.ui-page-theme-a .ui-bar-inherit {border:none;}
.ui-slider-track.ui-corner-all {border-radius: 1em;}
.ui-slider-track.ui-mini {height:3px;}
.ui-slider-popup { /*do not change*/height:12px;width:18px;padding-top:0px;padding-bottom:2px;font-size:12px;}
div.ui-slider{height:21px;}
.ui-slider-track{margin:0!important}
.full-width-slider {position:absolute;bottom:-2px;width:100%;}
.full-width-slider input {display: none;}
.ui-slider-track.ui-mini .ui-slider-handle {height:20px;width:20px;margin:-11px 0 0 -11px;}
.ui-slider.ui-mini{padding:0 10px 0 12px;}

/*********/

/** music ****/

.music .ui-slider.ui-mini{padding:0 10px 0 40px;}
.music .footer {bottom: 6px; z-index:100}
.music .full-width-slider {z-inndex:99}

.music.muted .unmuted {display:none}
.music:not(.muted) .muted {display:none}

.music.active .play {display:none}
.music:not(.active) .pause {display:none}

.music i {cursor: pointer;}
/*  THEMES */

/* onyx */
.theme-onyx .ui-page.ui-page-theme-a.ui-page-active {background-color:#444;}
.theme-onyx .tile {background-color:#191919}
.theme-onyx * {color: #FEF9EE}

.theme-onyx .ui-page-theme-a .ui-bar-inherit {background-color:#444;}
.theme-onyx .ui-page-theme-a .ui-slider-track .ui-btn-active {background-color:#FEF9EE}
.theme-onyx .ui-slider-handle.ui-btn.ui-shadow {background-color:#FEF9EE}

.theme-onyx .tile.active .icon i.active {color: #B22222}

/*** Custonm CSS End *****/

That css is partially there to create the larger mjpeg video tiles on the dashboard which I define on line 783

} else if (data.tile == "genericMJPEGvideo") {
		return """<div class="video tile h3 w3" data-link-i="$data.i"><a href="http://mybiserver:port/ui2.htm" target="_blank"><div class="title">$data.name</div><div class="icon" style="margin-top:-98px;"><object width="400" height="198"><img src="$data.link" width="400" height="198"></object></a></div></div>"""
4 Likes

Thank you @Dlee for the details.

@Dlee, last night I notice that I do not see the changes to the clock tile beyond changing the date format. I take it that is not a CSS change but one of the other files.

Hmm I do little changes or tests here and there and hard to remember over time what I actually customized. :smile: Did I mention line 797 clock tile classes which map to the custom css?

return """<div id="digital-clock" class="clock tile clickable w$data.size"><div class="title5"></div><div class="icon ${data.size == 2 ? "" : "text"}" id="clock">*</div><div class="footer5">$data.dow<br/>$data.date</div></div>"""
		}

And line 932, I have Large Digital clock selected in my dashboard config, change code:

else if (showClock == "Large Digital") data << [tile: "clock", size: 1, style: "d", date: getDate(), dow: getDOW(), name: "Clock", type: "clock"]

I also have hard coded tile/font size changes line 677 left over from when I first started customizing. Should probably go clean up now that I use css.

def getTSize() {
	if (tileSize == "Small") return 90
	else if (tileSize == "Large") return 90
	105
}

def getFSize() {
	if (fontSize == "Larger") return 90
	if (fontSize == "Largest") return 90
	100
}

Thank you again @Dlee. I figured line 797 was a factor, but missed the line 932 to reorder the tile info.

Has anyone figured out how to get the time to display AM/PM and have the midnight hour read 12 and not 0?

This is something I will do. Hopefully soon.