) => {
- if (schema.name === "entity") {
+ if (schema.name === "show_current_as_primary") {
return this.hass!.localize(
- "ui.panel.lovelace.editor.card.generic.entity"
+ "ui.panel.lovelace.editor.card.humidifier.show_current_as_primary"
);
}
- if (schema.name === "theme") {
- return `${this.hass!.localize(
- "ui.panel.lovelace.editor.card.generic.theme"
- )} (${this.hass!.localize(
- "ui.panel.lovelace.editor.card.config.optional"
- )})`;
- }
-
return this.hass!.localize(
`ui.panel.lovelace.editor.card.generic.${schema.name}`
);
diff --git a/src/state-control/humidifier/ha-state-control-humidifier-humidity.ts b/src/state-control/humidifier/ha-state-control-humidifier-humidity.ts
index 648753ab66..6078180cd8 100644
--- a/src/state-control/humidifier/ha-state-control-humidifier-humidity.ts
+++ b/src/state-control/humidifier/ha-state-control-humidifier-humidity.ts
@@ -1,5 +1,5 @@
-import { mdiMinus, mdiPlus, mdiWaterPercent } from "@mdi/js";
-import { CSSResultGroup, LitElement, PropertyValues, html } from "lit";
+import { mdiMinus, mdiPlus, mdiThermostat, mdiWaterPercent } from "@mdi/js";
+import { CSSResultGroup, LitElement, PropertyValues, html, nothing } from "lit";
import { customElement, property, state } from "lit/decorators";
import { styleMap } from "lit/directives/style-map";
import { stateActive } from "../../common/entity/state_active";
@@ -11,6 +11,7 @@ import "../../components/ha-control-circular-slider";
import "../../components/ha-outlined-icon-button";
import "../../components/ha-svg-icon";
import { UNAVAILABLE } from "../../data/entity";
+import { DOMAIN_ATTRIBUTES_UNITS } from "../../data/entity_attributes";
import {
HUMIDIFIER_ACTION_MODE,
HumidifierEntity,
@@ -28,8 +29,11 @@ export class HaStateControlHumidifierHumidity extends LitElement {
@property({ attribute: false }) public stateObj!: HumidifierEntity;
- @property({ attribute: "show-current", type: Boolean })
- public showCurrent?: boolean = false;
+ @property({ attribute: "show-secondary", type: Boolean })
+ public showSecondary?: boolean;
+
+ @property({ attribute: "use-current-as-primary", type: Boolean })
+ public showCurrentAsPrimary?: boolean;
@property({ type: Boolean, attribute: "prevent-interaction-on-scroll" })
public preventInteractionOnScroll?: boolean;
@@ -101,37 +105,11 @@ export class HaStateControlHumidifierHumidity extends LitElement {
const action = this.stateObj.attributes.action;
- const actionLabel = this.hass.formatEntityAttributeValue(
- this.stateObj,
- "action"
- );
-
return html`
- ${action && action !== "off" && action !== "idle"
- ? actionLabel
- : this._targetHumidity
- ? this.hass.localize("ui.card.humidifier.target")
- : this.hass.formatEntityState(this.stateObj)}
-
- `;
- }
-
- private _renderCurrentHumidity(humidity?: number) {
- if (!this.showCurrent || humidity == null) {
- return html`
`;
- }
-
- return html`
-
-
-
- ${this.hass.formatEntityAttributeValue(
- this.stateObj,
- "current_humidity",
- humidity
- )}
-
+ ${action
+ ? this.hass.formatEntityAttributeValue(this.stateObj, "action")
+ : this.hass.formatEntityState(this.stateObj)}
`;
}
@@ -155,19 +133,95 @@ export class HaStateControlHumidifierHumidity extends LitElement {
`;
}
- private _renderTarget(humidity: number) {
- const formatOptions = {
+ private _renderPrimary() {
+ const currentHumidity = this.stateObj.attributes.current_humidity;
+
+ if (currentHumidity != null && this.showCurrentAsPrimary) {
+ return this._renderCurrent(currentHumidity, "big");
+ }
+
+ if (this._targetHumidity != null && !this.showCurrentAsPrimary) {
+ return this._renderTarget(this._targetHumidity!, "big");
+ }
+
+ return nothing;
+ }
+
+ private _renderSecondary() {
+ if (!this.showSecondary) {
+ return html``;
+ }
+
+ const currentHumidity = this.stateObj.attributes.current_humidity;
+
+ if (currentHumidity != null && !this.showCurrentAsPrimary) {
+ return html`
+
+
+ ${this._renderCurrent(currentHumidity, "normal")}
+
+ `;
+ }
+
+ if (this._targetHumidity != null && this.showCurrentAsPrimary) {
+ return html`
+
+
+ ${this._renderCurrent(this._targetHumidity, "normal")}
+
+ `;
+ }
+
+ return html``;
+ }
+
+ private _renderTarget(humidity: number, style: "normal" | "big") {
+ const formatOptions: Intl.NumberFormatOptions = {
maximumFractionDigits: 0,
};
+ if (style === "big") {
+ return html`
+
+ `;
+ }
return html`
-
+ ${this.hass.formatEntityAttributeValue(
+ this.stateObj,
+ "humidity",
+ humidity
+ )}
+ `;
+ }
+
+ private _renderCurrent(humidity: number, style: "normal" | "big") {
+ const formatOptions: Intl.NumberFormatOptions = {
+ maximumFractionDigits: 1,
+ };
+ if (style === "big") {
+ return html`
+
+ `;
+ }
+
+ return html`
+ ${this.hass.formatEntityAttributeValue(
+ this.stateObj,
+ "current_humidity",
+ humidity
+ )}
`;
}
@@ -219,10 +273,7 @@ export class HaStateControlHumidifierHumidity extends LitElement {
>
- ${this._renderLabel()} ${this._renderTarget(targetHumidity)}
- ${this._renderCurrentHumidity(
- this.stateObj.attributes.current_humidity
- )}
+ ${this._renderLabel()}${this._renderPrimary()}${this._renderSecondary()}
${this._renderButtons()}
@@ -246,10 +297,7 @@ export class HaStateControlHumidifierHumidity extends LitElement {
>
- ${this._renderLabel()}
- ${this._renderCurrentHumidity(
- this.stateObj.attributes.current_humidity
- )}
+ ${this._renderLabel()} ${this._renderSecondary()}
`;
diff --git a/src/state-control/state-control-circular-slider-style.ts b/src/state-control/state-control-circular-slider-style.ts
index 8928960380..cc1c9366d7 100644
--- a/src/state-control/state-control-circular-slider-style.ts
+++ b/src/state-control/state-control-circular-slider-style.ts
@@ -41,6 +41,9 @@ export const stateControlCircularSliderStyle = css`
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
+ line-height: 1.5;
+ min-height: 1.5em;
+ white-space: nowrap;
}
.label span {
white-space: nowrap;
diff --git a/src/translations/en.json b/src/translations/en.json
index eda7d0953c..0de14a10ec 100644
--- a/src/translations/en.json
+++ b/src/translations/en.json
@@ -5136,7 +5136,8 @@
},
"humidifier": {
"name": "Humidifier",
- "description": "The Humidifier card gives control of your humidifier entity. Allowing you to change the humidity and mode of the entity."
+ "description": "The Humidifier card gives control of your humidifier entity. Allowing you to change the humidity and mode of the entity.",
+ "show_current_as_primary": "Show current humidity as primary information"
},
"iframe": {
"name": "Webpage",