Skip to content

Commit

Permalink
fix(humidifier): some fixes (#451)
Browse files Browse the repository at this point in the history
  • Loading branch information
@piitaya
piitaya authored May 8, 2022
1 parent 7f096bf commit 846a4c6
Show file tree
Hide file tree
Showing 10 changed files with 36 additions and 64 deletions.
4 changes: 0 additions & 4 deletions .hass_dev/views/humidifier-view.yaml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,10 +26,6 @@ cards:
show_target_humidity_control: true
columns: 2
square: false
- type: custom:mushroom-humidifier-card
entity: humidifier.humidifier
name: Multiple controls
show_target_humidity_control: true
- type: vertical-stack
title: Layout
cards:
Expand Down
4 changes: 2 additions & 2 deletions docs/cards/humidifier.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,11 +16,11 @@ All the options are available in the lovelace editor but you can use `yaml` if y
| `entity` | string | Required | Humidifier entity |
| `icon` | string | Optional | Custom icon |
| `name` | string | Optional | Custom name |
| `icon_color` | string | Optional | Custom icon color |
| `fill_container` | boolean | `false` | Fill container or not. Useful when card is in a grid, vertical or horizontal layout |
| `show_target_humidity_control` | boolean | Optional | Show target humidity control |
| `layout` | string | Optional | Layout of the card. Vertical, horizontal and default layout are supported |
| `hide_state` | boolean | `false` | Hide the entity state |
| `show_target_humidity_control` | boolean | Optional | Show target humidity control |
| `collapsible_controls` | boolean | `false` | Collapse controls when off |
| `tap_action` | action | `more-info` | Home assistant action to perform on tap |
| `hold_action` | action | `more-info` | Home assistant action to perform on hold |
| `double_tap_action` | action | `more-info` | Home assistant action to perform on double_tap |
Binary file modified docs/images/humidifier-dark.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified docs/images/humidifier-light.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
25 changes: 10 additions & 15 deletions src/cards/humidifier-card/controls/humidifier-humidity-control.ts
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,9 @@
import { HomeAssistant } from "custom-card-helpers";
import { html, LitElement, TemplateResult } from "lit";
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
import { customElement, property } from "lit/decorators.js";
import { styleMap } from "lit/directives/style-map.js";
import { isActive, isAvailable } from "../../../ha/data/entity";
import { HumidifierEntity } from "../../../ha/data/humidifier";
import "../../../shared/slider";
import { computeRgbColor } from "../../../utils/colors";

@customElement("mushroom-humidifier-humidity-control")
export class HumidifierHumidityControl extends LitElement {
Expand Down Expand Up @@ -38,17 +36,6 @@ export class HumidifierHumidityControl extends LitElement {
const max = this.entity.attributes.max_humidity || 100;
const min = this.entity.attributes.min_humidity || 0;

let sliderStyle = {
"--main-color": "rgb(var(--rgb-state-humidifier));",
"--bg-color": "rgba(var(--rgb-state-humidifier), 0.2);",
};

if (this.color) {
const rgbColor = computeRgbColor(this.color);
sliderStyle["--main-color"] = `rgb(${rgbColor})`;
sliderStyle["--bg-color"] = `rgba(${rgbColor}, 0.2)`;
}

return html`<mushroom-slider
.value=${this.entity.attributes.humidity}
.disabled=${!isAvailable(this.entity)}
Expand All @@ -57,8 +44,16 @@ export class HumidifierHumidityControl extends LitElement {
.min=${min}
.max=${max}
@change=${this.onChange}
style=${styleMap(sliderStyle)}
@current-change=${this.onCurrentChange}
/>`;
}

static get styles(): CSSResultGroup {
return css`
mushroom-slider {
--main-color: rgb(var(--rgb-state-humidifier));
--bg-color: rgba(var(--rgb-state-humidifier), 0.2);
}
`;
}
}
4 changes: 2 additions & 2 deletions src/cards/humidifier-card/humidifier-card-config.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,12 +7,12 @@ import { Layout, layoutStruct } from "../../utils/layout";
export interface HumidifierCardConfig extends LovelaceCardConfig {
entity?: string;
icon?: string;
icon_color?: string;
name?: string;
layout?: Layout;
fill_container?: boolean;
hide_state?: boolean;
show_target_humidity_control?: boolean;
collapsible_controls?: boolean;
tap_action?: ActionConfig;
hold_action?: ActionConfig;
double_tap_action?: ActionConfig;
Expand All @@ -23,12 +23,12 @@ export const humidifierCardConfigStruct = assign(
object({
entity: optional(string()),
icon: optional(string()),
icon_color: optional(string()),
name: optional(string()),
layout: optional(layoutStruct),
fill_container: optional(boolean()),
hide_state: optional(boolean()),
show_target_humidity_control: optional(boolean()),
collapsible_controls: optional(boolean()),
tap_action: optional(actionConfigStruct),
hold_action: optional(actionConfigStruct),
double_tap_action: optional(actionConfigStruct),
Expand Down
8 changes: 3 additions & 5 deletions src/cards/humidifier-card/humidifier-card-editor.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,18 +12,15 @@ import { loadHaComponents } from "../../utils/loader";
import { HUMIDIFIER_CARD_EDITOR_NAME, HUMIDIFIER_ENTITY_DOMAINS } from "./const";
import { HumidifierCardConfig, humidifierCardConfigStruct } from "./humidifier-card-config";

const HUMIDIFIER_FIELDS = ["show_target_humidity_control", "show_buttons_control"];
const HUMIDIFIER_FIELDS = ["show_target_humidity_control"];

const computeSchema = memoizeOne((icon?: string): HaFormSchema[] => [
{ name: "entity", selector: { entity: { domain: HUMIDIFIER_ENTITY_DOMAINS } } },
{ name: "name", selector: { text: {} } },
{
type: "grid",
name: "",
schema: [
{ name: "icon", selector: { icon: { placeholder: icon } } },
{ name: "icon_color", selector: { "mush-color": {} } },
],
schema: [{ name: "icon", selector: { icon: { placeholder: icon } } }],
},
{
type: "grid",
Expand All @@ -39,6 +36,7 @@ const computeSchema = memoizeOne((icon?: string): HaFormSchema[] => [
name: "",
schema: [
{ name: "show_target_humidity_control", selector: { boolean: {} } },
{ name: "collapsible_controls", selector: { boolean: {} } },
],
},
{ name: "tap_action", selector: { "mush-action": {} } },
Expand Down
45 changes: 17 additions & 28 deletions src/cards/humidifier-card/humidifier-card.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -103,8 +103,6 @@ export class HumidifierCard extends MushroomBaseElement implements LovelaceCard

const stateDisplay = computeStateDisplay(this.hass.localize, entity, this.hass.locale);

const iconColor = this._config.icon_color;

const rtl = computeRTL(this.hass);

let stateValue = `${stateDisplay}`;
Expand All @@ -113,8 +111,8 @@ export class HumidifierCard extends MushroomBaseElement implements LovelaceCard
}

const displayControls =
!this._config.collapsible_controls ||
(isActive(entity) && this._config.show_target_humidity_control);
(!this._config.collapsible_controls || isActive(entity)) &&
this._config.show_target_humidity_control;

return html`
<ha-card class=${classMap({ "fill-container": this._config.fill_container ?? false })}>
Expand All @@ -128,7 +126,7 @@ export class HumidifierCard extends MushroomBaseElement implements LovelaceCard
hasDoubleClick: hasAction(this._config.double_tap_action),
})}
>
${this.renderIcon(icon, iconColor, isActive(entity))}
${this.renderIcon(icon, isActive(entity))}
${!isAvailable(entity)
? html`
<mushroom-badge-icon
Expand All @@ -145,40 +143,27 @@ export class HumidifierCard extends MushroomBaseElement implements LovelaceCard
></mushroom-state-info>
</mushroom-state-item>
${displayControls
? html`<div class="actions" ?rtl=${rtl}>
${this._config.show_target_humidity_control
? html`
<mushroom-humidifier-humidity-control
.hass=${this.hass}
.entity=${entity}
.color=${iconColor}
@current-change=${this.onCurrentHumidityChange}
></mushroom-humidifier-humidity-control>
</div>`
: null}
</div>`
? html`
<div class="actions" ?rtl=${rtl}>
<mushroom-humidifier-humidity-control
.hass=${this.hass}
.entity=${entity}
@current-change=${this.onCurrentHumidityChange}
></mushroom-humidifier-humidity-control>
</div>
`
: null}
</mushroom-card>
</ha-card>
`;
}

renderIcon(icon: string, iconColor: string | undefined, active: boolean): TemplateResult {
const iconStyle = {
"--icon-color": "rgb(var(--rgb-state-humidifier))",
"--shape-color": "rgba(var(--rgb-state-humidifier), 0.2)",
};
if (iconColor) {
const iconRgbColor = computeRgbColor(iconColor);
iconStyle["--icon-color"] = `rgb(${iconRgbColor})`;
iconStyle["--shape-color"] = `rgba(${iconRgbColor}, 0.2)`;
}
renderIcon(icon: string, active: boolean): TemplateResult {
return html`
<mushroom-shape-icon
slot="icon"
.disabled=${!active}
.icon=${icon}
style=${styleMap(iconStyle)}
></mushroom-shape-icon>
`;
}
Expand All @@ -191,6 +176,10 @@ export class HumidifierCard extends MushroomBaseElement implements LovelaceCard
mushroom-state-item {
cursor: pointer;
}
mushroom-shape-icon {
--icon-color: rgb(var(--rgb-state-humidifier));
--shape-color: rgba(var(--rgb-state-humidifier), 0.2);
}
mushroom-humidifier-humidity-control {
flex: 1;
}
Expand Down
5 changes: 1 addition & 4 deletions src/translations/en.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -115,10 +115,7 @@
"open": "Open"
},
"humidifier": {
"show_target_humidity_control": "Humidity control?",
"show_buttons_control": "Control buttons?",
"on": "Turn on",
"off": "Turn off"
"show_target_humidity_control": "Humidity control?"
}
},
"chip": {
Expand Down
5 changes: 1 addition & 4 deletions src/translations/fr.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -115,10 +115,7 @@
"open": "Ouvrir"
},
"humidifier": {
"show_target_humidity_control": "Contrôle d'humidité ?",
"show_buttons_control":"Contrôle avec boutons ?",
"on": "Allumer",
"off": "Éteindre"
"show_target_humidity_control": "Contrôle d'humidité ?"
}
},
"chip": {
Expand Down

0 comments on commit 846a4c6

Please sign in to comment.