HousePanel (HP) is a user-hosted (typically local) highly customizable open source web application dashboard for accessing and controlling a SmartThings or Hubitat equipped smart home from a Tablet, Computer, or even Smart Phone.

Download a copy of
HousePanel from the HousePanel GitHub repository here.

HP is designed to give the user full control over the look and feel of their panel controller. It does require some effort to install and configure, but once set up, making fine tunings and adjustments are relatively simple. Most customizations can be done from within the built-in web-based user interface, which includes a full featured tile editor and a tile customizer for modifying content shown on any tile. Power users can also make major modifications by editing a CSS file using industry standard protocols.

HousePanel now supports multiple user configurations. Any number of users can be defined with their own password. Each user’s setup can be customized individually to meet their needs. When a user logs in, only their configuration will be shown on the tablet.

HP runs on a customer-provided web server and does not expose your personal data nor any details about your environment to the developer or any other party. You are in total control. The default settings were designed by a professional web designer to create a highly acceptable user interface for non-technical people. It is designed to not look and feel “geeky”. By default the tiles are large and colorful, placed on beautiful full color backgrounds. There is also a modern skin that makes HousePanel look very similar to other popular dashboards. Finally, the user can create any number of custom skins to make HousePanel look however they desire.

As of version 1.990, HousePanel also includes a helper Node.js application that pushes the status of things to your dashboard in real time as they change due to user control outside of the panel. This feature requires installation of HousePanel on server located on the same network as your hub. Typically this will be a Raspberry PI but it can be any server that supports Node.js and that can be accessed locally by the smart hub. If activated this feature will provide immediate updates to your dashboard as opposed to waiting for the once-a-minute poll to update it.

An advanced feature of HP is that it can be used as a text-based web service to return json strings of status about your home to any other web application. This advanced feature is mostly for developers and can be safely ignored, but if you are a developer then you should read the final section of this Wiki on Advanced Applications of HP.

Features

HousePanel can display and/or control most types of things in a smart home
ecosystem, including:

  • switches
  • dimmers
  • bulbs
  • lights (deprecated)
  • momentary buttons
  • contact
  • doors
  • locks
  • presence
  • thermostats
  • temperature sensors
  • illuminance sensors
  • motion sensors
  • water sensors
  • valves (sprinklers)
  • smoke
  • power

A number of special tiles are also supported, including:

  • Smart Home Monitor (SmartThings only)
  • Hubitat Safety Monitor (Hubitat only)
  • blanks
  • clock
  • images
  • mode
  • routines
  • weather
  • frame (great for weather forecasts)
  • WebCoRE pistons (SmartThings only)
  • video
  • custom

Images can be any still or dynamically updated graphic that can be referenced
via the Internet in the CSS file. Blanks are spacers and can take any form or size, giving the user
maximum flexibility in the layout of the pages. A relatively new capability
of HP is the ability to include user-defined iFrame tiles. These are tiles
that can contain any content from anywhere on the web using iFrame browser capabilities.
To use this feature you will need to create a local “html” file with your
desired iFrame content. By default HP comes with two html frames that shows
a weather forecast in two different formats.


Most tiles now also contain 4 fields hidden by default that display the last four
events that occurred and their date in the UTC time zone. One or up to all four
of these fields can be revealed using the tile editor or by adding the following
to your skin (more on skins later).


div.event_1 {
    display: block;
    font-size: 9pt;
    width: 100%;
    background-color: rgba(90,90,90,1);
    font-style: italic;
}

A very important feature of HousePanel is the Tab layout. All controllable things are presented on one
of several Tabs that can be quickly swapped in and out of view. This uses the tabbed display capability
of modern web browsers. Under the hood HP uses jQuery to make this efficient. This means that any
number of pages can be displayed, and on each page, any number of “things” can be shown
and controlled. Later in this document we will explain how to customize the names of pages and
the number of pages used. A default page configuration is provided but pages can be
easily renamed, deleted, or added when in Edit mode.


For advanced users HousePanel is a highly flexible API that can
serve as a web service to access your smart home devices from another web application.
This works for SmartThings and Hubitat connected devices.
This feature requires that users first authenticate their hubs using the GUI.
API calls are possible without using prior GUI authentication if the user knows and
provides the fairly complex URL-encoded security codes on the API command line.
Instructions for using the API are in the advanced section of this document.


The main page of HousePanel once installed and configured will look something like this:

Requirements – What You Need to Use HousePanel

HousePanel is a web application written in PHP and Javascript that is
paired with a SmartThings and/or Hubitat SmartApp written in the Groovy language.
There is also an optional small Node.js module used to push status info
to the dashboard in real time. If this module is installed, your panel will stay
in sync with the status of things in your home in near real time. Otherwise
HousePanel uses polling to keep things in sync, so there can be up to a one
minute delay before your dashboard is updated to match external changes. Any state
change made on the dashboard itself will always be immediately shown correctly.


To use Housepanel you will need a modern browser that supports HTML5 and Javascript.
Obviously you will also need a SmartThings and/or Hubitat
account with owner access. You will also need to have owner access to a web
server of some type capable of hosting PHP applications. Access to a good CSS
editor will also be useful but is no longer essential given the robustness of
the integrated tile editor. If you do plan on editing CSS directly to make custom changes to your
HousePanel configuration, you can do this with any text editor, but you will
be much happier if you are using a coding editor that assists you with the crazy syntax
of CSS and graphical aids for color selections. I personally use NetBeans which is
my favorite coding editor. You can get a copy from the Oracle website
at www.netbeans.org. If you do use
NetBeans be sure to install the plugin for PHP editing.
I also find the color code preview plugin to be useful for picking colors easily.
Again, most users won’t need to worry about this because the look and feel of
HousePanel can be controlled using a proviided in-app tile editor (more on that later).