本帖最后由 plutosherry 于 2019-1-29 21:45 编辑
彩云天气 动态图标完整版【Caiyun Weather for lovelace】更新信息见2楼
此自定义card仅支持lovelace，如何启用lovelace请问囧神 ，毕竟是他举办UI设计活动带大家入的坑啊，啊哈哈哈！！！
目前暂时先发布一个mini版本的，完整版（rest版因自定义forecast问题）还在修改中。mini版UI修改自darksky模板，不明白什么是darksky的可自行前往 Homeassistant.io 搜索了解。
惯例先上图：
彩云mini版
图中左侧就是darksky的模板，右侧是依照此修改的动态天气图标模板。
一、下载压缩包文件（见文末）并按指定路径覆盖（有能力修改代码的童靴可自行编辑 caiyun-weather-card-mini.js 修改相关文件的路径）
相关文件存放位置如下：
自定义card文件：www/lovelace_ui/resources/caiyun-weather-card-mini.js
样式表文件：www/lovelace_ui/resources/caiyun-weather-card-mini.css
天气动态图标：www/lovelace_ui/images/weather_animated_icons （目前只引用部分图标，其余图标的引用将在彩云官方V4版api后才会支持）
彩云天气插件：custom_components/weather/caiyunweather.py
主文件配置：ui-lovelace.yaml
二、由于mini版采用自定义插件获取天气数据，所以需要配置一下configuration.yaml（当然需要重启生效！！！）
weather:
- platform: caiyunweather
api_key: [color=#ff0000] <--------------（API请修改成你自己的，什么？不会申请?去彩云官网申请免费开发者账号即可获取免费API_token）[/color]
latitude: 30.704655 # {{states.zone.home.attributes.latitude}}
longitude: 111.27620636 # {{states.zone.home.attributes.longitude}}
三、部分文件内容修改位置说明
当然是需要配置一下lovelace了，如此才能生效card呀！
在ui-lovelace.yaml中添加如下信息：（resource自然是必须的！！如果已经有views部分请直接添加其下的type即可！！）
resources:
- url: /local/lovelace_ui/resources/caiyun-weather-card-mini.js [color=#ff0000] <--------------（如需修改文件路径，请修改此处）[/color]
type: module
title: MYHOME
views:
- title: HEADER
icon: 'mdi:menu'
badges: []
cards:
- type: custom:caiyun-weather-card-mini
title: '彩云天气'
location: '湖北宜昌'
entity_sun: sun.sun
weather: weather.caiyunweather
这是自定义card的文件内容：
caiyun-weather-card-mini.js
class CaiyunWeatherCardChart extends HTMLElement {
set hass(hass) {
if (!this.content) {
const card = document.createElement('ha-card');
const link = document.createElement('link');
link.type = 'text/css';
link.rel = 'stylesheet';
link.href = '/local/lovelace_ui/resources/caiyun-weather-card-mini.css'; [color=#ff0000] <--------------（如需修改文件路径，请修改此处）[/color]
card.appendChild(link);
this.content = document.createElement('div');
this.content.className = 'card';
card.appendChild(this.content);
this.appendChild(card);
}
const sunriseTime = function(time) {
const date = new Date(time);
return date.toLocaleTimeString([],
{ hour:'2-digit', minute:'2-digit' }
);
}
var weekday = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
const weatherIcons = {
'sunny': 'day',
'clear-night': 'night',
'partlycloudyday': 'cloudy-day-3',
'partlycloudynight': 'cloudy-night-3',
'cloudy': 'cloudy',
'rainy': 'rainy-6',
'snowy': 'snowy-6',
'windy': 'cloudy',
'fog': 'cloudy',
};
const weatherState = {
'sunny': '晴天',
'clear-night': '晴夜',
'partlycloudyday': '多云',
'partlycloudynight': '多云',
'cloudy': '阴',
'rainy': '雨',
'snowy': '雪',
'windy': '风',
'fog': '雾'
};
const windDirections = [
'北风',
'东北偏北风',
'东北风',
'东北偏东风',
'东风',
'东南偏东风',
'东南风',
'东南偏南风',
'南风',
'西南偏南风',
'西南风',
'西南偏西风',
'西风',
'西北偏西风',
'西北风',
'西北偏北风',
'北风'
];
const weatherObj = hass.states[this.config.weather];
const title = this.config.title;
const location = this.config.location;
const currentCondition = weatherObj.state;
const temperature = Math.round(weatherObj.attributes.temperature);
const humidity = Math.round(weatherObj.attributes.humidity);
const windbearing = windDirections[Math.round((weatherObj.attributes.wind_bearing / 360) * 16)];
const sunObj = hass.states[this.config.entity_sun];
const forecast = weatherObj.attributes.forecast.slice(1, 5);
this.content.innerHTML = `
<ha-card header="${title}" class="ha-card">
<div class="card">
<div class="icon bigger" style="background: none, url(/local/lovelace_ui/images/weather_animated_icons/${weatherIcons[currentCondition]}.svg) no-repeat; background-size: contain;"></div>
<div class="te">
<li class="tempsize">${temperature}<span class="aunit2">°</span></li>
<li class="xiii"><iron-icon icon="mdi:weather-sunset-up"></iron-icon>${sunriseTime(sunObj.attributes.next_rising)}</li>
<li class="xiio"><iron-icon icon="mdi:weather-sunset-down"></iron-icon>${sunriseTime(sunObj.attributes.next_setting)}</li>
</div>
<div class="variations">
<li><iron-icon icon="mdi:compass"></iron-icon>${location}</li>
<br>
<li class="xii"><iron-icon icon="mdi:weather-windy"></iron-icon>${windbearing}<li>
<li class="xii"><iron-icon icon="mdi:water-percent"></iron-icon>${humidity}
<span class="unit">%</span></li>
</div>
<div class="clear2">
${forecast.map(daily => `
<div class="day">
<span class="dayname">${weekday[new Date((daily.datetime).toString().split(' ')[0]).getDay()]}</span>
<br><i class="icon" style="background: none, url(/local/lovelace_ui/images/weather_animated_icons/${weatherIcons[daily.condition]}.svg) no-repeat; background-size: contain;"></i>
<br><span class="highTemp">${daily.temperature}°/${daily.templow}°</span>
<br><iron-icon icon="mdi:weather-rainy"></iron-icon><span class="highTemp">${daily.precipitation}</span><span class="unit">mm</span>
</div>`).join('')}
</div>
</div>
</ha-card>
`;
}
setConfig(config) {
if (!config.weather || !config.title) {
throw new Error('Please define entities');
}
this.config = config;
this.title = config.title;
}
getCardSize() {
return 1;
}
}
customElements.define('caiyun-weather-card-mini', CaiyunWeatherCardChart);
四、到此为止是不是很容易就完成了？配完了就开心的玩耍吧
最后，本人非专业程序猿，业余爱好之余就改了这么个东东，希望各位能够喜欢，你们的支持是我最大的动力
| 
发表于 2019-1-23 11:47:47
楼主
