[Tuto] Utiliser Monitor

Forum dédié aux interfaces personnalisables : Custom Pages, Reacticz, Domoboard...
Verrouillé
Doudy
Messages : 457
Inscription : 07 mai 2016, 17:23

Re: Custom page

Message 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 ?
;)
RaspberryPi - RFLink - Zwave - WH2600
Domoticz : 2020.2 | Dashticz : V3.12 Master | dzvents : 3.0.2 | Python : 3.7.3
Haut
papoo
Messages : 2029
Inscription : 10 janv. 2016, 11:29
Localisation : Limoges (87)
Contact :
Contacter papoo

Re: Custom page

Message 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>
domoticz beta/RaspBerry PI3 stretch
https://pon.fr github
Haut
deennoo
Messages : 4036
Inscription : 25 janv. 2015, 02:00

Re: Custom page

Message 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 ?
De quoi se faire Plaisir et essayer d'aider...
http://www.domo-attitude.fr
Haut
nissart
Messages : 145
Inscription : 20 avr. 2016, 15:00

Re: Custom page

Message 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
Rpi3 Domoticz v3.9389 - RFX433e - Kira128

Odroid C2/OpenPHT/ Pour le salon
Rpi3/Rasplex/ Pour la chambre

Rpi2/Runeaudio/ Pour le salon + terrasse
Rpi2 hifiberry AMP+/Runeaudio/ pour la sdb

Que j'aime ces petites bestioles !!!
Haut
deennoo
Messages : 4036
Inscription : 25 janv. 2015, 02:00

Re: Custom page

Message 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.
De quoi se faire Plaisir et essayer d'aider...
http://www.domo-attitude.fr
Haut
papoo
Messages : 2029
Inscription : 10 janv. 2016, 11:29
Localisation : Limoges (87)
Contact :
Contacter papoo

Re: Custom page

Message 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é
domoticz beta/RaspBerry PI3 stretch
https://pon.fr github
Haut
nissart
Messages : 145
Inscription : 20 avr. 2016, 15:00

Re: Custom page

Message 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
Rpi3 Domoticz v3.9389 - RFX433e - Kira128

Odroid C2/OpenPHT/ Pour le salon
Rpi3/Rasplex/ Pour la chambre

Rpi2/Runeaudio/ Pour le salon + terrasse
Rpi2 hifiberry AMP+/Runeaudio/ pour la sdb

Que j'aime ces petites bestioles !!!
Haut
deennoo
Messages : 4036
Inscription : 25 janv. 2015, 02:00

Re: Custom page

Message 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 ?
De quoi se faire Plaisir et essayer d'aider...
http://www.domo-attitude.fr
Haut
nissart
Messages : 145
Inscription : 20 avr. 2016, 15:00

Re: Custom page

Message par nissart »

pas de soucis, https://www.somfy.fr/produits/acces/porte-de-garage

Image

Image

Image
Rpi3 Domoticz v3.9389 - RFX433e - Kira128

Odroid C2/OpenPHT/ Pour le salon
Rpi3/Rasplex/ Pour la chambre

Rpi2/Runeaudio/ Pour le salon + terrasse
Rpi2 hifiberry AMP+/Runeaudio/ pour la sdb

Que j'aime ces petites bestioles !!!
Haut
vil1driver
Messages : 5661
Inscription : 30 janv. 2015, 11:07
Localisation : Rennes (35)

Re: Custom page

Message 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
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
Verrouillé

Revenir à « Custom Pages »