SmartThings Community

Dashboard Theming (Custom CSS) and Mounting Hardware Ideas

dashboard
dashboardhardware
smarttiles.click
smarttiles
project_dashboard

(Korban Hadley) #1

Someone else mentioned the idea and I decided to create it. Thanks to @625alex we have a very sweet dashboard. However I want to see others ideas on themes or CSS code they implemented for their setup. Maybe even mounting ideas.


I need advise on what to Purchase
Advice for Scene Controller
SmartTiles Dashboard 5.4.2 - July 13 (www.SmartTiles.click)
Andriod Tablet Or Ipad?
Always on Tablet to monitor status?
Dashboard - ridiculous
How do you set up Tasker to wake your tablet when you walk up to it
Rough Discussion: Custom Hardware for a Wall Mounted Touch Panel?
Andriod Tablet Or Ipad?
Wall Keypads?
SmartTiles v5.8: Deployed to Blue & Green Editions. Release notes, etc. (follow this Topic for updates...)
Laser cutting a wall mount?
SmartTiles Dashboard 5.4.2 - July 13 (www.SmartTiles.click)
FAQ: How to add a second wall dimmer without wiring?
ActiON Dashboard 4.6.3 is here! (Now SmartTiles.click)
DIY SmartThings "Relay Touchscreen Controller"
SmartTiles
ActiON Dashboard 4.6.3 is here! (Now SmartTiles.click)
Cheap Wireless Remotes or Switches - No Neutral! (UK)
ActiON Dashboard 4.6.3 is here! (Now SmartTiles.click)
Help Please > Looking for whole home setup advice
Crazy or genius? Replace switches with tablets
Rooting a Kindle Fire with OS 5.3.2?
Rough Discussion: Custom Hardware for a Wall Mounted Touch Panel?
Native Control Panel for Smartthings? iPad/Android/Mac?
SmartTiles Dashboard v5.7: Release March 2, 2016
Smarttiles Dash Icons on Android Tablet issue
Kids and android phones
Security levels within the mobile app
Mobile app authorization levels for multiple users (teenagers!)
Any switches similar to an Insteon Keypad?
Windows Phone App - Pin specific items to Start
Using MoodCube to set Mode?
Consolidated View of ALL Lights in The House in One Place
Qolsys IQ Panel
Amateur Questions
VFAQ: Lighting Control Options for UK SmartThings
Starting Over? Need alarm integration
Lynky: Touchscreen Smart Hub with Google Assistant
Wall Touchscreen Controller
Home Theater Smartthings Lighting setup?
SmartThings account for child?
Fire Tablet Setup Script for ActionTiles [BETA UPDATE 12-4-18]
[RELEASE: v6.7] ActionTiles (formerly called "SmartTiles V6")
Nexus 7 2012 auto screen-on?
Z-Wave Multi Button Device Suggestion?
Repurpose a door/window contact as a smart switch
SmartTiles v5.8: Deployed to Blue & Green Editions. Release notes, etc. (follow this Topic for updates...)
Differentiate access to users across multiple hubs
CSS Recipe for single-height Smarttiles thermostats
3D Printed Fire Tablet wall mount
(Pre-Subcategory creation) Deals/Sales/Coupons/Pricing
SmartTiles Dashboard v5.6.1: New features (SHM), Bug Fixes, Diagnostics - Dec 11, 2015
SmartTiles Dashboard v5.6.1: New features (SHM), Bug Fixes, Diagnostics - Dec 11, 2015
SmartTiles Dashboard v5.6.1: New features (SHM), Bug Fixes, Diagnostics - Dec 11, 2015
IFTTT and SmartThings (UK accounts)
SmartTiles Dashboard v5.5: Added UK :uk:, 5 × Dashboards, and more! Nov 6, 2015
Multiple tablets - with room relative focus
IFTTT and SmartThings (UK accounts)
Wall Mount Frame For Fire HD 10
Wall Mounted Tablet with Ethernet?
Draw Power from Light Switch?
Control panel wall mount ideas
Control panel wall mount ideas
SmartTiles Dashboard 5.4.2 - July 13 (www.SmartTiles.click)
Wink Relay or is there something better?
ZWN-SC7 Enerwave 7 Button Scene Controller
Z-Wave Switches, whats the best implementation of them?
What would you put in an ultimate Smart Home?
Location of network equipment whole home coverage. need reco's for wiring and finishes
DIY SmartThings "Relay Touchscreen Controller"
Retro Fitting Light Switches - What is available in the UK
SmartTiles Dashboard 5.4.2 - July 13 (www.SmartTiles.click)
Kitchen Light Ideas
Timeline - current status of upcoming stuff
SmartTiles v5.8: Deployed to Blue & Green Editions. Release notes, etc. (follow this Topic for updates...)
I must be missing something here... Apps have no features
SmartTiles Dashboard 5.4.2 - July 13 (www.SmartTiles.click)
SmartTiles Dashboard 5.4.2 - July 13 (www.SmartTiles.click)
Smarthings App - User version
In-Wall Scene Controller for Nursery Room?
(Scott Windmiller) #2

Love this idea! I will post mine as soon as I have a chance


(Alex) #3

Thank you @korban_hadley for starting this thread. I think it would be a good idea to change the title to also include discussion on mounting hardware and tablets.


(Scott Windmiller) #4

I went with all gray tiles
Here is my custom CSS at the bottom of the smartapp:

def customCSS() {
"""
<style>
/*** Custonm CSS Start ***/
.tile {background-color: grey}
.weather {background-color: #333333;}
.clock {background-color: #333333;}/*blue gray*/
.presence {background-color: #333333;}/*indigo*/
.lock {background-color: #333333;/*red*/}
.hello-home {background-color: #333333;}/*purple*/
.switch, .dimmer, .momentary, .light {background-color: #333333;} /*green*/
.contact {background-color: #333333;}/*pink*/
.refresh {background-color: #333333;} /*blue gray*/
.temperature {background-color: #333333;} /*amber 900*/
.mode {background-color: #333333;}/*deep purple*/
.motion {background-color: #333333;}/*blue*/
.humidity {background-color: #333333;}/*brown*/
.link {background-color: #333333;}
.thermostat {background-color: #333333} /*teal*/
.energy {background-color: #333333} /*l green 800*/
.power {background-color: #333333} /*l green 900*/
.water {background-color: #333333} /*cyan a900*/
.music {background-color: #333333} /*purple a700*/
.battery {background-color: #333333}
.camera{background-color: #333333} /*lime*/
.video {background-color:#333333} /*dropcam grey*/
.blank.tile{background:none;}
.dashboard {background-color: #FE0002;} /* red */

.switch.active .icon {color:#FFFF00}
.light.active .icon {color:#00FF00}
.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:#59FF00}
/*** Custonm CSS End *****/
</style>
"""
}

I also changed some of the icons manually around line 701 but this may not be necessary anymore since I think 625 Alex may have either updated or showed how to do it in the CSS. I have not made those changes yet:

def getTileIcons() {
    [
        dimmer : [off : "<i class='inactive fa fa-fw fa-toggle-off'></i>", on : "<i class='active fa fa-fw fa-toggle-on'></i>"],
        switch : [off : "<i class='inactive opaque fa fa-fw fa-lightbulb-o'></i>", on : "<i class='active fa fa-fw fa-fw fa-lightbulb-o'></i>"],
        light : [off : "<i class='inactive opaque fa fa-fw fa-lightbulb-o'></i>", on : "<i class='active fa fa-fw fa-lightbulb-o'></i>"],
        lock : [locked : "<i class='inactive fa fa-fw fa-lock'></i>", unlocked : "<i class='active fa fa-fw fa-unlock-alt'></i>"],
        motion : [active : "<i class='active fa fa-fw fa-exchange'></i>", inactive: "<i class='inactive opaque fa fa-fw fa-exchange'></i>"],
        presence : [present : "<i class='active fa fa-fw fa-user'></i>", notPresent: "<i class='inactive opaque fa fa-fw fa-user'></i>"],
        contact : [open : "<i class='active r45 fa fa-fw fa-expand'></i>", closed: "<i class='inactive r45 fa fa-fw fa-compress'></i>"],
        water : [dry : "<i class='inactive fa fa-fw fa-tint'></i>", wet: "<i class='active fa fa-fw fa-tint'></i>"],
        momentary : "<i class='fa fa-fw fa-circle-o'></i>",
        camera : "<i class='fa fa-fw fa-camera'></i>",
        refresh : "<i class='fa fa-fw fa-refresh'></i>",
        humidity : "<i class='fa fa-fw wi wi-sprinkles'></i>",
        temperature : "<i class='fa fa-fw wi wi-thermometer'></i>",
        energy : "<i class='fa fa-fw wi wi-lightning'></i>",
        power : "<i class='fa fa-fw fa-bolt'></i>",
        battery : "<i class='fa fa-fw fa-fw batt'></i>",
        helloHome : "<i class='fa fa-fw fa-comment-o'></i>",
        link : "<i class='fa fa-fw fa-link'></i>",
        dashboard : "<i class='fa fa-fw fa-th'></i>",
        holiday: getHolidayIcon()
    ]
}

I think I only changed the switch and presence icons.


(Scott Windmiller) #5

Just updated to the latest version and decided to use @625alex’s method for changing everything in the custom CSS only.
Here is what I have in the Custom CSS section:

/*** Custonm CSS Start ***/
.tile {background-color: grey}
.weather {background-color: #333333;}
.clock {background-color: #333333;}/*blue gray*/
.presence {background-color: #333333;}/*indigo*/
.lock {background-color: #333333;/*red*/}
.hello-home {background-color: #333333;}/*purple*/
.switch, .dimmer, .momentary, .light {background-color: #333333;} /*green*/
.contact {background-color: #333333;}/*pink*/
.refresh {background-color: #333333;} /*blue gray*/
.temperature {background-color: #333333;} /*amber 900*/
.mode {background-color: #333333;}/*deep purple*/
.motion {background-color: #333333;}/*blue*/
.humidity {background-color: #333333;}/*brown*/
.link {background-color: #333333;}
.thermostat {background-color: #333333} /*teal*/
.energy {background-color: #333333} /*l green 800*/
.power {background-color: #333333} /*l green 900*/
.water {background-color: #333333} /*cyan a900*/
.music {background-color: #333333} /*purple a700*/
.battery {background-color: #333333}
.camera{background-color: #333333} /*lime*/
.video {background-color:#333333} /*dropcam grey*/
.blank.tile{background:none;}
.dashboard {background-color: #FE0002;} /* red */

.switch.active .icon {color:#FFFF00}
.light.active .icon {color:#00FF00}
.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:#59FF00}
.tile.switch[data-device='26c79be6-4dd9-4bf7-90cc-cc07213c772b'] .icon i.inactive:before {content : ""}
.tile.switch[data-device='26c79be6-4dd9-4bf7-90cc-cc07213c772b'] .icon i.active:before {content : ""}
.tile.switch[data-device='0efbbf1e-0e00-42c8-9d5a-f5e497f36af5'] .icon i.inactive:before {content : ""}
.tile.switch[data-device='0efbbf1e-0e00-42c8-9d5a-f5e497f36af5'] .icon i.active:before {content : ""}
.tile.switch[data-device='6102c684-898c-404b-b469-23882d33c827'] .icon i.inactive:before {content : ""}
.tile.switch[data-device='6102c684-898c-404b-b469-23882d33c827'] .icon i.active:before {content : ""}
.tile.presence[data-device='2295e34d-0666-4515-a093-4dfbb539bcd5'] .icon i.inactive:before {content : ""}
.tile.presence[data-device='2295e34d-0666-4515-a093-4dfbb539bcd5'] .icon i.active:before {content : ""}
.tile.presence[data-device='5f181f7a-ca13-47a6-96c4-ddc3b05b147f'] .icon i.inactive:before {content : ""}
.tile.presence[data-device='5f181f7a-ca13-47a6-96c4-ddc3b05b147f'] .icon i.active:before {content : ""}
.tile.presence[data-device='b40cff46-b4c1-4079-b8bb-72e8d82c22b7'] .icon i.inactive:before {content : ""}
.tile.presence[data-device='b40cff46-b4c1-4079-b8bb-72e8d82c22b7'] .icon i.active:before {content : ""}
/*** Custonm CSS End *****/

Some of the background colors are unnecessary for me currently as I don’t have all of those devices but I left them in anyway.

Now when there is a new version I just overwrite everything but the Custom CSS.
Much easier, thanks @625alex!!


#6

i’m lazy, i use the stock CSS and i have digiland tablets stuck to the wall with 3M velcro strips. i use an app called redeye to keep the tablets from going to sleep and i just keep the dashboard open all the time.


(Ash (www.smart-dots.com) / Ashutosh Jaiswal) #7

Has anyone thought of an elegant way of mounting a cheap android tablet which displays the action dashboard? Assuming it has a power supply from the wall (internally wired) - Wasn’t able to find a tablet which has the power connection hidden somewhere behind it…so that when it is mounted on the wall , we see just the tablet - How about using the camera on the tablet for security monitoring?


(DLee) #8

Yes, apparently unusually large picture frame borders do the trick. :flushed:




(Alex) #9

I’m hacking a Qi wireless charger to mount a Nexus 7 on a wall with no visible hardware or cables and minimal damage to the wall. I will post a picture once I finish.

I’m trying to relocate my Nest thermostat so that it would take a more focal point together with the dashboard.


(Korban Hadley) #10

I created a frame similar to this. https://www.youtube.com/watch?v=nunw20h6W0I. So far it has worked well. I put a USB outlet in the wall.


How to control 2 devices with 1 switch
(Huy Nguyen) #11

I’m in the process of hacking a QI charger and using some magnets to mount mine. Parts are in the mail will post pics when I’m done to…


(Alex) #12

I considered using magnets, but command strips will do for now. I didn’t want to wait a month for magnets to be shipped.


#13

@swindmiller I copied your CSS overrides and I love it. I just added a couple of Cree bulbs but I can’t the tiles to look like your background.

Any pointer as to what to edit? Thanks!


(Scott Windmiller) #14

Glad it worked for you.
I don’t have any bulbs…only switches. Can you copy the icon I show for switch to your bulb section?
Let me know.


(April Wong) #15

Korban, I love your sweet kitchen! + how clean this looks.


#16

Funny you should ask did alot of research and best value tablet is the Amazon Fire HD 6,

99$ and has almost retina display (252 ppi)!

Here’s it running ActiON:

Now unfortunately there is no wall mounting enclosures so I decided to make my own!

Going to get it 3d printed :wink:


DIY SmartThings "Relay Touchscreen Controller"
(Matt) #17

Looks good. The price of the Fires is tempting but I worry about buying something that can’t be rooted, you know just in case.


(Korban Hadley) #18

3d printers is a great idea for making a wall mount.


#19

I got the bulb tile to look the same as the rest, too bad I can’t do any edits on IDE, it won’t let me save my changes. I will wait until Alex publishes his new version,


(Scott Windmiller) #20

What browser are you using? I do everything thru Firefox but for some reason I can only save once in IDE thru Firefox. IE works great with IDE so I use that.