◪ Origami Weather (a weather card)

[shpongledsummer]

At the beginning of this year I started this weather card project and it kind of turned into a hobby. It started as “Atmospheric Weather Card” and lately got renamed to “Origami Weather”. Basically it turned into a weather card builder that allows all kinds of layouts. The style tries to be tasteful and you can customize pretty much anything.

• full flexbox approach, very flexible layouts, and you can embed other HA cards
• visual builder
• animated SVG weather icons included, plus different layouts to choose from (if you don’t feel like making one yourself)
• optional weather animations and effects
• optional special effects like birds or balloons
• bars with unlimited markers, comfort range, color steps and more
• scrollable and conditional content
• lots of background options (weather images, dynamic colors, default HA card style and more)
• performance oriented: low fps, clouds are just one single image asset, tricks like static background stars, effects can be turned off, stuff like that. A ridiculous amount of time went into finding ways to keep it light.

GitHub - hazymorning/origami_weather: A weather card for Home Assistant

[davidnestico]

I like it but wish it took the full space in bubble-card popup cards, maybe my setup is just wrong and Im not doing it right

type: custom:origami-weather
weather_entity: weather.vaughan_forecast
sun_entity: sun.sun
moon_phase_entity: sensor.moon_phase
sun_moon_x: 80
color_mode: theme
card_height: 150px
card_padding: 0px
background_mode: none
card_tap_action:
  action: more-info
card_frame: false
full_width: true
full_width_margin: 0px
edge_fade: true
edge_fade_size: 10%
icon_path: /local/animated_weather_icons/
grid_options:
  rows: auto
  columns: 12
button_containers:
  - buttons:
      - entity: weather.vaughan_forecast
        elements:
          - type: icon
            icon: weather
            icon_background: false
            margin: 0 2px 0 0
          - type: text
            precision: 0
            entity: weather.vaughan_forecast
            attribute: temperature
            weight: '700'
            fancy_unit: true
            size: 40px
            padding: 0px
        background: false
        text_shadow: true
        style: inline
        padding: 0px
    padding: 4px
    button_text_size: 26px
    margin: 0 0 32px 0
    button_gap: 6px
    button_style: vertical
  - background: true
    position: bottom-left
    gap: 8px
    button_gap: 6px
    button_icon_size: 14px
    button_padding: 8px 12px 8px 10px
    align: center
    button_text_size: 12px
    background_color: rgba(255,255,255,0.1)
    width: 100%
    blurred_background: true
    buttons:
      - entity: weather.vaughan_forecast
        elements:
          - type: text
            text: Today
            weight: '700'
            size: 14px
          - type: icon
            icon: weather
          - type: text
            format: °
            weight: '700'
            attribute: temperature
        forecast: daily
        blurred_background: true
        text_shadow: true
      - entity: sun.sun
        elements:
          - type: icon
            icon: mdi:weather-sunset-up
          - type: text
            attribute: next_rising
            weight: '700'
        visibility:
          - condition: state
            entity: sun.sun
            state: below_horizon
        blurred_background: true
      - entity: weather.vaughan_forecast
        elements:
          - type: icon
            icon: mdi:sun-wireless-outline
          - type: text
            weight: '700'
            entity: sensor.vaughan_uv_index
        forecast: daily
        blurred_background: true
      - entity: weather.vaughan_forecast
        elements:
          - type: icon
            icon: mdi:weather-windy
          - type: text
            format: ' km/h'
            weight: '700'
            entity: sensor.vaughan_wind_speed
        style: inline
        blurred_background: true
      - entity: sun.sun
        elements:
          - type: icon
            icon: mdi:weather-sunset-down
          - type: text
            attribute: next_setting
            weight: '700'
        visibility:
          - condition: state
            entity: sun.sun
            state: above_horizon
        blurred_background: true
      - entity: weather.vaughan_forecast
        elements:
          - type: icon
            icon: mdi:water-percent
          - type: text
            weight: '700'
            attribute: humidity
            format: ' %'
        style: inline
        blurred_background: true
    button_background_color: rgba(189,189,189,0.2)
    layout: horizontal-scroll
    scroll_fade: true

[shpongledsummer]

Hi Bubble popups have a lot of containers and the card cannot be bigger than the container holding it. So if you have padding on the popup, that padding limits how wide the weather card can be.

You can try adding this to the bubble popup styles section as a workaround. This removes the popup padding and allows a full-width card, but it also means you need to give the other content its own padding so it looks right again.

.bubble-pop-up-container {
    padding: 0px !important;
}