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