Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix(humidifier): fixes controls and standardize options #451

Merged
merged 1 commit into from
May 8, 2022
Merged

fix(humidifier): fixes controls and standardize options #451

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 0 additions & 4 deletions .hass_dev/views/humidifier-view.yaml
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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