Comme dashboard pour ma domotique, j’utilise la Custom Page de vil1driver.
Afin d’augmenter mon WAF j’ai bidouillé une page météo pour madame.
le site prevision-meteo.ch fournissant des … prévisions à 3 jours via une API, j’ai voulu un affichage de ces 3 jours + celles du jour sur une seule page.
le résultat
ce script à depuis été inclu au projet que vous pouvez retrouver sur Github
N’hésitez pas à proposer ici votre utilisation de ce script voir vos améliorations.
<!-- load page stylesheet -->
<script>
$('head').append('<link rel="stylesheet" href="css/meteo.css">');
</script>
<script type="text/javascript" language="javascript">
var maintenant=new Date();
var jour = maintenant.getDay();
var tab_jour = new Array("Dim.", "Lun.", "Mar.", "Mer.", "Jeu.", "Ven.", "Sam.");
$( "#jour0").append( tab_jour[jour] );
jour = jour +1 > 6 ? 0 : jour +1;
$( "#jour1").append( tab_jour[jour] );
jour = jour +1 > 6 ? 0 : jour +1;
$( "#jour2").append( tab_jour[jour] );
jour = jour +1 > 6 ? 0 : jour +1;
$( "#jour3").append( tab_jour[jour] );
var JsonAddress = "http://www.prevision-meteo.ch/services/json/"+city;
function color(temp) {
if (parseInt(temp, 10) >= 35) { return '<span style="color:'+T35+'">'+temp; }
else if (parseInt(temp, 10) >= 34) { return '<span style="color:'+T34+'">'+temp; }
else if (parseInt(temp, 10) >= 33) { return '<span style="color:'+T33+'">'+temp; }
else if (parseInt(temp, 10) >= 32) { return '<span style="color:'+T32+'">'+temp; }
else if (parseInt(temp, 10) >= 31) { return '<span style="color:'+T31+'">'+temp; }
else if (parseInt(temp, 10) >= 30) { return '<span style="color:'+T30+'">'+temp; }
else if (parseInt(temp, 10) >= 29) { return '<span style="color:'+T29+'">'+temp; }
else if (parseInt(temp, 10) >= 28) { return '<span style="color:'+T28+'">'+temp; }
else if (parseInt(temp, 10) >= 27) { return '<span style="color:'+T27+'">'+temp; }
else if (parseInt(temp, 10) >= 26) { return '<span style="color:'+T26+'">'+temp; }
else if (parseInt(temp, 10) >= 25) { return '<span style="color:'+T25+'">'+temp; }
else if (parseInt(temp, 10) >= 24) { return '<span style="color:'+T24+'">'+temp; }
else if (parseInt(temp, 10) >= 23) { return '<span style="color:'+T23+'">'+temp; }
else if (parseInt(temp, 10) >= 22) { return '<span style="color:'+T22+'">'+temp; }
else if (parseInt(temp, 10) >= 21) { return '<span style="color:'+T21+'">'+temp; }
else if (parseInt(temp, 10) >= 20) { return '<span style="color:'+T20+'">'+temp; }
else if (parseInt(temp, 10) >= 19) { return '<span style="color:'+T19+'">'+temp; }
else if (parseInt(temp, 10) >= 18) { return '<span style="color:'+T18+'">'+temp; }
else if (parseInt(temp, 10) >= 17) { return '<span style="color:'+T17+'">'+temp; }
else if (parseInt(temp, 10) >= 16) { return '<span style="color:'+T16+'">'+temp; }
else if (parseInt(temp, 10) >= 15) { return '<span style="color:'+T15+'">'+temp; }
else if (parseInt(temp, 10) >= 14) { return '<span style="color:'+T14+'">'+temp; }
else if (parseInt(temp, 10) >= 13) { return '<span style="color:'+T13+'">'+temp; }
else if (parseInt(temp, 10) >= 12) { return '<span style="color:'+T12+'">'+temp; }
else if (parseInt(temp, 10) >= 11) { return '<span style="color:'+T11+'">'+temp; }
else if (parseInt(temp, 10) >= 10) { return '<span style="color:'+T10+'">'+temp; }
else if (parseInt(temp, 10) >= 9) { return '<span style="color:'+T09+'">'+temp; }
else if (parseInt(temp, 10) >= 8) { return '<span style="color:'+T08+'">'+temp; }
else if (parseInt(temp, 10) >= 7) { return '<span style="color:'+T07+'">'+temp; }
else if (parseInt(temp, 10) >= 6) { return '<span style="color:'+T06+'">'+temp; }
else if (parseInt(temp, 10) >= 5) { return '<span style="color:'+T05+'">'+temp; }
else if (parseInt(temp, 10) >= 4) { return '<span style="color:'+T04+'">'+temp; }
else if (parseInt(temp, 10) >= 3) { return '<span style="color:'+T03+'">'+temp; }
else if (parseInt(temp, 10) >= 2) { return '<span style="color:'+T02+'">'+temp; }
else if (parseInt(temp, 10) >= 1) { return '<span style="color:'+T01+'">'+temp; }
else if (parseInt(temp, 10) >= 0) { return '<span style="color:'+T00+'">'+temp; }
else { return '<span style="color:'+T000+'">'+temp; }
}
$.getJSON(JsonAddress, function (json) {
$.each(json.fcst_day_0.hourly_data, function( index, value ) {
//console.log( index + ": " + value.ICON );
$( "#day_0_" + index ).append( "<img src=\"" + value.ICON + "\" alt=\"\" />" );
$( "#temp_day_0_" + index ).append( color(value.TMP2m) + '<sup style="font-size:50%;" >℃</sup></span>' );
});
$.each(json.fcst_day_1.hourly_data, function( index, value ) {
//console.log( index + ": " + value.ICON );
$( "#day_1_" + index ).append( "<img src=\"" + value.ICON + "\" alt=\"\" />" )
$( "#temp_day_1_" + index ).append( color(value.TMP2m) + '<sup style="font-size:50%;" >℃</sup></span>' );
});
$.each(json.fcst_day_2.hourly_data, function( index, value ) {
//console.log( index + ": " + value.ICON );
$( "#day_2_" + index ).append( "<img src=\"" + value.ICON + "\" alt=\"\" />" )
$( "#temp_day_2_" + index ).append( color(value.TMP2m) + '<sup style="font-size:50%;" >℃</sup></span>' );
});
$.each(json.fcst_day_3.hourly_data, function( index, value ) {
//console.log( index + ": " + value.ICON );
$( "#day_3_" + index ).append( "<img src=\"" + value.ICON + "\" alt=\"\" />" )
$( "#temp_day_3_" + index ).append( color(value.TMP2m) + '<sup style="font-size:50%;" >℃</sup></span>' );
});
});
</script>
<!-- Page -->
<div class="cnt v-wrap">
<div class="v-box">
<!-- contenu -->
<!--
le contenu de votre page ne doit pas dépasser les dimensions suivantes
largeur: 962px
hauteur: 541px
-->
<div>
<div class="frame">
<div id="ls_meteo1"></div><div id="meteo1">--</div><div id="desc_meteo1">meteo1</div>
<div id="ls_meteo2"></div><div id="meteo2">--</div><div id="desc_meteo2">meteo2</div>
</div>
<div class="frame">
<div id="ls_meteo3"></div><div id="meteo3">--</div><div id="desc_meteo3">meteo3</div>
</div>
<div class="frame">
<div id="ls_meteo25"></div><div id="meteo25">--</div><div id="desc_meteo25">meteo25</div>
</div>
<div class="frame">
<div id="ls_meteo4"></div><div id="meteo4">--</div><div id="desc_meteo4">meteo4</div>
<div id="ls_meteo5"></div><div id="meteo5">--</div><div id="desc_meteo5">meteo5</div>
</div>
</div>
<div>
<div class="frame">
<div id="ls_meteo6"></div><div id="meteo6">--</div><div id="desc_meteo6">meteo6</div>
</div>
<div class="frame">
<div id="ls_meteo7"></div><div id="meteo7">--</div><div id="desc_meteo7">meteo7</div>
</div>
<div class="frame">
<div id="ls_meteo8"></div><div id="meteo8">--</div><div id="desc_meteo8">meteo8</div>
</div>
<div class="frame">
<div id="ls_meteo9"></div><div id="meteo9">--</div><div id="desc_meteo9">meteo9</div>
</div>
<div class="frame">
<div id="ls_meteo10"></div><div id="meteo10">--</div><div id="desc_meteo10">meteo10</div>
</div>
</div>
<!-- ================================================================================================== -->
<div class="stage">
</div>
<div>
<div class="frame">
<div id="desc_jour0"></div><div id="jour0"></div>
</div>
</div>
<div class="frame">
<div id="day_0_1H00"></div><div id="temp_day_0_1H00"></div>
</div>
<div class="frame">
<div id="day_0_3H00"></div><div id="temp_day_0_3H00"></div>
</div>
<div class="frame">
<div id="day_0_5H00"></div><div id="temp_day_0_5H00"></div>
</div>
<div class="frame">
<div id="day_0_7H00"></div><div id="temp_day_0_7H00"></div>
</div>
<div class="frame">
<div id="day_0_9H00"></div><div id="temp_day_0_9H00"></div><div id="sep"></div>
</div>
<div class="frame">
<div id="day_0_11H00"></div><div id="temp_day_0_11H00"></div>
</div>
<div class="frame">
<div id="day_0_13H00"></div><div id="temp_day_0_13H00"></div>
</div>
<div class="frame">
<div id="day_0_15H00"></div><div id="temp_day_0_15H00"></div>
</div>
<div class="frame">
<div id="day_0_17H00"></div><div id="temp_day_0_17H00"></div>
</div>
<div class="frame">
<div id="day_0_19H00"></div><div id="temp_day_0_19H00"></div><div id="sep"></div>
</div>
<div class="frame">
<div id="day_0_21H00"></div><div id="temp_day_0_21H00"></div>
</div>
<div class="frame">
<div id="day_0_23H00"></div><div id="temp_day_0_23H00"></div>
</div>
</div>
<div class="stage">
</div>
<div>
<div class="frame">
<div id="desc_jour1"></div><div id="jour1"></div>
</div>
<div class="frame">
<div id="day_1_1H00"></div><div id="temp_day_1_1H00"></div>
</div>
<div class="frame">
<div id="day_1_3H00"></div><div id="temp_day_1_3H00"></div>
</div>
<div class="frame">
<div id="day_1_5H00"></div><div id="temp_day_1_5H00"></div>
</div>
<div class="frame">
<div id="day_1_7H00"></div><div id="temp_day_1_7H00"></div>
</div>
<div class="frame">
<div id="day_1_9H00"></div><div id="temp_day_1_9H00"></div>
</div>
<div class="frame">
<div id="day_1_11H00"></div><div id="temp_day_1_11H00"></div>
</div>
<div class="frame">
<div id="day_1_13H00"></div><div id="temp_day_1_13H00"></div>
</div>
<div class="frame">
<div id="day_1_15H00"></div><div id="temp_day_1_15H00"></div>
</div>
<div class="frame">
<div id="day_1_17H00"></div><div id="temp_day_1_17H00"></div>
</div>
<div class="frame">
<div id="day_1_19H00"></div><div id="temp_day_1_19H00"></div>
</div>
<div class="frame">
<div id="day_1_21H00"></div><div id="temp_day_1_21H00"></div>
</div>
<div class="frame">
<div id="day_1_23H00"></div><div id="temp_day_1_23H00"></div>
</div>
</div>
<div class="stage">
</div>
<div>
<div class="frame">
<div id="desc_jour2"></div><div id="jour2"></div>
</div>
<div class="frame">
<div id="day_2_1H00"></div><div id="temp_day_2_1H00"></div>
</div>
<div class="frame">
<div id="day_2_3H00"></div><div id="temp_day_2_3H00"></div>
</div>
<div class="frame">
<div id="day_2_5H00"></div><div id="temp_day_2_5H00"></div>
</div>
<div class="frame">
<div id="day_2_7H00"></div><div id="temp_day_2_7H00"></div>
</div>
<div class="frame">
<div id="day_2_9H00"></div><div id="temp_day_2_9H00"></div>
</div>
<div class="frame">
<div id="day_2_11H00"></div><div id="temp_day_2_11H00"></div>
</div>
<div class="frame">
<div id="day_2_13H00"></div><div id="temp_day_2_13H00"></div>
</div>
<div class="frame">
<div id="day_2_15H00"></div><div id="temp_day_2_15H00"></div>
</div>
<div class="frame">
<div id="day_2_17H00"></div><div id="temp_day_2_17H00"></div>
</div>
<div class="frame">
<div id="day_2_19H00"></div><div id="temp_day_2_19H00"></div>
</div>
<div class="frame">
<div id="day_2_21H00"></div><div id="temp_day_2_21H00"></div>
</div>
<div class="frame">
<div id="day_2_23H00"></div><div id="temp_day_2_23H00"></div>
</div>
</div>
<div class="stage">
</div>
<div class="autoHide">
<div class="frame">
<div id="desc_jour3"></div><div id="jour3"></div>
</div>
<div class="frame">
<div id="day_3_1H00"></div><div id="temp_day_3_1H00"></div>
</div>
<div class="frame">
<div id="day_3_3H00"></div><div id="temp_day_3_3H00"></div>
</div>
<div class="frame">
<div id="day_3_5H00"></div><div id="temp_day_3_5H00"></div>
</div>
<div class="frame">
<div id="day_3_7H00"></div><div id="temp_day_3_7H00"></div>
</div>
<div class="frame">
<div id="day_3_9H00"></div><div id="temp_day_3_9H00"></div>
</div>
<div class="frame">
<div id="day_3_11H00"></div><div id="temp_day_3_11H00"></div>
</div>
<div class="frame">
<div id="day_3_13H00"></div><div id="temp_day_3_13H00"></div>
</div>
<div class="frame">
<div id="day_3_15H00"></div><div id="temp_day_3_15H00"></div>
</div>
<div class="frame">
<div id="day_3_17H00"></div><div id="temp_day_3_17H00"></div>
</div>
<div class="frame">
<div id="day_3_19H00"></div><div id="temp_day_3_19H00"></div>
</div>
<div class="frame">
<div id="day_3_21H00"></div><div id="temp_day_3_21H00"></div>
</div>
<div class="frame">
<div id="day_3_23H00"></div><div id="temp_day_3_23H00"></div>
</div>
</div>
<!-- fin contenu -->
</div>
</div>
<!-- fin page -->
et le fichier CSS
#ls_meteo1, #ls_meteo2, #ls_meteo3, #ls_meteo4,#ls_meteo25,
#ls_meteo5, #ls_meteo6, #ls_meteo7, #ls_meteo8, #ls_meteo9,
#ls_meteo10, #ls_meteo11, #ls_meteo21, #ls_meteo31, #ls_meteo41
{
font-family: arimo;
font-weight: normal;
color: #999;
font-size: 12px;
margin-top: -20px;
height: 20px;
line-height: 65px;
text-shadow: 1px 1px 5px black;
}
#desc_meteo1, #desc_meteo2, #desc_meteo3, #desc_meteo4, #desc_meteo25,
#desc_meteo5, #desc_meteo6, #desc_meteo7, #desc_meteo8, #desc_meteo9, #desc_meteo10
{
font-family: arimo;
font-weight: normal;
/* color: #999; */
color: #F2DDB3;
font-size: 17px;
margin-top: -20px;
height: 25px;
line-height: 15px;
text-shadow: 1px 1px 4px black;
}
#meteo3, #meteo25
{
font-family: arimo;
font-weight: bold;
width: 277px;
padding: 5px;
/* border: 1px solid #1E1E1F; */
border: 1px solid transparent;
border-radius: 0px;
height: 152.5px;
line-height: 170px;
font-size: 100px;
color: #999;
margin: 0px ;
text-shadow: 1px 1px 4px black;
}
#meteo1, #meteo2, #meteo4, #meteo5,
#meteo6, #meteo7, #meteo8, #meteo9, #meteo10
{
font-family: arimo;
font-weight: bold;
width: 162px;
padding: 10px;
/* border: 1px solid #1E1E1F; */
border: 1px solid transparent;
border-radius: 0px;
height: 58px;
line-height: 55px;
color: #999;
font-size:40px;
text-shadow: 1px 1px 4px black;
}
#meteo8
{
width: 184px;
}
#desc_jour0, #desc_jour1, #desc_jour2, #desc_jour3,
#temp_day_0_1H00, #temp_day_0_3H00, #temp_day_0_5H00, #temp_day_0_7H00, #temp_day_0_9H00, #temp_day_0_11H00,
#temp_day_0_13H00, #temp_day_0_15H00, #temp_day_0_17H00, #temp_day_0_19H00, #temp_day_0_21H00, #temp_day_0_23H00,
#temp_day_1_1H00, #temp_day_1_3H00, #temp_day_1_5H00, #temp_day_1_7H00, #temp_day_1_9H00, #temp_day_1_11H00,
#temp_day_1_13H00, #temp_day_1_15H00, #temp_day_1_17H00, #temp_day_1_19H00, #temp_day_1_21H00, #temp_day_1_23H00,
#temp_day_2_1H00, #temp_day_2_3H00, #temp_day_2_5H00, #temp_day_2_7H00, #temp_day_2_9H00, #temp_day_2_11H00,
#temp_day_2_13H00, #temp_day_2_15H00, #temp_day_2_17H00, #temp_day_2_19H00, #temp_day_2_21H00, #temp_day_2_23H00,
#temp_day_3_1H00, #temp_day_3_3H00, #temp_day_3_5H00, #temp_day_3_7H00, #temp_day_3_9H00, #temp_day_3_11H00,
#temp_day_3_13H00, #temp_day_3_15H00, #temp_day_3_17H00, #temp_day_3_19H00, #temp_day_3_21H00, #temp_day_3_23H00
{
font-family: arimo;
font-weight: normal;
/* color: #999; */
color: #F2DDB3;
font-size: 20px;
margin-top: -20px;
height: 25px;
line-height: 15px;
text-shadow: 1px 1px 4px black;
}
#jour0, #jour1, #jour2, #jour3,
#day_0_1H00, #day_0_3H00, #day_0_5H00, #day_0_7H00, #day_0_9H00, #day_0_11H00,
#day_0_13H00, #day_0_15H00, #day_0_17H00, #day_0_19H00, #day_0_21H00, #day_0_23H00,
#day_1_1H00, #day_1_3H00, #day_1_5H00, #day_1_7H00, #day_1_9H00, #day_1_11H00,
#day_1_13H00, #day_1_15H00, #day_1_17H00, #day_1_19H00, #day_1_21H00, #day_1_23H00,
#day_2_1H00, #day_2_3H00, #day_2_5H00, #day_2_7H00, #day_2_9H00, #day_2_11H00,
#day_2_13H00, #day_2_15H00, #day_2_17H00, #day_2_19H00, #day_2_21H00, #day_2_23H00,
#day_3_1H00, #day_3_3H00, #day_3_5H00, #day_3_7H00, #day_3_9H00, #day_3_11H00,
#day_3_13H00, #day_3_15H00, #day_3_17H00, #day_3_19H00, #day_3_21H00, #day_3_23H00
{
font-family: arimo;
font-weight: bold;
width: 46px;
padding: 10px;
/* border: 1px solid #1E1E1F; */
border: 1px solid transparent;
border-radius: 0px;
height: 58px;
line-height: 55px;
color: #999;
font-size:40px;
text-shadow: 1px 1px 4px black;
}
#jour0, #jour1, #jour2, #jour3
{
width: 55px;
font-size:27px;
color:#F2DDB3;
text-align: left;
}
#sep
{
position: absolute;
margin-top: -40px;
margin-left: 0px;
border : 0;
height : 160px;
width : 1px;
background-image: -webkit-linear-gradient(top, transparent, #F2DDB3, transparent);
background-image: -moz-linear-gradient(top, transparent, #F2DDB3, transparent);
background-image: -ms-linear-gradient(top, transparent, #F2DDB3, transparent);
background-image: -o-linear-gradient(top, transparent, #F2DDB3, transparent);
background-image: linear-gradient(top, transparent, #F2DDB3, transparent);
}
@media screen and (min-height: 610px) {
#sep
{
height : 250px;
}
}
et lorsque tu laisse la page météo d’origine? tu as le même problème?
le css de cette page semble inadapté à la taille de l’écran pi, notamment les images de la lune.
J’ai effacer le répertoire monitor
J’ai recopié le répertoire monitor par la version officielle
J’ai dans le fichier index supprimer la page par
J’ai après rajouté ma ville dans ce fichier à la place de Paris
J’ai renommé tes fichiers en supprimant perso puis les ai copiés en remplacement des fichiers d’origines et deziper les icônes :ci-joint une image de ce que j’obtiens !!! l’image est parfaitement centrer sur l’écran
Je dois être vraiment un blairo !!
Peut encore m’aider
Ps affichage sur écran officiel Raspberry pi
Merci encore pour le temps que tu me consacre.
j’ai mis 2photos dans la rp par mail
il y a deux types d’informations météo sur cette page.
la première, incluse dans le projet monitor, les prévisions du site previsions-meteo.ch
la deuxième, est customisable par chacun comme n’importe quelle page de monitor.
pour ma part j’ai choisi d’intégrer les prévisions de pluie de darksky via le script
https://pon.fr/dzvents-darksky-et-probabilite-de-pluie/ c’est infos remontent d’abord dans domoticz, et je fais appel à elles dans monitor.
Bonjour Papoo
de nouveau philippe
voila j’avance mais incomplet.
j’ai pris en fait sur github la source monitor qui intègre ta page météo 3jours. J’ai une affichage exacte de la partie des 3 jours mais impossible d’afficher Metéo 1 à 11 et 25 .
en fait cela correspond à la partie supérieur de la page je ne comprend pas comment tu recépere les valeur.
Pense tu pouvoir si cela n’est pas trop te demander me donner les deux fichier nécessaire pour avoir l’affichage du haut de ta page météo a 5 jour et le bas de la meteo A trois jour .
La date , la lune sont des info sympa sur la même pages.
Mes compétence me permette pas de réaliser cela .
Par contre je lis Ton code pour comprendre l’enchainement .mais pour méteo 1 à 11 et 25 je ne comprend pas.
Merci de ton aide si tu accepte (Yerres c’est ma ville))
Philippe
Fourchte@club-internet.fr
je tente cette semaine et te tient au courant
merci
je veux bien aider mais il faut me dire en quoi je puisse t’aider.
La je bloque.
Merci d’accepter de me donner de l’aide.
Fourchte@club-internet.fr