滚动栏消息

benlky

求助，在界面中 一直循环滚动播放一些消息，是用什么卡片实现的呢？

明明洋洋

持续关注

benlky

明明洋洋 发表于 2024-4-2 16:19
持续关注

搞定了。

自定义了一个 滚动栏的卡片，然后在绑定要显示的实体到这个卡片就好了。

这个实体可以是静态的，也可以是捕捉家中某个实体，如温度，开灯数量

benlky

benlky 发表于 2024-4-2 16:41
搞定了。

自定义了一个 滚动栏的卡片，然后在绑定要显示的实体到这个卡片就好了。

class ScrollingTextCard extends HTMLElement {
  setConfig(config) {
    if (!config.entity) {
      throw new Error('You need to define an entity');
    }

    const root = this.attachShadow({ mode: 'open' });
    const cardConfig = Object.assign({}, config);

    const style = document.createElement('style');
    style.textContent = `
      .scrolling-text-container {
        width: 100%; /* Set the width of the container */
        height: 50px; /* Set the height of the container */
        overflow: hidden; /* Hide overflowing content */
        position: relative; /* Position relative to allow absolute positioning of the scrolling text */
      }
      
      .scrolling-text {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        animation: scroll-left 15s linear infinite;
        position: absolute; /* Position the text absolutely within the container */
        top: 0; /* Position the text at the top of the container */
        left: 0; /* Position the text at the left of the container */
      }

      @keyframes scroll-left {
        0% { transform: translateX(100%); }
        100% { transform: translateX(-100%); }
      }
    `;
    root.appendChild(style);

    const container = document.createElement('div');
    container.className = 'scrolling-text-container';
    root.appendChild(container);

    const textElement = document.createElement('div');
    textElement.className = 'scrolling-text';
    container.appendChild(textElement);

    this._config = cardConfig;
    this._root = root;
    this._textElement = textElement;
  }

  set hass(hass) {
    const entityId = this._config.entity.split('.')[1];
    const state = hass.states[this._config.entity];
    this._textElement.textContent = state ? state.state : 'Entity not found';
  }

  disconnectedCallback() {
    this._root.innerHTML = '';
  }
}

customElements.define('scrolling-text-card', ScrollingTextCard);

复制代码

明明洋洋

benlky 发表于 2024-4-2 16:44

太强了吧这么快就解决了问题，可以说详细一点这些代码写在哪里吗

benlky

明明洋洋 发表于 2024-4-2 17:06
太强了吧这么快就解决了问题，可以说详细一点这些代码写在哪里吗

创建一个JavaScript文件: scrolling-text-card.js，并保存到你的Home Assistant配置文件夹中的www目录下。

然后在仪表盘的资源里面添加好路劲.

之后在configuration.yaml 中添加一个input_text 的实体

input_text:
  scrolling_text:
    name: Scrolling Text
    initial: "Your scrolling text here"

复制代码

之后就可以像其他卡片一样使用了

a_dongde

这个是自定义卡片吧？需要用自定义UI界面调用，原始UI面板无法使用的

明明洋洋

                               
登录/注册后可看大图

大佬你看这是哪里出错了

明明洋洋

明明洋洋 发表于 2024-4-2 18:19
大佬你看这是哪里出错了

                               
登录/注册后可看大图

benlky

明明洋洋 发表于 2024-4-2 18:21

你发的图片吗？ 一直无法加载出来