[RELEASE] HousePanel Dashboard for SmartThings and Hubitat

Hi Ken,
Had to wait till I got home. I now have my stuff all updated. Complete fresh install just to confirm I was having problem due to me changing things.

I displayed all three tiles for my hue bulb in this image left to right - Light, switch, switch level

image

The control for the temp at the bottom is working in increments of 50. However once it gets turned all the way up (6500 is highest I can set it in smartthings, however it shows 6536 K) it will no longer turn down. Sorry for the late reply. Let me know what I can do to help make this work.

Yes, but be forewarned: I’m now getting a Smartthings login page every time I click ‘Save’ on the Options page, so I may need your help tracking down what I broke.

I have made several edits to housepanel.js, housepanel.php, and housepanel.css. I am going to grab a fresh copy of my branch and copy everything over that has changed, with some annotations indicating what I’ve done. That should help narrowing down any issues. Likely you will want to clean up some things (I don’t code as much as I used to.)

One more note: can we change the id numbering linked to the bid to be 3 digits instead of 1-2? 001, 002 etc.
The reset button needs to clear the entire tile’s customizations, so it needs to traverse the customtiles.css looking for _# or _## and it would be better if we didn’t limit ourselves to 100 things. Thanks.

[RELEASE] Fairly important release fixes a few key bugs including hue lights. Also adds a nifty new feature where users can hide the Tabs (since some people think they are ugly) and reclaim real estate by clicking on a button or on the clock or anywhere in the open panel space. This version also includes four generic tiles that are just div placeholders for customizing into anything you want in CSS.

This is still the master branch without any of the cool options that Nick is working on as noted in prior posts. I will integrate those later. That will be a major release.

This was corrected to update in increments of 100. The graphic layout of the hue and saturation buttons were also fixed in the default CSS file. Fully testing will have to wait until I buy some Hue bulbs. I assume this means I also need a Phillips hub? I was hoping to not put any new hubs in the house…

Happy to help track it down and integrate your edits into the master as soon as I see the pull request or when you post your updates to your fork - I can clone it and do manual updates too.

I think I am going to proceed and integrate the first round of changes you submitted that provides the proper class and id hooks. Those are simple enough and will give users a lot of extra flexibility for manual CSS updating even before your Options page features are done.

Hey Ken,
No worries on this. Thank you for attempting it at all. I know there are higher priorities. If it helps I could setup some sort of remote access to my system for you if it will save you the trouble of purchasing the hub.

Just for the future I think increments of 100 for the temp may still be too small - off the top of my head it ranges from about 2500 to 6500 - would take 40 clicks from one extreme to he other.

At the risk of sounding a little dense, but what would be the correct upgrade path to keep skin customizations (in a separate skin folder!) and in which order to update what (smartapp, server files, etc)?

–Zax

There is no special order. Just grab the latest version and copy the skin-housepanel folder to your own name and then edit there. On the options page put the name you used in the skin options box and his save.

We will need to address this at some point: While on the ‘Options’ page, the skin that is loaded is skin-housepanel, no matter if you have a different skin already active. Basically, you have a bunch of checks that default to skin-housepanel in the top of the code, but if you are displaying the Options page, it doesn’t load the active skin. I noticed this when inspecting code when I had a skin named ‘skin-tinker’ on. This affects being able to use a different skin folder and use what I’m working on.

btw, had some honey-do stuff of my own, so delayed for a couple hours. Will post in a few hours.

Yea I know. It’s an easy fix - I just loaded the default out of laziness. I will fix this on the master branch.

I agree - I will change this to 300. The official range is 2700 to 6500 so 300 should work fine as 12 clicks.

I want to buy a hue bulb anyway. They seem cool. Does it require the Phillips hub or can I do a direct WiFi connection like SmartLife bulbs.

Hue bulbs are zigbee i believe. Looks like this post has lots of relevant information.

So looks like hue hub is recommended but not required.

Oh, ok, no problem then! No updates to the smart app then. Good good! You guys are awesome with those changes! Wish I could contribute in any way. If you need any graphics or icons or whatever, let me know, that’s something I can do :stuck_out_tongue:

I grabbed your current master branch and used Beyond Compare to merge in my changes and add some notes. Besides moving the icons from skin-housepanel to skin-housepanel/icons the following (3) files were changed:
housepanel.php
housepanel.js
skin-housepanel/housepanel.css

All of these changes are in my fork, not my branch. I closed an earlier pull request that wasn’t able to merge and it was getting messy. My fork reflects changes from v1.44

Lets do the tile display name edits in the grid as you suggested. I’ll leave it up to you how to launch the dialog if you don’t like the edit button.

Also note that we’ll need to implement some cache-busting on customtiles.css. I need to hard reload once I get back to my display.

Please note that only items that I have tested/working will display the edit button. I only have switches, switchlevels, bulbs and contact sensor in my smartthings…

and here’s a preview of the color picker (thanks to @unconed for Farbtastic)

dialog
-Nick

P.S. Merging in my edits to your new master seems to have fixed the issue with Smartthings login popping up.

Looking better Ken. Hue and saturation are responsive.

image

I merged it all in and have it working. Before I merge this into the master I’ll want to do some code cleanup and tweaking to the js file. Alot of what you did is pretty cool stuff and it looks great, but it is much better and secure to avoid putting the js calls into the html directly. I’ll rewrite this. I also noticed you didn’t make use of jQuery which would have reduced a lot of the workload. I’ll work on that. And finally I added a new function to renumber the items in the index that a user can call as an option to keep the index numbers small. More on that later. We’ll probably want to not include an example customtiles.css file and instead auto-create one since any example we give won’t apply to anyone. I love the color picker… good stuff. Not crazy about the rainbow buttons but they might grow on me. I’m back at work today so more later in the week.

Oh, I hate them, especially with the white text. I will redo them when I add the width & height boxes

LOL … good, glad it wasn’t just me.

One other thing is the icon save should be integrated with the rest of the options page save. I can handle that. I had to chmod 666 to my customtiles.css to get the save to work. Just like hmoptions.cfg so this raises the priority for writing an install script. I will get cracking on that soon.

FYI Color picker should be delivered shortly if you want to hold off on deciphering my sloppy, outdated coding techniques :smile:

Instead of initializing sheetContents with “” make the start of the string a css comment + a newline character:

var sheetContents = "/*Generated by housepanel.js*/\n"

I manually merged your prior post because it was missing the p and n tags. Will need to manually do new ones too.

hmm, the one from my fork had them, or else it wouldn’t work…
Anyhow, I’ve added text color to color picker options, so we now have a t_ flag as well. Will post shortly…

BTW: Hold off on editing the display name in the grid (you’ll see why on next pull.)

ToDo: Copy/Paste customizations from one tile to next… :wink:

A truly awful color scheme edited with the picker:

dialog