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+'°'+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>