Control Panel Icon

Home Assistant Control Panel

Simple to use control panel for the ultimate Home Automation setup

Control Panel Tablet PicControl Panel HAControl Panel MobileMain UIControl Panel SettingsControl Panel Settings

Using a phone or tablet device you can hook into your Home Assistant server and get access to a simple to use Control Panel. Mount the device on your wall to create the ultimate home automation accessory and unlock the true potential of your Smart devices.

The control panel can be run directly from this server - just follow the API access instructions below and add your Home Assistant server address to connect. It's as simple as that.

You can also download the Control Panel and serve it directly from your Home Automation server. This way you keep everything within your own network and full instructions are included below.

How does it all work?

The Control Panel has been written using AngularJS, which is a funky JavaScript framework for building apps. The app runs in a web browser, directly on your PC/Mac or even a tablet. Nothing is processed server-side, so you can host the file anywhere and use it on a wide range of devices. It doesn't need to be installed, and apart from setting up API access, there's no dependances or addons needed for your Home Assistant server.

Once you have the Control Panel open on your device, it will talk directly to your Home Assistant server. It's a two way communication too, so if you turn on a light elsewhere, the Control Panel will know about it. This means that all your switches and sensors are updated in real time.

It even uses the views and groups that you've already setup in HA, so the layout is familar and exactly how you want it. No need for a lengthy setup process - just put in your server address, and away you go.

What does it do and future plans

The current version of this software is very early in development, there's a long way to go, but basic functionality is there. Here's a brief list of the things it can do:

  • Downloads your groups and views to arrange the Control Panel entities
  • Light switch functionality - including a brightness slider if you long press on a switch
  • Long press the Settings icon to enable 'Edit Mode'. You can add entities to existing groups, delete groups or add new ones
  • Simple automation controls, such as light timers and motion automation
  • Custom Scene creation
  • Partial Camera Support
  • Initial setup wizard to assist with setup
  • Sensor display
  • Prescence detection integration
  • Weather readout
  • Persistent notifications, with an option to auto dismiss
  • Play/pause on media players, with a picture background

However, there's no project without a plan, so here are a few things I'd like to do in the near future:

  • Support for more, if not all entity types
  • More informative notification system, maybe even custom notifications - 'Door open','The Wife's home' etc
  • Automation notifications - 'Living Room lights Turned on'
  • More customisation options, maybe even skins

The following are things that are known to be broken:

  • Some entities don't work as expected

Who is this aimed at?

I'm specifically aiming this software at people who want to move on from retail products like Hue and SmartThings, but are daunted by the thought of home automation servers. Home Assistant nearly provides that experience, but it still requires some file editing to get it all going - more visual configuration will widen it's appeal. It's also aimed at people who don't want to spend time configuring dashboards, setting up panels and installing addons, but want something to seemlessly integrate with their existing setup. Hadashboard and Node-Red are fantastic tools - but not everybody needs or wants that level of granular control.

Lastly, it's core purpose is to provide an experience that the whole family can use. Apps and personal voice assistants are great, but I think people still need something more tactile to turn on their lights when they get home. A wall panel provides this experience, and integrates smart devices into the home in a way that seems more natural and useable.

With all that in mind, it must be simple, seemless and stable. If that sounds good to you - give it a go.




Home Assistant API Setup

To get started, you may need to make a few quick changes to your Home Assistant server. You've more than likely edited the configuration files already, so this should be a breeze. If you have already setup an API password, you can skip over this part.

  • Set an API password in your configuration.yaml file, in the http section
  • Optionally, you can allow CORS access to use the hosted version of the control panel from this server
https:   api_password: Set a password here   # CORS access is optional   cors_allowed_origins:     - https://reformedreality.com     - http://reformedreality.com
  • Save the file and reload/restart your Home Assistant server

Running Control Panel

There are currently two methods of using the control panel.


Additionally, for iPhone and iPad users, you can use the 'Add to home screen' function of Safari, to add the Contol Panel as an app. This allows for a full screen experience, which is somewhat improved over Safari.

  1. Open the Control Panel on your iPhone or iPad, using Safari
  2. Tap the sharing button Add to Home Screen icon in the bottom bar
  3. Tap the 'Add to home screen' option from the list to add it as an app

Control Panel Setup

The first thing you'll see is the Control Panel setup wizard. Follow the instructions on screen to get connected. However, if you're having trouble, or would like to set it up manually, here is a quick tour of the settings page.

Settings Page

Set the following options to connect to your Home Assistant server

  • Server URL - use the address you normally use to access the Home Assistant interface, eg, http://hassio.local:8123
  • API Password - add in the password you set in the configuration.yaml file
  • Click Save and reload the page to connect
Settings Page

Available Settings

  • Settings - Various options to set Edit Mode, Debug Mode, button sizes and notifications
  • Background - Choose the look and feel of your Control Panel, using one of the inbuilt background colors, background images - or add your own using the URL field.
  • Weather - add in any weather components to show the weather. The Met Office component has been used in the example picture
  • Export - Export and import your HACP config file. Copy the config data from the 'Export' field to save your config, or paste in a config using the 'Import' field
  • Reset - if something goes wrong, you can reset individual parts of HACP, or choose 'Reset All' to perform a hard reset and setup your Control Panel from scratch

Adding Groups and Entities

Control Panel edit mode

If you recently got Home Assistant up and running, there's a chance you won't have setup any groups. If this is the case, you might need to add some to get get everything going. To this, you need to go into Edit Mode:

  1. To enter Edit Mode, long press on the Settings icon (bottom right)
  2. To add a new entity to an existing group, press the + button in the group which will open the Entity selection page. Click on an entity to add it to the group
  3. To add a new group, you should have a + button by the settings icon. Press this to add a new group.
  4. To delete a group, press 'Delete' under the group heading
  5. Long press the Settings icon once more to exit Edit Mode
  6. To reset your custom groups, go into Settings, and press the 'Reset Groups' button from the reset menu

Long Press for Light Switch Controls

Any light or light group buttons on the Control Panel have a dual function. Long press any switch to show brightness, color and automation controls.

Light entity page

Simple timers and Automations

The automation system has been designed to use the pushed events coming from your Home Assistant API, along with the time of day (daytime, sunset etc) and the clock. Automations can be set on groups or entities, however it's currently limited to lights for the moment.

Please be aware that the Control Panel must be powered on all the time for these automations to run, and it must be able to receive pushed events from your Home Assistant's API whilst the screen is off, or if the device is in standby. Most Android tablets do this, however iOS will stop Control Panel from running in the background whilst the screen is off. To help test this you can enable debug mode, please see the troubleshooting section below for more details.

To create an automation:

  1. Long press on a light, or light group to open the entity controls
  2. Set the light brightness and color that you want to use for the automation, using the sliders on the settings page
  3. Select the Automation page to turn on your device at a certain time, time of day or with another entity - and click 'Add' to add the automation to the list
  4. You may also want to add an automation to turn off the light, either at a set time, time of day or after a period of time (minutes). Again, click 'Add' to add in your automation

Some example automations could be:

  • Simple Timer - have an entity or light group come on and go off at set time each day
  • Dynamic Timer - have an entity or light group come on at sunset, or go off at sunrise
  • Auto Turn Off - if an entity turns on, turn it off after a set time
  • Turn on with entity - this allows you to link a light or light group with another entity. This could be a motion detector for eg, to turn a security light on and then go off after a certain time.
    • To turn on 1 light with another, link a light with another light. This can be useful for creating dynamic groups of lights, separate to Home Assistant
    • You can also link a light to a person's device, which will turn on the light when they come home
    • Additionally, you can link lights to a media player hooked up to your TV or projector, which will dim the lights when media is playing
    • These type of automations don't currently run during the day. The automations will only trigger at sunset, nighttime and sunrise, to make sure your security lights aren't coming on needlessly. However you can test them during the day by enabling debug mode (see the troubleshooting section below)

Adding a Custom Scene

Control Panel edit mode

Once you have your groups setup, you can add custom scenes. Scenes are multifunctional buttons, turning lights and devices on or off, and even setting brightness and color. Very useful for changing multiple entities with 1 button.

  1. To enter Edit Mode, long press on the Settings icon (bottom right)
  2. To add a custom scene to an existing group, press the + button in the group which will open the Entity edit page.
  3. Click on 'Create Scene' from the options on the left.
  4. Enter a name for the scene.
  5. Click on 'Create Scene'.

Edit a Custom Scene

Control Panel edit mode

The 'Create Scene' function uses the current state of your group, however you may want to edit the scene once you've created it

  1. Long press on the scene button you want to edit.
  2. Select 'Edit Scene' from the menu on the left.
  3. Set the state, brightness and color temperature of the devices in your group.
  4. All settings are saved once you change them - just click 'Close' to exit back to the Control Panel.

Setting up Dark Sky or other Weather Sensors

Control Panel edit mode

The Dark Sky Sensor component provides data which HACP can use to display weather information. To setup HACP with Dark Sky, I recommend including the following monitored conditions in your configuration.yaml:

  • temperature
  • apparent_temperature
  • summary
  • precip_probability

Once you have these configured in HA, you can set them in the weather settings on HACP:

  • Refresh HACP by hitting reload in the browser
  • Touch the settings icon to enter settings
  • Select 'Weather' from the menu on the left
  • Tap on each weather setting to select from a list of senors
    • Set Temperature entity to sensor.dark_sky_temperature, or sensor.dark_sky_apparent_temperature
    • Set Condition entity to sensor.dark_sky_summary
    • Set Precipitation entity to sensor.dark_sky_precip_probability
  • Tap 'Save' on the left once you're done
  • Refresh HACP again by hitting reload in the browser

Troubleshooting

If you can't connect to your Home Assistant server, or the control panel is a mess of buttons and things that don't make sense, follow the steps below

Connection problems

  1. Ensure your device can access the normal Home Assistant interface. Open the browser on your device and enter your Home Assistant URL, eg, http://hassio.local:8123. If it opens ok, move to step 3
  2. Some Android devices may have issues with local hostnames. Try using the LAN IP address of your server. You can normally get this information from your router
  3. Double check your API password in your configuration.yaml file, and in the control panel. To test it, you can connect to the API via a web browser. For eg, enter http://hassio.local:8123/api/states?api_password=YOUR_PASSWORD_HERE. If you get an error message, recheck your password. If you get a wall of text, move onto the next step
  4. Enable CORS access - if you are using the hosted version of this control panel, or hosting it locally on another device, you may need to enable CORS access. You can check this by opening the browser error console and looking for errors related to 'No Access-Control-Allow-Origin header is present' or 'Preflight check failed'. If you are seeing these errors you need to edit your configuration.yaml file, and add the following to the http section. Otherwise skip to step 5.
https:   api_password: xxxx   cors_allowed_origins:   # add in the domain name or IP mentioned in the CORS error     - https://reformedreality.com     - http://reformedreality.com
  1. Restart your Home Assistant server
  2. Reset the Control Panel using the RESET button in Settings
  3. Test the control panel in another web browser, or possibly on another device if you have one available

Display problems

  • The control panel uses your premade Home Assistant groups and entities. If you have too many entities showing, you may need to setup a few groups and views on your Home Assistant server. To find out more, click here
  • The device names are being truncated and you can't see what they are. You may need to customise your entities and give them friendly names. Click here for more info
  • If no entities are showing, check your API directly, to make sure it's outputting the right data. For eg, open your web browser and visit http://hassio.local:8123/api/states?api_password=YOUR_PASSWORD_HERE, and check there are entites listed. To help view this data, you might want to install a JSON view browser extension. If you're not getting the right data coming back, check your API password and CORS settings in configuration.yaml
  • Lastly, if you can open the browser error console and see any errors - I'd love to hear about them. I can be contacted via reddit: u/L33-the-3rd

Enable Debug Mode

The debug tool can be handy to help diagnose certain problems once you're connected to your Home Assistant server. On the settings page, enabling debug mode will do the following:

  • Show API requests made by the control. So when you press a button, you'll see the request being submitted. If there's a reply back, the request will be marked as completed
  • Pushed events coming from the Home Assistant API. Everytime an entity changes on your network, you should get a notification about it displayed in the top right
  • To help with pushed event spam, you can ignore sun events
  • Automations triggered by other entities will work during the day, so you can test them
  • A notification sound is played when a pushed event is received (you'll need to download the additional .mp3 audio files if you are running it locally). You can use this feature to check if your control panel is updating when the screen is turned off, of if your device goes into standby