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.

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

Card Fan as a New Base Card #1194

Merged
merged 16 commits into from
Mar 10, 2023
4 changes: 2 additions & 2 deletions custom_cards/custom_card_saxel_fan/custom_card_saxel_fan.yaml
Original file line number Diff line number Diff line change
Expand Up @@ -78,13 +78,13 @@ custom_card_saxel_fan_common:
label: |-
[[[
if (entity.state != 'unavailable') {
if (variables.ulm_card_fan_slider_temp_attribute != False) {
if (variables.ulm_card_fan_slider_temp_attribute != false) {
var temp = Math.round(entity.attributes[variables.ulm_card_fan_temp_attribute]);
let temp_str = ' • ' + (temp ? temp : '0') + '°C';
} else {
let temp_str = ''

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

also this and hum_str should be defined outside the if scope

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Have fixed this - however moving forwards I am personally focussing on the new card_fan and leaving the saxel fan behind.

}
if (variables.ulm_card_fan_slider_hum_attribute != False) {
if (variables.ulm_card_fan_slider_hum_attribute != false) {

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

These should probably be null or empty checks. The attributes are strings

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Have fixed this - however moving forwards I am personally focussing on the new card_fan and leaving the saxel fan behind.

var hum = Math.round(entity.attributes[variables.ulm_card_fan_hum_attribute]);
let hum_str = ' • ' + (hum ? hum : '0') + '%';
} else {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -234,7 +234,7 @@ card_cover:
"opening": hass.resources[hass['language']]['component.cover.state._.closing']
};

if(["unknown", "unavailable"].includes(entity.state)){
if(["unknown", "unavailable"].includes(entity.state) || position === undefined){
return variables.ulm_translation_state;
}

Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,286 @@
---
### Card Fan ###
card_fan:
template:
- "icon_more_info_new"
- "ulm_translation_engine"
variables:
ulm_card_fan_name: "[[[ return entity.attributes.friendly_name ]]]"
ulm_card_fan_icon: "[[[ return entity.attributes.icon ]]]"
ulm_card_fan_enable_horizontal: false
ulm_card_fan_color: false
benbur98 marked this conversation as resolved.
Show resolved Hide resolved
ulm_card_fan_force_background_color: false
ulm_card_fan_enable_collapse: false
ulm_card_fan_enable_slider: false
ulm_card_fan_slider_min: 0
ulm_card_fan_slider_max: 100
ulm_card_fan_enable_button: false
ulm_card_fan_button_icon: "mdi:rotate-3d-variant"
ulm_card_fan_button_service: "fan.oscillate"
ulm_card_fan_temp_attribute: false # "temp"
ulm_card_fan_hum_attribute: false # "hum"
show_icon: false
show_name: false
show_label: false
state:
- value: "on"
styles:
card:
- background-color: >
[[[
if (variables.ulm_card_fan_color) {
if (variables.ulm_card_fan_force_background_color || hass.themes.darkMode) {
var color = variables.ulm_card_fan_color;
return 'rgba(var(--color-' + color + '),var(--opacity-bg))';
}
}
]]]
styles:
grid:
- grid-template-areas: >
[[[
if (variables.ulm_card_fan_enable_collapse && entity.state != "on") {
return "\"item1\"";
}

var areas = [];
areas.push("item1");
if (variables.ulm_card_fan_enable_slider) {
areas.push("item2");
}

if (variables.ulm_card_fan_enable_horizontal) {
return "\"" + areas.join(" ") + "\"";
}
return "\"" + areas.join("\" \"") + "\"";
]]]
- grid-template-columns: >
[[[
if (variables.ulm_card_fan_enable_collapse && entity.state != "on") {
return "1fr";
}
if (variables.ulm_card_fan_enable_horizontal) {
return "1fr 1fr";
}
return "1fr";
]]]
- grid-template-rows: >
[[[
if (variables.ulm_card_fan_enable_horizontal || (variables.ulm_card_fan_enable_collapse && entity.state != "on")) {
return "min-content";
}

var rows = [];
rows.push("min-content");
if (variables.ulm_card_fan_enable_slider) {
rows.push("min-content");
}
return rows.join(" ");
]]]
- row-gap: "12px"
card:
- border-radius: "var(--border-radius)"
- box-shadow: "var(--box-shadow)"
- padding: "12px"
custom_fields:
item2:
- display: >
[[[
if (variables.ulm_card_fan_enable_collapse && entity.state != "on") {
return "none";
} else if (variables.ulm_card_fan_enable_slider) {
return "block";
} else {
return "none";
}
]]]
custom_fields:
item1:
card:
type: "custom:button-card"
custom_fields:
item1:
card:
type: "custom:button-card"
entity: "[[[ return entity.entity_id ]]]"
icon: "[[[ return variables.ulm_card_fan_icon ]]]"
styles:
icon:
- color: >
[[[
if (entity.state != "off") {
if (variables.ulm_card_fan_color) {
var color = variables.ulm_card_fan_color;
return 'rgba(var(--color-' + color + '),1)';
}
return 'rgba(var(--color-theme),1)';
}
return 'rgba(var(--color-theme),0.2)';
]]]
img_cell:
- background-color: >
[[[
if (entity.state != "off") {
if (variables.ulm_card_fan_color) {
var color = variables.ulm_card_fan_color;
return 'rgba(var(--color-' + color + '),0.2)';
}
}
return 'rgba(var(--color-theme),0.05)';
]]]
item2:
card:
type: "custom:button-card"
entity: "[[[ return entity.entity_id ]]]"
name: "[[[ return variables.ulm_card_fan_name ]]]"
label: >
[[[
if (entity.state == 'unavailable') {
return variables.ulm_translation_unavailable;
}

let temp_str = '';
if (variables.ulm_card_fan_temp_attribute) {
var temp = Math.round(entity.attributes[variables.ulm_card_fan_temp_attribute]);
temp_str = ' • ' + (temp ? temp : '0') + '°C';
}
let hum_str = '';
if (variables.ulm_card_fan_hum_attribute) {
var hum = Math.round(entity.attributes[variables.ulm_card_fan_hum_attribute]);
hum_str = ' • ' + (hum ? hum : '0') + '%';
}

if (entity.state != 'off') {
if (entity.attributes.percentage != null) {
var per = entity.attributes.percentage;
let per_str = (per ? per : '0') + '%';
return per_str + temp_str + hum_str;
}
return variables.ulm_translation_on + temp_str + hum_str;
}
return variables.ulm_translation_off + temp_str + hum_str;
]]]
state:
- value: "on"
styles:
name:
- color: >
[[[
if (variables.ulm_card_fan_force_background_color || hass.themes.darkMode) {
if (variables.ulm_card_fan_color) {
var color = variables.ulm_card_fan_color;
return 'rgba(var(--color-' + color + '),1)';
}
}
]]]
label:
- color: >
[[[
if (variables.ulm_card_fan_force_background_color || hass.themes.darkMode) {
if (variables.ulm_card_fan_color) {
var color = variables.ulm_card_fan_color;
return 'rgba(var(--color-' + color + '),1)';
}
}
]]]
item2:
card:
type: "custom:button-card"
template: "list_one_third_items"
styles:
grid:
- grid-template-areas: >
[[[
if (variables.ulm_card_fan_enable_button) {
return "'slider button'"
}
return "'slider'";
]]]
- grid-template-columns: >
[[[
if (variables.ulm_card_fan_enable_button) {
return "2fr 1fr"
}
return "1fr";
]]]
custom_fields:
button:
- display: >
[[[
if (variables.ulm_card_fan_enable_button) {
return "block";
}
return "none";
]]]
custom_fields:
slider:
card:
type: "custom:my-slider"
entity: "[[[ return entity.entity_id ]]]"
radius: "14px"
height: "42px"
minSet: "[[[ return variables.ulm_card_fan_slider_min ]]]"
maxSet: "[[[ return variables.ulm_card_fan_slider_max ]]]"
mainSliderColor: >
[[[
if (variables.ulm_card_fan_color) {
var color = variables.ulm_card_fan_color;
if (entity.state != "off") {
return 'rgba(var(--color-' + color + '),0.8)';
}
}
return "rgba(var(--color-grey),0.8)";
]]]
secondarySliderColor: >
[[[
if (variables.ulm_card_fan_color) {
var color = variables.ulm_card_fan_color;
if (entity.state != "off") {
return 'rgba(var(--color-' + color + '),0.1)';
}
}
return "rgba(var(--color-grey),0.1)";
]]]
mainSliderColorOff: "rgba(var(--color-theme),0.05)"
secondarySliderColorOff: "rgba(var(--color-theme),0.05)"
thumbHorizontalPadding: "0px"
thumbVerticalPadding: "0px"
thumbWidth: "0px"
card_mod:
style: |
ha-card {
border-radius: 14px;
box-shadow: none;
}
button:
card:
type: "custom:button-card"
template:
- "widget_icon"
icon: "[[[ return variables.ulm_card_fan_button_icon ]]]"
entity: "[[[ return entity.entity_id ]]]"
tap_action:
action: "call-service"
service: "[[[ return variables.ulm_card_fan_button_service ]]]"
service_data:
entity_id: "[[[ return entity.entity_id ]]]"
oscillating: "[[[ return !entity.attributes[oscillate] ]]]"
state:
- value: "on"
styles:
icon:
- color: >
[[[
if (variables.ulm_card_fan_color && entity.state != "off") {
var color = variables.ulm_card_fan_color;
return 'rgba(var(--color-' + color + '),1)';
}
]]]
img_cell:
- background-color: >
[[[
if (variables.ulm_card_fan_color && entity.state != "off") {
var color = variables.ulm_card_fan_color;
return 'rgba(var(--color-' + color + '),0.2)';
}
]]]