This is a simple yet highly customizable dashboard for Home Assistant. The main goal of this project was to create simple dashboard with an easy way to edit and add functionality with minimum knowledge of javascript and html. Should you have any ideas or questions please post them on home-assistant forum or create an issue on github.
https://community.home-assistant.io/t/new-dashboard-for-ha/57173
- Pull/download repository
- Change
config.js - Open index.html directly in a web browser or move all of the files into www directory in HA's config path. Please note that dashboard was designed for local installations and you should never store dashboard files in www directory of HA if you are exposing it to the outside world sicne this would releal contetnt of
config.jsalong with the password. As an alternative please consider serving files via Nginx where BasicAuth can be implemented.
config.js will initialize global CONFIG object with following fields:
var CONFIG = {
customTheme: null || 'transparent' || 'win95', // you can define it yourself
transition: 'animated' || 'animated_gpu' || 'simple', // transition between pages
tileSize: Number, // size of tile
tileMargin: Number, // margin between tiles
serverUrl: 'http://localhost:8123', // or custom
wsUrl: 'ws://localhost:8123/api/websocket',
password: null, //HA's password (if set)
debug: false, // mainly used for development, now redundant
pages: [], // list of Page objects, read about it below
events: [], // list of events, more info below
}Page object can have following fields:
{
title: 'Page title', // not used atm
bg: 'images/bg1.jpg', // link to the background image (optional)
icon: 'mdi-home-outline', // icon of page (for the side menu)
head: 'head.html', // used for importing template as a header of the page (we currently use it to show time)
tileSize: Number, // optional field to override global value of tile size for current page
groups: [] // list of tile groups
}We divide tiles (cells) into groups on every page. Group object can have following fields:
{
title: 'Group title',
width: 3, // Number of tiles (horizontally)
height: 4, // same but verticaly
items: [], // list of Tile objects
}Tile Object. Click here for some feal life examples
{
position: [1, 0], // [x, y] position inside group
type: TYPES.DEVICE_TRACKER, // type of a tile, please see the list of available types below
id: 'device_tracker.google_maps_228', // id of HA entity for the tile (e.g. switch.xyz)
// OPTIONAL
title: 'Tile title', // overrides default entity title
subtitle: 'Tile subtitle', // subtitle
width: 2, // overrides basic Tile size (1)
height: 2, //
states: {on: 'Enabled', off: 'Disabled'}, // object of states map, used for mapping of states
//state: false, // disables state in the Tile
//sub: String || Function, // custom state of Tile
icons: {on: "mdi-volume-high", off: "mdi-volume-off"}, // same as states but used for tiles with icons. You can use any of the material design icons from https://materialdesignicons.com/
bg: '@attributes.entity_picture', // link to the background image (available @/& prefixes, read about it below)
bgSuffix: '@attributes.entity_picture', // same as bg, but link appends to the serverUrl
bgOpacity: 0.5, // bg image opacity 0..1
theme: TYPES.SWITCH, // overrides tile theme
classes: ["-big-entity"], // appends class name to the tile element, useful for custom CSS styles
slides: [{}, {bg: 'images/slide.jpg'}], // slides in the background (atm up to 3 slides)
// type: SENSOR and several others
value: '&sensor.bathroom_temp.state', // overrides sensor value
unit: 'kWh', // override basic entity unit,
filter: function (value) {return value}, // function for filtering/formating entity value
//type: DEVICE_TRACKER
slidesDelay: 2, // delay before slides animation starts
map: 'google' || 'yandex', // map provider for showing position inside tile
//type: TEXT_LIST,
list: [{title: 'Kitchen temp', icon: 'mdi-home', value: '&sensor.kitchen_temp.state'}], // list of objects
//type: MEDIA_PLAYER
showSource: false || true, // show source picker (may not wont work properly atm)
// type: SLIDER
filter: function (value) {return value}, // same as filter in sensors
bottom: true, // puts slider to the bottom
slider: {} // object of slider, read about it below
// type: CAMERA or CAMERA_THUMBNAIL
bgSize: 'cover' || 'contain' || 'any css bg size',
filter: function (url) {return url}, // function for filtering camera url
fullscreen: {}, // object of type CAMERA/CAMERA_THUMBNAIL to show it in fullscreen
refresh: Number || Function, // number in milliseconds or function returns time, set interval for refreshing image
// type: LIGHT
sliders: [{}], // list of slider object (read about it below)
//type: WEATHER
fields: {}, // object of available weather fields (supported fields are below)
//classes: ['-compact'], // we also support -compact class for the WEATHER
}At the moment following entity types have been implemented:
var TYPES = {
DEVICE_TRACKER: 'device_tracker',
SCRIPT: 'script',
SENSOR: 'sensor',
SENSOR_ICON: 'sensor_icon',
SWITCH: 'switch',
GENERIC_ICON: 'generic_icon',
INPUT_BOOLEAN: 'input_boolean',
LIGHT: 'light',
TEXT_LIST: 'text_list',
INPUT_NUMBER: 'input_number',
INPUT_SELECT: 'input_select',
CAMERA: 'camera',
CAMERA_THUMBNAIL: 'camera_thumbnail',
SCENE: 'scene',
SLIDER: 'slider',
IFRAME: 'iframe',
DOOR_ENTRY: 'door_entry',
WEATHER: 'weather',
CLIMATE: 'climate',
MEDIA_PLAYER: 'media_player',
};Example of slider config used for LIGHT:
{
title: "Color temp",
field: "color_temp",
max: 588,
min: 153,
step: 15,
request: {
type: "call_service",
domain: "light",
service: "turn_on",
field: "color_temp"
}
}Supported weather fields
{
icon: '&sensor.dark_sky_icon.state',
iconMap: {'clear-day': 'clear', ...}, // statusKey: iconName (from images/weather-icons)
summary: '&sensor.dark_sky_summary.state',
apparentTemperature: '&sensor.dark_sky_apparent_temperature.state',
apparentTemperatureUnit: '&sensor.dark_sky_apparent_temperature.attributes.unit_of_measurement',
temperature: '&sensor.dark_sky_temperature.state',
temperatureUnit: '&sensor.dark_sky_temperature.attributes.unit_of_measurement',
precip: '&sensor.dark_sky_precip.state',
precipIntensity: '&sensor.dark_sky_precip_intensity.state',
precipIntensityUnit: '&sensor.dark_sky_precip_intensity.attributes.unit_of_measurement',
precipProbability: '&sensor.dark_sky_precip_probability.state',
precipProbabilityUnit: '&sensor.dark_sky_precip_probability.attributes.unit_of_measurement',
windSpeed: '&sensor.dark_sky_wind_speed.state',
windSpeedUnit: '&sensor.dark_sky_wind_speed.attributes.unit_of_measurement',
humidity: '&sensor.dark_sky_humidity.state',
humidityUnit: '&sensor.dark_sky_humidity.attributes.unit_of_measurement',
pollen: '&sensor.pollen_count.state',
pressure: '&sensor.dark_sky_pressure.state',
pressureUnit: '&sensor.dark_sky_pressure.attributes.unit_of_measurement',
}As you may notice that we use @/& prefixes to get a value inside objects (entities). @ is relative to the current entity (@attributes.friendly_name) and & is for global (&sensor.kitchen_temp.state). This may not work everywhere, but you may give it a go.
Events are fired when dashboard receives new state of the entity. Firing event will cause the same action as the clicking on tile. Useful for Door-entry systems etc.
[
{
trigger: 'script.front_gate_bell_trigger',
state: 'off',
tile: { // invisible
type: TYPES.DOOR_ENTRY,
id: 'camera.front_door',
layout: {
camera: {...}, // camera layout
page: {},
tiles: []
}
}
}
]Where do I even begin?
Please feel free to post an issue or pull request and we will sort it out
MIT License