Forum Domoticz en français

Reprenez le contrôle de votre domotique
https://easydomoticz.com/forum/

[Tuto] Utiliser Monitor

https://easydomoticz.com/forum/viewtopic.php?t=331

Page 79 sur 148

Re: custom page

Publié : 09 avr. 2016, 12:35
par vil1driver
Bravo :D magnifique

si tu me prends par les sentiments.. j'aurais 2, 3 mofis...

ajout autoHide pour cacher la dernière ligne pour ceux qui n'ont pas la place de l'afficher
usage de la variable 'city' de la page settings à la place des coordonnées (plus besoin d'éditer meteo.html)
remplacement de la date par le jour
remplacement du ° par °C
afficher les temps un chouilla plus gros
ajout de la couleur suivant la température (comme pour les autres temps)
renommage du nom des cellules (juste pour coller au nommage des autre cellules/pages)

voici le résultat:

meteo.html

Code : Tout sélectionner

<!-- 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%;" >&#8451;</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%;" >&#8451;</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%;" >&#8451;</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%;" >&#8451;</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>
<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>
<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 -->
meteo.css

Code : Tout sélectionner

#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, #meteo13, #meteo18, #meteo24, #meteo29
{ 
	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
{
	font-size:27px;
}
si tu valides mes modifs, j'ajoute cette page au github dans la foulée, grand merci pour ton partage ;)

sinon dans ton setting
ceci

Code : Tout sélectionner

['Proba Pluie 1h','Data', 'meteo_6','','','','','x > 65'],   // proba pluie dans 1h
['','Text','desc_meteo_6','Pluie 1h','','','',''],
peut être remplacé par ceci

Code : Tout sélectionner

['Proba Pluie 1h','Data','meteo_6','Pluie 1h','','','','x > 65'],   // proba pluie dans 1h
pour l'histoire de l'affichage des variables, je n'ai pas trouvé comment. il faudrait pouvoir les ajouter à un roomplan et pouvoir les lister via une commande json de domoticz...
du coups je passe par un mini script lua qui me duplique le contenu de certaines variables dans des capteur texte.



@Smart,
pour ton soucis avec les volets, je n'ai pas encore pris le temps de regarder..
mais rapidement, je dirais, peut-être supprimer/commenter tout le bloc blinds,

Re: custom page

Publié : 09 avr. 2016, 13:47
par papoo
vil1driver a écrit :
si tu valides mes modifs, j'ajoute cette page au github dans la foulée, grand merci pour ton partage ;)
oui oui je valide tes modifs :D merci

Madame c'est permis une petite critique : pourquoi je n'affiche pas l'heure des prévisions?
si tu te sens de les ajouter dans les ls au dessus de la première ligne

Re: custom page

Publié : 09 avr. 2016, 13:52
par vil1driver
j'ai eu la même remarque, mais ça va faire 'chargé' je pense.

finalement on 'découpe' mentalement assez facilement ;)

Re: custom page

Publié : 09 avr. 2016, 14:02
par papoo
vil1driver a écrit :j'ai eu la même remarque, mais ça va faire 'chargé' je pense.

finalement on 'découpe' mentalement assez facilement ;)
apparemment hommes et femmes ne découpent pas pareil :lol:

Re: custom page

Publié : 09 avr. 2016, 14:08
par vil1driver
peut-être ajouter un 'fond' en semi transparence sous une portion pour mettre en avant la 'journée'..

Re: custom page

Publié : 09 avr. 2016, 14:19
par papoo
houla, cela dépasse largement le cadre de mes maigres compétences

Re: custom page

Publié : 09 avr. 2016, 15:57
par vil1driver
j'ai ajouté 2 séparateurs plutôt discrets (pour ne pas polluer l'affichage) mais qui peuvent aider
il suffit parfois d'un rien pour augmenter le niveau waf ;)
le premier est à 8h et le 2ème à 18h (le centre étant 13h)

ça donne ceci sur ma 7" 16/9ème

Image

Re: custom page

Publié : 09 avr. 2016, 16:04
par papoo
impecc

Re: custom page

Publié : 12 avr. 2016, 16:54
par Smat
Alors la franchement j'achète!!!!!!

Classe cette météo, j'intègre direct ce soir!!!!!

Re: custom page

Publié : 12 avr. 2016, 22:33
par deennoo
Tres Beau, j'integre aussi...

Il ne manque plus que le fond changeant en fonction de la météo actuelle...un vieux rêve...
Fuseau horaire sur UTC+02:00
Page 79 sur 148

Développé par phpBB® Forum Software © phpBB Limited

Traduction française officielle © Qiaeru