Skip to content

Commit

Permalink
Merge pull request #12 from artem-sedykh/dev
Browse files Browse the repository at this point in the history
version 1.2.1
  • Loading branch information
artem-sedykh authored Jun 9, 2020
2 parents 4beaa4a + 2b161c7 commit 10787f5
Show file tree
Hide file tree
Showing 19 changed files with 479 additions and 103 deletions.
75 changes: 69 additions & 6 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ A minimalistic yet customizable climate card for [Home Assistant](https://github

```yaml
resources:
- url: /local/mini-climate-card-bundle.js?v=1.1.0
- url: /local/mini-climate-card-bundle.js?v=1.2.1
type: module
```
Expand All @@ -32,14 +32,14 @@ A minimalistic yet customizable climate card for [Home Assistant](https://github
2. Grab `mini-climate-card-bundle.js`

```console
$ wget https://github.com/artem-sedykh/mini-climate-card/releases/download/v1.1.0/mini-climate-card-bundle.js
$ wget https://github.com/artem-sedykh/mini-climate-card/releases/download/v1.2.1/mini-climate-card-bundle.js
```

3. Add a reference to `mini-climate-card-bundle.js` inside your `ui-lovelace.yaml`.

```yaml
resources:
- url: /local/mini-climate-card-bundle.js?v=1.1.0
- url: /local/mini-climate-card-bundle.js?v=1.2.1
type: module
```

Expand All @@ -52,7 +52,7 @@ A minimalistic yet customizable climate card for [Home Assistant](https://github

```yaml
resources:
- url: /local/mini-climate-card-bundle.js?v=1.1.0
- url: /local/mini-climate-card-bundle.js?v=1.2.1
type: module
```

Expand All @@ -75,8 +75,12 @@ A minimalistic yet customizable climate card for [Home Assistant](https://github
| toggle: `hide` | boolean | optional | v1.0.2 | Hide button, default value `False`
| toggle: `default` | boolean | optional | v1.0.2 | Default toggle button state, default value `off`.
| **secondary_info** | object | optional | v1.1.0 | secondary_info config. [secondary info examples](#secondary-info)
| secondary_info: `type` | string | optional | v1.1.0 | available types: `last-changed, fan-mode, hvac-mode`
| secondary_info: `icon` | string | optional | v1.1.0 | icon for types: `fan-mode, hvac-mode`
| secondary_info: `type` | string | optional | v1.1.0 | available types: `last-changed, fan-mode, fan-mode-dropdown, hvac-mode, hvac-action`
| secondary_info: `icon` | string | optional | v1.1.0 | icon for types: `fan-mode, fan-mode-dropdown, hvac-mode`, `hvac-action`
| secondary_info: `source` | object | optional | v1.2.1 | source available types: `hvac-action`
| secondary_info: `source:{item_name}` | object | optional | v1.2.1 | source item name
| secondary_info: `source:{item_name}:icon` | object | optional | v1.2.1 | Specify a custom icon from any of the available mdi icons.
| secondary_info: `source:{item_name}:name` | object | optional | v1.2.1 | Display name.
| **temperature** | object | optional | v1.0.1 | current temperature configuration. [temperature examples](#temperature)
| temperature: `unit` | string | optional | v1.0.1 | display unit, default `°C`
| temperature: `round` | number | optional | v1.0.1 | rounding value, default `1`
Expand Down Expand Up @@ -111,6 +115,7 @@ A minimalistic yet customizable climate card for [Home Assistant](https://github
| **fan_mode** | object | optional | v1.0.1 | fan operation for climate device. [fan_mode examples](#fan_mode)
| fan_mode: `icon` | string | optional | v1.0.1 | Specify a custom icon from any of the available mdi icons.
| fan_mode: `order` | number | optional | v1.0.1 | sort order, default value `0`
| fan_mode: `location` | string | optional | v1.0.1 | allows you to display buttons on the main panel, types `main, bottom`, default `bottom`
| fan_mode: `hide` | number | optional | v1.0.1 | hide button, default value `False`
| fan_mode: `style` | function | optional | v1.0.1 | style
| fan_mode: `disabled` | function | optional | v1.0.1 | disabled function
Expand Down Expand Up @@ -140,6 +145,7 @@ A minimalistic yet customizable climate card for [Home Assistant](https://github
| buttons: `name:icon` | string | optional | v1.0.1 | Specify a custom icon from any of the available mdi icons.
| buttons: `name:type` | string | optional | v1.0.1 | `dropdown` or `button` default `bitton`
| buttons: `name:order` | number | optional | v1.0.1 | sort order
| buttons: `name:location` | string | optional | v1.2.1 | allows you to display buttons on the main panel, types `main, bottom`, default `bottom`
| buttons: `name:state` | object | optional | v1.0.1 | config to get button state.
| buttons: `name:state:entity` | string | optional | v1.0.1 | button entity_id.
| buttons: `name:state:attribute` | string | optional | v1.0.1 | entity attribute
Expand Down Expand Up @@ -549,6 +555,63 @@ A minimalistic yet customizable climate card for [Home Assistant](https://github
secondary_info: hvac-mode
```

##### hvac-action type

By default, translations from [ha frontend](https://github.com/home-assistant/frontend/blob/master/translations/frontend/en.json#L33)
```yaml
- type: custom:mini-climate
entity: climate.dahatsu
secondary_info:
type: hvac-action
```
but you can customize your translations
```yaml
- type: custom:mini-climate
entity: climate.dahatsu
secondary_info:
type: hvac-action
source:
cooling: Охлаждение
```
You can set your own icon for each hvac-action
```yaml
- type: custom:mini-climate
entity: climate.dahatsu
secondary_info:
type: hvac-action
source:
cooling:
icon: 'mdi:snowflake'
name: Охлаждение
```
You can set your own icon for each hvac-action
```yaml
- type: custom:mini-climate
entity: climate.dahatsu
secondary_info:
type: hvac-action
source:
cooling:
icon: 'mdi:snowflake'
name: Охлаждение
```
Or you can use one permanent icon
```yaml
- type: custom:mini-climate
entity: climate.dahatsu
secondary_info:
type: hvac-action
icon: 'mdi:cached'
```

##### fan-mode-dropdown

```yaml
- type: custom:mini-climate
entity: climate.dahatsu
secondary_info: fan-mode-dropdown
```
![image](https://user-images.githubusercontent.com/861063/84180244-d80d0a80-aa8f-11ea-8275-f4e3db85fd31.png)

### Theme variables
The following variables are available and can be set in your theme to change the appearence of the card.
Expand Down
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "mini-climate-card",
"version": "v1.1.0",
"version": "v1.2.1",
"description": "a/c card for Home Assistant Lovelace UI",
"keywords": [
"home-assistant",
Expand Down
82 changes: 82 additions & 0 deletions release_notes/v1.2.1.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,82 @@
## v1.2.1
[![Downloads](https://img.shields.io/github/downloads/artem-sedykh/mini-climate-card/v1.2.1/total.svg)](https://github.com/artem-sedykh/mini-climate-card/releases/tag/v1.2.1)

### ADDED
- Add new secondary_info type: `hvac-action` #9
By default, translations from [ha frontend](https://github.com/home-assistant/frontend/blob/master/translations/frontend/en.json#L33)
```yaml
- type: custom:mini-climate
entity: climate.dahatsu
secondary_info:
type: hvac-action
```
but you can customize your translations
```yaml
- type: custom:mini-climate
entity: climate.dahatsu
secondary_info:
type: hvac-action
source:
cooling: Охлаждение
```
You can set your own icon for each hvac-action
```yaml
- type: custom:mini-climate
entity: climate.dahatsu
secondary_info:
type: hvac-action
source:
cooling:
icon: 'mdi:snowflake'
name: Охлаждение
```
You can set your own icon for each hvac-action
```yaml
- type: custom:mini-climate
entity: climate.dahatsu
secondary_info:
type: hvac-action
source:
cooling:
icon: 'mdi:snowflake'
name: Охлаждение
```
Or you can use one permanent icon
```yaml
- type: custom:mini-climate
entity: climate.dahatsu
secondary_info:
type: hvac-action
icon: 'mdi:cached'
```
- Add new secondary_info type: `fan-mode-dropdown` #10

```yaml
- type: custom:mini-climate
entity: climate.dahatsu
secondary_info: fan-mode-dropdown
```
![image](https://user-images.githubusercontent.com/861063/84180244-d80d0a80-aa8f-11ea-8275-f4e3db85fd31.png)

- Added the ability to make buttons on the main screen

```yaml
- type: custom:mini-climate
entity: climate.dahatsu
fan_mode:
location: main
```
![image](https://user-images.githubusercontent.com/861063/84198175-d5201300-aaab-11ea-94fb-bf9fde5aa2b1.png)

This rule also applies to buttons.
```yaml
- type: custom:mini-climate
entity: climate.dahatsu
buttons:
custom_button:
location: main
```
![image](https://user-images.githubusercontent.com/861063/84198845-d4d44780-aaac-11ea-8590-4eff94457593.png)

> With these settings, the data may not fit on the mobile version!
2 changes: 0 additions & 2 deletions src/components/button.js
Original file line number Diff line number Diff line change
Expand Up @@ -67,8 +67,6 @@ class ClimateButton extends LitElement {
margin: 0;
overflow: hidden;
transition: background .5s;
--paper-item-min-height: var(--mc-unit);
--mc-dropdown-unit: var(--mc-unit);
}
:host([color]) {
background: var(--mc-active-color);
Expand Down
7 changes: 6 additions & 1 deletion src/components/buttons.js
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@ class ClimateButtons extends LitElement {
const context = this;
return html`${Object.entries(this.buttons)
.map(b => b[1])
.filter(b => !b.hide)
.filter(b => b.location !== 'main' && !b.hide)
.sort((a, b) => ((a.order > b.order) ? 1 : ((b.order > a.order) ? -1 : 0)))
.map(button => context.renderInternal(button))}`;
}
Expand All @@ -58,6 +58,7 @@ class ClimateButtons extends LitElement {
transition: background .5s;
--paper-item-min-height: var(--mc-unit);
--mc-dropdown-unit: var(--mc-unit);
--mdc-icon-button-size: calc(var(--mc-unit));
}
:host([color]) {
background: var(--mc-active-color);
Expand All @@ -68,6 +69,10 @@ class ClimateButtons extends LitElement {
opacity: .25;
pointer-events: none;
}
mc-button {
width: calc(var(--mc-unit));
height: calc(var(--mc-unit));
}
`];
}
}
Expand Down
2 changes: 0 additions & 2 deletions src/components/dropdown.js
Original file line number Diff line number Diff line change
Expand Up @@ -77,8 +77,6 @@ class ClimateDropDown extends LitElement {
margin: 0;
overflow: hidden;
transition: background .5s;
--paper-item-min-height: var(--mc-unit);
--mc-dropdown-unit: var(--mc-unit);
}
:host([color]) {
background: var(--mc-active-color);
Expand Down
127 changes: 127 additions & 0 deletions src/components/fan-mode-secondary.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,127 @@
import { LitElement, html, css } from 'lit-element';
import sharedStyle from '../sharedStyle';

class FanModeSecondary extends LitElement {
constructor() {
super();
this.fanMode = {};
this.config = {};
this.timer = undefined;
this._selected = {};
this.source = {};
}

static get properties() {
return {
fanMode: { type: Object },
config: { type: Object },
};
}

get selectedIndex() {
return this.fanMode.source.map(item => item.id).indexOf(this._selected.id);
}

handleChange(e) {
const index = e.target.selected;

if (index === this.selectedIndex || !this.fanMode.source[index])
return;

clearTimeout(this.timer);

const selected = this.fanMode.source[index];
const { entity } = this.fanMode;
const oldSelected = this._selected;
this._selected = selected;

this.timer = setTimeout(async () => {
if (this.fanMode.entity === entity) {
this._selected = oldSelected;
return this.requestUpdate('_selected');
}
}, this.fanMode.actionTimeout);

this.fanMode.handleChange(selected.id);

return this.requestUpdate('_selected');
}

renderFanMode() {
const label = this._selected ? this._selected.name : this.fanMode.state;
const icon = this.config.secondary_info.icon ? this.config.secondary_info.icon
: this.fanMode.icon;

return html`
<ha-icon class='icon' .icon=${icon}></ha-icon>
<span class='name'>${label}</span>
`;
}

renderFanModeDropdown() {
return html`
<paper-menu-button
class='mc-dropdown'
noink no-animations
.horizontalAlign=${'right'}
.verticalAlign=${'top'}
.verticalOffset=${44}
?disabled=${this.fanMode.disabled}
.dynamicAlign=${true}>
<div class="wrap" slot='dropdown-trigger'>
${this.renderFanMode()}
</div>
<paper-listbox slot="dropdown-content" .selected=${this.selectedIndex} @iron-select=${this.handleChange}>
${this.fanMode.source.map(item => html`
<paper-item value=${item.id || item.name}>
<span class='mc-dropdown__item__label'>${item.name}</span>
</paper-item>`)}
</paper-listbox>
</paper-menu-button>
`;
}

render() {
const { type } = this.config.secondary_info;

if (type === 'fan-mode-dropdown') {
return this.renderFanModeDropdown();
}

return this.renderFanMode();
}

updated(changedProps) {
if (changedProps.has('fanMode')) {
clearTimeout(this.timer);
this._selected = this.fanMode.selected;
this.requestUpdate('_selected').then();
}
}

static get styles() {
return [
sharedStyle,
css`
paper-menu-button {
padding: 0;
}
.name {
font-size: calc(var(--mc-unit) * .35);
font-weight: var(--mc-info-font-weight);
line-height: calc(var(--mc-unit) * .5);
vertical-align: middle;
display: inline-block;
}
.icon {
color: var(--mc-icon-color);
height: calc(var(--mc-unit) * .475);
width: calc(var(--mc-unit) * .5);
min-width: calc(var(--mc-unit) * .5);
--mdc-icon-size: calc(var(--mc-unit) * 0.5);
}
`];
}
}

customElements.define('mc-fan-mode-secondary', FanModeSecondary);
Loading

0 comments on commit 10787f5

Please sign in to comment.