De mêmedamanujan a écrit :ça m'intéresse de savoir comment tu fais pour avoir la couleur de fond transparente...
Merci d'avance.
C'est ballotfcna a écrit :mais le widget ne marche plus avec cette modif
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);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'
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...
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
Utilisateurs parcourant ce forum : Aucun utilisateur inscrit et 5 invités
