Monitor - page météo - phases lunaire

Doudy · Message par **Doudy** » 27 mars 2017, 16:17

Bonjour,

J'ai réinstallé mon Pi avec la dernière version de Domoticz/Monitor
Dans la version précédente, j'avais l'affichage suivant :

Depuis la nouvelle version, je n'arrive plus à afficher la phase lunaire
J'ai procédé comme suit :
- j'ai ajouté le script suivant à la fin de meteo.html

Code : Tout sélectionner

<script type="text/javascript" language="javascript">
//============= 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>

-dans météo.css j'ai ajouté #moon à #meteo3, #meteo25

Code : Tout sélectionner

#meteo3, #meteo25, #moon

- dans météo.css j'ai également ajouté

Code : Tout sélectionner

#moontxt
{
	font-family: arimo;
	font-weight: normal;
	color: #F2DDB3;
	font-size: 14px;
	margin-top: -20px;
	height: 25px;
	line-height: 15px;
	text-shadow: 1px 1px 4px black;
}

- dans météo.html j'ai modifié la ligne suivante :

Code : Tout sélectionner

<!--<div id="ls_meteo25"></div><div id="meteo25">--</div><div id="desc_meteo25">meteo25</div> -->
	  <div id="ls_meteo25"></div><div id="moon"></div><div id="moontxt"></div>

Mais rien ne s'affiche...
Un petit coup de pouce ?
Merci.

papoo · Message par **papoo** » 27 mars 2017, 23:04

tu as bien mis les images au bon endroit?
pour le code ça me semble bon
je te remets le mien au cas ou (meteo.html) avec les liens vers les images dans monitor\icons\meteo\moon

Code : Tout sélectionner

//============= 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 = "moon/moon0.png";
   } else if (theMoon < 29 && theMoon > 23) { 
    moonText = "Dernier croissant";
	moonPNG = "moon/moon7.png";
	
   } else if (theMoon < 23 && theMoon > 22) { 
    moonText = "Dernier quartier";
	moonPNG = "moon/moon6.png";	
   } else if (theMoon < 22 && theMoon > 15) { 
    moonText = "Gibbeuse décroissante";
	moonPNG = "moon/moon5.png";	
   } else if (theMoon < 15 && theMoon > 13) { 
    moonText = "Pleine lune";
	moonPNG = "moon/moon4.png";
   } else if (theMoon < 13 && theMoon > 8) { 
    moonText = "Gibbeuse croissante";
	moonPNG = "moon/moon3.png";
   } else if (theMoon < 8 && theMoon > 6) { 
    moonText = "Premier Quartier";
	moonPNG = "moon/moon2.png";
	
   } else if (theMoon < 6 && theMoon > 1) { 
    moonText = "Premier croissant";
	moonPNG = "moon/moon1.png";
   } else {                     
    moonText = "Nouvelle Lune";
	moonPNG = "moon/moon0.png";
	
	
}

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

Doudy · Message par **Doudy** » 28 mars 2017, 09:48

Bonjour,

Les images sont dans :

Code : Tout sélectionner

Y:\home\pi\domoticz\www\monitor\icons\meteo\moon

et les fichiers suivants :

moon0.png
moon1.png
...
moon7.png

Est-ce qu'il faut modifier quelque chose au niveau de frontpage_settings.js ?

Code : Tout sélectionner

['0' ,' ',       	    'meteo25',                	     	'','','','',''],

J'ai également recopié ton code.
Par contre pas d'affichage !
Une autre idée ?

Nemesis24 · Message par **Nemesis24** » 28 mars 2017, 11:14

Bonjour,

Code : Tout sélectionner

['0' ,' ',              'meteo25',                           '','','','',''],

je penses que su tu n'a rien entre le '0' +++++++ et le 'meteo25', tu n'aura rien à l'écran.

Doudy · Message par **Doudy** » 28 mars 2017, 11:39

Nemesis24 a écrit :je penses que su tu n'a rien entre le '0' +++++++ et le 'meteo25', tu n'aura rien à l'écran.

C'est simplement de la tabulation
Je ne comprends pas bien ta remarque. Désolé.

Nemesis24 · Message par **Nemesis24** » 28 mars 2017, 14:15

Code : Tout sélectionner

['0' ,' ',

devrait être

Code : Tout sélectionner

['0' ,'Html',

et au vu du script la ligne devrait être genre

Code : Tout sélectionner

['0' ,'Html',              'meteo25',                           '<span id="moon"></span></br><span id="moontext"></span>','','','',''],

ou alors dans le script tout à la fin, il faut changer le (.selector) #moon et #moontext en #meteo24 et #meteo25 par exemple

Message par **vil1driver** » 28 mars 2017, 15:26

day mois et annee ne sont pas définis !
ceci génère donc une erreur et plante toute la suite (visible par une simple pression sur F12...)

Code : Tout sélectionner

var theMoon = moonAge(day, mois, annee)

il faut ajouter ceci au début du script

Code : Tout sélectionner

maintenant = new Date();
day = maintenant.getDate();
mois = maintenant.getMonth()+1;
annee = maintenant.getFullYear();

+1 pour némésis, pas besoin d'ajouter des div, autant utiliser l'existant
pas de modif css
pas de modif html autre que l'ajout du script à la toute fin
rien à mettre du tout dans settings

voici le script à ajouter à la toute fin du fichier meteo25.html

Code : Tout sélectionner

<script>
//============= phases lunaire ========================
//source https://forums.coronalabs.com/topic/54547-source-for-moon-cycles-phases/
maintenant = new Date();
//console.log( " maintenant : " + maintenant )
day = maintenant.getDate();
//console.log( " jour : " + jour )
mois = maintenant.getMonth()+1;
//console.log( " mois : " + mois ) 
annee = maintenant.getFullYear();
//console.log( " annee : " + annee )

   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";
   
   
}

$('#desc_meteo25').html(moonText);
$('#meteo25').html('<img src="./icons/meteo/moon/'+moonPNG+'" width=130 height=130>');
</script>

je peux aussi directement ajouter la fonction au code de base de monitor et permetre ainsi de directement choisir où l'on va vouloir voir la phase lunaire...avec un simple ajout au setting
par exemple

Code : Tout sélectionner

['','Moon','meteo25',''],

ou

Code : Tout sélectionner

['','Moon','cell25',''],

ça vous dirait ?

le mieux serait encore de modifier les icons météo de la nuit pour avoir autant de variantes que de phases lunaires..
ainsi on aurait le temps et la phase dans un seul icon

avis aux photoshopeurs

.. juste 80 icons en tout

papoo · Message par **papoo** » 28 mars 2017, 18:44

J'avais pas mis tout mon script pour rester concis étant donné qu'il avait déjà été installé
@vil1driv3r : C'est toujours mieux quand c'est intégré au script ça évite les modifs à chaque mise à jour
Après d'avoir que la lune c'est pas mal aussi ça permet de ne le mettre que si on le souhaite sans toucher au reste
Et connaître l'état de la lune la journée cest bien pour les jardiniers ( ce qui n'est pas mon cas)

Jeff · Message par **Jeff** » 28 mars 2017, 19:59

je peux aussi directement ajouter la fonction au code de base de monitor et permetre ainsi de directement choisir où l'on va vouloir voir la phase lunaire...avec un simple ajout au setting
par exemple
CODE : TOUT SÉLECTIONNER
['','Moon','meteo25',''],

Oui oui une fonction de base @Vil1driver

Nemesis24 · Message par **Nemesis24** » 28 mars 2017, 20:53

C'est integré dans mon code

lever de lune
coucher de lune
phase de la lune

Forum Domoticz en français

Monitor - page météo - phases lunaire

Monitor - page météo - phases lunaire

Re: Monitor - page météo - phases lunaire

Re: Monitor - page météo - phases lunaire

Re: Monitor - page météo - phases lunaire

Re: Monitor - page météo - phases lunaire

Re: Monitor - page météo - phases lunaire

Re: Monitor - page météo - phases lunaire

Re: Monitor - page météo - phases lunaire

Re: Monitor - page météo - phases lunaire

Re: Monitor - page météo - phases lunaire