|
|
<!--
|
|
|
|
|
|
yunkong2.vis Metro Widget-Set
|
|
|
|
|
|
version: "1.1.2"
|
|
|
|
|
|
6'2014-2017 hobbyquaker, bluefox
|
|
|
|
|
|
based on http://metroui.org.ua/
|
|
|
|
|
|
TODO:
|
|
|
- Attribute für vordefinierte fg-CSS-Klassen
|
|
|
- Attribute für font-size, text-align, color, padding, margin in tile.content
|
|
|
- Tile das JSON-Tabellen durchscrollt
|
|
|
- content_oid Attribut für mehr Tiles
|
|
|
- Doku
|
|
|
|
|
|
-->
|
|
|
|
|
|
<link rel="stylesheet" href="widgets/metro/css/iconFont.min.css" />
|
|
|
<link rel="stylesheet" href="widgets/metro/css/metro-bootstrap.css" />
|
|
|
<script type="text/javascript" src="widgets/metro/js/metro.js"></script>
|
|
|
|
|
|
<script type="text/javascript">
|
|
|
|
|
|
'use strict';
|
|
|
if (vis.editMode) {
|
|
|
// Add words for basic widgets
|
|
|
$.extend(true, systemDictionary, {
|
|
|
|
|
|
"select_current": {
|
|
|
"en": "Select current view",
|
|
|
"de": "Aktuelle View selektieren",
|
|
|
"ru": "Отметить текущую"
|
|
|
},
|
|
|
"label": {"en": "Label", "cn": "标签", "ru": "Надпись"},
|
|
|
"autoclose": {"en": "Auto close", "cn": "自动关闭", "ru": "Автозакрытие"},
|
|
|
"label_prepend": {"en": "Label prepend", "de": "Vor Beschriftung", "ru": "Перед надписью"},
|
|
|
"label_append": {"en": "Label append", "de": "Nach Beschriftung", "ru": "После надписи"},
|
|
|
"badge_label": {"en": "Badge text", "de": "Abzeichentext", "ru": "Текст в бирке"},
|
|
|
"dialog_url": {"en": "Dialog URL", "de": "Dialog URL", "ru": "URL фрейма в диалоге"},
|
|
|
"dialog_scroll": {"en": "Scroll in iFrame", "de": "Scroll im iFrame", "ru": "Скролл в диалоге"},
|
|
|
"icon": {"en": "Icon URL", "de": "Icon URL", "ru": "URL иконки"},
|
|
|
"icon_src": {"en": "Icon URL", "de": "Icon URL", "ru": "URL иконки"},
|
|
|
"icon_width": {"en": "Icon width", "de": "Iconbreite", "ru": "Ширина иконки"},
|
|
|
"icon_height": {"en": "Icon height", "de": "Iconhöhe", "ru": "Высота иконки"},
|
|
|
"icon_top": {"en": "Icon left", "de": "Icon-Offset von oben", "ru": "Сдвиг иконки сверху"},
|
|
|
"icon_left": {"en": "Icon top", "de": "Icon-Offset von links", "ru": "Сдвиг иконки слева"},
|
|
|
"icon_class": {"en": "Icon class", "de": "Ikonenklasse", "ru": "Иконка"},
|
|
|
"icon_badge": {"en": "Icon badge", "de": "Abzeichenikone", "ru": "Иконка бирки"},
|
|
|
"bg_class": {"en": "Background", "cn": "背景", "ru": "Фон"},
|
|
|
"bg_class_active": {"en": "Background active", "de": "Aktiver Hintergrund", "ru": "Акивный Фон"},
|
|
|
"badge_bg_class": {"en": "Badge background", "de": "Abzeichen- Hintergrund", "ru": "Фон бирки"},
|
|
|
"badge_bg_class_active": {
|
|
|
"en": "Badge background active",
|
|
|
"de": "Aktiver Abzeichen- Hintergrund",
|
|
|
"ru": "Фон активной бирки"
|
|
|
},
|
|
|
"brand_bg_class": {"en": "Brand background", "de": "Brand- Hintergrund", "ru": "Фон полоски"},
|
|
|
"brand_bg_class_active": {
|
|
|
"en": "Brand background active",
|
|
|
"de": "Aktiver Brand- Hintergrund",
|
|
|
"ru": "Фон активной полоски"
|
|
|
},
|
|
|
"badge_src": {"en": "Badge URL", "de": "Abzeichen URL", "ru": "URL бирки"},
|
|
|
"badge_src_false": {"en": "Badge URL", "de": "Abzeichen URL", "ru": "URL бирки"},
|
|
|
"badge_src_true": {"en": "Badge URL by true", "de": "Aktiv-Abzeichen URL", "ru": "URL активной URL"},
|
|
|
"badge_width": {"en": "Badge width[%]", "de": "Abzeichen-Breite[%]", "ru": "Ширина бирки"},
|
|
|
"badge_height": {"en": "Badge height[%]", "de": "Abzeichen-Höhe[%]", "ru": "Высота бирки"},
|
|
|
"badge_top": {"en": "Badge top[%]", "de": "Abzeichen-Top[%]", "ru": "Отступ сверху для бирки"},
|
|
|
"badge_left": {"en": "Badge left[%]", "de": "Abzeichen-Links[%]", "ru": "Отступ слева для бирки"},
|
|
|
"group_icon": {"en": "Icon", "de": "Icon", "ru": "Иконка"},
|
|
|
"group_badge": {"en": "Badge", "de": "Abzeichen", "ru": "Бирка"},
|
|
|
"group_bg-and-text": {"en": "Background and label", "de": "Hintergrund und Titel", "ru": "Фон и надпись"},
|
|
|
"group_dialog": {"en": "Dialog", "de": "Dialog", "ru": "Диалог"},
|
|
|
"group_brand": {"en": "Brand", "de": "Brand", "ru": "Brand"},
|
|
|
"transform": {"en": "Transform", "de": "Druckeffekt", "ru": "Эффект нажатия"},
|
|
|
"hover": {"en": "Hover effect", "de": "Hover-Effekt", "ru": "Реакция на курсор"},
|
|
|
"oid-working": {"en": "Working state ID", "de": "In Arbeit Zustand ID", "ru": "'В работе' ID"},
|
|
|
"min": {"en": "Min", "cn": "最小", "ru": "Минимум"},
|
|
|
"max": {"en": "Max", "cn": "最大", "ru": "Максимум"},
|
|
|
"step": {"en": "Step", "cn": "Step", "ru": "Шаг"},
|
|
|
"sliderColor": {"en": "Slider color", "cn": "滑块颜色", "ru": "Цвет ползунка"},
|
|
|
"sliderCompleteColor": {
|
|
|
"en": "Slider complete color"
|
|
|
},
|
|
|
"sliderMarkerColor": {"en": "Slider handle color", "de": "Schiebergrifffarbe", "ru": "Цвет ручки"},
|
|
|
"content_oid": {"en": "Content ID", "de": "Inhalt ID", "ru": "ID Содержания"},
|
|
|
"dialog_oid": {"en": "Dialog ID", "de": "Dialog ID", "ru": "ID Текста для диалога"},
|
|
|
"number_oid": {"en": "Number ID", "de": "Nummer ID", "ru": "ID Числа"},
|
|
|
"hide_on_0": {"en": "Hide by 0", "de": "Verbergen bei 0", "ru": "Скрыть при 0"},
|
|
|
"dialog_fontSize": {"en": "Dialog font size", "de": "Dialogschriftgrösse", "ru": "Размер шрифта"},
|
|
|
"dialog_padding": {"en": "Dialog padding", "de": "Dialog padding", "ru": "Отступ"},
|
|
|
"dialog_textAlign": {"en": "Dialog text align", "de": "Dialogtextausrichtung", "ru": "Выравнивание текста"},
|
|
|
"dialog_width": {"en": "Dialog width", "de": "Dialogbreite", "ru": "Ширина"},
|
|
|
"dialog_height": {"en": "Dialog height", "de": "Dialoghöhe", "ru": "Высота"},
|
|
|
"dialog_title": {"en": "Title", "cn": "标题", "ru": "Надпись"},
|
|
|
"dialog_flat": {"en": "Flat Design", "de": "Flaches Design", "ru": "Плоский дизайн"},
|
|
|
"dialog_shadow": {"en": "Shadow", "cn": "阴影", "ru": "Показать тень"},
|
|
|
"dialog_draggable": {"en": "Draggable", "de": "Konnte verschoben werden", "ru": "Можно двигать"},
|
|
|
"dialog_modal": {"en": "Modal", "de": "Modaldialog", "ru": "Модальное окно"},
|
|
|
"dialog_icon_src": {"en": "Icon URL", "de": "Ikone URL", "ru": "URL иконки"},
|
|
|
"dialog_icon_class": {"en": "Icon class", "de": "Ikoneklasse", "ru": "Класс иконки"},
|
|
|
"Select ID": {"en": "Select ID", "de": "Select ID", "ru": "Select ID"},
|
|
|
"state_oid": {"en": "State ID", "de": "Zustand ID", "ru": "ID Статуса"},
|
|
|
"select_on_true": {"en": "Select by true", "de": "Selektieren bei Wahr", "ru": "Отметить при 1"},
|
|
|
"label_true": {"en": "Label if true", "de": "Schild bei Wahr", "ru": "Надпись при 1"},
|
|
|
"label_false": {"en": "Label if false", "de": "Schild bei Falsch", "ru": "Надпись при 0"},
|
|
|
"bg_class_true": {"en": "Background by true", "de": "Hintergrund bei Wahr", "ru": "Фон при 1"},
|
|
|
"bg_class_false": {"en": "Background by false", "de": "Hintergrund bei Falsch", "ru": "Фон при 0"},
|
|
|
"icon_true_src": {"en": "Icon URL by true", "de": "Ikone URL bei Wahr", "ru": "URL иконки при 1"},
|
|
|
"icon_false_src": {"en": "Icon URL by false", "de": "Ikone URL bei Falsch", "ru": "URL иконки при 0"},
|
|
|
"icon_true_src_tooltip": {
|
|
|
"en": "To center the image select 'icon-custom' class"
|
|
|
},
|
|
|
"icon_false_src_tooltip": {
|
|
|
"en": "To center the image select 'icon-custom' class"
|
|
|
},
|
|
|
"icon_class_true": {
|
|
|
"en": "Icon class by true"
|
|
|
},
|
|
|
"icon_class_false": {
|
|
|
"en": "Icon class by false"
|
|
|
},
|
|
|
"badge_bg_class_true": {
|
|
|
"en": "Badge background by true"
|
|
|
},
|
|
|
"badge_bg_class_false": {
|
|
|
"en": "Badge background by false"
|
|
|
},
|
|
|
"brand_bg_class_true": {
|
|
|
"en": "Brand background by true"
|
|
|
},
|
|
|
"brand_bg_class_false": {
|
|
|
"en": "Brand background by false"
|
|
|
},
|
|
|
"icon_true": {"en": "Icon by true", "de": "Ikone bei Wahr", "ru": "Иконка при 1"},
|
|
|
"icon_false": {"en": "Icon by false", "de": "Ikone bei Falsch", "ru": "Иконка при 0"},
|
|
|
"icon_badge_true": {"en": "Badge icon by true", "de": "Abzeichenikone bei Wahr", "ru": "Иконка бирки при 1"},
|
|
|
"icon_badge_false": {
|
|
|
"en": "Badge icon by false"
|
|
|
},
|
|
|
"value": {"en": "Value", "de": "Wert", "ru": "Значение"},
|
|
|
"select_on_value": {"en": "Select on value", "de": "Selektieren by Wert", "ru": "Отметить при значении"},
|
|
|
"group_slider": {"en": "Slider", "de": "Schieber", "ru": "Ползунок"},
|
|
|
"content_prepend": {"en": "Сontent prepend", "de": "Inhaltprefix", "ru": "Префикс содержания"},
|
|
|
"content_append": {"en": "Сontent append", "de": "Inhaltsuffix", "ru": "Суффику содержания"},
|
|
|
"label_id": {"en": "Label ObjectID", "de": "Beschriftung ObjectID", "ru": "ObjectID надписи"},
|
|
|
"hum_oid": {"en": "Humidity ID", "de": "Luftfeutigkeit ID", "ru": "ID влажности"},
|
|
|
"label_humidity": {"en": "Label for humidity", "de": "Beschriftung Luftfeutigkeit", "ru": "Подпись влажности"},
|
|
|
"lowbat_oid": {"en": "Low battery ID", "de": "Low battery ID", "ru": "ID низкого заряда батареи"},
|
|
|
"controlmode_oid": {"en": "Control mode ID", "de": "Kontrollmodus ID", "ru": "ID Режима управления"},
|
|
|
"windowopen_oid": {"en": "Window open ID", "de": "Fenstersensor ID", "ru": "Сенсор окна ID"}
|
|
|
});
|
|
|
}
|
|
|
|
|
|
$.extend(true, systemDictionary, {
|
|
|
"Set temperature": {"en": "Set temperature", "de": "Soll-Temperatur", "ru": "Выставленная темп."},
|
|
|
"Actual temp.": {"en": "Actual temp.", "de": "Ist-Temperatur", "ru": "Актуальная темп."},
|
|
|
"Valve position": {"en": "Valve position", "de": "Ventilstellung", "ru": "Позиция вентиля"},
|
|
|
"Humidity": {"en": "Humidity", "de": "Luftfeuchtigkeit", "ru": "Влажность"},
|
|
|
"Target": {"en": "Target", "de": "Soll", "ru": "Должно"},
|
|
|
"Actual": {"en": "Now", "de": "Ist", "ru": "Сейчас"},
|
|
|
"group_service": {"en": "Service", "de": "Service", "ru": "Сервис"},
|
|
|
"icon_lowbat": {"en": "Icon low battery", "de": "Icon Batterie leer", "ru": "Иконка низкого заряда батареи"},
|
|
|
"icon_control_mode_0": {"en": "Icon auto mode", "de": "Icon Auto Modus", "ru": "Иконка для авто-режима"},
|
|
|
"icon_control_mode_1": {"en": "Icon manual mode", "de": "Icon man. Modus", "ru": "Иконка для ручного режима"},
|
|
|
"icon_control_mode_2": {"en": "Icon party mode", "de": "Icon Party Modus", "ru": "Иконка для режима вечеринки"},
|
|
|
"icon_control_mode_3": {"en": "Icon boost mode", "de": "Icon Boost Modus", "ru": "Иконка для режима наддува"},
|
|
|
"icon_windowopen": {"en": "Icon window open", "de": "Icon Fenster offen", "ru": "Иконка открытого окна"}
|
|
|
});
|
|
|
|
|
|
vis.navChangeCallbacks.push(function (view) {
|
|
|
$('.vis-metro-nav').each(function () {
|
|
|
var $this = $(this);
|
|
|
if ($this.attr('data-metro-nav') === view) {
|
|
|
if ($this.attr('data-metro-nav-select') === 'true') {
|
|
|
$this.addClass("selected");
|
|
|
}
|
|
|
$this.addClass($this.attr('data-metro-class-active'));
|
|
|
if ($this.attr('data-metro-class-active') !== $this.attr('data-metro-class')) {
|
|
|
$this.removeClass($this.attr('data-metro-class'));
|
|
|
}
|
|
|
} else {
|
|
|
$this.addClass($this.attr('data-metro-class'));
|
|
|
if ($this.attr('data-metro-class-active') !== $this.attr('data-metro-class')) {
|
|
|
$this.removeClass($this.attr('data-metro-class-active'));
|
|
|
}
|
|
|
$this.removeClass('selected');
|
|
|
}
|
|
|
});
|
|
|
});
|
|
|
|
|
|
vis.binds.metro = {
|
|
|
version: "1.1.2",
|
|
|
format: function (value, type, mustValue) {
|
|
|
if (!type || type === 'bool') {
|
|
|
|
|
|
return '_' + !(!value || value === 'false' || value === '0');
|
|
|
|
|
|
} else if (type == 10) {
|
|
|
|
|
|
if (!value || value === 'false' || value === '0') value = 0;
|
|
|
if (value === 'true' || value === true) value = 1;
|
|
|
return parseInt(value, 10);
|
|
|
|
|
|
} else if (type === 'compare') {
|
|
|
|
|
|
if (!value || value === 'false' || value === '0') value = 0;
|
|
|
if (value === 'true' || value === true) value = 1;
|
|
|
|
|
|
if (mustValue === 'true' || mustValue === '1') mustValue = 1;
|
|
|
if (mustValue === 'false' || mustValue === '0') mustValue = 0;
|
|
|
|
|
|
return '_' + (value == mustValue);
|
|
|
} else if (type === '%') {
|
|
|
if (value !== undefined && (typeof value === 'number' || typeof value === 'string')) value = parseFloat(value).toFixed(0) + '%';
|
|
|
if (value === undefined) value = '';
|
|
|
return value;
|
|
|
} else if (type === '°') {
|
|
|
if (value !== undefined && (typeof value === 'number' || typeof value === 'string')) value = parseFloat(value).toFixed(1) + '°C';
|
|
|
if (value === undefined) value = '';
|
|
|
return value;
|
|
|
}
|
|
|
return value;
|
|
|
},
|
|
|
inputControl: function (el) {
|
|
|
var $this = $(el).parent().find('input');
|
|
|
},
|
|
|
slider: function (el, options) {
|
|
|
var $this = $(el).parent().find('.slider');
|
|
|
var oid = $this.attr('data-oid');
|
|
|
var wid = $this.attr('data-oid-working');
|
|
|
|
|
|
if (!oid && options.hideIfNoOid) {
|
|
|
$this.hide();
|
|
|
return;
|
|
|
}
|
|
|
|
|
|
var min = (options.min === undefined || options.min === null || options.min === '') ? 0.00 : parseFloat(options.min);
|
|
|
var max = (options.max === undefined || options.min === null || options.max === '') ? 1.00 : parseFloat(options.max);
|
|
|
|
|
|
if (max < min) {
|
|
|
var tmp = max;
|
|
|
max = min;
|
|
|
min = tmp;
|
|
|
}
|
|
|
var val = vis.states.attr(oid + '.val');
|
|
|
if (val === true || val === 'true') val = max;
|
|
|
if (val === false || val === 'false') val = min;
|
|
|
val = parseFloat(val);
|
|
|
if (isNaN(val)) val = min;
|
|
|
|
|
|
if (val < min) val = min;
|
|
|
if (val > max) val = max;
|
|
|
|
|
|
options.min = min;
|
|
|
options.max = max;
|
|
|
options.simRange = 100;
|
|
|
options.range = options.max - options.min;
|
|
|
options.factor = options.simRange / options.range;
|
|
|
val = Math.floor((val - options.min) * options.factor);
|
|
|
|
|
|
$this.metroSlider({
|
|
|
min: 0,
|
|
|
max: options.simRange,
|
|
|
accuracy: options.accuracy || 0,
|
|
|
color: options.color || undefined,
|
|
|
completeColor: options.completeColor || undefined,
|
|
|
markerColor: options.markerColor || undefined,
|
|
|
position: val,
|
|
|
animate: true,
|
|
|
change: function (val) {
|
|
|
val = (parseFloat(val) / options.factor) + options.min;
|
|
|
if (options.step) {
|
|
|
val = Math.round(val / options.step) * options.step;
|
|
|
}
|
|
|
if (options.digits !== undefined && options.digits !== null && options.digits !== '') {
|
|
|
vis.setValue(oid, val.toFixed(options.digits));
|
|
|
//vis.setValue(oid, parseFloat(val).toFixed(options.digits));
|
|
|
} else {
|
|
|
vis.setValue(oid, val);
|
|
|
//vis.setValue(oid, parseFloat(val));
|
|
|
}
|
|
|
},
|
|
|
changed: function (val) {
|
|
|
|
|
|
}
|
|
|
});
|
|
|
|
|
|
vis.states.bind(oid + '.val', function (e, newVal, oldVal) {
|
|
|
var val = vis.states.attr(oid + '.val');
|
|
|
|
|
|
if (val === true || val === 'true') val = options.max;
|
|
|
if (val === false || val === 'false') val = options.min;
|
|
|
|
|
|
val = parseFloat(val);
|
|
|
if (isNaN(val)) val = options.min;
|
|
|
if (val < options.min) val = options.min;
|
|
|
if (val > options.max) val = options.max;
|
|
|
val = Math.floor((val - options.min) * options.factor);
|
|
|
|
|
|
try {
|
|
|
$this.metroSlider('value', val);
|
|
|
} catch (e) {
|
|
|
console.error(e);
|
|
|
}
|
|
|
});
|
|
|
},
|
|
|
tile: function (el, transform) {
|
|
|
var $this = $(el).parent().find('.tile');
|
|
|
if (transform) $this.tileTransform();
|
|
|
|
|
|
setTimeout(function () {
|
|
|
$('.vis-metro-nav').each(function () {
|
|
|
var $this = $(this);
|
|
|
if ($this.attr('data-metro-nav') === vis.activeView) {
|
|
|
if ($this.attr('data-metro-nav-select') === 'true') {
|
|
|
$this.addClass('selected');
|
|
|
}
|
|
|
$this.addClass($this.attr('data-metro-class-active'));
|
|
|
if ($this.attr('data-metro-class-active') !== $this.attr('data-metro-class')) {
|
|
|
$this.removeClass($this.attr('data-metro-class'));
|
|
|
}
|
|
|
} else {
|
|
|
$this.addClass($this.attr('data-metro-class'));
|
|
|
if ($this.attr('data-metro-class-active') !== $this.attr('data-metro-class')) {
|
|
|
$this.removeClass($this.attr('data-metro-class-active'));
|
|
|
}
|
|
|
$this.removeClass('selected');
|
|
|
}
|
|
|
});
|
|
|
}, 100);
|
|
|
},
|
|
|
tileDialog: function (el, wid, view, options, html, isIframe) {
|
|
|
var $this = $(el).parent().find('.tile');
|
|
|
|
|
|
var width = parseInt(options.width, 10);
|
|
|
var height = parseInt(options.height, 10);
|
|
|
|
|
|
if (isNaN(width)) width = undefined;
|
|
|
if (isNaN(height)) height = undefined;
|
|
|
|
|
|
if (view || html || vis.editMode) {
|
|
|
$(el).parent().on('click touchstart', function () {
|
|
|
// Protect against two events
|
|
|
if (vis.detectBounce(this)) return;
|
|
|
|
|
|
$.metroDialog({
|
|
|
width: width,
|
|
|
height: height,
|
|
|
overlay: options.overlay || false,
|
|
|
shadow: options.shadow || false,
|
|
|
flat: options.flat || false,
|
|
|
draggable: options.draggable || false,
|
|
|
title: options.title || '',
|
|
|
icon: options.icon ? '<img src="' + options.icon + '">' : (options.icon_class ? '<span class="' + options.icon_class + '"></span>' : false),
|
|
|
content: '',
|
|
|
onShow: function(_dialog){
|
|
|
var content = _dialog.children('.content');
|
|
|
if (html) {
|
|
|
if (isIframe) {
|
|
|
content.css('overflow', 'hidden');
|
|
|
content.html('<iframe src="' + html + '" style="width: 100%; height: 100%" scrolling="' + (options.scroll ? 'yes' : 'no') + '"></iframe>');
|
|
|
} else {
|
|
|
content.html(html);
|
|
|
}
|
|
|
} else {
|
|
|
content.html('<div class="vis-view-container" data-vis-contains="' + view + '"></div>');
|
|
|
if (vis.views[view]) {
|
|
|
vis.renderView(view, view, false, function (_view) {
|
|
|
$('#visview_' + _view).appendTo(content).show();
|
|
|
});
|
|
|
}
|
|
|
$('#visview_' + view).appendTo(content);
|
|
|
$('#visview_' + view).show();
|
|
|
}
|
|
|
}
|
|
|
});
|
|
|
});
|
|
|
}
|
|
|
},
|
|
|
tileDialogString: function (el, wid, content_oid, options, fontSize, padding, textAlign) {
|
|
|
content_oid = content_oid || '';
|
|
|
var $this = $(el).parent().find('.tile');
|
|
|
|
|
|
var width = parseInt(options.width, 10);
|
|
|
var height = parseInt(options.height, 10);
|
|
|
|
|
|
if (isNaN(width)) width = undefined;
|
|
|
if (isNaN(height)) height = undefined;
|
|
|
|
|
|
$(el).parent().on('click touchstart', function () {
|
|
|
// Protect against two events
|
|
|
if (vis.detectBounce(this)) return;
|
|
|
|
|
|
$.metroDialog({
|
|
|
width: width,
|
|
|
height: height,
|
|
|
overlay: options.overlay || false,
|
|
|
shadow: options.shadow || false,
|
|
|
flat: options.flat || false,
|
|
|
draggable: options.draggable || false,
|
|
|
icon: options.icon ? '<img src="' + options.icon + '">' : (options.icon_class ? '<span class="' + options.icon_class + '"></span>' : false),
|
|
|
title: options.title || '',
|
|
|
content: '',
|
|
|
onShow: function(_dialog){
|
|
|
var content = _dialog.children('.content');
|
|
|
var style = '';
|
|
|
if (fontSize) style += 'font-size:' + fontSize + ';';
|
|
|
if (padding) style += 'padding:' + padding + ';';
|
|
|
if (textAlign) style += 'text-align:' + textAlign + ';';
|
|
|
|
|
|
var value = vis.states.attr(content_oid + '.val');
|
|
|
if (value === undefined) value = '';
|
|
|
content.html('<div style="' + style + '" class="metro-dialog-string" data-oid="' + content_oid + '">' + value + '</div>');
|
|
|
}
|
|
|
});
|
|
|
});
|
|
|
vis.states.bind(content_oid + '.val', function (e, newVal, oldVal) {
|
|
|
$('div.metro-dialog-string[data-oid="' + content_oid + '"]').html(newVal);
|
|
|
});
|
|
|
},
|
|
|
tileDialogSlider: function (el, wid, level_id, working_id, options, sliderOptions) {
|
|
|
var $this = $(el).parent().find('.tile');
|
|
|
|
|
|
var width = parseInt(options.width, 10);
|
|
|
var height = parseInt(options.height, 10);
|
|
|
|
|
|
if (isNaN(width)) width = undefined;
|
|
|
if (isNaN(height)) height = undefined;
|
|
|
|
|
|
level_id = level_id || '';
|
|
|
working_id = working_id || '';
|
|
|
|
|
|
sliderOptions.min = (sliderOptions.min === undefined || sliderOptions.min === null || sliderOptions.min === '') ? 0.00 : parseFloat(sliderOptions.min);
|
|
|
sliderOptions.max = (sliderOptions.max === undefined || sliderOptions.min === null || sliderOptions.max === '') ? 1.00 : parseFloat(sliderOptions.max);
|
|
|
|
|
|
var range = sliderOptions.max - sliderOptions.min;
|
|
|
var factor = 100 / range;
|
|
|
|
|
|
$(el).parent().on('click touchstart', function () {
|
|
|
// Protect against two events
|
|
|
if (vis.detectBounce(this)) return;
|
|
|
|
|
|
$.metroDialog({
|
|
|
width: width,
|
|
|
height: height,
|
|
|
overlay: options.overlay || false,
|
|
|
shadow: options.shadow || false,
|
|
|
flat: options.flat || false,
|
|
|
draggable: options.draggable || false,
|
|
|
icon: options.icon ? '<img src="' + options.icon + '">' : (options.icon_class ? '<span class="' + options.icon_class + '"></span>' : false),
|
|
|
title: options.title || '',
|
|
|
content: '',
|
|
|
onShow: function(_dialog){
|
|
|
var content = _dialog.children('.content');
|
|
|
var html = '<div style="margin: 24px 0 0 24px;">';
|
|
|
html += '<div class="input-control switch"><label>';
|
|
|
html += '<input type="checkbox" name="' + wid + '_checkbox" id="' + wid + '_checkbox" data-oid="' + level_id + '" data-oid-working="' + working_id + '"/>';
|
|
|
html += '<span class="check"></span>';
|
|
|
html += '</label></div>';
|
|
|
html += '</div><div style="margin: 24px 12px 0 12px;">';
|
|
|
html += '<div data-oid="' + level_id + '" data-oid-working="' + working_id + '" id="metroSlider_' + wid + '" class="slider" data-role="slider"></div>';
|
|
|
html += '</div>';
|
|
|
content.html(html);
|
|
|
|
|
|
var val = vis.states.attr(level_id + '.val');
|
|
|
if (val === true || val === 'true') val = sliderOptions.max;
|
|
|
val = parseFloat(val);
|
|
|
if (isNaN(val)) val = sliderOptions.min;
|
|
|
|
|
|
val = Math.floor((val - sliderOptions.min) * factor);
|
|
|
sliderOptions.position = val;
|
|
|
|
|
|
vis.binds.metro.slider(document.getElementById('metroSlider_' + wid), sliderOptions);
|
|
|
vis.binds.basic.checkbox(document.getElementById(wid + '_checkbox'), true, sliderOptions.min, sliderOptions.max);
|
|
|
}
|
|
|
});
|
|
|
});
|
|
|
},
|
|
|
tileDialogHeating: function (el, wid, set_oid, temp_oid, drive_oid, options, sliderOptions) {
|
|
|
var $this = $(el).parent().find('.tile');
|
|
|
|
|
|
var width = parseInt(options.width, 10);
|
|
|
var height = parseInt(options.height, 10);
|
|
|
|
|
|
if (isNaN(width)) width = undefined;
|
|
|
if (isNaN(height)) height = undefined;
|
|
|
|
|
|
set_oid = set_oid || '';
|
|
|
temp_oid = temp_oid || '';
|
|
|
drive_oid = drive_oid || '';
|
|
|
|
|
|
$(el).parent().on('click touchstart', function () {
|
|
|
// Protect against two events
|
|
|
if (vis.detectBounce(this)) return;
|
|
|
|
|
|
$.metroDialog({
|
|
|
width: width,
|
|
|
height: height,
|
|
|
overlay: options.overlay || false,
|
|
|
shadow: options.shadow || false,
|
|
|
flat: options.flat || false,
|
|
|
draggable: options.draggable || false,
|
|
|
icon: options.icon ? '<img src="' + options.icon + '">' : (options.icon_class ? '<span class="' + options.icon_class + '"></span>' : false),
|
|
|
title: options.title || '',
|
|
|
content: '',
|
|
|
onShow: function(_dialog){
|
|
|
var val_set_id = vis.states.attr(set_oid + '.val');
|
|
|
if (val_set_id === undefined || val_set_id === null || val_set_id === '') {
|
|
|
val_set_id = '';
|
|
|
} else {
|
|
|
val_set_id = val_set_id.toFixed(1);
|
|
|
}
|
|
|
|
|
|
var val_temp_id = vis.states.attr(temp_oid + '.val');
|
|
|
if (val_temp_id === undefined || val_temp_id === null || val_temp_id === '') {
|
|
|
val_temp_id = '';
|
|
|
} else {
|
|
|
val_temp_id = val_temp_id.toFixed(1);
|
|
|
}
|
|
|
|
|
|
var val_drive_id = vis.states.attr(drive_oid + '.val');
|
|
|
if (val_drive_id === undefined || val_drive_id === null || val_drive_id === '') {
|
|
|
val_drive_id = '';
|
|
|
} else {
|
|
|
val_drive_id = val_drive_id.toFixed(0);
|
|
|
}
|
|
|
|
|
|
var content = _dialog.children('.content');
|
|
|
var html = '<div style="margin: 24px 12px 0 12px;">';
|
|
|
if (set_oid) {
|
|
|
html += '<div data-oid="' + set_oid + '" id="metroSlider_' + wid + '" class="slider" data-role="slider"></div>';
|
|
|
}
|
|
|
html += '</div>';
|
|
|
html += '<table style="margin-top: 12px; margin-left: 12px; font-size:14px;display:inline-block;">' +
|
|
|
(set_oid ? ('<tr><td>' + (options.label_set || ('Set temperature')) + ':</td><td><span class="metro-dialog-string" data-oid="' + set_oid + '">' + val_set_id + '</span>°C</td></tr>') : '') +
|
|
|
(temp_oid ? ('<tr><td>' + (options.label_temp || _('Actual temp.')) + ':</td><td><span class="metro-dialog-string" data-oid="' + temp_oid + '">' + val_temp_id + '</span>°C</td></tr>') : '') +
|
|
|
(drive_oid ? ('<tr><td>' + (options.label_drive || _('Valve position')) + ':</td><td><span class="metro-dialog-string" data-oid="' + drive_oid + '">' + val_drive_id + '</span>%</td></tr>') : '') +
|
|
|
'</table>';
|
|
|
|
|
|
content.html(html);
|
|
|
sliderOptions.min = sliderOptions.min === undefined ? 6 : parseFloat(sliderOptions.min);
|
|
|
sliderOptions.max = sliderOptions.max === undefined ? 30 : parseFloat(sliderOptions.max);
|
|
|
if (set_oid) {
|
|
|
vis.binds.metro.slider(document.getElementById('metroSlider_' + wid), sliderOptions);
|
|
|
vis.states.bind(set_oid + '.val', function (e, newVal, oldVal) {
|
|
|
$('span.metro-dialog-string[data-oid="' + set_oid + '"]').html(parseFloat(newVal).toFixed(1));
|
|
|
});
|
|
|
}
|
|
|
if (temp_oid) {
|
|
|
vis.states.bind(temp_oid + '.val', function (e, newVal, oldVal) {
|
|
|
$('span.metro-dialog-string[data-oid="' + temp_oid + '"]').html(parseFloat(newVal).toFixed(1));
|
|
|
});
|
|
|
}
|
|
|
if (drive_oid) {
|
|
|
vis.states.bind(drive_oid + '.val', function (e, newVal, oldVal) {
|
|
|
$('span.metro-dialog-string[data-oid="' + drive_oid + '"]').html(parseFloat(newVal).toFixed(0));
|
|
|
});
|
|
|
}
|
|
|
}
|
|
|
});
|
|
|
});
|
|
|
},
|
|
|
onHeatingOid: function (widgetID, view, value, attr, isCss) {
|
|
|
var obj = vis.objects[value];
|
|
|
var changed = [];
|
|
|
// If it is real object and SETPOINT
|
|
|
if (obj && obj.common && obj.common.role === 'level.temperature') {
|
|
|
var roles = [];
|
|
|
// If some attributes are not set
|
|
|
if (!vis.views[view].widgets[widgetID].data.temp_oid) {
|
|
|
roles.push('value.temperature');
|
|
|
}
|
|
|
if (!vis.views[view].widgets[widgetID].data.drive_oid) {
|
|
|
roles.push('value.valve');
|
|
|
}
|
|
|
if (!vis.views[view].widgets[widgetID].data.hum_oid) {
|
|
|
roles.push('value.humidity');
|
|
|
}
|
|
|
if (!vis.views[view].widgets[widgetID].data.lowbat_oid) {
|
|
|
roles.push('indicator.battery');
|
|
|
}
|
|
|
if (roles.length) {
|
|
|
var result = vis.findByRoles(value, roles);
|
|
|
if (result) {
|
|
|
for (var r in result) {
|
|
|
switch (r) {
|
|
|
case 'value.temperature':
|
|
|
changed.push('temp_oid'); // remember attr to update it
|
|
|
vis.views[view].widgets[widgetID].data.temp_oid = result[r];
|
|
|
vis.widgets[widgetID].data.temp_oid = result[r];
|
|
|
break;
|
|
|
|
|
|
case 'value.valve':
|
|
|
changed.push('drive_oid'); // remember attr to update it
|
|
|
vis.views[view].widgets[widgetID].data.drive_oid = result[r];
|
|
|
vis.widgets[widgetID].data.drive_oid = result[r];
|
|
|
break;
|
|
|
|
|
|
case 'value.humidity':
|
|
|
changed.push('hum_oid');
|
|
|
vis.views[view].widgets[widgetID].data.hum_oid = result[r];
|
|
|
vis.widgets[widgetID].data.hum_oid = result[r];
|
|
|
break;
|
|
|
|
|
|
case 'indicator.battery':
|
|
|
changed.push('lowbat_oid');
|
|
|
vis.views[view].widgets[widgetID].data.lowbat_oid = result[r];
|
|
|
vis.widgets[widgetID].data.lowbat_oid = result[r];
|
|
|
break
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
if (!vis.views[view].widgets[widgetID].data.controlmode_oid) {
|
|
|
var result = vis.findByName(value, 'CONTROL_MODE');
|
|
|
if (result) {
|
|
|
changed.push('controlmode_oid');
|
|
|
vis.views[view].widgets[widgetID].data.controlmode_oid = result;
|
|
|
vis.widgets[widgetID].data.controlmode_oid = result;
|
|
|
}
|
|
|
}
|
|
|
if (!vis.views[view].widgets[widgetID].data.windowopen_oid) {
|
|
|
var result = vis.findByName(value, 'WINDOW_STATE');
|
|
|
if (result) {
|
|
|
changed.push('windowopen_oid');
|
|
|
vis.views[view].widgets[widgetID].data.windowopen_oid = result;
|
|
|
vis.widgets[widgetID].data.windowopen_oid = result;
|
|
|
}
|
|
|
}
|
|
|
if (!vis.views[view].widgets[widgetID].data.windowopen_oid) {
|
|
|
var result = vis.findByName(value, 'WINDOW_OPEN_REPORTING');
|
|
|
if (result) {
|
|
|
changed.push('windowopen_oid');
|
|
|
vis.views[view].widgets[widgetID].data.windowopen_oid = result;
|
|
|
vis.widgets[widgetID].data.windowopen_oid = result;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
return changed.length ? changed : null;
|
|
|
}
|
|
|
};
|
|
|
|
|
|
console.log('Metro version: "' + vis.binds.metro.version + '"');
|
|
|
</script>
|
|
|
|
|
|
<script id="tplMetroSlider"
|
|
|
type="text/ejs"
|
|
|
class="vis-tpl"
|
|
|
data-vis-prev='<div id="prev_tplMetroSlider" style=" position: relative; text-align: initial;padding: 4px "><div class="vis-widget_prev ui-selectee" style="top: 21px; left: 41px; width: 78px; height: 17px;"> <div class="metro vis-widget-prev-body " style="padding:2px"> <div data-o data-oid-working="" class="slider" data-role="slider"><div class="complete" style="background-color: rgb(32, 32, 255); width: 0;"></div><a class="marker" style="background-color: rgb(32, 32, 255); left: 0;"></a></div> <div></div> </div> </div>'
|
|
|
data-vis-attrs="oid;oid-working;min;max;step;sliderColor/color;sliderCompleteColor/color;sliderMarkerColor/color"
|
|
|
data-vis-set="metro"
|
|
|
data-vis-type="ctrl,slider,dimmer"
|
|
|
data-vis-name="Slider horizontal">
|
|
|
<div id="<%= this.data.attr('wid') %>" class="vis-widget" style="width:360px; height: 16px;">
|
|
|
<div class="metro vis-widget-body <%== this.data.attr('class') %>" style="padding:2px" >
|
|
|
<% if (vis.editMode) { %>
|
|
|
<div class="editmode-helper" />
|
|
|
<% } %>
|
|
|
<div data-oid="<%= this.data.attr('oid') %>" data-oid-working="<%= this.data.attr('oid-working') %>" id="metroSlider_<%= this.data.attr('wid') %>" class="slider" data-role="slider"></div>
|
|
|
<div <%= (el) -> vis.binds.metro.slider(el, {min: data.min, max: data.max, step: data.step, color: data.sliderBgColor, completeColor:data.sliderCompleteColor, markerColor: data.sliderMarkerColor}) %>></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</script>
|
|
|
|
|
|
<script id="tplMetroSliderVertical"
|
|
|
type="text/ejs"
|
|
|
class="vis-tpl"
|
|
|
data-vis-prev='<div id="prev_tplMetroSliderVertical" style=" position: relative; text-align: initial;padding: 4px "><div class="vis-widget_prev vis-widget-lock ui-selectee" style="top: 215px; left: 460px; width: 12px; height: 73px;"> <div class="metro vis-widget-prev-body " style="padding:2px"> <div data-o data-oid-working="" style="height: 100%;" class="slider vertical" data-role="slider"><div class="complete" style="height: 12px;"></div><a class="marker" style="background-color: rgb(75, 0, 130); top: 344px;"></a></div> <div></div> </div> </div>'
|
|
|
data-vis-attrs="oid;oid-working;min;max;step;sliderColor/color;sliderCompleteColor/color;sliderMarkerColor/color"
|
|
|
data-vis-set="metro"
|
|
|
data-vis-type="ctrl,slider,dimmer"
|
|
|
data-vis-name="Slider vertical">
|
|
|
<div id="<%= this.data.attr('wid') %>" class="vis-widget" style="width: 16px; height:360px;">
|
|
|
<div class="metro vis-widget-body <%== this.data.attr('class') %>" style="padding:2px" >
|
|
|
<% if (vis.editMode) { %>
|
|
|
<div class="editmode-helper" />
|
|
|
<% } %>
|
|
|
<div data-oid="<%= this.data.attr('oid') %>" data-oid-working="<%= this.data.attr('oid-working') %>" style="height: 100%;" id="metroSlider_<%= this.data.attr('wid') %>" class="slider vertical" class="slider" data-role="slider"></div>
|
|
|
<div <%= (el) -> vis.binds.metro.slider(el, {min: data.min, max: data.max, step: data.step, color: data.sliderBgColor, completeColor: data.sliderCompleteColor, markerColor: data.sliderMarkerColor}) %>></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</script>
|
|
|
|
|
|
<script id="tplMetroValueBoolCheckbox"
|
|
|
type="text/ejs"
|
|
|
class="vis-tpl"
|
|
|
data-vis-prev='<div id="prev_tplMetroValueBoolCheckbox" style=" position: relative; text-align: initial;padding: 4px "><div class="vis-widget_prev vis-widget-lock ui-selectee" style="left: 110px; top: 81px; height: 44px; width: 21px;" > <div class="metro vis-widget-prev-body"> <div class="input-control checkbox"> <label> <input type="checkbox" name="w00003_checkbox" data-o> <span class="check"></span> </label> </div> <div></div> </div> </div>'
|
|
|
data-vis-attrs="html_prepend;html_append;oid"
|
|
|
data-vis-set="metro"
|
|
|
data-vis-type="ctrl,bool"
|
|
|
data-vis-name="Bool Checkbox">
|
|
|
<div class="vis-widget <%== this.data.attr('class') %>" style="" id="<%= this.data.attr('wid') %>" >
|
|
|
<div class="metro vis-widget-body">
|
|
|
<div class="input-control checkbox">
|
|
|
<label>
|
|
|
<%== this.data.attr("html_prepend") %>
|
|
|
<input type="checkbox" name="<%= this.data.attr('wid') %>_checkbox" id="<%= this.data.attr('wid') %>_checkbox" data-oid="<%= this.data.attr('oid') %>" <%= (el) -> vis.binds.basic.checkbox(el) %>/>
|
|
|
<span class="check"></span>
|
|
|
<%== this.data.attr("html_append") %>
|
|
|
</label>
|
|
|
</div>
|
|
|
<div <%= (el) -> vis.binds.metro.inputControl(el) %>></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</script>
|
|
|
|
|
|
<script id="tplMetroValueBoolSwitch"
|
|
|
type="text/ejs"
|
|
|
class="vis-tpl"
|
|
|
data-vis-prev='<div id="prev_tplMetroValueBoolSwitch" style=" position: relative; text-align: initial;padding: 4px "><div class="vis-widget_prev vis-widget-lock ui-selectee" style="left: 110px; top: 432px;" > <div class="metro vis-widget-prev-body"> <div class="input-control switch"> <label> <input type="checkbox" name="w00002_checkbox" data-o> <span class="check"></span> </label> </div> <div></div> </div> </div>'
|
|
|
data-vis-set="metro"
|
|
|
data-vis-type="ctrl,bool"
|
|
|
data-vis-name="Switch"
|
|
|
data-vis-attrs="html_prepend;html_append;oid">
|
|
|
<div class="vis-widget <%== this.data.attr('class') %>" style="" id="<%= this.data.attr('wid') %>" >
|
|
|
<div class="metro vis-widget-body">
|
|
|
<div class="input-control switch">
|
|
|
<label>
|
|
|
<%== this.data.attr("html_prepend") %>
|
|
|
<input type="checkbox" name="<%= this.data.attr('wid') %>_checkbox" id="<%= this.data.attr('wid') %>_checkbox" data-oid="<%= this.data.attr('oid') %>" <%= (el) -> vis.binds.basic.checkbox(el) %>/>
|
|
|
<span class="check"></span>
|
|
|
<%== this.data.attr("html_append") %>
|
|
|
</label>
|
|
|
</div>
|
|
|
<div <%= (el) -> vis.binds.metro.inputControl(el) %>></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</script>
|
|
|
|
|
|
<script id="tplMetroTileNav"
|
|
|
type="text/ejs"
|
|
|
data-vis-prev='<div id="prev_tplMetroTileNav" style="position: relative; text-align: initial;padding: 4px "><div class="vis-widget_prev " style="width: 120px; height: 120px; padding: 3px;"> <div style="width: 100%; height: 100%" class="metro vis-widget-prev-body "> <div data-metro-nav-select="false" data-metro-class-active="bg-magenta" data-metro-class="bg-indigo" style="width: 100%; height: 100%;" class="vis-metro-nav tile hover bg-indigo"> <div class="tile-content icon"> <i class="icon-new"></i> </div> <div class="vis-metro-nav brand ribbed-steel" data-metro-nav="" data-metro-class-active="ribbed-indigo" data-metro-class="ribbed-steel"> <span class="label fg-white">Navigation</span> <div class="vis-metro-nav badge bg-cyan" data-metro-nav="" data-metro-class-active="bg-teal" data-metro-class="bg-cyan"><i class="icon-file"></i></div> </div> </div> </div> </div></div>'
|
|
|
data-vis-attrs="nav_view;hover[true]/checkbox;transform[true]/checkbox;select_current/checkbox;label[Navigation];"
|
|
|
data-vis-attrs0="bg_class[bg-indigo]/style,metro-,bg- ribbed-;"
|
|
|
data-vis-attrs1="bg_class_active[bg-magenta]/style,metro-,bg- ribbed-;"
|
|
|
data-vis-attrs2="group.badge;badge_bg_class[bg-cyan]/style,metro-,bg-;badge_bg_class_active[bg-teal]/style,metro-,bg-;"
|
|
|
data-vis-attrs3="badge_src/image;badge_width/slider,0,100,1;badge_height/slider,0,100,1;badge_top[0]/slider,0,100,1;badge_left[0]/slider,0,100,1;"
|
|
|
data-vis-attrs4="icon_badge[icon-file]/style,iconFont,icon-,,Icon ;brand_bg_class[ribbed-steel]/style,metro-,bg- ribbed-;"
|
|
|
data-vis-attrs5="brand_bg_class_active[ribbed-indigo]/style,metro-,bg- ribbed-;"
|
|
|
data-vis-attrs6="group.icon;icon_src/image;icon_width/slider,0,100,1;icon_height/slider,0,100,1;icon_top/slider,0,100,1;icon_left/slider,0,100,1;icon_class[icon-new]/style,iconFont,icon-,,Icon ;"
|
|
|
data-vis-attrs7="group.effects;sync/checkbox;hide_effect/effect;hide_duration/slider,0,10000,100;hide_options/effect-options;show_effect/effect;show_duration/slider,0,10000,100;show_options/effect-options;body-background/color"
|
|
|
class="vis-tpl"
|
|
|
data-vis-type="static,navigation"
|
|
|
data-vis-set="metro"
|
|
|
data-vis-name="Tile Navigation">
|
|
|
<div id="<%= this.data.attr('wid') %>" class="vis-widget" style="width: 136px; height: 136px; padding: 3px;" <%= (el) -> vis.binds.basic.navigation(el, {nav_view:data.attr('nav_view'),hideOptions:{effect:data.attr('hide_effect'),options:(data.attr('hide_options')?data.attr('hide_options'):{}),duration:data.attr('hide_duration')},showOptions:{effect:data.attr('show_effect'),options:(data.attr('show_options')?data.attr('show_options'):{}),duration:data.attr('show_duration')},sync:data.attr('sync'),background:data.attr('body-background')}); %> >
|
|
|
<div style="width: 100%; height: 100%" class="metro vis-widget-body <%== this.data.attr('class') %>">
|
|
|
<div data-metro-nav="<%= this.data.attr('nav_view') %>" data-metro-nav-select="<%= this.data.attr('select_current') %>" data-metro-class-active="<%= this.data.attr('bg_class_active') %>" data-metro-class="<%= this.data.attr('bg_class') %>" style="width: 100%; height: 100%;" id="metroTile_<%= this.data.attr('wid') %>" class="vis-metro-nav tile <%= this.data.attr('hover') ? 'hover' : '' %>" >
|
|
|
<div class="tile-content icon <%= this.data.attr('icon_class') ? '' : 'icon-custom' %>">
|
|
|
<%== this.data.attr("icon_src") ? '<img style="position: absolute;' + (this.data.attr('icon_top') ? ('top:' + this.data.attr('icon_top') + '%;') : '') + (this.data.attr('icon_left') ? ('left:' + this.data.attr('icon_left') + '%;') : '') + (this.data.attr('icon_width') ? ('width:' + this.data.attr('icon_width') + '%;') : '') + (this.data.attr('icon_height') ? ('height:' + this.data.attr('icon_height') + '%;') : '') + '" src="' + this.data.attr("icon_src") + '"/>' : '' %>
|
|
|
<i class="<%= this.data.attr("icon_class") %>"></i>
|
|
|
</div>
|
|
|
<div class="vis-metro-nav brand" data-metro-nav="<%= this.data.attr('nav_view') %>" data-metro-class-active="<%= this.data.attr('brand_bg_class_active') %>" data-metro-class="<%= this.data.attr('brand_bg_class') %>">
|
|
|
<span class="label fg-white"><%= this.data.attr("label") %></span>
|
|
|
<div class="vis-metro-nav badge" data-metro-nav="<%= this.data.attr('nav_view') %>" data-metro-class-active="<%= this.data.attr('badge_bg_class_active') %>" data-metro-class="<%= this.data.attr('badge_bg_class') %>">
|
|
|
<%== this.data.attr('badge_src') ? '<img style="position: absolute;' + (this.data.attr('badge_top') ? ('top:' + this.data.attr('badge_top') + '%;') : '') + (this.data.attr('badge_left') ? ('left:' + this.data.attr('badge_left') + '%;') : '') + (this.data.attr('badge_width') ? ('width:' + this.data.attr('badge_width') + '%;') : '') + (this.data.attr('badge_height') ? ('height:' + this.data.attr('badge_height') + '%;') : '') + '" src="' + this.data.attr("badge_src") + '"/>' : '' %>
|
|
|
<i class="<%= this.data.attr("icon_badge") %>"></i>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div <%= (el) -> vis.binds.metro.tile(el, data.transform) %>></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</script>
|
|
|
|
|
|
<script id="tplMetroTileString"
|
|
|
type="text/ejs"
|
|
|
data-vis-prev='<div id="prev_tplMetroTileString" style="position: relative; text-align: initial;padding: 4px"><div class="vis-widget_prev" style="width: 120px; height: 120px; padding: 3px;"> <div style="width: 100%; height: 100%" class="metro vis-widget-prev-body"> <div style="width: 100%; height: 100%;" class="tile hover bg-indigo"> <div class="tile-content fg-white icon"> <i class="icon-sun-3"></i> </div> <div class="brand ribbed-steel"> <span class="label fg-white"> String </span> <div class="badge bg-cyan"><i class="icon-sunrise"></i></div> </div> </div> </div> </div></div>'
|
|
|
data-vis-attrs="content_prepend;content_append;content_oid/id;"
|
|
|
data-vis-attrs0="state_oid/id;hover/checkbox;transform/checkbox;select_on_true/checkbox;bg_class_false[bg-indigo]/style,metro-,bg- ribbed-;bg_class_true[bg-teal]/style,metro-,bg- ribbed-;"
|
|
|
data-vis-attrs1="group.icon;icon_false/image;icon_true/image;icon_width/slider,0,100,1;icon_height/slider,0,100,1;icon_top/slider,0,100,1;icon_left/slider,0,100,1;icon_class_false[icon-sun-3]/style,iconFont,icon-,,Icon ;icon_class_true[icon-weather-4]/style,iconFont,icon-,,Icon ;"
|
|
|
data-vis-attrs2="group.badge;label_prepend;label_append;label_id/id;badge_bg_class_false[bg-cyan]/style,metro-,bg-;badge_bg_class_true[bg-teal]/style,metro-,bg-;icon_badge_false[icon-sunrise]/style,iconFont,icon-,,Icon ;icon_badge_true[icon-sunrise]/style,iconFont,icon-,,Icon ;brand_bg_class_false[ribbed-steel]/style,metro-,bg- ribbed-;brand_bg_class_true[ribbed-indigo]/style,metro-,bg- ribbed-;"
|
|
|
data-vis-attrs3="badge_src_false/image;badge_src_true/image;badge_width/slider,0,100,1;badge_height/slider,0,100,1;badge_top[0]/slider,0,100,1;badge_left[0]/slider,0,100,1;"
|
|
|
class="vis-tpl"
|
|
|
data-vis-set="metro"
|
|
|
data-vis-type="val"
|
|
|
data-vis-name="Tile String">
|
|
|
<div id="<%= this.data.attr('wid') %>" class="vis-widget" style="width: 136px; height: 136px; padding: 3px;">
|
|
|
<div style="width: 100%; height: 100%" class="metro vis-widget-body <%== this.data.attr('class') %>" data-oid="<%= this.data.attr('state_oid') %>">
|
|
|
<div style="width: 100%; height: 100%;" id="metroTile_<%= this.data.attr('wid') %>" class="tile <%= this.data.attr('hover') ? 'hover ' : '' %><%= (vis.binds.metro.format(vis.states.attr(this.data.attr('state_oid') + '.val')) === '_true') && this.data.attr('select_on_true') ? 'selected' : '' %> <%= this.data.attr('bg_class' + vis.binds.metro.format(vis.states.attr(this.data.attr('state_oid') + '.val'))) %>" >
|
|
|
<div class="tile-content fg-white icon <%= this.data.attr('icon_class' + vis.binds.metro.format(vis.states.attr(this.data.attr('state_oid') + '.val'))) ? '' : 'icon-custom' %>">
|
|
|
<%== this.data.attr('content_prepend') %><%== vis.states.attr(this.data.attr('content_oid') + '.val') %><%== this.data.attr('content_append') %>
|
|
|
<%== this.data.attr('icon' + vis.binds.metro.format(vis.states.attr(this.data.attr('state_oid') + '.val'))) ? '<img style="position: absolute;' + (this.data.attr('icon_top') ? ('top:' + this.data.attr('icon_top') + '%;') : '') + (this.data.attr('icon_left') ? ('left:' + this.data.attr('icon_left') + '%;') : '') + (this.data.attr('icon_width') ? ('width:' + this.data.attr('icon_width') + '%;') : '') + (this.data.attr('icon_height') ? ('height:' + this.data.attr('icon_height') + '%;') : '') + '" src="' + this.data.attr('icon' + vis.binds.metro.format(vis.states.attr(this.data.attr('state_oid') + '.val'))) + '"/>' : '' %>
|
|
|
<i class="<%= this.data.attr('icon_class' + vis.binds.metro.format(vis.states.attr(this.data.attr('state_oid') + '.val'))) %>"></i>
|
|
|
</div>
|
|
|
<div class="brand <%= this.data.attr('brand_bg_class' + vis.binds.metro.format(vis.states.attr(this.data.attr('state_oid') + '.val'))) %>">
|
|
|
<span class="label fg-white">
|
|
|
<%== this.data.attr('label_prepend') %><%== vis.states.attr(this.data.attr('label_id') + '.val') %><%== this.data.attr('label_append') %>
|
|
|
</span>
|
|
|
<div class="badge <%= this.data.attr('badge_bg_class' + vis.binds.metro.format(vis.states.attr(this.data.attr('state_oid') + '.val'))) %>">
|
|
|
<i class="<%= this.data.attr('icon_badge' + vis.binds.metro.format(vis.states.attr(this.data.attr('state_oid') + '.val'))) %>"></i>
|
|
|
<%== this.data.attr('badge_src' + vis.binds.metro.format(vis.states.attr(this.data.attr('state_oid') + '.val'))) ? '<img style="position: absolute;' + (this.data.attr('badge_top') ? ('top:' + this.data.attr('badge_top') + '%;') : '') + (this.data.attr('badge_left') ? ('left:' + this.data.attr('badge_left') + '%;') : '') + (this.data.attr('badge_width') ? ('width:' + this.data.attr('badge_width') + '%;') : '') + (this.data.attr('badge_height') ? ('height:' + this.data.attr('badge_height') + '%;') : '') + '" src="' + this.data.attr('badge_src' + vis.binds.metro.format(vis.states.attr(this.data.attr('state_oid') + '.val'))) + '"/>' : '' %>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div <%= (el) -> vis.binds.metro.tile(el, data.transform) %>></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</script>
|
|
|
|
|
|
<script id="tplMetroTileBool"
|
|
|
type="text/ejs"
|
|
|
class="vis-tpl"
|
|
|
data-vis-prev='<div id="prev_tplMetroTileBool" style="position: relative; text-align: initial;padding: 4px "><div class="vis-widget_prev " style="width: 120px; height: 120px; padding: 3px;"> <div style="width: 100%; height: 100%" class="metro vis-widget-prev-body"><div style="width: 100%; height: 100%;" class="tile hover bg-indigo"> <div class="tile-content icon"> <i class="icon-newspaper"></i> </div> <div class="brand ribbed-steel"> <span class="label fg-white">Boolean</span> <div class="badge bg-cyan"><i class="icon-folder"></i></div> </div> </div> </div> </div></div>'
|
|
|
data-vis-attrs="oid;hover[true]/checkbox;transform/checkbox;select_on_true/checkbox;label_false[false];label_true[true];"
|
|
|
data-vis-attrs0="bg_class_false[bg-indigo]/style,metro-,bg- ribbed-;"
|
|
|
data-vis-attrs1="bg_class_true[bg-teal]/style,metro-,bg- ribbed-;"
|
|
|
data-vis-attrs2="group.icon;icon_false/image;icon_true/image;icon_width/slider,0,100,1;icon_height/slider,0,100,1;icon_top/slider,0,100,1;icon_left/slider,0,100,1;"
|
|
|
data-vis-attrs3="icon_class_false[icon-cancel-2]/style,iconFont,icon-,,Icon ;"
|
|
|
data-vis-attrs4="icon_class_true[icon-checkmark]/style,iconFont,icon-,,Icon ;"
|
|
|
data-vis-attrs5="group.badge;icon_badge_false[icon-folder-2]/style,iconFont,icon-,,Icon ;icon_badge_true[icon-folder]/style,iconFont,icon-,,Icon ;"
|
|
|
data-vis-attrs6="badge_bg_class_false[bg-cyan]/style,metro-,bg-;badge_bg_class_true[bg-teal]/style,metro-,bg-;"
|
|
|
data-vis-attrs7="badge_src_false/image;badge_src_true/image;badge_width/slider,0,100,1;badge_height/slider,0,100,1;badge_top[0]/slider,0,100,1;badge_left[0]/slider,0,100,1;"
|
|
|
data-vis-attrs8="brand_bg_class_false[ribbed-steel]/style,metro-,bg- ribbed-;brand_bg_class_true[ribbed-indigo]/style,metro-,bg- ribbed-;"
|
|
|
data-vis-set="metro"
|
|
|
data-vis-type="val,bool"
|
|
|
data-vis-name="Tile Bool">
|
|
|
<div id="<%= this.data.attr('wid') %>" class="vis-widget" style="width: 136px; height: 136px; padding: 3px;">
|
|
|
<div style="width: 100%; height: 100%" class="metro vis-widget-body <%== this.data.attr('class') %>" data-oid="<%= this.data.attr('oid') %>">
|
|
|
<div style="width: 100%; height: 100%;" id="metroTile_<%= this.data.attr('wid') %>" class="tile <%= this.data.attr('hover') ? 'hover ' : '' %><%= (vis.binds.metro.format(vis.states.attr(this.data.attr('oid') + '.val')) === '_true') && this.data.attr('select_on_true') ? 'selected' : '' %> <%= this.data.attr('bg_class' + vis.binds.metro.format(vis.states.attr(this.data.attr('oid') + '.val'))) %>" >
|
|
|
<div class="tile-content icon <%= this.data.attr("icon_class" + vis.binds.metro.format(vis.states.attr(this.data.attr('oid') + '.val'))) ? '' : 'icon-custom' %>">
|
|
|
<%== this.data.attr('icon' + vis.binds.metro.format(vis.states.attr(this.data.attr('oid') + '.val'))) ? '<img style="position: absolute;' + (this.data.attr('icon_top') ? ('top:' + this.data.attr('icon_top') + '%;') : '') + (this.data.attr('icon_left') ? ('left:' + this.data.attr('icon_left') + '%;') : '') + (this.data.attr('icon_width') ? ('width:' + this.data.attr('icon_width') + '%;') : '') + (this.data.attr('icon_height') ? ('height:' + this.data.attr('icon_height') + '%;') : '') + '" src="' + this.data.attr('icon' + vis.binds.metro.format(vis.states.attr(this.data.attr('oid') + '.val'))) + '"/>' : '' %>
|
|
|
<i class="<%= this.data.attr('icon_class' + vis.binds.metro.format(vis.states.attr(this.data.attr('oid') + '.val'))) %>"></i>
|
|
|
</div>
|
|
|
<div class="brand <%= this.data.attr('brand_bg_class' + vis.binds.metro.format(vis.states.attr(this.data.attr('oid') + '.val'))) %>">
|
|
|
<span class="label fg-white"><%== this.data.attr('label' + vis.binds.metro.format(vis.states.attr(this.data.attr('oid') + '.val'))) %></span>
|
|
|
<div class="badge <%= this.data.attr('badge_bg_class' + vis.binds.metro.format(vis.states.attr(this.data.attr('oid') + '.val'))) %>">
|
|
|
<i class="<%= this.data.attr('icon_badge' + vis.binds.metro.format(vis.states.attr(this.data.attr('oid') + '.val'))) %>"></i>
|
|
|
<%== this.data.attr('badge_src' + vis.binds.metro.format(vis.states.attr(this.data.attr('state_oid') + '.val'))) ? '<img style="position: absolute;' + (this.data.attr('badge_top') ? ('top:' + this.data.attr('badge_top') + '%;') : '') + (this.data.attr('badge_left') ? ('left:' + this.data.attr('badge_left') + '%;') : '') + (this.data.attr('badge_width') ? ('width:' + this.data.attr('badge_width') + '%;') : '') + (this.data.attr('badge_height') ? ('height:' + this.data.attr('badge_height') + '%;') : '') + '" src="' + this.data.attr('badge_src' + vis.binds.metro.format(vis.states.attr(this.data.attr('state_oid') + '.val'))) + '"/>' : '' %>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div <%= (el) -> vis.binds.metro.tile(el, data.transform) %>></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</script>
|
|
|
|
|
|
<script id="tplMetroTileBoolDialog"
|
|
|
type="text/ejs"
|
|
|
class="vis-tpl"
|
|
|
data-vis-prev='<div id="prev_tplMetroTileBoolDialog" style="position: relative; text-align: initial;padding: 4px "><div class="vis-widget_prev " style="width: 120px; height: 120px; padding: 3px;"> <div style="width: 100%; height: 100%" class="metro vis-widget-prev-body"><div style="width: 100%; height: 100%;" class="tile hover bg-indigo"> <div class="tile-content icon"> <i class="icon-newspaper"></i> </div> <div class="brand ribbed-steel"> <span class="label fg-white">Boolean</span> <div class="badge bg-cyan"><i class="icon-folder"></i></div> </div> </div> </div> </div></div>'
|
|
|
data-vis-attrs="oid;hover[true]/checkbox;transform/checkbox;select_on_true/checkbox;label_false[false];label_true[true];"
|
|
|
data-vis-attrs0="bg_class_false[bg-indigo]/style,metro-,bg- ribbed-;"
|
|
|
data-vis-attrs1="bg_class_true[bg-teal]/style,metro-,bg- ribbed-;"
|
|
|
data-vis-attrs2="group.icon;icon_false/image;icon_true/image;icon_width/slider,0,100,1;icon_height/slider,0,100,1;icon_top/slider,0,100,1;icon_left/slider,0,100,1;"
|
|
|
data-vis-attrs3="icon_class_false[icon-cancel-2]/style,iconFont,icon-,,Icon ;"
|
|
|
data-vis-attrs4="icon_class_true[icon-checkmark]/style,iconFont,icon-,,Icon ;"
|
|
|
data-vis-attrs5="group.badge;icon_badge_false[icon-folder-2]/style,iconFont,icon-,,Icon ;icon_badge_true[icon-folder]/style,iconFont,icon-,,Icon ;"
|
|
|
data-vis-attrs6="badge_bg_class_false[bg-cyan]/style,metro-,bg-;badge_bg_class_true[bg-teal]/style,metro-,bg-;"
|
|
|
data-vis-attrs7="badge_src_false/image;badge_src_true/image;badge_width/slider,0,100,1;badge_height/slider,0,100,1;badge_top[0]/slider,0,100,1;badge_left[0]/slider,0,100,1;"
|
|
|
data-vis-attrs8="brand_bg_class_false[ribbed-steel]/style,metro-,bg- ribbed-;brand_bg_class_true[ribbed-indigo]/style,metro-,bg- ribbed-;"
|
|
|
data-vis-attrs9="group.dialog;contains_view/views;dialog_width;dialog_height;dialog_title;dialog_flat/checkbox;dialog_shadow/checkbox;dialog_draggable[true]/checkbox;dialog_modal/checkbox;dialog_icon_src/image;dialog_icon_class[]/style,iconFont,icon-,,Icon ;"
|
|
|
data-vis-set="metro"
|
|
|
data-vis-type="bool,dialog"
|
|
|
data-vis-name="Tile Bool Dialog">
|
|
|
<div id="<%= this.data.attr('wid') %>" class="vis-widget" style="width: 136px; height: 136px; padding: 3px;">
|
|
|
<div style="width: 100%; height: 100%" class="metro vis-widget-body <%== this.data.attr('class') %>" data-oid="<%= this.data.attr('oid') %>">
|
|
|
<div style="width: 100%; height: 100%;" id="metroTile_<%= this.data.attr('wid') %>" class="tile <%= this.data.attr('hover') ? 'hover ' : '' %><%= (vis.binds.metro.format(vis.states.attr(this.data.attr('oid') + '.val')) === '_true') && this.data.attr('select_on_true') ? 'selected' : '' %> <%= this.data.attr('bg_class' + vis.binds.metro.format(vis.states.attr(this.data.attr('oid') + '.val'))) %>" >
|
|
|
<div class="tile-content icon <%= this.data.attr("icon_class" + vis.binds.metro.format(vis.states.attr(this.data.attr('oid') + '.val'))) ? '' : 'icon-custom' %>">
|
|
|
<%== this.data.attr('icon' + vis.binds.metro.format(vis.states.attr(this.data.attr('oid') + '.val'))) ? '<img style="position: absolute;' + (this.data.attr('icon_top') ? ('top:' + this.data.attr('icon_top') + '%;') : '') + (this.data.attr('icon_left') ? ('left:' + this.data.attr('icon_left') + '%;') : '') + (this.data.attr('icon_width') ? ('width:' + this.data.attr('icon_width') + '%;') : '') + (this.data.attr('icon_height') ? ('height:' + this.data.attr('icon_height') + '%;') : '') + '" src="' + this.data.attr('icon' + vis.binds.metro.format(vis.states.attr(this.data.attr('oid') + '.val'))) + '"/>' : '' %>
|
|
|
<i class="<%= this.data.attr('icon_class' + vis.binds.metro.format(vis.states.attr(this.data.attr('oid') + '.val'))) %>"></i>
|
|
|
</div>
|
|
|
<div class="brand <%= this.data.attr('brand_bg_class' + vis.binds.metro.format(vis.states.attr(this.data.attr('oid') + '.val'))) %>">
|
|
|
<span class="label fg-white"><%== this.data.attr('label' + vis.binds.metro.format(vis.states.attr(this.data.attr('oid') + '.val'))) %></span>
|
|
|
<div class="badge <%= this.data.attr('badge_bg_class' + vis.binds.metro.format(vis.states.attr(this.data.attr('oid') + '.val'))) %>">
|
|
|
<i class="<%= this.data.attr('icon_badge' + vis.binds.metro.format(vis.states.attr(this.data.attr('oid') + '.val'))) %>"></i>
|
|
|
<%== this.data.attr('badge_src' + vis.binds.metro.format(vis.states.attr(this.data.attr('state_oid') + '.val'))) ? '<img style="position: absolute;' + (this.data.attr('badge_top') ? ('top:' + this.data.attr('badge_top') + '%;') : '') + (this.data.attr('badge_left') ? ('left:' + this.data.attr('badge_left') + '%;') : '') + (this.data.attr('badge_width') ? ('width:' + this.data.attr('badge_width') + '%;') : '') + (this.data.attr('badge_height') ? ('height:' + this.data.attr('badge_height') + '%;') : '') + '" src="' + this.data.attr('badge_src' + vis.binds.metro.format(vis.states.attr(this.data.attr('state_oid') + '.val'))) + '"/>' : '' %>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div <%= (el) -> vis.binds.metro.tileDialog(el, data.wid, data.contains_view, {title:data.dialog_title,flat:data.dialog_flat,shadow:data.dialog_shadow,overlay:data.dialog_modal,icon:data.dialog_icon_src,icon_class:data.dialog_icon_class,draggable:data.dialog_draggable,width:data.dialog_width,height:data.dialog_height}) %> style="padding: 42px 10px 10px;">
|
|
|
</div>
|
|
|
<div <%= (el) -> vis.binds.metro.tile(el, data.transform) %>></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</script>
|
|
|
|
|
|
<script id="tplMetroTileList8"
|
|
|
type="text/ejs"
|
|
|
class="vis-tpl"
|
|
|
data-vis-prev='<div id="prev_tplMetroTileList8" style="position: relative; text-align: initial;padding: 4px"><div class="vis-widget_prev vis-widget-lock" style="width: 120px; height: 120px; padding: 3px;"> <div style="width: 100%; height: 100%" class="metro vis-widget-prev-body"><div style="width: 100%; height: 100%;" class="tile bg-indigo"> <div class="tile-content icon"><i class="icon-pencil"></i> </div> <div class="brand ribbed-steel"><span class="label fg-white">Value list</span><div class="badge bg-cyan"></div></div></div></div></div></div>'
|
|
|
data-vis-attrs="oid;hover/checkbox;transform/checkbox;label_prepend;label_append;group.bg-and-text;label(0-7)[Value list];"
|
|
|
data-vis-attrs0="bg_class(0-7)[bg-indigo]/style,metro-,bg- ribbed-;"
|
|
|
data-vis-attrs1="group.icon;icon(0-7)/image;icon_width/slider,0,100,1;icon_height/slider,0,100,1;icon_top/slider,0,100,1;icon_left/slider,0,100,1;"
|
|
|
data-vis-attrs2="icon_class(0-7)[icon-pencil]/style,iconFont,icon-,,Icon ;"
|
|
|
data-vis-attrs3="group.badge;icon_badge(0-7)[icon-pencil]/style,iconFont,icon-,,Icon ;"
|
|
|
data-vis-attrs4="badge_bg_class(0-7)[bg-cyan]/style,metro-,bg-;"
|
|
|
data-vis-attrs5="brand_bg_class(0-7)[ribbed-steel]/style,metro-,bg- ribbed-;"
|
|
|
data-vis-attrs6="badge_src/image;badge_width/slider,0,100,1;badge_height/slider,0,100,1;badge_top[0]/slider,0,100,1;badge_left[0]/slider,0,100,1;"
|
|
|
data-vis-set="metro"
|
|
|
data-vis-type="val,list"
|
|
|
data-vis-name="Tile ValueList 8">
|
|
|
<div id="<%= this.data.attr('wid') %>" class="vis-widget" style="width: 136px; height: 136px; padding: 3px;">
|
|
|
<div style="width: 100%; height: 100%" class="metro vis-widget-body <%== this.data.attr('class') %>" data-oid="<%= this.data.attr('oid') %>">
|
|
|
<div style="width: 100%; height: 100%;" id="metroTile_<%= this.data.attr('wid') %>" class="tile <%= this.data.attr('hover') ? 'hover ' : '' %> <%= this.data.attr('bg_class' + vis.binds.metro.format(vis.states.attr(this.data.attr('oid') + '.val'), 10)) %>" >
|
|
|
<div class="tile-content icon <%= this.data.attr('icon_class' + vis.binds.metro.format(vis.states.attr(this.data.attr('oid') + '.val'), 10)) ? '' : 'icon-custom' %>">
|
|
|
<%== this.data.attr('icon' + vis.binds.metro.format(vis.states.attr(this.data.attr('oid') + '.val'), 10)) ? '<img style="position: absolute;' + (this.data.attr('icon_top') ? ('top:' + this.data.attr('icon_top') + '%;') : '') + (this.data.attr('icon_left') ? ('left:' + this.data.attr('icon_left') + '%;') : '') + (this.data.attr('icon_width') ? ('width:' + this.data.attr('icon_width') + '%;') : '') + (this.data.attr('icon_height') ? ('height:' + this.data.attr('icon_height') + '%;') : '') + '" src="' + this.data.attr('icon' + vis.binds.metro.format(vis.states.attr(this.data.attr('oid') + '.val'), 10)) + '"/>' : '' %>
|
|
|
<i class="<%= this.data.attr('icon_class' + vis.binds.metro.format(vis.states.attr(this.data.attr('oid') + '.val'), 10)) %>"></i>
|
|
|
</div>
|
|
|
<div class="brand <%= this.data.attr('brand_bg_class' + vis.binds.metro.format(vis.states.attr(this.data.attr('oid') + '.val'), 10)) %>">
|
|
|
<span class="label fg-white"><%== this.data.attr('label_prepend') %><%== this.data.attr('label' + vis.binds.metro.format(vis.states.attr(this.data.attr('oid') + '.val'), 10)) %><%== this.data.attr('label_append') %></span>
|
|
|
<div class="badge <%= this.data.attr('badge_bg_class' + vis.binds.metro.format(vis.states.attr(this.data.attr('oid') + '.val'), 10)) %>">
|
|
|
<i class="<%= this.data.attr('icon_badge' + vis.states.attr(this.data.attr('oid') + '.val')) %>"></i>
|
|
|
<%== this.data.attr('badge_src') ? '<img style="position: absolute;' + (this.data.attr('badge_top') ? ('top:' + this.data.attr('badge_top') + '%;') : '') + (this.data.attr('badge_left') ? ('left:' + this.data.attr('badge_left') + '%;') : '') + (this.data.attr('badge_width') ? ('width:' + this.data.attr('badge_width') + '%;') : '') + (this.data.attr('badge_height') ? ('height:' + this.data.attr('badge_height') + '%;') : '') + '" src="' + this.data.attr("badge_src") + '"/>' : '' %>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div <%= (el) -> vis.binds.metro.tile(el, data.transform) %>></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</script>
|
|
|
|
|
|
<script id="tplMetroTileBoolNumber"
|
|
|
type="text/ejs"
|
|
|
class="vis-tpl"
|
|
|
data-vis-prev='<div id="prev_tplMetroTileBoolNumber" style="position: relative; text-align: initial;padding: 4px"><div class="vis-widget_prev vis-widget-lock" style="width: 120px; height: 120px; padding: 3px;"><div style="width: 100%; height: 100%" class="metro vis-widget-prev-body"><div style="width: 100%; height: 100%;" class="tile hover bg-indigo"> <div class="tile-content icon"> <i class="icon-cancel-2"></i></div><div class="brand ribbed-steel"><span class="label fg-white">Bool/Num</span><div class="badge bg-cyan"><i class=""></i></div></div></div></div> </div></div>'
|
|
|
data-vis-attrs="state_oid/id;select_on_true/checkbox;number_oid/id;hover[true]/checkbox;transform/checkbox;label_false;label_true;label_append;"
|
|
|
data-vis-attrs0="bg_class_false[bg-indigo]/style,metro-,bg- ribbed-;"
|
|
|
data-vis-attrs1="bg_class_true[bg-teal]/style,metro-,bg- ribbed-;"
|
|
|
data-vis-attrs2="group.icon;icon_false_src/image;icon_true_src/image;icon_width/slider,0,100,1;icon_height/slider,0,100,1;icon_top/slider,0,100,1;icon_left/slider,0,100,1;"
|
|
|
data-vis-attrs3="icon_class_false[icon-cancel-2]/style,iconFont,icon-,,Icon ;"
|
|
|
data-vis-attrs4="icon_class_true[icon-checkmark]/style,iconFont,icon-,,Icon ;"
|
|
|
data-vis-attrs5="group.badge;icon_badge_false[]/style,iconFont,icon-,,Icon ;icon_badge_true[]/style,iconFont,icon-,,Icon ;badge_bg_class_false[bg-cyan]/style,metro-,bg-;badge_bg_class_true[bg-teal]/style,metro-,bg-;"
|
|
|
data-vis-attrs6="brand_bg_class_false[ribbed-steel]/style,metro-,bg- ribbed-;brand_bg_class_true[ribbed-indigo]/style,metro-,bg- ribbed-;"
|
|
|
data-vis-attrs7="badge_src_false/image;badge_src_true/image;badge_width/slider,0,100,1;badge_height/slider,0,100,1;badge_top[0]/slider,0,100,1;badge_left[0]/slider,0,100,1;"
|
|
|
data-vis-set="metro"
|
|
|
data-vis-type="val,bool"
|
|
|
data-vis-name="Tile Bool / Number">
|
|
|
<div id="<%= this.data.attr('wid') %>" class="vis-widget" style="width: 136px; height: 136px; padding: 3px;">
|
|
|
<div style="width: 100%; height: 100%" class="metro vis-widget-body <%== this.data.attr('class') %>" data-oid="<%= this.data.attr('state_oid') %>">
|
|
|
<div style="width: 100%; height: 100%;" id="metroTile_<%= this.data.attr('wid') %>" class="tile <%= this.data.attr('hover') ? 'hover ' : '' %><%= (vis.binds.metro.format(vis.states.attr(this.data.attr('state_oid') + '.val')) === '_true') && this.data.select_on_true ? 'selected' : '' %> <%= this.data.attr('bg_class' + vis.binds.metro.format(vis.states.attr(this.data.attr('state_oid') + '.val'))) %>" >
|
|
|
<div class="tile-content icon <%= this.data.attr('icon_class' + vis.binds.metro.format(vis.states.attr(this.data.attr('state_oid') + '.val'))) ? '' : 'icon-custom' %>">
|
|
|
<%== this.data.attr('icon' + vis.binds.metro.format(vis.states.attr(this.data.attr('state_oid') + '.val')) + '_src') ? '<img style="position: absolute;' + (this.data.attr('icon_top') ? ('top:' + this.data.attr('icon_top') + '%;') : '') + (this.data.attr('icon_left') ? ('left:' + this.data.attr('icon_left') + '%;') : '') + (this.data.attr('icon_width') ? ('width:' + this.data.attr('icon_width') + '%;') : '') + (this.data.attr('icon_height') ? ('height:' + this.data.attr('icon_height') + '%;') : '') + '" src="' + this.data.attr('icon' + vis.binds.metro.format(vis.states.attr(this.data.attr('state_oid') + '.val')) + '_src')+ '"/>' : '' %>
|
|
|
<i class="<%= this.data.attr('icon_class' + vis.binds.metro.format(vis.states.attr(this.data.attr('state_oid') + '.val'))) %>"></i>
|
|
|
</div>
|
|
|
<div class="brand <%= this.data.attr('brand_bg_class' + vis.binds.metro.format(vis.states.attr(this.data.attr('state_oid') + '.val'))) %>">
|
|
|
<span class="label fg-white"><%== (this.data.attr('label' + vis.binds.metro.format(vis.states.attr(this.data.attr('state_oid') + '.val'))) || '') + ((vis.states.attr(this.data.attr('number_oid') + '.val') !== undefined) ? vis.states.attr(this.data.attr('number_oid') + '.val') : '') %><%== this.data.attr('label_append') || '' %></span>
|
|
|
<div class="badge <%= this.data.attr('badge_bg_class' + vis.binds.metro.format(vis.states.attr(this.data.attr('state_oid') + '.val'))) %>">
|
|
|
<i class="<%= this.data.attr('icon_badge' + vis.binds.metro.format(vis.states.attr(this.data.attr('state_oid') + '.val'))) %>"></i>
|
|
|
<%== this.data.attr('badge_src' + vis.binds.metro.format(vis.states.attr(this.data.attr('state_oid') + '.val'))) ? '<img style="position: absolute;' + (this.data.attr('badge_top') ? ('top:' + this.data.attr('badge_top') + '%;') : '') + (this.data.attr('badge_left') ? ('left:' + this.data.attr('badge_left') + '%;') : '') + (this.data.attr('badge_width') ? ('width:' + this.data.attr('badge_width') + '%;') : '') + (this.data.attr('badge_height') ? ('height:' + this.data.attr('badge_height') + '%;') : '') + '" src="' + this.data.attr('badge_src' + vis.binds.metro.format(vis.states.attr(this.data.attr('state_oid') + '.val'))) + '"/>' : '' %>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div <%= (el) -> vis.binds.metro.tile(el, data.transform) %>></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</script>
|
|
|
|
|
|
<script id="tplMetroTileState"
|
|
|
type="text/ejs"
|
|
|
class="vis-tpl"
|
|
|
data-vis-prev='<div id="prev_tplMetroTileState" style="position: relative; text-align: initial;padding: 4px"><div class="vis-widget_prev vis-widget-lock" style="width: 120px; height: 120px; padding: 3px;"> <div style="width: 100%; height: 100%" class="metro vis-widget-prev-body"> <div style="width: 100%; height: 100%" class="tile hover bg-indigo"><div class="tile-content icon"><i class="icon-unlocked"></i> </div> <div class="brand ribbed-steel"><span class="label fg-white">State</span><div class="badge bg-cyan"><i class=""></i></div></div></div></div></div></div>'
|
|
|
data-vis-attrs="state_oid/id;value;select_on_value/checkbox;hover[true]/checkbox;transform[true]/checkbox;label_false;label_true;"
|
|
|
data-vis-attrs0="bg_class_false[bg-indigo]/style,metro-,bg- ribbed-;"
|
|
|
data-vis-attrs1="bg_class_true[bg-teal]/style,metro-,bg- ribbed-;"
|
|
|
data-vis-attrs2="group.icon;icon_false/image;icon_true/image;icon_width/slider,0,100,1;icon_height/slider,0,100,1;icon_top/slider,0,100,1;icon_left/slider,0,100,1;"
|
|
|
data-vis-attrs3="icon_class_false[]/style,iconFont,icon-,,Icon ;icon_class_true[]/style,iconFont,icon-,,Icon ;"
|
|
|
data-vis-attrs4="group.badge;icon_badge_false[]/style,iconFont,icon-,,Icon ;icon_badge_true[]/style,iconFont,icon-,,Icon ;"
|
|
|
data-vis-attrs5="badge_bg_class_false[bg-cyan]/style,metro-,bg-;"
|
|
|
data-vis-attrs6="badge_bg_class_true[bg-teal]/style,metro-,bg-;"
|
|
|
data-vis-attrs7="brand_bg_class_false[ribbed-steel]/style,metro-,bg- ribbed-;"
|
|
|
data-vis-attrs8="brand_bg_class_true[ribbed-indigo]/style,metro-,bg- ribbed-;"
|
|
|
data-vis-attrs9="badge_src_false/image;badge_src_true/image;badge_width/slider,0,100,1;badge_height/slider,0,100,1;badge_top[0]/slider,0,100,1;badge_left[0]/slider,0,100,1;"
|
|
|
data-vis-set="metro"
|
|
|
data-vis-type="ctrl"
|
|
|
data-vis-name="Tile State">
|
|
|
<div id="<%= this.data.attr('wid') %>" class="vis-widget" style="width: 136px; height: 136px; padding: 3px;">
|
|
|
<div style="width: 100%; height: 100%" class="metro vis-widget-body <%== this.data.attr('class') %>" data-val="<%= this.data.attr('value') %>" data-oid="<%= this.data.attr('state_oid') %>" <%= (el) -> vis.binds.basic.state(el) %> >
|
|
|
<div style="width: 100%; height: 100%;" id="metroTile_<%= this.data.attr('wid') %>" class="tile <%= this.data.attr('hover') ? 'hover ' : '' %><%= (vis.binds.metro.format(vis.states.attr(this.data.attr('state_oid') + '.val'), 'compare', this.data.attr('value')) === '_true') && this.data.select_on_value ? 'selected' : '' %> <%= this.data.attr('bg_class' + vis.binds.metro.format(vis.states.attr(this.data.attr('state_oid') + '.val'), 'compare', this.data.attr('value'))) %>" >
|
|
|
<div class="tile-content icon <%= this.data.attr('icon_class' + vis.binds.metro.format(vis.states.attr(this.data.attr('state_oid') + '.val'), 'compare', this.data.attr('value'))) ? '' : 'icon-custom' %>">
|
|
|
<%== this.data.attr('icon' + vis.binds.metro.format(vis.states.attr(this.data.attr('state_oid') + '.val'), 'compare', this.data.attr('value'))) ? '<img style="position: absolute;' + (this.data.attr('icon_top') ? ('top:' + this.data.attr('icon_top') + '%;') : '') + (this.data.attr('icon_left') ? ('left:' + this.data.attr('icon_left') + '%;') : '') + (this.data.attr('icon_width') ? ('width:' + this.data.attr('icon_width') + '%;') : '') + (this.data.attr('icon_height') ? ('height:' + this.data.attr('icon_height') + '%;') : '') + '" src="' + this.data.attr('icon' + vis.binds.metro.format(vis.states.attr(this.data.attr('state_oid') + '.val'), 'compare', this.data.attr('value'))) + '"/>' : '' %>
|
|
|
<i class="<%= this.data.attr('icon_class' + vis.binds.metro.format(vis.states.attr(this.data.attr('state_oid') + '.val'), 'compare', this.data.attr('value'))) %>"></i>
|
|
|
</div>
|
|
|
<div class="brand <%= this.data.attr('brand_bg_class' + vis.binds.metro.format(vis.states.attr(this.data.attr('state_oid') + '.val'), 'compare', this.data.attr('value'))) %>">
|
|
|
<span class="label fg-white"><%== this.data.attr('label' + vis.binds.metro.format(vis.states.attr(this.data.attr('state_oid') + '.val'), 'compare', this.data.attr('value'))) %></span>
|
|
|
<div class="badge <%= this.data.attr('badge_bg_class' + vis.binds.metro.format(vis.states.attr(this.data.attr('state_oid') + '.val'), 'compare', this.data.attr('value'))) %>">
|
|
|
<i class="<%= this.data.attr('icon_badge' + vis.binds.metro.format(vis.states.attr(this.data.attr('state_oid') + '.val'), 'compare', this.data.attr('value'))) %>"></i>
|
|
|
<%== this.data.attr('badge_src' + vis.binds.metro.format(vis.states.attr(this.data.attr('state_oid') + '.val'))) ? '<img style="position: absolute;' + (this.data.attr('badge_top') ? ('top:' + this.data.attr('badge_top') + '%;') : '') + (this.data.attr('badge_left') ? ('left:' + this.data.attr('badge_left') + '%;') : '') + (this.data.attr('badge_width') ? ('width:' + this.data.attr('badge_width') + '%;') : '') + (this.data.attr('badge_height') ? ('height:' + this.data.attr('badge_height') + '%;') : '') + '" src="' + this.data.attr('badge_src' + vis.binds.metro.format(vis.states.attr(this.data.attr('state_oid') + '.val'))) + '"/>' : '' %>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div <%= (el) -> vis.binds.metro.tile(el, data.transform) %>></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</script>
|
|
|
|
|
|
<script id="tplMetroTileToggle"
|
|
|
type="text/ejs"
|
|
|
class="vis-tpl"
|
|
|
data-vis-prev='<div id="prev_tplMetroTileToggle" style="position: relative; text-align: initial;padding: 4px "><div class="vis-widget_prev vis-widget-lock" style="width: 120px; height: 120px; padding: 3px;"> <div style="width: 100%; height: 100%" class="metro vis-widget-prev-body " data-oid="dev1"> <div style="width: 100%; height: 100%;" class="tile hover bg-indigo"> <div class="tile-content icon"> <i class="icon-minus-2"></i> </div> <div class="brand ribbed-steel"> <span class="label fg-white">Toggle</span> <div class="badge bg-cyan"><i class="icon-minus"></i></div> </div> </div> </div> </div></div>'
|
|
|
data-vis-attrs="oid;hover[true]/checkbox;transform[true]/checkbox;select_on_true/checkbox;label_false;label_true;"
|
|
|
data-vis-attrs0="bg_class_false[bg-indigo]/style,metro-,bg- ribbed-;"
|
|
|
data-vis-attrs1="bg_class_true[bg-teal]/style,metro-,bg- ribbed-;"
|
|
|
data-vis-attrs2="group.icon;icon_false/image;icon_true/image;icon_width/slider,0,100,1;icon_height/slider,0,100,1;icon_top/slider,0,100,1;icon_left/slider,0,100,1;"
|
|
|
data-vis-attrs3="icon_class_false[icon-minus]/style,iconFont,icon-,,Icon ;icon_class_true[icon-plus]/style,iconFont,icon-,,Icon ;"
|
|
|
data-vis-attrs4="group.badge;icon_badge_false[icon-minus-2]/style,iconFont,icon-,,Icon ;icon_badge_true[icon-plus-2]/style,iconFont,icon-,,Icon ;"
|
|
|
data-vis-attrs5="badge_bg_class_false[bg-cyan]/style,metro-,bg-;"
|
|
|
data-vis-attrs6="badge_bg_class_true[bg-teal]/style,metro-,bg-;"
|
|
|
data-vis-attrs7="brand_bg_class_false[ribbed-steel]/style,metro-,bg- ribbed-;"
|
|
|
data-vis-attrs8="brand_bg_class_true[ribbed-indigo]/style,metro-,bg- ribbed-;"
|
|
|
data-vis-attrs9="badge_src_false/image;badge_src_true/image;badge_width/slider,0,100,1;badge_height/slider,0,100,1;badge_top[0]/slider,0,100,1;badge_left[0]/slider,0,100,1;"
|
|
|
data-vis-attrs10="group.ccontrol;urlTrue;urlFalse;oidTrue/id;oidFalse/id;oidTrueValue;oidFalseValue;"
|
|
|
data-vis-set="metro"
|
|
|
data-vis-type="ctrl,bool"
|
|
|
data-vis-name="Tile Toggle">
|
|
|
<div id="<%= this.data.attr('wid') %>" class="vis-widget" style="width: 136px; height: 136px; padding: 3px;">
|
|
|
<div style="width: 100%; height: 100%"
|
|
|
class="metro vis-widget-body <%== this.data.attr('class') %>"
|
|
|
data-oid="<%= this.data.attr('oid') %>"
|
|
|
data-url-true="<%= this.data.attr('urlTrue') %>"
|
|
|
data-url-false="<%= this.data.attr('urlFalse') %>"
|
|
|
data-oid-true="<%= this.data.attr('oidTrue') %>"
|
|
|
data-oid-false="<%= this.data.attr('oidFalse') %>"
|
|
|
data-oid-true-value="<%= this.data.attr('oidTrueValue') %>"
|
|
|
data-oid-false-value="<%= this.data.attr('oidFalseValue') %>"
|
|
|
<%= (el) -> vis.binds.basic.toggle(el) %>
|
|
|
>
|
|
|
<div style="width: 100%; height: 100%;" id="metroTile_<%= this.data.attr('wid') %>" class="tile icon <%= this.data.attr('hover') ? 'hover ' : '' %><%= (vis.binds.metro.format(vis.states.attr(this.data.attr('oid') + '.val')) === '_true') && this.data.attr('select_on_true') ? 'selected' : '' %> <%= this.data.attr('bg_class' + vis.binds.metro.format(vis.states.attr(this.data.attr('oid') + '.val'))) %>" >
|
|
|
<div class="tile-content icon <%= this.data.attr('icon_class' + vis.binds.metro.format(vis.states.attr(this.data.attr('oid') + '.val'))) ? '' : 'icon-custom' %>">
|
|
|
<%== this.data.attr('icon' + vis.binds.metro.format(vis.states.attr(this.data.attr('oid') + '.val'))) ? '<img style="position: absolute;' + (this.data.attr('icon_top') ? ('top:' + this.data.attr('icon_top') + '%;') : '') + (this.data.attr('icon_left') ? ('left:' + this.data.attr('icon_left') + '%;') : '') + (this.data.attr('icon_width') ? ('width:' + this.data.attr('icon_width') + '%;') : '') + (this.data.attr('icon_height') ? ('height:' + this.data.attr('icon_height') + '%;') : '') + '" src="' + this.data.attr('icon' + vis.binds.metro.format(vis.states.attr(this.data.attr('oid') + '.val'))) + '"/>' : '' %>
|
|
|
<i class="<%= vis.states.attr(this.data.attr('oid') + '.val') ? this.data.attr("icon_class_true") : this.data.attr("icon_class_false") %>"></i>
|
|
|
</div>
|
|
|
<div class="brand <%= this.data.attr('brand_bg_class' + vis.binds.metro.format(vis.states.attr(this.data.attr('oid') + '.val'))) %>">
|
|
|
<span class="label fg-white"><%== this.data.attr('label' + vis.binds.metro.format(vis.states.attr(this.data.attr('oid') + '.val'))) %></span>
|
|
|
<div class="badge <%= this.data.attr('badge_bg_class' + vis.binds.metro.format(vis.states.attr(this.data.attr('oid') + '.val'))) %>">
|
|
|
<i class="<%= this.data.attr('icon_badge' + vis.binds.metro.format(vis.states.attr(this.data.attr('oid') + '.val'))) %>"></i>
|
|
|
<%== this.data.attr('badge_src' + vis.binds.metro.format(vis.states.attr(this.data.attr('state_oid') + '.val'))) ? '<img style="position: absolute;' + (this.data.attr('badge_top') ? ('top:' + this.data.attr('badge_top') + '%;') : '') + (this.data.attr('badge_left') ? ('left:' + this.data.attr('badge_left') + '%;') : '') + (this.data.attr('badge_width') ? ('width:' + this.data.attr('badge_width') + '%;') : '') + (this.data.attr('badge_height') ? ('height:' + this.data.attr('badge_height') + '%;') : '') + '" src="' + this.data.attr('badge_src' + vis.binds.metro.format(vis.states.attr(this.data.attr('state_oid') + '.val'))) + '"/>' : '' %>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div <%= (el) -> vis.binds.metro.tile(el, data.transform) %>></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</script>
|
|
|
|
|
|
<script id="tplMetroTileStateNumber"
|
|
|
type="text/ejs"
|
|
|
class="vis-tpl"
|
|
|
data-vis-prev='<div id="prev_tplMetroTileStateNumber" style="position: relative; text-align: initial;padding: 4px"><div class="vis-widget_prev vis-widget-lock" style="width: 120px; height: 120px; padding: 3px;"> <div style="width: 100%; height: 100%" class="metro vis-widget-prev-body"> <div style="width: 100%; height: 100%;" class="tile hover bg-indigo"> <div class="tile-content icon"> <i class="icon-meter-slow"></i></div><div class="brand ribbed-steel"><span class="label fg-white">State/Num</span><div class="badge bg-cyan"><i class=""></i></div></div></div></div></div></div>'
|
|
|
data-vis-attrs="state_oid/id;value;select_on_value/checkbox;number_oid/id;hover[true]/checkbox;transform[true]/checkbox;label_false;label_true;label_append;"
|
|
|
data-vis-attrs0="bg_class_false[bg-indigo]/style,metro-,bg- ribbed-;"
|
|
|
data-vis-attrs1="bg_class_true[bg-teal]/style,metro-,bg- ribbed-;"
|
|
|
data-vis-attrs2="group.icon;icon_false_src/image;icon_true_src/image;icon_width/slider,0,100,1;icon_height/slider,0,100,1;icon_top/slider,0,100,1;icon_left/slider,0,100,1;"
|
|
|
data-vis-attrs3="icon_class_false[icon-meter-slow]/style,iconFont,icon-,,Icon ;icon_class_true[icon-meter-fast]/style,iconFont,icon-,,Icon ;"
|
|
|
data-vis-attrs4="group.badge;badge_bg_class[]/style,metro-,bg-;hide_on_0/checkbox;"
|
|
|
data-vis-attrs5="group.brand;brand_bg_class_false[ribbed-steel]/style,metro-,bg- ribbed-;"
|
|
|
data-vis-attrs6="brand_bg_class_true[ribbed-indigo]/style,metro-,bg- ribbed-;"
|
|
|
data-vis-set="metro"
|
|
|
data-vis-type="val"
|
|
|
data-vis-name="Tile State / val Badge Number">
|
|
|
<div id="<%= this.data.attr('wid') %>" class="vis-widget" style="width: 136px; height: 136px; padding: 3px;" >
|
|
|
<div style="width: 100%; height: 100%" class="metro vis-widget-body <%== this.data.attr('class') %>" data-val="<%= this.data.attr('value') %>" data-oid="<%= this.data.attr('state_oid') %>" <%= (el) -> vis.binds.basic.state(el) %> >
|
|
|
<div style="width: 100%; height: 100%;" id="metroTile_<%= this.data.attr('wid') %>" class="tile <%= this.data.attr('hover') ? 'hover ' : '' %><%= (vis.binds.metro.format(vis.states.attr(this.data.attr('state_oid') + '.val'), 'compare', this.data.attr('value')) === '_true') && this.data.select_on_value ? 'selected' : '' %> <%= this.data.attr('bg_class' + vis.binds.metro.format(vis.states.attr(this.data.attr('state_oid') + '.val'), 'compare', this.data.attr('value'))) %>" >
|
|
|
<div class="tile-content icon <%= this.data.attr('icon_class' + vis.binds.metro.format(vis.states.attr(this.data.attr('state_oid') + '.val'), 'compare', this.data.attr('value'))) ? '' : 'icon-custom' %>">
|
|
|
<%== this.data.attr('icon' + vis.binds.metro.format(vis.states.attr(this.data.attr('state_oid') + '.val'), 'compare', this.data.attr('value')) + '_src') ? '<img style="position: absolute;' + (this.data.attr('icon_top') ? ('top:' + this.data.attr('icon_top') + '%;') : '') + (this.data.attr('icon_left') ? ('left:' + this.data.attr('icon_left') + '%;') : '') + (this.data.attr('icon_width') ? ('width:' + this.data.attr('icon_width') + '%;') : '') + (this.data.attr('icon_height') ? ('height:' + this.data.attr('icon_height') + '%;') : '') + '" src="' + this.data.attr('icon' + vis.binds.metro.format(vis.states.attr(this.data.attr('state_oid') + '.val'), 'compare', this.data.attr('value')) + '_src') + '"/>' : '' %>
|
|
|
<i class="<%= this.data.attr('icon_class' + vis.binds.metro.format(vis.states.attr(this.data.attr('state_oid') + '.val'), 'compare', this.data.attr('value'))) %>"></i>
|
|
|
</div>
|
|
|
<div class="brand <%= this.data.attr('brand_bg_class' + vis.binds.metro.format(vis.states.attr(this.data.attr('state_oid') + '.val'), 'compare', this.data.attr('value'))) %>">
|
|
|
<span class="label fg-white"><%== this.data.attr('label' + vis.binds.metro.format(vis.states.attr(this.data.attr('state_oid') + '.val'), 'compare', this.data.attr('value'))) %><%== this.data.attr('label_append') %></span>
|
|
|
<div class="badge <%= this.data.attr('badge_bg_class' + vis.binds.metro.format(vis.states.attr(this.data.attr('state_oid') + '.val'), 'compare', this.data.attr('value'))) %>">
|
|
|
<i class="<%= this.data.attr('icon_badge' + vis.binds.metro.format(vis.states.attr(this.data.attr('state_oid') + '.val'), 'compare', this.data.attr('value'))) %>"></i>
|
|
|
<%== this.data.attr('badge_src' + vis.binds.metro.format(vis.states.attr(this.data.attr('state_oid') + '.val'))) ? '<img style="position: absolute;' + (this.data.attr('badge_top') ? ('top:' + this.data.attr('badge_top') + '%;') : '') + (this.data.attr('badge_left') ? ('left:' + this.data.attr('badge_left') + '%;') : '') + (this.data.attr('badge_width') ? ('width:' + this.data.attr('badge_width') + '%;') : '') + (this.data.attr('badge_height') ? ('height:' + this.data.attr('badge_height') + '%;') : '') + '" src="' + this.data.attr('badge_src' + vis.binds.metro.format(vis.states.attr(this.data.attr('state_oid') + '.val'))) + '"/>' : '' %><%= (vis.states.attr(this.data.attr("number_oid") + '.val') !== undefined) ? vis.states.attr(this.data.attr("number_oid") + '.val') : '' %>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div <%= (el) -> vis.binds.metro.tile(el, data.transform) %>></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</script>
|
|
|
|
|
|
<script id="tplMetroTileDimmer"
|
|
|
type="text/ejs"
|
|
|
class="vis-tpl"
|
|
|
data-vis-prev='<div id="prev_tplMetroTileDimmer" style=" position: relative; text-align: initial;padding: 4px"><div class="vis-widget_prev" style="width: 122px; height: 77px; padding: 3px;"><div style="width: 100%; height: 100%" class="metro vis-widget-prev-body "><div style="width: 100%; height: 100%;" class="tile bg-indigo"> <div class="tile-content" style=" zoom: 0.5;"> <div style="float:left; height: 90px;"> <img width="90px" src="widgets/metro/img/light_light_dim.png"> </div> <div style="margin: 30px 70px 0 0; float:right"> <div class="input-control switch"> <label> <input type="checkbox" name="w00004_checkbox" data-o> <span class="check"></span> </label> </div> </div> <div style="clear: both; margin: 0 12px;" class="slider" data-role="slider"><div class="complete" style="width: 0;"></div><a class="marker" style="left: 0;"></a></div> <div></div> </div> <div class="brand ribbed-steel"> <span class="label fg-white">Dimmer</span> </div> </div> <div></div> </div> </div>'
|
|
|
data-vis-attrs="oid;oid-working;min;max;step[1];hover/checkbox;transform/checkbox;label;"
|
|
|
data-vis-attrs0="bg_class[bg-indigo]/style,metro-,bg- ribbed-;"
|
|
|
data-vis-attrs1="brand_bg_class[ribbed-steel]/style,metro-,bg- ribbed-;"
|
|
|
data-vis-attrs2="group.slider;sliderColor/color;sliderCompleteColor/color;sliderMarkerColor/color"
|
|
|
data-vis-set="metro"
|
|
|
data-vis-type="ctrl,dimmer"
|
|
|
data-vis-name="Tile Dimmer">
|
|
|
<div id="<%= this.data.attr('wid') %>" class="vis-widget" style="width:287px; height: 136px; padding: 3px;" <%= (el) -> vis.preloadImages(['widgets/metro/img/light_light_dim_100.png','widgets/metro/img/light_light_dim_90.png','widgets/metro/img/light_light_dim_80.png','widgets/metro/img/light_light_dim_70.png','widgets/metro/img/light_light_dim_60.png','widgets/metro/img/light_light_dim_50.png','widgets/metro/img/light_light_dim_40.png','widgets/metro/img/light_light_dim_30.png','widgets/metro/img/light_light_dim_20.png','widgets/metro/img/light_light_dim_10.png','widgets/metro/img/light_light_dim.png']); %>>
|
|
|
<div style="width: 100%; height: 100%" class="metro vis-widget-body <%== this.data.attr('class') %>" >
|
|
|
|
|
|
<div style="width: 100%; height: 100%;" id="metroTile_<%= this.data.attr('wid') %>" class="tile <%= this.data.attr('hover') ? 'hover ' : '' %><%= this.data.attr('bg_class') %>">
|
|
|
<div class="tile-content">
|
|
|
<div style="float:left; height: 90px;">
|
|
|
<%
|
|
|
var str = vis.states.attr(this.data.oid + '.val');
|
|
|
var val = parseFloat(str);
|
|
|
if (str === true || str === 'true') val = 1;
|
|
|
if (isNaN(val)) val = 0;
|
|
|
|
|
|
var min = this.data.attr('min');
|
|
|
if (min !== undefined && min !== null && min !== '') {
|
|
|
min = parseFloat(min);
|
|
|
} else {
|
|
|
min = 0;
|
|
|
}
|
|
|
|
|
|
var max = this.data.attr('max');
|
|
|
if (max !== undefined && max !== null && max !== '') {
|
|
|
max = parseFloat(max);
|
|
|
} else {
|
|
|
max = 1;
|
|
|
}
|
|
|
|
|
|
val = (val - min) / (max - min);
|
|
|
|
|
|
if (val === 1) {
|
|
|
%>
|
|
|
<img width="90px" src="widgets/metro/img/light_light_dim_100.png"/>
|
|
|
<% } else if (val >= 0.9) { %>
|
|
|
<img width="90px" src="widgets/metro/img/light_light_dim_90.png"/>
|
|
|
<% } else if (val >= 0.8) { %>
|
|
|
<img width="90px" src="widgets/metro/img/light_light_dim_80.png"/>
|
|
|
<% } else if (val >= 0.7) { %>
|
|
|
<img width="90px" src="widgets/metro/img/light_light_dim_70.png"/>
|
|
|
<% } else if (val >= 0.6) { %>
|
|
|
<img width="90px" src="widgets/metro/img/light_light_dim_60.png"/>
|
|
|
<% } else if (val >= 0.5) { %>
|
|
|
<img width="90px" src="widgets/metro/img/light_light_dim_50.png"/>
|
|
|
<% } else if (val >= 0.4) { %>
|
|
|
<img width="90px" src="widgets/metro/img/light_light_dim_40.png"/>
|
|
|
<% } else if (val >= 0.3) { %>
|
|
|
<img width="90px" src="widgets/metro/img/light_light_dim_30.png"/>
|
|
|
<% } else if (val >= 0.2) { %>
|
|
|
<img width="90px" src="widgets/metro/img/light_light_dim_20.png"/>
|
|
|
<% } else if (val >= 0.1) { %>
|
|
|
<img width="90px" src="widgets/metro/img/light_light_dim_10.png"/>
|
|
|
<% } else if (val >= 0.01) { %>
|
|
|
<img width="90px" src="widgets/metro/img/light_light_dim_00.png"/>
|
|
|
<% } else { %>
|
|
|
<img width="90px" src="widgets/metro/img/light_light_dim.png"/>
|
|
|
<% } %>
|
|
|
</div>
|
|
|
<div style="margin: 30px 70px 0 0; float:right">
|
|
|
<div class="input-control switch">
|
|
|
<label>
|
|
|
<input type="checkbox" name="<%= this.data.attr('wid') %>_checkbox" id="<%= this.data.attr('wid') %>_checkbox" data-oid="<%= this.data.attr('oid') %>" <%= (el) -> vis.binds.basic.checkbox(el, true, data.min, data.max) %>/>
|
|
|
<span class="check"></span>
|
|
|
</label>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div style="clear: both; margin: 0 12px;" data-oid="<%= this.data.attr('oid') %>" data-oid-working="<%= this.data.attr('oid-working') %>" id="metroSlider_<%= this.data.attr('wid') %>" class="slider" data-role="slider"></div>
|
|
|
<div <%= (el) -> vis.binds.metro.slider(el, {min: parseFloat(data.min), max: parseFloat(data.max), step: parseFloat(data.step), color: data.sliderColor, completeColor: data.sliderCompleteColor, markerColor: data.sliderMarkerColor}) %>></div>
|
|
|
</div>
|
|
|
<div class="brand <%= this.data.attr("brand_bg_class") %>">
|
|
|
<span class="label fg-white"><%= this.data.attr("label") %></span>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div <%= (el) -> vis.binds.metro.tile(el, data.transform) %><%= (el) -> vis.binds.metro.inputControl(el) %>></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</script>
|
|
|
|
|
|
<script id="tplMetroTileDimmerDialog"
|
|
|
type="text/ejs"
|
|
|
data-vis-prev='<div id="prev_tplMetroTileDimmerDialog" style="position: relative; text-align: initial;padding: 4px "><div class="vis-widget_prev vis-widget-lock" style="width: 120px; height: 120px; padding: 3px;"> <div style="width: 100%; height: 100%" class="metro vis-widget-prev-body"> <div style="width: 100%; height: 100%;" class="tile hover bg-indigo"><div class="tile-content" style="text-align: center"><img width="90%" src="widgets/metro/img/light_light_dim.png"></div> <div class="brand ribbed-steel"><span class="label fg-white">Dimmer Dialog</span></div> </div><div style="padding: 42px 10px 10px;"></div></div></div></div>'
|
|
|
data-vis-attrs="oid;oid-working;min;max;step[1];digits/number;hover[true]/checkbox;transform[true]/checkbox;label;"
|
|
|
data-vis-attrs0="bg_class[bg-indigo]/style,metro-,bg- ribbed-;"
|
|
|
data-vis-attrs1="brand_bg_class[ribbed-steel]/style,metro-,bg- ribbed-;"
|
|
|
data-vis-attrs2="group.slider;sliderColor/color;sliderCompleteColor/color;sliderMarkerColor/color;"
|
|
|
data-vis-attrs3="group.dialog;dialog_flat/checkbox;dialog_shadow/checkbox;dialog_draggable[true]/checkbox;dialog_modal/checkbox"
|
|
|
class="vis-tpl"
|
|
|
data-vis-set="metro"
|
|
|
data-vis-type="ctrl,dimmer,dialog"
|
|
|
data-vis-name="Tile Dimmer Dialog">
|
|
|
<div id="<%= this.data.attr('wid') %>" class="vis-widget" style="width: 136px; height: 136px; padding: 3px;" <%= (el) -> vis.preloadImages(['widgets/metro/img/light_light_dim_100.png','widgets/metro/img/light_light_dim_90.png','widgets/metro/img/light_light_dim_80.png','widgets/metro/img/light_light_dim_70.png','widgets/metro/img/light_light_dim_60.png','widgets/metro/img/light_light_dim_50.png','widgets/metro/img/light_light_dim_40.png','widgets/metro/img/light_light_dim_30.png','widgets/metro/img/light_light_dim_20.png','widgets/metro/img/light_light_dim_10.png','widgets/metro/img/light_light_dim.png']); %>>
|
|
|
<div style="width: 100%; height: 100%" class="metro vis-widget-body <%== this.data.attr('class') %>" >
|
|
|
|
|
|
<div style="width: 100%; height: 100%;" id="metroTile_<%= this.data.attr('wid') %>" class="tile <%= this.data.attr('hover') ? 'hover ' : '' %><%= this.data.attr('bg_class') %>">
|
|
|
<div class="tile-content" style="text-align: center">
|
|
|
<%
|
|
|
var str = vis.states.attr(this.data.oid + '.val');
|
|
|
var val = parseFloat(str);
|
|
|
if (str === true || str === 'true') val = 1;
|
|
|
if (isNaN(val)) val = 0;
|
|
|
|
|
|
var min = this.data.attr('min');
|
|
|
if (min !== undefined && min !== null && min !== '') {
|
|
|
min = parseFloat(min);
|
|
|
} else {
|
|
|
min = 0;
|
|
|
}
|
|
|
|
|
|
var max = this.data.attr('max');
|
|
|
if (max !== undefined && max !== null && max !== '') {
|
|
|
max = parseFloat(max);
|
|
|
} else {
|
|
|
max = 1;
|
|
|
}
|
|
|
|
|
|
val = (val - min) / (max - min);
|
|
|
|
|
|
if (val === 1) {
|
|
|
%>
|
|
|
<img width="90%" src="widgets/metro/img/light_light_dim_100.png"/>
|
|
|
<% } else if (val >= 0.9) { %>
|
|
|
<img width="90%" src="widgets/metro/img/light_light_dim_90.png"/>
|
|
|
<% } else if (val >= 0.8) { %>
|
|
|
<img width="90%" src="widgets/metro/img/light_light_dim_80.png"/>
|
|
|
<% } else if (val >= 0.7) { %>
|
|
|
<img width="90%" src="widgets/metro/img/light_light_dim_70.png"/>
|
|
|
<% } else if (val >= 0.6) { %>
|
|
|
<img width="90%" src="widgets/metro/img/light_light_dim_60.png"/>
|
|
|
<% } else if (val >= 0.5) { %>
|
|
|
<img width="90%" src="widgets/metro/img/light_light_dim_50.png"/>
|
|
|
<% } else if (val >= 0.4) { %>
|
|
|
<img width="90%" src="widgets/metro/img/light_light_dim_40.png"/>
|
|
|
<% } else if (val >= 0.3) { %>
|
|
|
<img width="90%" src="widgets/metro/img/light_light_dim_30.png"/>
|
|
|
<% } else if (val >= 0.2) { %>
|
|
|
<img width="90%" src="widgets/metro/img/light_light_dim_20.png"/>
|
|
|
<% } else if (val >= 0.1) { %>
|
|
|
<img width="90%" src="widgets/metro/img/light_light_dim_10.png"/>
|
|
|
<% } else if (val >= 0.01) { %>
|
|
|
<img width="90%" src="widgets/metro/img/light_light_dim_00.png"/>
|
|
|
<% } else { %>
|
|
|
<img width="90%" src="widgets/metro/img/light_light_dim.png"/>
|
|
|
<% } %>
|
|
|
</div>
|
|
|
<div class="brand <%= this.data.attr("brand_bg_class") %>">
|
|
|
<span class="label fg-white"><%= this.data.attr("label") %></span>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div
|
|
|
<%= (el) -> vis.binds.metro.tileDialogSlider(el, data.wid, data.oid, data['oid-working'], {title: data.label, flat: data.dialog_flat, shadow: data.dialog_shadow, overlay: data.dialog_modal, icon: data.dialog_icon_src, icon_class: data.dialog_icon_class, draggable: data.dialog_draggable, width: 300, height: 180}, {min: data.min, max: data.max, step: parseFloat(data.step), color: data.sliderColor, completeColor: data.sliderCompleteColor, markerColor: data.sliderMarkerColor, digits: data.digits}) %> style="padding: 42px 10px 10px;">
|
|
|
</div>
|
|
|
<div <%= (el) -> vis.binds.metro.tile(el, data.transform) %>></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</script>
|
|
|
|
|
|
<script id="tplMetroTileShutter"
|
|
|
type="text/ejs"
|
|
|
class="vis-tpl"
|
|
|
data-vis-prev='<div id="prev_tplMetroTileShutter" style="position: relative; text-align: initial;padding: 4px "><div id="19l1ml014" class="vis-widget_prev vis-widget-lock " style="width: 287px; height: 120px; padding: 3px; zoom: 0.5;"> <div style="width: 100%; height: 100%" class="metro vis-widget-prev-body "> <div style="width: 100%; height: 100%;" id="metroTile_19l1ml014" class="tile hover bg-indigo"> <div class="tile-content"> <div style="float:left; height: 90px;"> <img width="90px" src="widgets/metro/img/fts_shutter_100.png"> </div> <div style="margin: 30px 70px 0 0; float:right"> <div class="input-control switch"> <label> <input type="checkbox" name="19l1ml014_checkbox" id="19l1ml014_checkbox" data-oid="nothing_selected" data-oid-working=""> <span class="check"></span> </label> </div> </div> <div style="clear: both; margin: 0 12px;" data-oid="nothing_selected" data-oid-working="" class="slider" data-role="slider"><div class="complete" style="width: 0;"></div><a class="marker" style="left: 0;"></a></div> </div> <div class="brand ribbed-steel"><span class="label fg-white">Shutter</span></div></div><div></div> </div></div></div>'
|
|
|
data-vis-attrs="oid;oid-working;min;max;step[1];hover/checkbox;transform/checkbox;label;"
|
|
|
data-vis-attrs0="bg_class[bg-indigo]/style,metro-,bg- ribbed-;"
|
|
|
data-vis-attrs1="brand_bg_class[ribbed-steel]/style,metro-,bg- ribbed-;"
|
|
|
data-vis-attrs2="group.slider;sliderColor/color;sliderCompleteColor/color;sliderMarkerColor/color"
|
|
|
data-vis-set="metro"
|
|
|
data-vis-type="ctrl,shutter"
|
|
|
data-vis-name="Tile Shutter">
|
|
|
<div id="<%= this.data.attr('wid') %>" class="vis-widget" style="width:287px; height: 136px; padding: 3px;" <%= (el) -> vis.preloadImages(['widgets/metro/img/light_light_dim_100.png','widgets/metro/img/light_light_dim_90.png','widgets/metro/img/light_light_dim_80.png','widgets/metro/img/light_light_dim_70.png','widgets/metro/img/light_light_dim_60.png','widgets/metro/img/light_light_dim_50.png','widgets/metro/img/light_light_dim_40.png','widgets/metro/img/light_light_dim_30.png','widgets/metro/img/light_light_dim_20.png','widgets/metro/img/light_light_dim_10.png','widgets/metro/img/light_light_dim.png']); %>>
|
|
|
<div style="width: 100%; height: 100%" class="metro vis-widget-body <%== this.data.attr('class') %>" >
|
|
|
|
|
|
<div style="width: 100%; height: 100%;" id="metroTile_<%= this.data.attr('wid') %>" class="tile <%= this.data.attr('hover') ? 'hover ' : '' %><%= this.data.attr('bg_class') %>">
|
|
|
<div class="tile-content">
|
|
|
<div style="float:left; height: 90px;">
|
|
|
<%
|
|
|
var str = vis.states.attr(this.data.oid + '.val');
|
|
|
var val = parseFloat(str);
|
|
|
if (str === true || str === 'true') val = 1;
|
|
|
if (isNaN(val)) val = 0;
|
|
|
|
|
|
var min = this.data.attr('min');
|
|
|
if (min !== undefined && min !== null && min !== '') {
|
|
|
min = parseFloat(min);
|
|
|
} else {
|
|
|
min = 0;
|
|
|
}
|
|
|
|
|
|
var max = this.data.attr('max');
|
|
|
if (max !== undefined && max !== null && max !== '') {
|
|
|
max = parseFloat(max);
|
|
|
} else {
|
|
|
max = 1;
|
|
|
}
|
|
|
|
|
|
val = (val - min) / (max - min);
|
|
|
val = 1 - val;
|
|
|
if (val === 1) { %>
|
|
|
<img width="90px" src="widgets/metro/img/fts_shutter_100.png"/>
|
|
|
<% } else if (val >= 0.9) { %>
|
|
|
<img width="90px" src="widgets/metro/img/fts_shutter_90.png"/>
|
|
|
<% } else if (val >= 0.8) { %>
|
|
|
<img width="90px" src="widgets/metro/img/fts_shutter_80.png"/>
|
|
|
<% } else if (val >= 0.7) { %>
|
|
|
<img width="90px" src="widgets/metro/img/fts_shutter_70.png"/>
|
|
|
<% } else if (val >= 0.6) { %>
|
|
|
<img width="90px" src="widgets/metro/img/fts_shutter_60.png"/>
|
|
|
<% } else if (val >= 0.5) { %>
|
|
|
<img width="90px" src="widgets/metro/img/fts_shutter_50.png"/>
|
|
|
<% } else if (val >= 0.4) { %>
|
|
|
<img width="90px" src="widgets/metro/img/fts_shutter_40.png"/>
|
|
|
<% } else if (val >= 0.3) { %>
|
|
|
<img width="90px" src="widgets/metro/img/fts_shutter_30.png"/>
|
|
|
<% } else if (val >= 0.2) { %>
|
|
|
<img width="90px" src="widgets/metro/img/fts_shutter_20.png"/>
|
|
|
<% } else if (val >= 0.1) { %>
|
|
|
<img width="90px" src="widgets/metro/img/fts_shutter_10.png"/>
|
|
|
<% } else { %>
|
|
|
<img width="90px" src="widgets/metro/img/fts_window_2w.png"/>
|
|
|
<% } %>
|
|
|
</div>
|
|
|
<div style="margin: 30px 70px 0 0; float:right">
|
|
|
<div class="input-control switch">
|
|
|
<label>
|
|
|
<input type="checkbox" name="<%= this.data.attr('wid') %>_checkbox" id="<%= this.data.attr('wid') %>_checkbox" data-oid="<%= this.data.attr('oid') %>" data-oid-working="<%= this.data.attr('oid-working') %>" <%= (el) -> vis.binds.basic.checkbox(el, true, data.min, data.max) %>/>
|
|
|
<span class="check"></span>
|
|
|
</label>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div style="clear: both; margin: 0 12px;" data-oid="<%= this.data.attr('oid') %>" data-oid-working="<%= this.data.attr('oid-working') %>" id="metroSlider_<%= this.data.attr('wid') %>" class="slider" data-role="slider"></div>
|
|
|
<div <%= (el) -> vis.binds.metro.slider(el, {min: data.min, max: data.max, step: parseFloat(data.step), color:data.sliderColor,completeColor:data.sliderCompleteColor,markerColor:data.sliderMarkerColor}) %>></div>
|
|
|
</div>
|
|
|
<div class="brand <%= this.data.attr("brand_bg_class") %>">
|
|
|
<span class="label fg-white"><%= this.data.attr("label") %></span>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
<div <%= (el) -> vis.binds.metro.tile(el, data.transform) %><%= (el) -> vis.binds.metro.inputControl(el) %>></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</script>
|
|
|
|
|
|
<script id="tplMetroTileShutterDialog"
|
|
|
type="text/ejs"
|
|
|
class="vis-tpl"
|
|
|
data-vis-prev='<div id="prev_tplMetroTileShutterDialog" style="position: relative; text-align: initial;padding: 4px "><div class="vis-widget_prev vis-widget-lock " style="width: 120px; height: 120px; padding: 3px;"> <div style="width: 100%; height: 100%" class="metro vis-widget-prev-body"> <div style="width: 100%; height: 100%;" class="tile hover bg-indigo"> <div class="tile-content" style="text-align: center"> <img width="90px" src="widgets/metro/img/fts_shutter_100.png"> </div> <div class="brand ribbed-steel"> <span class="label fg-white">Shutter dialog</span> </div> </div> <div style="padding: 42px 10px 10px;"> </div> </div> </div></div>'
|
|
|
data-vis-attrs="oid;oid-working;min;max;step[1];hover[true]/checkbox;transform[true]/checkbox;label;"
|
|
|
data-vis-attrs0="bg_class[bg-indigo]/style,metro-,bg- ribbed-;"
|
|
|
data-vis-attrs1="brand_bg_class[ribbed-steel]/style,metro-,bg- ribbed-;"
|
|
|
data-vis-attrs2="group.slider;sliderColor/color;sliderCompleteColor/color;sliderMarkerColor/color;"
|
|
|
data-vis-attrs3="group.dialog;dialog_flat/checkbox;dialog_shadow/checkbox;dialog_draggable[true]/checkbox;dialog_modal/checkbox"
|
|
|
data-vis-set="metro"
|
|
|
data-vis-type="ctrl,shutter,dialog"
|
|
|
data-vis-name="Tile Shutter Dialog">
|
|
|
<div id="<%= this.data.attr('wid') %>" class="vis-widget" style="width: 136px; height: 136px; padding: 3px;" <%= (el) -> vis.preloadImages(['widgets/metro/img/light_light_dim_100.png','widgets/metro/img/light_light_dim_90.png','widgets/metro/img/light_light_dim_80.png','widgets/metro/img/light_light_dim_70.png','widgets/metro/img/light_light_dim_60.png','widgets/metro/img/light_light_dim_50.png','widgets/metro/img/light_light_dim_40.png','widgets/metro/img/light_light_dim_30.png','widgets/metro/img/light_light_dim_20.png','widgets/metro/img/light_light_dim_10.png','widgets/metro/img/light_light_dim.png']); %>>
|
|
|
<div style="width: 100%; height: 100%" class="metro vis-widget-body <%== this.data.attr('class') %>" >
|
|
|
|
|
|
<div style="width: 100%; height: 100%;" id="metroTile_<%= this.data.attr('wid') %>" class="tile <%= this.data.attr('hover') ? 'hover ' : '' %><%= this.data.attr('bg_class') %>">
|
|
|
<div class="tile-content" style="text-align: center">
|
|
|
<%
|
|
|
var str = vis.states.attr(this.data.oid + '.val');
|
|
|
var val = parseFloat(str);
|
|
|
if (str === true || str === 'true') val = 1;
|
|
|
if (isNaN(val)) val = 0;
|
|
|
|
|
|
var min = this.data.attr('min');
|
|
|
if (min !== undefined && min !== null && min !== '') {
|
|
|
min = parseFloat(min);
|
|
|
} else {
|
|
|
min = 0;
|
|
|
}
|
|
|
|
|
|
var max = this.data.attr('max');
|
|
|
if (max !== undefined && max !== null && max !== '') {
|
|
|
max = parseFloat(max);
|
|
|
} else {
|
|
|
max = 1;
|
|
|
}
|
|
|
|
|
|
val = (val - min) / (max - min);
|
|
|
val = 1 - val;
|
|
|
|
|
|
if (val === 1) { %>
|
|
|
<img width="90px" src="widgets/metro/img/fts_shutter_100.png"/>
|
|
|
<% } else if (val >= 0.9) { %>
|
|
|
<img width="90px" src="widgets/metro/img/fts_shutter_90.png"/>
|
|
|
<% } else if (val >= 0.8) { %>
|
|
|
<img width="90px" src="widgets/metro/img/fts_shutter_80.png"/>
|
|
|
<% } else if (val >= 0.7) { %>
|
|
|
<img width="90px" src="widgets/metro/img/fts_shutter_70.png"/>
|
|
|
<% } else if (val >= 0.6) { %>
|
|
|
<img width="90px" src="widgets/metro/img/fts_shutter_60.png"/>
|
|
|
<% } else if (val >= 0.5) { %>
|
|
|
<img width="90px" src="widgets/metro/img/fts_shutter_50.png"/>
|
|
|
<% } else if (val >= 0.4) { %>
|
|
|
<img width="90px" src="widgets/metro/img/fts_shutter_40.png"/>
|
|
|
<% } else if (val >= 0.3) { %>
|
|
|
<img width="90px" src="widgets/metro/img/fts_shutter_30.png"/>
|
|
|
<% } else if (val >= 0.2) { %>
|
|
|
<img width="90px" src="widgets/metro/img/fts_shutter_20.png"/>
|
|
|
<% } else if (val >= 0.1) { %>
|
|
|
<img width="90px" src="widgets/metro/img/fts_shutter_10.png"/>
|
|
|
<% } else { %>
|
|
|
<img width="90px" src="widgets/metro/img/fts_window_2w.png"/>
|
|
|
<% } %>
|
|
|
</div>
|
|
|
<div class="brand <%= this.data.attr("brand_bg_class") %>">
|
|
|
<span class="label fg-white"><%= this.data.attr("label") %></span>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div
|
|
|
<%= (el) -> vis.binds.metro.tileDialogSlider(el, data.wid, data.oid, data['oid-working'], {title:data.label,flat:data.dialog_flat,shadow:data.dialog_shadow,overlay:data.dialog_modal,icon:data.dialog_icon_src,icon_class:data.dialog_icon_class,draggable:data.dialog_draggable,width:300,height: 180}, {min: data.min, max: data.max, step: parseFloat(data.step),color:data.sliderColor,completeColor:data.sliderCompleteColor,markerColor:data.sliderMarkerColor}) %> style="padding: 42px 10px 10px;">
|
|
|
</div>
|
|
|
<div <%= (el) -> vis.binds.metro.tile(el, data.transform) %>></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</script>
|
|
|
|
|
|
<script id="tplMetroTileHeating"
|
|
|
type="text/ejs"
|
|
|
class="vis-tpl"
|
|
|
data-vis-prev='<div id="prev_tplMetroTileHeating" style="position: relative; text-align: initial;padding: 4px "><div class="vis-widget_prev vis-widget-lock " style="width: 250px; height: 136px; padding: 3px; zoom: 0.5;"> <div style="width: 100%; height: 100%" class="metro vis-widget-prev-body "> <div style="width: 100%; height: 100%;" class="tile bg-indigo"> <div class="tile-content"> <div style="float:left; height: 90px;"> <img width="90px" src="widgets/metro/img/sani_heating_temp.png"> </div> <div style="float: right; padding-top: 16px; padding-right: 12px;"> <table style="color:white;font-size:11px;display:inline-block;"> <tr><td>Set temperature:</td><td>0%</td></tr> <tr><td>Actual temperature:</td><td>0.0°C</td></tr> <tr><td>Drive position:</td><td>0</td></tr> </table> </div> <div style="clear: both; margin: 0 12px;" class="slider" data-role="slider"></div> </div> <div class="brand ribbed-steel"> <span class="label fg-white">Heating</span> </div> </div> <div></div> </div> </div></div>'
|
|
|
data-vis-attrs="set_oid/id/onHeatingOid;temp_oid/id;drive_oid/id;hum_oid/id;hover/checkbox;transform/checkbox;label;min[6]/slider,-20,40,1;max[30]/slider,-20,40,1;step;"
|
|
|
data-vis-attrs0="bg_class[bg-indigo]/style,metro-,bg- ribbed-;"
|
|
|
data-vis-attrs1="brand_bg_class[ribbed-steel]/style,metro-,bg- ribbed-;"
|
|
|
data-vis-attrs2="label_set;label_temp;label_drive;label_humidity;"
|
|
|
data-vis-attrs3="group.slider;sliderColor/color;sliderCompleteColor/color;sliderMarkerColor/color;"
|
|
|
data-vis-attrs4="group.service;lowbat_oid/id;icon_lowbat[icon-battery]/style,iconFont,icon-,,Icon;controlmode_oid/id;icon_control_mode_0[icon-clock]/style,iconFont,icon-,,Icon;icon_control_mode_1[icon-radio-unchecked]/style,iconFont,icon-,,Icon;icon_control_mode_2[icon-briefcase]/style,iconFont,icon-,,Icon;windowopen_oid/id;icon_windowopen[icon-enter]/style,iconFont,icon-,,Icon;badge_bg_class[]/style,metro-,bg-;"
|
|
|
data-vis-set="metro"
|
|
|
data-vis-type="ctrl,heating"
|
|
|
data-vis-name="Tile Heating">
|
|
|
<% // some data processing to prepare the data
|
|
|
var size_badge = 0;
|
|
|
|
|
|
if (this.data.attr('controlmode_oid')) size_badge++;
|
|
|
if (this.data.attr('windowopen_oid')) size_badge++;
|
|
|
if (this.data.attr('lowbat_oid')) size_badge++;
|
|
|
%>
|
|
|
<div id="<%= this.data.attr('wid') %>" class="vis-widget" style="width:287px; height: 136px; padding: 3px;" <%= (el) -> vis.preloadImages(['widgets/metro/img/light_light_dim_100.png','widgets/metro/img/light_light_dim_90.png','widgets/metro/img/light_light_dim_80.png','widgets/metro/img/light_light_dim_70.png','widgets/metro/img/light_light_dim_60.png','widgets/metro/img/light_light_dim_50.png','widgets/metro/img/light_light_dim_40.png','widgets/metro/img/light_light_dim_30.png','widgets/metro/img/light_light_dim_20.png','widgets/metro/img/light_light_dim_10.png','widgets/metro/img/light_light_dim.png']); %>>
|
|
|
<div style="width: 100%; height: 100%" class="metro vis-widget-body <%== this.data.attr('class') %>" >
|
|
|
<div style="width: 100%; height: 100%;" id="metroTile_<%= this.data.attr('wid') %>" class="tile <%= this.data.attr('hover') ? 'hover ' : '' %><%= this.data.attr('bg_class') %>">
|
|
|
<div class="tile-content">
|
|
|
<div style="float:left; height: 90px;">
|
|
|
<img width="90px" src="widgets/metro/img/sani_heating_temp.png"/>
|
|
|
</div>
|
|
|
<div style="float: right; padding-top: 16px; padding-right: 12px;">
|
|
|
<table style="color:white;font-size:11px;display:inline-block;">
|
|
|
<% if (this.data.attr('set_oid')) { %>
|
|
|
<tr><td><%== this.data.attr('label_set') ? this.data.attr('label_set') : _('Set temperature') %>:</td><td><%= vis.binds.metro.format(vis.states.attr(this.data.attr('set_oid') + '.val'), '°') %></td></tr>
|
|
|
<% } %>
|
|
|
<% if (this.data.attr('temp_oid')) { %>
|
|
|
<tr><td><%== this.data.attr('label_temp') ? this.data.attr('label_temp') : _('Actual temp.') %>:</td><td><%= vis.binds.metro.format(vis.states.attr(this.data.attr('temp_oid') + '.val'), '°') %></td></tr>
|
|
|
<% } %>
|
|
|
<% if (this.data.attr('drive_oid')) { %>
|
|
|
<tr><td><%== this.data.attr('label_drive') ? this.data.attr('label_drive') : _('Valve position') %>:</td><td><%= vis.binds.metro.format(vis.states.attr(this.data.attr('drive_oid') + '.val'), '%') %></td></tr>
|
|
|
<% } %>
|
|
|
<% if (this.data.attr('hum_oid')) { %>
|
|
|
<tr><td><%== this.data.attr('label_humidity') ? this.data.attr('label_humidity') : _('Humidity') %>:</td><td><%= vis.binds.metro.format(vis.states.attr(this.data.attr('hum_oid') + '.val'), '%') %></td></tr>
|
|
|
<% } %>
|
|
|
</table>
|
|
|
</div>
|
|
|
<div style="clear: both; margin: 0 12px;" data-oid="<%= this.data.attr('set_oid') %>" data-oid-working="<%= this.data.attr('oid-working') %>" id="metroSlider_<%= this.data.attr('wid') %>" class="slider" data-role="slider"></div>
|
|
|
<div <%= (el) -> vis.binds.metro.slider(el, {color: data.sliderColor, completeColor: data.sliderCompleteColor, markerColor: data.sliderMarkerColor, max: (data.max === '' || data.max === undefined || data.max === null) ? 30 : data.max, min: (data.min === '' || data.min === undefined || data.min === null) ? 6 : data.min, step: parseFloat(data.step) || 0.1, hideIfNoOid: true}) %>></div>
|
|
|
</div>
|
|
|
<div class="brand <%= this.data.attr("brand_bg_class") %>">
|
|
|
<span class="label fg-white"><%= this.data.attr("label") %></span>
|
|
|
<% if (size_badge > 0) { %>
|
|
|
<div class="badge <%= this.data.attr('badge_bg_class') %>" style="width: <%= size_badge * 19 %>px">
|
|
|
<% if (this.data.attr('controlmode_oid')) { %>
|
|
|
<i class="<%= this.data.attr('icon_control_mode_' + vis.states.attr(this.data.attr('controlmode_oid') + '.val')) %>" style="padding: 0 1px;"></i>
|
|
|
<% } %>
|
|
|
<% if (this.data.attr('lowbat_oid')) { %>
|
|
|
<i class="<%= (vis.states.attr(this.data.attr('lowbat_oid') + '.val') === true || vis.states.attr(this.data.attr('lowbat_oid') + '.val') === 'true' || vis.states.attr(this.data.attr('lowbat_oid') + '.val') == 1) ? this.data.attr('icon_lowbat') : 'metro-invisible' %>" style="padding: 0 1px;"></i>
|
|
|
<% } %>
|
|
|
<% if (this.data.attr('windowopen_oid')) { %>
|
|
|
<i class="<%= (vis.states.attr(this.data.attr('windowopen_oid') + '.val') === true || vis.states.attr(this.data.attr('windowopen_oid') + '.val') === 'true' || vis.states.attr(this.data.attr('windowopen_oid') + '.val') == 1) ? this.data.attr('icon_windowopen') : 'metro-invisible' %>" style="padding: 0 1px;"></i>
|
|
|
<% } %>
|
|
|
</div>
|
|
|
<% } %>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div <%= (el) -> vis.binds.metro.tile(el, data.transform) %><%= (el) -> vis.binds.metro.inputControl(el) %>></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</script>
|
|
|
|
|
|
<script id="tplMetroTileHeatingDialog"
|
|
|
type="text/ejs"
|
|
|
class="vis-tpl"
|
|
|
data-vis-prev='<div id="prev_tplMetroTileHeatingDialog" style=" position: relative; text-align: initial;padding: 4px "><div class="vis-widget_prev vis-widget-lock" style="width: 120px; height: 120px; padding: 3px;"> <div style="width: 100%; height: 100%" class="metro vis-widget-prev-body "> <div style="width: 100%; height: 100%;" class="tile hover bg-indigo"> <div class="tile-content" style="text-align: center"> <img width="105px" src="widgets/metro/img/sani_heating_temp.png"> </div> <div style="color:white; font-size:11px; margin-top: 84px; padding-left: 12px;"> Target: °C, Actual: °C </div> <div class="brand "> <span class="label fg-white"></span> </div> </div> <div></div> <div></div> </div> </div>'
|
|
|
data-vis-attrs="set_oid/id/onHeatingOid;temp_oid/id;drive_oid/id;hover[true]/checkbox;transform[true]/checkbox;label;min[6]/slider,-20,40,1;max[30]/slider,-20,40,1;step;"
|
|
|
data-vis-attrs0="bg_class[bg-indigo]/style,metro-,bg- ribbed-;"
|
|
|
data-vis-attrs1="brand_bg_class[ribbed-steel]/style,metro-,bg- ribbed-;"
|
|
|
data-vis-attrs2="label_short_set;label_short_temp;label_short_drive;label_set;label_temp;label_drive;"
|
|
|
data-vis-attrs3="group.slider;sliderColor/color;sliderCompleteColor/color;sliderMarkerColor/color;"
|
|
|
data-vis-attrs4="group.dialog;dialog_flat/checkbox;dialog_shadow/checkbox;dialog_draggable[true]/checkbox;dialog_modal/checkbox"
|
|
|
data-vis-set="metro"
|
|
|
data-vis-type="ctrl,heating,dialog"
|
|
|
data-vis-name="Tile Heating Dialog">
|
|
|
<div id="<%= this.data.attr('wid') %>" class="vis-widget" style="width: 136px; height: 136px; padding: 3px;" <%= (el) -> vis.preloadImages(['widgets/metro/img/light_light_dim_100.png','widgets/metro/img/light_light_dim_90.png','widgets/metro/img/light_light_dim_80.png','widgets/metro/img/light_light_dim_70.png','widgets/metro/img/light_light_dim_60.png','widgets/metro/img/light_light_dim_50.png','widgets/metro/img/light_light_dim_40.png','widgets/metro/img/light_light_dim_30.png','widgets/metro/img/light_light_dim_20.png','widgets/metro/img/light_light_dim_10.png','widgets/metro/img/light_light_dim.png']); %>>
|
|
|
<div style="width: 100%; height: 100%" class="metro vis-widget-body <%== this.data.attr('class') %>" >
|
|
|
<div style="width: 100%; height: 100%;" id="metroTile_<%= this.data.attr('wid') %>" class="tile <%= this.data.attr('hover') ? 'hover ' : '' %><%= this.data.attr('bg_class') %>">
|
|
|
<div class="tile-content" style="text-align: center">
|
|
|
<img width="105px" src="widgets/metro/img/sani_heating_temp.png"/>
|
|
|
</div>
|
|
|
<div style="color:white; font-size:11px; margin-top: 84px; padding-left: 12px;">
|
|
|
<%== this.data.attr('set_oid') ? ( (this.data.attr('label_short_set') ? this.data.attr('label_short_set') : _('Target')) + ': ' + vis.binds.metro.format(vis.states.attr(this.data.attr('set_oid') + '.val'), '°')) : '' %>
|
|
|
<%== this.data.attr('temp_oid') ? (' ' + (this.data.attr('label_short_temp') ? this.data.attr('label_short_temp') : _('Actual')) + ': ' + vis.binds.metro.format(vis.states.attr(this.data.attr('temp_oid') + '.val'), '°')) : '' %>
|
|
|
<%== this.data.attr('drive_oid') ? (' ' + (this.data.attr('label_short_drive') ? this.data.attr('label_short_drive') : _('Valve position')) + ': ' + vis.binds.metro.format(vis.states.attr(this.data.attr('drive_oid') + '.val'), '%')) : '' %>
|
|
|
</div>
|
|
|
<div class="brand <%= this.data.attr("brand_bg_class") %>">
|
|
|
<span class="label fg-white"><%= this.data.attr("label") %></span>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div <%= (el) -> vis.binds.metro.tileDialogHeating(el, data.wid, data.set_oid, data.temp_oid, data.drive_oid, {title: data.label, flat: data.dialog_flat, shadow: data.dialog_shadow, overlay: data.dialog_modal, icon: data.dialog_icon_src, icon_class: data.dialog_icon_class, draggable: data.dialog_draggable, width: 300, height: 180, label_set: this.data.attr('label_set'), label_temp: this.data.attr('label_temp'), label_drive: this.data.attr('label_drive')}, {color: data.sliderColor, completeColor: data.sliderCompleteColor, markerColor: data.sliderMarkerColor, max: data.max, min: data.min, step: parseFloat(data.step)}); %>></div>
|
|
|
<div <%= (el) -> vis.binds.metro.tile(el, data.transform) %>></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</script>
|
|
|
|
|
|
<script id="tplMetroTileDialogStatic"
|
|
|
type="text/ejs"
|
|
|
class="vis-tpl"
|
|
|
data-vis-prev='<div id="prev_tplMetroTileDialogStatic" style=" position: relative; text-align: initial;padding: 4px "><div class="vis-widget_prev vis-widget-lock" style="width: 120px; height: 120px; padding: 3px;"> <div style="width: 100%; height: 100%" class="metro vis-widget-prev-body "> <div style="width: 100%; height: 100%;" class="tile hover bg-indigo"> <div class="tile-content fg-white icon"> <i class="icon-home"></i> </div> <div class="brand "> <span class="label fg-white"></span> <div class="badge "><i class=""></i></div> </div> </div> <div style="padding: 42px 10px 10px;"> <div class="caption"></div> <div class="content"></div></div> </div> <div></div> </div>'
|
|
|
data-vis-attrs="label;content_oid/id;hover[true]/checkbox;transform[true]/checkbox;"
|
|
|
data-vis-attrs0="bg_class[bg-indigo]/style,metro-,bg- ribbed-;"
|
|
|
data-vis-attrs1="group.icon;icon_src/image;icon_width/slider,0,100,1;icon_height/slider,0,100,1;icon_top/slider,0,100,1;icon_left/slider,0,100,1;icon_class[]/style,iconFont,icon-,,Icon ;"
|
|
|
data-vis-attrs2="group.badge;icon_badge[]/style,iconFont,icon-,,Icon ;"
|
|
|
data-vis-attrs3="badge_bg_class[]/style,metro-,bg-;"
|
|
|
data-vis-attrs4="brand_bg_class[ribbed-steel]/style,metro-,bg- ribbed-;"
|
|
|
data-vis-attrs5="group.dialog;html/html;dialog_width;dialog_height;dialog_title;dialog_flat/checkbox;dialog_shadow/checkbox;dialog_draggable[true]/checkbox;dialog_modal/checkbox;dialog_icon_src/image;dialog_icon_class[]/style,iconFont,icon-,,Icon ;"
|
|
|
data-vis-set="metro"
|
|
|
data-vis-type="ctrl,dialog"
|
|
|
data-vis-name="static - Tile Dialog">
|
|
|
<div id="<%= this.data.attr('wid') %>" class="vis-widget" style="width: 136px; height: 136px; padding: 3px;">
|
|
|
<div style="width: 100%; height: 100%" class="metro vis-widget-body <%== this.data.attr('class') %>" >
|
|
|
<div style="width: 100%; height: 100%;" id="metroTile_<%= this.data.attr('wid') %>" class="tile <%= this.data.attr('hover') ? 'hover ' : '' %><%= this.data.attr('bg_class') %>" >
|
|
|
<div class="tile-content fg-white icon <%= this.data.attr("icon_class") ? '' : 'icon-custom' %>">
|
|
|
<%== this.data.attr("icon_src") ? '<img style="position: absolute;' + (this.data.attr('icon_top') ? ('top:' + this.data.attr('icon_top') + '%;') : '') + (this.data.attr('icon_left') ? ('left:' + this.data.attr('icon_left') + '%;') : '') + (this.data.attr('icon_width') ? ('width:' + this.data.attr('icon_width') + '%;') : '') + (this.data.attr('icon_height') ? ('height:' + this.data.attr('icon_height') + '%;') : '') + '" src="' + this.data.attr("icon_src") + '"/>' : '' %>
|
|
|
<i class="<%= this.data.attr("icon_class") %>"></i>
|
|
|
<%== this.data.attr('content_oid') ? vis.states.attr(this.data.content_oid + '.val') : '' %>
|
|
|
</div>
|
|
|
<div class="brand <%= this.data.attr("brand_bg_class") %>">
|
|
|
<span class="label fg-white"><%= this.data.attr("label") %></span>
|
|
|
<div class="badge <%= this.data.attr("badge_bg_class") %>"><i class="<%= this.data.attr("icon_badge") %>"></i></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div <%= (el) -> vis.binds.metro.tileDialog(el, data.wid, null, {title: data.dialog_title,flat:data.dialog_flat,shadow:data.dialog_shadow,overlay: data.dialog_modal, icon: data.dialog_icon_src, icon_class: data.dialog_icon_class, draggable: data.dialog_draggable, width: data.dialog_width, height: data.dialog_height}, data.html) %> style="padding: 42px 10px 10px;">
|
|
|
<div class="caption"></div>
|
|
|
<div class="content"></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div <%= (el) -> vis.binds.metro.tile(el, data.transform) %>></div>
|
|
|
</div>
|
|
|
</script>
|
|
|
|
|
|
<script id="tplMetroTileStaticDialogNumber"
|
|
|
type="text/ejs"
|
|
|
class="vis-tpl"
|
|
|
data-vis-prev='<div id="prev_tplMetroTileStaticDialogNumber" style=" position: relative; text-align: initial;padding: 4px "><div class="vis-widget_prev " style="width: 120px; height: 120px; padding: 3px; z-index: 0;"> <div style="width: 100%; height: 100%" class="metro vis-widget-prev-body "> <div style="width: 100%; height: 100%;" class="tile hover bg-indigo"> <div class="tile-content icon"> <i class="icon-book"></i> </div> <div class="brand bg-orange"> <span class="label fg-white"></span> <div style="display: none;" class="badge "></div> </div> </div> <div style="padding: 42px 10px 10px;"> <div class="caption"></div> <div class="content"></div></div> </div> <div></div> </div>'
|
|
|
data-vis-attrs="content_oid/id;number_oid/id;hide_on_0/checkbox;hover[true]/checkbox;transform[true]/checkbox;bg_class[bg-indigo]/style,metro-,bg- ribbed-;"
|
|
|
data-vis-attrs0="group.icon;icon_src/image;icon_width/slider,0,100,1;icon_height/slider,0,100,1;icon_top/slider,0,100,1;icon_left/slider,0,100,1;icon_class[icon-pictures]/style,iconFont,icon-,,Icon ;"
|
|
|
data-vis-attrs1="group.badge;label;badge_bg_class[]/style,metro-,bg-;brand_bg_class[ribbed-steel]/style,metro-,bg- ribbed-;"
|
|
|
data-vis-attrs2="group.dialog;html/html;dialog_width;dialog_height;dialog_title;dialog_flat/checkbox;dialog_shadow/checkbox;dialog_draggable[true]/checkbox;dialog_modal/checkbox;dialog_icon_src/image;dialog_icon_class[]/style,iconFont,icon-,,Icon ;"
|
|
|
data-vis-set="metro"
|
|
|
data-vis-type="static,dialog"
|
|
|
data-vis-name="Tile Dialog / val - Badge Number">
|
|
|
<div id="<%= this.data.attr('wid') %>" class="vis-widget" style="width: 136px; height: 136px; padding: 3px;">
|
|
|
<div style="width: 100%; height: 100%" class="metro vis-widget-body <%== this.data.attr('class') %>" >
|
|
|
<div style="width: 100%; height: 100%;" id="metroTile_<%= this.data.attr('wid') %>" class="tile <%= this.data.attr('hover') ? 'hover ' : '' %> <%= this.data.attr('bg_class') %>" >
|
|
|
<div class="tile-content icon <%= this.data.attr("icon_class") ? '' : 'icon-custom' %>">
|
|
|
<%== this.data.attr("icon_src") ? '<img style="position: absolute;' + (this.data.attr('icon_top') ? ('top:' + this.data.attr('icon_top') + '%;') : '') + (this.data.attr('icon_left') ? ('left:' + this.data.attr('icon_left') + '%;') : '') + (this.data.attr('icon_width') ? ('width:' + this.data.attr('icon_width') + '%;') : '') + (this.data.attr('icon_height') ? ('height:' + this.data.attr('icon_height') + '%;') : '') + '" src="' + this.data.attr("icon_src") + '"/>' : '' %>
|
|
|
<i class="<%= this.data.attr("icon_class") %>"></i>
|
|
|
<%== this.data.attr('content_oid') ? vis.states.attr(this.data.content_oid + '.val') : '' %>
|
|
|
</div>
|
|
|
<div class="brand <%= this.data.attr("brand_bg_class") %>">
|
|
|
<span class="label fg-white"><%= this.data.attr("label") %></span>
|
|
|
<div style="<%= vis.states.attr(this.data.number_oid + '.val') > 0 ? '' : 'display:none;' %>" class="badge <%= this.data.attr("badge_bg_class") %>"><%= vis.states.attr(this.data.number_oid + '.val') %></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div <%= (el) -> vis.binds.metro.tileDialog(el, data.wid, null, {title:data.dialog_title,flat:data.dialog_flat,shadow:data.dialog_shadow,overlay:data.dialog_modal,icon:data.dialog_icon_src,icon_class:data.dialog_icon_class,draggable:data.dialog_draggable,width:data.dialog_width,height:data.dialog_height}, data.html) %> style="padding: 42px 10px 10px;">
|
|
|
<div class="caption"></div>
|
|
|
<div class="content"></div></div>
|
|
|
</div>
|
|
|
<div <%= (el) -> vis.binds.metro.tile(el, data.transform) %>></div>
|
|
|
</div>
|
|
|
</script>
|
|
|
|
|
|
<script id="tplMetroTileDialogString"
|
|
|
type="text/ejs"
|
|
|
class="vis-tpl"
|
|
|
data-vis-prev='<div id="prev_tplMetroTileDialogString" style="position: relative; text-align: initial;padding: 4px "><div class="vis-widget_prev ui-draggable-handle " style="width: 120px; height: 120px; padding: 3px;"> <div style="width: 100%; height: 100%" class="metro vis-widget-prev-body "> <div style="width: 100%; height: 100%;" class="tile hover bg-indigo"> <div class="tile-content icon"> <i class="icon-film"></i> </div> <div class="brand ribbed-steel"> <span class="label fg-white">Dialog Object</span> <div class="badge "><i class=""></i></div> </div> </div> <div style="padding: 42px 10px 10px;"> <div class="caption"></div> <div class="content"></div></div> </div> </div></div>'
|
|
|
data-vis-attrs="content_oid/id;dialog_oid/id;hover[true]/checkbox;transform[true]/checkbox;bg_class[bg-indigo]/style,metro-,bg- ribbed-;"
|
|
|
data-vis-attrs0="group.icon;icon_src/image;icon_width/slider,0,100,1;icon_height/slider,0,100,1;icon_top/slider,0,100,1;icon_left/slider,0,100,1;icon_class[]/style,iconFont,icon-,,Icon ;"
|
|
|
data-vis-attrs1="group.badge;label;icon_badge[]/style,iconFont,icon-,,Icon ;badge_bg_class[]/style,metro-,bg-;brand_bg_class[ribbed-steel]/style,metro-,bg- ribbed-;"
|
|
|
data-vis-attrs2="group.dialog;dialog_fontSize[12px];dialog_padding[0px 0px 0px 0px];dialog_textAlign;dialog_width;dialog_height;dialog_title;dialog_flat/checkbox;dialog_shadow/checkbox;dialog_draggable[true]/checkbox;dialog_modal/checkbox;dialog_icon_src/image;dialog_icon_class[]/style,iconFont,icon-,,Icon ;"
|
|
|
data-vis-set="metro"
|
|
|
data-vis-type="val,dialog"
|
|
|
data-vis-name="Tile Dialog">
|
|
|
<div id="<%= this.data.attr('wid') %>" class="vis-widget" style="width: 136px; height: 136px; padding: 3px;">
|
|
|
<div style="width: 100%; height: 100%" class="metro vis-widget-body <%== this.data.attr('class') %>" >
|
|
|
|
|
|
<div style="width: 100%; height: 100%;" id="metroTile_<%= this.data.attr('wid') %>" class="tile <%= this.data.attr('hover') ? 'hover ' : '' %><%= this.data.attr('bg_class') %>" >
|
|
|
<div class="tile-content icon <%= this.data.attr("icon_class") ? '' : 'icon-custom' %>">
|
|
|
<%== this.data.attr("icon_src") ? '<img style="position: absolute;' + (this.data.attr('icon_top') ? ('top:' + this.data.attr('icon_top') + '%;') : '') + (this.data.attr('icon_left') ? ('left:' + this.data.attr('icon_left') + '%;') : '') + (this.data.attr('icon_width') ? ('width:' + this.data.attr('icon_width') + '%;') : '') + (this.data.attr('icon_height') ? ('height:' + this.data.attr('icon_height') + '%;') : '') + '" src="' + this.data.attr("icon_src") + '"/>' : '' %>
|
|
|
<i class="<%= this.data.attr("icon_class") %>"></i>
|
|
|
<%== this.data.attr('content_oid') ? vis.states.attr(this.data.content_oid + '.val') : '' %>
|
|
|
</div>
|
|
|
<div class="brand <%= this.data.attr("brand_bg_class") %>">
|
|
|
<span class="label fg-white"><%= this.data.attr("label") %></span>
|
|
|
<div class="badge <%= this.data.attr("badge_bg_class") %>"><i class="<%= this.data.attr("icon_badge") %>"></i></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div <%= (el) -> vis.binds.metro.tileDialogString(el, data.wid, data.dialog_oid, {title:data.dialog_title,flat:data.dialog_flat,shadow:data.dialog_shadow,overlay:data.dialog_modal,icon:data.dialog_icon_src,icon_class:data.dialog_icon_class,draggable:data.dialog_draggable,width:data.dialog_width,height:data.dialog_height},data.dialog_fontSize, data.dialog_padding, data.dialog_textAlign) %> style="padding: 42px 10px 10px;">
|
|
|
<div class="caption"></div>
|
|
|
<div class="content"></div></div>
|
|
|
</div>
|
|
|
<div <%= (el) -> vis.binds.metro.tile(el, data.transform) %>></div>
|
|
|
</div>
|
|
|
</script>
|
|
|
|
|
|
<script id="tplMetroTileStringDialogNumber"
|
|
|
type="text/ejs"
|
|
|
class="vis-tpl"
|
|
|
data-vis-prev='<div id="prev_tplMetroTileStringDialogNumber" style="position: relative; text-align: initial;padding: 4px "><div class="vis-widget_prev ui-draggable-handle " style="width: 120px; height: 120px; padding: 3px;"> <div style="width: 100%; height: 100%" class="metro vis-widget-prev-body "> <div style="width: 100%; height: 100%;"class="tile hover bg-indigo"> <div class="tile-content icon"> <i class="icon-film"></i> </div> <div class="brand ribbed-steel"> <span class="label fg-white">Dialog Object</span> <div class="badge bg-cyan">1</div> </div> </div> <div style="padding: 42px 10px 10px;"> <div class="caption"></div> <div class="content"></div></div> </div> </div></div>'
|
|
|
data-vis-attrs="content_oid/id;dialog_oid/id;number_oid/id;hide_on_0/checkbox;hover[true]/checkbox;transform[true]/checkbox;bg_class[bg-indigo]/style,metro-,bg- ribbed-;"
|
|
|
data-vis-attrs0="group.icon;icon_src/image;icon_width/slider,0,100,1;icon_height/slider,0,100,1;icon_top/slider,0,100,1;icon_left/slider,0,100,1;icon_class[icon-database]/style,iconFont,icon-,,Icon ;"
|
|
|
data-vis-attrs1="group.badge;label;badge_bg_class[]/style,metro-,bg-;brand_bg_class[ribbed-steel]/style,metro-,bg- ribbed-;"
|
|
|
data-vis-attrs2="group.dialog;dialog_fontSize[12px];dialog_padding[0px 0px 0px 0px];dialog_textAlign;dialog_width;dialog_height;dialog_title;dialog_flat/checkbox;dialog_shadow/checkbox;dialog_draggable[true]/checkbox;dialog_modal/checkbox;dialog_icon_src/image;dialog_icon_class[]/style,iconFont,icon-,,Icon ;"
|
|
|
data-vis-set="metro"
|
|
|
data-vis-type="val,dialog"
|
|
|
data-vis-name="Tile Dialog / Badge Number">
|
|
|
<div id="<%= this.data.attr('wid') %>" class="vis-widget" style="width: 136px; height: 136px; padding: 3px;">
|
|
|
<div style="width: 100%; height: 100%" class="metro vis-widget-body <%== this.data.attr('class') %>" >
|
|
|
<div style="width: 100%; height: 100%;" id="metroTile_<%= this.data.attr('wid') %>" class="tile <%= this.data.attr('hover') ? 'hover ' : '' %><%= this.data.attr('bg_class') %>" >
|
|
|
<div class="tile-content icon <%= this.data.attr("icon_class") ? '' : 'icon-custom' %>">
|
|
|
<%== this.data.attr("icon_src") ? '<img style="position: absolute;' + (this.data.attr('icon_top') ? ('top:' + this.data.attr('icon_top') + '%;') : '') + (this.data.attr('icon_left') ? ('left:' + this.data.attr('icon_left') + '%;') : '') + (this.data.attr('icon_width') ? ('width:' + this.data.attr('icon_width') + '%;') : '') + (this.data.attr('icon_height') ? ('height:' + this.data.attr('icon_height') + '%;') : '') + '" src="' + this.data.attr("icon_src") + '"/>' : '' %>
|
|
|
<i class="<%= this.data.attr("icon_class") %>"></i>
|
|
|
<%== this.data.attr('content_oid') ? vis.states.attr(this.data.content_oid + '.val') : '' %>
|
|
|
</div>
|
|
|
<div class="brand <%= this.data.attr("brand_bg_class") %>">
|
|
|
<span class="label fg-white"><%= this.data.attr("label") %></span>
|
|
|
<div style="<%= vis.states.attr(this.data.number_oid + '.val') > 0 ? '' : 'display:none;' %>" class="badge <%= this.data.attr("badge_bg_class") %>"><%= vis.states.attr(this.data.number_oid + '.val') %></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div <%= (el) -> vis.binds.metro.tileDialogString(el, data.wid, data.dialog_oid, {title:data.dialog_title,flat:data.dialog_flat,shadow:data.dialog_shadow,overlay:data.dialog_modal,icon:data.dialog_icon_src,icon_class:data.dialog_icon_class,draggable:data.dialog_draggable,width:data.dialog_width,height:data.dialog_height},data.dialog_fontSize,data.dialog_padding,data.dialog_textAlign) %> style="padding: 42px 10px 10px;">
|
|
|
<div class="caption"></div>
|
|
|
<div class="content"></div></div>
|
|
|
</div>
|
|
|
<div <%= (el) -> vis.binds.metro.tile(el, data.transform) %>></div>
|
|
|
</div>
|
|
|
</script>
|
|
|
|
|
|
<script id="tplMetroTileDialog"
|
|
|
type="text/ejs"
|
|
|
class="vis-tpl"
|
|
|
data-vis-prev='<div id="prev_tplMetroTileDialog" style="position: relative; text-align: initial;padding: 4px "><div class="vis-widget_prev ui-draggable-handle " style="width: 120px; height: 120px; padding: 3px;"> <div style="width: 100%; height: 100%" class="metro vis-widget-prev-body "> <div style="width: 100%; height: 100%;" class="tile hover bg-indigo"> <div class="tile-content icon"> <i class="icon-pictures"></i> </div> <div class="brand ribbed-steel"> <span class="label fg-white">View Container</span> <div class="badge "><i class=""></i></div> </div> </div> <div style="padding: 42px 10px 10px;"> <div class="caption"></div> <div class="content"></div> </div> </div> </div></div>'
|
|
|
data-vis-attrs="contains_view/views;hover[true]/checkbox;transform[true]/checkbox;"
|
|
|
data-vis-attrs0="bg_class[bg-indigo]/style,metro-,bg- ribbed-;"
|
|
|
data-vis-attrs1="group.icon;icon_src/image;icon_width/slider,0,100,1;icon_height/slider,0,100,1;icon_top/slider,0,100,1;icon_left/slider,0,100,1;"
|
|
|
data-vis-attrs2="icon_class[icon-pictures]/style,iconFont,icon-,,Icon ;"
|
|
|
data-vis-attrs3="group.badge;label;icon_badge[]/style,iconFont,icon-,,Icon ;"
|
|
|
data-vis-attrs4="badge_bg_class[]/style,metro-,bg-;"
|
|
|
data-vis-attrs5="brand_bg_class[ribbed-steel]/style,metro-,bg- ribbed-;"
|
|
|
data-vis-attrs6="group.dialog;dialog_width;dialog_height;dialog_title;dialog_flat/checkbox;dialog_shadow/checkbox;dialog_draggable[true]/checkbox;dialog_modal/checkbox;dialog_icon_src/image;"
|
|
|
data-vis-attrs7="dialog_icon_class[]/style,iconFont,icon-,,Icon ;"
|
|
|
data-vis-set="metro"
|
|
|
data-vis-type="container,dialog"
|
|
|
data-vis-name="Tile Dialog">
|
|
|
<div id="<%= this.data.attr('wid') %>" class="vis-widget" style="width: 136px; height: 136px; padding: 3px;">
|
|
|
<div style="width: 100%; height: 100%" class="metro vis-widget-body <%== this.data.attr('class') %>" >
|
|
|
<div style="width: 100%; height: 100%;" id="metroTile_<%= this.data.attr('wid') %>" class="tile <%= this.data.attr('hover') ? 'hover ' : '' %><%= this.data.attr('bg_class') %>" >
|
|
|
<div class="tile-content icon <%= this.data.attr("icon_class") ? '' : 'icon-custom' %>">
|
|
|
<%== this.data.attr("icon_src") ? '<img style="position: absolute;' + (this.data.attr('icon_top') ? ('top:' + this.data.attr('icon_top') + '%;') : '') + (this.data.attr('icon_left') ? ('left:' + this.data.attr('icon_left') + '%;') : '') + (this.data.attr('icon_width') ? ('width:' + this.data.attr('icon_width') + '%;') : '') + (this.data.attr('icon_height') ? ('height:' + this.data.attr('icon_height') + '%;') : '') + '" src="' + this.data.attr("icon_src") + '"/>' : '' %>
|
|
|
<i class="<%= this.data.attr("icon_class") %>"></i>
|
|
|
</div>
|
|
|
<div class="brand <%= this.data.attr("brand_bg_class") %>">
|
|
|
<span class="label fg-white"><%= this.data.attr("label") %></span>
|
|
|
<div class="badge <%= this.data.attr("badge_bg_class") %>"><i class="<%= this.data.attr("icon_badge") %>"></i></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div <%= (el) -> vis.binds.metro.tileDialog(el, data.wid, data.contains_view, {title:data.dialog_title,flat:data.dialog_flat,shadow:data.dialog_shadow,overlay:data.dialog_modal,icon:data.dialog_icon_src,icon_class:data.dialog_icon_class,draggable:data.dialog_draggable,width:data.dialog_width,height:data.dialog_height}) %> style="padding: 42px 10px 10px;">
|
|
|
<div class="caption"></div>
|
|
|
<div class="content"></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div <%= (el) -> vis.binds.metro.tile(el, data.transform) %>></div>
|
|
|
</div>
|
|
|
</script>
|
|
|
|
|
|
<script id="tplMetroTileDialogNumber"
|
|
|
type="text/ejs"
|
|
|
data-vis-prev='<div id="prev_tplMetroTileDialogNumber" style="position: relative; text-align: initial;padding: 4px"><div class="vis-widget_prev ui-draggable-handle " style="width: 120px; height: 120px; padding: 3px;"> <div style="width: 100%; height: 100%" class="metro vis-widget-prev-body "> <div style="width: 100%; height: 100%;" class="tile hover bg-indigo"> <div class="tile-content icon"> <i class="icon-pictures"></i> </div> <div class="brand ribbed-steel"> <span class="label fg-white">Dialog num</span> <div class="badge bg-teal">2</div> </div> </div> <div style="padding: 42px 10px 10px;"> <div class="caption"></div> <div class="content"></div> </div> </div> </div></div>'
|
|
|
data-vis-attrs="contains_view/views;number_oid/id;hide_on_0/checkbox;hover[true]/checkbox;transform[true]/checkbox;"
|
|
|
data-vis-attrs0="bg_class[]/style,metro-,bg- ribbed-;"
|
|
|
data-vis-attrs1="group.icon;icon_src/image;icon_width/slider,0,100,1;icon_height/slider,0,100,1;icon_top/slider,0,100,1;icon_left/slider,0,100,1;icon_class[]/style,iconFont,icon-,,Icon ;"
|
|
|
data-vis-attrs2="group.badge;label;badge_bg_class[]/style,metro-,bg-;"
|
|
|
data-vis-attrs3="brand_bg_class[ribbed-steel]/style,metro-,bg- ribbed-;"
|
|
|
data-vis-attrs4="group.dialog;dialog_width;dialog_height;dialog_title;dialog_flat/checkbox;dialog_shadow/checkbox;dialog_draggable[true]/checkbox;dialog_modal/checkbox;dialog_icon_src/image;"
|
|
|
data-vis-attrs5="dialog_icon_class[]/style,iconFont,icon-,,Icon ;"
|
|
|
class="vis-tpl"
|
|
|
data-vis-set="metro"
|
|
|
data-vis-type="container,dialog"
|
|
|
data-vis-name="Tile Dialog / val - Badge Number">
|
|
|
<div id="<%= this.data.attr('wid') %>" class="vis-widget" style="width: 136px; height: 136px; padding: 3px;">
|
|
|
<div style="width: 100%; height: 100%" class="metro vis-widget-body <%== this.data.attr('class') %>" >
|
|
|
<div style="width: 100%; height: 100%;" id="metroTile_<%= this.data.attr('wid') %>" class="tile <%= this.data.attr('hover') ? 'hover ' : '' %><%= this.data.attr('bg_class') %>" >
|
|
|
<div class="tile-content icon <%= this.data.attr("icon_class") ? '' : 'icon-custom' %>">
|
|
|
<%== this.data.attr("icon_src") ? '<img style="position: absolute;' + (this.data.attr('icon_top') ? ('top:' + this.data.attr('icon_top') + '%;') : '') + (this.data.attr('icon_left') ? ('left:' + this.data.attr('icon_left') + '%;') : '') + (this.data.attr('icon_width') ? ('width:' + this.data.attr('icon_width') + '%;') : '') + (this.data.attr('icon_height') ? ('height:' + this.data.attr('icon_height') + '%;') : '') + '" src="' + this.data.attr("icon_src") + '"/>' : '' %>
|
|
|
<i class="<%= this.data.attr("icon_class") %>"></i>
|
|
|
</div>
|
|
|
<div class="brand <%= this.data.attr("brand_bg_class") %>">
|
|
|
<span class="label fg-white"><%= this.data.attr("label") %></span>
|
|
|
<div style="<%= vis.states.attr(this.data.number_oid + '.val') > 0 ? '' : 'display:none;' %>" class="badge <%= this.data.attr("badge_bg_class") %>"><%= vis.states.attr(this.data.number_oid + '.val') %></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div <%= (el) -> vis.binds.metro.tileDialog(el, data.wid, data.contains_view, {title:data.dialog_title,flat:data.dialog_flat,shadow:data.dialog_shadow,overlay:data.dialog_modal,icon:data.dialog_icon_src,icon_class:data.dialog_icon_class,draggable:data.dialog_draggable,width:data.dialog_width,height:data.dialog_height}) %> style="padding: 42px 10px 10px;">
|
|
|
<div class="caption"></div>
|
|
|
<div class="content"></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div <%= (el) -> vis.binds.metro.tile(el, data.transform) %>></div>
|
|
|
</div>
|
|
|
</script>
|
|
|
|
|
|
<script id="tplMetroTileFrameDialogNumber"
|
|
|
type="text/ejs"
|
|
|
class="vis-tpl"
|
|
|
data-vis-prev='<div id="prev_tplMetroTileFrameDialogNumber" style="position: relative; text-align: initial;padding: 4px "><div class="vis-widget_prev" style="width: 136px; height: 136px; padding: 3px;"> <div style="width: 100%; height: 100%" class="metro vis-widget-prev-body"> <div style="width: 100%; height: 100%;" class="tile hover bg-indigo"><div class="tile-content icon"><i class="icon-cloud"></i></div><div class="brand ribbed-steel"><span class="label fg-white">iFrame Dialog</span> <div style="" class="badge "></div> </div> </div> <div style="padding: 42px 10px 10px;"> <div class="caption"></div> <div class="content"></div></div> </div> </div></div>'
|
|
|
data-vis-attrs="content;hover[true]/checkbox;transform[true]/checkbox;bg_class[bg-indigo]/style,metro-,bg- ribbed-;group.icon;icon_src/image;icon_width/slider,0,100,1;icon_height/slider,0,100,1;icon_top/slider,0,100,1;icon_left/slider,0,100,1;icon_class[icon-accessibility]/style,iconFont,icon-,,Icon ;"
|
|
|
data-vis-attrs0="group.badge;label;badge_label;badge_bg_class[]/style,metro-,bg-;brand_bg_class[ribbed-steel]/style,metro-,bg- ribbed-;"
|
|
|
data-vis-attrs1="group.dialog;dialog_url[https:~~maps.google.com~maps?f=q&source=s_q&hl=de&geocode=&q=Karlsruhe&ie=UTF8&t=m&z=12&output=embed&iwloc=near];dialog_scroll;dialog_width[400px];dialog_height[300px];dialog_title[Google maps];dialog_flat[true]/checkbox;dialog_shadow[true]/checkbox;dialog_draggable[true]/checkbox;dialog_modal/checkbox;dialog_icon_src/image;dialog_icon_class[icon-globe]/style,iconFont,icon-,,Icon ;"
|
|
|
data-vis-set="metro"
|
|
|
data-vis-type="iframe,dialog"
|
|
|
data-vis-name="Tile Dialog / iFrame">
|
|
|
<div id="<%= this.data.attr('wid') %>" class="vis-widget" style="width: 136px; height: 136px; padding: 3px;">
|
|
|
<div style="width: 100%; height: 100%" class="metro vis-widget-body <%== this.data.attr('class') %>" >
|
|
|
<div style="width: 100%; height: 100%;" id="metroTile_<%= this.data.attr('wid') %>" class="tile <%= this.data.attr('hover') ? 'hover ' : '' %><%= this.data.attr('bg_class') %>" >
|
|
|
<div class="tile-content icon <%= this.data.attr("icon_class") ? '' : 'icon-custom' %>">
|
|
|
<%== this.data.attr("icon_src") ? '<img style="position: absolute;' + (this.data.attr('icon_top') ? ('top:' + this.data.attr('icon_top') + '%;') : '') + (this.data.attr('icon_left') ? ('left:' + this.data.attr('icon_left') + '%;') : '') + (this.data.attr('icon_width') ? ('width:' + this.data.attr('icon_width') + '%;') : '') + (this.data.attr('icon_height') ? ('height:' + this.data.attr('icon_height') + '%;') : '') + '" src="' + this.data.attr("icon_src") + '"/>' : '' %>
|
|
|
<i class="<%= this.data.attr("icon_class") %>"></i>
|
|
|
<%== this.data.attr('content') || '' %>
|
|
|
</div>
|
|
|
<div class="brand <%= this.data.attr("brand_bg_class") %>">
|
|
|
<span class="label fg-white"><%= this.data.attr('label') %></span>
|
|
|
<div style="" class="badge <%= this.data.attr('badge_bg_class') %>"><%= this.data.attr('badge_label') %></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div <%= (el) -> vis.binds.metro.tileDialog(el, data.wid, null, {title: data.dialog_title, flat: data.dialog_flat, shadow: data.dialog_shadow, overlay: data.dialog_modal, icon: data.dialog_icon_src, icon_class: data.dialog_icon_class, draggable: data.dialog_draggable, width: data.dialog_width, height: data.dialog_height, scroll: data.dialog_scroll}, data.dialog_url, true) %> style="padding: 42px 10px 10px;">
|
|
|
<div class="caption"></div>
|
|
|
<div class="content"></div></div>
|
|
|
</div>
|
|
|
<div <%= (el) -> vis.binds.metro.tile(el, data.transform) %>></div>
|
|
|
</div>
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
<script id="tplMetroTileToggleNumber"
|
|
|
type="text/ejs"
|
|
|
class="vis-tpl"
|
|
|
data-vis-prev='<div id="prev_tplMetroTileToggle" style="position: relative; text-align: initial;padding: 4px "><div class="vis-widget_prev vis-widget-lock" style="width: 120px; height: 120px; padding: 3px;"> <div style="width: 100%; height: 100%" class="metro vis-widget-prev-body " data-oid="dev1"> <div style="width: 100%; height: 100%;" class="tile hover bg-indigo"> <div class="tile-content icon"> <i class="icon-minus-2"></i> </div> <div class="brand ribbed-steel"> <span class="label fg-white">Toggle</span> <div class="badge bg-cyan"><i class="icon-minus"></i></div> </div> </div> </div> </div></div>'
|
|
|
data-vis-attrs="oid;number_oid/id;hide_on_0/checkbox;hover[true]/checkbox;transform[true]/checkbox;select_on_true/checkbox;label_false;label_true;"
|
|
|
data-vis-attrs0="bg_class_false[bg-indigo]/style,metro-,bg- ribbed-;"
|
|
|
data-vis-attrs1="bg_class_true[bg-teal]/style,metro-,bg- ribbed-;"
|
|
|
data-vis-attrs2="group.icon;icon_false/image;icon_true/image;icon_width/slider,0,100,1;icon_height/slider,0,100,1;icon_top/slider,0,100,1;icon_left/slider,0,100,1;"
|
|
|
data-vis-attrs3="icon_class_false[icon-minus]/style,iconFont,icon-,,Icon ;icon_class_true[icon-plus]/style,iconFont,icon-,,Icon ;"
|
|
|
data-vis-attrs4="group.badge;badge_bg_class[]/style,metro-,bg-;"
|
|
|
data-vis-attrs5="badge_bg_class_false[bg-cyan]/style,metro-,bg-;"
|
|
|
data-vis-attrs6="badge_bg_class_true[bg-teal]/style,metro-,bg-;"
|
|
|
data-vis-attrs7="brand_bg_class_false[ribbed-steel]/style,metro-,bg- ribbed-;"
|
|
|
data-vis-attrs8="brand_bg_class_true[ribbed-indigo]/style,metro-,bg- ribbed-;"
|
|
|
data-vis-attrs9="group.ccontrol;urlTrue;urlFalse;oidTrue/id;oidFalse/id;oidTrueValue;oidFalseValue;"
|
|
|
data-vis-set="metro"
|
|
|
data-vis-type="ctrl,bool"
|
|
|
data-vis-name="Tile Toggle - Bage Number">
|
|
|
<div id="<%= this.data.attr('wid') %>" class="vis-widget" style="width: 136px; height: 136px; padding: 3px;">
|
|
|
<div style="width: 100%; height: 100%"
|
|
|
class="metro vis-widget-body <%== this.data.attr('class') %>"
|
|
|
data-oid="<%= this.data.attr('oid') %>"
|
|
|
data-url-true="<%= this.data.attr('urlTrue') %>"
|
|
|
data-url-false="<%= this.data.attr('urlFalse') %>"
|
|
|
data-oid-true="<%= this.data.attr('oidTrue') %>"
|
|
|
data-oid-false="<%= this.data.attr('oidFalse') %>"
|
|
|
data-oid-true-value="<%= this.data.attr('oidTrueValue') %>"
|
|
|
data-oid-false-value="<%= this.data.attr('oidFalseValue') %>"
|
|
|
<%= (el) -> vis.binds.basic.toggle(el) %>
|
|
|
>
|
|
|
<div style="width: 100%; height: 100%;" id="metroTile_<%= this.data.attr('wid') %>" class="tile icon <%= this.data.attr('hover') ? 'hover ' : '' %><%= (vis.binds.metro.format(vis.states.attr(this.data.attr('oid') + '.val')) === '_true') && this.data.attr('select_on_true') ? 'selected' : '' %> <%= this.data.attr('bg_class' + vis.binds.metro.format(vis.states.attr(this.data.attr('oid') + '.val'))) %>" >
|
|
|
<div class="tile-content icon <%= this.data.attr('icon_class' + vis.binds.metro.format(vis.states.attr(this.data.attr('oid') + '.val'))) ? '' : 'icon-custom' %>">
|
|
|
<%== this.data.attr('icon' + vis.binds.metro.format(vis.states.attr(this.data.attr('oid') + '.val'))) ? '<img style="position: absolute;' + (this.data.attr('icon_top') ? ('top:' + this.data.attr('icon_top') + '%;') : '') + (this.data.attr('icon_left') ? ('left:' + this.data.attr('icon_left') + '%;') : '') + (this.data.attr('icon_width') ? ('width:' + this.data.attr('icon_width') + '%;') : '') + (this.data.attr('icon_height') ? ('height:' + this.data.attr('icon_height') + '%;') : '') + '" src="' + this.data.attr('icon' + vis.binds.metro.format(vis.states.attr(this.data.attr('oid') + '.val'))) + '"/>' : '' %>
|
|
|
<i class="<%= vis.states.attr(this.data.attr('oid') + '.val') ? this.data.attr("icon_class_true") : this.data.attr("icon_class_false") %>"></i>
|
|
|
</div>
|
|
|
<div class="brand <%= this.data.attr('brand_bg_class' + vis.binds.metro.format(vis.states.attr(this.data.attr('oid') + '.val'))) %>">
|
|
|
<span class="label fg-white"><%== this.data.attr('label' + vis.binds.metro.format(vis.states.attr(this.data.attr('oid') + '.val'))) %></span>
|
|
|
<div style="<%= vis.states.attr(this.data.number_oid + '.val') > 0 ? '' : 'display:none;' %>" class="badge <%= this.data.attr("badge_bg_class") %>"><%= vis.states.attr(this.data.number_oid + '.val') %></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div <%= (el) -> vis.binds.metro.tile(el, data.transform) %>></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</script>
|
|
|
|
|
|
<script id="tplMetroTileDimmerDialogactiv"
|
|
|
type="text/ejs"
|
|
|
data-vis-prev='<div id="prev_tplMetroTileDimmerDialog" style="position: relative; text-align: initial;padding: 4px "><div class="vis-widget_prev vis-widget-lock" style="width: 120px; height: 120px; padding: 3px;"> <div style="width: 100%; height: 100%" class="metro vis-widget-prev-body"> <div style="width: 100%; height: 100%;" class="tile hover bg-indigo"><div class="tile-content" style="text-align: center"><img width="90%" src="widgets/metro/img/light_light_dim.png"></div> <div class="brand ribbed-steel"><span class="label fg-white">Dimmer Dialog</span></div> </div><div style="padding: 42px 10px 10px;"></div></div></div></div>'
|
|
|
data-vis-attrs="oid;oid-working;min;max;step[1];digits/number;hover[true]/checkbox;transform[true]/checkbox;label;"
|
|
|
data-vis-attrs0="bg_class[bg-indigo]/style,metro-,bg- ribbed-;"
|
|
|
data-vis-attrs1="brand_bg_class[ribbed-steel]/style,metro-,bg- ribbed-;"
|
|
|
data-vis-attrs2="brand_bg_class_false[ribbed-steel]/style,metro-,bg- ribbed-;"
|
|
|
data-vis-attrs3="brand_bg_class_true[ribbed-indigo]/style,metro-,bg- ribbed-;"
|
|
|
data-vis-attrs4="group.slider;sliderColor/color;sliderCompleteColor/color;sliderMarkerColor/color;"
|
|
|
data-vis-attrs5="group.dialog;dialog_flat/checkbox;dialog_shadow/checkbox;dialog_draggable[true]/checkbox;dialog_modal/checkbox;autoclose/slider,0,30000,100;"
|
|
|
class="vis-tpl"
|
|
|
data-vis-set="metro"
|
|
|
data-vis-type="ctrl,dimmer,dialog"
|
|
|
data-vis-name="Tile Dimmer Dialog activ">
|
|
|
<div id="<%= this.data.attr('wid') %>" class="vis-widget" style="width: 136px; height: 136px; padding: 3px;" <%= (el) -> vis.preloadImages(['widgets/metro/img/light_light_dim_100.png','widgets/metro/img/light_light_dim_90.png','widgets/metro/img/light_light_dim_80.png','widgets/metro/img/light_light_dim_70.png','widgets/metro/img/light_light_dim_60.png','widgets/metro/img/light_light_dim_50.png','widgets/metro/img/light_light_dim_40.png','widgets/metro/img/light_light_dim_30.png','widgets/metro/img/light_light_dim_20.png','widgets/metro/img/light_light_dim_10.png','widgets/metro/img/light_light_dim.png']); %>>
|
|
|
<div style="width: 100%; height: 100%" class="metro vis-widget-body <%== this.data.attr('class') %>" >
|
|
|
|
|
|
<div style="width: 100%; height: 100%;" id="metroTile_<%= this.data.attr('wid') %>" class="tile <%= this.data.attr('hover') ? 'hover ' : '' %><%= this.data.attr('bg_class') %>">
|
|
|
<div class="tile-content" style="text-align: center">
|
|
|
<%
|
|
|
var str = vis.states.attr(this.data.oid + '.val');
|
|
|
var val = parseFloat(str);
|
|
|
if (str === true || str === 'true') val = 1;
|
|
|
if (isNaN(val)) val = 0;
|
|
|
|
|
|
var min = this.data.attr('min');
|
|
|
if (min !== undefined && min !== null && min !== '') {
|
|
|
min = parseFloat(min);
|
|
|
} else {
|
|
|
min = 0;
|
|
|
}
|
|
|
|
|
|
var max = this.data.attr('max');
|
|
|
if (max !== undefined && max !== null && max !== '') {
|
|
|
max = parseFloat(max);
|
|
|
} else {
|
|
|
max = 1;
|
|
|
}
|
|
|
|
|
|
val = (val - min) / (max - min);
|
|
|
|
|
|
if (val === 1) {
|
|
|
%>
|
|
|
<img width="90%" src="widgets/metro/img/light_light_dim_100.png"/>
|
|
|
<% } else if (val >= 0.9) { %>
|
|
|
<img width="90%" src="widgets/metro/img/light_light_dim_90.png"/>
|
|
|
<% } else if (val >= 0.8) { %>
|
|
|
<img width="90%" src="widgets/metro/img/light_light_dim_80.png"/>
|
|
|
<% } else if (val >= 0.7) { %>
|
|
|
<img width="90%" src="widgets/metro/img/light_light_dim_70.png"/>
|
|
|
<% } else if (val >= 0.6) { %>
|
|
|
<img width="90%" src="widgets/metro/img/light_light_dim_60.png"/>
|
|
|
<% } else if (val >= 0.5) { %>
|
|
|
<img width="90%" src="widgets/metro/img/light_light_dim_50.png"/>
|
|
|
<% } else if (val >= 0.4) { %>
|
|
|
<img width="90%" src="widgets/metro/img/light_light_dim_40.png"/>
|
|
|
<% } else if (val >= 0.3) { %>
|
|
|
<img width="90%" src="widgets/metro/img/light_light_dim_30.png"/>
|
|
|
<% } else if (val >= 0.2) { %>
|
|
|
<img width="90%" src="widgets/metro/img/light_light_dim_20.png"/>
|
|
|
<% } else if (val >= 0.1) { %>
|
|
|
<img width="90%" src="widgets/metro/img/light_light_dim_10.png"/>
|
|
|
<% } else if (val >= 0.01) { %>
|
|
|
<img width="90%" src="widgets/metro/img/light_light_dim_00.png"/>
|
|
|
<% } else { %>
|
|
|
<img width="90%" src="widgets/metro/img/light_light_dim.png"/>
|
|
|
<% } %>
|
|
|
</div>
|
|
|
|
|
|
<div class="brand <%= vis.states.attr(this.data.attr('oid') + '.val') > 0 ? this.data.attr("brand_bg_class_true") : this.data.attr("brand_bg_class_false") %>">
|
|
|
<span class="label fg-white"><%= this.data.attr("label") %></span>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div
|
|
|
<%= (el) -> vis.binds.metro.tileDialogSlider(el, data.wid, data.oid, data['oid-working'], {title: data.label, flat: data.dialog_flat, shadow: data.dialog_shadow, overlay: data.dialog_modal, icon: data.dialog_icon_src, icon_class: data.dialog_icon_class, draggable: data.dialog_draggable, width: 300, height: 180}, {min: data.min, max: data.max, step: parseFloat(data.step), color: data.sliderColor, completeColor: data.sliderCompleteColor, markerColor: data.sliderMarkerColor, digits: data.digits}) %> style="padding: 42px 10px 10px;">
|
|
|
</div>
|
|
|
<div <%= (el) -> vis.binds.metro.tile(el, data.transform) %>></div>
|
|
|
</div>
|
|
|
<div class="popup-helper" <%= (el) -> vis.binds.jqueryui.dialogAutoClose(el, data.attr('autoclose')) %> />
|
|
|
</div>
|
|
|
</script>
|
|
|
|
