Avant toute chose merci de (re)prendre connaissance de la charte et de la respecter.
Pour résumer :
- Avant de poser une question, je cherche si la réponse existe
- Je suis poli, courtois et je respecte tout un chacun sur le forum
- Si un post m'agace : je m'en éloigne plutôt que de répondre d'une façon qui pourrait être mal interprétée


Il n'est jamais du luxe que de rappeler des choses simples :
Courtoisie, amabilité, politesse et bonne humeur sont les maîtres mots pour un forum sympathique, bienveillant et accueillant :)

Le groupe des Helpers est present pour vous aidez, n'hésitez pas à poser des questions ;)

Toute la communauté vous remercie

Widget weather-clock

Réservé à l'utilisation et la création de widgets dans JEEDOM
damanujan
Timide
Messages : 144
Inscription : 20 oct. 2014, 19:21
Localisation : Belgique

Widget weather-clock

Message par damanujan » 18 mars 2016, 10:24

Bonjour,

Ce sujet fait suite au Design que j'ai publié sur "vitrine/poster votre plan-design".
viewtopic.php?f=50&t=1182&start=420

J'ai ouvert ce sujet afin de ne pas encombrer le topic de rosty avec les questions ou bug du widget weather-clock disponible sur le market
dashboard.info.string.Weather-Clock.PNG
dashboard.info.string.Weather-Clock.PNG (30.9 Kio) Consulté 1730 fois

fcna
Actif
Messages : 823
Inscription : 15 mars 2015, 16:14
Localisation : Toulouse

Re: Widget weather-clock

Message par fcna » 18 mars 2016, 11:26

Merci pour le partage.

Une idée pour rendre le fond transparent. J'ai cherché un peu et je trouve pas trop
Mini +
Fibaro FGMS-001
Qubino Fil Pilote 6 / Module Vlts roulants
Aeon Labs mono G2 60A
Fibaro Wall Plug / Smoke Sensor

ImperiHome Standard System /Pushing Box/Energie/ Philips Hue / Agenda / Clock / Géolocalisation / Themes / ...

fcna
Actif
Messages : 823
Inscription : 15 mars 2015, 16:14
Localisation : Toulouse

Re: Widget weather-clock

Message par fcna » 18 mars 2016, 11:29

Je viens de trouver dans le widget ...
Mini +
Fibaro FGMS-001
Qubino Fil Pilote 6 / Module Vlts roulants
Aeon Labs mono G2 60A
Fibaro Wall Plug / Smoke Sensor

ImperiHome Standard System /Pushing Box/Energie/ Philips Hue / Agenda / Clock / Géolocalisation / Themes / ...

damanujan
Timide
Messages : 144
Inscription : 20 oct. 2014, 19:21
Localisation : Belgique

Re: Widget weather-clock

Message par damanujan » 18 mars 2016, 11:31

ça m'intéresse de savoir comment tu fais pour avoir la couleur de fond transparente...
Merci d'avance.

Avatar de l’utilisateur
Auron007
Timide
Messages : 142
Inscription : 07 févr. 2015, 00:07

Re: Widget weather-clock

Message par Auron007 » 18 mars 2016, 11:41

damanujan a écrit :ça m'intéresse de savoir comment tu fais pour avoir la couleur de fond transparente...
Merci d'avance.
De même ;)

J'ai ajouté pour ma part dans la variable myWXcodes :
"Rain":"Pluie",
Gen8 Esxi + Z-Stick (GEN5) + RFXCOM
2 FGK, 2 FGMS, 2 FGD, 1 FGSD, 1 FGRM, Clavier RFID, 2 Greenwave 6, Sirène Gen5

damanujan
Timide
Messages : 144
Inscription : 20 oct. 2014, 19:21
Localisation : Belgique

Re: Widget weather-clock

Message par damanujan » 18 mars 2016, 11:48

Je viens de publier la mise à jour sur le market...
Il est vrai que chez nous, en Belgique, il ne pleut pas souvent et donc je n'avais pas encore eu ce cas de figure :lol:

Attention de remettre votre WOEID si vous faites la mise à jour via le market !

damanujan
Timide
Messages : 144
Inscription : 20 oct. 2014, 19:21
Localisation : Belgique

Re: Widget weather-clock

Message par damanujan » 18 mars 2016, 11:57

Si quelqu'un a la liste en anglais complète utilisée par le script simpleWeather, cela m'intéresse.
Ainsi, je pourrais l'encoder une bonne fois pour toutes...

Si on regarde sur simpleweatherjs.com, ils renvoient vers la liste de YahooWeather mais après quelques essais, cela s'avère faux.
Ils utilisent une autre liste.

On pourrait également se baser sur le weather.code mais le site renvoie vers la même liste...

fcna
Actif
Messages : 823
Inscription : 15 mars 2015, 16:14
Localisation : Toulouse

Re: Widget weather-clock

Message par fcna » 18 mars 2016, 12:01

remplacer :
//bgColor: '#cmdColor#', // couleur de fond (pas de transparence possible dans la partie Design)
par
bgColor: 'transparent',
Mini +
Fibaro FGMS-001
Qubino Fil Pilote 6 / Module Vlts roulants
Aeon Labs mono G2 60A
Fibaro Wall Plug / Smoke Sensor

ImperiHome Standard System /Pushing Box/Energie/ Philips Hue / Agenda / Clock / Géolocalisation / Themes / ...

fcna
Actif
Messages : 823
Inscription : 15 mars 2015, 16:14
Localisation : Toulouse

Re: Widget weather-clock

Message par fcna » 18 mars 2016, 12:03

mais le widget ne marche plus avec cette modif
Mini +
Fibaro FGMS-001
Qubino Fil Pilote 6 / Module Vlts roulants
Aeon Labs mono G2 60A
Fibaro Wall Plug / Smoke Sensor

ImperiHome Standard System /Pushing Box/Energie/ Philips Hue / Agenda / Clock / Géolocalisation / Themes / ...

Avatar de l’utilisateur
Claude69
Actif
Messages : 2066
Inscription : 04 avr. 2015, 07:57
Localisation : Nord de Lyon

Re: Widget weather-clock

Message par Claude69 » 18 mars 2016, 12:10

fcna a écrit :mais le widget ne marche plus avec cette modif
C'est ballot :D
Gestion d'ouverture / fermeture Portail et garage
Gestion filtration piscine
Divers éclairages
Et tout plein d'autres choses ...
JEEDOM NUC 3.3.29 ULTIMATE

Mon matériel ici

Avatar de l’utilisateur
cadavor
Actif
Messages : 1216
Inscription : 21 juin 2015, 22:00
Localisation : 34

Re: Widget weather-clock

Message par cadavor » 18 mars 2016, 13:08

On peut mettre le fond transparent en mettant bgColor: 'rgba(0,0,0,0)',
mais l'horloge ne marche plus car il superpose les élements... Il va falloir toucher au code de bandClock pour corriger ça.
Jeedom Stable 3.3
NUC Z83 + Aeotec Z-Stick Gen5
Z-Wave FGR + FGMS + FGDS + FGFS + FGK + FGWPE + ZW062 + ZW080
GH Mini + Orvibo AllOne + Playbulb + Miband2

damanujan
Timide
Messages : 144
Inscription : 20 oct. 2014, 19:21
Localisation : Belgique

Re: Widget weather-clock

Message par damanujan » 18 mars 2016, 13:13

OK, j'en étais arrivé à la même conclusion...
Donc, par facilité et comme je voulais quelque chose d'épuré, j'ai mis la même couleur de fond d'écran de mon Design que mon widget
;)
table_controle_2.PNG
table_controle_2.PNG (258.21 Kio) Consulté 1649 fois

Avatar de l’utilisateur
cadavor
Actif
Messages : 1216
Inscription : 21 juin 2015, 22:00
Localisation : 34

Re: Widget weather-clock

Message par cadavor » 18 mars 2016, 13:40

Oui je comprend mais pour ceux qui ont une image de fond c'est plus compliqué donc voici les modifications a effectuer :
Editer le widget "Weather-Clock" dans le plugin widget puis supprimer la ligne :

Code : Tout sélectionner

<script src="plugins/widget/core/template/dashboard/cmd.info.string.Weather-Clock/bandClock.js"></script>
Ensuite insérer entre

Code : Tout sélectionner

<script type="text/javascript">
et

Code : Tout sélectionner

// météo simpleWeather
$(document).ready(function() {
le code suivant :

Code : Tout sélectionner

/*
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);
Cette modification permet de supporter le fond transparent et d'ajouter le support de l'heure au format 24h grâce à l'option supplémentaire 'hourFormat' ('12' par défaut, '24' sinon)

Donc dans la partie "configure here" pour avoir le fond transparent et le cercle d'heure au format 24h :

Code : Tout sélectionner

 
         //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: ,
          hourFormat: '24',
          fontStyle:'38px verdana'
Jeedom Stable 3.3
NUC Z83 + Aeotec Z-Stick Gen5
Z-Wave FGR + FGMS + FGDS + FGFS + FGK + FGWPE + ZW062 + ZW080
GH Mini + Orvibo AllOne + Playbulb + Miband2

damanujan
Timide
Messages : 144
Inscription : 20 oct. 2014, 19:21
Localisation : Belgique

Re: Widget weather-clock

Message par damanujan » 18 mars 2016, 13:47

@cadavor

Bravo !!!!!! je vais essayer cela ce soir !
Dernière édition par damanujan le 18 mars 2016, 14:19, édité 1 fois.

damanujan
Timide
Messages : 144
Inscription : 20 oct. 2014, 19:21
Localisation : Belgique

Re: Widget weather-clock

Message par damanujan » 18 mars 2016, 13:57

Finalement, j'avais un peu de temps et je viens de publier la version avec fond transparent sur le market.
J'ai modifié le fichier bandClock.js
Merci à Cadavor !

J'en ai profité pour ajouter la traduction de "Mist" puisqu'il fait du brouillard sur Paris...

Avatar de l’utilisateur
Claude69
Actif
Messages : 2066
Inscription : 04 avr. 2015, 07:57
Localisation : Nord de Lyon

Re: Widget weather-clock

Message par Claude69 » 18 mars 2016, 14:41

damanujan a écrit :Finalement, j'avais un peu de temps et je viens de publier la version avec fond transparent sur le market.
J'ai modifié le fichier bandClock.js
Merci à Cadavor !

J'en ai profité pour ajouter la traduction de "Mist" puisqu'il fait du brouillard sur Paris...
Super bonne nouvelle!
Gestion d'ouverture / fermeture Portail et garage
Gestion filtration piscine
Divers éclairages
Et tout plein d'autres choses ...
JEEDOM NUC 3.3.29 ULTIMATE

Mon matériel ici

fcna
Actif
Messages : 823
Inscription : 15 mars 2015, 16:14
Localisation : Toulouse

Re: Widget weather-clock

Message par fcna » 18 mars 2016, 15:18

Comme tu as un peu de temps, est-ce que tu pourrais pas utiliser une variable pour le WOEID , ce serait plus simpe.

TU récuperes la variable en faisant "#tavariable#, et dans le widget, il faut que le nom soit tavariable
Mini +
Fibaro FGMS-001
Qubino Fil Pilote 6 / Module Vlts roulants
Aeon Labs mono G2 60A
Fibaro Wall Plug / Smoke Sensor

ImperiHome Standard System /Pushing Box/Energie/ Philips Hue / Agenda / Clock / Géolocalisation / Themes / ...

Avatar de l’utilisateur
cadavor
Actif
Messages : 1216
Inscription : 21 juin 2015, 22:00
Localisation : 34

Re: Widget weather-clock

Message par cadavor » 18 mars 2016, 16:12

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)
Jeedom Stable 3.3
NUC Z83 + Aeotec Z-Stick Gen5
Z-Wave FGR + FGMS + FGDS + FGFS + FGK + FGWPE + ZW062 + ZW080
GH Mini + Orvibo AllOne + Playbulb + Miband2

damanujan
Timide
Messages : 144
Inscription : 20 oct. 2014, 19:21
Localisation : Belgique

Re: Widget weather-clock

Message par damanujan » 18 mars 2016, 16:20

fcna a écrit :TU récuperes la variable en faisant "#tavariable#, et dans le widget, il faut que le nom soit tavariable
Je ne savais pas que l'on pouvais récupérer les variables dans la partie widget... :oops:

Je vais être très occupé ce week-end mais dès que j'ai un moment, je vais modifier dans ce sens et en écoutant les conseils de cadavor, je vais tenter de rendre le widget paramétrable...

Avatar de l’utilisateur
Claude69
Actif
Messages : 2066
Inscription : 04 avr. 2015, 07:57
Localisation : Nord de Lyon

Re: Widget weather-clock

Message par Claude69 » 19 mars 2016, 08:05

Toujours en bêta, la version transparente ? Elle n'est pas visible sur le market
Gestion d'ouverture / fermeture Portail et garage
Gestion filtration piscine
Divers éclairages
Et tout plein d'autres choses ...
JEEDOM NUC 3.3.29 ULTIMATE

Mon matériel ici

Répondre

Revenir vers « [Plugin officiel] Widgets »

Qui est en ligne ?

Utilisateurs parcourant ce forum : Aucun utilisateur inscrit et 1 invité