mirror of
https://github.com/home-assistant/home-assistant.io.git
synced 2025-07-21 16:27:19 +00:00
Minor style updates and set titles as linkable
This commit is contained in:
Fabian Affolter
parent
280cf23e69
commit
57c708713d
@ -11,9 +11,9 @@ footer: true
|
||||
|
||||
(All installations)
|
||||
|
||||
Hadashboard is a Dashing app, so make sure to read all the instructions on http://dashing.io to learn how to add widgets to your dashboard, as well as how to create new widgets.
|
||||
Hadashboard is a Dashing application, so make sure to read all the instructions on http://dashing.io to learn how to add widgets to your dashboard, as well as how to create new widgets.
|
||||
|
||||
Make a copy of dashboards/example.erb and call it 'main.erb', then edit this file to reference the items you want to display and control and to get the layout that you want. Leave the original example.erb intact and unchanged so that you don't run into problems when trying to update using the git commands mentioned later in "Updating the Dashboard".
|
||||
Make a copy of `dashboards/example.erb` and call it `main.erb`, then edit this file to reference the items you want to display and control and to get the layout that you want. Leave the original `example.erb` intact and unchanged so that you don't run into problems when trying to update using the git commands mentioned later in "Updating the Dashboard".
|
||||
|
||||
The basic anatomy of a widget is this:
|
||||
``` html
|
||||
@ -32,47 +32,39 @@ The basic anatomy of a widget is this:
|
||||
Note that although it is legal in XML terms to split the inner `<div>` like this:
|
||||
|
||||
``` html
|
||||
<li data-row="" data-col="1" data-sizex="1" data-sizey="1">
|
||||
<div data-id="office"
|
||||
data-view="Hadimmer"
|
||||
data-title="Office Lamp">
|
||||
</div>
|
||||
</li>
|
||||
<li data-row="" data-col="1" data-sizex="1" data-sizey="1">
|
||||
<div data-id="office"
|
||||
data-view="Hadimmer"
|
||||
data-title="Office Lamp">
|
||||
</div>
|
||||
</li>
|
||||
```
|
||||
|
||||
This may break `hapush`'s parsing of the file, so keep to the line format first presented.
|
||||
|
||||
Please, refer to the Dashing website for instructions on how to change the grid and tile size, as well as more general instructions about widgets, their properties, and how to create new widgets.
|
||||
|
||||
# Supported Widgets
|
||||
## {% linkable_title Supported Widgets %]
|
||||
|
||||
At this time I have provided support for the following Home Assistant entity types.
|
||||
|
||||
- switch: Widget type **Haswitch**
|
||||
- lock: Widget type **Halock**
|
||||
- devicetracker: Widget type **Hadevicetracker**
|
||||
- light: Widget type **Hadimmer**
|
||||
- cover: Widget type **Hacover**
|
||||
- input_boolean: Widget type **Hainputboolean**
|
||||
- scene: Widget type **Hascene**
|
||||
|
||||
## switch
|
||||
Widget type ***Haswitch***
|
||||
## lock
|
||||
Widget type ***Halock***
|
||||
## devicetracker
|
||||
Widget type ***Hadevicetracker***
|
||||
## light
|
||||
Widget type ***Hadimmer***
|
||||
## cover
|
||||
Widget type ***Hacover***
|
||||
## input_boolean
|
||||
Widget type ***Hainputboolean***
|
||||
## scene
|
||||
Widget type ***Hascene***
|
||||
- **data-ontime** (optional): The amount of time the scene icon lights up when pressed, in milliseconds, default 1000.
|
||||
|
||||
**data-ontime** (optional): The amount of time the scene icon lights up when pressed, in milliseconds, default 1000.
|
||||
|
||||
## script
|
||||
### {% linkable_title script %}
|
||||
|
||||
Widget type ***Hascript***
|
||||
|
||||
**data-ontime** (optional): The amount of time the scene icon lights up when pressed, in milliseconds, default 1000.
|
||||
|
||||
## mode
|
||||
### {% linkable_title mode %}
|
||||
|
||||
The `Hamode` widget alows you to run a script on activation and to link it with a specified `input_select` so the button will be highlighted for certain values of that input select. The usecase for this is that I maintain an `input_select` as a flag for the state of the house to simplify other automations. I use scripts to switch between the states, and this feature provides feedback as to the current state by lighting up the appropriate mode button.
|
||||
|
||||
@ -83,37 +75,41 @@ A `Hamode` widget using this feature will look like this:
|
||||
<div data-id="day" data-view="Hamode" data-title="Good Day" data-icon="sun-o" data-changemode="Day" data-input="house_mode"></div>
|
||||
</li>
|
||||
```
|
||||
**data-changemode**: The value of the `input_select` for which this script button will light up
|
||||
|
||||
**data-input**: The `input_select` entity to use (minus the leading entity type)
|
||||
- **data-changemode**: The value of the `input_select` for which this script button will light up
|
||||
- **data-input**: The `input_select` entity to use (minus the leading entity type)
|
||||
|
||||
## input_select (read only)
|
||||
Widget type ***Hainputselect***
|
||||
### {% linkable_title input_select (read only) %}
|
||||
Widget type **Hainputselect**
|
||||
|
||||
## sensor
|
||||
Widget type ***Hasensor***
|
||||
### {% linkable_title sensor %}
|
||||
Widget type **Hasensor**
|
||||
|
||||
Text based output of the value of a particular sensor.
|
||||
|
||||
The Hasensor widget supports an additional paramater `data-unit` - this allows you to set the unit to whatever you want - Centigrade, %, lux or whatever you need for the sensor in question. For a temperature sensor you will need to explicitly include the degree symbol like this:
|
||||
The Hasensor widget supports an additional paramater `data-unit`. This allows you to set the unit to whatever you want: Centigrade, %, lux or whatever you need for the sensor in question. For a temperature sensor you will need to explicitly include the degree symbol like this:
|
||||
|
||||
```html
|
||||
data-unit="°F"
|
||||
```
|
||||
|
||||
If omitted, no units will be shown.
|
||||
|
||||
## sensor
|
||||
Widget type ***Hameter***
|
||||
### {% linkable_title sensor %}
|
||||
Widget type **Hameter**
|
||||
|
||||
An alternative to the text based `Hasensor` that works for numeric values only.
|
||||
|
||||
The Hameter widget supports an additional paramater `data-unit` - this allows you to set the unit to whatever you want - Centigrade, %, lux or whatever you need for the sensor in question. For a temperature sensor you will need to explicitly include the degree symbol like this:
|
||||
The Hameter widget supports an additional paramater `data-unit`. This allows you to set the unit to whatever you want: Centigrade, %, lux or whatever you need for the sensor in question. For a temperature sensor you will need to explicitly include the degree symbol like this:
|
||||
|
||||
```html
|
||||
data-unit="°F"
|
||||
```
|
||||
|
||||
If omitted, no units will be shown.
|
||||
|
||||
## binary_sensor
|
||||
Widget type ***Habinary***
|
||||
### {% linkable_title binary_sensor %}
|
||||
Widget type **Habinary**
|
||||
|
||||
An icon-based option for generic binary sensors. Useful for things like door contact sensors. In addition to the standard widget parameters, Habinary supports two additional parameters:
|
||||
|
||||
@ -122,12 +118,12 @@ An icon-based option for generic binary sensors. Useful for things like door con
|
||||
|
||||
If no icons are specified, the widget defaults to a flat gray line for "off" and a green bullseye for "on".
|
||||
|
||||
## group
|
||||
Widget type ***Hagroup***
|
||||
### {% linkable_title group %}
|
||||
Widget type **Hagroup**.
|
||||
|
||||
The Hagroup widget uses the homeassistant/turn_on and homeassistant/turn_off API call, so certain functionality will be lost. For example, you will not be able to use control groups of locks or dim lights.
|
||||
|
||||
# Alarm Control Panel
|
||||
## {% linkable_title Alarm Control Panel %}
|
||||
|
||||
These widgets allow the user to create a working control panel that can be used to control the Manual Alarm Control Panel component (https://home-assistant.io/components/alarm_control_panel.manual). The example dashboard contains an arrangement similar to this:
|
||||
|
||||
@ -136,31 +132,31 @@ These widgets allow the user to create a working control panel that can be used
|
||||
The Alarm Panel
|
||||
</p>
|
||||
|
||||
Widget type ***Haalarmstatus***
|
||||
Widget type **Haalarmstatus**
|
||||
|
||||
The Haalarmstatus widget displays the current status of the alarm_control_panel entity. It will also display the code as it is being entered by the user.
|
||||
|
||||
The data-id must be the same as the alarm_control_panel entity_id in Home Assistant.
|
||||
|
||||
Widget type ***Haalarmdigit***
|
||||
Widget type **Haalarmdigit**
|
||||
|
||||
The Haalarmdigit widget is used to create the numeric keypad for entering alarm codes.
|
||||
|
||||
data-digit holds the numeric value you wish to enter. The special value of "-" creates a 'clear' button which will wipe the code and return the Haalarmstatus widget display back to the current alarm state.
|
||||
`data-digit` holds the numeric value you wish to enter. The special value of "-" creates a 'clear' button which will wipe the code and return the Haalarmstatus widget display back to the current alarm state.
|
||||
|
||||
data-alarmentity holds the data-id of the Haalarmstatus widget, so that the status widget can be correctly updated. It is mandatory for a 'clear' type digit and optional for normal numeric buttons.
|
||||
`data-alarmentity` holds the data-id of the Haalarmstatus widget, so that the status widget can be correctly updated. It is mandatory for a 'clear' type digit and optional for normal numeric buttons.
|
||||
|
||||
Widget type ***Haalarmaction***
|
||||
Widget type **Haalarmaction**
|
||||
|
||||
The Haalarmaction widget creates the arm/disarm/trigger buttons. Bear in mind that alarm triggering does not require a code, so you may not want to put this button near the other buttons in case it is pressed accidentally.
|
||||
|
||||
data-action must contain one of the following: arm_home/arm_away/trigger/disarm.
|
||||
|
||||
# weather (requires dark sky)
|
||||
### {% linkable_title weather (requires DarkSky) %}
|
||||
|
||||
Widget type ***Haweather***
|
||||
Widget type **Haweather**.
|
||||
|
||||
In order to use the weather widget you must configure the dark sky component, and ensure that you configure at least the following monitored conditions in your Home Assistant sensor config:
|
||||
In order to use the weather widget you must configure the [DarkSky component](/component/senor.darksky/), and ensure that you configure at least the following monitored conditions in your Home Assistant sensor configuration:
|
||||
|
||||
- temperature
|
||||
- humidity
|
||||
@ -174,22 +170,26 @@ In order to use the weather widget you must configure the dark sky component, an
|
||||
|
||||
The `data-id` of the Haweather widget must be set to `weather` or the widget will not work.
|
||||
|
||||
The Hatemp widget supports an additional paramater `data-unit` - this allows you to set the unit to whatever you want - Centigrade, Farenheight or even Kelvin if you prefer ;) You will need to explicitly include the degree symbol like this:
|
||||
The Hatemp widget supports an additional paramater `data-unit`. This allows you to set the unit to whatever you want: Centigrade, Fahrenheit or even Kelvin if you prefer. You will need to explicitly include the degree symbol like this:
|
||||
|
||||
```html
|
||||
data-unit="°F"
|
||||
```
|
||||
|
||||
If omitted, no units will be shown.
|
||||
|
||||
## news
|
||||
Widget type ***News*** (contributed by [KRiS](https://community.home-assistant.io/users/kris/activity))
|
||||
### {% linkable_title News
|
||||
Widget type ***News*** (contributed by [KRiS](https://community.home-assistant.io/users/kris/activity))
|
||||
|
||||
This is an RSS widget that can be used for displaying travel information, news etc. on the dashboard. The RSS feed will update every 60 minutes. To configure this, first it is necessary to add your desired feeds in `homeassistant/lib/ha_conf.rb` in the `$news_feeds` section. By default it comes with 2 sample feeds:
|
||||
|
||||
This is an RSS widget that can be used for displaying travel information, news etc. on the dashboard. The RSS feed will update every 6o minutes. To configure this, first it is necessary to add your desired feeds in `homeassistant/lib/ha_conf.rb` in the `$news_feeds` section. By default it comes with 2 sample feeds:
|
||||
```ruby
|
||||
$news_feeds = {
|
||||
"Traffic" => "http://api.sr.se/api/rss/traffic/2863",
|
||||
"News" => "http://feeds.bbci.co.uk/news/rss.xml",
|
||||
}
|
||||
```
|
||||
|
||||
You can add as many as you want. The important point is that the key value (e.g. "Traffic" or "News" in the example above is used to tie the feed to your widget in the dashboard file. Here is an example of the Traffic widget that displays the first feed in the list:
|
||||
|
||||
```html
|
||||
@ -199,33 +199,33 @@ You can add as many as you want. The important point is that the key value (e.g.
|
||||
```
|
||||
The value of thee `data-id` tag must match the key value in the `$news_feeds` configuration.
|
||||
|
||||
- ***data-interval*** (optional) - the time in seconds that each entry in the RSS feed is displayed before the next one is shown, default is 30 seconds.
|
||||
- **data-interval** (optional): The time in seconds that each entry in the RSS feed is displayed before the next one is shown, default is 30 seconds.
|
||||
|
||||
|
||||
***The follwing widget types have been deprecated in favor of the more flexible `Hasensor` and `Hameter` widgets. They will be removed in a future release.***
|
||||
**The follwing widget types have been deprecated in favor of the more flexible `Hasensor` and `Hameter` widgets. They will be removed in a future release.**
|
||||
|
||||
## sensor (humidity)
|
||||
Widget type ***Hahumidity***
|
||||
### {% linkable_title sensor (humidity) %}
|
||||
Widget type **Hahumidity**.
|
||||
|
||||
## sensor (humidity)
|
||||
Widget type ***Hahumiditymeter*** (contributed by [Shiv Chanders](https://community.home-assistant.io/users/chanders/activity))
|
||||
### {% linkable_title sensor (humidity) %}
|
||||
Widget type **Hahumiditymeter** (contributed by [Shiv Chanders](https://community.home-assistant.io/users/chanders/activity))
|
||||
|
||||
This is an alternative to the the text based humidity widget above, it display the humidity as an animated meter from 0 to 100%.
|
||||
|
||||
## sensor (luminance)
|
||||
Widget type ***Halux***
|
||||
### {% linkable_title sensor (luminance) %}
|
||||
Widget type **Halux**.
|
||||
|
||||
### {% linkable_title sensor (temperature) %}
|
||||
Widget type **Hatemp**.
|
||||
|
||||
## sensor (temperature)
|
||||
Widget type ***Hatemp***
|
||||
The Hatemp widget supports an additional paramater `data-unit`. This allows you to set the unit to whatever you want: Centigrade, Fahrenheit or even Kelvin if you prefer. You will need to explicitly include the degree symbol like this:
|
||||
|
||||
The Hatemp widget supports an additional paramater `data-unit` - this allows you to set the unit to whatever you want - Centigrade, Farenheight or even Kelvin if you prefer ;) You will need to explicitly include the degree symbol like this:
|
||||
```html
|
||||
data-unit="°F"
|
||||
```
|
||||
If omitted, no units will be shown.
|
||||
|
||||
# Customizing CSS styles
|
||||
## {% linkable_title Customizing CSS styles %}
|
||||
If you want to customize the styles of your dashboard and widgets, there are two options:
|
||||
|
||||
1. You can edit the application.scss file (and the individual widget .scss files) directly (not recommended; if you pull down updates from the master repository, your changes might conflict/be overwritten)
|
||||
@ -237,13 +237,13 @@ If you want to customize the styles of your dashboard and widgets, there are two
|
||||
|
||||
__Note: The `_variables.scss` file (and your customizations from `_variables_custom.scss`) get imported into nearly every widget's SCSS file, so it is a best practice to define varaibles for colors in `_variables.scss` or `_variables_custom.scss` and reference those variables in the widget SCSS.__
|
||||
|
||||
# Changes and Restarting
|
||||
## {% linkable_title Changes and Restarting %}
|
||||
|
||||
When you make changes to a dashboard, Dashing and `hapush` will both automatically reload and apply the changes without a need to restart.
|
||||
|
||||
Note: The first time you start Dashing, it can take up to a minute for the initial compilation of the pages to occur. You might get a timeout from your browser. If this occurs, be patient and reload. Subsequent reloads will be a lot quicker.
|
||||
|
||||
# Multiple Pages
|
||||
## {% linkable_title Multiple Pages %}
|
||||
|
||||
It is possible to have multiple pages within a dashboard. To do this, you can add an arbitary number of gridster divisions (you need at least one).
|
||||
|
||||
@ -263,9 +263,10 @@ The divisions are implicitly numbered from 1 so it is a good idea to comment the
|
||||
<div data-id="cpage1" data-view="ChangePage" data-icon="cogs" data-title="Upstairs" data-page="3" data-stagger="false" data-fasttransition="true" data-event-click="onClick"></div>
|
||||
</li>
|
||||
```
|
||||
|
||||
- ***data-page*** : The name of the page to switch to
|
||||
|
||||
# Multiple Dashboards
|
||||
## {% linkable_title Multiple Dashboards %}
|
||||
You can also have multiple dashboards, by simply adding a new .erb file to the dashboards directory and navigating to the dashboards via `http://<IP address>:3030/dashboard-file-name-without-extension`
|
||||
|
||||
For example, if you want to deploy multiple devices, you could have one dashboard per room and still only use one hadashboard app installation.
|
||||
|
||||
@ -24,18 +24,21 @@ $ sudo pip3 install configobj
|
||||
```
|
||||
|
||||
Some users are reporting errors with `InsecureRequestWarning`:
|
||||
|
||||
```
|
||||
Traceback (most recent call last):
|
||||
File "./hapush.py", line 21, in <module>
|
||||
from requests.packages.urllib3.exceptions import InsecureRequestWarning
|
||||
ImportError: cannot import name 'InsecureRequestWarning'
|
||||
```
|
||||
|
||||
This can be fixed with:
|
||||
```
|
||||
|
||||
```bash
|
||||
$ sudo pip3 install --upgrade requests
|
||||
```
|
||||
|
||||
# Configuring hapush (all installation methods)
|
||||
## {% linkable_title Configuring hapush (all installation methods) %}
|
||||
|
||||
When you have all the prereqs in place, copy the hapush.cfg.example file to hapush.cfg then edit it to reflect your environment:
|
||||
|
||||
@ -53,7 +56,7 @@ logfile = "/etc/hapush/hapush.log"
|
||||
- `dash_dir` is the path on the machine that stores your dashboards. This will be the subdirectory `dashboards` relative to the path you cloned `hadashboard` to. For Docker installs this should be set to `/app/dashboards`
|
||||
- `logfile` is the path to where you want `hapush` to keep its logs. When run from the command line this is not used - log messages come out on the terminal. When running as a daemon this is where the log information will go. In the example above I created a directory specifically for hapush to run from, although there is no reason you can't keep it in the `hapush` subdirectory of the cloned repository. For Docker installs this should be set to `/app/hapush/hapush.log`
|
||||
|
||||
# Running hapush
|
||||
## {% linkable_title Running hapush %}
|
||||
|
||||
For a manual installation you can then run hapush from the command line as follows:
|
||||
|
||||
@ -63,9 +66,9 @@ $ ./hapush.py hapush.cfg
|
||||
|
||||
For docker installs, hapush will be started automatically when you run the startup command.
|
||||
|
||||
If all is well, you should start to see `hapush` responding to events as they occur. For a docker install you should see these messages in hapush/hapush.log
|
||||
If all is well, you should start to see `hapush` responding to events as they occur. For a docker installation you should see these messages in `hapush/hapush.log`.
|
||||
|
||||
```
|
||||
```bash
|
||||
2016-06-19 10:05:59,693 INFO Reading dashboard: /srv/hass/src/hadashboard/dashboards/main.erb
|
||||
2016-06-19 10:06:12,362 INFO switch.wendy_bedside -> state = on, brightness = 50
|
||||
2016-06-19 10:06:13,334 INFO switch.andrew_bedside -> state = on, brightness = 50
|
||||
@ -86,4 +89,4 @@ If all is well, you should start to see `hapush` responding to events as they oc
|
||||
2016-06-19 10:06:52,280 INFO sensor.side_multisensor_luminance_25 -> 871.0
|
||||
2016-06-19 10:07:50,574 INFO sensor.side_temp_corrected -> 70.7
|
||||
2016-06-19 10:07:51,478 INFO sensor.side_multisensor_relative_humidity_25 -> 52.0
|
||||
```
|
||||
```
|
||||
|
||||
@ -11,11 +11,11 @@ footer: true
|
||||
|
||||
Installation can be performed using Docker (Contributed by [marijngiesen](https://github.com/marijngiesen)) or manually if Docker doesn't work for you. We also have a Raspberry PI version of Docker contributed by [snizzleorg](https://community.home-assistant.io/users/snizzleorg/activity)
|
||||
|
||||
## Using Docker (Non Raspian)
|
||||
## {% linkable_title Using Docker (Non Raspian) %}
|
||||
|
||||
Assuming you already have Docker installed, installation is fairly easy.
|
||||
|
||||
### Clone the Repository
|
||||
### {% linkable_title Clone the Repository %}
|
||||
Clone the **hadashboard** repository to the current local directory on your machine.
|
||||
|
||||
``` bash
|
||||
@ -28,7 +28,7 @@ Change your working directory to the repository root. Moving forward, we will be
|
||||
$ cd hadashboard
|
||||
```
|
||||
|
||||
### Build the docker image
|
||||
### {% linkable_title Build the docker image %}
|
||||
|
||||
```bash
|
||||
$ docker build -t hadashboard .
|
||||
@ -48,7 +48,7 @@ By default, the docker instance should pick up your timezone but if you want to
|
||||
-e "TZ=Europe/Amsterdam"
|
||||
```
|
||||
|
||||
### Docker on Raspberry Pi
|
||||
### {% linkable_title Docker on Raspberry Pi %}
|
||||
|
||||
Raspberry pi needs to use a different docker build file so the build command is slightly different:
|
||||
|
||||
@ -60,9 +60,9 @@ Apart from that the other steps are identical.
|
||||
|
||||
*Note - this is pretty slow even on a PI3, be prepared for it to take an hour or two to build all of the extensions and install everything*
|
||||
|
||||
## Manual Installation
|
||||
## {% linkable_title Manual Installation %}
|
||||
|
||||
### Clone the Repository
|
||||
### {% linkable_title Clone the Repository %}
|
||||
Clone the **hadashboard** repository to the current local directory on your machine.
|
||||
|
||||
``` bash
|
||||
@ -75,7 +75,7 @@ Change your working directory to the repository root. Moving forward, we will be
|
||||
$ cd hadashboard
|
||||
```
|
||||
|
||||
### 2. Install Dashing and prereqs
|
||||
### {% linkable_title 2. Install Dashing and prereqs %}
|
||||
|
||||
Essentially, you want to make sure that you have Ruby installed on your local machine. Then, install the Dashing gem:
|
||||
|
||||
@ -136,4 +136,4 @@ When you are done, you can start a local webserver like this:
|
||||
$ dashing start
|
||||
```
|
||||
|
||||
Point your browser to **http://localhost:3030** to access the hadashboard on your local machine.and you should see the supplied default dashboard.
|
||||
Point your browser to **http://localhost:3030** to access the hadashboard on your local machine.and you should see the supplied default dashboard.
|
||||
|
||||
@ -16,6 +16,7 @@ $ git pull origin
|
||||
```
|
||||
|
||||
For some releases you may also need to rerun the bundle command:
|
||||
|
||||
``` bash
|
||||
$ bundle
|
||||
```
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user