diff --git a/custom_cards/custom_card_andyblac_status_icon_only/custom_card_andyblac_status_icon_only.yaml b/custom_cards/custom_card_andyblac_count_info/custom_card_andyblac_count_info.yaml similarity index 67% rename from custom_cards/custom_card_andyblac_status_icon_only/custom_card_andyblac_status_icon_only.yaml rename to custom_cards/custom_card_andyblac_count_info/custom_card_andyblac_count_info.yaml index 6b6f104..745dfe9 100644 --- a/custom_cards/custom_card_andyblac_status_icon_only/custom_card_andyblac_status_icon_only.yaml +++ b/custom_cards/custom_card_andyblac_count_info/custom_card_andyblac_count_info.yaml @@ -1,11 +1,12 @@ --- -custom_card_andyblac_status_icon_only: - # v1.1 +custom_card_andyblac_count_info: + # v1.2.1 template: - "ulm_translation_engine" variables: + ulm_custom_card_andyblac_count_info_badge_bg: true tap_action: - action: "navigate" + action: "[[[ return entity?.attributes?.navigation ? 'navigate' : 'more-info'; ]]]" navigation_path: "[[[ return entity?.attributes?.navigation ? entity?.attributes?.navigation : 'none'; ]]]" hold_action: action: "more-info" @@ -44,7 +45,6 @@ custom_card_andyblac_status_icon_only: service: "[[[ return variables.hold_action.service; ]]]" service_data: "[[[ return variables.hold_action.service_data; ]]]" - state: - value: "unavailable" styles: @@ -59,43 +59,42 @@ custom_card_andyblac_status_icon_only: - background-color: "rgba(var(--color-red),1)" - styles: label: - - color: "[[[ return variables.ulm_card_status_color ? 'rgba(var(--color-'+variables.ulm_card_status_color+'),1)' : 'rgba(var(--color-theme),0.7)'; ]]]" + - color: "[[[ return 'rgba(var(--color-'+variables.ulm_custom_card_andyblac_count_info_color_on+'),1)'; ]]]" - background-color: > - [[[ - if (variables.ulm_card_status_badge_bg) { - return variables.ulm_card_status_color ? 'rgba(var(--color-'+variables.ulm_card_status_color+'),0.2)' : 'rgba(var(--color-theme),0.2)'; + [[[ + if (variables.ulm_custom_card_andyblac_count_info_badge_bg) { + return variables.ulm_custom_card_andyblac_count_info_color_on ? 'rgba(var(--color-'+variables.ulm_custom_card_andyblac_count_info_color_on+'),0.2)' : 'rgba(var(--color-theme),0.15)'; } else { - return variables.ulm_card_status_color ? 'rgba(var(--color-'+variables.ulm_card_status_color+'),0.0)' : 'rgba(var(--color-theme),0.0)'; + return 'none'; } ]]] icon: - - color: "[[[ return variables.ulm_card_status_color ? 'rgba(var(--color-'+variables.ulm_card_status_color+'),1)' : 'rgba(var(--color-theme),0.7)'; ]]]" + - color: "[[[ return variables.ulm_custom_card_andyblac_count_info_color_on ? 'rgba(var(--color-'+variables.ulm_custom_card_andyblac_count_info_color_on+'),1)' : 'rgba(var(--color-theme),0.7)'; ]]]" img_cell: - - background-color: "[[[ return variables.ulm_card_status_color ? 'rgba(var(--color-'+variables.ulm_card_status_color+'),0.2)' : 'rgba(var(--color-theme),0.2)'; ]]]" + - background-color: "[[[ return variables.ulm_custom_card_andyblac_count_info_color_on ? 'rgba(var(--color-'+variables.ulm_custom_card_andyblac_count_info_color_on+'),0.2)' : 'rgba(var(--color-theme),0.15)'; ]]]" id: "on" value: "[[[ return variables.ulm_active_state ]]]" styles: label: - - font-weight: "bold" - - font-size: "90%" - - border-radius: "[[[ return variables.ulm_card_status_badge_bg ? '50%' : '0%'; ]]]" - position: "absolute" - - right: "6%" - - top: "[[[ return variables.ulm_card_status_badge_bg ? '2%' : '0%'; ]]]" - - height: "30%" - - width: "30%" - - line-height: "24px" - - color: "rgba(var(--color-theme),0.2)" - - background-color: "rgba(var(--color-theme),0)" + - top: "3px" + - right: "3px" + - height: "20px" + - width: "20px" + - font-weight: "bold" + - font-size: "16px" + - color: "rgba(var(--color-theme),0.4)" + - background-color: "rgba(var(--color-theme),0.05)" + - border-radius: "50%" icon: - color: "rgba(var(--color-theme),0.2)" img_cell: - - background-color: "rgba(var(--color-theme),0.05)" - - border-radius: "50%" - position: "absolute" - left: "-18%" - top: "18%" + - background-color: "rgba(var(--color-theme),0.05)" + - border-radius: "50%" card: - border-radius: "15px" - box-shadow: "var(--box-shadow)" diff --git a/custom_cards/custom_card_andyblac_person/custom_card_andyblac_person.yaml b/custom_cards/custom_card_andyblac_person/custom_card_andyblac_person.yaml index e95e982..d347bcb 100644 --- a/custom_cards/custom_card_andyblac_person/custom_card_andyblac_person.yaml +++ b/custom_cards/custom_card_andyblac_person/custom_card_andyblac_person.yaml @@ -1,6 +1,6 @@ --- custom_card_andyblac_person: - # v1.2 + # v1.2.1 template: - "ulm_translation_engine" variables: @@ -35,35 +35,33 @@ custom_card_andyblac_person: - width: "[[[ return !variables.ulm_card_person_use_entity_picture ? '50%' : '100%'; ]]]" - place-self: "[[[ return !variables.ulm_card_person_use_entity_picture ? 'center' : 'stretch stretch'; ]]]" name: - - position: "absolute" - - font-weight: "bold" - - font-size: "16px" - - margin-top: "5%" + - justify-self: "start" + - align-self: "end" + - margin-top: "4%" - margin-left: "33%" - - margin-right: "20px" - - margin-bottom: "10%" - max-width: "65%" + - font-size: "16px" + - font-weight: "bold" - text-overflow: "ellipsis" - overflow: "hidden" label: - - position: "absolute" - - font-weight: "bold" + - justify-self: "start" + - align-self: "end" + - margin-top: "0%" + - margin-left: "33%" + - max-width: "65%" - font-size: "15px" + - font-weight: "bold" - filter: "opacity(40%)" - - margin-top: "17%" - - margin-left: "33%" - - margin-right: "20px" - - margin-bottom: "7%" - - max-width: "60%" - text-overflow: "ellipsis" - overflow: "hidden" img_cell: - - background-color: "rgba(var(--color-theme),0.05)" - - border-radius: "50%" - position: "absolute" - left: "-6%" - top: "18%" - width: "35%" + - background-color: "rgba(var(--color-theme),0.05)" + - border-radius: "50%" grid: - grid-template-areas: "'i n' 'i l'" - grid-template-columns: "min-content auto" @@ -76,22 +74,22 @@ custom_card_andyblac_person: badge: - border-radius: "50%" - position: "absolute" - - left: "18%" - - top: "5%" - - height: "20px" - - width: "20px" - - border: "2px solid var(--card-background-color)" + - top: "0px" + - left: "2px" + - height: "18px" + - width: "18px" - font-size: "12px" - line-height: "16px" - background-color: "[[[ return (entity.state !== 'home') ? 'rgba(var(--color-green),1)' : 'rgba(var(--color-blue),1)'; ]]]" + - border: "2px solid var(--card-background-color)" battery: &card_andyblac_person_battery_styling - border-radius: "50%" - position: "absolute" - - left: "18%" - - bottom: "0%" - - width: "15%" - - height: "40%" - - background-color: var(--card-background-color) + - top: "0px" + - left: "26px" + - height: "22px" + - width: "22px" + - background-color: "var(--primary-background-color)" custom_fields: badge: > [[[ @@ -138,8 +136,9 @@ card_andyblac_person_battery: show_state: false styles: icon: - - width: "80%" - - height: "80%" + - bottom: "2px" + - width: "85%" + - height: "85%" card: - background: "none" - box-shadow: "none" diff --git a/custom_cards/custom_card_andyblac_room/custom_card_andyblac_room.yaml b/custom_cards/custom_card_andyblac_room/custom_card_andyblac_room.yaml index f062469..4d033aa 100644 --- a/custom_cards/custom_card_andyblac_room/custom_card_andyblac_room.yaml +++ b/custom_cards/custom_card_andyblac_room/custom_card_andyblac_room.yaml @@ -1,18 +1,21 @@ --- custom_card_andyblac_room: - # v1.7.1 + # v2.0 template: - "ulm_translation_engine" + variables: - # ulm_card_room_label_use_brightness: false - ulm_card_room_use_small_label_font: false - ulm_card_room_use_label_icons: false + ulm_custom_card_andyblac_room_use_small_label_font: false + ulm_custom_card_andyblac_room_use_label_icons: false + ulm_custom_card_andyblac_room_color: "theme" + double_tap_action: action: "call-service" service: "input_select.select_option" service_data: option: "[[[ return variables.ulm_input_select_option ]]]" entity_id: "[[[ return variables.ulm_input_select ]]]" + color: "var(--google-grey-500)" size: "45%" aspect_ratio: "1/1" @@ -28,7 +31,7 @@ custom_card_andyblac_room: function getState(entity) { var entity_type = ""; var entity_state = ""; - if (variables.ulm_card_room_use_label_icons) { + if (variables.ulm_custom_card_andyblac_room_use_label_icons) { var entity_type = "| "; var spacer = " "; if (states[entity].attributes?.device_class == 'temperature') { @@ -40,7 +43,7 @@ custom_card_andyblac_room: } } if (states[entity].attributes?.brightness) { - var bri = Math.round(helpers.localize(states[entity], states[entity].attributes?.brightness) / 2.55); + var bri = Math.round(states[entity].attributes?.brightness / 2.55); var entity_type = "💡"; var entity_state = (bri ? bri : "0") + "%"; } else if (states[entity].attributes?.current_temperature) { @@ -91,12 +94,20 @@ custom_card_andyblac_room: - background-color: "[[[ return 'rgba(var(--color-red),1)'; ]]]" styles: icon: - - color: "rgba(var(--color-theme),0.2)" + - color: > + [[[ + if (variables.ulm_custom_card_andyblac_room_color == 'theme') { + return 'rgba(var(--color-'+variables.ulm_custom_card_andyblac_room_color+'),0.2)'; + } else { + return 'rgba(var(--color-'+variables.ulm_custom_card_andyblac_room_color+'),0.7)'; + } + ]]] label: + - color: "[[[ return 'rgba(var(--color-'+variables.ulm_custom_card_andyblac_room_color+'),1)'; ]]]" - justify-self: "start" - align-self: "start" - font-weight: "bold" - - font-size: "[[[ return variables?.ulm_card_room_use_small_label_font ? '14px' : '16px'; ]]]" + - font-size: "[[[ return variables?.ulm_custom_card_andyblac_room_use_small_label_font ? '14px' : '16px'; ]]]" - filter: "opacity(40%)" - margin-top: "[[[ return !variables?.entity_1 ? '-24%' : '-10%'; ]]]" - margin-left: "8px" @@ -104,6 +115,7 @@ custom_card_andyblac_room: - text-overflow: "ellipsis" - overflow: "hidden" name: + - color: "[[[ return 'rgba(var(--color-'+variables.ulm_custom_card_andyblac_room_color+'),1)'; ]]]" - justify-self: "start" - align-self: "end" - font-weight: "bold" @@ -120,18 +132,22 @@ custom_card_andyblac_room: - filter: "opacity(40%)" - margin-left: "6px" img_cell: - - background-color: "rgba(var(--color-theme),0.05)" + - position: "absolute" - border-radius: "50%" - width: "75%" - height: "75%" - max-width: "none" - max-height: "none" - - position: "absolute" - - left: "50%" - - top: "50%" - - transform: "translate(-50%,-50%)" - - margin-top: "25%" - - margin-left: "-25%" + - left: "-12.5%" + - top: "37.5%" + - background-color: > + [[[ + if (variables.ulm_custom_card_andyblac_room_color == 'theme') { + return 'rgba(var(--color-'+variables.ulm_custom_card_andyblac_room_color+'),0.05)'; + } else { + return 'rgba(var(--color-'+variables.ulm_custom_card_andyblac_room_color+'),0.2)'; + } + ]]] grid: - grid-template-areas: "[[[ return !variables?.entity_1 ? (!variables?.entity_2 ? `'n n n' 'l l i3' 'i i i4'` : `'n n i2' 'l l i3' 'i i i4'`) : `'n n n i1' 'l l l i2' 'i i . i3' 'i i . i4'`; ]]]" - grid-template-columns: "[[[ return !variables?.entity_1 ? '1fr 1fr 1fr' : '1fr 1fr 1fr 1fr'; ]]]" @@ -142,15 +158,41 @@ custom_card_andyblac_room: - box-shadow: "var(--box-shadow)" - padding: "5px" custom_fields: - i1: &card_andyblac_room_widget_icon_styling + icon: + - position: "absolute" + - left: "8%" + - bottom: "8%" + - width: "34%" + - height: "34%" + - line-height: "0" + - fill: "[[[ return 'rgba(var(--color-'+variables.ulm_custom_card_andyblac_room_color+'),0.7)' ]]]" + img_cell: + - border-radius: "50%" + - width: "75%" + - height: "75%" + - max-width: "none" + - max-height: "none" + - position: "absolute" + - left: "-12.5%" + - top: "37.5%" + - background-color: > + [[[ + if (variables.ulm_custom_card_andyblac_room_color == 'theme') { + return 'rgba(var(--color-'+variables.ulm_custom_card_andyblac_room_color+'),0.05)'; + } else { + return 'rgba(var(--color-'+variables.ulm_custom_card_andyblac_room_color+'),0.2)'; + } + ]]] + + i1: &custom_card_andyblac_room_widget_icon_styling - border-radius: "50%" - width: "80%" - height: "80%" - line-height: 0 - display: "grid" - i2: *card_andyblac_room_widget_icon_styling - i3: *card_andyblac_room_widget_icon_styling - i4: *card_andyblac_room_widget_icon_styling + i2: *custom_card_andyblac_room_widget_icon_styling + i3: *custom_card_andyblac_room_widget_icon_styling + i4: *custom_card_andyblac_room_widget_icon_styling s1: - position: "absolute" @@ -167,24 +209,24 @@ custom_card_andyblac_room: s3: - position: "absolute" - left: "34%" - - bottom: "43%" + - bottom: "41%" - width: "14%" - height: "14%" s4: - position: "absolute" - left: "45%" - - bottom: "31%" + - bottom: "28%" - width: "14%" - height: "14%" s5: - position: "absolute" - left: "47.5%" - - bottom: "16%" + - bottom: "15%" - width: "14%" - height: "14%" s6: - position: "absolute" - - left: "44%" + - left: "43%" - bottom: "2%" - width: "14%" - height: "14%" @@ -202,7 +244,7 @@ custom_card_andyblac_room: icon: "[[[ return variables?.entity_1?.icon ]]]" template: > [[[ - let templates = [ 'card_andyblac_room_widget_icon' ]; + let templates = [ 'custom_card_andyblac_room_widget_icon' ]; if (variables?.entity_1?.templates?.length) { templates.push(...variables.entity_1.templates); } @@ -223,7 +265,7 @@ custom_card_andyblac_room: icon: "[[[ return variables?.entity_2?.icon ]]]" template: > [[[ - let templates = [ 'card_andyblac_room_widget_icon' ]; + let templates = [ 'custom_card_andyblac_room_widget_icon' ]; if (variables?.entity_2?.templates?.length) { templates.push(...variables.entity_2.templates); } @@ -244,7 +286,7 @@ custom_card_andyblac_room: icon: "[[[ return variables?.entity_3?.icon ]]]" template: > [[[ - let templates = [ 'card_andyblac_room_widget_icon' ]; + let templates = [ 'custom_card_andyblac_room_widget_icon' ]; if (variables?.entity_3?.templates?.length) { templates.push(...variables.entity_3.templates); } @@ -265,7 +307,7 @@ custom_card_andyblac_room: icon: "[[[ return variables?.entity_4?.icon ]]]" template: > [[[ - let templates = [ 'card_andyblac_room_widget_icon' ]; + let templates = [ 'custom_card_andyblac_room_widget_icon' ]; if (variables?.entity_4?.templates?.length) { templates.push(...variables.entity_4.templates); } @@ -286,13 +328,20 @@ custom_card_andyblac_room: icon: "[[[ return variables?.sensor_1?.icon ]]]" template: > [[[ - let templates = [ 'card_andyblac_room_sensor_icon' ]; + let templates = [ 'custom_card_andyblac_room_sensor_icon' ]; if (variables?.sensor_1?.templates?.length) { templates.push(...variables.sensor_1.templates); } return templates; ]]] - variables: "[[[ return variables?.sensor_1; ]]]" + variables: > + [[[ + let variables_tmp = variables.sensor_1; + if (variables?.sensor_1) { + variables_tmp['ulm_custom_card_andyblac_room_color'] = variables.ulm_custom_card_andyblac_room_color; + } + return variables_tmp; + ]]] state: - operator: "template" value: "[[[ return !variables.sensor_1; ]]]" @@ -306,13 +355,20 @@ custom_card_andyblac_room: icon: "[[[ return variables?.sensor_2?.icon ]]]" template: > [[[ - let templates = [ 'card_andyblac_room_sensor_icon' ]; + let templates = [ 'custom_card_andyblac_room_sensor_icon' ]; if (variables?.sensor_2?.templates?.length) { templates.push(...variables.sensor_2.templates); } return templates; ]]] - variables: "[[[ return variables?.sensor_2; ]]]" + variables: > + [[[ + let variables_tmp = variables.sensor_2; + if (variables?.sensor_2) { + variables_tmp['ulm_custom_card_andyblac_room_color'] = variables.ulm_custom_card_andyblac_room_color; + } + return variables_tmp; + ]]] state: - operator: "template" value: "[[[ return !variables.sensor_2; ]]]" @@ -326,13 +382,20 @@ custom_card_andyblac_room: icon: "[[[ return variables?.sensor_3?.icon ]]]" template: > [[[ - let templates = [ 'card_andyblac_room_sensor_icon' ]; + let templates = [ 'custom_card_andyblac_room_sensor_icon' ]; if (variables?.sensor_3?.templates?.length) { templates.push(...variables.sensor_3.templates); } return templates; ]]] - variables: "[[[ return variables?.sensor_3; ]]]" + variables: > + [[[ + let variables_tmp = variables.sensor_3; + if (variables?.sensor_3) { + variables_tmp['ulm_custom_card_andyblac_room_color'] = variables.ulm_custom_card_andyblac_room_color; + } + return variables_tmp; + ]]] state: - operator: "template" value: "[[[ return !variables.sensor_3; ]]]" @@ -346,13 +409,20 @@ custom_card_andyblac_room: icon: "[[[ return variables?.sensor_4?.icon ]]]" template: > [[[ - let templates = [ 'card_andyblac_room_sensor_icon' ]; + let templates = [ 'custom_card_andyblac_room_sensor_icon' ]; if (variables?.sensor_4?.templates?.length) { templates.push(...variables.sensor_4.templates); } return templates; ]]] - variables: "[[[ return variables?.sensor_4; ]]]" + variables: > + [[[ + let variables_tmp = variables.sensor_4; + if (variables?.sensor_4) { + variables_tmp['ulm_custom_card_andyblac_room_color'] = variables.ulm_custom_card_andyblac_room_color; + } + return variables_tmp; + ]]] state: - operator: "template" value: "[[[ return !variables.sensor_4; ]]]" @@ -366,13 +436,20 @@ custom_card_andyblac_room: icon: "[[[ return variables?.sensor_5?.icon ]]]" template: > [[[ - let templates = [ 'card_andyblac_room_sensor_icon' ]; + let templates = [ 'custom_card_andyblac_room_sensor_icon' ]; if (variables?.sensor_5?.templates?.length) { templates.push(...variables.sensor_5.templates); } return templates; ]]] - variables: "[[[ return variables?.sensor_5; ]]]" + variables: > + [[[ + let variables_tmp = variables.sensor_5; + if (variables?.sensor_5) { + variables_tmp['ulm_custom_card_andyblac_room_color'] = variables.ulm_custom_card_andyblac_room_color; + } + return variables_tmp; + ]]] state: - operator: "template" value: "[[[ return !variables.sensor_5; ]]]" @@ -386,13 +463,20 @@ custom_card_andyblac_room: icon: "[[[ return variables?.sensor_6?.icon ]]]" template: > [[[ - let templates = [ 'card_andyblac_room_sensor_icon' ]; + let templates = [ 'custom_card_andyblac_room_sensor_icon' ]; if (variables?.sensor_6?.templates?.length) { templates.push(...variables.sensor_6.templates); } return templates; ]]] - variables: "[[[ return variables?.sensor_6; ]]]" + variables: > + [[[ + let variables_tmp = variables.sensor_6; + if (variables?.sensor_6) { + variables_tmp['ulm_custom_card_andyblac_room_color'] = variables.ulm_custom_card_andyblac_room_color; + } + return variables_tmp; + ]]] state: - operator: "template" value: "[[[ return !variables.sensor_6; ]]]" @@ -401,7 +485,7 @@ custom_card_andyblac_room: - display: "none" entity: "[[[ return variables?.sensor_6?.entity_id; ]]]" -card_andyblac_room_widget_icon: +custom_card_andyblac_room_widget_icon: variables: tap_action: action: "toggle" @@ -439,6 +523,21 @@ card_andyblac_room_widget_icon: - box-shadow: "none" - padding: "0px" - border-radius: "50%" + custom_fields: + icon: + - position: "absolute" + - left: "25%" + - bottom: "25%" + - width: "50%" + - height: "50%" + - line-height: "0" + - fill: "rgba(var(--color-theme),0.2)" + img_cell: + - position: "absolute" + - width: "100%" + - height: "100%" + - border-radius: "50%" + - background-color: "rgba(var(--color-theme),0.05)" state: - value: "unavailable" styles: @@ -453,14 +552,22 @@ card_andyblac_room_widget_icon: - margin-left: "10px" - line-height: 0 - background-color: "[[[ return 'rgba(var(--color-red),1)'; ]]]" - - styles: + - value: "on" + styles: icon: - - color: "[[[ return variables.ulm_card_room_use_light_color ? 'var(--button-card-light-color)' : 'rgba(var(--color-theme),0.7)'; ]]]" - - fill: "[[[ return variables.ulm_card_room_use_light_color ? 'var(--button-card-light-color)' : 'rgba(var(--color-theme),0.7)'; ]]]" + - color: "[[[ return variables.ulm_card_room_use_light_color ? 'var(--button-card-light-color)' : (variables.ulm_custom_card_andyblac_room_icon_color_on ? 'rgba(var(--color-'+variables.ulm_custom_card_andyblac_room_icon_color_on+'),1)' : 'rgba(var(--color-theme),0.7)'); ]]]" img_cell: - - background-color: "[[[ return variables.ulm_card_room_use_light_color ? 'color-mix(in srgb, transparent, var(--button-card-light-color) 20%)' : 'rgba(var(--color-theme),0.15)'; ]]]" + - background-color: "[[[ return variables.ulm_card_room_use_light_color ? 'color-mix(in srgb, transparent, var(--button-card-light-color) 20%)' : (variables.ulm_custom_card_andyblac_room_icon_color_on ? 'rgba(var(--color-'+variables.ulm_custom_card_andyblac_room_icon_color_on+'),0.2)' : 'rgba(var(--color-theme),0.15)'); ]]]" + custom_fields: + icon: + - fill: "[[[ return variables.ulm_custom_card_andyblac_room_icon_color_on ? 'rgba(var(--color-'+variables.ulm_custom_card_andyblac_room_icon_color_on+'),1)' : 'rgba(var(--color-theme),0.7)'; ]]]" + img_cell: + - position: "absolute" + - width: "100%" + - height: "100%" + - border-radius: "50%" + - background-color: "[[[ return variables.ulm_custom_card_andyblac_room_icon_color_on ? 'rgba(var(--color-'+variables.ulm_custom_card_andyblac_room_icon_color_on+'),0.2)' : 'rgba(var(--color-theme),0.15)'; ]]]" id: "on" - value: "on" custom_fields: notification: > [[[ @@ -469,8 +576,10 @@ card_andyblac_room_widget_icon: } ]]] -card_andyblac_room_sensor_icon: +custom_card_andyblac_room_sensor_icon: variables: + ulm_custom_card_andyblac_room_sensor_color: "[[[ return variables.ulm_custom_card_andyblac_room_sensor_color ? variables.ulm_custom_card_andyblac_room_sensor_color : variables.ulm_custom_card_andyblac_room_color; ]]]" + ulm_custom_card_andyblac_room_sensor_color_on: "[[[ return variables?.ulm_custom_card_andyblac_room_sensor_color_on ? variables.ulm_custom_card_andyblac_room_sensor_color_on : variables.ulm_custom_card_andyblac_room_sensor_color; ]]]" tap_action: action: "more-info" hold_action: @@ -501,6 +610,7 @@ card_andyblac_room_sensor_icon: service: "[[[ return variables.hold_action.service; ]]]" service_data: "[[[ return variables.hold_action.service_data; ]]]" size: "15px" + aspect_ratio: "1/1" show_icon: true show_name: false styles: @@ -508,14 +618,54 @@ card_andyblac_room_sensor_icon: - width: "90%" - height: "90%" - line-height: "0" - - color: "[[[ return variables?.ulm_card_room_sensor_color ? 'rgba(var(--color-'+variables?.ulm_card_room_sensor_color+'),0.4)' : 'rgba(var(--color-theme),0.2)'; ]]]" + - color: > + [[[ + if (variables.ulm_custom_card_andyblac_room_sensor_color == 'theme') { + return 'rgba(var(--color-'+variables.ulm_custom_card_andyblac_room_sensor_color+'),0.2)'; + } else { + return 'rgba(var(--color-'+variables.ulm_custom_card_andyblac_room_sensor_color+'),0.4)'; + } + ]]] card: + - border-radius: "0px" - background: "none" - box-shadow: "none" - padding: "0px" + custom_fields: + icon: + - position: "absolute" + - left: "5%" + - bottom: "5%" + - width: "90%" + - height: "90%" + - fill: > + [[[ + if (variables.ulm_custom_card_andyblac_room_sensor_color_on == 'theme') { + return 'rgba(var(--color-'+variables.ulm_custom_card_andyblac_room_sensor_color_on+'),0.2)'; + } else { + return 'rgba(var(--color-'+variables.ulm_custom_card_andyblac_room_sensor_color_on+'),0.4)'; + } + ]]] state: - - styles: + - value: "[[[ return variables?.ulm_active_state ]]]" + styles: icon: - - color: "[[[ return variables?.ulm_card_room_sensor_color_on ? 'rgba(var(--color-'+variables?.ulm_card_room_sensor_color_on+'),1)' : (variables?.ulm_card_room_sensor_color ? 'rgba(var(--color-'+variables?.ulm_card_room_sensor_color+'),1)' : 'rgba(var(--color-theme),0.7)'); ]]]" + - color: > + [[[ + if (variables.ulm_custom_card_andyblac_room_sensor_color_on == 'theme') { + return 'rgba(var(--color-'+variables.ulm_custom_card_andyblac_room_sensor_color_on+'),0.7)'; + } else { + return 'rgba(var(--color-'+variables.ulm_custom_card_andyblac_room_sensor_color_on+'),1)'; + } + ]]] + custom_fields: + icon: + - fill: > + [[[ + if (variables.ulm_custom_card_andyblac_room_sensor_color_on == 'theme') { + return 'rgba(var(--color-'+variables.ulm_custom_card_andyblac_room_sensor_color_on+'),0.7)'; + } else { + return 'rgba(var(--color-'+variables.ulm_custom_card_andyblac_room_sensor_color_on+'),1)'; + } + ]]] id: "on" - value: "[[[ return variables?.ulm_active_state ]]]" diff --git a/custom_cards/custom_card_andyblac_scene/custom_card_andyblac_scene.yaml b/custom_cards/custom_card_andyblac_scene/custom_card_andyblac_scene.yaml index 5c5c02a..51f538e 100644 --- a/custom_cards/custom_card_andyblac_scene/custom_card_andyblac_scene.yaml +++ b/custom_cards/custom_card_andyblac_scene/custom_card_andyblac_scene.yaml @@ -1,60 +1,121 @@ --- custom_card_andyblac_scene: - # 1.1 + # 1.3 template: - "ulm_translation_engine" variables: - ulm_card_scene_color: "theme" + ulm_custom_card_andyblac_scene_color: "theme" tap_action: - action: "call-service" - service: "scene.turn_on" - service_data: - entity_id: "[[[ return entity.entity_id ]]]" + action: "more-info" + show_icon: false show_name: true show_label: false show_state: true state_display: "[[[ return helpers.relativeTime(entity.state); ]]]" aspect_ratio: "1/0.35" + + state: + - value: "unavailable" + styles: + custom_fields: + notification: + - border-radius: "50%" + - position: "absolute" + - width: "10.5%" + - height: "30%" + - left: "20%" + - top: "3%" + - line-height: 0 + - background-color: "rgba(var(--color-red),1)" + styles: - icon: - - color: "[[[ return 'rgba(var(--color-'+variables.ulm_card_scene_color+'),0.9)'; ]]]" - - width: "50%" - - place-self: "stretch:stretch" name: - - position: "absolute" + - justify-self: "start" + - align-self: "end" - font-weight: "bold" - font-size: "16px" - - margin-top: "5%" - margin-left: "33%" - - margin-right: "20px" - - margin-bottom: "10%" + - margin-top: "4%" - max-width: "65%" - text-overflow: "ellipsis" - overflow: "hidden" state: - - position: "absolute" + - justify-self: "start" + - align-self: "end" - font-weight: "bold" - - font-size: "15px" - filter: "opacity(40%)" - - margin-top: "17%" + - font-size: "15px" - margin-left: "33%" - - margin-right: "20px" - - margin-bottom: "7%" + - margin-top: "0%" - max-width: "65%" - text-overflow: "ellipsis" - overflow: "hidden" - img_cell: - - background-color: "[[[ return 'rgba(var(--color-'+variables.ulm_card_scene_color+'),0.2)'; ]]]" - - border-radius: "50%" - - position: "absolute" - - left: "-6%" - - top: "18%" - - width: "35%" grid: - - grid-template-areas: "'i n' 'i l'" + - grid-template-areas: "'i n' 'i s'" - grid-template-columns: "min-content auto" - grid-template-rows: "min-content min-content" card: - border-radius: "15px" - box-shadow: "var(--box-shadow)" - padding: "5px" + custom_fields: + icon: &custom_card_andyblac_scene_widget_styling + - position: "absolute" + - left: "-6%" + - top: "18%" + - width: "35%" + + custom_fields: + icon: + card: + type: "custom:button-card" + entity: "[[[ return entity.entity_id; ]]]" + template: > + [[[ + let templates = [ 'custom_card_andyblac_scene_widget' ]; + if (variables?.scene?.templates?.length) { + templates.push(...variables.scene.templates); + } + return templates; + ]]] + variables: > + [[[ + let variables_tmp = {}; + variables_tmp['ulm_custom_card_andyblac_scene_color'] = variables.ulm_custom_card_andyblac_scene_color; + return variables_tmp; + ]]] + notification: > + [[[ + if (entity?.state == 'unavailable'){ + return ''; + } + ]]] + +custom_card_andyblac_scene_widget: + tap_action: + action: "call-service" + service: "scene.turn_on" + service_data: + entity_id: "[[[ return entity.entity_id ]]]" + size: "15px" + show_icon: true + show_name: false + show_state: false + aspect_ratio: "1/1" + styles: + icon: + - color: "[[[ return 'rgba(var(--color-'+variables.ulm_custom_card_andyblac_scene_color+'),0.9)'; ]]]" + - width: "50%" + - place-self: "stretch:stretch" + img_cell: + - position: "absolute" + - width: "100%" + - height: "100%" + - border-radius: "50%" + - background-color: "[[[ return 'rgba(var(--color-'+variables.ulm_custom_card_andyblac_scene_color+'),0.2)'; ]]]" + card: + - height: "100%" + - background: "none" + - box-shadow: "none" + - padding: "0px" + - border-radius: "50%" diff --git a/custom_cards/custom_card_andyblac_status/custom_card_andyblac_status.yaml b/custom_cards/custom_card_andyblac_status/custom_card_andyblac_status.yaml index c51a41f..c7f2e4e 100644 --- a/custom_cards/custom_card_andyblac_status/custom_card_andyblac_status.yaml +++ b/custom_cards/custom_card_andyblac_status/custom_card_andyblac_status.yaml @@ -1,10 +1,11 @@ --- custom_card_andyblac_status: - # v1.1 + # v1.3 template: - "ulm_translation_engine" + variables: - ulm_card_status_color: "[[[ return entity?.attributes?.color ? entity?.attributes?.color : 'theme' ]]]" + ulm_custom_card_andyblac_status_color_on: "[[[ return entity?.attributes?.color ]]]" ulm_active_state: > [[[ let not_active = ['0','disarmed','off','closed','not_home','standby','idle','docked','unknown','unavailable','paused'] @@ -19,20 +20,16 @@ custom_card_andyblac_status: } ]]] + tap_action: + action: "more-info" + size: "45%" aspect_ratio: "1/0.35" show_name: true - show_label: true - show_icon: true - icon: "[[[ return entity?.attributes?.icon ? entity?.attributes?.icon : 'mdi:information']]]" - label: "[[[ return entity?.attributes?.label ? entity?.attributes?.label : entity?.state ]]]" - - tap_action: - action: "navigate" - navigation_path: "[[[ return entity?.attributes?.navigation ? entity?.attributes?.navigation : 'none' ]]]" - hold_action: - action: "more-info" - entity: "[[[ return entity.entity_id; ]]]" + show_label: false + show_icon: false + show_state: true + state_display: "[[[ return entity?.attributes?.label ]]]" state: - value: "unavailable" @@ -49,62 +46,154 @@ custom_card_andyblac_status: - background-color: "rgba(var(--color-red),1)" - styles: name: - - color: "[[[ return 'rgba(var(--color-'+variables.ulm_card_status_color+'),1)'; ]]]" - label: - - color: "[[[ return 'rgba(var(--color-'+variables.ulm_card_status_color+'),1)'; ]]]" - icon: - - color: "[[[ return 'rgba(var(--color-'+variables.ulm_card_status_color+'),1)'; ]]]" - img_cell: - - background-color: "[[[ return 'rgba(var(--color-'+variables.ulm_card_status_color+'),0.2)'; ]]]" + - color: "[[[ return 'rgba(var(--color-'+variables.ulm_custom_card_andyblac_status_color_on+'),1)'; ]]]" + state: + - color: "[[[ return 'rgba(var(--color-'+variables.ulm_custom_card_andyblac_status_color_on+'),1)'; ]]]" id: "on" value: "[[[ return variables.ulm_active_state ]]]" + styles: - icon: - - color: "rgba(var(--color-theme),0.2)" name: - - position: "absolute" + - justify-self: "start" + - align-self: "end" - font-weight: "bold" - - font-size: "18px" - - margin-top: "4%" + - font-size: "16px" - margin-left: "33%" - - margin-right: "20px" - - margin-bottom: "10%" + - margin-top: "4%" - max-width: "65%" - text-overflow: "ellipsis" - overflow: "hidden" - label: - - position: "absolute" + state: + - justify-self: "start" + - align-self: "end" - font-weight: "bold" - - font-size: "16px" - filter: "opacity(40%)" - - margin-top: "17%" + - font-size: "15px" - margin-left: "33%" - - margin-right: "20px" - - margin-bottom: "7%" + - margin-top: "0%" - max-width: "65%" - text-overflow: "ellipsis" - overflow: "hidden" - img_cell: - - background-color: "rgba(var(--color-theme),0.05)" - - border-radius: "50%" - - position: "absolute" - - width: "35%" - - height: "100%" - - left: "-6%" - - top: "16%" grid: - - grid-template-areas: "'i n' 'i l'" + - grid-template-areas: "'i n' 'i s'" - grid-template-columns: "min-content auto" - grid-template-rows: "min-content min-content" card: - border-radius: "15px" - box-shadow: "var(--box-shadow)" - padding: "5px" + custom_fields: + icon: &custom_card_andyblac_status_widget_styling + - position: "absolute" + - left: "-6%" + - top: "18%" + - width: "35%" custom_fields: + icon: + card: + type: "custom:button-card" + icon: "[[[ return variables?.button?.icon ]]]" + template: > + [[[ + let templates = [ 'custom_card_andyblac_status_widget' ]; + if (variables?.button?.templates?.length) { + templates.push(...variables.button.templates); + } + return templates; + ]]] + variables: > + [[[ + let variables_tmp1 = variables?.button; + let variables_tmp2 = {}; + var variables_tmp = Object.assign({}, variables_tmp1, variables_tmp2); + variables_tmp['ulm_custom_card_andyblac_status_color_on'] = variables.ulm_custom_card_andyblac_status_color_on; + variables_tmp['ulm_active_state'] = variables.ulm_active_state; + return variables_tmp; + ]]] + entity: "[[[ return variables.button?.entity_id ? variables.button?.entity_id : entity.entity_id; ]]]" notification: > [[[ if (entity?.state == 'unavailable'){ return ''; } ]]] + +custom_card_andyblac_status_widget: + variables: + tap_action: + action: "more-info" + navigation_path: "[[[ return entity?.attributes?.navigation; ]]]" + hold_action: + action: "more-info" + + tap_action: + action: "[[[ return variables?.tap_action?.action ? variables.tap_action.action : 'none'; ]]]" + navigation_path: "[[[ return variables.tap_action.navigation_path; ]]]" + url_path: "[[[ return variables.tap_action.url_path; ]]]" + service: "[[[ return variables.tap_action.service; ]]]" + service_data: "[[[ return variables.tap_action.service_data; ]]]" + hold_action: + action: "[[[ return variables?.hold_action?.action ? variables.hold_action.action : 'none'; ]]]" + navigation_path: "[[[ return variables.hold_action.navigation_path; ]]]" + url_path: "[[[ return variables.hold_action.url_path; ]]]" + service: "[[[ return variables.hold_action.service; ]]]" + service_data: "[[[ return variables.hold_action.service_data; ]]]" + + size: "15px" + show_icon: true + show_name: false + aspect_ratio: "1/1" + icon: "[[[ return entity?.attributes?.icon ]]]" + state: + - value: "unavailable" + styles: + custom_fields: + notification: + - border-radius: "50%" + - position: "absolute" + - width: "10.5%" + - height: "30%" + - left: "20%" + - top: "3%" + - line-height: 0 + - background-color: "rgba(var(--color-red),1)" + - styles: + icon: + - color: > + [[[ + if (variables.ulm_custom_card_andyblac_status_color_on == 'theme') { + return 'rgba(var(--color-'+variables.ulm_custom_card_andyblac_status_color_on+'),0.7)'; + } else { + return 'rgba(var(--color-'+variables.ulm_custom_card_andyblac_status_color_on+'),1)'; + } + ]]] + img_cell: + - background-color: > + [[[ + if (variables.ulm_custom_card_andyblac_status_color_on == 'theme') { + return 'rgba(var(--color-'+variables.ulm_custom_card_andyblac_status_color_on+'),0.15)'; + } else { + return 'rgba(var(--color-'+variables.ulm_custom_card_andyblac_status_color_on+'),0.2)'; + } + ]]] + id: "on" + value: "[[[ return variables.ulm_active_state ]]]" + + styles: + icon: + - color: "rgba(var(--color-theme),0.2)" + - width: "50%" + - place-self: "stretch:stretch" + img_cell: + - position: "absolute" + - width: "100%" + - height: "100%" + - border-radius: "50%" + - background-color: "rgba(var(--color-theme),0.05)" + card: + - height: "100%" + - background: "none" + - box-shadow: "none" + - padding: "0px" + - border-radius: "50%" diff --git a/docs/assets/img/custom_card_andyblac_count_info/custom_card_andyblac_count_info_dark.png b/docs/assets/img/custom_card_andyblac_count_info/custom_card_andyblac_count_info_dark.png new file mode 100644 index 0000000..492f4dc Binary files /dev/null and b/docs/assets/img/custom_card_andyblac_count_info/custom_card_andyblac_count_info_dark.png differ diff --git a/docs/assets/img/custom_card_andyblac_count_info/custom_card_andyblac_count_info_light.png b/docs/assets/img/custom_card_andyblac_count_info/custom_card_andyblac_count_info_light.png new file mode 100644 index 0000000..47c0d9b Binary files /dev/null and b/docs/assets/img/custom_card_andyblac_count_info/custom_card_andyblac_count_info_light.png differ diff --git a/docs/assets/img/custom_card_andyblac_person/custom_card_andyblac_person_dark.png b/docs/assets/img/custom_card_andyblac_person/custom_card_andyblac_person_dark.png index e837b5b..9d404e3 100644 Binary files a/docs/assets/img/custom_card_andyblac_person/custom_card_andyblac_person_dark.png and b/docs/assets/img/custom_card_andyblac_person/custom_card_andyblac_person_dark.png differ diff --git a/docs/assets/img/custom_card_andyblac_person/custom_card_andyblac_person_light.png b/docs/assets/img/custom_card_andyblac_person/custom_card_andyblac_person_light.png index 5f594fc..532dca1 100644 Binary files a/docs/assets/img/custom_card_andyblac_person/custom_card_andyblac_person_light.png and b/docs/assets/img/custom_card_andyblac_person/custom_card_andyblac_person_light.png differ diff --git a/docs/assets/img/custom_card_andyblac_room/custom_card_andyblac_room_dark.png b/docs/assets/img/custom_card_andyblac_room/custom_card_andyblac_room_dark.png new file mode 100644 index 0000000..947c5a6 Binary files /dev/null and b/docs/assets/img/custom_card_andyblac_room/custom_card_andyblac_room_dark.png differ diff --git a/docs/assets/img/custom_card_andyblac_room/custom_card_andyblac_room_light.png b/docs/assets/img/custom_card_andyblac_room/custom_card_andyblac_room_light.png new file mode 100644 index 0000000..0d6cc6d Binary files /dev/null and b/docs/assets/img/custom_card_andyblac_room/custom_card_andyblac_room_light.png differ diff --git a/docs/assets/img/custom_card_andyblac_scene/custom_card_andyblac_scene_dark.png b/docs/assets/img/custom_card_andyblac_scene/custom_card_andyblac_scene_dark.png index 3464c06..d2072b1 100644 Binary files a/docs/assets/img/custom_card_andyblac_scene/custom_card_andyblac_scene_dark.png and b/docs/assets/img/custom_card_andyblac_scene/custom_card_andyblac_scene_dark.png differ diff --git a/docs/assets/img/custom_card_andyblac_scene/custom_card_andyblac_scene_light.png b/docs/assets/img/custom_card_andyblac_scene/custom_card_andyblac_scene_light.png index 1610438..ac8a39f 100644 Binary files a/docs/assets/img/custom_card_andyblac_scene/custom_card_andyblac_scene_light.png and b/docs/assets/img/custom_card_andyblac_scene/custom_card_andyblac_scene_light.png differ diff --git a/docs/assets/img/custom_card_andyblac_status/custom_card_andyblac_status_dark.png b/docs/assets/img/custom_card_andyblac_status/custom_card_andyblac_status_dark.png new file mode 100644 index 0000000..b6f9d86 Binary files /dev/null and b/docs/assets/img/custom_card_andyblac_status/custom_card_andyblac_status_dark.png differ diff --git a/docs/assets/img/custom_card_andyblac_status/custom_card_andyblac_status_light.png b/docs/assets/img/custom_card_andyblac_status/custom_card_andyblac_status_light.png new file mode 100644 index 0000000..9872cb8 Binary files /dev/null and b/docs/assets/img/custom_card_andyblac_status/custom_card_andyblac_status_light.png differ diff --git a/docs/usage/custom_cards/custom_card_andyblac_count_info.md b/docs/usage/custom_cards/custom_card_andyblac_count_info.md new file mode 100644 index 0000000..b934a8c --- /dev/null +++ b/docs/usage/custom_cards/custom_card_andyblac_count_info.md @@ -0,0 +1,59 @@ +--- +title: Custom Card "count_info" +hide: + - toc +--- + + +## Description + +![example-image-light](../../assets/img/custom_card_andyblac_count_info/custom_card_andyblac_count_info_light.png) +![example-image-dark](../../assets/img/custom_card_andyblac_count_info/custom_card_andyblac_count_info_dark.png) + +## Credits + +- Authors: + - AndyBlac + +## Changelog + +
+1.2.1 +Initial release +
+ +## Variables + +| Variable | Default | Required | Notes | +|----------------------------------------------|---------|-------------|-------------------| +| entity | | Yes | The sensor entity | +| ulm_custom_card_andyblac_count_info_color_on | | No | This lets you change the colour of the icon and background, when state is 'on' | +| ulm_custom_card_andyblac_count_info_badge_bg | `true` | No | This lets you show / hide the badge background | + +## Default card options + +| Options | Default | Required | Notes | Requirement | +|----------------------------------------|-----------------|-------------|----------------|-------------| +| entity | | No | The entity_id for the card | | +| icon | | No | Icon to display. Defaults to the entity icon | | +| tap_action | `more-info` | No | Define the type of action on click, if undefined, toggle will be used.
See [Action](https://github.com/custom-cards/button-card#Action)| | +| hold_action | | No | Define the type of action on hold, if undefined, nothing happens
See [Action](https://github.com/custom-cards/button-card#Action)| | +| label | | No | Shows the state of the sensor, you can also use code here | + +## Usage + +```yaml +- type: custom:button-card + entity: sensor.rubbish_collection + label: "[[[ return entity.attributes.daysTo ]]]" + template: + - custom_card_andyblac_count_info + variables: + ulm_custom_card_andyblac_count_info_color_on: green +``` + +??? note "Template Code" + + ```yaml title="custom_card_andyblac_count_info.yaml" + --8<-- "custom_cards/custom_card_andyblac_count_info/custom_card_andyblac_count_info.yaml" + ``` diff --git a/docs/usage/custom_cards/custom_card_andyblac_person.md b/docs/usage/custom_cards/custom_card_andyblac_person.md index e448f33..f3f9893 100644 --- a/docs/usage/custom_cards/custom_card_andyblac_person.md +++ b/docs/usage/custom_cards/custom_card_andyblac_person.md @@ -24,23 +24,27 @@ This card shows if a person is `Home` or `Away`. If you have setup other zones, 1.2.0 Initial release +
+1.2.1 +Fix card info text layout +
## Variables | Variable | Default | Required | Notes | |----------|---------|------------------|-------------------| -| entity | | Yes | The person entity | -| ulm_card_person_use_entity_picture | | No | If you set this to true, the card shows the entity picture from your user, otherwise (set to false) shows the icon. Default is false. | +| entity | | Yes | The person entity | +| ulm_card_person_use_entity_picture | | No | If you set this to true, the card shows the entity picture from your user, otherwise (set to false) shows the icon. Default is false. | | ulm_card_person_icon | mdi:face-man | No | Sets the icon to display if entity picture not shown. | -| ulm_card_person_eta | | No | Sensor with ETA info from integrations like: [Waze](https://www.home-assistant.io/integrations/waze_travel_time/), [Google](https://www.home-assistant.io/integrations/google_travel_time/) and [HERE](https://www.home-assistant.io/integrations/here_travel_time/) | -| ulm_address | | No | Show an address as label, add an entity with a geo location | -| battery | | No | Battery sensor a `battery` object (see below) | +| ulm_card_person_eta | | No | Sensor with ETA info from integrations like: [Waze](https://www.home-assistant.io/integrations/waze_travel_time/), [Google](https://www.home-assistant.io/integrations/google_travel_time/) and [HERE](https://www.home-assistant.io/integrations/here_travel_time/) | +| ulm_address | | No | Show an address as label, add an entity with a geo location | +| battery | | No | Battery object (see below) | -## Battery entity +## Battery object -| Variable | Default | Required | Notes | Requirement | -|----------------------------------------|-----------------|------------------|----------------|-------------| -| entity_id | | Yes | The entity_id of the status icon | | +| Variable | Default | Required | Notes | +|-------------|-----------------|-----------|----------------| +| entity_id | | Yes | The entity_id of the battery icon, Required when using battery object | ## Usage diff --git a/docs/usage/custom_cards/custom_card_andyblac_room.md b/docs/usage/custom_cards/custom_card_andyblac_room.md new file mode 100644 index 0000000..50fc225 --- /dev/null +++ b/docs/usage/custom_cards/custom_card_andyblac_room.md @@ -0,0 +1,123 @@ +--- +title: Room Card +hide: + - toc +--- + + +## Description + +![example-image-light](../../assets/img/custom_card_andyblac_room/custom_card_andyblac_room_light.png) +![example-image-dark](../../assets/img/custom_card_andyblac_room/custom_card_andyblac_room_dark.png) + +This is the `room-card`, used to show the state of single room in a quick glance. +The card has support for up to 4 subicons at the right side of the card, and 6 sensor subicons going around the inside of the room icon. These can be configured using custom colors and tap actions. + +## Credits + +- Authors: + - AndyBlac +- Full credit to the Minimalist UI team for creating the base card that this 'mod' was used. + +## Changelog + +
+2.0 +Initial release +
+ +## Room Variables + +| Variable | Default | Required | Notes | Requirement | +|----------------------------------------------------|-----------------|-------------|----------------|-------------| +| ulm_custom_card_andyblac_room_use_small_label_font | `false` | No | My card uses slightly larger fonts than the original card, to use use the orignal card font size set this to `true` | +| ulm_custom_card_andyblac_room_use_label_icons | `false` | No | This option lets you see an icon next to the text of the sensor_label information (🌡️ / 💧 / 🔆 ) +| ulm_custom_card_andyblac_room_color | `theme` | No | This lets you set the room colour.
You can use any colour in your theme that uses the following naming structure `color-red: "241, 139, 130"` or `color-yellow: "252, 214, 99"`
So for example `color-background-purple: "var(--color-purple)"` in your theme, you would ignore the text `color-` and just set `background-purple` +| sensor_label_1 | | No | The enitiy_id of a sensor you wish to display the state of | | +| sensor_label_2 | | No | The enitiy_id of a sensor you wish to display the state of | | +| sensor_label_3 | | No | The enitiy_id of a sensor you wish to display the state of | | +| entity_1 | | No | a `room_entity` object (see below) | | +| entity_2 | | No | a `room_entity` object (see below) | | +| entity_3 | | No | a `room_entity` object (see below) | | +| entity_4 | | No | a `room_entity` object (see below) | | +| sensor_1 | | No | a `sensor` object (see below) | | +| sensor_2 | | No | a `sensor` object (see below) | | +| sensor_3 | | No | a `sensor` object (see below) | | +| sensor_4 | | No | a `sensor` object (see below) | | +| sensor_5 | | No | a `sensor` object (see below) | | +| sensor_6 | | No | a `sensor` object (see below) | | + +## Room object + +| Variable | Default | Required | Notes | Requirement | +|----------------------------------------|-----------------|-------------|----------------|-------------| +| entity_id | | No | The entity_id of the widget to control | | +| icon | | No | Allows you set an icon of your choice | | +| templates | | No | List of the additional button card templates to apply to this icon | | +| tap_action | | No | tap_action for the icon (see button card documentation for options) | | +| hold_action | | No | hold_action for the icon (see button card documentation for options) | | + +## Sensor object + +| Variable | Default | Required | Notes | Requirement | +|----------------------------------------|-----------------|-------------|----------------|-------------| +| entity_id | | No | The entity_id of the sensor | | +| icon | | No | Allows you set an icon of your choice | | +| templates | | No | List of the additional button card templates to apply to this icon | | +| tap_action | | No | tap_action for the icon (see button card documentation for options) | | +| hold_action | | No | hold_action for the icon (see button card documentation for options) | | + +## Sensor Variables + +| Variable | Default | Required | Notes | Requirement | +|-------------------------------------------------|-----------------|-------------|----------------|-------------| +| ulm_custom_card_andyblac_room_sensor_color | Room colour | No | Allows you to change the color of the sensor color of state is `off` | +| ulm_custom_card_andyblac_room_sensor_color_on | Room colour | No | Allows you to change the color of the sensor color of state is `on` | + + +## Default card options + +All the options from the button card are still available for the large room card. +If you want to tweak this card a little bit more, below are some examples. The full list can be found here: [link](https://github.com/custom-cards/button-card#main-options) + +| Options | Default | Required | Notes | Requirement | +|----------------------------------------|-----------------|------------------|----------------|-------------| +| entity | | No | The entity_id for the large card | | +| icon | | No | Icon to display. Defaults to the entity icon | | +| tap_action | navigate | No | Define the type of action on click, if undefined, toggle will be used.
See [Action](https://github.com/custom-cards/button-card#Action)| | +| hold_action | | No | Define the type of action on hold, if undefined, nothing happens
See [Action](https://github.com/custom-cards/button-card#Action)| | +| label | | No | Change the label text | | +| name | | No | Change the title text | | + +## Usage + +```yaml + - type: custom:button-card + template: + - custom_card_andyblac_room + name: "Bathroom" + tap_action: + action: navigate + navigation_path: bathroom + variables: + ulm_custom_card_andyblac_room_color: blue + sensor_label_1: sensor.bathroom_humidity_sensor_temperature + sensor_label_2: sensor.bathroom_humidity_sensor_humidity + sensor_label_3: sensor.bathroom_humidity_derivative + sensor_1: + entity_id: input_boolean.hot_water_toggle + tap_action: + action: toggle + entity_3: + entity_id: light.bathroom_light + ulm_custom_card_andyblac_room_icon_color_on: yellow + entity_4: + entity_id: fan.bathroom_extractor + ulm_custom_card_andyblac_room_icon_color_on: blue +``` + +??? note "Template Code" + + ```yaml title="card_room.yaml" + --8<-- "custom_cards/custom_card_andyblac_room/custom_card_andyblac_room.yaml" + ``` diff --git a/docs/usage/custom_cards/custom_card_andyblac_scene.md b/docs/usage/custom_cards/custom_card_andyblac_scene.md index 4395ef5..99f0077 100644 --- a/docs/usage/custom_cards/custom_card_andyblac_scene.md +++ b/docs/usage/custom_cards/custom_card_andyblac_scene.md @@ -10,6 +10,8 @@ hide: ![example-image-light](../../assets/img/custom_card_andyblac_scene/custom_card_andyblac_scene_light.png) ![example-image-dark](../../assets/img/custom_card_andyblac_scene/custom_card_andyblac_scene_dark.png) +This card let you activate a scene by tapping on the icon, it also gives last activated information. + ## Credits - Authors: @@ -21,13 +23,21 @@ hide: 1.1.0 Initial release +
+1.2.0 +Add ability to have actions on the icon and the card. +
+
+1.3.0 +Fix card info text layout, and add unavailable indicator. +
## Variables | Variable | Default | Required | Notes | |----------|---------|------------------|-------------------| -| entity | | Yes | The scene entity | -| ulm_card_scene_color | | No | This lets you change the colour if the icon and background. | +| entity | | Yes | The scene entity | +| ulm_custom_card_andyblac_scene_color | | No | This lets you change the colour of the icon and background. | ## Usage diff --git a/docs/usage/custom_cards/custom_card_andyblac_status.md b/docs/usage/custom_cards/custom_card_andyblac_status.md new file mode 100644 index 0000000..e3680dd --- /dev/null +++ b/docs/usage/custom_cards/custom_card_andyblac_status.md @@ -0,0 +1,72 @@ +--- +title: Custom Card "Status" +hide: + - toc +--- + + +## Description + +![example-image-light](../../assets/img/custom_card_andyblac_status/custom_card_andyblac_status_light.png) +![example-image-dark](../../assets/img/custom_card_andyblac_status/custom_card_andyblac_status_dark.png) + +## Credits + +- Authors: + - AndyBlac + +## Changelog + +
+1.3 +Initial release +
+ +## Variables + +| Variable | Default | Required | Notes | +|------------------------------------------|---------|-------------|-------------------| +| entity | | Yes | The status entity | +| ulm_custom_card_andyblac_status_color_on | | No | This lets you change the colour of the icon and background, when state is 'on' | +| button | | No | The button object (see below) | + +## Button object + +| Variable | Default | Required | Notes | +|-------------|-----------------|-----------|----------------| +| icon | | No | The icon to show, Defaults to the entity icon | +| tap_action | `more-info` | No | Define the type of action on click, if undefined, toggle will be used.
See [Action](https://github.com/custom-cards/button-card#Action)| | +| hold_action | `more-info` | No | Define the type of action on hold, if undefined, nothing happens
See [Action](https://github.com/custom-cards/button-card#Action)| | + +## Default card options + +| Options | Default | Required | Notes | +|----------------------|-----------------|------------------|----------------------------| +| entity | | No | The entity_id for the card | +| name | | No | Change the title text | +| state_display | | No | Change the label text. | + +## Usage + +```yaml +- type: custom:button-card + name: Heating + entity: sensor.security_state + template: + - custom_card_andyblac_status + tap_action: # this is for the card action. + action: more-info + variables: + ulm_custom_card_andyblac_status_color_on: blue + button: + icon: mdi:shower + tap_action: + action: navigate # this is for the button action. + navigation_path: bathroom +``` + +??? note "Template Code" + + ```yaml title="custom_card_andyblac_status.yaml" + --8<-- "custom_cards/custom_card_andyblac_status/custom_card_andyblac_status.yaml" + ```