Widget weather-clock

[waccoo]

Oui en effet c'est une solution pansement, mais bon c'est vraiment pas top, et pas moyen de trouver une horloge aussi sympa que celle là

[neolith13]

Bonjour à tous,

Le widget weather-clock est très réussi mais j'ai du mal à comprendre son utilisation. J'ai bien installé sur le jeedom le widget en passant par le market. La "démo" en haut à droite fonctionne parfaitement. Je me suis donc dis que, pour l'intégrer sur un plan, je pouvais directement copier-coller le code de ce widget et l'intégrer dans "Texte/html". Mais d'un point de vue résultat, ca ne fonctionne pas et je ne comprends pas pourquoi. J'ai bien l'heure qui est affichée, les barres de progression pour les secondes, mais l'interface "plan" reste en mode chargement avec la roue crantée, et je suis obligé de passer par la bdd pour supprimer l'objet.

Du coup, je ne comprends pas trop comment je peux intégrer ce widget sur un plan en mode design.... Si quelqu'un peut m'aiguiller ce serait cool ! Merci !

[superbricolo]

Bonjour,
Je viens de tester le widget. Il est juste génial. J'adore. Mais je rencontre un problème. A des intervalles aléatoire tous disparaît. C'est comme si tout devenait transparent ou bien un problème de cache non rafraîchit.
Je me suis dit que cela pouvait venir de la météo, j'ai donc essayé de la désactiver. Mais cela fait pareil.
J'ai essayé avec Chrome et Firefox et j'ai le même phénomène.
Quand je rafraîchit la page web tout réapparaît. Le problème est identique dans le dashboard et le design.

Je viens donc vers vous, si quelqu'un avait une idée. Merci d'avance

[TIKETAC]

Bonjour,

Le plugin affiche bien la date et l'heure, mais pas la météo, cela fonctionne t il toujours ?

[superbricolo]

Quand je l'utilisais, par moment la météo disparaissait. Pour mon utilisation, Je l'ai modifié pour utiliser les infos météo local à Jeedom, en l'occurrence celles de Forecast io + celles de mes sondes de température

[TIKETAC]

Aurais tu le script modifié ?

[superbricolo]

Voici le script du widget modifié:

Code : Tout sélectionner

<div style="width:300px; min-height:80px;" class="cmd tooltips cmd-widget" data-type="info" data-subtype="other" data-cmd_id="#id#" data-cmd_uid="#uid#">
	<center>
		<span style="font-size: 2.5em;" class="iconCmd"></span>
        <div  class="bandClock">
          <div id="Date"></div>
          <div id="weather#id#"></div>
        </div>      

		<style>
          @font-face {
              font-family: 'weather';
              src: url('plugins/widget/core/template/dashboard/cmd.info.string.Superbricolo_Weather-Clock/artill_clean_icons-webfont.eot');
              src: url('plugins/widget/core/template/dashboard/cmd.info.string.Superbricolo_Weather-Clock/artill_clean_icons-webfont.eot?#iefix') format('embedded-opentype'),
                   url('plugins/widget/core/template/dashboard/cmd.info.string.Superbricolo_Weather-Clock/artill_clean_icons-webfont.woff') format('woff'),
                   url('plugins/widget/core/template/dashboard/cmd.info.string.Superbricolo_Weather-Clock/artill_clean_icons-webfont.ttf') format('truetype'),
                   url('plugins/widget/core/template/dashboard/cmd.info.string.Superbricolo_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#id# {
            width: 500px;
            margin: 0px auto;
            text-align: center;
            text-transform: uppercase;

          }

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

          }

          .icon-tornado:before { content: ":"; }
          .icon-1:before { content: "p"; }
          .icon-2:before { content: "S"; }
          .icon-3:before { content: "Q"; }
          .icon-thunderstorm: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-rain:before { content: "G"; }
          .icon-13:before { content: "I"; }
          .icon-14:before { content: "I"; }
          .icon-15:before { content: "W"; }
          .icon-snow:before { content: "I"; }
          .icon-hail:before { content: "W"; }
          .icon-sleet:before { content: "U"; }
          .icon-19:before { content: "Z"; }
          .icon-fog:before { content: "Z"; }
          .icon-21:before { content: "Z"; }
          .icon-22:before { content: "Z"; }
          .icon-23:before { content: "Z"; }
          .icon-wind:before { content: "E"; }
          .icon-25:before { content: "E"; }
          .icon-cloudy:before { content: "3"; }
          .icon-27:before { content: "a"; }
          .icon-28:before { content: "A"; }
          .icon-partly-cloudy-night:before { content: "a"; }
          .icon-partly-cloudy-day:before { content: "A"; }
          .icon-clear-night:before { content: "6"; }
          .icon-clear-day: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#id# 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#id# .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#id# .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#id# .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>      
	</center>
<!-- Ne Pas Supprimer -->
	<script class="createWidgetInfo" type="text/javascript">//<![CDATA[{"type":"0","version":"1","min":["0"],"max":["100"],"icons":["<i class=\"icon animal-rabbit\"></i>"]}]]></script>
<!-- Ne Pas Supprimer -->
	<!--récupération info  méteo sur yahoo-->
	<!--<script src="plugins/widget/core/template/dashboard/cmd.info.string.Superbricolo_Horloge/jquery.simpleWeather.js"></script>--> 
	<script>
      
      /*
      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, _this.options.size, _this.options.size);
              _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.substring(0,8), 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() {
        var WCwoeid = '#WCwoeid#';  
        if (WCwoeid[0] == '#') {  // vérification de l'existance de la variable WCwoeid
           WCwoeid = '615702';    // Par défaut WOEID = 615702 Paris si inexistante
        }

       var WCweather = '#WCweather#';  
        if (WCweather.toLowerCase() == 'off') {
          return;
        }

       var WCsensor = '#WCsensor#';


       var str = '#state#';
       str = str.replace('"',"");
       str = str.replace('"',"");
       str = str.replace('"',"");
       str = str.replace('"',"");
       var a = str.split("!");
       var code = a[0];
       var temp = a[1];
       //var currently = str_replace('"','',a[2]);
       var currently = a[2];
       var high = Math.round(a[3]);
       var low = Math.round(a[4]);

       html = '<h2><i class="icon-'+code+'"></i>';
       html += Math.round(parseFloat(temp));
       html += '&deg;C</h2>'; 
       html += '<div class="conditions">'+currently+'</div>';
       html += '<div class="max" title="Température maximum">'+high+'°</div>';
       html += '<div class="min" title="Température minimum">'+low+'°</div>';                

       $("#weather#id#").html(html);
      }); 

      // bandClock - Cercles Horloge 
      $(document).ready(function() {

        // Couleur des cercles heures/minutes/secondes et heure digitale au format RGB.  
        var WCcolor = '#WCcolor#';
        var lgColor = WCcolor.length;
        if (WCcolor[lgColor-1] == '#')  {
           WCcolor = '#00bcfb';
          }  
        // Couleur de fond au format RGB ( rgba(0,0,0,0) = transparent )    
        var WCbgcolor = '#WCbgcolor#';
        var lgBgcolor = WCbgcolor.length;
        if (WCbgcolor[lgBgcolor-1] == '#') {
           WCbgcolor = 'rgba(0,0,0,0)';
          }

        // format de l'heure pour les cercles : 12 ou 24
        var WChour = '#WChour#';
        if (WChour != '24') {
          WChour = '12';
        }

        $('.bandClock').bandClock({
                //configure here
                size: 300,
                bgColor: WCbgcolor, 
                color: WCcolor, 
                // lineWidth:  ,
                // lineCap: 'butt' ,
                // gap: ,
                fontStyle:'38px verdana',
                 hourFormat: WChour
              });
            });   

      // 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"]
        var WCdate = '#WCdate#';
        // 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   
        if (WCdate.toLowerCase() != 'off') {
          $('#Date').html(dayNames[newDate.getDay()] + " " + newDate.getDate() + ' ' + monthNames[newDate.getMonth()] );
        }

      });      
      
      //  Traduction météo anglais -> français ne sert plus, laisser pour rappel codif yahoo
      function checkWXLang(weather){

            for (var key in myWXcodes) {
                      if (key.toLowerCase() === weather.toLowerCase()){
                          var myWX = myWXcodes[key];
                          return myWX;
                      } 
                 } 
           return weather;
            }

        var myWXcodes = ({
              "Tornado":"Tornade",
              "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 Drizzle":"Bruine légère",
              "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",
              "Rain":"Pluie",
              "Rainy":"Pluvieux",
              "Heavy rain":"Fortes pluies",
              "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",
              "Mist":"Brouillard",
              "Haze":"Brûme",
              "Smoky":"Brûme",
              "Smoke":"Brûmeux",
              "Blustery":"Blustery",
              "Windy":"Venteux",
              "Cold":"Froid",
              "breezy":"Frais",
              "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",
              "Mostly sunny":"Ensoleillé",
              "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>
</div>

Et voici le virtuel utilisé:

virtuel horloge.PNG (72.97 Kio) Consulté 1079 fois

Les différentes valeurs passées dans le widget sont séparées par des points d'exclamation.

[TIKETAC]

Merci je vais tester cela.

[flodus]

Bonsoir
Super widget j'aime beaucoup le design !!!
J'aurai 2 questions :

1 - Comment faire pour supprimer l'affichage des secondes ? (pas le cercle mais les chiffres ?)
2 - Et là c'est le plus important !!! impossible d'afficher la météo pour moi non plus ! y a t'il un problème connu ? j'avais cru entendre dire que yahoo aller stopper son service mais je ne sais pas si c'est le cas, ni si c'est lié !
J'utilise le plugin météo officiel jeedom qui se sert d'OpenWeatherMap. Est-il possible de configurer le widget avec ces infos ?

Merci d'avance

[superbricolo]

Bonsoir
Super widget j'aime beaucoup le design !!!
J'aurai 2 questions :

1 - Comment faire pour supprimer l'affichage des secondes ? (pas le cercle mais les chiffres ?)

En ligne 254 sur mon code posté avant remplacer:

Code : Tout sélectionner

_this.ctx.fillText(time.substring(0,8), 0, 0);

par

Code : Tout sélectionner

_this.ctx.fillText(time.substring(0,5), 0, 0);

2 - Et là c'est le plus important !!! impossible d'afficher la météo pour moi non plus ! y a t'il un problème connu ? j'avais cru entendre dire que yahoo aller stopper son service mais je ne sais pas si c'est le cas, ni si c'est lié !
J'utilise le plugin météo officiel jeedom qui se sert d'OpenWeatherMap. Est-il possible de configurer le widget avec ces infos ?

Merci d'avance

J'ai posté ci-dessous un widget modifié qui permet de passer les informations récupérer à partir de forecast.io. Il faudrait juste adapter.

[flodus]

J'ai posté ci-dessous un widget modifié qui permet de passer les informations récupérer à partir de forecast.io. Il faudrait juste adapter.

Bonjour,

Merci pour les réponses.
J'ai copié le code que tu as mis plus haut à la place du code du widget j'ai supprimé Superbricolo_ dans les lignes de code où c'était
indiqué "plugins/widget/core/template/dashboard/cmd.info.string.Superbricolo_Weather-Clock/" (sauf au niveau du widget Superbricolo_Horloge, que tu avais commenté).
J'ai reproduit mon virtuel avec mes infos openweathermap... Ca s'affiche bien sauf que je ne trouve pas les icones des conditions météo, qui sont pourtant présentes sur mon widget météo, je ne sais pas comment les récupérer ce qui est dommage car il y a bien des icônes dans le dossier /plugins/weather/core/template/images ...

Autre question :
Partages tu tes productions sur le market ?

Merci d'avance

[superbricolo]

les icônes météo sont parfois une police de caractères.

Sinon je n'ai rien partagé sur le market car c'est une évolution du widget original qui pour moi ne fonctionnait pas toujours bien et que j'ai bricolé pour l'adapter à mon besoin. Et je ne suis pas sur que tout soit fait dans les règles de l'art.

[Sigri44]

Hello !

Petit déterrage, mais aucun des circle batterie n'est disponible sur le market.. ?!

Merci