yunkong2.vis-timeandweather/widgets/timeandweather.html
2018-09-22 10:13:20 +08:00

1107 lines
60 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!--
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>