Dashboard Theming (Custom CSS) and Mounting Hardware Ideas

Nice work! I live in Florida also and wasn’t too concerned about heating, but it also would have driven me crazy in the winter when we do use the heater. Thanks for finishing this out!

I LOVE YOU
I owe you one! Whenever you come to Italy…
thanks thanks a lot
fab

1 Like

it was meant to you
I LOVE YOU
I owe you one! Whenever you come to Italy…
thanks thanks a lot
fab

2 Likes

I have some bad news here for people who were wanting to use it as an interactive board.

It appears that Rise Vision only works well with SmartTiles when it’s in the preview mode. Once it’s launched as a presentation, it does not respond. I just set it up on a spare laptop with a touchscreen and it wouldn’t respond. USB mouse didn’t allow me to click anything either.

It will however be great for displaying on a standard monitor or TV, if you don’t plan on using it for direct interaction. To that end, it would still be great for dashboards of video feeds and statuses (battery, open/close, temp, motion, etc).

I may just have to create my own version of an interactive presentation using AHK to cycle through multiple web tabs.

1 Like

How would I make one tile larger on my dashboard?

Wow…this is cool (sort of anticlimactic at first, of course, but…) so much to go through, and I want to just sit back with you and a beer (OK, 2 beers) and discuss this stuff!

I will pick out one thing…so, regarding the first point, about it not being interactive even when on touchscreen devices (big bummer)… my first thought (well, after getting bummed out a little) was, perhaps it couldn’t hurt to ask the makers if there’s any chance they’d be willing to throw us another bone (i.e. it’s already a really cool product…and free) and add an option to allow it to be interactive or not (set per user configuration choices/preferences/use case).

You ask or should I? :slight_smile:

Oh ya…

Any chance we could see something you worked up?
Do you have any more you want to share about how it works, etc? I just haven’t been able to get to it yet. Seems pretty cool, and like you said, it could certainly be used for plenty of things if interactivity is not in the cards.

1 Like

You asked and you shall receive!

Actually… In the first take of making the following video I had a revelation. I can interact with my SmartTiles dashboard as long as I do a full page URL for it, not a splitscreen one.
While that may not be ideal for everyone, it does work out well for me as my primary dashboard (the one I would interact with) is fairly large. The smaller Battery Dashboard is smaller so I can put that on a shared screen. It’s just full of battery percentages so interaction isn’t needed.

When creating the Schedules in Rise Vision, you can set up your created presentations in the order you want them to run and for the amount of time you want them to run. Another option is to set up a direct link to a URL that runs full screen.

3 Likes

Check this thread out for a 3D printed New Fire tablet wall mount:

Depends on what you want to do:

All tiles:
.tile {width: 200px; height: 200px;}

All tiles of a certain type:
.tile.momentary {width: 200px; height: 200px;}

Specific tiles:
.tile.momentary[data-device=‘xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx’]{width: 200px; height: 200px;}

To get the data-device=‘’ login to the IDE > Select My Devices > Select the specific device you need > Select List Events > Select a date/time stamp > cut&paste the number next to deviceId as the masked area above.

I’m not sure if there is an easier way to get there, but this is what worked for me.

1 Like

You can also get the data device info from the Developer Options in a browser.

For example on my weather tile…

<div class="weather tile w2" data-type="weather" data-device="xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx" data-weather="partlycloudy" data-fixsize="0" data-delay="4" data-height="120" data-width="240" data-state="move" style="position: absolute; opacity: 1; width: 243.64px; height: 119.82px; top: 0px; left: 742.91px; transition: top 0.5s, left 0.5s, width 0.5s, height 0.5s, opacity 0.5s;" id="4-2"><div class="title">Canal Winchester, OH<br><span class="title2">Partly Cloudy, feels like 63°</span></div><div class="icon"><span class="text">63°</span><i class="wi wi-day-cloudy"></i></div><div class="footer">6:46 AM <i class="fa fa-fw wi wi-horizon-alt"></i> 6:35 PM</div><div class="footer right">0%<i class="fa fa-fw fa-umbrella"></i><br>56%<i class="fa fa-fw wi wi-sprinkles"></i></div><i class="spinner fa fa-refresh fa-spin"></i></div>

1 Like

I also just noticed it is in the url for the device when selected from the IDE: https://graph.api.smartthings.com/device/show/xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx

Much easier to find and then cut and paste!

2 Likes

I have a tile for my Aeon HEM V1 where the width is short so the h in KWH is cut in half, so I want it slightly wider. I tried using .tile.momentary[data-device=‘xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx’]{width: 250px; height: 200px;} with my device ID in the CSS but nothing happened. When I move the tile to the last on the page the background color isn’t wide enougth and the h is hanging over the edge into the blank screen.

My complete custom css looks like this:
.ui-li-static {
height:120px;
width:;
font-size:30;}

.tile.momentary[data-device=‘9b6a2d93-1560-xxxx-8485-0bd0572f12a4’] {width: 250px: height: 200px;}

.fa-toggle-off {opacity: 1!important}

I haven’t played with it much but maybe this might work to change the size of the text to fit better.

.tile.momentary[data-device=‘9b6a2d93-1560-xxxx-8485-0bd0572f12a4’] {font-size: .75em;}

I believe the .75 will make it 75% the original size based on limited experimenting here.

I wonder if there is a way to add a space between the number and kWh to break it into two lines?

There are other CSS experts here that can give better advice. I just play with what others have written.

no that didn’t work either, i tried different values no change at all.

SmartTiles is based on an underlying square grid unit. Every Tile width and/or height must be an exact integer multiple of the basic square size.

@625alex might know the CSS well enough (or the various CSS hackers here!) to figure out if there is a way to make an arbitrary tile a “double-wide” or “double-tall”; but I’m pretty certain that fractional adjustments not likely to succeed.

yes looks like that but font should be able to change for just the data.

1 Like

is your HEM a momentary button??

It should be .tile.energy and then it will work.

Works for my Energy meters

I believe @Stroh was just giving you an example for a specific tile.

1 Like

If you want to change dimensions of a tile, you need to set values that are multiples of the base tile size, which is 120px by default.

Your CSS selector of .tile.momentary is not correct, should be tile.energy.

You may want to reduce font size. One of the correct ways of doing it is like so:

.tile.energy[data-device='xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx']{ font-size: 1em}

You may aslo try to set the SmartApp preference to round off numbers. It looks like this option is disabled on this dashboard.

Hem is not a momentary button it is a meter that reads the watts on the incoming lines to your home or business. I tried tile energy and the tile became black with no info… Rounding off did the trick, but it makes it less accurate, not a good trade off. I don’t know why I couldn’t make the font smaller just about tried everything.

I tried to reduce font size but nothing happened and I know the line in my CSS is correct. any other ideas?