Show Off Your Dashboards!

This is going to be great for back yard/front yard layout. Drawing out the house interior may be difficult.
When positioning tiles, how do you determine pixel spacing and location?

I know; it is confusing. What is the address of the webpage (I.e. is it http://hubitat_local/app/432 or is it http://192.168.1.211/app/432). If it has the IP address of the hub then it is correct for configuration.

Getting a 404 when I do that.

Also, when I try to integrate one of my own sensors, it thinks I'm adding only visibility:

Integrated my Nest thermostate in the temperature's page :nerd_face:

http://192.168.1.211/installedapp/configure/78/mainPage Sorry; those were just examples :). I believe the exact address would be http://YOUR IP ADDRESS/installedapp/configure/YOUR APP NUMBER/mainPage

Thanks for your patience

Here is my Smart Mirror. My wife and I love it. Would be interested to know of any Hubitat integrations. (Magic Mirror)

5 Likes

Looks like magicmirror? I’d love to see a drive that interfaces with the remote control module. Once I get one built I’ll put an iframe in to show a dashboard.

I've thought about doing the same. Could you make a touchscreen mirror?

Yes, with an IR frame.

Nothing drives me crazier than fingerprints all over my mirror. Voice control would be my preferred control for these.

3 Likes

They make touch overlay's, so you could possibly make it work that way. Looks like a kit on that page lol.

I noticed some users have dashboards through their android head units in their car? How is that accomplished, is there an android auto app or is it some kind of screen mirroring?

1 Like

Its a head unit with a browser.

Ah got it, thanks!

My wife is finally happy with my panel. Take a look.

9 Likes

Hey community I am new to coding with CSS and need some help. I'm trying to figure out how to code CSS so that my status bar is the same size for the top two tiles. Using Chrome Browser Inspect I'm able to get the background to line up by changing background-color in the HTML but I can't figure out how to convert that to either CSS or JSON code.

Here is the before:

If I change the HTML to rgm (0,0,236) than it looks like what I want:

This is my current CSS code prior to making HTML change

I'm sure this is a very simple one line command to my CSS file so I can get it to match when I force change it using HTML but I'm stuck so appreciate any suggestions you might have.

The first one is my kitchen wall setup, i bought a large touchscreen monitor, ran the HDMI cable/power/USB into my wall and into the pantry closet next to the wall. Setup an Intel NUC computer to run the Hubitat Dashboard full screen and also a shared O365 calendar for the family to see and use on their phones.

The second one is around the corner in my living room, running on an Amazon Fire tablet, setup a recessed power outlet for the USB cable to power the tablet itself and then mounted the tablet to the wall in front of it so its covered.

Both are displaying controls for various lights and garage door opener, the large monitor runs a feed of my Nest Doorbell cam and my Nest 4k camera mounted to overlook my driveway, to save space the tablet just runs a stream of my Nest Doorbell camera.

1 Like

So try adding:

#tile-1 { background-color: rgb(0,0,236) !important; }

You might not need:

#tile-1 .tile-primary { background-color: rgb(0,0,236) !important; }

Also, I'm not sure if !important will be required, I'd try it without first, then add it if needed.

Very nice setup!
When you say it's showing a feed of your nest cameras, what method did you use? Is it the one involving making the feeds public?

Yes, that’s correct.
Not perfect but it works.