Widget weather-clock
Widget weather-clock
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
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
Re: Widget weather-clock
Merci pour le partage.
Une idée pour rendre le fond transparent. J'ai cherché un peu et je trouve pas trop
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 / ...
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 / ...
Re: Widget weather-clock
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 / ...
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 / ...
Re: Widget weather-clock
ça m'intéresse de savoir comment tu fais pour avoir la couleur de fond transparente...
Merci d'avance.
Merci d'avance.
Re: Widget weather-clock
De mêmedamanujan a écrit :ça m'intéresse de savoir comment tu fais pour avoir la couleur de fond transparente...
Merci d'avance.
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
2 FGK, 2 FGMS, 2 FGD, 1 FGSD, 1 FGRM, Clavier RFID, 2 Greenwave 6, Sirène Gen5
Re: Widget weather-clock
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
Attention de remettre votre WOEID si vous faites la mise à jour via 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
Attention de remettre votre WOEID si vous faites la mise à jour via le market !
Re: Widget weather-clock
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...
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...
Re: Widget weather-clock
remplacer :
//bgColor: '#cmdColor#', // couleur de fond (pas de transparence possible dans la partie Design)
par
bgColor: 'transparent',
//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 / ...
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 / ...
Re: Widget weather-clock
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 / ...
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 / ...
Re: Widget weather-clock
C'est ballotfcna a écrit :mais le widget ne marche plus avec cette modif
Gestion d'ouverture / fermeture Portail et garage
Gestion filtration piscine
Divers éclairages
Et tout plein d'autres choses ...
JEEDOM NUC 3.3.33 ULTIMATE
Mon matériel ici
Gestion filtration piscine
Divers éclairages
Et tout plein d'autres choses ...
JEEDOM NUC 3.3.33 ULTIMATE
Mon matériel ici
Re: Widget weather-clock
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.
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
NUC Z83 + Aeotec Z-Stick Gen5
Z-Wave FGR + FGMS + FGDS + FGFS + FGK + FGWPE + ZW062 + ZW080
GH Mini + Orvibo AllOne + Playbulb + Miband2
Re: Widget weather-clock
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
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
Re: Widget weather-clock
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 :
Ensuite insérer entre
et
le code suivant :
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 :
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>
Code : Tout sélectionner
<script type="text/javascript">
Code : Tout sélectionner
// météo simpleWeather
$(document).ready(function() {
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);
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
NUC Z83 + Aeotec Z-Stick Gen5
Z-Wave FGR + FGMS + FGDS + FGFS + FGK + FGWPE + ZW062 + ZW080
GH Mini + Orvibo AllOne + Playbulb + Miband2
Re: Widget weather-clock
@cadavor
Bravo !!!!!! je vais essayer cela ce soir !
Bravo !!!!!! je vais essayer cela ce soir !
Dernière édition par damanujan le 18 mars 2016, 14:19, édité 1 fois.
Re: Widget weather-clock
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...
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...
Re: Widget weather-clock
Super bonne nouvelle!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...
Gestion d'ouverture / fermeture Portail et garage
Gestion filtration piscine
Divers éclairages
Et tout plein d'autres choses ...
JEEDOM NUC 3.3.33 ULTIMATE
Mon matériel ici
Gestion filtration piscine
Divers éclairages
Et tout plein d'autres choses ...
JEEDOM NUC 3.3.33 ULTIMATE
Mon matériel ici
Re: Widget weather-clock
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
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 / ...
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 / ...
Re: Widget weather-clock
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)
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
NUC Z83 + Aeotec Z-Stick Gen5
Z-Wave FGR + FGMS + FGDS + FGFS + FGK + FGWPE + ZW062 + ZW080
GH Mini + Orvibo AllOne + Playbulb + Miband2
Re: Widget weather-clock
Je ne savais pas que l'on pouvais récupérer les variables dans la partie widget...fcna a écrit :TU récuperes la variable en faisant "#tavariable#, et dans le widget, il faut que le nom soit tavariable
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...
Re: Widget weather-clock
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.33 ULTIMATE
Mon matériel ici
Gestion filtration piscine
Divers éclairages
Et tout plein d'autres choses ...
JEEDOM NUC 3.3.33 ULTIMATE
Mon matériel ici
Qui est en ligne ?
Utilisateurs parcourant ce forum : Aucun utilisateur inscrit et 14 invités