Ticker anyone? (Example code)

Share your Projects!
1

Hello people. It’s been a while but here is another code goodie for you guys and gals. Enjoy the copy and past for some magic. :grin:

type: custom:html-card
content: |
  <div class="ticker-wrap">
    <div class="ticker">
      <span class="item-list-1">
        <span class="item">Home Assistant rocks because it's community ROCKS!</span>
        <span class="item">Come get this AWESOME ticker!</span>
        <span class="item">[[sun.sun.attributes.elevation]]</span>
    </div>
  <div>
style: |
  ha-card {
    background: none;
    height: 10px;
    color: white;
    font-family: Zen Dots;
    font-size: 30px;
  }
  body { margin: 0; }
  .ticker-wrap {
    width: 100%;
    height: 80px;
    margin: 0 auto;
    overflow: hidden;
    white-space: nowrap;
    position: fixed;
    bottom: 0;
    height: 3.5rem;
  }
  .ticker {
    display: inline-block;
    margin-top: 5px;
    animation: marquee 30s linear infinite;
  }
  .item-list {
    position: relative;
    left: 0%;
    animation: swap 20s linear infinite;
  }

  .item {
    display: inline-block;
    padding: 0 1rem;
  }

  /* Transition */
  @keyframes marquee {
    0% {
      transform: translateX(0)
    }
    100% {
    transform: translateX(-100%)
    }
  }

  @keyframes swap {
    0%, 50% {
      left: 0%;
    }
    50.01%,
    100% {
      left: 100%;
    }
  }
view_layout:
  position: main
1 Like
2

Thanks for sharing, any idea how I can display the attribute of a sensor?, FYI, the Come get this AWESOME ticker! doesn’t display using your config.

3

Fixed. :+1: Check the 3rd content line. I included sun state for you.

4

Thanks, I was able to get the basic attribute, but the following doesn’t work, is that not valid?

[[states.weather.home.attributes.forecast[1].condition]]
5

create a sensor.weather_ticker_example that pulls that condition and then use it like this <span class="item">[[sensor.weather_ticker_example]]</span> instead.`

- platform: template
  sensors:
    weather_ticker_example:
      value_template: "{{ states.weather.home.attributes.forecast[1].condition }}"
1 Like
6

Hey, it’s been quite a while, not sure if you’re still using this, it still works great except for when the sensor is null (see below), is there anyway to disable/silence the ticker or display a generic message when the sensor is null?

image
image705×83 2.31 KB

7

Does it still work in 2024 (HA v2024.2.5) and with the current html-card?

Tried to add it to dashboard and I get:

obraz
obraz977×225 81.6 KB

dennisaion, any hint?

8

There’s no style param in html-card, I had to change style: to <style>...</style> and then it started to work.
However, I had to rework the idea - please check here for 2024 version: Ticker - reworked 2024