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.

Sign up for GitHub

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

Jump to bottom

Bubble Card Examples #109

Closed
BeardedTinker opened this issue Oct 18, 2023 · 5 comments
Closed

Bubble Card Examples #109

BeardedTinker opened this issue Oct 18, 2023 · 5 comments
Assignees
@BeardedTinker
Labels
documentation Improvements or additions to documentation Enhancement New feature or request HACS Home Assistant Community Store

Comments

@BeardedTinker
Copy link
Owner

Here are few examples from my configuration. You need to adjust entities to match your config:

Living room bubble card:
image

type: vertical-stack
cards:
  - type: custom:bubble-card
    card_type: pop-up
    hash: '#living-room'
    name: Living room
    icon: phu:living-room
    entity: light.living_room_light
    state: sensor.living_room_temperature
    state_unit: °C
    width_desktop: 600px
    margin_top_mobile: 18px
    margin_top_desktop: 74px
    auto_close: 15000
    trigger_entity: binary_sensor.living_room_motion_occupancy
  - type: custom:mushroom-climate-card
    entity: climate.living_room
  - type: custom:bubble-card
    card_type: separator
    name: Lights
    icon: mdi:ceiling-light-multiple-outline
  - type: horizontal-stack
    cards:
      - type: custom:bubble-card
        card_type: button
        button_type: slider
        entity: light.entrance
        show_state: true
        icon: mdi:desk-lamp
      - type: custom:bubble-card
        card_type: button
        entity: light.standing
        show_state: true
        button_type: slider
        icon: mdi:floor-lamp-torchiere
  - type: horizontal-stack
    cards:
      - type: custom:bubble-card
        card_type: button
        entity: light.tv
        show_state: true
        button_type: slider
        icon: mdi:desk-lamp
      - type: custom:bubble-card
        card_type: button
        entity: light.corner
        show_state: true
        button_type: slider
        icon: mdi:desk-lamp
  - type: custom:bubble-card
    card_type: button
    button_type: slider
    entity: light.ceilling
    show_state: true
    icon: mdi:spotlight-beam
  - type: custom:bubble-card
    card_type: separator
    name: Appliances
  - type: custom:bubble-card
    card_type: button
    entity: vacuum.roborock_s5_max
    icon: mdi:robot-vacuum
  - type: horizontal-stack
    cards:
      - type: custom:mushroom-media-player-card
        entity: media_player.lg_webos_tv_lf652v
      - type: custom:mushroom-media-player-card
        entity: media_player.google_tv
  - type: custom:mushroom-media-player-card
    entity: media_player.sonos_roam_sl_2

Dining room bubble card:

image

type: vertical-stack
cards:
  - type: custom:bubble-card
    card_type: pop-up
    hash: '#dining-room'
    name: Dining room
    icon: phu:rooms-dining
    entity: light.dining_room_light
    state: sensor.dining_room_temperature
    state_unit: °C
    width_desktop: 600px
    margin_top_mobile: 18px
    margin_top_desktop: 74px
    auto_close: 15000
  - type: custom:mushroom-climate-card
    entity: climate.dining_room
  - type: custom:bubble-card
    card_type: separator
    name: Lights
    icon: mdi:ceiling-light-multiple-outline
  - type: horizontal-stack
    cards:
      - type: custom:bubble-card
        card_type: button
        button_type: switch
        entity: light.left
        show_state: true
        icon: mdi:ceiling-light
      - type: custom:bubble-card
        card_type: button
        entity: light.right
        show_state: true
        button_type: switch
        icon: mdi:ceiling-light
  - type: custom:bubble-card
    card_type: button
    entity: light.rice_lights
    show_state: true
    button_type: slider
    icon: mdi:string-lights
  - type: custom:bubble-card
    card_type: separator
    name: Appliances
  - type: custom:bubble-card
    card_type: button
    entity: media_player.display_me
    icon: phu:nest-hub

Kitchen bubble card:

image

type: vertical-stack
cards:
  - type: custom:bubble-card
    card_type: pop-up
    hash: '#kitchen'
    name: Kitchen
    icon: mdi:fridge
    entity: light.kitchen
    state: sensor.kitchen_temperature
    state_unit: °C
    width_desktop: 600px
    margin_top_mobile: 18px
    margin_top_desktop: 74px
    auto_close: 15000
  - type: custom:bubble-card
    card_type: separator
    name: Lights
    icon: mdi:ceiling-light-multiple-outline
  - type: horizontal-stack
    cards:
      - type: custom:bubble-card
        card_type: button
        button_type: switch
        entity: light.kitchen_countertop
        show_state: true
        icon: mdi:floor-lamp-outline
      - type: custom:bubble-card
        card_type: button
        entity: light.oven
        show_state: true
        button_type: slider
        icon: mdi:ceiling-light
  - type: horizontal-stack
    cards:
      - type: custom:bubble-card
        card_type: button
        entity: light.sink
        show_state: true
        button_type: slider
        icon: mdi:ceiling-light
      - type: custom:bubble-card
        card_type: button
        entity: light.fridge
        show_state: true
        button_type: slider
        icon: mdi:ceiling-light
  - type: custom:bubble-card
    card_type: separator
    name: Appliances
  - type: horizontal-stack
    cards:
      - type: custom:bubble-card
        card_type: button
        entity: switch.shelly_shplg_s_b4944b
        icon: mdi:dishwasher
      - type: custom:bubble-card
        card_type: button
        entity: switch.shelly_shplg_s_01e22b
        icon: mdi:washing-machine
@BeardedTinker BeardedTinker self-assigned this Oct 18, 2023
@BeardedTinker BeardedTinker added documentation Improvements or additions to documentation Enhancement New feature or request HACS Home Assistant Community Store labels Oct 18, 2023
@BeardedTinker
Copy link
Owner Author

Zita Room bubble card:

image

type: vertical-stack
cards:
  - type: custom:bubble-card
    card_type: pop-up
    hash: '#zita-room'
    name: Zita room
    icon: mdi:alpha-z
    entity: light.zita_room_lights
    state: sensor.zita_room_temperature
    state_unit: °C
    width_desktop: 600px
    margin_top_mobile: 18px
    margin_top_desktop: 74px
    auto_close: 15000
    trigger_entity: binary_sensor.contact_motion_detected
  - type: custom:mushroom-climate-card
    entity: climate.zita_room
  - type: custom:bubble-card
    card_type: separator
    name: Lights
    icon: mdi:ceiling-light-multiple-outline
  - type: horizontal-stack
    cards:
      - type: custom:bubble-card
        card_type: button
        button_type: slider
        entity: light.zita_desk_lights_2
        show_state: true
        icon: mdi:desk-lamp
      - type: custom:bubble-card
        card_type: button
        entity: light.zita_tabletop
        show_state: true
        button_type: slider
        icon: phu:light-string
  - type: horizontal-stack
    cards:
      - type: custom:bubble-card
        card_type: button
        entity: light.zita_ceiling
        show_state: true
        button_type: slider
        icon: mdi:ceiling-light
      - type: custom:bubble-card
        card_type: button
        entity: light.zita_desk_light
        show_state: true
        button_type: slider
        icon: mdi:string-lights
  - type: custom:bubble-card
    card_type: separator
    name: Appliances
  - group: true
    hide:
      controls: true
    icon: phu:home-mini
    icon_state: true
    tts:
      language: hr-hr
      platform: microsoft
    type: custom:mini-media-player
    entity: media_player.mini_me

@BeardedTinker
Copy link
Owner Author

Balcony Bubble Card - with Camera pop-up:

image

type: vertical-stack
cards:
  - type: custom:bubble-card
    card_type: pop-up
    hash: '#balcony'
    name: Balcony
    icon: mdi:bee-flower
    entity: light.balcony_light
    state: sensor.balcony_temperature
    auto_close: '15000'
    trigger_entity: binary_sensor.not_door_contact
    trigger_state: 'on'
    trigger_close: true
  - type: custom:bubble-card
    card_type: separator
    name: CCTV
  - show_state: true
    show_name: true
    camera_view: auto
    type: picture-entity
    entity: camera.ebroz920_lift
    image: https://demo.home-assistant.io/stub_config/bedroom.png

@BeardedTinker
Copy link
Owner Author

Example from video of Bubble card:

image

type: vertical-stack
cards:
  - type: custom:bubble-card
    card_type: pop-up
    hash: '#livingroom'
    name: Living room
    icon: mdi:sofa
    entity: light.living_room_2
    state: sensor.living_room_temperature
    auto_close: '15000'
  - type: custom:bubble-card
    card_type: separator
    name: Lights
    icon: phu:bulb-group
  - type: horizontal-stack
    cards:
      - type: custom:bubble-card
        card_type: button
        entity: light.standing
        icon: mdi:floor-lamp
      - type: custom:bubble-card
        card_type: button
        entity: light.tv
        icon: mdi:desk-lamp
  - type: custom:bubble-card
    card_type: button
    entity: light.ceilling
    button_type: slider
    icon: mdi:ceiling-light-multiple
  - type: custom:mushroom-climate-card
    entity: climate.living_room
  - type: custom:bubble-card
    card_type: cover
    entity: cover.zita_curtain
  - type: custom:bubble-card
    card_type: separator
    name: Appliances
  - type: horizontal-stack
    cards:
      - type: custom:bubble-card
        card_type: button
        entity: switch.shelly_shplg_s_01e22b
      - type: custom:bubble-card
        card_type: button
        entity: switch.shelly_shplg_s_b86647

@filikun
Copy link

filikun commented Nov 7, 2023

What theme are you using? I'm trying the Google Dark theme but It doesn't get the popup to look like yours.

@BeardedTinker
Copy link
Owner Author

That's original HA Dark Theme. Previously used Google, but not anymore.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@BeardedTinker BeardedTinker

Labels
documentation Improvements or additions to documentation Enhancement New feature or request HACS Home Assistant Community Store
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@filikun @BeardedTinker