[Tuto] Utiliser Monitor

Forum dédié aux interfaces personnalisables : Custom Pages, Reacticz, Domoboard...
Verrouillé
vil1driver
Messages : 5661
Inscription : 30 janv. 2015, 11:07
Localisation : Rennes (35)

Re: Custom page

Message par vil1driver »

Ah oui autant pour moi ;)
MAJ = VIDER LE CACHE(<-Clicable)
/!\Les mises à jour de Domoticz sont souvent sources de difficultés, ne sautez pas dessus
modules.lua

Un ex domoticzien
Haut
Chris54220
Messages : 124
Inscription : 20 mars 2016, 20:54
Localisation : Nancy

Re: Custom page

Message par Chris54220 »

Super la nouvelle page météo j'adore

juste une petit idées serai cool d'avoir les heures au dessus des prévision comme un tableau

après sa peux être que un option a active pour ceux qui ne veux pas les voir
Haut
vil1driver
Messages : 5661
Inscription : 30 janv. 2015, 11:07
Localisation : Rennes (35)

Re: Custom page

Message par vil1driver »

tu n'as pas envie de t'y essayer ?

ça pourrait faire un bon exercice html/css ;)
MAJ = VIDER LE CACHE(<-Clicable)
/!\Les mises à jour de Domoticz sont souvent sources de difficultés, ne sautez pas dessus
modules.lua

Un ex domoticzien
Haut
denisb88
Messages : 82
Inscription : 28 janv. 2016, 22:20

Re: Custom page

Message par denisb88 »

Merci cette page est géniale
Ma petite contribution, il existe chez meteoblue un meteogramme à 5 jours, ça pourrait être une autre option
https://www.meteoblue.com/meteogram-web ... R_PER_HOUR
PI 2-Aeon Stick-RFXCom : sondes RFX-10 détec.fumées-2 détec.ouverture-7 caméras-NetAtmo+3 modules+Anémo+Pluvio-2 prises Greenwave-1 prise Wemo-3 détec.inondation-1 Parrot Flower-1 détecteur UV-1 hub Harmony-prises RFX- 4 Squeezebox-XPENology+Plex
Haut
Chris54220
Messages : 124
Inscription : 20 mars 2016, 20:54
Localisation : Nancy

Re: Custom page

Message par Chris54220 »

vil1driver a écrit :tu n'as pas envie de t'y essayer ?

ça pourrait faire un bon exercice html/css ;)
donc voila j'ai travail dessus je 'tenvoi mon travail

modif: meteo.html

Code : Tout sélectionner

<!-- load page stylesheet -->
<script>
$('head').append('<link rel="stylesheet" href="css/meteo.css">');
</script>

<script>
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 == 6 ? 0 : jour +1;
$( "#jour1").append( tab_jour[jour] );
jour = jour == 6 ? 0 : jour +1;
$( "#jour2").append( tab_jour[jour] );
jour = jour == 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>' );
}); 	

});


function ghost(){

	for (i = 1, hour = new Date().getHours() ; i < hour ; i=i+2) { 

		if (!$("#day_0_"+i+"H00").hasClass('ghost')) {
			$("#day_0_"+i+"H00").addClass('ghost');
		}
		if (!$("#temp_day_0_"+i+"H00").hasClass('ghost')) {
			$("#temp_day_0_"+i+"H00").addClass('ghost');
		}	
	}
}

$(ghost);
setInterval( ghost, 5*60*1000);

</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 class="frame">
	<div id="ls_meteo11"></div><div id="meteo11">--</div><div id="desc_meteo11">meteo11</div>
</div>
</div> 
<!-- ================================================================================================== -->
 
<div class="stage">
</div> 
<div>
<div class="frame">
			<div id="ls_jour"></div><div id="jour"></div>
</div>
<div>
<div class="frame">
			<div id="day_1H">1h</div>
</div>
<div class="frame">
			<div id="day_3H">3h</div>
</div>
<div class="frame">
			<div id="day_5H">5h</div>
</div>
<div class="frame">
			<div id="day_7H">7h</div>
</div>
<div class="frame">
			<div id="day_9H">9h</div>
</div>
<div class="frame">
			<div id="day_11H">11h</div>
</div>
<div class="frame">
			<div id="day_13H">13h</div>
</div>
<div class="frame">
			<div id="day_15H">15h</div>
</div>
<div class="frame">
			<div id="day_17H">17h</div>
</div>
<div class="frame">
			<div id="day_19H">19h</div>
</div>
<div class="frame">
			<div id="day_21H">21h</div>
</div>
<div class="frame">
			<div id="day_23H">23h</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 -->

modif: meteo.css

Code : Tout sélectionner

#ls_meteo1, #ls_meteo2, #ls_meteo3, #ls_meteo25, #ls_meteo4, #ls_meteo5,
#ls_meteo6, #ls_meteo7, #ls_meteo8, #ls_meteo9, #ls_meteo10, #ls_meteo11
{
	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_meteo25, #desc_meteo4, #desc_meteo5,
#desc_meteo6, #desc_meteo7, #desc_meteo8, #desc_meteo9, #desc_meteo10, #desc_meteo11
{
	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, #meteo11
{
	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;
	
}

#meteo7, #meteo8, #meteo9, #meteo10
{ 
	width: 134px; 
}

#meteo6, #meteo11
{ 
	width: 135px; 
}

#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: 15px;
	margin-top: -20px;
	height: 25px;
	line-height: 15px;
	text-shadow: 1px 1px 4px black;

}

.ghost
{
	opacity: 0.3;
}

#jour,
#day_1H, #day_3H, #day_5H, #day_7H, #day_9H, #day_11H,
#day_13H, #day_15H, #day_17H, #day_19H, #day_21H, #day_23H
{
	font-family: arimo;
	font-weight: bold;
	width: 46px;
	padding: 10px;
	border: 1px solid transparent;	
	color: #F2DDB3;
	font-size: 13px;
	text-shadow: 1px 1px 4px black;
}

#jour0, 
#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
{
	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;
	margin-top: -15px;
	text-shadow: 1px 1px 4px black;
}

#jour1, #jour2, #jour3, 
#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;
	margin-top: -10px;
	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;
	}	
}

voila

[Édit] correction des erreur que vil1driver ma signaler au passage merci [/édit]
Dernière modification par Chris54220 le 15 avr. 2016, 11:56, modifié 4 fois.
Haut
vil1driver
Messages : 5661
Inscription : 30 janv. 2015, 11:07
Localisation : Rennes (35)

Re: Custom page

Message par vil1driver »

Et bien ;)

Parcontre les id doivent être uniques, tu ne peux avoir 2 div avec le même id.
MAJ = VIDER LE CACHE(<-Clicable)
/!\Les mises à jour de Domoticz sont souvent sources de difficultés, ne sautez pas dessus
modules.lua

Un ex domoticzien
Haut
denisb88
Messages : 82
Inscription : 28 janv. 2016, 22:20

Re: Custom page

Message par denisb88 »

Pour le script de prévisions des pluies, je vois sur les copies d'écran que c'est toutes les heures mais sur la page de lien du script, c'est 1h puis 5h 12h 24h.
Comment faire pour que cela soit toutes les heures ?
PI 2-Aeon Stick-RFXCom : sondes RFX-10 détec.fumées-2 détec.ouverture-7 caméras-NetAtmo+3 modules+Anémo+Pluvio-2 prises Greenwave-1 prise Wemo-3 détec.inondation-1 Parrot Flower-1 détecteur UV-1 hub Harmony-prises RFX- 4 Squeezebox-XPENology+Plex
Haut
Chris54220
Messages : 124
Inscription : 20 mars 2016, 20:54
Localisation : Nancy

Re: Custom page

Message par Chris54220 »

denisb88 a écrit :Pour le script de prévisions des pluies, je vois sur les copies d'écran que c'est toutes les heures mais sur la page de lien du script, c'est 1h puis 5h 12h 24h.
Comment faire pour que cela soit toutes les heures ?

tien je les modifier pour les voir toute

Code : Tout sélectionner

# Setup START 
COUNTRY=FRANCE 
APIKEY=ATTENTION TU AVAIS LAISSER TA CLE API	# put your api key here 
TOWN=MALZEVILLE				# put your town here  
IDX_1h=32					# Update according to your domoticz % divices 
IDX_2h=33					# Update according to your domoticz % divices
IDX_3h=34					# Update according to your domoticz % divices
IDX_4h=35					# Update according to your domoticz % divices
IDX_5h=36					# Update according to your domoticz % divices
IDX_6h=37					# Update according to your domoticz % divices
 
DOMO_HTTP=192.168.1.5:8080 
# Setup END 

sudo curl -f "http://api.wunderground.com/api/$APIKEY/hourly/lang:FR/q/France/$TOWN.xml" -o /tmp/weather$TOWN.out 

x=1 # Hour 
proba_rain1=`grep "pop" /tmp/weather$TOWN.out | sed "s/<pop>// "|sed "s/<\/pop>//" |awk 'NR==1' ` 
echo Proba Rain in $x h :  $proba_rain1 % 
url="http://$DOMO_HTTP/json.htm?type=command&param=udevice&idx=$IDX_1h&nvalue=0&svalue="$proba_rain1 

url=`echo $url |sed "s/ //"` 
echo $url 
curl -f $url 

x=2 # Hour 
proba_rain2=`grep "pop" /tmp/weather$TOWN.out | sed "s/<pop>// "|sed "s/<\/pop>//" |awk 'NR==2' ` 
echo Proba Rain in $x h :  $proba_rain2 % 
url="http://$DOMO_HTTP/json.htm?type=command&param=udevice&idx=$IDX_2h&nvalue=0&svalue="$proba_rain2 

url=`echo $url |sed "s/ //"` 
echo $url 
curl -f $url 
 
 x=3 # Hour 
proba_rain3=`grep "pop" /tmp/weather$TOWN.out | sed "s/<pop>// "|sed "s/<\/pop>//" |awk 'NR==3' ` 
echo Probal pluie dans $x h :  $proba_rain3 % 
url="http://$DOMO_HTTP/json.htm?type=command&param=udevice&idx=$IDX_3h&nvalue=0&svalue="$proba_rain3 
 
url=`echo $url |sed "s/ //"` 
echo $url 
curl -f $url 

x=4 # Hour 
proba_rain4=`grep "pop" /tmp/weather$TOWN.out | sed "s/<pop>// "|sed "s/<\/pop>//" |awk 'NR==4' ` 
echo Probal Rain in $x h :  $proba_rain4 % 
url="http://$DOMO_HTTP/json.htm?type=command&param=udevice&idx=$IDX_4h&nvalue=0&svalue="$proba_rain4 
 
url=`echo $url |sed "s/ //"` 
echo $url 
curl -f $url 

x=5 # Hour 
proba_rain5=`grep "pop" /tmp/weather$TOWN.out | sed "s/<pop>// "|sed "s/<\/pop>//" |awk 'NR==5' ` 
echo Probal pluie dans $x h :  $proba_rain5 % 
url="http://$DOMO_HTTP/json.htm?type=command&param=udevice&idx=$IDX_5h&nvalue=0&svalue="$proba_rain5 
 
url=`echo $url |sed "s/ //"` 
echo $url 
curl -f $url 
 
x=6 # Hour 
proba_rain6=`grep "pop" /tmp/weather$TOWN.out | sed "s/<pop>// "|sed "s/<\/pop>//" |awk 'NR==6' ` 
echo Probal pluie dans $x h :  $proba_rain6 % 
url="http://$DOMO_HTTP/json.htm?type=command&param=udevice&idx=$IDX_6h&nvalue=0&svalue="$proba_rain6 
 
url=`echo $url |sed "s/ //"` 
echo $url 
curl -f $url
tu as juste as change les idx

Edit par Deennoo : petite modération effacement de ta clé API wu
Haut
vil1driver
Messages : 5661
Inscription : 30 janv. 2015, 11:07
Localisation : Rennes (35)

Re: Custom page

Message par vil1driver »

Si tu regardes un peu le code tu vas vite voir qu'il y a un paragraphe qui se répète, avec juste l'heure qui change...

T'as juste a créer autant de devices virtuels qu'il te faut, de rentrer leurs idx en début de code..

Et de répliquer les paragraphes d'envoi..

[Édit] mince, grillé mon message pédagogique [/édit]
Dernière modification par vil1driver le 15 avr. 2016, 10:58, modifié 1 fois.
MAJ = VIDER LE CACHE(<-Clicable)
/!\Les mises à jour de Domoticz sont souvent sources de difficultés, ne sautez pas dessus
modules.lua

Un ex domoticzien
Haut
denisb88
Messages : 82
Inscription : 28 janv. 2016, 22:20

Re: Custom page

Message par denisb88 »

Merci en effet, je viens de voir ça
PI 2-Aeon Stick-RFXCom : sondes RFX-10 détec.fumées-2 détec.ouverture-7 caméras-NetAtmo+3 modules+Anémo+Pluvio-2 prises Greenwave-1 prise Wemo-3 détec.inondation-1 Parrot Flower-1 détecteur UV-1 hub Harmony-prises RFX- 4 Squeezebox-XPENology+Plex
Haut
Verrouillé

Revenir à « Custom Pages »