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 102 sur 148

Re: Custom page

Publié : 03 oct. 2016, 09:38
par Doudy
Bonjour,

Lequel est le bon ?
Celui ci :
papoo a écrit :Pour ceux qui utilisent les phases lunaires, mettez le code à jour, j'avais inversé l'appel des images des phases croissantes et décroissantes
désolé

Code : Tout sélectionner

if  (theMoon >=  29)  { 
    moonText = "Nouvelle Lune";
	moonIcon = "wi-moon-new";
		moonPNG = "moon0.png";
   } else if (theMoon < 29 && theMoon > 23) { 
    moonText = "Dernier croissant";
	moonIcon = "wi-moon-waning-crescent-3";
	moonPNG = "moon7.png";
	
   } else if (theMoon <= 23 && theMoon > 22) { 
    moonText = "Dernier quartier";
	moonIcon = "wi-moon-third-quarter";
	moonPNG = "moon6.png";	
   } else if (theMoon <= 22 && theMoon > 15) { 
    moonText = "Gibbeuse décroissante";
	moonIcon = "wi-moon-waning-gibbous-3";
	moonPNG = "moon5.png";	
   } else if (theMoon <= 15 && theMoon > 13) { 
    moonText = "Pleine lune";
	moonIcon = "wi-moon-full";
	moonPNG = "moon4.png";
   } else if (theMoon <= 13 && theMoon > 8) { 
    moonText = "Gibbeuse croissante";
	moonIcon = "wi-moon-waxing-gibbous-2";
	moonPNG = "moon3.png";
   } else if (theMoon <= 8 && theMoon > 6) { 
    moonText = "Premier Quartier";
	moonIcon = "wi-moon-first-quarter";
	moonPNG = "moon2.png";
	
   } else if (theMoon <= 6 && theMoon > 1) { 
    moonText = "Premier croissant";
	moonIcon = "wi-moon-waxing-crescent-2";
	moonPNG = "moon1.png";
   } else {                     
    moonText = "Nouvelle Lune";
	moonIcon = "wi-moon-new";
	moonPNG = "moon0.png";
}
ou celui-ci dans meteo.html - phases lunaire:

Code : Tout sélectionner

console.log( "Phase Lunaire : " + theMoon )
if  (theMoon >=  29)  { 
    moonText = "Nouvelle Lune";
		moonPNG = "moon0.png";
   } else if (theMoon < 29 && theMoon > 23) { 
    moonText = "Dernier croissant";
	moonPNG = "moon7.png";
	
   } else if (theMoon < 23 && theMoon > 22) { 
    moonText = "Dernier quartier";
	moonPNG = "moon6.png";	
   } else if (theMoon < 22 && theMoon > 15) { 
    moonText = "Gibbeuse décroissante";
	moonPNG = "moon5.png";	
   } else if (theMoon < 15 && theMoon > 13) { 
    moonText = "Pleine lune";
	moonPNG = "moon4.png";
   } else if (theMoon < 13 && theMoon > 8) { 
    moonText = "Gibbeuse croissante";
	moonPNG = "moon3.png";
   } else if (theMoon < 8 && theMoon > 6) { 
    moonText = "Premier Quartier";
	moonPNG = "moon2.png";
	
   } else if (theMoon < 6 && theMoon > 1) { 
    moonText = "Premier croissant";
	moonPNG = "moon1.png";
   } else {                     
    moonText = "Nouvelle Lune";
	moonPNG = "moon0.png";
J'ai constaté la chose suivante :
21-22-23/09 affiche "Premier Croissant"
24-25/09 affiche "Dernier Croissant"
26-27/09 affiche "Nouvelle lune"
28-29-30/09 affiche "Premier Croissant"
01-02/10 affiche "Dernier Croissant"
03/10 affiche "Nouvelle Lune"

Une idée ?
;)

Re: Custom page

Publié : 03 oct. 2016, 21:42
par papoo
j'avais reuploadé l'ensemble des fichiers mis à jour
mais voici le code de la page meteo.html complet

Code : Tout sélectionner

<!-- load page stylesheet -->


<!-- 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_meteo_owm_25"></div><div id="moon"></div><div id="moontxt"></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="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 -->
<script>
$('head').append('<link rel="stylesheet" href="css/meteo.css">');

var maintenant=new Date();
console.log( " Maintenant : " + maintenant )
var jour = maintenant.getDay();
var day = maintenant.getDate();
console.log( " jour : " + jour )
console.log( " day : " + day )
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] );
mois = maintenant.getMonth()+1;
console.log( " mois : " + mois ) 
annee = maintenant.getFullYear();
console.log( " annee : " + annee )

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.day_short );
$( "#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);
//============= phases lunaire ========================
//source https://forums.coronalabs.com/topic/54547-source-for-moon-cycles-phases/
	function julianDate(d, m, y) {
 
       var yy = y - Math.floor((12 - m) / 10);
        var mm = m + 9;
        if (mm >= 12) {
            mm = mm - 12
        }
       var k1 = Math.floor(365.25 * (yy + 4712));
       var k2 = Math.floor(30.6001 * mm + 0.5);
       var k3 = Math.floor(Math.floor((yy / 100) + 49) * 0.75) - 38;
       var j = k1 + k2 + d + 59;
        if (j > 2299160) {
            j = j - k3 
//console.log( " Julian Date : " + j )			
        }
        return j
	}

	function  moonAge(d, m, y){
        
        var j = julianDate(d, m, y);
        var ip = (j + 4.867) / 29.53059;
         ip = ip - Math.floor(ip);
        if (ip < 0.5) {
            var ag = ip * 29.53059 + 29.53059 / 2;
        } else {
           var ag = ip * 29.53059 - 29.53059 / 2;
        }
     	console.log( " moonAge : " + ag  )  // +1
        //return Math.round(ag) +1
	
	return ag //+1
	
	}    
console.log( "  Day : " + day )
var theMoon = moonAge(day, mois, annee)
/*if  ( 1 < theMoon && theMoon >=  29)  { 
theMoon = 0
} else {
theMoon = theMoon -1
}*/
console.log( "Phase Lunaire : " + theMoon )
if  (theMoon >=  29)  { 
    moonText = "Nouvelle Lune";
		moonPNG = "moon0.png";
   } else if (theMoon < 29 && theMoon > 23) { 
    moonText = "Dernier croissant";
	moonPNG = "moon7.png";
	
   } else if (theMoon < 23 && theMoon > 22) { 
    moonText = "Dernier quartier";
	moonPNG = "moon6.png";	
   } else if (theMoon < 22 && theMoon > 15) { 
    moonText = "Gibbeuse décroissante";
	moonPNG = "moon5.png";	
   } else if (theMoon < 15 && theMoon > 13) { 
    moonText = "Pleine lune";
	moonPNG = "moon4.png";
   } else if (theMoon < 13 && theMoon > 8) { 
    moonText = "Gibbeuse croissante";
	moonPNG = "moon3.png";
   } else if (theMoon < 8 && theMoon > 6) { 
    moonText = "Premier Quartier";
	moonPNG = "moon2.png";
	
   } else if (theMoon < 6 && theMoon > 1) { 
    moonText = "Premier croissant";
	moonPNG = "moon1.png";
   } else {                     
    moonText = "Nouvelle Lune";
	moonPNG = "moon0.png";
	
	/*if  theMoon >=  29  then 
    moonText.text = "New Moon"
    elseif theMoon < 29 and theMoon > 23 then 
    moonText.text = "Waning Crescent"
    elseif theMoon < 23 and theMoon > 22 then 
    moonText.text = "Last Quarter"
    elseif theMoon < 22 and theMoon > 15 then 
    moonText.text = "Waning gibbous"
    elseif theMoon < 15 and theMoon > 13 then 
    moonText.text = "Full Moon"
    elseif theMoon < 13 and theMoon > 8 then 
    moonText.text = "Waxing gibbous"
    elseif theMoon < 8 and theMoon > 6 then 
    moonText.text = "First Moon"
    elseif theMoon < 6 and theMoon > 1 then 
    moonText.text = "Waxing crescent"
    else                     
    moonText.text = "New Moon"
end */
}

$( "#moontxt").append(  moonText  );
$( "#moon").append("<img src=\"./icons/meteo/" + moonPNG + "\" alt=\"\" />");
</script>

Re: Custom page

Publié : 13 oct. 2016, 11:55
par deennoo
et si on s'amusait a personnalisé cette custom page ?

Polices, Icone de meteo (les gros et ceux de la page meteo), horloge.

Quelles sont les contraintes ?

Re: Custom page

Publié : 13 oct. 2016, 17:30
par nissart
Bonsoir,

j'ai besoin d'aide car je sèche complètement.

j'ai un zk1pa en push_on (contact sec).

tout fonctionne sur la custom page.

par contre j'ai trouvé une petite icone sympa, que j'ai renommé garage48_On.png et même gagare48.png mais impossible de la faire apparaître.

Code : Tout sélectionner

['439','Status','clock11','ouverture garage','garage','','',''], // Ouverture Garage
idx, status, emplacement et description ok tout fonctionne. mais le mot garage ne m'affiche rien de différent... ai-je sauté une étape ?

merci

Re: Custom page

Publié : 13 oct. 2016, 19:02
par deennoo
Et oui car le type de switch "garage" n'existe pas.

Tu l'as dit ton bouton c'est un Push On qui a l'icone par defaut et qui n'est pas modifiable

Enfin si l'est :
- efface dans les fichiers de domoticz : pushon48.png
- renome ton icone garage en pushon48.png

Et voila.

Mais attention tout les autres push on vont avoir cet icone.


L'autre solution moins sauvage :
Modifie ton icone garage en on/off
Cree un virtuel on/off met lui ton icone fait le apparaitre dans la custome page.
Fait un script lua :
If devicechanged('nomduvirtuelgarage') then
Command array ('pushonzk1pa')==on

Ainsi ce virtuel des qu'il change d'etat va actionner le vrai pushon du zk1pa.

Re: Custom page

Publié : 13 oct. 2016, 22:21
par papoo
@deennoo

pour les icones de la page météo prevision-meteo.ch le script récupere directement l'url de l'icone à afficher pour l'heure concernée. si l'on veut changer les icones, il faut modifier l'info à récuperer et construire une table de correspondance avec tes icones perso.
j'avais fais une deuxième page météo (via open wheather map) avec des icones en local via une police de caracteres spéciale météo customisable à volonté

Re: Custom page

Publié : 14 oct. 2016, 09:27
par nissart
Bonjour deennoo,
ok si je comprends bien c'est le fait que ce soit un PushOn qui fait qu'on puisse pas y mettre une icone custom ?
j'ai déjà tenté la modification à la sauvage de l'icone mais ca ne me plait pas car par la suite je vais en avoir d'autres

Re: Custom page

Publié : 14 oct. 2016, 10:00
par deennoo
Oui c'est ton probleme, pour continuer sur ton sujet, ouvre un autre post stp cela va servir a d'autre.

Peux tu partagers ton icone de protail stp ?

Re: Custom page

Publié : 14 oct. 2016, 11:03
par nissart
pas de soucis, https://www.somfy.fr/produits/acces/porte-de-garage

Image

Image

Image

Re: Custom page

Publié : 14 oct. 2016, 11:19
par vil1driver
deennoo a écrit :et si on s'amusait a personnalisé cette custom page ?

Polices, Icone de meteo (les gros et ceux de la page meteo), horloge.

Quelles sont les contraintes ?
pour les polices tu peux en télécharger ici par exemple
http://www.dafont.com/fr/
et les placer avec les autres dans le dossiers fonts
puis tu édites le fichier css/frontpage.css (au début) pour les prendre en compte
aide toi de ce qui est déjà fait..

pour les utiliser, plusieurs possibilité,
si c'est pour une des valeurs perso affichées cela se passe dans frontpage_settings.js
exemple
['mpd_pause','Status','cell31','Pause','','','color:#a62727;font-family:brankovic;font-size:100%'],
si c'est pour du text géré par les pages elles mêmes, exemple les jours pour la page météo ou les légendes
il te faudra éditer les fichiers css propres à chaque page
et chercher/remplacer ce genre de ligne

Code : Tout sélectionner

font-family: arimo;
concernant le gros icone météo, les images sont juste à remplacer, tu les trouveras dans le dossier icons/meteo/
pas de contrainte de taille, elle seront redimensionnées

pour l'horloge analogique c'est pareil, une simple image à remplacer icons/clockFace.png
https://www.google.fr/search?q=clockface

pour les petites icones de la page météo, papoo a répondu

@nissart,
ta méthode est bonne mais le code ne le permet pas pour les pushOn,
désolé pas d'icone perso pour l'instant pour autre chose qu'un switch On/Off
Fuseau horaire sur UTC+02:00
Page 102 sur 148

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

Traduction française officielle © Qiaeru