diff --git a/README.md b/README.md index e2683c2c..b32123db 100644 --- a/README.md +++ b/README.md @@ -89,6 +89,12 @@ Along with a many other changes and improvements: - Works well if you are experiencing [this issue](https://github.com/home-assistant/core/issues/94063). - Can also be used for Kodi (see below) +**Template support** + +- Supports Home Assistant jinja2 style templating using nunjucks. +- Uses the same syntax as normal Home Assistant templating with a subset of functions. + - If there are additional functions you want implemented, please make a feature request. + Many thanks to the original authors. Getting this to work with Android TV was straightforward and all of the frontend heavy lifting they did has provided an excellent base on which to build my personal ultimate Android TV remote. # Demo @@ -560,6 +566,27 @@ You can also use the keyboard to send text on the following alternate platforms More may be added as requested if there is a way to do so through their Home Assistant (or possibly community made) integrations. +## Templating + +All fields support nunjucks templating. Nunjucks is a templating engine for JavaScript, which is heavily based on the jinja2 templating engine which Home Assistant uses. While the syntax of nunjucks and jinja2 is almost identical, you may find the [nunjucks documentation](https://mozilla.github.io/nunjucks/templating.html) useful. + +### Functions + +I've recreated a subset of the Home Assistant template functions for you to use as defined by the [Home Assistant templating documentation](https://www.home-assistant.io/docs/configuration/templating/), along with some other useful variables. If there are additional functions that you want implemented, please make a feature request. + +| Name | Arguments | Description | +| ------------- | ------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| True | | Python `True` equivalent to JavaScript `true`. | +| False | | Python `False` equivalent to JavaScript `false`. | +| None | | Python `None` equivalent to JavaScript `null`. | +| states | entity_id | Returns the state string of the given entity. | +| is_state | entity_id, value | Compares an entity's state with a specified state or list of states and returns `true` or `false`. | +| state_attr | entity_id, attribute | Returns the value of the attribute or `undefined` if it doesn't exist. | +| is_state_attr | entity_id, attribute, value | Tests if the given entity attribute is the specified value. | +| has_value | entity_id | Tests if the given entity is not unknown or unavailable. | +| iif | condition, if_true, if_false, if_none | Immediate if. Returns the value of `if_true` if the condition is true, the value of `if_false` if it's false, and the value of `if_none` if it's `undefined`, `null`, or an empty string. All arguments except `condition` are optional. Cannot be used as a filter. | +| match_media | mediaquery | Returns the boolean result of the provided [CSS media query](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries). | + ## Examples and Alternate Media Platforms ### Example 1 diff --git a/dist/android-tv-card.js b/dist/android-tv-card.js index 005488c5..c1e5ff74 100644 --- a/dist/android-tv-card.js +++ b/dist/android-tv-card.js @@ -55,7 +55,8 @@ .keyboardId=${this.config.keyboard_id} .keyboardMode=${this.config.keyboard_mode} ._style=${i} - />`}buildElements(e,t=!1){"string"==typeof e&&(e=[e]);const n=[];for(let i of e)if(i=(0,h.renderTemplate)(this.hass,i),"object"==typeof i&&null!=i)n.push(this.buildElements(i,!t));else switch(i){case"vol_buttons":case"volume_buttons":{const e=this.buildVolumeButtons();t&&e.reverse(),n.push(...e);break}case"slider":case"volume_slider":n.push(this.buildSlider());break;case"dpad":case"d_pad":case"direction_pad":case"nav_buttons":case"navigation_buttons":n.push(this.buildColumn(this.buildDPad()));break;case"touchpad":case"nav_touchpad":case"navigation_touchpad":n.push(this.buildTouchpad());break;case"keyboard":n.push(this.buildKeyboard());break;case"textbox":n.push(this.buildTextbox());break;case"search":n.push(this.buildSearch());break;default:n.push(this.buildButton(i))}return t?this.buildColumn(n):this.buildRow(n)}render(){if(!this.config||!this.hass)return s.html``;const e=[];for(const t of this.config.rows){const n=this.buildElements(t);e.push(n)}return s.html``}buildElements(e,t=!1){"string"==typeof e&&(e=[e]);const n=[];for(let i of e)if(i=(0,h.renderTemplate)(this.hass,i),"object"==typeof i&&null!=i)n.push(this.buildElements(i,!t));else switch(i){case"vol_buttons":case"volume_buttons":{const e=this.buildVolumeButtons();t&&e.reverse(),n.push(...e);break}case"slider":case"volume_slider":n.push(this.buildSlider());break;case"dpad":case"d_pad":case"direction_pad":case"nav_buttons":case"navigation_buttons":n.push(this.buildColumn(this.buildDPad()));break;case"touchpad":case"nav_touchpad":case"navigation_touchpad":n.push(this.buildTouchpad());break;case"keyboard":n.push(this.buildKeyboard());break;case"textbox":n.push(this.buildTextbox());break;case"search":n.push(this.buildSearch());break;default:n.push(this.buildButton(i))}return t?this.buildColumn(n):this.buildRow(n)}render(){if(!this.config||!this.hass)return s.html``;const e=[];for(const t of this.config.rows){const n=this.buildElements(t);e.push(n)}return s.html`${e}`}static get styles(){return s.css` ha-card { diff --git a/info.md b/info.md index f7698f32..a1576ad0 100644 --- a/info.md +++ b/info.md @@ -14,6 +14,7 @@ A remote card for Home Assistant that also allows for a greater level of customi - `search`: Google Assistant search. - Also supports Kodi - Example alternate media platform remote configs for Kodi, Apple TV, Sony Bravia TV, and Denon/Marantz in the README examples. +- Template support screenshot diff --git a/src/android-tv-card.ts b/src/android-tv-card.ts index cbf2c7ec..8107c536 100644 --- a/src/android-tv-card.ts +++ b/src/android-tv-card.ts @@ -432,7 +432,8 @@ class AndroidTVCard extends LitElement { content.push(rowContent); } - return html`${content}`; }