请选择 进入手机版 | 继续访问电脑版

『瀚思彼岸』» 智能家居技术论坛

 找回密码
 立即注册
查看: 1624|回复: 27

[已解决] 滚动栏消息

[复制链接]

5

主题

68

帖子

358

积分

中级会员

Rank: 3Rank: 3

积分
358
金钱
290
HASS币
0
发表于 2024-4-2 11:04:38 | 显示全部楼层 |阅读模式
本帖最后由 benlky 于 2024-4-8 09:39 编辑


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

使用道具 举报

2

主题

116

帖子

811

积分

高级会员

Rank: 4

积分
811
金钱
695
HASS币
0
发表于 2024-4-2 16:19:33 来自手机 | 显示全部楼层
持续关注
回复

使用道具 举报

5

主题

68

帖子

358

积分

中级会员

Rank: 3Rank: 3

积分
358
金钱
290
HASS币
0
 楼主| 发表于 2024-4-2 16:41:41 | 显示全部楼层

搞定了。

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

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

使用道具 举报

5

主题

68

帖子

358

积分

中级会员

Rank: 3Rank: 3

积分
358
金钱
290
HASS币
0
 楼主| 发表于 2024-4-2 16:44:45 | 显示全部楼层
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);


回复

使用道具 举报

2

主题

116

帖子

811

积分

高级会员

Rank: 4

积分
811
金钱
695
HASS币
0
发表于 2024-4-2 17:06:12 | 显示全部楼层

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

使用道具 举报

5

主题

68

帖子

358

积分

中级会员

Rank: 3Rank: 3

积分
358
金钱
290
HASS币
0
 楼主| 发表于 2024-4-2 17:30:50 | 显示全部楼层
明明洋洋 发表于 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"


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

使用道具 举报

22

主题

599

帖子

2659

积分

金牌会员

Rank: 6Rank: 6

积分
2659
金钱
2060
HASS币
0
发表于 2024-4-2 17:31:15 | 显示全部楼层
这个是自定义卡片吧?需要用自定义UI界面调用,原始UI面板无法使用的
回复

使用道具 举报

2

主题

116

帖子

811

积分

高级会员

Rank: 4

积分
811
金钱
695
HASS币
0
发表于 2024-4-2 18:19:55 | 显示全部楼层

                               
登录/注册后可看大图

大佬你看这是哪里出错了
回复

使用道具 举报

2

主题

116

帖子

811

积分

高级会员

Rank: 4

积分
811
金钱
695
HASS币
0
发表于 2024-4-2 18:21:24 | 显示全部楼层
明明洋洋 发表于 2024-4-2 18:19
大佬你看这是哪里出错了


                               
登录/注册后可看大图

回复

使用道具 举报

5

主题

68

帖子

358

积分

中级会员

Rank: 3Rank: 3

积分
358
金钱
290
HASS币
0
 楼主| 发表于 2024-4-2 22:54:41 | 显示全部楼层

你发的图片吗? 一直无法加载出来
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Archiver|手机版|小黑屋|Hassbian

GMT+8, 2024-10-12 11:06 , Processed in 0.175800 second(s), 32 queries .

Powered by Discuz! X3.4

Copyright © 2001-2021, Tencent Cloud.

快速回复 返回顶部 返回列表