[RELEASE] HousePanel Dashboard for SmartThings and Hubitat

So, with the way the tiles are constructed, there is a tile wrapper, and inside that there is a header and an icon area. Originally, we had it set up that you could change the background color of the whole tile, however this wouldn’t let you set different colors based on state. The only part of the tile that currently has an on/off state is the icon area. This is why I added the functionality of coloring/adding gradients to the icon, so it could be different based on on/off state (or locked/unlocked etc.)

Gradients had to be added at the same time as an icon because the only way I know of to get both is when an image and a gradient are defined with a single css entry. Later maybe we could store the values in a variable and when either is changed the combination is applied.

The invert bugs me too, but I haven’t had a chance to get back to it. Right now about the only ‘fix’ I implemented was inverting the color picker in code if the icon is already inverted.

Perhaps the easiest solution is to have an on/off state for the tile, and not change the bg color of the icon. That way the icon would be the only thing inverted, and the whole tile would have a gradient and/or different background color based on state. @kewashi what do you think?

Nick - I think we need to focus on designing around the concept of HP’s architecture. HP is designed to be a flexible framework for designers to build awesome dashboards using only CSS modifications. TileEdit is a built in capability to edit the CSS basically. With the latest edit the architecture has all the hooks needed to do icon inversion, background gradients, and now absolute positioning of any element within the tile. Also any item can have an icon with the architecture. So I think TileEdit should continue to evolve to unleash more flexibility. An important thing I need to do is to document the updated tile architecture so end installers can do their customizations without TileEdit.

The first change to TileEdit should be to have invert work with either icon or background separately or both. Next we can have TileEdit assign icons to any thing element and state. Right now only one subtype of the thing is styled with an icon by default. For example div.switchlevel.switch.on has an icon but div.switchlevel.level does not. Some tiles have no icons assigned such as div.thermostat but they could with customization.

I love what Nick did with TileEdit but it needs more work to truly unlock the flexibility of the overall HP tile styling architecture. I would like to also add a feature where the CSS styling block can be manually entered as cut/paste text within TileEdit and then saved to customtiles.css.

I had thought about having an ‘advanced’ button to edit the .css. Something like this page:

Yea this is what I had in mind too

I think I will replace farbastic with a tool that includes transparency

Or just add a transparency slider…

Does anybody of a docker image for this in DockerHub? I have an Unraid server setup with dockers and I would like to have this setup on this server. I don’t know anything about dockers so if one was already to install that would be great.

I couldn’t find any docker images when I searched yesterday. Looks like it’s use a base image and build your own web server with HP on top. I’m still reading up on docker containers myself and just installed docker engine to play with various docker images.

Ken, Nick: Looks like that CSS gradient generator has an opacity selection already, so transparency covered?

I don’t think so… but will look into it.

Pushed a bug fix today to the tileedit32 branch. This fixes width feature for different tile types. Also fixed some bugs. Should work more smoothly. Still too rough to merge into master.

I’ll be on real vacation (as opposed to a coding stay-cation) for a week so updates will be a bit slow for a while.

I’m on vacation next week too! Have a good one, you’ve earned it. :slight_smile:

I see this in the dockerhub OpenDash. Is this what is needed on the backend?

[RELEASE] HousePanel with TileEdit 3.2

Merged into master branch after several bug fixes.

1 Like

That may be for original open dash image as it’s a year old. I couldn’t find any House Panel images that were prebuilt

The images in the icons directory of the master branch were all custom-made for HousePanel

I was referring to Docker images as I believe that was what pcgirl65 asked about. Its looking like one will have to build our own Docker image based off one of the base prebuilt docker images from https://hub.docker.com/u/armhf/?page=1 or a new one off a raspbian image.

I am going to look into docker on my days off . Finally got more memory for the oc running housepanel and should be able to do this now. If I make any progress I’ll let you know

I want the docked really for this other project involving local capture of nest cam without making cams public. Having trouble on my windows machine hoping docker is the answer.

I haven’t played much with docker. It looks powerful. Will tinker with it to see how I can use it within HP

Minor update posted that incorporates the very creative iFrame tile trick that Chris @cwwilson08 implemented as shown here:

Here’s a screen shot of my implementation. HP now includes 4 “frame” tiles that can be customized however you want. The example below uses iframe tags to show a weather forecast from an online widget.

To get this to work for your location you will need to edit the forecast.html file that is now included.

1 Like

I’m having some trouble with drag/drop tiles moving around after a state update. I don’t have time to fix this before flying out on my vacation. Sorry about that folks. No easy workaround either that I know of other than running a refactor and living with the default positions. It seems to only screw up the clock, image, and frame tiles for some reason. To run a refactor do:

housepanel.php?useajax=refactor

Will fix this hopefully soon.

Iframe looks great. Dockers containers are promising based on what I’ve read so far. My initial test with basic hello world image works fine so far on my pi3.