[RELEASE] HousePanel Dashboard for SmartThings and Hubitat

@kewashi Re-entered as a Motion Sensor and the Icon showed up as expected.

In relation to the Plug, I relate to what your saying, so working as it should currently, that’s good.

In relation to temperature and illuminance devices, am I correct in thinking by default there is no default icons and I need to look into the CSS styling? (I just happened to be trying to capture temperatures across my rooms as I have different devices that capture it), I thought of using it for the WAF :slight_smile:

Correct. You can add an icon tied to the name overlay in CSS.

1 Like

@KellyDarren try the new housepanel.css file that fixes the power tile and also fixes the temperature tile to use circles like the thermostat. It is in an updated version of the master branch. The fix is to use the overlay qualifier in the CSS file so it doesn’t impact other tiles.

You’ll be happy to know that I found a way to load HousePanel in MagicMirror :slight_smile:

You can load Magic Mirror via ‘npm start’ orrrrrrrrrrrrr you can run it as ‘node serveronly’ and then load it via chrome, which shows off HousePanel without having to verifying! It shows and loads, all the buttons work and I’m a very happy camper! :slight_smile:

I do have a question about the css…on the bottom where the “Options” “Refresh” “Hide Tabs” buttons are I would like to make that black background and not white but haven’t been able to figure that out in the css… tried a few things but can’t seem to pin point it. Suggestions? :slight_smile:

I recommend you turn on kiosk mode which will hide them altogether. If you really want them you can style them in CSS using form input for the first two and div.btn for the third one. Just inspect that section in Chrome and you will see the tag names to use. Make sure your CSS customization is physically placed below the original styling in the file.

By the way, I didn’t know what MagicMirror was so I looked it up. Really cool stuff. I may have to build me one for my bathroom.

1 Like

Thank you!! Great idea… When it comes to css I just lose my mind…should be the easiest thing I deal with instead it’s like a nightmare for me HAHA

Once I get the css sorted out I’ll post more pictures. HousePanel runs on “Page 4” of my mirror :slight_smile: It’s pretty awesome…slowing automating my house… HousePanel turned out to be THE BEST thing I have found!!

No problem. CSS editing is funky — by once you get the mental model in your head it is easy. Items separated by space means the one on the left of the space is a parent of the one on the right. Items dotted mean that each item is included in the class being styled.

For example, consider:

   <div class=“cowboy one”>
        hello world
        <div class=“two”>
             goodbye world
        </div>
    </div>
    <div class=“two”>
             another world
     </div>

Then:
div.cowboy.one
will style hello world

div.cowboy div.two
will style goodbye world

div.cowboy.one div.two
will be same as above

div.two
will style another world different than goodbye world

Ahh been away a few days - I see you are porting HousePanel to Hubitat Ken. My hub is on the way am very interested to see what comes.

Yea - I am making good progress. Switches turn on and off and dimmers work. I’m away from my PC today so should resume tomorrow. Anticipate a beta within a few days. You will love the speed but not everything is supported yet so you will want to run both in parallel. I’m writing the Hubitat update to work with both hubs at the same time. It is pretty cool.

That is pretty cool. I might keep my wifi/networked devices on smartthings for now until I can figure out how difficult it’ll be to port them over… both the sinope thermostats and nanoleaf led panels have custom apis for smartthings, so I’ll have to delve into the code a bit to figure out the switch.

On the plus side, I got my lutron caseta smart bridge pro kit on Friday, so I can migrate all my caseta stuff to the pro, and it’ll have local connection to hubitat (once it arrives, still in the airport last check)

Customized page for floor plan to see status of lights…


Thanks @kewashi for HousePanel. Great thing.

Cool, you got it in a page.

1 Like

But this might… lol

It uses ActionTiles, but doesn’t have to. It can use any dashboard within it. And soon, it will have a floorplan layout in it. The floor plan uses HousePanel, and that’s why I posted it here. To show that HousePanel is completely customizable, and @kewashi is more than happy to help if you get stuck (as I did).

This is wicked cool and really shows off the flexible nature of the HousePanel architecture. Thanks for sharing. I’m inspired to try to make one for my home now.

1 Like

And I think you can make a door icon that looks like a line when closed and a broken line when open to embed into the floor plan. Really got me thinking now…

1 Like

That’s my next project. Maybe tonight or tomorrow. Overall, took about 4 hours to get the lights how I wanted. Drawing floor plan took an hour lol. 7,800sq ft and not one room is square lol

lol hi Ken,

I have also been looking at this lcars overlay.

Is tthere a way to make housepanel point to different rooms with individual urls?

I’m not sure I understand what you mean here… each tab can represent a different room and each tab can have its own URL background image.

Well that LCARS overlay has its own tabs. I was thinking it would be nice if we could tie individual “rooms” in housepanel to these tabs.

So that a different LCARS tab would default to select rooms of housepanel.

LOL am I making any sense?

You would need the div id name for The different rooms in HousePanel. You can link to those rooms. That’s one way.

For instance housepanel.php#kitchen-tab or #livingroom-tab

This method DOES work. I tried it out.

1 Like