HA Minidash 🎛️

     __    __ _________      _______________   ___________    _____________________   ___
    /  /  /  /  __    /\    /        /  /   | /  /  /  _  \  /  __    /  ______/  /  /  /\
   /  /__/  /  /__/  / /   /  /  /  /  /    |/  /  /  / \  \/  /__/  /  /_____/  /__/  / /
  /  __    /  ___   / /   /  /  /  /  /  /|    /  /  /  /  /  __    /_____   /  __    / /
 /  /  /  /  /  /  / /   /  /  /  /  /  / |   /  /  /__/  /  /  /  /_____/  /  /  /  / /
/__/  /  /__/  /__/ /   /__/__/__/__/__/ /|__/__/________/__/  /__/________/__/  /__/ /
\__\/ \__\__\/ \__\/    \__\__\__\__\__\/ \__\__\________\__\/ \__\________\__\/ \__\/

                           The simplest UI for HomeAssistant

HA Minidash is a simple mobile friendly dashboard for Home Assistant that uses your existing Home Assistant configuration.

http://github.com/richrd/ha-minidash

Features

Almost no required configuration: only the API url (and password) is necessary
The only requirement is a webserver (any http server will work)
Different entities are shown correctly depending on their type
- Switches and boolean inputs are shown with their correct icon and toggled by clicking them
- Binary sensors are shown with an icon and are colored if the sensor is on
- Sensors are shown with the value and unit and if the unit is a percentage a radial progress bar is shown
- Number inputs are shown as interactive sliders
- Text inputs are shown as an editable textarea
Tiles are automatically packed into a grid
Navigation shows all non-hidden groups with correct icon and name
Automatic connecting and reconnecting to the HomeAssistant websocket
Built with React and Redux

Configuration

The configuration is simply stored in config.js to make it easy to edit. A minimal configuration looks like this:

window.config = {
  apiUrl: 'http://hassbian:8123',  // The address and port of your HA instance.
  password: '',                    // The HA password. Leave empty if you don't use a password.
};

If you want to explicitly specify which groups to show, and in what order you can add groups configuration:

window.config = {
  apiUrl: 'http://hassbian:8123',
  password: '',
  groups: [
    'dashboard',
    'alarm',
    'presence',
    'system',
    'testing',
  ],
};

Installation

HA Minidash doesn't need to be separately installed. Just copy the contents of the dist directory to a director that is served by your HTTP server and add the config.js file to that folder.

Developing

First install the project packages:

npm install

In the public folder copy config.example.js to config.js and edit how you wish.

After this you can run the app in developement mode with live reloading:

npm run dev

To make a production build run the following command (the build will be created in the dist folder):

npm run build