Widget weather-clock

[breizh22]

Voici le code avec la transparence, ça fonctionne bien. J'ai changé deux valeurs, la valeur de la margin-left de la temp min/max et aussi celle de la temp h2 qui était pour moi trop à droite.

Je voulais remercier grandement damanujan pour le partage de ses divers widgets.

Code : Tout sélectionner

<div style="width:300px;min-height:300px;vertical-align: top;" class="cmd #history# tooltips cmd-widget" data-type="info" data-subtype="numeric" data-cmd_id="#id#" data-cmd_uid="#uid#" title="Valeur du #valueDate#">
    <center>
        <span style="font-size: 2.5em;" class="action" id="iconCmd#uid#">
          <div  class="bandClock">
            <div id="Date"></div>
            <div id="weather"></div>
          </div>
        </span>
    </center>
</div>
<style>
@font-face {
    font-family: 'weather';
    src: url('plugins/widget/core/template/dashboard/cmd.info.string.Weather-Clock/artill_clean_icons-webfont.eot');
    src: url('plugins/widget/core/template/dashboard/cmd.info.string.Weather-Clock/artill_clean_icons-webfont.eot?#iefix') format('embedded-opentype'),
         url('plugins/widget/core/template/dashboard/cmd.info.string.Weather-Clock/artill_clean_icons-webfont.woff') format('woff'),
         url('plugins/widget/core/template/dashboard/cmd.info.string.Weather-Clock/artill_clean_icons-webfont.ttf') format('truetype'),
         url('plugins/widget/core/template/dashboard/cmd.info.string.Weather-Clock/artill_clean_icons-webfont.svg#artill_clean_weather_iconsRg') format('svg');
    font-weight: normal;
    font-style: normal;
}

  
#Date { 
  width: 175px;
  text-align: center;
  font-family: Arial, Helvetica, sans-serif;
  font-size:16px;
  color: #fff;
  position: absolute; 
  margin-top: -45px;
  margin-left: 63px;
 }

#weather {
  width: 500px;
  margin: 0px auto;
  text-align: center;
  text-transform: uppercase;

}

#weather i {
  color: #00bcfb;
  font-family: weather;
  font-size: 70px;
  font-weight: normal;
  font-style: normal;
  line-height: 1.0;
  text-transform: none;

}

.icon-0:before { content: ":"; }
.icon-1:before { content: "p"; }
.icon-2:before { content: "S"; }
.icon-3:before { content: "Q"; }
.icon-4:before { content: "S"; }
.icon-5:before { content: "W"; }
.icon-6:before { content: "W"; }
.icon-7:before { content: "W"; }
.icon-8:before { content: "W"; }
.icon-9:before { content: "I"; }
.icon-10:before { content: "W"; }
.icon-11:before { content: "I"; }
.icon-12:before { content: "I"; }
.icon-13:before { content: "I"; }
.icon-14:before { content: "I"; }
.icon-15:before { content: "W"; }
.icon-16:before { content: "I"; }
.icon-17:before { content: "W"; }
.icon-18:before { content: "U"; }
.icon-19:before { content: "Z"; }
.icon-20:before { content: "Z"; }
.icon-21:before { content: "Z"; }
.icon-22:before { content: "Z"; }
.icon-23:before { content: "Z"; }
.icon-24:before { content: "E"; }
.icon-25:before { content: "E"; }
.icon-26:before { content: "3"; }
.icon-27:before { content: "a"; }
.icon-28:before { content: "A"; }
.icon-29:before { content: "a"; }
.icon-30:before { content: "A"; }
.icon-31:before { content: "6"; }
.icon-32:before { content: "1"; }
.icon-33:before { content: "6"; }
.icon-34:before { content: "1"; }
.icon-35:before { content: "W"; }
.icon-36:before { content: "1"; }
.icon-37:before { content: "S"; }
.icon-38:before { content: "S"; }
.icon-39:before { content: "S"; }
.icon-40:before { content: "M"; }
.icon-41:before { content: "W"; }
.icon-42:before { content: "I"; }
.icon-43:before { content: "W"; }
.icon-44:before { content: "a"; }
.icon-45:before { content: "S"; }
.icon-46:before { content: "U"; }
.icon-47:before { content: "S"; }


  
#weather h2 {
  position: absolute;
  width: 175px;
  margin-top: 145px;
  margin-left: 42px;
  color: #fff  ;
  font-size: 42px;
  font-weight: 300;
  text-align: center;
  text-shadow: 0px 1px 3px rgba(0, 0, 0, 0.15);
}


#weather .conditions {
  width: 175px;
  margin-top : 60px;
  margin-left: 60px;
  padding: 0;
  font-size:12px;
  color: #fff;
  position: absolute;
  text-transform: none;
  text-align: center;
  border-radius: 5px;
}

#weather .max {
  width: 20px;
  margin-top : 20px;
  margin-left: 217px;
  padding: 0;
  font-size: 16px;
  font-family: Arial, Helvetica, sans-serif;
  color: #00bcfb;
  position: absolute;
  text-align: center;
  text-decoration : underline;
}

#weather .min {
  width: 20px;
  margin-top : 35px;
  margin-left: 217px;
  padding: 0;
  font-size: 16px;
  font-family: Arial, Helvetica, sans-serif;
  color: #00bcfb;
  position: absolute;
  text-align: center;
}

</style>

<script src="plugins/widget/core/template/dashboard/cmd.info.string.Weather-Clock/jquery.simpleWeather.js"></script>

<script type="text/javascript">
  
/*
Band Clock is a jquery plugin to display a dynamic band clock.
Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php)
and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses.
Built on top of the jQuery library (http://jquery.com)
@source: http://github.com/zaniitiin/band-clock/
@autor: Nitin Jha
@version: 1.0
 */
(function($) {
  $.bandClock = function(el, options) {
    var degToRed, renderTime;
    this.el = el;
    this.$el = $(el);
    this.$el.data('bandClock', this);
    this.init = (function(_this) {
      return function() {
        var scaleBy, _x;
        _this.options = $.extend({}, $.bandClock.defaultOptions, options);
        _this.canvas = $("<canvas width='" + _this.options.size + "' height='" + _this.options.size + "' ></canvas>").get(0);
        _this.$el.append(_this.canvas);
        _this.ctx = _this.canvas.getContext('2d');
        if (window.devicePixelRatio > 1) {
          scaleBy = window.devicePixelRatio;
          $(_this.canvas).css({
            width: _this.options.size,
            height: _this.options.size
          });
          _this.canvas.width *= scaleBy;
          _this.canvas.height *= scaleBy;
          _this.ctx.scale(scaleBy, scaleBy);
        }
        _this.$el.addClass('bandClock');
        _this.$el.css({
          width: _this.options.size,
          height: _this.options.size,
          lineHeight: "" + _this.options.size + "px"
        });
        _x = _this.options.size / 2;
        _this.ctx.translate(_x, _x);
        _this.ctx.shadowBlur = 2;
        _this.ctx.shadowColor = _this.options.color;
        return _this;
      };
    })(this);
    degToRed = function(degree) {
      var factor;
      factor = Math.PI / 180;
      return degree * factor;
    };
    renderTime = (function(_this) {
      return function() {
        var hours, milliseconds, minutes, newSeconds, now, seconds, time, _g, _r, _r1, _r2, _x;
        _x = _this.options.size / 2;
        _g = _this.options.gap;
        _r = _x - (_this.options.lineWidth + 2);
        _r1 = _r - (_g + _this.options.lineWidth);
        _r2 = _r1 - (_g + _this.options.lineWidth);
        
        _this.ctx.save();
        _this.ctx.setTransform(1, 0, 0, 1, 0, 0);
        _this.ctx.clearRect(0, 0, 300, 300);
        _this.ctx.restore();
        
        _this.ctx.fillStyle = _this.options.bgColor;
        _this.ctx.fillRect(-_x, -_x, _this.options.size, _this.options.size);
        _this.ctx.strokeStyle = _this.options.color;
        _this.ctx.lineWidth = _this.options.lineWidth;
        _this.ctx.lineCap = _this.options.lineCap;
        now = new Date();
        hours = now.getHours();
        minutes = now.getMinutes();
        seconds = now.getSeconds();
        milliseconds = now.getMilliseconds();
        newSeconds = seconds + (milliseconds / 1000);
        time = now.toLocaleTimeString();
        _this.ctx.beginPath();
        if (_this.options.hourFormat == '24') {
           _this.ctx.arc(0, 0, _r, degToRed(270), degToRed((hours * 15) - 90));
        } else {
           _this.ctx.arc(0, 0, _r, degToRed(270), degToRed((hours * 30) - 90));
        }
        _this.ctx.stroke();
        _this.ctx.beginPath();
        _this.ctx.arc(0, 0, _r1, degToRed(270), degToRed((minutes * 6) - 90));
        _this.ctx.stroke();
        _this.ctx.beginPath();
        _this.ctx.arc(0, 0, _r2, degToRed(270), degToRed((newSeconds * 6) - 90));
        _this.ctx.stroke();
        _this.ctx.font = _this.options.fontStyle;
        _this.ctx.fillStyle = _this.options.color;
        _this.ctx.textAlign = "center";
        _this.ctx.fillText(time, 0, 0);
        return _this;
      };
    })(this);
    setInterval(renderTime, 40);
    return this.init();
  };
  $.bandClock.defaultOptions = {
    size: 300,
    color: '#18FFFF',
    bgColor: '#212121',
    lineWidth: 10,
    lineCap: 'butt',
    gap: 5,
    fontStyle: '20px Verdana',
    hourFormat: '12'
  };
  $.fn.bandClock = function(options) {
    return $.each(this, function(i, el) {
      var $el, instanceOptions;
      $el = $(el);
      if (!$el.data('bandClock')) {
        instanceOptions = $.extend({}, options, $el.data());
        return $el.data('bandClock', new $.bandClock(el, instanceOptions));
      }
    });
  };
  return void 0;
})(jQuery);
  
// météo simpleWeather
$(document).ready(function() {
  $.simpleWeather({
    				 // <-------------------------------------------------------------------------------------	
    woeid: '615702', // <------------------------- REMPLACER PAR LE CODE WOEID DE VOTRE REGION  (Paris=615702)
    				 // on peut trouver le WOEID sur le site   http://isithackday.com/geoplanet-explorer/	
    unit: 'c',
    success: function(weather) {
      html = '<h2><i class="icon-'+weather.code+'"></i> '+weather.temp+'&deg;'+weather.units.temp+'</h2>'; // ou remplacer weather.temp par  Math.round(parseFloat("#state#")) si le virtuel est le résultat d'une sonde de température   
      html += '<div class="conditions">'+checkWXLang(weather.currently)+'</div>';
      html += '<div class="max" title="Température maximum">'+weather.high+'°</div>';
      html += '<div class="min" title="Température minimum">'+weather.low+'°</div>';  			
      $("#weather").html(html);
    },
    error: function(error) {
      $("#weather").html('<p>'+error+'</p>');
    }
  });
});

// bandClock - Cercles Horloge 
$(document).ready(function() {
        $('.bandClock').bandClock({
          //configure here
          size: 300,
          bgColor: 'rgba(0,0,0,0)', // couleur de fond (pas de transparence possible dans la partie Design)
          color: '#00bcfb', 
          // lineWidth:  ,
          // lineCap: 'butt' ,
          // gap: ,
          fontStyle:'38px verdana'
        });
      });
  
  
// Date
$(document).ready(function() {
  // Create two variable with the names of the months and days in an array
  var monthNames = [ "janvier", "février", "mars", "avril", "mai", "juin", "juillet", "aout", "septembre", "octobre", "novembre", "décembre" ]; 
  var dayNames= ["dimanche","lundi","mardi","mercredi","jeudi","vendredi","samedi"]

  // Create a newDate() object
  var newDate = new Date();
  // Extract the current date from Date object
  newDate.setDate(newDate.getDate());
  // Output the day, date, month and year   
  $('#Date').html(dayNames[newDate.getDay()] + " " + newDate.getDate() + ' ' + monthNames[newDate.getMonth()] );

  setInterval( function() {
	// Create a newDate() object and extract the seconds of the current time on the visitor's
	var seconds = new Date().getSeconds();
	// Add a leading zero to seconds value
	$("#sec").html(( seconds < 10 ? "0" : "" ) + seconds);
	},1000);
	
  setInterval( function() {
	// Create a newDate() object and extract the minutes of the current time on the visitor's
	var minutes = new Date().getMinutes();
	// Add a leading zero to the minutes value
	$("#min").html(( minutes < 10 ? "0" : "" ) + minutes);
    },1000);
	
  setInterval( function() {
	// Create a newDate() object and extract the hours of the current time on the visitor's
	var hours = new Date().getHours();
	// Add a leading zero to the hours value
	$("#hours").html(( hours < 10 ? "0" : "" ) + hours);
    }, 1000);	
});

//  Traduction météo anglais -> français
function checkWXLang(weather){
        	 
      for (var key in myWXcodes) {
                if (key.toLowerCase() === weather.toLowerCase()){
                    var myWX = myWXcodes[key];
                    return myWX;
                } 
           } 
	  return weather;
      }
  
  var myWXcodes = ({
        "Tornado":"Tournade",
        "Tropical Storm":"Tempête Tropicale",
        "Hurricane":"Ouragan",
        "Sever Thunderstorms":"Orages Violents",
        "Thunderstorms":"Orages",
        "Mixed rain and snow":"Mélange de pluie et neige",
      	"Rain and Snow":"Pluie et Neige",
      	"Light Rain":"Pluie Légère",
        "Mixed rain and sleet":"Mélange de pluie et grésil",
        "Mixed snow and sleet":"Mélange de neige et grésil",
        "Freezing drizzle":"Bruine Verglaçante",
        "Freezing drizzle":"Bruine Verglaçante",
        "Drizzle":"Bruine",
        "Freezing rain":"Pluie verglaçante",
        "Showers":"Pluie",
        "Snow Flurries":"Averse de neige",
        "Light snow showers":"Averse de neige légère",
        "Blowing snow":"Poudrerie",
        "Snow":"Neige",
        "Hail":"Grêle",
        "Sleet":"Grésil",
        "Dust":"Poussièreux",
        "Foggy":"Brûmeux",
      	"Fog":"Brouillard",
        "Haze":"Brûme",
        "Smoky":"Brûme",
      	"Smoke":"Brûmeux",
        "Blustery":"Blustery",
        "Windy":"Venteux",
        "Cold":"Froid",
        "Cloudy":"Nuageux",
        "Mostly Cloudy (night)":"Quelques éclaircies (nuit)",
        "Mostly Cloudy (day)":"Quelques éclaircies (jour)",
      	"Mostly Cloudy":"Eclaircies",
        "Party Cloudy (night)":"Partiellement nuageux (nuit)",
        "Partly Cloudy (day)":"Partiellement nuageux (jour)",
        "Clear (night)":"Clair (nuit)",
      	"Clear":"Temps clair",
        "Sunny":"Ensoleillé",
        "Fair (night)":"Beau (nuit)",
        "Fair (day)":"Beau (jour)",
        "Fair":"Beau temps",
      	"Fairy":"Beau temps",
        "Mixed rain and hail":"Pluie verglassante",
        "hot":"Chaud",
        "Isolated Thunderstorms":"Orages isolés",
        "Scattered Thunderstorms":"Orages éparses",
        "Scattered showers":"Pluie éparse",
        "Heavy Snow":"Fortes chûtes de neige",
        "Partly Cloudy":"Partiellement nuageux",
        "Thundershowers":"Averses orageuses",
        "Snow Showers":"Averses de neige",
        "Isolated Thundershowers":"Orages isolés"
    });


</script>

[damanujan]

Pour la position, ce n'est pas facile à trouver le bon compromis... car si la température tombe en-dessous des -10°, l'icône météo chevauche le cercle des secondes.

@breizh22: fais le test en remplaçant weather.temp par '-12' par exemple...

[damanujan]

Mise à jour publiée aujourd'hui:

- Créer la variable WCwoeid dans l'élément virtuel, dans la partie
configuration commande->affichage avancé->Paramètres optionnels widget
et donner votre valeur WOEID disponible sur le site
http://isithackday.com/geoplanet-explorer/
Par défaut: WCwoeid = celui de Paris

- Créer la variable WCcolor = couleur de l'heure digitale et des cercles

- Créer la variable WCbgcolor = couleur de fond (absolument au format RGB)
rgb (0,0,0,0) = transparent (par défaut)

[xtemmos]

Mise à jour publiée aujourd'hui:

- Créer la variable WCwoeid dans l'élément virtuel, dans la partie
configuration commande->affichage avancé->Paramètres optionnels widget
et donner votre valeur WOEID disponible sur le site
http://isithackday.com/geoplanet-explorer/
Par défaut: WCwoeid = celui de Paris

- Créer la variable WCcolor = couleur de l'heure digitale et des cercles

- Créer la variable WCbgcolor = couleur de fond (absolument au format RGB)
rgb (0,0,0,0) = transparent (par défaut)

Salut, tu as prévu une version mobile? l'affichage n'est pas bon sur iphone.
Merci en tout cas, super jolie !

[totovaauski]

Bonsoir
Pourquoi ca fonctionne chez d'autres et pas chez moi ? (a lire sur le ton du mec jaloux .. )

WeatherClock.png (85.68 Kio) Consulté 2164 fois

Voiçi la ligne qui merdoit :

Code : Tout sélectionner

https://query.yahooapis.com/v1/public/yql?format=json&rnd=20162620&diagnostics=true&callback=jQuery22103801447563247833_1458414209905&q=select%20*%20from%20weather.forecast%20where%20woeid=615702%20and%20u=%22c%22&_=1458414209906

Meme PB avec mon woeid perso ...

[Claude69]

J'ai un problème avec le format de l'heure sur iPad (Chrome). Aucun soucis sur les autres IHM

image.jpeg (60.77 Kio) Consulté 2157 fois

Une idée pour corriger ?

[breizh22]

Pour la position, ce n'est pas facile à trouver le bon compromis... car si la température tombe en-dessous des -10°, l'icône météo chevauche le cercle des secondes.

@breizh22: fais le test en remplaçant weather.temp par '-12' par exemple...

Oui, ce n'est pas évident effectivement, et bien sur, ce n'était pas un reproche, loin de cela

j'ai essayé la temp - 12 comme exemple, ça passe bien apparemment

encore merci pour le partage

[damanujan]

Pour la position, ce n'est pas facile à trouver le bon compromis... car si la température tombe en-dessous des -10°, l'icône météo chevauche le cercle des secondes.

@breizh22: fais le test en remplaçant weather.temp par '-12' par exemple...

Oui, ce n'est pas évident effectivement, et bien sur, ce n'était pas un reproche, loin de cela

j'ai essayé la temp - 12 comme exemple, ça passe bien apparemment

encore merci pour le partage

J'avais bien compris que ce n'était pas un reproche
Au contraire, les suggestions sont les bienvenues... J'ai d'ailleurs repris tes positions en les modifiant légèrement car si tu as -12° et un picto nuageux (double nuage), cela chevauche les cercles bleus... En même temps, chez moi, il fait rarement en dessous de -10°

Une autre solution serait de retirer le 'C' de centigrade qui prend beaucoup de place... juste ° pourrait suffire.

[damanujan]

@totovaauski

Le problème a l'air de venir d'un mauvais WOEID
As-tu les dernières versions des widget et as-tu essayé sans les variables afin qu'il prenne les valeurs par défaut (Paris)
Si cela fonctionne sans les variables, c'est que que ton WOEID est inconnu.

[damanujan]

On peux le rendre customisable par variable effectivement (le woeid, les color, etc...), il faut pensez à mettre des valeurs par défaut pour éviter les problèmes...

Ca pourrait permettre de ne pas afficher la météo par exemple (si on se sert de ton autre widget, ca fait doublon)

@cadavor
Pour vérifier si une variable existe, je teste le premier caractère

Code : Tout sélectionner

var mavariable = '#mavariable#';

J'ai remarqué que si la variable existe, mavariable prend bien sa valeur.
Si elle n'existe pas, mavariable prend la valeur STRING "#mavariable#".
Donc, j'ai pensé à tester le premier caractère. Si c'est un #, alors je conclus que #mavariable# n'existait pas...

Problème:
Quand on veut utiliser une couleur au format hexa, cela commence par un #... donc exclu dans ma méthode, c'est pourquoi je demande d'encoder la couleur au format rgb...

As-tu une autre idée pour détecter si la variable a été créée ?
Merci d'avance.
...
En relisant mon post, une idée m'est venue... Tester le dernier caractère par exemple.
Mais as-tu une autre méthode ?

[totovaauski]

@totovaauski

Le problème a l'air de venir d'un mauvais WOEID
As-tu les dernières versions des widget et as-tu essayé sans les variables afin qu'il prenne les valeurs par défaut (Paris)
Si cela fonctionne sans les variables, c'est que que ton WOEID est inconnu.

J vais contrôler mais pour moi , c'est celui de Paris, justement!

Envoyer avec mon pouce ...

[damanujan]

J vais contrôler mais pour moi , c'est celui de Paris, justement!

Envoyer avec mon pouce ...

Je viens de regarder la requête que ton widget envoie à YahooWeather et ton woeid a l'air correct.

Cela vient peut-être de YahooWeather...
En faisant mes tests, j'ai déjà eu des moments où il ne retourne aucune info mais c'était temporaire.

[totovaauski]

OK, mais le widget météo "officiel" fonctionne bien, sauf si je me trompe mais lui aussi utilise l API de yahoo, et avant de poster j ai laisser du temps au temps (1 nuit en fait).
Question, faut il un cron de rafraîchissement au virtuel? Je ne pense pas mais j pose la question qd même !

Envoyer avec mon pouce ...

[damanujan]

Question, faut il un cron de rafraîchissement au virtuel? Je ne pense pas mais j pose la question qd même !

Ce sera l'auto-actualisation (cron) du virtuel qui fait le rafraîchissement.
Chez moi, je ne l'ai pas modifié.

[damanujan]

On peux le rendre customisable par variable effectivement (le woeid, les color, etc...), il faut pensez à mettre des valeurs par défaut pour éviter les problèmes...

Ca pourrait permettre de ne pas afficher la météo par exemple (si on se sert de ton autre widget, ca fait doublon)

Nouvelle version publiée sur le market ce jour :

- nouvelles variables (options) : WCweather, WCdate et WChour
- possibilité d'utiliser tous les type de code couleur pour WCbgcolor et WCcolor


WCweather : on / off pour l'affichage des données météo
WCdate : on / off pour l'affichage de la date
WChour : 12 ou 24 pour la manière d'afficher le cercle représentant l'heure

[damanujan]

Salut, tu as prévu une version mobile? l'affichage n'est pas bon sur iphone.

@xtemmos
Je n'ai pas prévu de version mobile car, dans Jeedom, sur mon smartphone, je ne me sers que des interrupteurs ou autres actionneurs.
Pour l'heure et la météo, il y a des appli et widget Androïd (ou ios) bien plus jolis et plus complets.
Sur ma tablette, je préfère la version dashboard ou design de Jeedom.

C'est pour ces raisons que je ne compte pas développer la version mobile...

[Claude69]

J'ai un problème avec le format de l'heure sur iPad (Chrome). Aucun soucis sur les autres IHM

La pièce jointe image.jpeg n’est plus disponible

Une idée pour corriger ?

Personne n'a d'idée ?

image.jpeg (61.11 Kio) Consulté 2084 fois

[breizh22]

je n'utilise pas Jeedom en général que mon Ipad 2. Mais je viens d'essayer pour confirmer ou infirmer ce problème chez une autre personne, et je confirme le souci. Ipad 2 sous IOS 9.2.1 et chrome V49.0.2623.73. Même symptôme que sur l'image ci-dessus. J'ai essayé divers réglages sur l'ipad, mais rien à faire. En fait, ça affiche le fuseau horaire, bizarre.

petite correction à voir

var myWXcodes = ({
"Tornado":"Tornade", au lieu de "Tournade"

Je chipote, c'est vrai

Autre question, comment puis-je récupérer la valeur de ma sonde extérieure et la mettre à la place de la température. J'ai bien vu la ligne, mais je sèche, j'ai NAN qui s’affiche.

[Claude69]

@breizh22. Merci

[damanujan]

Autre question, comment puis-je récupérer la valeur de ma sonde extérieure et la mettre à la place de la température. J'ai bien vu la ligne, mais je sèche, j'ai NAN qui s’affiche.

Dans ton virtuel, dans valeur, tu cliques "rechercher équipement".
Tu recherches ta sonde.
Côté Widget, tu remplaces weather.temp par Math.round(parseFloat("#state#"))

PS : Bien vu pour 'Tournade', mais j'espère que le widget ne devra jamais afficher cette option