Rédaction le 13/12/2018
Mise à jour le 18/05/2019
Nouvelle mise à jour le 15/06/2019 – Darksky limité !

Depuis début Juin 2019, Darksky a limité, voir bloqué les comptes. Le débat n’est pas sur le fait que les API deviennent payantes ou non. J’ai donc fait le choix de contourner ce problème en repassant par des plugins officiels comme weather (Jeedom) ou de récupérer des données directement sur le web. Il existe la solution de créer un compte et de générer une nouvelle clé API en limitant vos appels aussi ! (paramétrez les crons en page de configuration du plugin)

Update de l’été 2019

Cet article permet de fixer quelques bases de design et d’avoir quelques informations le matin au réveil ou sur des situations exceptionnelles.

Quelques trucs basiques, mais bien utiles !

Là encore, mon expérience :

• il existe des designs de magnifiques plugins ou widgets qui permettent d’afficher la météo ou l’heure … oui ! Weather, plugin officiel de Jeedom ; Darksky payant ; un widget façon horloge HTC avec la météo etc.
• MAIS ! Tous ont des animations qui ne sont pas compatibles avec l’utilisation de JPI ou FullyKiosk et génère une page avec un bout de l’animation et votre page reste bloquée dessus… bêtement ! Waow, l’aspect WAF (Wife Acceptation Factor – terme marketing des années 50 désignant l’acceptation de la technologie / à l’origine l’électroménager par son épouse – vient d’en prendre un coup).
• Beaucoup de météo ne sont pas fiables après plusieurs jours d’utilisation, on (mon épouse) a trouvé …

Je me suis rendu compte que :

• Les météos à base de Darksky le sont !
• L’excellent plugin animé et payant est très bien, mais on ne peut pas changer la couleur du texte du widget …
• Coupler horloge et météo était vite illisible ;
• Il fallait mettre en forme le texte des “Saint du Jour” qui était vite à rallonge.
• L’alerte météo en soit n’est pas utile sauf au moment où tu aimerais bien savoir que tu vas te faire “allumer” …

Donc voici ma proposition pour gérer tout cela !

Pré-requis :

• Un plugin Telegram ou autre plugin de notification ;
• Vos cordonnées GPS – Maps est votre ami !
• Le plugin Domogeek paramétré (relire l’article pour le lever-coucher de soleil) ;
• Les plugins virtuel et widget en place sur votre Jeedom ;
• Ajout 06/2019 : Point de rosée, Vigilance météo, Weather, script si vous souhaitez récupérer des informations directement sur Internet ;
• Et bein y a plus qu’à !

Paramétrez votre météo

Comme le plugin Darksky ne me permettait pas d’afficher une météo en texte noir – mon design étant sur fond clair – il a fallu que je me tourne vers un widget permettant de le faire. Un merci à propositionjoe pour sa “proposition” :

https://weatherwidget.io/

Allez sur le site et configurez votre widget à travers les 4 onglets Settings / Options / Themes / Customize :

• onglet Settings :
  • entrez la ville et sélectionnez-la dans la liste proposée ;
  • les 2 labels sont facultatifs, personnellement je sais que la météo affichée est celle de ma ville, donc je ne mets rien ;
• onglet Options :
  • choisissez votre police, personnellement je modifierai dans le code final pour avoir Montserrat propre à mon design ;
  • le package d’icônes – Climacons Animated pour avoir la météo en animation ;
  • Current / Forecast pour avoir la météo du jour et la prévision : both les 2 etc ;
  • Forecast Days : le nombre de jours de prévision ;
• onglet Themes :
  • choisissez votre thème, Flat/Pure que je modifierai pour être transparent et avoir mon fond d’écran de design ;
• onglet Customize :
  • pour avoir le fond en transparent, supprimez le texte entré dans Background ;
  • Indiquez Accent : rgba(1, 1, 1, 0.02) ;
  • Indiquez Text : #000000 ;
  • Get Code pour avoir votre code !

Copiez-coller votre code obtenu en cliquant sur Get Code. Vous pouvez ajouter data-font=”Montserrat”  dans la classe weatherwidget-io avant data-icons par exemple pour avoir une police différente de la liste…

EDIT du 18/05/2019 : grâce à l’aide d’un membre du forum, il y a un script à ajouter dans la dernière ligne pour permettre le rafraichissement auto du widget au chargement du design ! Au top donc. Merci à lui ! Remlacez votre ligne <script>…</script> par celle-ci ou ajoutez en fin de ligne après le dernier; __weatherwidget_init();

<script>
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src='https://weatherwidget.io/js/widget.min.js';fjs.parentNode.insertBefore(js,fjs);}}(document,'script','weatherwidget-io-js');
__weatherwidget_init();</script>

Gardez-le au chaud dans un bloc-notes pour l’instant…

Le reste des informations météo

Libre à chacun de procéder ainsi, mais j’utilise :

• le plugin Domogeek pour :
  • récupérer le lever/coucher de soleil ;
  • l’information de la vigilance météo ;
  • le saint du jour mis en forme ;
• le plugin Darksky payant ou Weather pour avoir :
  • la probabilité de pluie ;
  • l’index UV ;
  • le point de rosée ;
  • l’humidité extérieure etc.

Libre à vous, vous pourriez ajouter la vitesse du vent ou autre chose !

Pour cela, je passe encore et toujours par un virtuel pour récupérer :

• l’index UV ;
• l’état de la vigilance météo ;
• le point de rosée ;
• l’humidité extérieure ;
• le pourcentage de précipitations ;
• le lever – coucher de soleil (ici une variante je vous montre une fonction glanée sur un excellent tutoriel sur le forum).

Pour récupérer le lever/coucher de soleil, on peut passer par les fonctions suivantes :

• lever : date_sunrise(#timestamp# ,1,latitude,longitude, 90+35/60, date(“Z”,#timestamp#)/3600)
• coucher : date_sunset(#timestamp# ,1,latitude,longitude, 90+35/60, date(“Z”,#timestamp#)/3600)
• ces éléments sont récupérés par la position de mon domicile dans le plugin Geoloc.

Je vous renvoie vers le post sur le forum très clair.

Et voici les widgets à créer & appliquer – ce sont ceux qui me servent pour l’ensemble de mes designs – même méthode que dans l’article expliquant virtuel/widget pour le pilotage des lumières.

Pour les informations de type numérique :

<link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
<div style="min-width:130px;min-height:20px;margin-right: 3px;margin-left: 3px;padding:0px !important;font-family:Montserrat, Arial; font-weight:normal;color:rgba(0,0,0,1);" class="cmd #history# container-fluid tooltips cmd cmd-widget" data-type="info" data-subtype="numeric" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#;">
	<center>
		<div style="font-weight: bold;font-size : 18px;#hideCmdName#">#name_display#</div>
		<span style="font-weight: bold;" class="pull-right">#unite#</span>
		<span style="font-size: 2.5em;font-weight: bold;" class="center-block state"></span>
		<div style="#displayHistory# font-size: 0.8em;" class="col-xs-12 center-block">
			<span title='Min' class='tooltips'>#minHistoryValue#</span>|<span title='Moyenne' class='tooltips'>#averageHistoryValue#</span>|<span title='Max' class='tooltips'>#maxHistoryValue#</span> <i class="#tendance#"></i>
		</div>
	</center>
	<script>
		jeedom.cmd.update['#id#'] = function(_options){
			$('.cmd[data-cmd_id=#id#]').attr('title','Valeur du '+_options.valueDate+', collectée le '+_options.collectDate)
			$('.cmd[data-cmd_id=#id#] .state').empty().append(_options.display_value);
		}
		jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});
	</script>
</div>

Pour les informations de type autre :

<link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
<div align=center style="min-width:130px;min-height:20px;margin-right: 3px;margin-left: 3px;padding:0px !important;font-family:Montserrat, Arial; font-weight:normal;color:rgba(0,0,0,1);" class="cmd #history# container-fluid tooltips cmd cmd-widget" data-type="info" data-subtype="numeric" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#;">
	<center>
		<div style="font-weight: bold;font-size : 18px;#hideCmdName#">#name_display#</div>
		<span style="font-weight: bold;" class="pull-right">#unite#</span>
		<span style="font-size: 2.5em;font-weight: bold;" class="center-block state"></span>
		<div style="#displayHistory# font-size: 0.8em;" class="col-xs-12 center-block">
			<span title='Min' class='tooltips'>#minHistoryValue#</span>|<span title='Moyenne' class='tooltips'>#averageHistoryValue#</span>|<span title='Max' class='tooltips'>#maxHistoryValue#</span> <i class="#tendance#"></i>
		</div>
	</center>
	<script>
		jeedom.cmd.update['#id#'] = function(_options){
			$('.cmd[data-cmd_id=#id#]').attr('title','Valeur du '+_options.valueDate+', collectée le '+_options.collectDate)
			$('.cmd[data-cmd_id=#id#] .state').empty().append(_options.display_value);
		}
		jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});
	</script>
</div>

Pareil, à ce stade, on s’arrête là …

Le saint du jour

Là encore, le saint du jour est souvent à rallonge…

Une proposition m’avait été faite sur le forum de limiter à 3 saints du jour, fort pratique. Créez un virtuel de type autre qui utilise une fonction de limitation de la chaine de caractères :

substr(#[Votreobjet][ObjetDomogeek][Saint du jour]#,0,80)

Ensuite créez (activer/visible/sauver) un scénario de code qui se déclenche sur un changement de ce saint du jour – déclencheur votre commande Saint du jour : #[Objet][ObjetDomogeek][Saint du jour]# !

Remplacez [Objet][ObjetDomogeek][Saint du jour] par l’emplacement de votre Saint du Jour dans le plugin Domogeek ou ailleurs dans le code (ajout/code) :

#récupération du St du jour avec limite à 3
$cmdSaint = cmd::byString('#[Objet][ObjetDomogeek][Saint du jour]#');
$valeurSaint = $cmdSaint->execCmd();
$_Saint = explode(',',$valeurSaint);
$valeurSaint = "";
$Nb = count($_Saint);
if ($Nb > 3) { 
	$Nb=3;
}
if ($Nb>0) {
	for($i=0;$i<$Nb;$i++) {
    	$valeurSaint = $valeurSaint. $_Saint[$i];
		if ($i<$Nb-1)  {
			$valeurSaint = $valeurSaint.', ';
		}
	}
}
cmd::byString('#[Objet][ObjetDomogeek][Saint du jour]#')->event(($valeurSaint));

Là encore, on range…

Le design !

On y arrive :

• pour la météo : bouton droit sur votre design / ajouter texte-html et copiez-collez votre code dans le champ texte.

Personnellement, je l’ai mis dans un div container pour faciliter le déplacement. Modifiez la largeur et la hauteur en accord avec la partie Général de votre élément. Ce qui donne :

<!--Créé sur le site https://weatherwidget.io/ !-->

<div id="container" style="min-width: 558px; height: 119px;">

  <!-- Début du script du site !-->

COPIER-COLLER ICI LE CODE OBTENU SUR LE SITE

<!-- Fin du script du site !-->
</div>

La météo est ajoutée à votre design !

• Pour l’horloge, pareil mais copiez-coller ce code :

<div style="text-align:center;padding:1em 0;"> <h2><a style="text-decoration:none;" href="https://www.zeitverschiebung.net/fr/city/XXXXX"><span style="color:gray;"></a></h2> <iframe src="https://www.zeitverschiebung.net/clock-widget-iframe-v2?language=fr&size=large&timezone=Europe%2FParis" width="100%" height="140" frameborder="0" seamless></iframe> </div>

Vous avez votre horloge animée avec les secondes. Envie de plus de modification :

https://www.zeitverschiebung.net/fr/clock-widget

• Pour les autres informations, ajoutez simplement la commande que vous souhaitez au design en cliquant droit sur votre design ; ajouter commande et naviguez dans vos objets pour sélectionner les éléments.
• Pour ajouter un simple champ de texte avec la bonne police ajoutez un code HTML :

<link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
<div align=center style="color:rgba(0,0,0,1); font-size:14px; height:30px; padding-top:5px; font-family:Montserrat, Arial;; font-weight:normal;">
<strong>VOTRE TEXTE :</strong>
</div>

• Pour ajouter un simple icône “soleil” ou un autre que vous pouvez sélectionner (recopier son nom à la place de meteo-soleil), là encore ajoutez un simple champ de texte. Vous pouvez modifier la taille, la couleur avec les bons mots clés (white, red, green etc) :

  <i class="icon meteo-soleil" style="font-size:20px;color:black;"></i>

Les scénarios

Quelques exemples ici mais libre à vous de faire les vôtres !

Notifications météo pour la vigilance par Telegram. La condition de test pour une chaine de caractère de type autre est un peu plus compliquée qu’un simple == n’est-ce pas !

Je déclenche mon scénario sur les déclencheurs suivants :

• [Extérieur][Vigilance Météo France][Vigilance]
• [Usages][Today_Domogeek][Vigilance inondation]
• [Usages][Today_Domogeek][Vigilance météo]
• [Extérieur][Virtuel Météo][Index UV]

Ce qui me donne comme scénario :

Un autre mis en place sur une installation, tous les jours à 7h – en programmé (soit 0 7 * * *) :

• je teste si jour férié ou non ;
• je teste si vacances scolaires ou non …
• je ne montre que le SI ALORS … mais vous avez compris le SINON …

De même, vous pouvez faire la même chose en vocal (TTS) par JPI ou tout autre interface qui parlera – article à suivre !

Update Juin 2019

Utilisant un virtuel pour passer les informations à afficher, j’ai modifié les données sources pour prendre les informations différemment. Non plus Darksky, mais Weather, Vigilance Meteo, Point de Rosée :

Concernant la récupération des informations de précipitations à Xh ou l’index UV, je vous engage à lire les informations proposées par winhex sur le forum directement ! Je ne fais que passer l’information depuis une variable qui est traitée par scénario. J’ai aussi ajouté un passage de l’information de givre en pilotant une petite LED rouge/vert si l’alerte givre est déclenché. Cela nous notifie en TTS et Telegram…

Un article qui reprend les bases des scénarios, du design avec des codes HTML extérieurs sur un exemple clair : la météo, les informations du jour.

Il existe d’autres horloges, d’autres météos dans Jeedom, fouillez, amusez-vous bien. Gardez à l’esprit par contre que pour une intégration tablette, pas mal de plugins/codes bloquent en animation.

La conclusion de cet article !

Si vous avez aimé cet article, faites-le savoir, partagez-le ! Et n’hésitez pas à me supporter 🙂 !

Merci à vous !