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

Clock Weather Card - cut off #325

Open
markus0123 opened this issue Jan 4, 2025 · 3 comments
Open

Clock Weather Card - cut off #325

markus0123 opened this issue Jan 4, 2025 · 3 comments

Comments

@markus0123
Copy link

After updating from 4.30 to a newer version, the inserted map always disappears. Or rather, it cuts off part of it.

The displayed map with time and weather is the "Clock Weather Card"

Originally I created it after the video
https://youtu.be/ohBRmoOTKW0?si=ZcJDQGLRXiqazJLY

IMG_20250104_192657

wallpanel:
  enabled: true
  hide_toolbar: false
  idle_time: 180
  screensaver_entity: input_boolean.screensaver
  image_url: /
  cards:
    - type: custom:clock-weather-card
      entity: weather.forecast_home
      sun_entity: sun.sun
      temperature_sensor: sensor.stutensee_temperatur
      weather_icon_type: line
      forecast_rows: 0
      locale: de
      time_pattern: HH:mm
      time_format: 24
      date_pattern: cccc, d. MMM yyyy
      hide_today_section: false
      hide_forecast_section: true
      hide_clock: false
      hide_date: false
      card_mod:
        style: |
          ha-card {
            zoom: 475%;
            font-size: 8px;
            width: 250%;
            margin-left: -90%;
            margin-top: 60%;
            background-color: transparent;
            text-shadow: 1px 1px 3px black;
            border: transparent;
          }

Thank you for your help!
@cataseven
Copy link

cataseven commented Jan 19, 2025 •
edited
Loading

same for me (horizontal cut off). Rolled back to v4.31.2

wallpanel:
  enabled: true
  screensaver_entity: input_boolean.screensaver
  fullscreen: true
  idle_time: 30
  image_url: /day
  image_fit: contain
  image_order: sorted
  screensaver_stop_navigation_path: http://192.168.1.46:8123/samsung-tablet/Home
  info_animation_duration_x: 3
  info_animation_duration_y: 7
  info_animation_timing_function_x: linear
  info_animation_timing_function_y: linear
  badges: []
  cards:
    - type: custom:better-moment-card
      moment:
        - format: HH:mm
          parentStyle: |
            font-size:12em;
            font-weight: bold;
            font-family: Acme,sans-serif;
            text-align:center;
        - format: cccc, dd MMMM
          parentStyle: |
            font-size:8em;
            font-weight: bold;
            font-family: Acme,sans-serif;
            text-align:center;
      wp_style:
        grid-row: 1
        width: 1100px
    - type: custom:circle-sensor-card
      entity: sensor.temperature
      units: °
      attribute: raw_state
      font_style:
        color: white
        font-size: 12em
        font-weight: bold
        text-shadow: 0px 0px black
        font-family: Acme,sans-serif
      style:
        top: 30%
        left: 110%
        width: 1px
        height: 100px
      fill: rgba(255, 255, 255, 0)
      stroke_color: rgba(0, 0, 0, 0)
      stroke_bg_width: 0
      wp_style:
        grid-row: 2
  style:
    wallpanel-screensaver-info-box-content:
      '--ha-card-background': none
      '--ha-card-box-shadow': hidden
      '--ha-card-border-width': 0px
      text-shadow: >-
        -0.5px -0.5px 0 rgb(17, 17, 17), 0.5px -0.5px 0 rgb(17, 17, 17), -0.5px
        0.5px 0 rgb(17, 17, 17), 0.5px 0.5px 0 rgb(17, 17, 17)
      '--primary-text-color': '#ffffff'
      '--secondary-text-color': '#dddddd'
    wallpanel-screensaver-info-box:
      '--ha-card-border-width': 0px
  profiles:
    night:
      screensaver_entity: input_boolean.screensaver
      fullscreen: true
      idle_time: 30
      image_url: /night
      image_fit: contain
      image_order: random
      screensaver_stop_navigation_path: http://192.168.1.46:8123/samsung-tablet/Home
      info_animation_duration_x: 10
      info_animation_duration_y: 4
      info_animation_timing_function_x: ease-in-out
      info_animation_timing_function_y: ease-in-out
      badges: []
      cards:
        - type: custom:better-moment-card
          moment:
            - format: HH:mm
              parentStyle: |
                font-size:12em;
                font-weight: bold;
                font-family: Acme,sans-serif;
                text-align:center;
            - format: cccc, dd MMMM
              parentStyle: |
                font-size:8em;
                font-weight: bold;
                font-family: Acme,sans-serif;
                text-align:center;
          wp_style:
            width: 1100px
            grid-row: 1
            border-width': 0px
        - type: custom:circle-sensor-card
          entity: sensor.temperature
          attribute: raw_state
          units: °
          font_style:
            color: white
            font-size: 12em
            text-shadow: 0px 0px black
            font-weight: bold
            font-family: Acme,sans-serif
          style:
            top: 30%
            left: 110%
            width: 1px
            height: 100px
          fill: rgba(255, 255, 255, 0)
          stroke_color: rgba(0, 0, 0, 0)
          stroke_bg_width: 0
          wp_style:
            grid-row: 2
      style:
        wallpanel-screensaver-overlay:
          background: '#000000aa'
        wallpanel-screensaver-info-box-content:
          '--ha-card-background': none
          '--ha-card-box-shadow': hidden
          '--ha-card-border-width': 0px
          text-shadow: >-
            -0.5px -0.5px 0 rgb(17, 17, 17), 0.5px -0.5px 0 rgb(17, 17, 17),
            -0.5px 0.5px 0 rgb(17, 17, 17), 0.5px 0.5px 0 rgb(17, 17, 17)
          '--primary-text-color': '#ffffff'
          '--secondary-text-color': '#dddddd'
        wallpanel-screensaver-info-box:
          '--ha-card-border-width': 0px
  profile: default
  profile_entity: input_select.wallpanel_profile

@cataseven
Copy link

Ok I think I found out the reason. After the update we need to adjust height and line spacing between cards.

I have added these lines and it is working now.
line-height: 200px;
margin-top: '-50px'
and
height: 575px

But maybe you need to fix the issue because this is like a workaround. using "margin-top: '-50px'" is so weird to fix :)))

wallpanel:
  enabled: true
  screensaver_entity: input_boolean.screensaver
  fullscreen: true
  idle_time: 5
  image_url: /day
  image_fit: contain
  image_order: sorted
  screensaver_stop_navigation_path: http://192.168.1.46:8123/samsung-tablet/Home
  info_animation_duration_x: 3
  info_animation_duration_y: 7
  info_animation_timing_function_x: linear
  info_animation_timing_function_y: linear
  badges: []
  cards:
    - type: custom:better-moment-card
      moment:
        - format: HH:mm
          parentStyle: |
            font-size:12em;
            font-weight: bold;
            font-family: Acme,sans-serif;
            text-align:center;
            line-height: 200px;
        - format: cccc, dd MMMM
          parentStyle: |
            font-size:8em;
            font-weight: bold;
            font-family: Acme,sans-serif;
            text-align:center;
      wp_style:
        grid-row: 1
        width: 1100px
    - type: custom:circle-sensor-card
      entity: sensor.temperature
      units: °
      attribute: raw_state
      font_style:
        color: white
        font-size: 12em
        font-weight: bold
        text-shadow: 0px 0px black
        font-family: Acme,sans-serif
      style:
        top: 30%
        left: 110%
        width: 1px
      fill: rgba(255, 255, 255, 0)
      stroke_color: rgba(0, 0, 0, 0)
      stroke_bg_width: 0
      wp_style:
        grid-row: 2
        height: 150px
        margin-top: '-50px'
  style:
    wallpanel-screensaver-info-box-content:
      '--ha-card-background': none
      '--ha-card-box-shadow': hidden
      '--ha-card-border-width': 0px
      text-shadow: >-
        -0.5px -0.5px 0 rgb(17, 17, 17), 0.5px -0.5px 0 rgb(17, 17, 17), -0.5px
        0.5px 0 rgb(17, 17, 17), 0.5px 0.5px 0 rgb(17, 17, 17)
      '--primary-text-color': '#ffffff'
      '--secondary-text-color': '#dddddd'
    wallpanel-screensaver-info-box:
      '--ha-card-border-width': 0px
      height: 575px
  profiles:
    night:
      screensaver_entity: input_boolean.screensaver
      fullscreen: true
      idle_time: 5
      image_url: /night
      image_fit: contain
      image_order: random
      screensaver_stop_navigation_path: http://192.168.1.46:8123/samsung-tablet/Home
      info_animation_duration_x: 10
      info_animation_duration_y: 4
      info_animation_timing_function_x: ease-in-out
      info_animation_timing_function_y: ease-in-out
      badges: []
      cards:
        - type: custom:better-moment-card
          moment:
            - format: HH:mm
              parentStyle: |
                font-size:12em;
                font-weight: bold;
                font-family: Acme,sans-serif;
                text-align:center;
                line-height: 200px;
            - format: cccc, dd MMMM
              parentStyle: |
                font-size:8em;
                font-weight: bold;
                font-family: Acme,sans-serif;
                text-align:center;
          wp_style:
            width: 1100px
            grid-row: 1
            border-width': 0px
        - type: custom:circle-sensor-card
          entity: sensor.temperature
          units: °
          attribute: raw_state
          font_style:
            color: white
            font-size: 12em
            font-weight: bold
            text-shadow: 0px 0px black
            font-family: Acme,sans-serif
          style:
            top: 30%
            left: 110%
            width: 1px
          fill: rgba(255, 255, 255, 0)
          stroke_color: rgba(0, 0, 0, 0)
          stroke_bg_width: 0
          wp_style:
            grid-row: 2
            height: 150px
            margin-top: '-50px'
      style:
        wallpanel-screensaver-overlay:
          background: '#000000aa'
        wallpanel-screensaver-info-box-content:
          '--ha-card-background': none
          '--ha-card-box-shadow': hidden
          '--ha-card-border-width': 0px
          text-shadow: >-
            -0.5px -0.5px 0 rgb(17, 17, 17), 0.5px -0.5px 0 rgb(17, 17, 17),
            -0.5px 0.5px 0 rgb(17, 17, 17), 0.5px 0.5px 0 rgb(17, 17, 17)
          '--primary-text-color': '#ffffff'
          '--secondary-text-color': '#dddddd'
        wallpanel-screensaver-info-box:
          '--ha-card-border-width': 0px
          height: 575px
  profile: default
  profile_entity: input_select.wallpanel_profile

@markus0123
Copy link
Author

I´m sorry, but I dont know where I have to add it. :-(

My skills in ha / yaml are not so good.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@cataseven @markus0123