Dashboard Theming (Custom CSS) and Mounting Hardware Ideas

Wiki Projects & Stories
, , , ,
162

@625alex. Can you complete the Security pin integration for the SmatTiles? I really want to setup a tablet with the dashboard in order to Arm/Disarm the Smart Alarm via the Hello Home frazes and I can’t do that yet because the dashboard does not securely lock. Also, can you add a feature for the dashboard to auto load when the Android loads up, almost like a custom load. Just a thought.

163

If you are using Android you can just use the lock screen that come with the tablet, thats what I do. Also as far as I know there is no way to auto load on startup unless you are running a custom rom. I am very new to Android and am still learning so I could be wrong, if there is a way I would love it too :smile:

164

Actually you are incorrect. I am using an IP Webcam on my old Samsung (Not Rooted) as a baby cam. It has an option to force the device to load the baby cam on restart. This is very useful if your device runs out of power or crashes and reloads.

Also. thanks…for the thought.

165

Thanks, my experience shows :blush:
Since SmartTiles only runs thru a web browser wouldn’t the browser need to have the autostart feature and not SmartTiles?

166

On Android, you can use Tasker to launch an app or run an activity on boot.

  1. Create a profile and use the Event context > System > Device Boot.
  2. Inside the profile, you would add a Task with the Action: Net > Browse URL to open your SmartTiles page.
10 Likes
167

@joshua_lyon. Now that is a Great Idea. Thanks Joshua.

168

Awesome, thanks for that!

169

I’ve used this on my install

You can set it as the homescreen, and disable the lock screen to make it available at reboot. It does a few other nice lock down stuff, and I’ve bought the pro version so my panel shows a nice slideshow of pictures until you touch it.

7 Likes
170

i use this too, it has a lot of flexibility as far as configuration goes

171

I know the battery is a custom icon, but I cannot figure out how to change the color of the icon. For me it is stuck white or the hex code equivalent.

Also I have two custom tiles that pull audio levels and air pressure. I am trying to figure out how to add an icon to the left footer of the tile, like the other standard tiles. When I look at the page on the app to change the device order of my tiles I see the icons and background color I added for my items, but when I look on the tile there is just the current state of the device. I tried looking at the new luminosity and acceleration tiles for clues in the app and support files, but I feel I am missing some small detail to get it to work.

172

The battery icon is missing from the Font Awesome library, so it’s hard coded to white image. This is why you are not able to change it’s color. I will be addressing it in the maintenance release 5.4.

You need to add icon reference in this area of SmartTiles javascript file. Then, you will need to host your modified version of the javascript.
Altenatively, you can change the tile rendering in SmartTiles.groovy to add your icons there.

Since audio level and air pressure capabilities technically don’t exist within ST universe, I can’t really code for these capabilities.

1 Like
173

Sorry, I’m a bit new to ST. I can’t seem to find the code to modify icons since I’ve installed SmartTiles via the web app. Is it possible to modify?

Also, will the icon changes persist through updates?

174

Doing the Install Now will not let you customize, yet. You have to install via the IDE, this should get you going

175

Upcoming release of SmartTiles will expose the custom CSS, including installations via “Install Now” option. The CSS changes will be persistent between updates.

9 Likes
176

Is there away in custom css to have the color change base on the temperature in the tile?

177

Yes, your CSS selector should be something like this:

.temperature[data-value='20°'] .icon {color: red}

You have to add one selector per temperature value.

3 Likes
178

@625alex thanks. I see my error was missing the degree sign.

179

@DarcRanger, can you do this with a temperature range or just individual temps?

180

@swindmiller … each degree needs a color or it will default to your original color. I just did this it took a little while. The color I used is a test, but you’re welcome to copy and paste if you wish.

.temperature[data-value=‘105°’] .icon {color: #8B0000}
.temperature[data-value=‘104°’] .icon {color: #8B0000}
.temperature[data-value=‘103°’] .icon {color: #8B0000}
.temperature[data-value=‘102°’] .icon {color: #8B0000}
.temperature[data-value=‘101°’] .icon {color: #8B0000}
.temperature[data-value=‘100°’] .icon {color: #8B0000}
.temperature[data-value=‘99°’] .icon {color: #FF0000}
.temperature[data-value=‘98°’] .icon {color: #FF0000}
.temperature[data-value=‘97°’] .icon {color: #FF0000}
.temperature[data-value=‘96°’] .icon {color: #FF0000}
.temperature[data-value=‘95°’] .icon {color: #FF0000}
.temperature[data-value=‘94°’] .icon {color: #FF4500}
.temperature[data-value=‘93°’] .icon {color: #FF4500}
.temperature[data-value=‘92°’] .icon {color: #FF4500}
.temperature[data-value=‘91°’] .icon {color: #FF4500}
.temperature[data-value=‘90°’] .icon {color: #FF4500}
.temperature[data-value=‘89°’] .icon {color: #D2691E}
.temperature[data-value=‘88°’] .icon {color: #D2691E}
.temperature[data-value=‘87°’] .icon {color: #D2691E}
.temperature[data-value=‘86°’] .icon {color: #D2691E}
.temperature[data-value=‘85°’] .icon {color: #D2691E}
.temperature[data-value=‘84°’] .icon {color: #D2691E}
.temperature[data-value=‘83°’] .icon {color: #FF8C00}
.temperature[data-value=‘82°’] .icon {color: #FF8C00}
.temperature[data-value=‘81°’] .icon {color: #FF8C00}
.temperature[data-value=‘80°’] .icon {color: #FF8C00}
.temperature[data-value=‘79°’] .icon {color: #FF8C00}
.temperature[data-value=‘78°’] .icon {color: #FF8C00}
.temperature[data-value=‘77°’] .icon {color: #FFD700}
.temperature[data-value=‘76°’] .icon {color: #FFD700}
.temperature[data-value=‘75°’] .icon {color: #FFD700}
.temperature[data-value=‘74°’] .icon {color: #FFD700}
.temperature[data-value=‘73°’] .icon {color: #FFD700}
.temperature[data-value=‘72°’] .icon {color: #FFD700}
.temperature[data-value=‘71°’] .icon {color: #FFD700}
.temperature[data-value=‘70°’] .icon {color: #FFD700}
.temperature[data-value=‘69°’] .icon {color: #FFD700}
.temperature[data-value=‘68°’] .icon {color: #6B8E23}
.temperature[data-value=‘67°’] .icon {color: #6B8E23}
.temperature[data-value=‘66°’] .icon {color: #6B8E23}
.temperature[data-value=‘65°’] .icon {color: #6B8E23}
.temperature[data-value=‘64°’] .icon {color: #6B8E23}
.temperature[data-value=‘63°’] .icon {color: #6B8E23}
.temperature[data-value=‘62°’] .icon {color: #6B8E23}
.temperature[data-value=‘61°’] .icon {color: #6B8E23}
.temperature[data-value=‘60°’] .icon {color: #6B8E23}
.temperature[data-value=‘59°’] .icon {color: #6B8E23}
.temperature[data-value=‘58°’] .icon {color: #00FF7F}
.temperature[data-value=‘57°’] .icon {color: #00FF7F}
.temperature[data-value=‘56°’] .icon {color: #00FF7F}
.temperature[data-value=‘55°’] .icon {color: #00FF7F}
.temperature[data-value=‘54°’] .icon {color: #00FF7F}
.temperature[data-value=‘53°’] .icon {color: #00FF7F}
.temperature[data-value=‘52°’] .icon {color: #00FF7F}
.temperature[data-value=‘51°’] .icon {color: #00FF7F}
.temperature[data-value=‘50°’] .icon {color: #00FF7F}
.temperature[data-value=‘49°’] .icon {color: #66CDAA}
.temperature[data-value=‘48°’] .icon {color: #66CDAA}
.temperature[data-value=‘47°’] .icon {color: #66CDAA}
.temperature[data-value=‘46°’] .icon {color: #66CDAA}
.temperature[data-value=‘45°’] .icon {color: #66CDAA}
.temperature[data-value=‘44°’] .icon {color: #66CDAA}
.temperature[data-value=‘43°’] .icon {color: #66CDAA}
.temperature[data-value=‘42°’] .icon {color: #66CDAA}
.temperature[data-value=‘41°’] .icon {color: #66CDAA}
.temperature[data-value=‘40°’] .icon {color: #00FFFF}
.temperature[data-value=‘39°’] .icon {color: #00FFFF}
.temperature[data-value=‘38°’] .icon {color: #00FFFF}
.temperature[data-value=‘37°’] .icon {color: #00FFFF}
.temperature[data-value=‘36°’] .icon {color: #00FFFF}
.temperature[data-value=‘35°’] .icon {color: #00FFFF}
.temperature[data-value=‘34°’] .icon {color: #00FFFF}
.temperature[data-value=‘33°’] .icon {color: #00FFFF}
.temperature[data-value=‘32°’] .icon {color: #00FFFF}
.temperature[data-value=‘31°’] .icon {color: #00FFFF}
.temperature[data-value=‘30°’] .icon {color: #00FFFF}
.temperature[data-value=‘29°’] .icon {color: #00FFFF}
.temperature[data-value=‘28°’] .icon {color: #00FFFF}
.temperature[data-value=‘27°’] .icon {color: #00FFFF}
.temperature[data-value=‘26°’] .icon {color: #00FFFF}
.temperature[data-value=‘25°’] .icon {color: #00FFFF}

4 Likes
181

Sweet…thanks so much!!

1 Like