custom-ui state-card upgrade example (#3698)

* custom-ui state-card upgrade example

* wording

* Add some line breaks
This commit is contained in:
c727 2017-10-21 17:35:16 +02:00 committed by Fabian Affolter
parent 869e9f1856
commit b61ba91c17

View File

@ -9,6 +9,7 @@ sharing: true
footer: true
ha_release: 0.38
---
If you would like to use your own [State card](/developers/frontend_add_card/) without merging your code into [home-assistant-polymer](https://github.com/home-assistant/home-assistant-polymer/) you can create your own implementation.
Put the element source file and its dependencies in `www/custom_ui/` directory under your Home Assistant [configuration](/docs/configuration/) directory.
@ -21,10 +22,13 @@ In `state-card-my-custom-light.html` you should use `<link rel="import">` to imp
Do not import any dependencies used by the Home Assistant UI.
Importing those will work in `development: 1` mode, but will fail in production mode.
1) In the `customize:` section of the `configuration.yaml` file put `custom_ui_state_card: state-card-my-custom-light`.
2) In the `frontend` section use `extra_html_url` to specify the URL to load.
1. In the `customize:` section of the `configuration.yaml` file put `custom_ui_state_card: state-card-my-custom-light`.
2. In the `frontend` section use `extra_html_url` to specify the URL to load.
Example:
`configuration.yaml`:
For example:
```yaml
homeassistant:
customize:
@ -36,4 +40,42 @@ frontend:
- /local/custom_ui/state-card-my-custom-light.html
```
`www\custom_ui\state-card-my-custom-light.html`:
```javascript
<dom-module id='state-card-my-custom-light'>
<template>
<style>
</style>
<textarea>[[_toStr(StateObj)]]</textarea>
</template>
</dom-module>
<script>
class StateCardMyCustomLight extends Polymer.Element {
static get is() { return 'state-card-my-custom-light'; }
static get properties() {
return {
// Home Assistant object
hass: Object,
// inDialog is true if shown as more-info-card
inDialog: {
type: Boolean,
value: false,
},
// includes state, config and more information of the entity
stateObj: Object,
};
}
_toStr(obj) {
return JSON.stringify(obj);
}
}
customElements.define(StateCardMyCustomLight.is, StateCardMyCustomLight);
</script>
```
For more possibilities, see the [Custom UI section](/cookbook/#user-interface) on our Examples page.