编辑：2019年3月3日
深蓝天气卡
黑暗的天气卡使用深浅平台提供当前和预测的天气条件。您可以通过从黑暗的天空传感器平台传输传感器实体来配置卡。
该卡是非常可定制的。您可以通过传递定制标志和定义可选传感器来配置它的外观和景点的许多方面以及所展示的许多方面。如果需要，也可以重新排列内容。
如果已启用该选项，将在预测日悬停在预测日将在工具提示弹出中显示日常天气摘要。
可以找到完整的自述文件这里。它包含有关如何设置卡以及如何使用各种功能的最新说明。
可以找到最新版本的卡这里。
GitHub网站是这里。请使用GitHub问题来请求新功能，因为它使它们更容易跟踪。
原帖：
仅供参考。
请参阅上面的链接到当前卡和说明书
几个人询问了使用非常好的自定义动画天气卡@arsaboo.有黑暗的天空。我根据我的需求修改了这张卡片。- 所有信用都是创建原创的人和那些修改它的人，以便将其赶到我能够破解的东西。
我的修改版使用Dark Sky Sensor平台如下所示：
传感器.YAML代码：
- 平台：Darksky API_KEY：预测： - 1 - 2 - 3 - 4 - 5 Monitored_Conditions： - 图标 - 摘要 - 最近的_storm_Beartance - 湿度 - 温度 - 温度 - 温度 - 温度 - 温度_温度 - Apparent_Temperature - Apparent_temperature - ThaneNt_temperature_High -PROCIP_TYPE - PROCIT_PROBABITY - PROCIT_ACCUMULATION - PROCIT_INTESSICS - PROCIT_INTESS_MAX - UV_INDEX - DAIL_SUMM_SUMMARY - 压力 - 可见性UPDATE_INTERVAL：分钟：5
我通过传感器实体卡需要。注意预测_Low_Temp实体被交错了1.这将在特定日子的早晨使用低温，这与Dark Sky App显示它的方式匹配。
注意：下面列出的所有实体都是必需的。
ui-lovelace.yaml代码：
- 类型：定制：黑暗天空全天候卡entity_sun：sun.sun entity_daily_summary：sensor.dark_sky_daily_summary entity_current_conditions：sensor.dark_sky_icon entity_humidity：sensor.dark_sky_humidity entity_pressure：sensor.dark_sky_pressure entity_temperature：sensor.dark_sky_temperature entity_visibility：sensor.dark_sky_visibility entity_wind_bearing：传感器。dark_sky_wind_bearing entity_wind_speed: sensor.dark_sky_wind_speed entity_forecast_high_temp_1: sensor.dark_sky_daytime_high_temperature_1 entity_forecast_high_temp_2: sensor.dark_sky_daytime_high_temperature_2 entity_forecast_high_temp_3: sensor.dark_sky_daytime_high_temperature_3 entity_forecast_high_temp_4: sensor.dark_sky_daytime_high_temperature_4 entity_forecast_high_temp_5: sensor.dark_sky_daytime_high_temperature_5 entity_forecast_low_temp_1: sensor.dark_sky_overnight_low_temperature entity_forecast_low_temp_2: sensor.dark_sky_overnight_low_temperature_1 entity_forecast_low_temp_3: sensor.dark_sky_overnight_low_temperature_2 entity_forecast_low_temp_4: sensor.dark_sky_overnight_low_temperature_3 entity_forecast_low_temp_5: sensor.dark_sky_overnight_low_temperature_4 entity_forecast_icon_1: sensor.dark_sky_icon_1 entity_forecast_icon_2: sensor.dark_sky_icon_2 entity_forecast_icon_3: sensor.dark_sky_icon_3 entity_forecast_icon_4: sensor.dark_sky_icon_4 entity_forecast_icon_5: sensor.dark_sky_icon_5
我绝不是JavaScript开发人员。我没有声称，我走近的方式是最好的甚至是一种好方法。它适合我，这就是我所开放的工作
黑暗天气卡.JS：
class DarkSkyWeatherCard 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/custom_ui/dark-sky-weather-card.css';card.appendchild（链接）;这个.Content = document.createelement（'div'）;this.content.className =“卡”;card.appendChild (this.content);this.appendChild(卡); } const getUnit = function (measure) { const lengthUnit = hass.config.core.unit_system.length; switch (measure) { case 'air_pressure': return lengthUnit === 'km' ? 'hPa' : 'inHg'; case 'length': return lengthUnit; case 'precipitation': return lengthUnit === 'km' ? 'mm' : 'in'; default: return hass.config.core.unit_system[measure] || ''; } }; const transformDayNight = { "below_horizon": "night", "above_horizon": "day", } const sunLocation = transformDayNight[hass.states[this.config.entity_sun].state]; const weatherIcons = { 'clear-day': 'day', 'clear-night': 'night', 'rain': 'rainy-5', 'snow': 'snowy-6', 'sleet': 'rainy-6', 'wind': 'cloudy', 'fog': 'cloudy', 'cloudy': 'cloudy', 'partly-cloudy-day': 'cloudy-day-3', 'partly-cloudy-night': 'cloudy-night-3', 'hail': 'rainy-7', 'lightning': 'thunder', 'thunderstorm': 'thunder', 'windy-variant': `cloudy-${sunLocation}-3`, 'exceptional': '!!', } const windDirections = [ 'N', 'NNE', 'NE', 'ENE', 'E', 'ESE', 'SE', 'SSE', 'S', 'SSW', 'SW', 'WSW', 'W', 'WNW', 'NW', 'NNW', 'N' ]; var forecastDate1 = new Date(); forecastDate1.setDate(forecastDate1.getDate()+1); var forecastDate2 = new Date(); forecastDate2.setDate(forecastDate2.getDate()+2); var forecastDate3 = new Date(); forecastDate3.setDate(forecastDate3.getDate()+3); var forecastDate4 = new Date(); forecastDate4.setDate(forecastDate4.getDate()+4); var forecastDate5 = new Date(); forecastDate5.setDate(forecastDate5.getDate()+5); const currentConditions = hass.states[this.config.entity_current_conditions].state; const humidity = hass.states[this.config.entity_humidity].state; const pressure = Math.round(hass.states[this.config.entity_pressure].state); const temperature = Math.round(hass.states[this.config.entity_temperature].state); const visibility = hass.states[this.config.entity_visibility].state; const windBearing = windDirections[(Math.round((hass.states[this.config.entity_wind_bearing].state / 360) * 16))]; const windSpeed = Math.round(hass.states[this.config.entity_wind_speed].state); const forecast1 = { date: forecastDate1, condition: this.config.entity_forecast_icon_1, temphigh: this.config.entity_forecast_high_temp_1, templow: this.config.entity_forecast_low_temp_1, }; const forecast2 = { date: forecastDate2, condition: this.config.entity_forecast_icon_2, temphigh: this.config.entity_forecast_high_temp_2, templow: this.config.entity_forecast_low_temp_2, }; const forecast3 = { date: forecastDate3, condition: this.config.entity_forecast_icon_3, temphigh: this.config.entity_forecast_high_temp_3, templow: this.config.entity_forecast_low_temp_3, }; const forecast4 = { date: forecastDate4, condition: this.config.entity_forecast_icon_4, temphigh: this.config.entity_forecast_high_temp_4, templow: this.config.entity_forecast_low_temp_4, }; const forecast5 = { date: forecastDate5, condition: this.config.entity_forecast_icon_5, temphigh: this.config.entity_forecast_high_temp_5, templow: this.config.entity_forecast_low_temp_5, }; const forecast = [forecast1,forecast2,forecast3,forecast4,forecast5]; this.content.innerHTML = ` ${currentConditions} ${temperature} ${getUnit('temperature')} - ${humidity} %
- ${pressure} ${getUnit('air_pressure')}
- ${windBearing} ${windSpeed} ${getUnit('length')}/h
- ${visibility} ${getUnit('length')}
${forecast.map(daily => `
${(daily.date).toString().split(' ')[0]}
${Math.round(hass.states[daily.temphigh].state)}${getUnit('temperature')}
${Math.round(hass.states[daily.templow].state)}${getUnit('temperature')}
`).join('')}
${hass.states[this.config.entity_daily_summary].state}`; } setConfig(config) { if (!config.entity_current_conditions || !config.entity_humidity || !config.entity_pressure || !config.entity_temperature || !config.entity_visibility || !config.entity_wind_bearing || !config.entity_wind_speed) { throw new Error('Please define entities'); } this.config = config; } // @TODO: This requires more intelligent logic getCardSize() { return 3; } } customElements.define('dark-sky-weather-card', DarkSkyWeatherCard);
黑暗天气卡.CSS
只对CSS文件进行了一个小的变化，所以只会显示更改。更改它的名称以匹配卡并避免与原件的冲突。
.forecast {宽度：100％;边缘：0自动;身高：10em;｝
