TC1自定义卡片

下面是配置代码 文中MACMAC需替换成你自己TC1设备的mac地址

TC1.jpg

type: custom:stack-in-card

mode: vertical

cards:

- type: custom:mod-card

card:

type: custom:mushroom-title-card

title: TC1

card_mod:

style:

mushroom-title-card$: |

/* Set spacing around greeting */

.header {

--title-padding: 20px 0px 10px 20px;

--title-spacing: 8px;

}

- type: custom:mod-card

card:

type: grid

square: false

mode: horizontal

cards:

- type: custom:mod-card

card:

type: picture

image: /local/UI/tc1.jpg

card_mod: null

style: |

ha-card {

/* Set padding of card */

padding: 0px 0px 0px 0px;

/* Move card up to match header card */

--ha-card-border-radius: 0px;

margin-left: 0px;

margin-right: 40px;

margin-bottom: 0px;

- type: custom:mod-card

card:

type: custom:mushroom-template-card

icon: mdi:timer-play

icon_color: red

layout: horizontal

entity: sensor.ztc1_time_MACMACf6d

fill_container: true

primary: 运行时间

secondary: "{{states('sensor.ztc1_time_MACMACf6d')}}"

tap_action:

action: fire-dom-event

card_mod: null

style: |

ha-card {

/* Move card up to match header card */

margin-left: -10px;

margin-right: 20px;

margin-top: -5px;

margin-bottom: 0px;

columns: 2

style: |

ha-card {

/* Set padding of card */

padding: 0px 0px 0px 0px;

/* Move card up to match header card */

margin-left: 28px;

margin-right: 0px;

margin-bottom: -8px;

/* Remove styling from card */

--ha-card-background: none;

--ha-card-box-shadow: none;

--ha-card-border-width: 0;

padding: 0px !important;

transition: all 0s;

}

- type: custom:mod-card

card:

type: horizontal-stack

cards:

- type: custom:mod-card

card:

type: custom:mushroom-title-card

subtitle: 功率 Power

style:

mushroom-title-card$: |

/* Style name */

.subtitle {

--subtitle-font-size: 18px;

--subtitle-font-weight: var(--mush-title-font-weight, bold);

color: var(--secondary-text-color) !important;

}

- type: custom:mod-card

card:

type: custom:mushroom-title-card

alignment: end

subtitle: ???{{states('sensor.ztc1_power_MACMACf6d')}} W

style:

mushroom-title-card$: |

/* Style name */

.subtitle {

--subtitle-font-size: 18px;

--subtitle-font-weight: var(--mush-title-font-weight, bold);

color: var(--secondary-text-color) !important;

}

style: |

ha-card {

margin-left: 10px;

margin-right: 10px;

margin-bottom: -40px;

}

- type: custom:mod-card

card:

type: custom:mini-graph-card

name: null

entities:

- sensor.ztc1_power_MACMACf6d

animate: false

height: 100

upper_bound_secondary: 40

line_color: skyblue

line_width: 6

font_size: 80

font-weight: bold

show:

name: false

icon: false

state: false

style: |

ha-card {

/* Move card up to match header card */

margin-left: 10px;

margin-right: 10px;

margin-bottom: 0px;

/* Remove styling from card */

--ha-card-background: none;

--ha-card-box-shadow: none;

--ha-card-border-width: 0;

--ha-card-border-radius: 15px;

padding: 0px !important;

transition: all 0s;

}

- type: custom:mod-card

card:

type: grid

square: true

cards:

- type: custom:mushroom-entity-card

entity: switch.ztc1_1_MACMACf6d

name: xbox360

layout: vertical

icon_color: orange

tap_action:

action: toggle

double_tap_action:

action: more-info

card_mod:

style: |

ha-card {

background: var(--card-background-color);

width: auto;

border-radius: 20px;

margin-left: auto;

margin-right: auto;

margin-bottom: 0px;

}

- type: custom:mushroom-entity-card

entity: switch.ztc1_2_MACMACf6d

name: 路由器

layout: vertical

icon_color: orange

tap_action:

action: toggle

double_tap_action:

action: more-info

card_mod:

style: |

ha-card {

background: var(--card-background-color);

width: auto;

border-radius: 20px;

margin-left: auto;

margin-right: auto;

margin-bottom: 0px;

}

- type: custom:mushroom-entity-card

entity: switch.ztc1_3_MACMACf6d

name: 苹果电视盒子

layout: vertical

icon_color: orange

tap_action:

action: toggle

double_tap_action:

action: more-info

card_mod:

style: |

ha-card {

background: var(--card-background-color);

width: auto;

border-radius: 20px;

margin-left: auto;

margin-right: auto;

margin-bottom: 0px;

}

- type: custom:mushroom-entity-card

entity: switch.ztc1_4_MACMACf6d

name: 功放机

layout: vertical

icon_color: orange

tap_action:

action: toggle

double_tap_action:

action: more-info

card_mod:

style: |

ha-card {

background: var(--card-background-color);

width: auto;

border-radius: 20px;

margin-left: auto;

margin-right: auto;

margin-bottom: 0px;

}

- type: custom:mushroom-entity-card

entity: switch.ztc1_5_MACMACf6d

name: 空

layout: vertical

icon_color: orange

tap_action:

action: toggle

double_tap_action:

action: more-info

card_mod:

style: |

ha-card {

background: var(--card-background-color);

width: auto;

border-radius: 20px;

margin-left: auto;

margin-right: auto;

margin-bottom: 0px;

}

- type: custom:mushroom-entity-card

entity: switch.ztc1_6_MACMACf6d

name: 电视

layout: vertical

icon_color: orange

tap_action:

action: toggle

double_tap_action:

action: more-info

card_mod:

style: |

ha-card {

background: var(--card-background-color);

width: auto;

border-radius: 20px;

margin-left: auto;

margin-right: auto;

margin-bottom: 0px;

}

columns: 3

card_mod:

style: |

ha-card {

margin-top: 20px;

margin-left: 10px;

margin-right: 10px;

}