更优雅的彩云天气[信息丰富][使用简单]更新卡片

秋流年

大佬 前端如何调用啊

scrapland

目前个人手动配置的方法：
1.将colorfulclouds插件放入custom_components文件夹下；
2.将前端卡片lovelace-colorfulclouds-weather-card放入www\custom-lovelace文件夹下；
3.编辑configuration.yaml文件，加入以下代码：

# 启用lovelace界面
lovelace:
  mode: yaml
  resources:
    - type: module
      url: /local/custom-lovelace/lovelace-colorfulclouds-weather-card/colorfulclouds-weather-card.js

复制代码

4.编辑ui-lovelace.yaml文件，加入以下代码：

cards:
  - type: 'custom:weather-card'
    entity: weather.wo_de_jia
  - type: 'custom:weather-more-info'
    entity: weather.wo_de_jia

复制代码

5.在配置->集成里点“+”，搜索添加colorfulclouds。
目前碰到的问题是卡片显示不了天气图标，不知道是什么原因，尝试修改\www\custom-lovelace\lovelace-colorfulclouds-weather-card\colorfulclouds-weather-card.js文件的icon链接，还是不行，求泛艺大佬解惹，谢谢啦！

 <ha-card>
        <span
          class="icon bigger"
          style="background: none, url(/hacsfiles/lovelace-colorfulclouds-weather-card/icons/animated/${stateObj.attributes.skycon}.svg) no-repeat; background-size: contain;"
          >${stateObj.state}
        </span>

复制代码

改成

 <ha-card>
        <span
          class="icon bigger"
          style="background: none, url(/local/custom-lovelace/lovelace-colorfulclouds-weather-card/icons/animated/${stateObj.attributes.skycon}.svg) no-repeat; background-size: contain;"
          >${stateObj.state}
        </span>

复制代码

因为不是HACS安装，将以上路径改了还是不行。

fineemb

scrapland 发表于 2020-10-9 14:53
目前个人手动配置的方法：
1.将colorfulclouds插件放入custom_components文件夹下；
2.将前端卡片lovelace- ...

首先集成里安装的是后端, 卡片是前端, 后端是获取数据, 卡片是展示数据

卡片,下载最新的版本
然后是安装,既然你显示了说明安装没毛病

然后是配置
你可以在前端右上角,点击编辑仪表盘-然后右下角的＋按钮添加卡片-拉到最下面,查找我这个,然后一路配置

也可以手动写代码配置,如下

type: 'custom:weather-card'
entity: weather.nan_tong
houer_forecast: true
show_forecast: true
icon: /hacsfiles/lovelace-colorfulclouds-weather-card/icons/animated1/
name: ''
secondary_info_attribute: temperature
theme: ''

这里图标有个关键icon的参数填写. 这个路径是相当于www的

按照你放置卡片的位置,大概就是/custom-lovelace/lovelace-colorfulclouds-weather-card/icons/animated/
注意后面的斜杠不能少

scrapland

fineemb 发表于 2020-10-9 16:04
[md]
首先集成里安装的是后端, 卡片是前端, 后端是获取数据, 卡片是展示数据

非常感谢你的回复，我刚刚按你给的方式试一下，还是没办法显示天气图标。

      - type: 'custom:weather-card'
        entity: weather.wo_de_jia
        houer_forecast: true
        show_forecast: true
        icon: /www/custom-lovelace/lovelace-colorfulclouds-weather-card-master/icons/animated/
        name: ''
        secondary_info_attribute: temperature
        theme: ''

复制代码

关于icon的路径，我试了以下3个路径，均无法显示：
icon: /www/custom-lovelace/lovelace-colorfulclouds-weather-card-master/icons/animated/
icon: /local/custom-lovelace/lovelace-colorfulclouds-weather-card-master/icons/animated/
icon: /custom-lovelace/lovelace-colorfulclouds-weather-card-master/icons/animated/
我前端卡片放置的路径如下：
\docker\homeassistant\www\custom-lovelace\lovelace-colorfulclouds-weather-card-master\

fineemb

你把animated这个文件夹复制到www里面, 使用/local/animated/看看能不能访问

scrapland

fineemb 发表于 2020-10-9 18:58
你把animated这个文件夹复制到www里面, 使用/local/animated/看看能不能访问

死活不行，还是显示不了天气图标

物理科代

这个可以

fineemb

scrapland 发表于 2020-10-9 19:31
死活不行，还是显示不了天气图标

那我觉得不是卡片的问题了. www这个文件夹你能正常作为web目录访问吗?

zwbjsnt

fineemb 发表于 2020-10-10 21:04
那我觉得不是卡片的问题了. www这个文件夹你能正常作为web目录访问吗?

大佬lovelace手动配置的 yaml应该怎么写

fineemb

zwbjsnt 发表于 2020-10-10 21:23
大佬lovelace手动配置的 yaml应该怎么写

最新版配置

type: 'custom:weather-card'
entity: weather.nan_tong
houer_forecast: true
show_forecast: true
icon: /hacsfiles/lovelace-colorfulclouds-weather-card/icons/animated1/
name: ''
secondary_info_attribute: temperature
theme: ''