Show Off Your Dashboards!

Awesome idea #audiofreak9

Hey @Angus_M
I work with large ProCap touch foils from a company called “Displax” out of Portugal.
They’re easy to apply - just like window tint foil but the first time is a little nerve racking.
BUT the substrate cannot be conductive. As
Most of the applications I’m involved in are shop windows, office Meetingrooms or exhibition interactives we stipulate “low iron glass” so I’d doubt very much a 1/2 silvered mirror would work.
You also have to cater for a small air gap between the rear side of the foil and the display being used. (to eliminate interference and false touches.) This air gap should be adjustable as every LCD has different EMI noise.

Interesting, thanks. I think I will buy a piece and see how it goes.

Good luck.
You’ll know pretty quickly if you just lay the foil on a flat wooden table and put a plain piece of glass on top of the foil. Connect up a laptop via USB and confirm the pointer moves correctly. Then swap the plain glass for a mirror.
You should be able to do this test without laminating the foil to anything but if it is really ProCap technology, it’s unlikely to work behind a 1/2 mirrored surface.

1 Like

Hey Thomas, did you make this using only css in the default dashboards app? And also how did you include the weather stuff in that?

Most of this was done using my custom app - HubiGraph. It supports graphing via Google Charts and because ... reasons: Weather Conditions and Forecasts via Open, and Radar via Windy.

It is added to the dashboard with a HubiGraph Child device that has an Attribute defined which contains an iframe. I do some CSS, Java Script, too much Groovy and a pinch of hacking to get it come all together. Bake at 350 degrees for 20-minutes and you have the app. If you’re interested, take a look at the link.

I am a bit confused on the Template Color editor. I have external temperature devices that measure temperature, humidity and hi/lo for both. This info is sent to a hubitat app I created which in turn updates a virtual temperature device. Here is the issue.

I can create a tile for each of the attributes available in this device using an "Attribute" template but this would only let me assign one color (default is the only state available) regardless which attribute is showing.

I can create tiles using the Temperature and Humidity templates showing the current temp/RH as well as create tiles using the Attribute template for the temp/rh highs and lows. While this would give me unique tile colors for temperature and humidy, any of the attribute template tiles would be of the same color.

I can not figure out how I can have one unique color for each these tiles(Temperature,Humidity, Temp Hi, Temp Lo,etc....) Is this even possible and if so, how?

.

If you leave the template colors alone, you can use the CSS tab to assign background-color to the individual tiles.

1 Like

Can you do that for a specific contact sensor so that when open it is one color an different for closed. If so can you share the CSS code?

Thank you

Going to try a few things using combinators to see if I can get closer but this will get you most of the way there
#tile-id .open {background-color:red}
#tile-id .closed {background-color:red}

1 Like

Works like a charm. For anyone in the future looking for the same thing:

.tile { text-shadow: none; }
#tile-20 {
background-color: #ff7400!important;
}
1 Like

I am using this CSS:

#tile-65 .tile-primary>div {
visibility: hidden;
font-size: 0;
}
.tile { text-shadow: none; }
#tile-65 .open {background-color:#ff7400!important;}
#tile-65 .closed {background-color:red}
#tile-65 .tile-primary.open>div:after,
#tile-65 .tile-primary.closed>div:after {
visibility: visible;
font-size: 14px;
}
#tile-65 .tile-primary.open>div:after {
content: "Full";
}
#tile-65 .tile-primary.closed>div:after {
content: "Empty";
}

It is producing the following: image instead of the whole tile being the color. I am not sure what I am missing.

There is a higher level container (a div) than the div that knows the open/close status. You can set the .open/.closed div to

    display:block;
    postion:absolute;
    top:0px;
    left:0px;
    width:180px; 
    height:160px;

to get full coverage of the tile (if you haven’t changed the tile size). It does cause other issues that will need adjustments.

1 Like

Tried it already, doesn't work, the mirrocoating on almost all types of mirrors are metal and disrupts the touch foil. Works well under regular glass and glass tinted with black toned film however.

There are twoway mirrorpanels made with touchfoil (guessing using som non metallic reflective material or layered somehow), displax, the company mentioned before sells these panels.

1 Like

Ok, thanks for the insights.

Here is my dashboard. I like the uniformity and being able to quickly tell what is active, open or on by the color. The bottom row of icons is for navigation to other dashboards.

3 Likes

So, does your MyQ garage door tile work to open/close the door?
I cannot get my integration to work

Great dashboard, BTW

Yes. Mine works great. Thank you

Any hints on how you set it up?

I didnt do anything special. First make sure you have the MyQ garage door working in the MyQ app. I am using the MyQ Lite. If you need the appcode, letme know. Then i just followed the app instructions.