Bj
Loin de demandé de l’aide , la je me décide à en demande car ca fait X jours que j’essai d’avoir ce résultat.
Mais voici je que j’obtiens dans la case Info 2 sur Tel
Sur PC:
le code de cette carte est
- type: custom:button-card
view_layout:
grid-area: four
template:
- widgets
tap_action:
action: none
styles:
custom_fields:
suntop:
- position: absolute
- top: 2%
- left: 2%
- font-size: 14px
sunbottom:
- position: absolute
- bottom: 2%
- left: 2%
- font-size: 14px
sun:
- position: absolute
- width: 100%
- height: 100%
- top: 0%
custom_fields:
suntop: |
[[[
if (states['sun.sun'].state == 'below_horizon'){
return `<div align="left">
<ha-icon icon="mdi:weather-sunset-up" style="width: 25px; height: px; color:rgb(255,255,255,0.5); padding: 10px;"> </ha-icon>
<b>SOL</b></font><br>
<p style="margin-left:10px; margin-top:-5px; font-size:36px">
${states['sun.sun'].attributes.next_rising.substr(11,5)}
</font></div>
`;
}
else {
return `<div align="left"> <ha-icon
icon="ios:sunset"
style="width: 25px; height: px; color:rgb(255,255,255,0.5); padding: 10px;">
</ha-icon><b>SOL</b></font><br>
<p style="margin-left:10px; margin-top:-5px; font-size:36px">${states['sun.sun'].attributes.next_setting.substr(11,5)}</div>
`;
}
]]]
sunbottom: |
[[[
if (states['sun.sun'].state == 'below_horizon'){
return `<div align="left"> <ha-icon icon="mdi:weather-sunset-down" style="width: 25px; height: px; color:rgb(255,255,255,0.5); padding: 10px;"> </ha-icon></font>
${states['sun.sun'].attributes.next_setting.substr(11,5)}
</div>
`;
}
else {
return `<div align="left"> <ha-icon
icon="mdi:weather-sunset-up"
style="width: 25px; height: px; color:rgb(255,255,255,0.5); padding: 10px;">
</ha-icon></font> ${states['sun.sun'].attributes.next_rising.substr(11,5)}</div>`; }
]]]
sun: |
[[[
return `
<svg width="100%" height="100%">
<defs>
<filter id="f2" x="-50%" y="-50%" width="200%" height="200%">
<feOffset result="offOut" in="SourceGraphic" dx="0" dy="0" />
<feGaussianBlur result="blurOut" in="offOut" stdDeviation="4" />
<feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
</filter>
<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:rgb(0,0,0);stop-opacity:0" />
<stop offset="50%" style="stop-color:rgb(255,255,255);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(0,0,0);stop-opacity:0" />
</linearGradient>
</defs>
<circle cx="50%" cy="125%" r="80%" stroke="url(#grad1)" stroke-width="1.2%" fill="none" />
<line x1="100%" y1="${variables.line}%" x2="0" y2="${variables.line}%" style="stroke:rgb(255,255,255,0.0);stroke-width:0.5%" />
<circle cx="${variables.xpos}%" cy="${variables.ypos}%" rx="5" r="10" fill="rgb(255,255,255,1)" filter="url(#f2)"/>
`;
]]]
et le template:
widgets:
aspect_ratio: 1
variables:
forecast1pic: |
[[[
var state = states['weather.bresles'].attributes.forecast[1].condition;
if (state == "cloudy") return 'url("/local/weather/cloudy.svg")';
else if (state == "clear-night") return 'url("/local/weather/moon-last-quarter.svg")';
else if (state == "fog") return 'url("/local/weather/fog.svg")';
else if (state == "hail") return 'url("/local/weather/snow.svg")';
else if (state == "lightning") return 'url("/local/weather/thunderstorms.svg")';
else if (state == "lightning-rainy") return 'url("/local/weather/thunderstorms-rain.svg")';
else if (state == "partlycloudy") return 'url("/local/weather/partly-cloudy-day.svg")';
else if (state == "pouring") return 'url("/local/weather/rain.svg")';
else if (state == "rainy") return 'url("/local/weather/rain.svg")';
else if (state == "snowy") return 'url("/local/weather/snow.svg")';
else if (state == "snowy-rainy") return 'url("/local/weather/sleet.svg")';
else if (state == "sunny") return 'url("/local/weather/clear-day.svg")';
else if (state == "windy") return 'url("/local/weather/wind.svg")';
else if (state == "windy-variant") return 'url("/local/weather/dust-wind.svg")';
else if (state == "exceptional") return 'url("/local/weather/clear-day.svg")';
]]]
forecast2pic: |
[[[
var state = states['weather.bresles'].attributes.forecast[2].condition;
if (state == "cloudy") return 'url("/local/weather/cloudy.svg")';
else if (state == "clear-night") return 'url("/local/weather/moon-last-quarter.svg")';
else if (state == "fog") return 'url("/local/weather/fog.svg")';
else if (state == "hail") return 'url("/local/weather/snow.svg")';
else if (state == "lightning") return 'url("/local/weather/thunderstorms.svg")';
else if (state == "lightning-rainy") return 'url("/local/weather/thunderstorms-rain.svg")';
else if (state == "partlycloudy") return 'url("/local/weather/partly-cloudy-day.svg")';
else if (state == "pouring") return 'url("/local/weather/rain.svg")';
else if (state == "rainy") return 'url("/local/weather/rain.svg")';
else if (state == "snowy") return 'url("/local/weather/snow.svg")';
else if (state == "snowy-rainy") return 'url("/local/weather/sleet.svg")';
else if (state == "sunny") return 'url("/local/weather/clear-day.svg")';
else if (state == "windy") return 'url("/local/weather/wind.svg")';
else if (state == "windy-variant") return 'url("/local/weather/dust-wind.svg")';
else if (state == "exceptional") return 'url("/local/weather/clear-day.svg")';
]]]
forecast3pic: |
[[[
var state = states['weather.bresles'].attributes.forecast[3].condition;
if (state == "cloudy") return 'url("/local/weather/cloudy.svg")';
else if (state == "clear-night") return 'url("/local/weather/moon-last-quarter.svg")';
else if (state == "fog") return 'url("/local/weather/fog.svg")';
else if (state == "hail") return 'url("/local/weather/snow.svg")';
else if (state == "lightning") return 'url("/local/weather/thunderstorms.svg")';
else if (state == "lightning-rainy") return 'url("/local/weather/thunderstorms-rain.svg")';
else if (state == "partlycloudy") return 'url("/local/weather/partly-cloudy-day.svg")';
else if (state == "pouring") return 'url("/local/weather/rain.svg")';
else if (state == "rainy") return 'url("/local/weather/rain.svg")';
else if (state == "snowy") return 'url("/local/weather/snow.svg")';
else if (state == "snowy-rainy") return 'url("/local/weather/sleet.svg")';
else if (state == "sunny") return 'url("/local/weather/clear-day.svg")';
else if (state == "windy") return 'url("/local/weather/wind.svg")';
else if (state == "windy-variant") return 'url("/local/weather/dust-wind.svg")';
else if (state == "exceptional") return 'url("/local/weather/clear-day.svg")';
]]]
forecast4pic: |
[[[
var state = states['weather.bresles'].attributes.forecast[4].condition;
if (state == "cloudy") return 'url("/local/weather/cloudy.svg")';
else if (state == "clear-night") return 'url("/local/weather/moon-last-quarter.svg")';
else if (state == "fog") return 'url("/local/weather/fog.svg")';
else if (state == "hail") return 'url("/local/weather/snow.svg")';
else if (state == "lightning") return 'url("/local/weather/thunderstorms.svg")';
else if (state == "lightning-rainy") return 'url("/local/weather/thunderstorms-rain.svg")';
else if (state == "partlycloudy") return 'url("/local/weather/partly-cloudy-day.svg")';
else if (state == "pouring") return 'url("/local/weather/rain.svg")';
else if (state == "rainy") return 'url("/local/weather/rain.svg")';
else if (state == "snowy") return 'url("/local/weather/snow.svg")';
else if (state == "snowy-rainy") return 'url("/local/weather/sleet.svg")';
else if (state == "sunny") return 'url("/local/weather/clear-day.svg")';
else if (state == "windy") return 'url("/local/weather/wind.svg")';
else if (state == "windy-variant") return 'url("/local/weather/dust-wind.svg")';
else if (state == "exceptional") return 'url("/local/weather/clear-day.svg")';
]]]
forecast5pic: |
[[[
var state = states['weather.bresles'].attributes.forecast[5].condition;
if (state == "cloudy") return 'url("/local/weather/cloudy.svg")';
else if (state == "clear-night") return 'url("/local/weather/moon-last-quarter.svg")';
else if (state == "fog") return 'url("/local/weather/fog.svg")';
else if (state == "hail") return 'url("/local/weather/snow.svg")';
else if (state == "lightning") return 'url("/local/weather/thunderstorms.svg")';
else if (state == "lightning-rainy") return 'url("/local/weather/thunderstorms-rain.svg")';
else if (state == "partlycloudy") return 'url("/local/weather/partly-cloudy-day.svg")';
else if (state == "pouring") return 'url("/local/weather/rain.svg")';
else if (state == "rainy") return 'url("/local/weather/rain.svg")';
else if (state == "snowy") return 'url("/local/weather/snow.svg")';
else if (state == "snowy-rainy") return 'url("/local/weather/sleet.svg")';
else if (state == "sunny") return 'url("/local/weather/clear-day.svg")';
else if (state == "windy") return 'url("/local/weather/wind.svg")';
else if (state == "windy-variant") return 'url("/local/weather/dust-wind.svg")';
else if (state == "exceptional") return 'url("/local/weather/clear-day.svg")';
]]]
ypos: |
[[[
if (states["sensor.time"].state.split(":")[0] == "06"){
return "49";}
else if (states["sensor.time"].state.split(":")[0] == "07"){
return "47.9";}
else if (states["sensor.time"].state.split(":")[0] == "08"){
return "46.8";}
else if (states["sensor.time"].state.split(":")[0] == "09"){
return "45.8";}
else if (states["sensor.time"].state.split(":")[0] == "10"){
return "45.4";}
else if (states["sensor.time"].state.split(":")[0] == "11"){
return "45.1";}
else if (states["sensor.time"].state.split(":")[0] == "12"){
return "45";}
else if (states["sensor.time"].state.split(":")[0] == "13"){
return "45.1";}
else if (states["sensor.time"].state.split(":")[0] == "14"){
return "45.4";}
else if (states["sensor.time"].state.split(":")[0] == "15"){
return "45.8";}
else if (states["sensor.time"].state.split(":")[0] == "16"){
return "46.8";}
else if (states["sensor.time"].state.split(":")[0] == "17"){
return "47.9";}
else if (states["sensor.time"].state.split(":")[0] == "18"){
return "49";}
else if (states["sensor.time"].state.split(":")[0] == "19"){
return "50.6";}
else if (states["sensor.time"].state.split(":")[0] == "21"){
return "54.8";}
else if (states["sensor.time"].state.split(":")[0] == "22") {
return "56.9";}
else if (states["sensor.time"].state.split(":")[0] == "23") {
return "59.4";}
else if (states["sensor.time"].state.split(":")[0] == "24") {
return "60.6";}
]]]
xpos: |
[[[
return states["sensor.time"].state.split(":")[0] * 4.16;
]]]
line: |
[[[
if (states['sun.sun'].attributes.next_rising.substr(11,2) == "06"){
return "49";}
]]]
show_icon: false
show_state: true
show_name: true
tap_action:
animation_card: |
[[[
const animation_speed_ms = 900;
const animation = `card_bounce ${animation_speed_ms}ms cubic-bezier(0.22, 1, 0.36, 1)`;
this.shadowRoot.getElementById("card").style.animation = animation;
window.setTimeout(() => {
this.shadowRoot.getElementById("card").style.animation = "none";
}, animation_speed_ms)
]]]
styles:
card:
- background-color: rgba(0,0,0,0.4)
- font-color: rgb(255,255,255,0.9)
- text-shadow: 0px 0px 1px black
- letter-spacing: 0.05vw
name:
- color: rgb(255,255,255,0.6)
extra_styles: |
@keyframes card_bounce {
0% {
transform: scale(1);
}
15% {
transform: scale(0.9);
}
25% {
transform: scale(1);
}
30% {
transform: scale(0.98);
}
100% {
transform: scale(1);
}
}
J’arrive pas trouvé ce qui cloche !
merci
