Skip to content

Instantly share code, notes, and snippets.

@lxe

lxe/README.md

Last active November 10, 2025 15:32
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save lxe/d22a3f00bb5db5152a584c4642106fb4 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save lxe/d22a3f00bb5db5152a584c4642106fb4 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. lxe revised this gist Jan 31, 2023. 1 changed file with 3 additions and 1 deletion.
    4 changes: 3 additions & 1 deletion README.md
    View file
    Original file line number Diff line number Diff line change
    @@ -6,4 +6,6 @@ Things used:
    - https://github.com/kalkih/mini-graph-card
    - https://community.home-assistant.io/t/metrology-metro-fluent-windows-themes-for-home-assistant/419530
    - https://github.com/thomasloven/lovelace-card-mod
    - https://github.com/pkissling/clock-weather-card
    - https://github.com/pkissling/clock-weather-card

    The yaml below is very rough, as I'm pretty new to this, and I've been experimenting a ton. It's in the process of being made responsive for small screens, so there's a lot of weird stuff going on.
  2. lxe revised this gist Jan 31, 2023. 1 changed file with 3 additions and 1 deletion.
    4 changes: 3 additions & 1 deletion README.md
    View file
    Original file line number Diff line number Diff line change
    @@ -4,4 +4,6 @@ Things used:
    - https://github.com/thomasloven/lovelace-layout-card
    - https://github.com/nervetattoo/simple-thermostat
    - https://github.com/kalkih/mini-graph-card
    - https://community.home-assistant.io/t/metrology-metro-fluent-windows-themes-for-home-assistant/419530
    - https://community.home-assistant.io/t/metrology-metro-fluent-windows-themes-for-home-assistant/419530
    - https://github.com/thomasloven/lovelace-card-mod
    - https://github.com/pkissling/clock-weather-card
  3. lxe revised this gist Jan 31, 2023. 1 changed file with 7 additions and 0 deletions.
    7 changes: 7 additions & 0 deletions README.md
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,7 @@
    https://www.reddit.com/r/homeassistant/comments/10q8bj9/after_a_day_of_yaml_and_css_wrangling_finally/

    Things used:
    - https://github.com/thomasloven/lovelace-layout-card
    - https://github.com/nervetattoo/simple-thermostat
    - https://github.com/kalkih/mini-graph-card
    - https://community.home-assistant.io/t/metrology-metro-fluent-windows-themes-for-home-assistant/419530
  4. lxe created this gist Jan 31, 2023.
    360 changes: 360 additions & 0 deletions homeassistant.yaml
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,360 @@
    title: Home
    views:
    - theme: Backend-selected
    path: default_view
    title: Home
    icon: mdi:home
    type: custom:grid-layout
    layout:
    grid-template-columns: 1fr 1fr 1fr
    grid-template-rows: auto
    grid-template-areas: |
    "sidebar main main"
    mediaquery:
    '(max-width: 600px)':
    grid-template-columns: 100%
    grid-template-areas: |
    "sidebar"
    "main"
    badges: []
    cards:
    - type: vertical-stack
    cards:
    - type: horizontal-stack
    layout:
    margin: 0
    gap: 0
    grid-template-columns: 1fr 1fr
    mediaquery:
    '(max-width: 600px)':
    grid-template-columns: 100%
    cards:
    - type: custom:simple-thermostat
    entity: climate.hallway
    step_size: 1
    layout:
    step: row
    sensors:
    labels: false
    mode:
    names: false
    headings: false
    hide:
    state: true
    card_mod:
    style: |
    .current-wrapper {
    flex-wrap: nowrap !important;
    }
    .modes {
    padding: 0;
    }
    .modes:last-of-type {
    display: none;
    }
    ha-card {
    padding-bottom: 0 !important;
    }
    - type: custom:simple-thermostat
    entity: climate.mancave
    step_size: 1
    layout:
    step: row
    sensors:
    labels: false
    mode:
    names: false
    headings: false
    hide:
    state: true
    card_mod:
    style: |
    .current-wrapper {
    flex-wrap: nowrap !important;
    }
    .modes {
    padding: 0;
    }
    ha-card {
    padding-bottom: 0 !important;
    }
    - type: vertical-stack
    cards:
    - type: horizontal-stack
    cards:
    - type: custom:mini-graph-card
    card_mod:
    style: |
    ha-card { padding: 0 !important; }
    entities:
    - entity: sensor.backyard_temperature
    name: Temperature
    - type: custom:mini-graph-card
    card_mod:
    style: |
    ha-card { padding: 0 !important; }
    entities:
    - entity: sensor.backyard_humidity
    name: Humidity
    - type: custom:mini-graph-card
    card_mod:
    style: |
    ha-card { padding: 0 !important; }
    entities:
    - entity: sensor.purpleair_pressure
    name: Pressure
    - type: custom:mini-graph-card
    icon: mdi:air-purifier
    card_mod:
    style: |
    ha-card { padding: 0 !important; }
    entities:
    - entity: sensor.purpleair_aqi_a
    name: AQI
    color_thresholds:
    - value: 0
    color: '#43a047'
    - value: 150
    color: '#ffa600'
    - value: 300
    color: '#db4437'
    - value: 4000
    color: '#0000ff'
    - type: horizontal-stack
    cards:
    - type: custom:mini-graph-card
    card_mod:
    style: |
    ha-card { padding: 0 !important; }
    entities:
    - entity: sensor.aranet4_xxx_temperature
    name: 👶 Temp
    - type: custom:mini-graph-card
    card_mod:
    style: |
    ha-card { padding: 0 !important; }
    entities:
    - entity: sensor.aranet4_xxx_humidity
    name: 👶 Humidity
    color_thresholds:
    - value: 0
    color: '#db4437'
    - value: 35
    color: '#ffa600'
    - value: 50
    color: '#43a047'
    - value: 70
    color: '#ffa600'
    - value: 90
    color: '#db4437'
    - type: custom:mini-graph-card
    icon: mdi:molecule-co2
    card_mod:
    style: |
    ha-card { padding: 0 !important; }
    entities:
    - entity: sensor.aranet4_xxx_carbon_dioxide
    name: 👶 CO2
    color_thresholds:
    - value: 0
    color: '#43a047'
    - value: 1100
    color: '#ffa600'
    - value: 1600
    color: '#db4437'
    - value: 1800
    color: '#0000ff'
    - type: custom:mini-graph-card
    icon: mdi:air-purifier
    card_mod:
    style: |
    ha-card { padding: 0 !important; }
    entities:
    - entity: sensor.purpleair_indoor_aqi
    name: AQI
    color_thresholds:
    - value: 0
    color: '#43a047'
    - value: 160
    color: '#ffa600'
    - value: 200
    color: '#db4437'
    - type: custom:mini-graph-card
    icon: mdi:lungs
    card_mod:
    style: |
    ha-card { padding: 0 !important; }
    entities:
    - entity: sensor.owlet_spo2
    name: 👶 Oxy
    color_thresholds:
    - value: 0
    color: '#db4437'
    - value: 90
    color: '#43a047'
    - type: horizontal-stack
    cards:
    - camera_view: live
    type: picture-glance
    title: ' '
    entities: []
    camera_image: camera.front_door
    aspect_ratio: '16:9'
    entity: camera.front_door
    - camera_view: live
    type: picture-glance
    title: ' '
    entities: []
    camera_image: camera.backyard
    aspect_ratio: '16:9'
    entity: camera.backyard
    - camera_view: live
    type: picture-glance
    title: ' '
    entities: []
    camera_image: camera.192_168_0_180
    aspect_ratio: '16:9'
    entity: camera.192_168_0_180
    - square: false
    columns: 6
    type: grid
    cards:
    - show_name: true
    show_icon: true
    type: button
    tap_action:
    action: toggle
    entity: switch.left_bed_light_socket
    name: Left Bed
    icon: mdi:lamp
    show_state: true
    icon_height: 30px
    card_mod:
    style: |
    ha-card { padding: 6% 0 !important; }
    - show_name: true
    show_icon: true
    type: button
    tap_action:
    action: toggle
    entity: switch.right_bed_light_socket
    name: Right Bed
    icon: mdi:lamp
    show_state: true
    icon_height: 30px
    card_mod:
    style: |
    ha-card { padding: 6% 0 !important; }
    - show_name: true
    show_icon: true
    type: button
    tap_action:
    action: toggle
    name: Patio
    icon: mdi:string-lights
    show_state: true
    entity: switch.patio_lights_socket_1
    icon_height: 30px
    card_mod:
    style: |
    ha-card { padding: 6% 0 !important; }
    - show_name: true
    show_icon: true
    type: button
    tap_action:
    action: toggle
    entity: switch.living_room_light_socket_1
    name: Living Room
    icon: mdi:floor-lamp
    show_state: true
    icon_height: 30px
    card_mod:
    style: |
    ha-card { padding: 6% 0 !important; }
    - show_name: true
    show_icon: true
    type: button
    tap_action:
    action: toggle
    entity: switch.man_cave_lamp_socket
    icon: mdi:floor-lamp-dual
    name: Mancave
    show_state: true
    icon_height: 30px
    card_mod:
    style: |
    ha-card { padding: 6% 0 !important; }
    - show_name: true
    show_icon: true
    type: button
    tap_action:
    action: toggle
    entity: lock.front_door_2
    show_state: true
    icon_height: 30px
    card_mod:
    style: |
    ha-card { padding: 6% 0 !important; }
    view_layout:
    grid-area: main
    - type: vertical-stack
    cards:
    - type: custom:clock-weather-card
    entity: weather.home
    sun_entity: sun.sun
    weather_icon_type: line
    animated_icon: true
    forecast_days: 3
    locale: en-US
    time_format: 24
    hide_today_section: false
    hide_forecast_section: false
    hide_clock: false
    hide_date: false
    - initial_view: dayGridMonth
    type: calendar
    entities:
    - calendar.aleksey
    card_mod:
    style:
    ha-full-calendar:
    $: |
    .header {
    flex-direction: row !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    }
    .header h1 {
    font-size: 16px;
    margin: 0;
    word-wrap: nowrap;
    }
    #calendar {
    min-height: 262px !important;
    }
    .controls div:last-child {
    display: flex;
    flex-direction: row;
    flext-wrap: nowrap;
    }
    .today {
    margin-right: 0 !important;
    margin-inline-end: 0 !important;
    }
    - type: horizontal-stack
    cards:
    - hours_to_show: 6
    graph: line
    type: sensor
    entity: sensor.envoy_xxx_current_power_production
    detail: 2
    name: Primary
    - hours_to_show: 6
    graph: line
    type: sensor
    entity: sensor.envoy_xxx_current_power_production
    detail: 2
    name: Secondary
    view_layout:
    grid-area: sidebar