yunkong2.vis-timeandweather/widgets/timeandweather.html

1107 lines
60 KiB
HTML
Raw Normal View History

2018-09-22 10:13:20 +08:00
<!--
yunkong2.vis time and weather Widget-Set
version: "1.1.7"
Copyright 2013-2017 bluefox<dogafox@gmail.com>
-->
<link rel="stylesheet" type="text/css" href="widgets/timeandweather/css/flipclock.css" />
<link rel="stylesheet" type="text/css" href="widgets/timeandweather/css/jquery.jdigiclock.css" />
<link rel="stylesheet" type="text/css" href="widgets/timeandweather/css/yahoo.css" />
<link rel="stylesheet" type="text/css" href="widgets/timeandweather/css/simpleclock.css" />
<script type="text/javascript" src="widgets/timeandweather/js/flipclock/flipclock.min.js"></script>
<script type="text/javascript" src="widgets/timeandweather/js/jquery.jdigiclock.js"></script>
<script type="text/javascript" src="widgets/timeandweather/js/jquery.zweatherfeed.js"></script>
<script type="text/javascript" src="widgets/timeandweather/js/coolclock.js"></script>
<script type="text/javascript" src="widgets/timeandweather/js/moreskins.js"></script>
<script type="text/javascript" src="widgets/timeandweather/js/segment-display.js"></script>
<script language="javascript">
"use strict";
// Add words for bars
if (vis.editMode) {
$.extend(systemDictionary, {
"hideSeconds" : {"en": "Hide seconds", "de": "Zeige keine Sekunden", "ru": "Скрыть секунды"},
"blink" : {"en": "Blink", "de": "Blinken", "ru": "Мигать"},
"blink_tooltip" : {
"en" : "Used only if no seconds shown",
"de": "Wird nur aktiv, falls keine Sekunden angezeigt sind",
"ru": "Активно только если секунды не показываются"},
"showWeekDay" : {"en": "Show day of week", "de": "Wochentag", "ru": "День недели"},
"noClass" : {"en": "No style", "de": "Kein Stil", "ru": "Без стиля"},
"noClass_tooltip" : {
"en" : "Activate it if you want to set own class or own style for clock with css settings",
"de": "Aktiviere es, falls eigenen Stil oder Klasse wird angeandt",
"ru": "Если установлены пользовательский класс или CSS свойства,\x0Aто нужно активировать, что бы они стали активными"
},
"woeid" : {"en": "City", "de": "Stadt", "ru": "Город"},
"shortWeekDay" : {"en": "Short week day", "de": "Kurzer Wochentag", "ru": "Короткий день недели"},
"shortYear" : {"en": "Short year", "de": "Kurzes Jahr", "ru": "Короткий год"},
"prependZero" : {"en": "Prepend zero", "de": "Null vorne", "ru": "Ноль в начале"},
"monthWord" : {"en": "Month as word", "de": "Monat als text", "ru": "Месяц словом"},
"shortMonth" : {"en": "Short month", "de": "Kurzer Monat", "ru": "Короткий месяц"},
"americanOrder" : {"en": "American format", "de": "USA-Format", "ru": "Формат USA"},
"City:" : {"en": "City:", "de": "Stadt:", "ru": "Город:"},
"noSeconds" : {"en": "Hide seconds", "de": "Zeige keine Sekunden", "ru": "Скрыть секунды"},
"showDigital" : {"en": "Digital clock", "de": "Digitaluhr", "ru": "Цифровые часы"},
"Select city" : {"en": "Select city", "de": "Stadt wählen", "ru": "Выбрать город"},
"showAmPm" : {"en": "Show am/pm", "de": "Zeige am/pm", "ru": "Показать am/pm"},
"quadSize" : {"en": "Quarter text size", "de": "Viertel-Text-Größe", "ru": "Размер чисел часа"},
"quadColor" : {"en": "Quarter text color", "de": "Viertel-Text-Farbe", "ru": "Цвет чисел часа"},
"quadTickColor" : {"en": "Quarter tick color", "de": "Viertel-Tickfarbe", "ru": "Цвет часовых штрихов"},
"textSize" : {"en": "Minutes text size", "de": "Minutentextgroße", "ru": "Размер минутных чисел"},
"textColor" : {"en": "Minutes text color", "de": "Minutentextfarbe", "ru": "Цвет минутных чисел"},
"tickColor" : {"en": "Small tick color", "de": "Klein-Tickfarbe", "ru": "Цвет минутных штрихов"},
"isSeconds" : {"en": "Show second hand", "de": "Zeige Sekunden", "ru": "Показать секунды"},
"handsColor" : {"en": "Hands color", "de": "Zeigerfarbe", "ru": "Цвет стрелок"},
"handsColorLine" : {"en": "Hands color bulge", "de": "Zeigerbeulefarbe", "ru": "Цвет выемок на стрелках"},
"handsSecColor" : {"en": "Seconds hand color", "de": "Skeundenzeigerfarbe", "ru": "Цвет секундной стрелки"},
"textFont" : {"en": "Text font", "de": "Textschrift", "ru": "Шрифт"},
"cityName" : {"en": "City name", "de": "Stadtsname", "ru": "Показывать имя города"},
"language" : {"en": "Language", "de": "Sprache", "ru": "Язык"},
"SymmetricCorner" : {"en": "symmetric", "de": "symmetrisch", "ru": "симметричные"},
"FlattenedCorner" : {"en": "flattened", "de": "abgeflacht", "ru": "плоские"},
"PointedCorner" : {"en": "pointed", "de": "spitzig", "ru": "заострённые"},
"RoundedCorner" : {"en": "rounded", "de": "gerundet", "ru": "закруглённые"},
"group_clock" : {"en": "Clock", "de": "Uhr", "ru": "Часы"},
"clock" : {"en": "Enable clock", "de": "Aktiviere Uhr", "ru": "Активировть часы "},
"clock_tooltip" : {
"en": "Clock is enabled only if no ObjectID and not text used.",
"de": "Uhr sind nur dann aktiv, falls kein Objekt ID und kein Text definiert sind.",
"ru": "Активно только,\x0Aесли не используется объект и текст"
},
"seconds" : {"en": "Show seconds", "de": "Sekunden", "ru": "Показать секунды"},
"pattern" : {"en": "Pattern", "de": "Vorlage", "ru": "Шаблон"},
"pattern_tooltip" : {
"en": "Use # as placeholder.\x0AAdditionally dot and semicolon canbe used.",
"de": "Benutze # als Platzhalter.\x0APunkt und Semikolon können als Trennzeichen benutz werden.",
"ru": "Используйте # там, где должен быть символ.\x0AЕщё можно использовать точку и двоеточие."
},
"colorOn" : {"en": "Segment color ON", "de": "Segmentfarbe AN", "ru": "Цвет вкл. секции"},
"colorOff" : {"en": "Segment color OFF", "de": "Segmentfarbe AUS", "ru": "Цвет выкл. секции"},
"runStepInterval" : {"en": "Running text intervall(ms)", "de": "Interval für laufendem Text(ms)", "ru": "Интервал бегущего текста(мс)"},
"segmentCount" : {"en": "Segment count", "de": "Anzahl Segmenten", "ru": "Число секций"},
"displayAngle" : {"en": "Display angle", "de": "Zeichenwinkel", "ru": "Наклон °"},
"digitHeight" : {"en": "Digit height", "de": "Zeichenhöhe", "ru": "Высота числа"},
"digitWidth" : {"en": "Digit width", "de": "Zeichebreite", "ru": "Ширина числа"},
"digitDistance" : {"en": "Digit distance", "de": "Zeichenabstand", "ru": "Расстояние между числами"},
"segmentWidth" : {"en": "Segment width", "de": "Segmentbreite", "ru": "Ширина секции"},
"segmentDistance" : {"en": "Segment distance", "de": "Segmentdistanz", "ru": "Расстояние между секциями"},
"cornerType" : {"en": "Corners type", "de": "Ecktyp", "ru": "Тип закруглений"},
"en" : {"en": "english", "de": "englisch", "ru": "английский"},
"de" : {"en": "german", "de": "deutsch", "ru": "немецкий"},
"ru" : {"en": "russian", "de": "russisch", "ru": "русский"},
"city": {"en": "City", "de": "Stadt", "ru": "Город"},
"group_now": {"en": "Now", "de": "Jetzt", "ru": "Сейчас"},
"updateInterval": {"en": "Update interval[min]", "de": "Updateintervalle[min]", "ru": "Обновление в минутах"},
"temperature-0-oid": {"en": "Temperature ID", "de": "Temperature ID", "ru": "Температура ID"},
"condition-0-oid": {"en": "Condition ID", "de": "Text ID", "ru": "Текст ID"},
"humidity-0-oid": {"en": "Humidity ID", "de": "Luftfeutigkeit ID", "ru": "Влажность ID"},
"temperature-min-0-oid": {"en": "Min temperature ID", "de": "Min Temperature ID", "ru": "Мин. температура ID"},
"temperature-max-0-oid": {"en": "Max temperature ID", "de": "Max Temperature ID", "ru": "Макс. температура ID"},
"wind-speed-0-oid": {"en": "Wind speed ID", "de": "Windgeschwindigkeit", "ru": "Скорсть ветра ID"},
"wind-dir-0-oid": {"en": "Wind direction ID", "de": "Windrichting", "ru": "Направление ветра ID"},
"icon-0-oid": {"en": "Icon URL ID", "de": "Bild-URL ID", "ru": "URL картинки"},
"group_tomorrow": {"en": "Tomorrow", "de": "Morgen", "ru": "Завтра"},
"condition-1-oid": {"en": "Condition ID", "de": "Text ID", "ru": "Текст ID"},
"temperature-max-1-oid": {"en": "Max temperature ID", "de": "Max Temperature ID", "ru": "Макс. температура ID"},
"temperature-min-1-oid": {"en": "Min temperature ID", "de": "Min Temperature ID", "ru": "Мин. температура ID"},
"icon-1-oid": {"en": "Icon URL ID", "de": "Bild-URL ID", "ru": "URL картинки ID"},
"group_aftertomorrow": {"en": "group_aftertomorrow", "de": "Übermorgen", "ru": "Послезавтра"},
"condition-2-oid": {"en": "Condition ID", "de": "Text ID", "ru": "Текст ID"},
"temperature-max-2-oid": {"en": "Max temperature ID", "de": "Max Temperature ID", "ru": "Макс. температура ID"},
"temperature-min-2-oid": {"en": "Min temperature ID", "de": "Min Temperature ID", "ru": "Мин. температура ID"},
"icon-2-oid": {"en": "Icon URL ID", "de": "Bild-URL ID", "ru": "URL картинки ID"},
"group_in2days": {"en": "In 2 days", "de": "In 2 Tagen", "ru": "Через 2 дня"},
"condition-3-oid": {"en": "Condition ID", "de": "Text ID", "ru": "Текст ID"},
"temperature-max-3-oid": {"en": "Max temperature ID", "de": "Max Temperature ID", "ru": "Макс. температура"},
"temperature-min-3-oid": {"en": "Min temperature ID", "de": "Min Temperature ID", "ru": "Мин. температура"},
"icon-3-oid": {"en": "Icon URL ID", "de": "Bild-URL ID", "ru": "URL картинки"},
"group_in3days": {"en": "In 3 days", "de": "In 3 Tagen", "ru": "Через 3 дня"},
"condition-4-oid": {"en": "Condition ID", "de": "Text ID", "ru": "Текст ID"},
"temperature-max-4-oid": {"en": "Max temperature ID", "de": "Max Temperature ID", "ru": "Макс. температура ID"},
"temperature-min-4-oid": {"en": "Min temperature ID", "de": "Min Temperature ID", "ru": "Мин. температура ID"},
"icon-4-oid": {"en": "Icon URL ID", "de": "Bild-URL ID", "ru": "URL картинки ID"},
"group_in4days": {"en": "In 4 days", "de": "In 4 Tagen", "ru": "Через 4 дня"},
"condition-5-oid": {"en": "Condition ID", "de": "Text ID", "ru": "Текст ID"},
"temperature-max-5-oid": {"en": "Max temperature ID", "de": "Max Temperature ID", "ru": "Макс. температура ID"},
"temperature-min-5-oid": {"en": "Min temperature ID", "de": "Min Temperature ID", "ru": "Мин. температура ID"},
"icon-5-oid": {"en": "Icon URL ID", "de": "Bild-URL ID", "ru": "URL картинки ID"},
"group_in5days": {"en": "In 5 days", "de": "In 5 Tagen", "ru": "Через 5 дней"},
"condition-6-oid": {"en": "Condition ID", "de": "Text ID", "ru": "Текст ID"},
"temperature-max-6-oid": {"en": "Max temperature ID", "de": "Max Temperature ID", "ru": "Макс. температура ID"},
"temperature-min-6-oid": {"en": "Min temperature ID", "de": "Min Temperature ID", "ru": "Мин. температура ID"},
"icon-6-oid": {"en": "Icon URL ID", "de": "Bild-URL ID", "ru": "URL картинки ID"},
"units_speed": {"en": "Speed units", "de": "Geschw.Einheit", "ru": "Единицы изм. скорости"},
"maxDays": {"en": "Show max. days", "de": "Max. Tagesanzahl", "ru": "Макс. кол-во дней"}
});
}
vis.binds.timeandweather = {
version: "1.1.7",
showVersion: function () {
if (vis.binds.timeandweather.version) {
console.log('Version vis-timeandweather: ' + vis.binds.timeandweather.version);
vis.binds.timeandweather.version = null;
}
},
startTime: function (view, elem, hideSeconds, blink, noClass, timerId) {
var today = new Date();
var h = today.getHours();
var m = today.getMinutes();
var s = today.getSeconds();
// add a zero in front of numbers<10
m = (m < 10) ? ('0' + m) : m;
if (!hideSeconds) s = (s < 10) ? ('0' + s) : s;
h = (h < 10) ? ('0' + h) : h;
var hl = document.getElementById(elem);
if (hideSeconds === 'false') hideSeconds = false;
if (!hl) {
$('#visview_' + view).append('<div class="vis-widget' + (noClass ? '' : ' clock') + '" id="' + elem + '" ></div>');
hl = document.getElementById(elem);
// View deleted
if (!hl) return;
hl.dashId = today.getTime();
}
if (hl && (timerId === undefined || hl.dashId == timerId)) {
if (hideSeconds) {
hl.innerHTML = h + '<span style="display: inline-block" id="' + elem + '_space">:</span>' + m;
if (blink && (s % 2)) {
var r = $('#' + elem + '_space');
var w = r.width();
r.css({width: w});
r.html("");
}
} else {
hl.innerHTML = h + ":" + m + ":" + s;
}
hl.dashTimer = _setTimeout(vis.binds.timeandweather.startTime, 1000, view, elem, hideSeconds, blink, noClass, hl.dashId);
}
},
weekdays: {
0: {"en": "Sunday", "de": "Sonntag", "ru": "Воскресенье"},
1: {"en": "Monday", "de": "Montag", "ru": "Понедельник"},
2: {"en": "Tuesday", "de": "Dienstag", "ru": "Вторник"},
3: {"en": "Wednesday","de": "Mittwoch", "ru": "Среда"},
4: {"en": "Thursday", "de": "Donnerstag", "ru": "Четверг"},
5: {"en": "Friday", "de": "Freitag", "ru": "Пятница"},
6: {"en": "Saturday", "de": "Samstag", "ru": "Суббота"}
},
weekdaysShort: {
0: {"en": "Sun", "de": "So", "ru": "Вс"},
1: {"en": "Mon", "de": "Mo", "ru": "Пн"},
2: {"en": "Tue", "de": "Di", "ru": "Вт"},
3: {"en": "Wed", "de": "Mi", "ru": "Ср"},
4: {"en": "Thu", "de": "Do", "ru": "Чт"},
5: {"en": "Fri", "de": "Fr", "ru": "Пт"},
6: {"en": "Sat", "de": "Sa", "ru": "Сб"}
},
months: {
1: {"en": "January", "de": "Januar", "ru": "Январь"},
2: {"en": "February", "de": "Februar", "ru": "Февраль"},
3: {"en": "March", "de": "März", "ru": "Март"},
4: {"en": "April", "de": "April", "ru": "Апрель"},
5: {"en": "May", "de": "Mai", "ru": "Май"},
6: {"en": "June", "de": "Juni", "ru": "Июнь"},
7: {"en": "July", "de": "Juli", "ru": "Июль"},
8: {"en": "August", "de": "August", "ru": "Август"},
9: {"en": "September", "de": "September", "ru": "Сентябрь"},
10: {"en": "October", "de": "Oktober", "ru": "Октябрь"},
11: {"en": "November", "de": "November", "ru": "Ноябрь"},
12: {"en": "December", "de": "Dezember", "ru": "Декабрь"}
},
startDate: function (view, elem, showWeekDay, noClass, timerId, shortWeekDay, shortYear, prependZero, monthWord, shortMonth, american) {
var today = new Date();
var d = today.getDate();
var dow = today.getDay();
var m = today.getMonth() + 1;
var y = today.getFullYear();
var monthString = vis.binds.timeandweather.months[m][vis.language];
if (shortMonth) monthString = monthString.slice(0, 3);
if (shortYear) y = y.toString().slice(2);
// add a zero in front of numbers<10
if (prependZero) d = (d < 10) ? ('0' + d) : d;
if (prependZero) m = (m < 10) ? ('0' + m) : m;
if (showWeekDay === 'false') showWeekDay = false;
var $hl = $('#' + elem);
if (!$hl.length) {
$('#visview_' + view).append('<div class="vis-widget' + (noClass ? '' : ' date') + '" id="' + elem + '" ></div>');
$hl = $('#' + elem);
$hl.data('dashId', (new Date()).getTime());
}
if ($hl.length && (timerId === undefined || $hl.data('dashId') == timerId)) {
var dateString = '';
if (showWeekDay && !shortWeekDay) {
dateString += vis.binds.timeandweather.weekdays[dow][vis.language] + ', ';
} else if (showWeekDay && shortWeekDay) {
dateString += vis.binds.timeandweather.weekdaysShort[dow][vis.language] + ', ';
}
if (monthWord) {
switch (vis.language) {
case 'en':
switch (d) {
case 1:
d += 'st';
break;
case 2:
d += 'nd';
break;
case 3:
d += 'rd';
break;
default:
d += 'th';
}
if (american) {
dateString += monthString + " " + d + ", " + y;
} else {
dateString += d + " " + monthString + ", " + y;
}
break;
default:
dateString += d + ". " + monthString + " " + y;
}
} else {
switch (vis.language) {
case 'en':
if (american) {
dateString += m + "/" + d + "/" + y;
} else {
dateString += d + "/" + m + "/" + y;
}
break;
default:
dateString += d + "." + m + "." + y;
}
}
$hl.html(dateString);
$hl.data('dashTimer', _setTimeout(vis.binds.timeandweather.startDate, (24 * 3600 - (today.getHours() * 60 * 60 + today.getMinutes() * 60 + today.getSeconds())) * 1000, view, elem, showWeekDay, noClass, $hl.data('dashId'), shortWeekDay, shortYear, prependZero, monthWord, shortMonth, american));
}
},
tplTwCoolClock: function (view, data) {
vis.binds.timeandweather.showVersion();
var style;
var wid = data.attr('wid');
if (vis.views[view] &&
vis.views[view].widgets[wid] &&
vis.views[view].widgets[wid].style) {
style = vis.views[view].widgets[wid].style;
}
style = style || {};
style.width = parseInt(style.width) || 85;
style.height = parseInt(style.height) || 85;
var radius = parseInt(style.width) || 85;
if (vis.views[view].widgets[wid]) {
vis.views[view].widgets[wid].style = style;
}
// Take the smallest value
if (style.height < radius) radius = style.height;
radius = Math.round(radius / 2);
var myClass = 'CoolClock:' + (data.attr('theme') || 'classic') + ':' + radius + ':' + (data.attr('noSeconds') ? 'noSeconds' : '') + '::' + (data.attr('showDigital') ? 'showDigital' : '') + '::' + (data.attr('showAmPm') ? 'showAmPm' : '');
var text = '<div id="' + data.attr('wid') + '" data-myclass="' + myClass + '" style="width: ' + style.width + '; height: ' + style.height + 'px" class="vis-widget"><canvas width="' + style.width + '" height="' + style.height + '"class="' + myClass + '"></canvas></div>';
$('#visview_' + view).append(text);
if (vis.editMode) {
$('#' + data.attr('wid')).bind('resize', function () {
var t = $(this);
var myClass = t.attr('data-myclass');
var myClasses = myClass.split(':');
myClasses[2] = t.width();
if (t.height() < myClasses[2]) myClasses[2] = t.height();
myClasses[2] = Math.round(myClasses[2] / 2);
myClass = myClasses.join(':');
t.html('<canvas class="' + myClass + '"></canvas>');
CoolClock.findAndCreateClocks();
});
}
CoolClock.findAndCreateClocks();
},
tplTwFlipClock: function (view, data) {
vis.binds.timeandweather.showVersion();
var text = '<div class="vis-widget" style="width: 500px; height: 110px" id="' + data.attr('wid') + '" data-vis-resizable=';
text += "'" + '{"disabled":true}' + "'></div>";
$('#visview_' + view).append(text);
var clock = $('#' + data.attr('wid')).FlipClock({clockFace: 'TwentyFourHourClock'});
},
tplTwHtcWeather: function (view, data) {
vis.binds.timeandweather.showVersion();
var text = '<div class="vis-widget" style="width: 500px; height: 420px" id="' + data.attr('wid') + '" data-vis-resizable=';
text += "'" + '{"disabled":true}' + "'></div>";
$('#visview_' + view).append(text);
var woeid = data.attr('woeid') || data.attr('weoid');
if (woeid !== undefined && woeid !== null) {
var i = woeid.indexOf('[');
if (i != -1) {
woeid = woeid.substring(i + 1);
i = woeid.indexOf(']');
woeid = woeid.substring(0, i);
}
} else {
woeid = '664942';
}
var updateInterval = data.attr('updateInterval');
if (updateInterval === '' || updateInterval === null || updateInterval === undefined) {
updateInterval = 180;
} else {
updateInterval = parseInt(data.attr('updateInterval'), 10);
}
var clock = $('#' + data.attr('wid')).jdigiclock({
weatherLocationCode: woeid,
city: data.attr('cityName'),
weatherUpdate: updateInterval,
lang: data.attr('language') || vis.language,
clockImagesPath: 'widgets/timeandweather/img/clock/'
});
},
tplTwYahooWeather: function (view, data) {
vis.binds.timeandweather.showVersion();
var text = '<div class="vis-widget ui-widget-content" id="' + data.attr('wid') + '" style="width:250px; height: 500px; color: #ddd"></div>';
$('#visview_' + view).append(text);
var woeid = data.attr('woeid') || data.attr('weoid');
if (woeid !== undefined && woeid !== null) {
var i = woeid.indexOf('[');
if (i != -1) {
woeid = woeid.substring(i + 1);
i = woeid.indexOf(']');
woeid = woeid.substring(0, i);
}
}
else {
woeid = '664942';
}
var updateInterval = data.attr('updateInterval');
if (updateInterval === '' || updateInterval === null || updateInterval === undefined) {
updateInterval = 180;
} else {
updateInterval = parseInt(data.attr('updateInterval'), 10);
}
$('#' + data.attr('wid')).weatherfeed([woeid], {
lang: data.attr('language') || vis.language,
woeid: true,
city: data.attr('cityName'),
humidity: true,
forecast: true,
link: false,
maxDays: data.attr('maxDays'),
update: updateInterval,
resizable: false,
rendered: function () {
if (vis.editMode && vis.activeWidgets.indexOf(data.attr('wid')) != -1) {
vis.resizable($('#' + data.attr('wid')).resizable('destroy'));
}
}
});
},
getValue: function (oidOrBinding) {
if (!oidOrBinding) return '';
if (oidOrBinding[0] === '{') {
return vis.formatBinding(oidOrBinding);
} else {
var val = vis.states.attr(oidOrBinding + '.val');
if (val === undefined || val === null) return '';
if (val === 'null') return '';
return val;
}
},
updateCustomWeather: function (data) {
var getValue = vis.binds.timeandweather.getValue;
var weather = {
units: {
pressure: data.units_pressure || 'mb',
speed: data.units_speed || 'km/h',
temperature: data.units_temp || 'C'
},
location: {
city: data.city || ''
},
wind: {
direction: getValue(data['wind-dir-0-oid']),
speed: getValue(data['wind-speed-0-oid'])
},
atmosphere: {
humidity: getValue(data['humidity-0-oid'])
},
image: {
url: 'http://l.yimg.com/a/i/brand/purplelogo//uh/us/news-wea.gif'
},
item: {
condition: {
temp: getValue(data['temperature-0-oid']),
text: getValue(data['condition-0-oid']),
icon: getValue(data['icon-0-oid'])
},
forecast: [
{
high: getValue(data['temperature-max-0-oid']),
low: getValue(data['temperature-min-0-oid']),
text: getValue(data['condition-0-oid'])
},
{
high: getValue(data['temperature-max-1-oid']),
low: getValue(data['temperature-min-1-oid']),
text: getValue(data['condition-1-oid'])
},
{
high: getValue(data['temperature-max-2-oid']),
low: getValue(data['temperature-min-2-oid']),
text: getValue(data['condition-2-oid'])
},
{
high: getValue(data['temperature-max-3-oid']),
low: getValue(data['temperature-min-3-oid']),
text: getValue(data['condition-3-oid'])
},
{
high: getValue(data['temperature-max-4-oid']),
low: getValue(data['temperature-min-4-oid']),
text: getValue(data['condition-4-oid'])
},
{
high: getValue(data['temperature-max-5-oid']),
low: getValue(data['temperature-min-5-oid']),
text: getValue(data['condition-5-oid'])
},
{
high: getValue(data['temperature-max-6-oid']),
low: getValue(data['temperature-min-6-oid']),
text: getValue(data['condition-6-oid'])
}
]
}
};
if (weather.atmosphere.humidity === '' || weather.atmosphere.humidity === 'null') weather.atmosphere.humidity = null;
if (weather.wind.direction === '' || weather.wind.direction === 'null') weather.wind.direction = null;
if (weather.wind.speed === '' || weather.wind.speed === 'null') weather.wind.speed = null;
for (var i = 0; i < weather.item.forecast.length; i++) {
if (weather.item.forecast[i].high === null &&
weather.item.forecast[i].low === null &&
weather.item.forecast[i].text === null) {
weather.item.forecast.splice(i, weather.item.forecast.length - i);
break;
}
if (weather.item.forecast[i].high === '' &&
weather.item.forecast[i].low === '' &&
weather.item.forecast[i].text === '') {
weather.item.forecast.splice(i, weather.item.forecast.length - i);
break;
}
}
$('#' + data.wid).weatherfeed('', 'update', weather);
/*$('#' + data.wid).weatherfeed('', 'update', {
"units": {
"distance": "km",
"pressure": "mb",
"speed": "km/h",
"temperature": "C"
},
"location": {
"city": "Karlsruhe"
},
"wind": {
"chill": "66",
"direction": "255",
"speed": "11.27"
},
"atmosphere": {
"humidity": "71"
},
"image": {
"url": "http://l.yimg.com/a/i/brand/purplelogo//uh/us/news-wea.gif"
},
"item": {
"condition": {
"code": "26",
"temp": "19",
"text": "Cloudy"
},
"forecast": [
{
"code": "12",
"high": "20",
"low": "14",
"text": "Rain"
},
{
"code": "39",
"high": "21",
"low": "13",
"text": "Scattered Showers"
},
{
"code": "4",
"high": "22",
"low": "15",
"text": "Thunderstorms"
},
{
"code": "28",
"high": "23",
"low": "13",
"text": "Mostly Cloudy"
},
{
"code": "4",
"high": "24",
"low": "15",
"text": "Thunderstorms"
},
{
"code": "47",
"high": "23",
"low": "16",
"text": "Scattered Thunderstorms"
},
{
"code": "30",
"high": "23",
"low": "16",
"text": "Partly Cloudy"
}
]
}
});*/
},
tplTwCustomWeather: function (view, data) {
vis.binds.timeandweather.showVersion();
var text = '<div class="vis-widget ui-widget-content" id="' + data.attr('wid') + '" style="width: 250px; height: 500px; color: #ddd"></div>';
$('#visview_' + view).append(text);
$('#' + data.attr('wid')).weatherfeed('', {
lang: data.attr('language') || vis.language,
custom: true,
city: data.attr('city'),
humidity: true,
forecast: true,
link: false,
resizable: false
});
for (var attr in data) {
if (data.hasOwnProperty(attr)) {
if (attr.match(/-oid$/) && data[attr]) {
if (data[attr][0] === '{') {
var oids = vis.extractBinding(data[attr]);
for (var oid = 0; oid < oids.length; oid++) {
vis.states.bind(oids[oid].visOid + '.val', function () {
vis.binds.timeandweather.updateCustomWeather(data);
});
}
} else {
vis.states.bind(data[attr] + '.val', function () {
vis.binds.timeandweather.updateCustomWeather(data);
});
}
}
}
}
vis.binds.timeandweather.updateCustomWeather(data);
},
createSvgClock: function (options, el) {
var quadSize = options.quadSize || 60;
var quadColor = options.quadColor || '#333';
var quadTickColor = options.quadTickColor || '#333';
var textSize = options.textSize || 30;
var textColor = options.textColor || '#555';
var tickColor = options.tickColor || '#555';
var isSeconds = options.isSeconds || false;
var handsColor = options.handsColor || '#111';
var handsColorLine = options.handsColorLine || '#666';
var handsSecColor = options.handsSecColor || '#be5639';
var textFont = options.textFont || 'verdana, sans-serif';
var $el = $(el);
var html = '<svg viewbox="-450 -450 900 900" class="svg--clock" style="display: block;min-width: 5em;min-height: 5em;width: 100%;height: 100%;">';
html += ' <defs>';
html += ' <line vector-effect="non-scaling-stroke" id="mark--major" y1="28.8" style="stroke-width: 7;stroke: ' + quadTickColor + '"></line>';
html += ' <line vector-effect="non-scaling-stroke" id="mark--minor" y1="14.4" style="stroke-width: 2;stroke: ' + tickColor + '"></line>';
html += ' <circle vector-effect="non-scaling-stroke" class="svg--cc" r="360"></circle>';
html += ' </defs>';
html += ' <g class="svg--ticks" vector-effect="non-scaling-stroke"></g>';
html += ' <g id="hands">';
html += ' <g class="hand--h" style="stroke-linecap: round;stroke-width: 7;stroke: ' + handsColor + '">';
html += ' <line vector-effect="non-scaling-stroke" y2="-234"></line>';
html += ' <line vector-effect="non-scaling-stroke" y1="-136.8" y2="-205.2" style="stroke-width: 3;stroke: ' + handsColorLine + '"></line>';
html += ' </g>';
html += ' <g transform="rotate(25)" class="hand--m" style="stroke-linecap: round;stroke-width: 5;stroke: ' + handsColor + '">';
html += ' <line vector-effect="non-scaling-stroke" y2="-298.8"></line>';
html += ' <line vector-effect="non-scaling-stroke" y1="-201.60000000000002" y2="-270" style="stroke-width: 3;stroke: ' + handsColorLine + '"></line>';
html += ' </g>';
html += ' <g transform="rotate(60)" class="hand--s" style="stroke-width: 2;stroke: ' + handsSecColor + '">';
html += ' <line vector-effect="non-scaling-stroke" y1="36" y2="-342"></line>';
html += ' </g>';
html += ' <g>';
html += ' <circle vector-effect="non-scaling-stroke" r="14.4" style="fill: #e18728;"></circle>';
html += ' <circle vector-effect="non-scaling-stroke" r="7.2" style="fill: #e0a197;"></circle>';
html += ' </g>';
html += ' </g>';
html += '</svg>';
$el.find('svg').remove();
if (!$el.find('svg').length) $el.append(html);
/* because IE */
Math.sign = Math.sign || function (x) {
x = +x; // convert to a number
if (x === 0 || isNaN(x)) {
return x;
}
return x > 0 ? 1 : -1;
};
/* because me lazy */
Object.getOwnPropertyNames(Math).map(function (p) {
window[p] = Math[p];
});
Node.prototype.setAttrs = function (attr_obj) {
for (var prop in attr_obj) {
this.setAttribute(prop, attr_obj[prop]);
}
};
var NS_URI = 'http://www.w3.org/2000/svg',
XLink_NS = 'http://www.w3.org/1999/xlink',
ns = 60,
mi = 5,
qi = .25 * ns,
r = ~~$el.find('.svg--cc')[0].getAttribute('r'),
svg = $el.find('svg')[0],
wrap = $el.find('.svg--ticks')[0],
h_el = $el.find('.hand--h')[0],
m_el = $el.find('.hand--m')[0],
s_el = $el.find('.hand--s')[0],
h_max = 12, h_deg = 360 / h_max,
m_max = 60, m_deg = 360 / m_max,
s_max = 60, s_deg = 360 / s_max,
prev_s;
var init = function () {
var frag = document.createDocumentFragment(),
curr_tick_group, curr_tick, text1, text2,
is_major, is_quad, ref,
curr_angle, base_angle = 360 / ns;
if (!isSeconds) s_el.setAttribute('style', 'display: none');
for (var i = 0; i < ns; i++) {
is_major = (i % mi === 0);
is_quad = (i % qi === 0);
ref = '#mark--' + (is_major ? 'major' : 'minor');
curr_angle = i * base_angle;
curr_tick_group = document.createElementNS(NS_URI, 'g');
curr_tick = document.createElementNS(NS_URI, 'use');
curr_tick.setAttributeNS(XLink_NS, 'xlink:href', ref);
curr_tick.setAttribute(
'transform',
'rotate(' + curr_angle + ')' +
'translate(0 -' + r + ')'
);
if (is_major) {
curr_tick.setAttribute('class', 'major');
text1 = document.createElementNS(NS_URI, 'text');
text1.textContent = i;
text1.setAttribute(
'transform',
'rotate(' + curr_angle + ')' +
'translate(0 -' + 1.05 * r + ')' +
'rotate(' + -curr_angle + ')'
);
curr_tick_group.appendChild(text1);
text1.setAttribute('style', 'dominant-baseline: middle;text-anchor: middle;fill: ' + textColor + '; font: ' + textSize + 'px ' + textFont);
if (is_quad) {
curr_tick.setAttribute('class', 'major quad');
text2 = document.createElementNS(NS_URI, 'text');
text2.textContent = (i / mi) || 12;
text2.setAttrs({
'class': 'quad',
'transform': 'rotate(' + curr_angle + ')' +
'translate(0 -' + .8 * r + ')' +
'rotate(' + -curr_angle + ')'
});
text2.setAttribute('style', 'dominant-baseline: middle;text-anchor: middle;fill: ' + quadColor + '; font: 700 ' + quadSize + 'px ' + textFont);
curr_tick_group.appendChild(text2);
}
}
curr_tick_group.appendChild(curr_tick);
frag.appendChild(curr_tick_group);
}
wrap.appendChild(frag);
run();
setInterval(function () {
requestAnimationFrame(run);
}, 500);
};
var run = function () {
var t = new Date(),
h = t.getHours(), curr_s_deg,
m = t.getMinutes(), curr_m_deg,
s = t.getSeconds(), curr_h_deg;
curr_s_deg = (s % s_max) * s_deg;
if (s != prev_s) {
curr_s_deg = (s % s_max) * s_deg;
if (isSeconds) {
s_el.setAttribute(
'transform',
'rotate(' + curr_s_deg + ')'
);
}
curr_m_deg = ((m % m_max) + s / s_max) * m_deg;
m_el.setAttribute(
'transform',
'rotate(' + curr_m_deg + ')'
);
curr_h_deg = ((h % h_max) + m / m_max) * h_deg;
h_el.setAttribute(
'transform',
'rotate(' + curr_h_deg + ')'
);
}
prev_s = s;
};
init();
},
tplSvgClock: function (el, data) {
vis.binds.timeandweather.showVersion();
setTimeout(function () {
vis.binds.timeandweather.createSvgClock(data, el[0]);
}, 100);
},
tplSegmentClock: function (el, data) {
vis.binds.timeandweather.showVersion();
function writeTime(_el, display) {
var d = new Date();
var h = d.getHours();
if (h < 10) h = '0' + h;
var m = d.getMinutes();
if (m < 10) m = '0' + m;
var s = d.getSeconds();
if (s < 10) s = '0' + s;
var time = h + ':' + m;
if (data.seconds && data.seconds !== 'false') time += ':' + s;
if (vis.editMode || _el.data('val') != time) {
_el.data('val', time);
display.setValue(time);
}
}
function runText(_el, _display, interval) {
var $display = $('#' + _display.displayId);
var val = _el.data('value');
var len = val.length;
if (!val) return;
var step = _el.data('step') || 0;
if (step < 0) {
val = new Array(-step + 1).join(' ') + val.substring(0, _display.pattern.length + step);
} else {
val = val.substring(step);
}
if (step >= len) {
step = -(_display.pattern.length - 1);
} else {
step++;
}
_el.data('step', step);
_display.setValue(val);
if (!_el.data('timerId')) {
var timerId = Math.round(Math.random() * 100000) + 1;
var timer = setInterval(function () {
if (_el.data('timerId') != timerId) {
clearInterval(timer);
return;
}
runText(_el, _display, interval);
}, interval)
_el.data('timerId', timerId);
}
}
setTimeout(function () {
el.append('<canvas id="' + data.attr('wid') + '_clock" width="' + el.width() + '" height="' + el.height() + '"></canvas>');
var display = new SegmentDisplay(data.attr('wid') + '_clock');
display.pattern = data.pattern || "##:##:##";
if (display.pattern == "##:##:##" && (!data.seconds || data.seconds === 'false')) display.pattern = "##:##";
display.segmentCount = parseInt(data.segmentCount, 10) || 7;
display.displayAngle = (data.displayAngle === '' || data.displayAngle === null || data.displayAngle === undefined) ? 9 : (parseInt(data.displayAngle, 10) || 0);
display.digitHeight = parseInt(data.digitHeight, 10) || 20;
display.digitWidth = parseInt(data.digitWidth, 10) || 12;
display.digitDistance = (data.digitDistance === '' || data.digitDistance === null || data.digitDistance === undefined) ? 2 : (parseInt(data.digitDistance, 10) || 0);
display.segmentWidth = parseInt(data.segmentWidth, 10) || 3;
display.segmentDistance = (data.segmentDistance === '' || data.segmentDistance === null || data.segmentDistance === undefined) ? 0.5 : (parseFloat(data.segmentDistance) || 0);
switch (data.cornerType) {
case 'SymmetricCorner':
display.cornerType = 0;
break;
case 'FlattenedCorner':
display.cornerType = 1;
break;
case 'PointedCorner':
display.cornerType = 2;
break;
case 'RoundedCorner':
display.cornerType = 0;
break;
default:
display.cornerType = 0;
break;
}
display.colorOn = data.colorOn || 'rgba(0, 0, 0, 0.9)';
display.colorOff = data.colorOff || 'rgba(0, 0, 0, 0.1)';
data.runStepInterval = parseInt(data.runStepInterval, 10) || 0;
if (data.oid && data.oid != 'nothing_selected') {
var value = vis.states.attr(data.oid + '.val');
if (value === null || value === undefined) value = '';
value = value.toString();
display.setValue(value);
el.data('value', value).data('step', 0);
vis.states.bind(data.oid + '.val', function (e, newVal) {
el.data('value', newVal).data('step', 0);
display.setValue(newVal.toString());
});
if (data.runStepInterval) {
runText(el, display, data.runStepInterval);
}
} else if (data.text) {
el.data('value', data.text.toString()).data('step', 0);
display.setValue(data.text.toString());
if (data.runStepInterval) {
runText(el, display, data.runStepInterval);
}
} else if (data.clock) {
var timerId = Math.round(Math.random() * 1000000);
el.data('timer', timerId);
writeTime(el, display);
var interval = setInterval(function () {
if (el.data('timer') != timerId) {
clearInterval(interval);
}
writeTime(el, display);
}, 1000);
} else {
display.setValue('no oid, no text, no clock');
}
});
}
};
if (vis.editMode) {
vis.binds.timeandweather.editWeather = function (wid_attr, options) {
var line = {
input: '<input type="text" id="inspect_' + wid_attr + '"/>',
init: function (_wid_attr, data) {
$('#inspect_' + _wid_attr).autocomplete({
source: function (req, callback) {
console.log(req.term);
var query = 'select * from geo.places where text="' + req.term + '"';
var api = 'http://query.yahooapis.com/v1/public/yql?q=' + encodeURIComponent(query) + '&format=json&callback=?';
// Send request
$.ajax({
type: 'GET',
url: api,
dataType: 'json',
success: function (data) {
if (data.query.count > 0) {
var arr = [];
for (var i = 0; i < data.query.count; i++) {
arr.push({
label: $.fn._getWeatherAddress(data.query.results.place[i]),
value: data.query.results.place.woeid
});
}
callback(arr);
} else {
callback([]);
}
},
error: function (data) {
callback([]);
}
});
},
select: function (event, ui) {
$(this).val(ui.item.value);
$(this).trigger('change', ui.item.value);
}
});
}
};
return line;
};
}
</script>
<!-- startDate: function (view, elem, showWeekDay, noClass, timerId, shortWeekDay, shortYear, prependZero, monthWord, shortMonth, american) {
-->
<script id="tplTwSimpleDate"
type="text/ejs"
class="vis-tpl"
data-vis-prev='<div id="prev_tplTwSimpleDate" style=" position: relative; text-align: initial;padding: 4px "><div class="vis-widget_prev date vis-widget-lock ui-selectee" style="left: 139px; top: 76px;">30.01.2015</div>'
data-vis-set="timeandweather"
data-vis-name="SimpleDate"
data-vis-attrs="showWeekDay/checkbox;shortWeekDay/checkbox;shortYear/checkbox;prependZero[true]/checkbox;monthWord/checkbox;shortMonth/checkbox;americanOrder/checkbox;noClass/checkbox">
<%
vis.binds.timeandweather.startDate(this.view, this.data.attr('wid'), this.data.attr('showWeekDay'), this.data.attr('noClass'), undefined, this.data.attr('shortWeekDay'), this.data.attr('shortYear'), this.data.attr('prependZero'), this.data.attr('monthWord'), this.data.attr('shortMonth'), this.data.attr('americanOrder'));
%>
</script>
<script id="tplTwSimpleClock"
type="text/ejs"
class="vis-tpl"
data-vis-prev='<div id="prev_tplTwSimpleClock" style=" position: relative; text-align: initial;padding: 4px "><div class="vis-widget_prev clock vis-widget-lock ui-selectee" style="left: 132px; top: 179px; font-size: 28px;">11:01:57</div>'
data-vis-set="timeandweather"
data-vis-name="SimpleClock"
data-vis-attrs="hideSeconds/checkbox;blink/checkbox;noClass/checkbox">
<%
vis.binds.timeandweather.startTime(this.view, this.data.attr('wid'), this.data.attr('hideSeconds'), this.data.attr('blink'), this.data.attr('noClass'));
%>
</script>
<script id="tplTwCoolClock"
type="text/ejs"
class="vis-tpl"
data-vis-prev='<img src="widgets/timeandweather/img/Prev_CoolClock.png"></img>'
data-vis-set="timeandweather"
data-vis-name="CoolClock"
data-vis-attrs="theme/select,fancy,swissRail,chunkySwiss,machine,simonbaird_com,classic,classicWhite,modern,simple,securephp,Tes2,Lev,Sand,Sun,Tor,Cold,Babosa,Tumb,Stone,Disc,watermelon;noSeconds/checkbox;showDigital/checkbox;showAmPm/checkbox" >
<%
vis.binds.timeandweather.tplTwCoolClock(this.view, this.data);
%>
</script>
<script id="tplTwFlipClock"
type="text/ejs"
class="vis-tpl"
data-vis-prev='<img src="widgets/timeandweather/img/Prev_FlipClock.png"></img>'
data-vis-set="timeandweather"
data-vis-name="FlipClock"
data-vis-attrs="">
<%
vis.binds.timeandweather.tplTwFlipClock(this.view, this.data);
%>
</script>
<script id="tplTwHtcWeather"
type="text/ejs"
class="vis-tpl"
data-vis-prev='<img src="widgets/timeandweather/img/Prev_HTCWeather.png"></img>'
data-vis-set="timeandweather"
data-vis-name="HtcWeather"
data-vis-attrs="woeid/custom,timeandweather.editWeather;cityName;language/select,,en,de,ru;updateInterval[180]/slider,0,1440,10;">
<%
vis.binds.timeandweather.tplTwHtcWeather(this.view, this.data);
%>
</script>
<script id="tplTwYahooWeather"
type="text/ejs"
class="vis-tpl"
data-vis-prev='<img src="widgets/timeandweather/img/Prev_YahooWeather.png"></img>'
data-vis-set="timeandweather"
data-vis-name="YahooWeather"
data-vis-attrs="woeid/custom,timeandweather.editWeather;cityName;language/select,,en,de,ru;maxDays[7]/slider,0,8,1;updateInterval[180]/slider,0,1440,10;">
<%
vis.binds.timeandweather.tplTwYahooWeather(this.view, this.data);
%>
</script>
<script id="tplTwWeather"
type="text/ejs"
class="vis-tpl"
data-vis-prev='<img src="widgets/timeandweather/img/Prev_YahooWeather.png"></img>'
data-vis-set="timeandweather"
data-vis-name="WeatherCustom"
data-vis-attrs="city;language/select,,en,de,ru;units_speed;"
data-vis-attrs0="group.now;temperature-0-oid/id;condition-0-oid/id;humidity-0-oid/id;temperature-min-0-oid/id;temperature-max-0-oid/id;wind-speed-0-oid/id;wind-dir-0-oid/id;icon-0-oid/id;"
data-vis-attrs1="group.tomorrow;condition-1-oid/id;temperature-min-1-oid/id;temperature-max-1-oid/id;icon-1-oid/id;"
data-vis-attrs2="group.aftertomorrow;condition-2-oid/id;temperature-min-2-oid/id;temperature-max-2-oid/id;icon-2-oid/id;"
data-vis-attrs3="group.in2days;condition-3-oid/id;temperature-min-3-oid/id;temperature-max-3-oid/id;icon-3-oid/id;"
data-vis-attrs4="group.in3days;condition-4-oid/id;temperature-min-4-oid/id;temperature-max-4-oid/id;icon-4-oid/id;"
data-vis-attrs5="group.in4days;condition-5-oid/id;temperature-min-5-oid/id;temperature-max-5-oid/id;icon-5-oid/id;"
data-vis-attrs6="group.in5days;condition-6-oid/id;temperature-min-6-oid/id;temperature-max-6-oid/id;icon-6-oid/id;"
>
<%
vis.binds.timeandweather.tplTwCustomWeather(this.view, this.data);
%>
</script>
<script id="tplSvgClock"
type="text/ejs"
class="vis-tpl"
data-vis-prev='<img src="widgets/timeandweather/img/Prev_tplSvgClock.png"></img>'
data-vis-set="timeandweather"
data-vis-name="Svg Clock"
data-vis-update-style="true"
data-vis-attrs="quadSize/slider,10,200,1;quadColor/color;quadTickColor/color;textSize/slider,10,200,1;textColor/color;tickColor/color;isSeconds/checkbox;handsColor/color;handsColorLine/color;handsSecColor/color;textFont/fontname"
>
<div class="vis-widget <%== this.data.attr('class') %>" style="width: 100px; height: 100px;" id="<%= this.data.attr('wid') %>">
<div class="vis-widget-body" <%= (el) -> vis.binds.timeandweather.tplSvgClock(el, this.data) %> />
</div>
</script>
<script id="tplSegmentClock"
type="text/ejs"
class="vis-tpl"
data-vis-prev='<img src="widgets/timeandweather/img/Prev_tplSegmentClock.png"></img>'
data-vis-set="timeandweather"
data-vis-name="Segment Clock"
data-vis-update-style="true"
data-vis-attrs="oid;text;"
data-vis-attrs0="group.clock;clock[true]/checkbox;seconds[true]/checkbox;"
data-vis-attrs1="group.style;pattern[##:##:##];colorOn[rgba(0, 0, 0, 1)]/color;colorOff[rgba(0, 0, 0, 0.1)]/color;runStepInterval[0]/slider,0,5000,100;segmentCount[7]/nselect,7,14,16;displayAngle[9]/slider,0,30,1;digitHeight[20]/slider,0,60,1;digitWidth[12]/slider,0,60,1;digitDistance[2]/slider,0,60,1;segmentWidth[3]/slider,0,60,1;segmentDistance[0.5]/slider,0,5,0.1;cornerType[PointedCorner]/select,SymmetricCorner,FlattenedCorner,PointedCorner,RoundedCorner"
>
<div class="vis-widget <%== this.data.attr('class') %>" style="width: 100px; height: 30px;" id="<%= this.data.attr('wid') %>">
<div class="vis-widget-body" <%= (el) -> vis.binds.timeandweather.tplSegmentClock(el, this.data) %> />
</div>
</script>