2018-07-21 10:30:13 +08:00
|
|
|
<!--
|
|
|
|
|
yunkong2.vis JQuery widgets with MFD icons
|
|
|
|
|
|
|
|
|
|
version: "1.0.12"
|
|
|
|
|
|
|
|
|
|
Copyright 6'2014-2018 bluefox<dogafox@gmail.com>,
|
|
|
|
|
2014 hobbyquaker<hobbyquaker@ccu.io>
|
|
|
|
|
|
|
|
|
|
-->
|
|
|
|
|
<style type="text/css">
|
|
|
|
|
.hue-slider-hue.ui-slider {
|
|
|
|
|
background-image: url(widgets/jqui/img/hue.png);
|
|
|
|
|
background-size: 100%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.hue-slider-ct.ui-slider {
|
|
|
|
|
background-image: url(widgets/jqui/img/ct.png);
|
|
|
|
|
background-size: 100%;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
|
2018-10-31 15:51:51 +08:00
|
|
|
<script src="widgets/jqui-mfd/js/video.js"></script>
|
|
|
|
|
<link href="widgets/jqui-mfd/js/video-js.min.css" rel="stylesheet">
|
|
|
|
|
<script src="widgets/jqui-mfd/js/videojs-contrib-hls.js"></script>
|
|
|
|
|
<script>videojs.options.flash.swf = "widgets/jqui-mfd/js/video-js.swf";</script>
|
2018-10-31 15:15:11 +08:00
|
|
|
|
2018-07-21 10:30:13 +08:00
|
|
|
<script type="text/javascript">
|
|
|
|
|
'use strict';
|
|
|
|
|
|
|
|
|
|
if (vis.editMode) {
|
|
|
|
|
$.extend(systemDictionary, {
|
|
|
|
|
"autoclose": {"en": "Auto close", "de": "Auto-zu", "ru": "Автозакрытие"},
|
|
|
|
|
"modal": {"en": "Modal", "de": "Modal", "ru": "Модальное"},
|
|
|
|
|
"invert_state": {"en": "Invert state", "de": "Invertiere Zustand", "ru": "Инвертировать состояние"},
|
|
|
|
|
"asButton": {"en": "Button rectangle", "de": "Knopf-Viereck", "ru": "Фон кнопки"},
|
|
|
|
|
"icon_off": {"en": "Icon for OFF", "de": "Symbol für AUS", "ru": "Иконка для ВЫКЛ"},
|
|
|
|
|
"iconColor_off":{"en": "Icon color for OFF", "de": "Symbolfarbe für AUS", "ru": "Цвет иконки для ВЫКЛ"},
|
|
|
|
|
"icon_on": {"en": "Icon for ON", "de": "Symbol für AN", "ru": "Иконка для ВКЛ"},
|
|
|
|
|
"iconColor_on": {"en": "Icon color for ON", "de": "Symbolfarbe für AN", "ru": "Цвет иконки для ВКЛ"},
|
|
|
|
|
"closed_value": {"en": "Value for CLOSED", "de": "Wert für ZU", "ru": "Значение для ЗАКРЫТО"},
|
|
|
|
|
"tilted_value": {"en": "Value for TILTED", "de": "Wert für GEKIPPT", "ru": "Значение для ОТКИНУТО"},
|
|
|
|
|
"opened_value": {"en": "Value for OPENED", "de": "Wert für AUF", "ru": "Значение для ОТКРЫТО"},
|
|
|
|
|
"closed_icon": {"en": "Icon for CLOSED", "de": "Symbol für ZU", "ru": "Иконка для ЗАКРЫТО"},
|
|
|
|
|
"closed_iconColor":{"en": "Icon color for CLOSED", "de": "Symbolfarbe für ZU", "ru": "Цвет иконки для ЗАКРЫТО"},
|
|
|
|
|
"tilted_icon": {"en": "Icon for TILTED", "de": "Symbol für GEKIPPT", "ru": "Иконка для ОТКИНУТО"},
|
|
|
|
|
"tilted_iconColor":{"en": "Icon color for TILTED", "de": "Symbolfarbe für GEKIPPT", "ru": "Цвет иконки для ОТКИНУТО"},
|
|
|
|
|
"opened_icon": {"en": "Icon for OPENED", "de": "Symbol für AUF", "ru": "Иконка для ОТКРЫТО"},
|
|
|
|
|
"opened_iconColor":{"en": "Icon color for OPENED", "de": "Symbolfarbe für AUF", "ru": "Цвет иконки для ОТКРЫТО"},
|
|
|
|
|
"invert_value": {"en": "Invert value", "de": "Invertiere Wert", "ru": "Инвертировать значение"},
|
|
|
|
|
"show_active": {"en": "Show active background", "de": "Zeige aktiven Hintergrund", "ru": "Показать активный фон"},
|
|
|
|
|
"set_oid": {"en": "Set temperature ID", "de": "Soll-Temperature ID", "ru": "ID задаваемой температуры"},
|
|
|
|
|
"temp_oid": {"en": "Actual temperature ID", "de": "Ist-Temperature ID", "ru": "ID актуальной температуры"},
|
|
|
|
|
"drive_oid": {"en": "Valve position ID", "de": "VentilID", "ru": "ID Положения вентиля"},
|
|
|
|
|
"label_set": {"en": "Label for 'set'", "de": "Beschriftung für 'Soll'", "ru": "Надпись для 'задаваемой'"},
|
|
|
|
|
"label_temp": {"en": "Label for 'actual'", "de": "Beschriftung für 'Ist'", "ru": "Надпись для 'актуальной'"},
|
|
|
|
|
"label_drive": {"en": "Label for position", "de": "Beschriftung für Ventil", "ru": "Надпись для вентиля"},
|
|
|
|
|
"src_url": {"en": "Stream URL", "de": "Stream URL", "ru": "URL потока"},
|
|
|
|
|
"qtsrc_url": {"en": "Stream URL (qtsrc)", "de": "Stream URL (qtsrc)", "ru": "URL потока (qtsrc)"},
|
|
|
|
|
"type_application": {"en": "Application mime-type", "de": "Applikationstyp (mime)", "ru": "Тип приложения (mime)"},
|
|
|
|
|
"plugin": {"en": "Plug-in", "de": "Plugin", "ru": "Плагин"},
|
|
|
|
|
"autoplay": {"en": "Auto-play", "de": "Automatisch abspielen", "ru": "Автостарт"},
|
|
|
|
|
"url": {"en": "URL", "de": "URL", "ru": "URL"},
|
|
|
|
|
"interval": {"en": "Update interval(ms)", "de": "Update-Intervall(ms)", "ru": "Интервал обновления (мс)"},
|
|
|
|
|
"group_icons": {"en": "Icons", "de": "Symbole", "ru": "Иконки"},
|
|
|
|
|
"group_values": {"en": "Values", "de": "Werte", "ru": "Значения"},
|
|
|
|
|
"icon_interval": {"en": "Update interval(ms)", "de": "Updateintervall(ms)", "ru": "Интервал обновления (мс)"},
|
|
|
|
|
"iconColor": {"en": "Icon color", "de": "Symbolfarbe", "ru": "Цвет иконки"},
|
|
|
|
|
"group_images": {"en": "Icons", "de": "Symbole", "ru": "Картинки"},
|
|
|
|
|
"group_colors": {"en": "Icon colors (SVG)", "de": "Symbolfarben (SVG)", "ru": "Цвета картинки (SVG)"},
|
|
|
|
|
"icon0": {"en": "Icon 0%", "de": "Symbol für 0%", "ru": "Картинка для 0%"},
|
|
|
|
|
"iconColor0": {"en": "Icon color 0%", "de": "Symbolfarbe bei 0%", "ru": "Цвет для 0%"},
|
|
|
|
|
"iconValue0": {"en": "Icon value 0%", "de": "Symbolwert für 0%", "ru": "Значение для 0%"},
|
|
|
|
|
"iconValue0_tooltip": {
|
|
|
|
|
"en": "Icon value when defined picture must be shown",
|
|
|
|
|
"de": "Symbolwert bei welchem sollte das Bild erscheinen",
|
|
|
|
|
"ru": "Значение, когда должна появлятся эта иконка"
|
|
|
|
|
},
|
|
|
|
|
"icon1": {"en": "Icon 10%", "de": "Symbol für 10%", "ru": "Картинка 10%"},
|
|
|
|
|
"iconColor1": {"en": "Icon color 10%", "de": "Symbolfarbe bei 10%", "ru": "Цвет для 0%"},
|
|
|
|
|
"iconValue1": {"en": "Icon value 10%", "de": "Symbolwert für 10%", "ru": "Значение для 0%"},
|
|
|
|
|
"icon2": {"en": "Icon 20%", "de": "Symbol für 20%", "ru": "Картинка 20%"},
|
|
|
|
|
"iconColor2": {"en": "Icon color 20%", "de": "Symbolfarbe bei 20%", "ru": "Цвет для 0%"},
|
|
|
|
|
"iconValue2": {"en": "Icon value 20%", "de": "Symbolwert für 20%", "ru": "Значение для 0%"},
|
|
|
|
|
"icon3": {"en": "Icon 30%", "de": "Symbol für 30%", "ru": "Картинка 30%"},
|
|
|
|
|
"iconColor3": {"en": "Icon color 30%", "de": "Symbolfarbe bei 30%", "ru": "Цвет для 0%"},
|
|
|
|
|
"iconValue3": {"en": "Icon value 30%", "de": "Symbolwert für 30%", "ru": "Значение для 0%"},
|
|
|
|
|
"icon4": {"en": "Icon 40%", "de": "Symbol für 40%", "ru": "Картинка 40%"},
|
|
|
|
|
"iconColor4": {"en": "Icon color 40%", "de": "Symbolfarbe bei 40%", "ru": "Цвет для 0%"},
|
|
|
|
|
"iconValue4": {"en": "Icon value 40%", "de": "Symbolwert für 40%", "ru": "Значение для 0%"},
|
|
|
|
|
"icon5": {"en": "Icon 50%", "de": "Symbol für 50%", "ru": "Картинка 50%"},
|
|
|
|
|
"iconColor5": {"en": "Icon color 50%", "de": "Symbolfarbe bei 50%", "ru": "Цвет для 0%"},
|
|
|
|
|
"iconValue5": {"en": "Icon value 50%", "de": "Symbolwert für 50%", "ru": "Значение для 0%"},
|
|
|
|
|
"icon6": {"en": "Icon 60%", "de": "Symbol für 60%", "ru": "Картинка 60%"},
|
|
|
|
|
"iconColor6": {"en": "Icon color 60%", "de": "Symbolfarbe bei 60%", "ru": "Цвет для 0%"},
|
|
|
|
|
"iconValue6": {"en": "Icon value 60%", "de": "Symbolwert für 60%", "ru": "Значение для 0%"},
|
|
|
|
|
"icon7": {"en": "Icon 70%", "de": "Symbol für 70%", "ru": "Картинка 70%"},
|
|
|
|
|
"iconColor7": {"en": "Icon color 70%", "de": "Symbolfarbe bei 70%", "ru": "Цвет для 0%"},
|
|
|
|
|
"iconValue7": {"en": "Icon value 70%", "de": "Symbolwert für 70%", "ru": "Значение для 0%"},
|
|
|
|
|
"icon8": {"en": "Icon 80%", "de": "Symbol für 80%", "ru": "Картинка 80%"},
|
|
|
|
|
"iconColor8": {"en": "Icon color 80%", "de": "Symbolfarbe bei 80%", "ru": "Цвет для 0%"},
|
|
|
|
|
"iconValue8": {"en": "Icon value 80%", "de": "Symbolwert für 80%", "ru": "Значение для 0%"},
|
|
|
|
|
"icon9": {"en": "Icon 90%", "de": "Symbol für 90%", "ru": "Картинка 90%"},
|
|
|
|
|
"iconColor9": {"en": "Icon color 90%", "de": "Symbolfarbe bei 90%", "ru": "Цвет для 0%"},
|
|
|
|
|
"iconValue9": {"en": "Icon value 90%", "de": "Symbolwert für 90%", "ru": "Значение для 0%"},
|
|
|
|
|
"icon10": {"en": "Icon 100%", "de": "Symbol für 100%", "ru": "Картинка 100%"},
|
|
|
|
|
"iconColor10": {"en": "Icon color 100%", "de": "Symbolfarbe bei 100%", "ru": "Цвет для 0%"},
|
|
|
|
|
"iconValue10": {"en": "Icon value 100%", "de": "Symbolwert für 100%", "ru": "Значение для 0%"},
|
|
|
|
|
"iconOff": {"en": "Inactive Icon", "de": "Inaktivbild", "ru": "Неактиваня картинка"},
|
|
|
|
|
"textOff": {"en": "Text for Off", "de": "Text für Aus", "ru": "Надпись для Выкл"},
|
|
|
|
|
"textOn": {"en": "Text for On", "de": "Text für Ein", "ru": "Надпись для Вкл"},
|
|
|
|
|
"iconColorOff": {"en": "Inactive Icon color", "de": "Inaktive Symbolfarbe", "ru": "Цвет не активной иконки"},
|
|
|
|
|
"iconColorOn": {"en": "Active Icon color", "de": "Aktive Symbolfarbe", "ru": "Цвет активной иконки"},
|
|
|
|
|
"show_value": {"en": "Show value", "de": "Wert zeigen", "ru": "Показывать значение"},
|
|
|
|
|
"units": {"en": "Units", "de": "Einheit", "ru": "Единицы измерения"},
|
|
|
|
|
"roundnumber": {"en": "Decimal Place", "de": "Nachkommastellen", "ru": "Decimal Place"}
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
$.extend(systemDictionary, {
|
|
|
|
|
"off": {"en": "off", "de": "aus", "ru": "выкл"},
|
|
|
|
|
"on": {"en": "on", "de": "an", "ru": "вкл"},
|
|
|
|
|
"closed": {"en": "closed", "de": "zu", "ru": "закр."},
|
|
|
|
|
"open": {"en": "open", "de": "auf", "ru": "откр."}
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
vis.binds['jqui-mfd'] = {
|
|
|
|
|
version: "1.0.12",
|
|
|
|
|
isNotEmpty: function (val) {
|
|
|
|
|
return val !== '' && val !== null && val !== undefined;
|
|
|
|
|
},
|
|
|
|
|
removeSvg: function (wid) {
|
|
|
|
|
$('#' + wid).find('svg').remove();
|
|
|
|
|
},
|
|
|
|
|
showVersion: function () {
|
|
|
|
|
if (vis.binds['jqui-mfd'].version) {
|
|
|
|
|
console.log('Version vis-jqui-mfd: ' + vis.binds['jqui-mfd'].version);
|
|
|
|
|
vis.binds['jqui-mfd'].version = null;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
vis.binds['jqui-mfd'].showVersion();
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<script id="tplMfdLight"
|
|
|
|
|
type="text/ejs"
|
|
|
|
|
class="vis-tpl"
|
|
|
|
|
data-vis-set="jqui-mfd"
|
|
|
|
|
data-vis-type="val;light;state"
|
|
|
|
|
data-vis-prev='<div id="prev_tplMfdLight" style="position: relative; text-align: initial;padding: 4px "><div class="vis-widget_prev vis-widget ui-widget ui-button ui-corner-all ui-state-default" style="width: 70px; height: 70px;"> <div class="vis-widget-prev-body"> <img style="filter: invert(1); -webkit-filter: invert(1); -moz-filter: invert(1); -o-filter: invert(1); -ms-filter: invert(1);" width="100%" src="widgets/jqui-mfd/img/light_light_dim.png"></div></div></div>'
|
|
|
|
|
data-vis-name="Light/Dimmer"
|
|
|
|
|
data-vis-attrs="oid;min;max;invert_icon/checkbox;asButton[true]/checkbox;iconColor/color;"
|
|
|
|
|
data-vis-attrs0="group.colors;iconColor0/color;iconColor1/color;iconColor2/color;iconColor3/color;iconColor4/color;iconColor5/color;iconColor6/color;iconColor7/color;iconColor8/color;iconColor9/color;iconColor10/color;"
|
|
|
|
|
>
|
|
|
|
|
<div data-oid="<%= this.data.attr('oid') %>" class="vis-widget <%= this.data.attr('asButton') ? ' ui-widget ui-button ui-corner-all ui-state-default ui-state-active' : '' %> <%= this.data.attr('class') %>" id="<%= this.data.attr('wid') %>" style="width:76px; height:76px; position:absolute" data-min="<%= this.data.attr('min') %>" data-max="<%= this.data.attr('max') %>" <%= (el) -> this.data.attr('asButton') ? vis.binds.jqueryui.active(el) : '' %> >
|
|
|
|
|
<div class="vis-widget-body" <%= (el) -> vis.preloadImages(['widgets/jqui-mfd/img/light_light_dim_100.png','widgets/jqui-mfd/img/light_light_dim_90.png','widgets/jqui-mfd/img/light_light_dim_80.png','widgets/jqui-mfd/img/light_light_dim_70.png','widgets/jqui-mfd/img/light_light_dim_60.png','widgets/jqui-mfd/img/light_light_dim_50.png','widgets/jqui-mfd/img/light_light_dim_40.png','widgets/jqui-mfd/img/light_light_dim_30.png','widgets/jqui-mfd/img/light_light_dim_20.png','widgets/jqui-mfd/img/light_light_dim_10.png','widgets/jqui-mfd/img/light_light_dim.png']); %>>
|
|
|
|
|
<%
|
|
|
|
|
var styles = '';
|
|
|
|
|
if (this.data.invert_icon === 'true' || this.data.invert_icon === true) {
|
|
|
|
|
styles = 'filter: invert(1); -webkit-filter: invert(1); -moz-filter: invert(1); -o-filter: invert(1); -ms-filter: invert(1);';
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
var max = (this.data.attr('max') !== undefined) ? this.data.attr('max') : 100;
|
|
|
|
|
var min = (this.data.attr('min') !== undefined) ? this.data.attr('min') : 0;
|
|
|
|
|
|
|
|
|
|
if (typeof max === 'string' && parseFloat(max).toString() == max) max = parseFloat(max);
|
|
|
|
|
if (typeof min === 'string' && parseFloat(min).toString() == min) min = parseFloat(min);
|
|
|
|
|
|
|
|
|
|
var str = vis.states.attr(this.data.oid + '.val');
|
|
|
|
|
var val = parseFloat(str);
|
|
|
|
|
if (str === true || str === 'true') val = max;
|
|
|
|
|
if (str === false || str === 'false') val = min;
|
|
|
|
|
var image = '';
|
|
|
|
|
var imageColor = null;
|
|
|
|
|
if (val >= max) {
|
|
|
|
|
image = "light_light_dim_100";
|
|
|
|
|
imageColor = this.data.attr('iconColor10');
|
|
|
|
|
} else if (val >= min + (max - min) * 0.9) {
|
|
|
|
|
image = "light_light_dim_90";
|
|
|
|
|
imageColor = this.data.attr('iconColor9');
|
|
|
|
|
} else if (val >= min + (max - min) * 0.8) {
|
|
|
|
|
image = "light_light_dim_80";
|
|
|
|
|
imageColor = this.data.attr('iconColor8');
|
|
|
|
|
} else if (val >= min + (max - min) * 0.7) {
|
|
|
|
|
image = "light_light_dim_70";
|
|
|
|
|
imageColor = this.data.attr('iconColor7');
|
|
|
|
|
} else if (val >= min + (max - min) * 0.6) {
|
|
|
|
|
image = "light_light_dim_60";
|
|
|
|
|
imageColor = this.data.attr('iconColor6');
|
|
|
|
|
} else if (val >= min + (max - min) * 0.5) {
|
|
|
|
|
image = "light_light_dim_50";
|
|
|
|
|
imageColor = this.data.attr('iconColor5');
|
|
|
|
|
} else if (val >= min + (max - min) * 0.4) {
|
|
|
|
|
image = "light_light_dim_40";
|
|
|
|
|
imageColor = this.data.attr('iconColor4');
|
|
|
|
|
} else if (val >= min + (max - min) * 0.3) {
|
|
|
|
|
image = "light_light_dim_30";
|
|
|
|
|
imageColor = this.data.attr('iconColor3');
|
|
|
|
|
} else if (val >= min + (max - min) * 0.2) {
|
|
|
|
|
image = "light_light_dim_20";
|
|
|
|
|
imageColor = this.data.attr('iconColor2');
|
|
|
|
|
} else if (val >= min + (max - min) * 0.1) {
|
|
|
|
|
image = "light_light_dim_10";
|
|
|
|
|
imageColor = this.data.attr('iconColor1');
|
|
|
|
|
} else if (val >= min + (max - min) * 0.01) {
|
|
|
|
|
image = "light_light_dim_00";
|
|
|
|
|
imageColor = this.data.attr('iconColor0');
|
|
|
|
|
} else {
|
|
|
|
|
image = "light_light_dim";
|
|
|
|
|
imageColor = this.data.attr('iconColor0');
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if (!vis.binds['jqui-mfd'].isNotEmpty(imageColor)) {
|
|
|
|
|
imageColor = this.data.attr('iconColor');
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if (imageColor) {
|
|
|
|
|
%>
|
|
|
|
|
<img style="<%= styles %>" width="100%" src="widgets/jqui-mfd/img/<%= image %>.svg" <%= (el) -> vis.binds.jqueryui.setSvgColor(el, imageColor) %>/>
|
|
|
|
|
<%
|
|
|
|
|
} else {
|
|
|
|
|
%>
|
|
|
|
|
<img style="<%= styles %>" width="100%" src="widgets/jqui-mfd/img/<%= image %>.png" <%= (el) -> vis.binds['jqui-mfd'].removeSvg(this.data.attr('wid')) %>/>
|
|
|
|
|
<% } %>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<script id="tplMfdLightCtrl"
|
|
|
|
|
type="text/ejs"
|
|
|
|
|
class="vis-tpl"
|
|
|
|
|
data-vis-prev='<div id="prev_tplMfdLight" style="position: relative; text-align: initial;padding: 4px "><div data-oid="dev1" class="vis-widget_prev vis-widget ui-widget ui-button ui-corner-all ui-state-default ui-state-active" style="width: 70px; height: 70px;"> <div class="vis-widget-prev-body"> <img style="filter: invert(1); -webkit-filter: invert(1); -moz-filter: invert(1); -o-filter: invert(1); -ms-filter: invert(1);" width="100%" src="widgets/jqui-mfd/img/light_light_dim.png"> </div> </div></div>'
|
|
|
|
|
data-vis-set="jqui-mfd"
|
|
|
|
|
data-vis-type="light;ctrl"
|
|
|
|
|
data-vis-name="ctrl - Light"
|
|
|
|
|
data-vis-attrs="oid;min;max;invert_icon/checkbox;asButton[true]/checkbox;iconColor/color;"
|
|
|
|
|
data-vis-attrs0="group.colors;iconColor0/color;iconColor1/color;iconColor2/color;iconColor3/color;iconColor4/color;iconColor5/color;iconColor6/color;iconColor7/color;iconColor8/color;iconColor9/color;iconColor10/color;"
|
|
|
|
|
>
|
|
|
|
|
<div data-oid="<%= this.data.attr('oid') %>" class="vis-widget <%= this.data.attr('asButton') ? ' ui-widget ui-button ui-corner-all ui-state-default' : '' %> <%= this.data.attr('class') %>" id="<%= this.data.attr('wid') %>" style="width:76px; height:76px; position:absolute" data-min="<%= this.data.attr('min') %>" data-max="<%= this.data.attr('max') %>" <%= (el) -> vis.binds.basic.toggle(el); this.data.attr('asButton') ? vis.binds.jqueryui.classes(el) : '' %>>
|
|
|
|
|
<div class="vis-widget-body" <%= (el) -> vis.preloadImages(['widgets/jqui-mfd/img/light_light_dim_100.png','widgets/jqui-mfd/img/light_light_dim_90.png','widgets/jqui-mfd/img/light_light_dim_80.png','widgets/jqui-mfd/img/light_light_dim_70.png','widgets/jqui-mfd/img/light_light_dim_60.png','widgets/jqui-mfd/img/light_light_dim_50.png','widgets/jqui-mfd/img/light_light_dim_40.png','widgets/jqui-mfd/img/light_light_dim_30.png','widgets/jqui-mfd/img/light_light_dim_20.png','widgets/jqui-mfd/img/light_light_dim_10.png','widgets/jqui-mfd/img/light_light_dim.png']); %>>
|
|
|
|
|
<%
|
|
|
|
|
var styles = '';
|
|
|
|
|
if (this.data.invert_icon === 'true' || this.data.invert_icon === true) {
|
|
|
|
|
styles = 'filter: invert(1); -webkit-filter: invert(1); -moz-filter: invert(1); -o-filter: invert(1); -ms-filter: invert(1);';
|
|
|
|
|
}
|
|
|
|
|
var max = (this.data.attr('max') !== undefined) ? this.data.attr('max') : 100;
|
|
|
|
|
var min = (this.data.attr('min') !== undefined) ? this.data.attr('min') : 0;
|
|
|
|
|
|
|
|
|
|
if (typeof max === 'string' && parseFloat(max).toString() == max) max = parseFloat(max);
|
|
|
|
|
if (typeof min === 'string' && parseFloat(min).toString() == min) min = parseFloat(min);
|
|
|
|
|
|
|
|
|
|
var str = vis.states.attr(this.data.oid + '.val');
|
|
|
|
|
var val = parseFloat(str);
|
|
|
|
|
if (str === true || str === 'true') val = max;
|
|
|
|
|
if (str === false || str === 'false') val = min;
|
|
|
|
|
var image = '';
|
|
|
|
|
var imageColor = null;
|
|
|
|
|
if (val >= max) {
|
|
|
|
|
image = "light_light_dim_100";
|
|
|
|
|
imageColor = this.data.attr('iconColor10');
|
|
|
|
|
} else if (val >= min + (max - min) * 0.9) {
|
|
|
|
|
image = "light_light_dim_90";
|
|
|
|
|
imageColor = this.data.attr('iconColor9');
|
|
|
|
|
} else if (val >= min + (max - min) * 0.8) {
|
|
|
|
|
image = "light_light_dim_80";
|
|
|
|
|
imageColor = this.data.attr('iconColor8');
|
|
|
|
|
} else if (val >= min + (max - min) * 0.7) {
|
|
|
|
|
image = "light_light_dim_70";
|
|
|
|
|
imageColor = this.data.attr('iconColor7');
|
|
|
|
|
} else if (val >= min + (max - min) * 0.6) {
|
|
|
|
|
image = "light_light_dim_60";
|
|
|
|
|
imageColor = this.data.attr('iconColor6');
|
|
|
|
|
} else if (val >= min + (max - min) * 0.5) {
|
|
|
|
|
image = "light_light_dim_50";
|
|
|
|
|
imageColor = this.data.attr('iconColor5');
|
|
|
|
|
} else if (val >= min + (max - min) * 0.4) {
|
|
|
|
|
image = "light_light_dim_40";
|
|
|
|
|
imageColor = this.data.attr('iconColor4');
|
|
|
|
|
} else if (val >= min + (max - min) * 0.3) {
|
|
|
|
|
image = "light_light_dim_30";
|
|
|
|
|
imageColor = this.data.attr('iconColor3');
|
|
|
|
|
} else if (val >= min + (max - min) * 0.2) {
|
|
|
|
|
image = "light_light_dim_20";
|
|
|
|
|
imageColor = this.data.attr('iconColor2');
|
|
|
|
|
} else if (val >= min + (max - min) * 0.1) {
|
|
|
|
|
image = "light_light_dim_10";
|
|
|
|
|
imageColor = this.data.attr('iconColor1');
|
|
|
|
|
} else if (val >= min + (max - min) * 0.01) {
|
|
|
|
|
image = "light_light_dim_00";
|
|
|
|
|
imageColor = this.data.attr('iconColor0');
|
|
|
|
|
} else {
|
|
|
|
|
image = "light_light_dim";
|
|
|
|
|
imageColor = this.data.attr('iconColor0');
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if (!vis.binds['jqui-mfd'].isNotEmpty(imageColor)) {
|
|
|
|
|
imageColor = this.data.attr('iconColor');
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if (vis.binds['jqui-mfd'].isNotEmpty(imageColor)) {
|
|
|
|
|
%>
|
|
|
|
|
<img style="<%= styles %>" width="100%" src="widgets/jqui-mfd/img/<%= image %>.svg" <%= (el) -> vis.binds.jqueryui.setSvgColor(el, imageColor) %>/>
|
|
|
|
|
<%
|
|
|
|
|
} else {
|
|
|
|
|
%>
|
|
|
|
|
<img style="<%= styles %>" width="100%" src="widgets/jqui-mfd/img/<%= image %>.png" <%= (el) -> vis.binds['jqui-mfd'].removeSvg(this.data.attr('wid')) %>/>
|
|
|
|
|
<% } %>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<script id="tplMfdLightOnOffDialog"
|
|
|
|
|
type="text/ejs"
|
|
|
|
|
class="vis-tpl"
|
|
|
|
|
data-vis-set="jqui-mfd"
|
|
|
|
|
data-vis-prev='<img src="widgets/jqui-mfd/img/Prev_Light_jquiDialog.png"></img>'
|
|
|
|
|
data-vis-type="light;ctrl;dialog"
|
|
|
|
|
data-vis-name="OnOff + jqui Dialog"
|
|
|
|
|
data-vis-attrs="oid;oid-working;min;max;"
|
|
|
|
|
data-vis-attrs0="group.style;iconOff/image;iconColorOff/color;iconOn/image;iconColorOn/color;invert_icon/checkbox;asButton[true]/checkbox;"
|
|
|
|
|
data-vis-attrs1="group.dialog;textOff;textOn;title;noHeader/checkbox;autoclose/slider,0,30000,100;modal/checkbox;dialog_width[440];dialog_height[200];dialog_top;dialog_left;overflowX/nselect,,visible,hidden,scroll,auto,initial,inherit;overflowY/nselect,,visible,hidden,scroll,auto,initial,inherit;"
|
|
|
|
|
>
|
|
|
|
|
<div data-oid="<%= this.data.attr('oid') %>" data-hm-wid="<%= this.data.attr('oid-working') %>" class="vis-widget <%= this.data.attr('asButton') ? ' ui-widget ui-button ui-corner-all ui-state-default' : '' %> <%= this.data.attr('class') %>" id="<%= this.data.attr('wid') %>" style="width:76px; height:76px; position:absolute" <%= (el) -> this.data.attr('asButton') ? vis.binds.jqueryui.classes(el) : '' %>>
|
|
|
|
|
<div id="<%= this.data.attr('wid') %>_body" class="vis-widget-body" style="width:100%; height:100%" <%= (el) -> vis.preloadImages(['widgets/jqui-mfd/img/light_light_dim_100.png','widgets/jqui-mfd/img/light_light_dim_90.png','widgets/jqui-mfd/img/light_light_dim_80.png','widgets/jqui-mfd/img/light_light_dim_70.png','widgets/jqui-mfd/img/light_light_dim_60.png','widgets/jqui-mfd/img/light_light_dim_50.png','widgets/jqui-mfd/img/light_light_dim_40.png','widgets/jqui-mfd/img/light_light_dim_30.png','widgets/jqui-mfd/img/light_light_dim_20.png','widgets/jqui-mfd/img/light_light_dim_10.png','widgets/jqui-mfd/img/light_light_dim.png']); %>>
|
|
|
|
|
<%
|
|
|
|
|
var styles = '';
|
|
|
|
|
if (this.data.invert_icon === 'true' || this.data.invert_icon === true) {
|
|
|
|
|
styles = 'filter: invert(1); -webkit-filter: invert(1); -moz-filter: invert(1); -o-filter: invert(1); -ms-filter: invert(1);';
|
|
|
|
|
}
|
|
|
|
|
var isFalse = vis.binds.basic.isFalse(vis.states.attr(this.data.oid + '.val'), this.data.attr('min'), this.data.attr('max'));
|
|
|
|
|
var image = '';
|
|
|
|
|
if (!isFalse) {
|
|
|
|
|
image = this.data.attr('iconOn') || "widgets/jqui-mfd/img/light_light_dim_100.svg";
|
|
|
|
|
imageColor = this.data.attr('iconColorOn');
|
|
|
|
|
} else {
|
|
|
|
|
image = this.data.attr('iconOff') || "widgets/jqui-mfd/img/light_light_dim.svg";
|
|
|
|
|
imageColor = this.data.attr('iconColorOff');
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if (vis.binds['jqui-mfd'].isNotEmpty(imageColor)) {
|
|
|
|
|
%>
|
|
|
|
|
<img style="<%= styles %>" width="100%" src="<%= image %>" <%= (el) -> vis.binds.jqueryui.setSvgColor(el, imageColor) %>/>
|
|
|
|
|
<%
|
|
|
|
|
} else {
|
|
|
|
|
%>
|
|
|
|
|
<img style="<%= styles %>" width="100%" src="<%= image %>" <%= (el) -> vis.binds['jqui-mfd'].removeSvg(this.data.attr('wid')) %>/>
|
|
|
|
|
<% } %>
|
|
|
|
|
</div>
|
|
|
|
|
<div id="<%= this.data.attr('wid') %>_dialog" class="<%= this.data.attr('wid') %>_dialog vis-widget-dialog" title="<%== this.data.title || this.data.attr('oid') %>">
|
|
|
|
|
<div id="<%= this.data.attr('wid') %>_radio" class="<%= this.data.attr('wid') %>_radio" style="text-align: center" data-oid="<%= this.data.attr('oid') %>" <%= (el) -> vis.binds.jqueryui.radio(el); %> >
|
|
|
|
|
<%
|
|
|
|
|
var max = (this.data.attr('max') !== undefined) ? this.data.attr('max') : 100;
|
|
|
|
|
var min = (this.data.attr('min') !== undefined) ? this.data.attr('min') : 0;
|
|
|
|
|
|
|
|
|
|
if (typeof max === 'string' && parseFloat(max).toString() == max) max = parseFloat(max);
|
|
|
|
|
if (typeof min === 'string' && parseFloat(min).toString() == min) min = parseFloat(min);
|
|
|
|
|
if (max === 'true') max = true;
|
|
|
|
|
if (max === 'false') max = false;
|
|
|
|
|
if (min === 'true') min = true;
|
|
|
|
|
if (min === 'false') min = false;
|
|
|
|
|
%>
|
|
|
|
|
<input type="radio" id="<%= this.data.attr('wid') %>_radioOff" name="<%= this.data.attr('wid') %>_radio" value="<%= min %>" checked="checked"/><label for="<%= this.data.attr('wid') %>_radioOff"><%= this.data.attr('textOff') || _('off') %></label>
|
|
|
|
|
<input type="radio" id="<%= this.data.attr('wid') %>_radioOn" name="<%= this.data.attr('wid') %>_radio" value="<%= max %>"/><label for="<%= this.data.attr('wid') %>_radioOn"><%= this.data.attr('textOn') || _('on') %></label>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="popup-helper" <%= (el) -> vis.binds.jqueryui.dialog(el, this.data, true) %> />
|
|
|
|
|
<div class="popup-helper" <%= (el) -> vis.binds.jqueryui.dialogAutoClose(el, data.attr('autoclose')) %> />
|
|
|
|
|
</div>
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<script id="tplMfdLightDialog"
|
|
|
|
|
type="text/ejs"
|
|
|
|
|
class="vis-tpl"
|
|
|
|
|
data-vis-set="jqui-mfd"
|
|
|
|
|
data-vis-type="dimmer,ctrl,dialog"
|
|
|
|
|
data-vis-prev='<img src="widgets/jqui-mfd/img/Prev_Dimmer_jquiDialog.png"></img>'
|
|
|
|
|
data-vis-name="Dimmer + jqui Dialog"
|
|
|
|
|
data-vis-attrs="oid;oid-working;min;max;invert_icon/checkbox;asButton[true]/checkbox;iconColor/color;"
|
|
|
|
|
data-vis-attrs0="group.colors;iconColor0/color;iconColor1/color;iconColor2/color;iconColor3/color;iconColor4/color;iconColor5/color;iconColor6/color;iconColor7/color;iconColor8/color;iconColor9/color;iconColor10/color;"
|
|
|
|
|
data-vis-attrs1="group.dialog;title;noHeader/checkbox;autoclose/slider,0,30000,100;modal/checkbox;dialog_width[470];dialog_height[210];dialog_top;dialog_left;overflowX/nselect,,visible,hidden,scroll,auto,initial,inherit;overflowY/nselect,,visible,hidden,scroll,auto,initial,inherit;show_value/checkbox;units;"
|
|
|
|
|
>
|
|
|
|
|
<div data-oid="<%= this.data.attr('oid') %>" class="vis-widget <%= this.data.attr('asButton') ? ' ui-widget ui-button ui-corner-all ui-state-default' : '' %> <%= this.data.attr('class') %>" id="<%= this.data.attr('wid') %>" style="width:76px; height:76px; position:absolute" <%= (el) -> this.data.attr('asButton') ? vis.binds.jqueryui.classes(el) : '' %>>
|
|
|
|
|
<div id="<%= this.data.attr('wid') %>_body" class="vis-widget-body" style="width:100%; height:100%" <%= (el) -> vis.preloadImages(['widgets/jqui-mfd/img/light_light_dim_100.png','widgets/jqui-mfd/img/light_light_dim_90.png','widgets/jqui-mfd/img/light_light_dim_80.png','widgets/jqui-mfd/img/light_light_dim_70.png','widgets/jqui-mfd/img/light_light_dim_60.png','widgets/jqui-mfd/img/light_light_dim_50.png','widgets/jqui-mfd/img/light_light_dim_40.png','widgets/jqui-mfd/img/light_light_dim_30.png','widgets/jqui-mfd/img/light_light_dim_20.png','widgets/jqui-mfd/img/light_light_dim_10.png','widgets/jqui-mfd/img/light_light_dim.png']); %>>
|
|
|
|
|
<%
|
|
|
|
|
var styles = '';
|
|
|
|
|
if (this.data.invert_icon === 'true' || this.data.invert_icon === true) {
|
|
|
|
|
styles = 'filter: invert(1); -webkit-filter: invert(1); -moz-filter: invert(1); -o-filter: invert(1); -ms-filter: invert(1);';
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
var max = (this.data.attr('max') !== undefined) ? parseFloat(this.data.attr('max')) : 100;
|
|
|
|
|
var min = (this.data.attr('min') !== undefined) ? parseFloat(this.data.attr('min')) : 0;
|
|
|
|
|
|
|
|
|
|
if (typeof max === 'string' && parseFloat(max).toString() == max) max = parseFloat(max);
|
|
|
|
|
if (typeof min === 'string' && parseFloat(min).toString() == min) min = parseFloat(min);
|
|
|
|
|
|
|
|
|
|
var str = vis.states.attr(this.data.oid + '.val');
|
|
|
|
|
var val = parseFloat(str);
|
|
|
|
|
if (str === true || str === 'true') val = max;
|
|
|
|
|
if (str === false || str === 'false') val = min;
|
|
|
|
|
var image = '';
|
|
|
|
|
var imageColor = null;
|
|
|
|
|
if (val >= max) {
|
|
|
|
|
image = "light_light_dim_100";
|
|
|
|
|
imageColor = this.data.attr('iconColor10');
|
|
|
|
|
} else if (val >= min + (max - min) * 0.9) {
|
|
|
|
|
image = "light_light_dim_90";
|
|
|
|
|
imageColor = this.data.attr('iconColor9');
|
|
|
|
|
} else if (val >= min + (max - min) * 0.8) {
|
|
|
|
|
image = "light_light_dim_80";
|
|
|
|
|
imageColor = this.data.attr('iconColor8');
|
|
|
|
|
} else if (val >= min + (max - min) * 0.7) {
|
|
|
|
|
image = "light_light_dim_70";
|
|
|
|
|
imageColor = this.data.attr('iconColor7');
|
|
|
|
|
} else if (val >= min + (max - min) * 0.6) {
|
|
|
|
|
image = "light_light_dim_60";
|
|
|
|
|
imageColor = this.data.attr('iconColor6');
|
|
|
|
|
} else if (val >= min + (max - min) * 0.5) {
|
|
|
|
|
image = "light_light_dim_50";
|
|
|
|
|
imageColor = this.data.attr('iconColor5');
|
|
|
|
|
} else if (val >= min + (max - min) * 0.4) {
|
|
|
|
|
image = "light_light_dim_40";
|
|
|
|
|
imageColor = this.data.attr('iconColor4');
|
|
|
|
|
} else if (val >= min + (max - min) * 0.3) {
|
|
|
|
|
image = "light_light_dim_30";
|
|
|
|
|
imageColor = this.data.attr('iconColor3');
|
|
|
|
|
} else if (val >= min + (max - min) * 0.2) {
|
|
|
|
|
image = "light_light_dim_20";
|
|
|
|
|
imageColor = this.data.attr('iconColor2');
|
|
|
|
|
} else if (val >= min + (max - min) * 0.1) {
|
|
|
|
|
image = "light_light_dim_10";
|
|
|
|
|
imageColor = this.data.attr('iconColor1');
|
|
|
|
|
} else if (val >= min + (max - min) * 0.01) {
|
|
|
|
|
image = "light_light_dim_00";
|
|
|
|
|
imageColor = this.data.attr('iconColor0');
|
|
|
|
|
} else {
|
|
|
|
|
image = "light_light_dim";
|
|
|
|
|
imageColor = this.data.attr('iconColor0');
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if (!vis.binds['jqui-mfd'].isNotEmpty(imageColor)) {
|
|
|
|
|
imageColor = this.data.attr('iconColor');
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if (vis.binds['jqui-mfd'].isNotEmpty(imageColor)) {
|
|
|
|
|
%>
|
|
|
|
|
<img style="<%= styles %>" width="100%" src="widgets/jqui-mfd/img/<%= image %>.svg" <%= (el) -> vis.binds.jqueryui.setSvgColor(el, imageColor) %>/>
|
|
|
|
|
<%
|
|
|
|
|
} else {
|
|
|
|
|
%>
|
|
|
|
|
<img style="<%= styles %>" width="100%" src="widgets/jqui-mfd/img/<%= image %>.png" <%= (el) -> vis.binds['jqui-mfd'].removeSvg(this.data.attr('wid')) %>/>
|
|
|
|
|
<% } %>
|
|
|
|
|
</div>
|
|
|
|
|
<div id="<%= this.data.attr('wid') %>_dialog" class="<%= this.data.attr('wid') %>_dialog vis-widget-dialog" title="<%== this.data.title || this.data.attr('oid') %>" style="padding-left:20px;">
|
|
|
|
|
<div id="<%= this.data.attr('wid') %>_radio" class="<%= this.data.attr('wid') %>_radio" style="text-align: center" data-oid="<%= this.data.attr('oid') %>" <%= (el) -> vis.binds.jqueryui.radio(el); %> >
|
|
|
|
|
<%
|
|
|
|
|
var max = (this.data.attr('max') !== undefined) ? parseFloat(this.data.attr('max')) : 100;
|
|
|
|
|
var min = (this.data.attr('min') !== undefined) ? parseFloat(this.data.attr('min')) : 0;
|
|
|
|
|
|
|
|
|
|
if (typeof max === 'string' && parseFloat(max).toString() == max) max = parseFloat(max);
|
|
|
|
|
if (typeof min === 'string' && parseFloat(min).toString() == min) min = parseFloat(min);
|
|
|
|
|
%>
|
|
|
|
|
<input type="radio" id="<%= this.data.attr('wid') %>_radio0" name="<%= this.data.attr('wid') %>_radio" value="<%= min %>" checked="checked"/><label for="<%= this.data.attr('wid') %>_radio0"><%= _('off') %></label>
|
|
|
|
|
<input type="radio" id="<%= this.data.attr('wid') %>_radio1" name="<%= this.data.attr('wid') %>_radio" value="<%= min + (max - min) * 0.25 %>" checked="checked"/><label for="<%= this.data.attr('wid') %>_radio1">25%</label>
|
|
|
|
|
<input type="radio" id="<%= this.data.attr('wid') %>_radio2" name="<%= this.data.attr('wid') %>_radio" value="<%= min + (max - min) * 0.5 %>" checked="checked"/><label for="<%= this.data.attr('wid') %>_radio2">50%</label>
|
|
|
|
|
<input type="radio" id="<%= this.data.attr('wid') %>_radio3" name="<%= this.data.attr('wid') %>_radio" value="<%= min + (max - min) * 0.75 %>" checked="checked"/><label for="<%= this.data.attr('wid') %>_radio3">75%</label>
|
|
|
|
|
<input type="radio" id="<%= this.data.attr('wid') %>_radio4" name="<%= this.data.attr('wid') %>_radio" value="<%= max %>"/><label for="<%= this.data.attr('wid') %>_radio4">100%</label>
|
|
|
|
|
</div>
|
|
|
|
|
<br/>
|
|
|
|
|
<div class="sliderJQUI" style="width: 90%" id="<%= this.data.attr('wid') %>_slider" data-oid="<%= this.data.attr('oid') %>" data-hm-wid="<%= this.data.attr('oid-working') %>" <%= (el) -> vis.binds.jqueryui.slider(el, {min: min, max: max, step: (max - min) / 100}) %> />
|
|
|
|
|
<br/>
|
|
|
|
|
<%= vis.states.attr(this.data.oid + '.val') ? (((parseFloat(vis.states.attr(this.data.oid + '.val')) - min) / (max - min)) * 100).toFixed(0) : 0 %>%
|
|
|
|
|
<%= (this.data.show_value === 'true' || this.data.show_value === true) ? '(' + Math.round(parseFloat(vis.states.attr(this.data.oid + '.val') * 100) / 100) + ' ' + this.data.attr('units') + ')' : '' %>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="popup-helper" <%= (el) -> vis.binds.jqueryui.dialog(el, data, true) %> />
|
|
|
|
|
<div class="popup-helper" <%= (el) -> vis.binds.jqueryui.dialogAutoClose(el, data.attr('autoclose')) %> />
|
|
|
|
|
</div>
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<script id="tplMfdSocket"
|
|
|
|
|
type="text/ejs"
|
|
|
|
|
class="vis-tpl"
|
|
|
|
|
data-vis-prev='<div id="prev_tplMfdSocket" style="position: relative; text-align: initial; padding: 4px"><div class="vis-widget_prev ui-widget ui-button ui-corner-all ui-state-default" style="width: 70px; height: 70px"><div class="vis-widget-prev-body"><img width="100%" style="filter: invert(1); -webkit-filter: invert(1); -moz-filter: invert(1); -o-filter: invert(1); -ms-filter: invert(1);" src="widgets/jqui-mfd/img/message_socket_on.png"></div></div></div>'
|
|
|
|
|
data-vis-set="jqui-mfd"
|
|
|
|
|
data-vis-name="value - Socket"
|
|
|
|
|
data-vis-attrs="oid;min;max;invert_icon/checkbox;invert_state/checkbox;asButton[true]/checkbox;icon_off/image;iconColor_off/color;icon_on/image;iconColor_on/color;"
|
|
|
|
|
>
|
|
|
|
|
<div data-oid="<%= this.data.attr('oid') %>" class="vis-widget <%= this.data.attr('asButton') ? ' ui-widget ui-button ui-corner-all ui-state-default' : '' %> <%= this.data.attr('class') %>" id="<%= this.data.attr('wid') %>" style="width:76px; height:76px; position:absolute" <%= (el) -> this.data.attr('asButton') ? vis.binds.jqueryui.active(el, this.data.invert_state) : '' %> >
|
|
|
|
|
<div class="vis-widget-body" <%= (el) -> vis.preloadImages(['widgets/jqui-mfd/img/message_socket_on.png','widgets/jqui-mfd/img/message_socket_off.png']); %>>
|
|
|
|
|
<%
|
|
|
|
|
var styles = '';
|
|
|
|
|
if (this.data.invert_icon === 'true' || this.data.invert_icon === true) {
|
|
|
|
|
styles = 'filter: invert(1); -webkit-filter: invert(1); -moz-filter: invert(1); -o-filter: invert(1); -ms-filter: invert(1);';
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
var str = vis.states.attr(this.data.oid + '.val');
|
|
|
|
|
var val = parseFloat(str);
|
|
|
|
|
var max = (this.data.attr('max') !== undefined) ? this.data.attr('max') : 1;
|
|
|
|
|
var min = (this.data.attr('min') !== undefined) ? this.data.attr('min') : 0;
|
|
|
|
|
|
|
|
|
|
if (typeof max === 'string' && parseFloat(max).toString() == max) max = parseFloat(max);
|
|
|
|
|
if (typeof min === 'string' && parseFloat(min).toString() == min) min = parseFloat(min);
|
|
|
|
|
if (max === 'true') max = true;
|
|
|
|
|
if (max === 'false') max = false;
|
|
|
|
|
if (min === 'true') min = true;
|
|
|
|
|
if (min === 'false') min = false;
|
|
|
|
|
|
|
|
|
|
if (str === true || str === 'true') val = max;
|
|
|
|
|
if (str === false || str === 'false') val = min;
|
|
|
|
|
if (this.data.invert_state) {
|
|
|
|
|
if (val == min) {
|
|
|
|
|
val = max;
|
|
|
|
|
} else {
|
|
|
|
|
val = min;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if (val != min) {
|
|
|
|
|
if (vis.binds['jqui-mfd'].isNotEmpty(this.data.attr('iconColor_on'))) {
|
|
|
|
|
%>
|
|
|
|
|
<img style="<%= styles %>" width="100%" src="<%= this.data.attr('icon_on') ? this.data.attr('icon_on') : 'widgets/jqui-mfd/img/message_socket_on.svg' %>" <%= (el) -> vis.binds.jqueryui.setSvgColor(el, this.data.attr('iconColor_on')) %>/>
|
|
|
|
|
<% } else { %>
|
|
|
|
|
<img style="<%= styles %>" width="100%" src="<%= this.data.attr('icon_on') ? this.data.attr('icon_on') : 'widgets/jqui-mfd/img/message_socket_on.png' %>" <%= (el) -> vis.binds['jqui-mfd'].removeSvg(this.data.attr('wid')) %>/>
|
|
|
|
|
<% }
|
|
|
|
|
} else {
|
|
|
|
|
if (vis.binds['jqui-mfd'].isNotEmpty(this.data.attr('iconColor_off'))) {
|
|
|
|
|
%>
|
|
|
|
|
<img style="<%= styles %>" width="100%" src="<%= this.data.attr('icon_off') ? this.data.attr('icon_off') : 'widgets/jqui-mfd/img/message_socket_off.svg' %>" <%= (el) -> vis.binds.jqueryui.setSvgColor(el, this.data.attr('iconColor_off')) %>/>
|
|
|
|
|
<% } else { %>
|
|
|
|
|
<img style="<%= styles %>" width="100%" src="<%= this.data.attr('icon_off') ? this.data.attr('icon_off') : 'widgets/jqui-mfd/img/message_socket_off.png' %>" <%= (el) -> vis.binds['jqui-mfd'].removeSvg(this.data.attr('wid')) %>/>
|
|
|
|
|
<% }
|
|
|
|
|
} %>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<script id="tplMfdSocketCtrl"
|
|
|
|
|
type="text/ejs"
|
|
|
|
|
class="vis-tpl"
|
|
|
|
|
data-vis-set="jqui-mfd"
|
|
|
|
|
data-vis-name="ctrl - Socket"
|
|
|
|
|
data-vis-prev='<div id="prev_tplMfdSocketCtrl" style="position: relative; text-align: initial;padding: 4px"><div class="vis-widget_prev ui-widget ui-button ui-corner-all ui-state-default ui-state-active" style="width: 70px; height: 70px"><div class="vis-widget-prev-body"><img width="100%" style="filter: invert(1); -webkit-filter: invert(1); -moz-filter: invert(1); -o-filter: invert(1); -ms-filter: invert(1);" src="widgets/jqui-mfd/img/message_socket_on.png"></div></div></div>'
|
|
|
|
|
data-vis-attrs="oid;min;max;invert_state/checkbox;asButton[true]/checkbox;"
|
|
|
|
|
data-vis-attrs0="group.icon;invert_icon/checkbox;icon_off/image;iconColor_off/color;icon_on/image;iconColor_on/color;"
|
|
|
|
|
data-vis-attrs1="group.ccontrol;urlTrue;urlFalse;oidTrue/id;oidFalse/id;oidTrueValue;oidFalseValue;"
|
|
|
|
|
>
|
|
|
|
|
<div
|
|
|
|
|
data-oid="<%= this.data.attr('oid') %>"
|
|
|
|
|
class="vis-widget <%= this.data.attr('asButton') ? ' ui-widget ui-button ui-corner-all ui-state-default' : '' %> <%= this.data.attr('class') %>"
|
|
|
|
|
id="<%= this.data.attr('wid') %>"
|
|
|
|
|
style="width:76px; height:76px; position:absolute"
|
|
|
|
|
data-min="<%= this.data.attr('min') %>"
|
|
|
|
|
data-max="<%= this.data.attr('max') %>"
|
|
|
|
|
data-as-button="<%= this.data.attr('asButton') %>"
|
|
|
|
|
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') %>"
|
|
|
|
|
data-img-class="toggle-image"
|
|
|
|
|
data-img-true="<%= this.data.attr('icon_on') ? this.data.attr('icon_on') : 'widgets/jqui-mfd/img/message_socket_on.png' %>"
|
|
|
|
|
data-img-false="<%= this.data.attr('icon_off') ? this.data.attr('icon_off') : 'widgets/jqui-mfd/img/message_socket_off.png' %>"
|
|
|
|
|
<%= (el) -> vis.binds.basic.toggle(el); this.data.attr('asButton') ? vis.binds.jqueryui.classes(el) : '' %>
|
|
|
|
|
>
|
|
|
|
|
<div class="vis-widget-body" <%= (el) -> vis.preloadImages(['widgets/jqui-mfd/img/message_socket_on.png','widgets/jqui-mfd/img/message_socket_off.png']); %>>
|
|
|
|
|
<%
|
|
|
|
|
var styles = '';
|
|
|
|
|
if (this.data.invert_icon === 'true' || this.data.invert_icon === true) {
|
|
|
|
|
styles = 'filter: invert(1); -webkit-filter: invert(1); -moz-filter: invert(1); -o-filter: invert(1); -ms-filter: invert(1);';
|
|
|
|
|
}
|
|
|
|
|
var str = (this.data.oid && this.data.oid !== 'nothing_selected') ? vis.states.attr(this.data.oid + '.val') : false;
|
|
|
|
|
var val = parseFloat(str);
|
|
|
|
|
var max = (this.data.attr('max') !== undefined) ? this.data.attr('max') : 1;
|
|
|
|
|
var min = (this.data.attr('min') !== undefined) ? this.data.attr('min') : 0;
|
|
|
|
|
|
|
|
|
|
if (typeof max === 'string' && parseFloat(max).toString() == max) max = parseFloat(max);
|
|
|
|
|
if (typeof min === 'string' && parseFloat(min).toString() == min) min = parseFloat(min);
|
|
|
|
|
if (max === 'true') max = true;
|
|
|
|
|
if (max === 'false') max = false;
|
|
|
|
|
if (min === 'true') min = true;
|
|
|
|
|
if (min === 'false') min = false;
|
|
|
|
|
|
|
|
|
|
if (str === true || str === 'true') val = max;
|
|
|
|
|
if (str === false || str === 'false') val = min;
|
|
|
|
|
if (this.data.invert_state) {
|
|
|
|
|
if (val == min) {
|
|
|
|
|
val = max;
|
|
|
|
|
} else {
|
|
|
|
|
val = min;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if (val != min) {
|
|
|
|
|
if (vis.binds['jqui-mfd'].isNotEmpty(this.data.attr('iconColor_on'))) {
|
|
|
|
|
%>
|
|
|
|
|
<img style="<%= styles %>" width="100%" src="<%= this.data.attr('icon_on') ? this.data.attr('icon_on') : 'widgets/jqui-mfd/img/message_socket_on.svg' %>" <%= (el) -> vis.binds.jqueryui.setSvgColor(el, this.data.attr('iconColor_on')) %>/>
|
|
|
|
|
<% } else { %>
|
|
|
|
|
<img style="<%= styles %>" width="100%" src="<%= this.data.attr('icon_on') ? this.data.attr('icon_on') : 'widgets/jqui-mfd/img/message_socket_on.png' %>" <%= (el) -> vis.binds['jqui-mfd'].removeSvg(this.data.attr('wid')) %>/>
|
|
|
|
|
<% }
|
|
|
|
|
} else {
|
|
|
|
|
if (vis.binds['jqui-mfd'].isNotEmpty(this.data.attr('iconColor_off'))) {
|
|
|
|
|
%>
|
|
|
|
|
<img style="<%= styles %>" width="100%" src="<%= this.data.attr('icon_off') ? this.data.attr('icon_off') : 'widgets/jqui-mfd/img/message_socket_off.svg' %>" <%= (el) -> vis.binds.jqueryui.setSvgColor(el, this.data.attr('iconColor_off')) %>/>
|
|
|
|
|
<% } else { %>
|
|
|
|
|
<img style="<%= styles %>" width="100%" src="<%= this.data.attr('icon_off') ? this.data.attr('icon_off') : 'widgets/jqui-mfd/img/message_socket_off.png' %>" <%= (el) -> vis.binds['jqui-mfd'].removeSvg(this.data.attr('wid')) %>/>
|
|
|
|
|
<% }
|
|
|
|
|
} %>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<script id="tplMfdShutter"
|
|
|
|
|
type="text/ejs"
|
|
|
|
|
class="vis-tpl"
|
|
|
|
|
data-vis-set="jqui-mfd"
|
|
|
|
|
data-vis-type="state,shutter"
|
|
|
|
|
data-vis-name="Shutter"
|
|
|
|
|
data-vis-prev='<div id="prev_tplMfdShutter" style="position: relative; text-align: initial;padding: 4px "><div data-oid="dev1" class="vis-widget_prev vis-widget ui-widget ui-button ui-corner-all ui-state-default" style="width: 70px; height: 70px;"><div class="vis-widget-prev-body"> <img style="filter: invert(1); -webkit-filter: invert(1); -moz-filter: invert(1); -o-filter: invert(1); -ms-filter: invert(1);" width="100%" src="widgets/jqui-mfd/img/fts_shutter_30.png"> </div></div></div>'
|
|
|
|
|
data-vis-attrs="oid;min;max;invert_icon/checkbox;asButton[true]/checkbox;iconColor/color;invert_value/checkbox;show_active/checkbox;"
|
|
|
|
|
data-vis-attrs0="group.colors;iconColor0/color;iconColor1/color;iconColor2/color;iconColor3/color;iconColor4/color;iconColor5/color;iconColor6/color;iconColor7/color;iconColor8/color;iconColor9/color;iconColor10/color;"
|
|
|
|
|
>
|
|
|
|
|
<div data-oid="<%= this.data.attr('oid') %>" class="vis-widget vis-widget <%= this.data.attr('asButton') ? ' ui-widget ui-button ui-corner-all ui-state-default' : '' %> <%= this.data.attr('class') %>" id="<%= this.data.attr('wid') %>" style="width:76px; height:76px; position:absolute" <%= (el) -> this.data.attr('show_active') ? vis.binds.jqueryui.classes(el, true) : '' %>><div class="vis-widget-body">
|
|
|
|
|
<%
|
|
|
|
|
var styles = '';
|
|
|
|
|
if (this.data.invert_icon === 'true' || this.data.invert_icon === true) {
|
|
|
|
|
styles = 'filter: invert(1); -webkit-filter: invert(1); -moz-filter: invert(1); -o-filter: invert(1); -ms-filter: invert(1);';
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
var max = (this.data.attr('max') !== undefined) ? this.data.attr('max') : 100;
|
|
|
|
|
var min = (this.data.attr('min') !== undefined) ? this.data.attr('min') : 0;
|
|
|
|
|
|
|
|
|
|
if (typeof max === 'string' && parseFloat(max).toString() == max) max = parseFloat(max);
|
|
|
|
|
if (typeof min === 'string' && parseFloat(min).toString() == min) min = parseFloat(min);
|
|
|
|
|
|
|
|
|
|
var val = max - parseFloat(vis.states.attr(this.data.oid + '.val')) + min;
|
|
|
|
|
if (this.data.invert_value) val = max - val + min;
|
|
|
|
|
var image = '';
|
|
|
|
|
var imageColor = null;
|
|
|
|
|
if (val >= max) {
|
|
|
|
|
image = "fts_shutter_100";
|
|
|
|
|
imageColor = this.data.attr('iconColor10');
|
|
|
|
|
} else if (val >= min + (max - min) * 0.9) {
|
|
|
|
|
image = "fts_shutter_90";
|
|
|
|
|
imageColor = this.data.attr('iconColor9');
|
|
|
|
|
} else if (val >= min + (max - min) * 0.8) {
|
|
|
|
|
image = "fts_shutter_80";
|
|
|
|
|
imageColor = this.data.attr('iconColor8');
|
|
|
|
|
} else if (val >= min + (max - min) * 0.7) {
|
|
|
|
|
image = "fts_shutter_70";
|
|
|
|
|
imageColor = this.data.attr('iconColor7');
|
|
|
|
|
} else if (val >= min + (max - min) * 0.6) {
|
|
|
|
|
image = "fts_shutter_60";
|
|
|
|
|
imageColor = this.data.attr('iconColor6');
|
|
|
|
|
} else if (val >= min + (max - min) * 0.5) {
|
|
|
|
|
image = "fts_shutter_50";
|
|
|
|
|
imageColor = this.data.attr('iconColor5');
|
|
|
|
|
} else if (val >= min + (max - min) * 0.4) {
|
|
|
|
|
image = "fts_shutter_40";
|
|
|
|
|
imageColor = this.data.attr('iconColor4');
|
|
|
|
|
} else if (val >= min + (max - min) * 0.3) {
|
|
|
|
|
image = "fts_shutter_30";
|
|
|
|
|
imageColor = this.data.attr('iconColor3');
|
|
|
|
|
} else if (val >= min + (max - min) * 0.2) {
|
|
|
|
|
image = "fts_shutter_20";
|
|
|
|
|
imageColor = this.data.attr('iconColor2');
|
|
|
|
|
} else if (val >= min + (max - min) * 0.1) {
|
|
|
|
|
image = "fts_shutter_10";
|
|
|
|
|
imageColor = this.data.attr('iconColor1');
|
|
|
|
|
} else {
|
|
|
|
|
image = "fts_window_2w";
|
|
|
|
|
imageColor = this.data.attr('iconColor0');
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if (!vis.binds['jqui-mfd'].isNotEmpty(imageColor)) {
|
|
|
|
|
imageColor = this.data.attr('iconColor');
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if (vis.binds['jqui-mfd'].isNotEmpty(imageColor)) {
|
|
|
|
|
%>
|
|
|
|
|
<img style="<%= styles %>" width="100%" src="widgets/jqui-mfd/img/<%= image %>.svg" <%= (el) -> vis.binds.jqueryui.setSvgColor(el, imageColor) %>/>
|
|
|
|
|
<% } else { %>
|
|
|
|
|
<img style="<%= styles %>" width="100%" src="widgets/jqui-mfd/img/<%= image %>.png" <%= (el) -> vis.binds['jqui-mfd'].removeSvg(this.data.attr('wid')) %>/>
|
|
|
|
|
<% } %>
|
|
|
|
|
</div></div>
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<script id="tplMfdShutterDialog"
|
|
|
|
|
type="text/ejs"
|
|
|
|
|
class="vis-tpl"
|
|
|
|
|
data-vis-set="jqui-mfd"
|
|
|
|
|
data-vis-type="ctrl,shutter,dialog"
|
|
|
|
|
data-vis-name="Shutter + jqui Dialog"
|
|
|
|
|
data-vis-prev='<div id="prev_tplMfdShutter" style="position: relative; text-align: initial;padding: 4px "><div data-oid="dev1" class="vis-widget_prev vis-widget ui-widget ui-button ui-corner-all ui-state-default ui-state-active" style="width: 70px; height: 70px;"><div class="vis-widget-prev-body"> <img style="filter: invert(1); -webkit-filter: invert(1); -moz-filter: invert(1); -o-filter: invert(1); -ms-filter: invert(1);" width="100%" src="widgets/jqui-mfd/img/fts_shutter_30.png"> </div></div></div>'
|
|
|
|
|
data-vis-attrs="oid;oid-working;min;max;invert_icon/checkbox;asButton[true]/checkbox;invert_value/checkbox;show_active/checkbox;iconColor/color;"
|
|
|
|
|
data-vis-attrs0="group.colors;iconColor0/color;iconColor1/color;iconColor2/color;iconColor3/color;iconColor4/color;iconColor5/color;iconColor6/color;iconColor7/color;iconColor8/color;iconColor9/color;iconColor10/color;"
|
|
|
|
|
data-vis-attrs1="group.dialog;title;noHeader/checkbox;autoclose/slider,0,30000,100;modal/checkbox;dialog_width[450];dialog_height[210];dialog_top;dialog_left;overflowX/nselect,,visible,hidden,scroll,auto,initial,inherit;overflowY/nselect,,visible,hidden,scroll,auto,initial,inherit;show_value/checkbox;units;"
|
|
|
|
|
>
|
|
|
|
|
<div data-oid="<%= this.data.attr('oid') %>" data-hm-wid="<%= this.data.attr('oid-working') %>" class="vis-widget <%= this.data.attr('asButton') ? ' ui-widget ui-button ui-corner-all ui-state-default' : '' %> <%= this.data.attr('class') %>" id="<%= this.data.attr('wid') %>" style="width:76px; height:76px; position:absolute" <%= (el) -> this.data.attr('show_active') ? vis.binds.jqueryui.classes(el, true) : '' %>>
|
|
|
|
|
<div id="<%= this.data.attr('wid') %>_body" class="vis-widget-body" style="width:100%; height:100%" <%= (el) -> vis.preloadImages(['widgets/jqui-mfd/img/light_light_dim_100.png','widgets/jqui-mfd/img/light_light_dim_90.png','widgets/jqui-mfd/img/light_light_dim_80.png','widgets/jqui-mfd/img/light_light_dim_70.png','widgets/jqui-mfd/img/light_light_dim_60.png','widgets/jqui-mfd/img/light_light_dim_50.png','widgets/jqui-mfd/img/light_light_dim_40.png','widgets/jqui-mfd/img/light_light_dim_30.png','widgets/jqui-mfd/img/light_light_dim_20.png','widgets/jqui-mfd/img/light_light_dim_10.png','widgets/jqui-mfd/img/light_light_dim.png']); %>>
|
|
|
|
|
<%
|
|
|
|
|
var styles = '';
|
|
|
|
|
if (this.data.invert_icon === 'true' || this.data.invert_icon === true) {
|
|
|
|
|
styles = 'filter: invert(1); -webkit-filter: invert(1); -moz-filter: invert(1); -o-filter: invert(1); -ms-filter: invert(1);';
|
|
|
|
|
}
|
|
|
|
|
var max = (this.data.attr('max') !== undefined) ? this.data.attr('max') : 100;
|
|
|
|
|
var min = (this.data.attr('min') !== undefined) ? this.data.attr('min') : 0;
|
|
|
|
|
|
|
|
|
|
if (typeof max === 'string' && parseFloat(max).toString() == max) max = parseFloat(max);
|
|
|
|
|
if (typeof min === 'string' && parseFloat(min).toString() == min) min = parseFloat(min);
|
|
|
|
|
|
|
|
|
|
var val = max - parseFloat(vis.states.attr(this.data.oid + '.val')) + min;
|
|
|
|
|
|
|
|
|
|
if (this.data.attr('invert_value')) val = max - val + min;
|
|
|
|
|
|
|
|
|
|
var image = '';
|
|
|
|
|
var imageColor = null;
|
|
|
|
|
if (val >= max) {
|
|
|
|
|
image = "fts_shutter_100";
|
|
|
|
|
imageColor = this.data.attr('iconColor10');
|
|
|
|
|
} else if (val >= min + (max - min) * 0.9) {
|
|
|
|
|
image = "fts_shutter_90";
|
|
|
|
|
imageColor = this.data.attr('iconColor9');
|
|
|
|
|
} else if (val >= min + (max - min) * 0.8) {
|
|
|
|
|
image = "fts_shutter_80";
|
|
|
|
|
imageColor = this.data.attr('iconColor8');
|
|
|
|
|
} else if (val >= min + (max - min) * 0.7) {
|
|
|
|
|
image = "fts_shutter_70";
|
|
|
|
|
imageColor = this.data.attr('iconColor7');
|
|
|
|
|
} else if (val >= min + (max - min) * 0.6) {
|
|
|
|
|
image = "fts_shutter_60";
|
|
|
|
|
imageColor = this.data.attr('iconColor6');
|
|
|
|
|
} else if (val >= min + (max - min) * 0.5) {
|
|
|
|
|
image = "fts_shutter_50";
|
|
|
|
|
imageColor = this.data.attr('iconColor5');
|
|
|
|
|
} else if (val >= min + (max - min) * 0.4) {
|
|
|
|
|
image = "fts_shutter_40";
|
|
|
|
|
imageColor = this.data.attr('iconColor4');
|
|
|
|
|
} else if (val >= min + (max - min) * 0.3) {
|
|
|
|
|
image = "fts_shutter_30";
|
|
|
|
|
imageColor = this.data.attr('iconColor3');
|
|
|
|
|
} else if (val >= min + (max - min) * 0.2) {
|
|
|
|
|
image = "fts_shutter_20";
|
|
|
|
|
imageColor = this.data.attr('iconColor2');
|
|
|
|
|
} else if (val >= min + (max - min) * 0.1) {
|
|
|
|
|
image = "fts_shutter_10";
|
|
|
|
|
imageColor = this.data.attr('iconColor1');
|
|
|
|
|
} else {
|
|
|
|
|
image = "fts_window_2w";
|
|
|
|
|
imageColor = this.data.attr('iconColor0');
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if (!vis.binds['jqui-mfd'].isNotEmpty(imageColor)) {
|
|
|
|
|
imageColor = this.data.attr('iconColor');
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if (vis.binds['jqui-mfd'].isNotEmpty(imageColor)) {
|
|
|
|
|
%>
|
|
|
|
|
<img style="<%= styles %>" width="100%" src="widgets/jqui-mfd/img/<%= image %>.svg" <%= (el) -> vis.binds.jqueryui.setSvgColor(el, imageColor) %>/>
|
|
|
|
|
<% } else { %>
|
|
|
|
|
<img style="<%= styles %>" width="100%" src="widgets/jqui-mfd/img/<%= image %>.png" <%= (el) -> vis.binds['jqui-mfd'].removeSvg(this.data.attr('wid')) %>/>
|
|
|
|
|
<% } %>
|
|
|
|
|
</div>
|
|
|
|
|
<div id="<%= this.data.attr('wid') %>_dialog" class="<%= this.data.attr('wid') %>_dialog vis-widget-dialog" title="<%== this.data.title || this.data.attr('oid') %>" style="padding-left: 20px;">
|
|
|
|
|
<div id="<%= this.data.attr('wid') %>_radio" class="<%= this.data.attr('wid') %>_radio" style="text-align: center" data-oid="<%= this.data.attr('oid') %>" <%= (el) -> vis.binds.jqueryui.radio(el); %> >
|
|
|
|
|
<%
|
|
|
|
|
var max = (this.data.attr('max') !== undefined) ? this.data.attr('max') : 100;
|
|
|
|
|
var min = (this.data.attr('min') !== undefined) ? this.data.attr('min') : 0;
|
|
|
|
|
|
|
|
|
|
if (typeof max === 'string' && parseFloat(max).toString() == max) max = parseFloat(max);
|
|
|
|
|
if (typeof min === 'string' && parseFloat(min).toString() == min) min = parseFloat(min);
|
|
|
|
|
|
|
|
|
|
%>
|
|
|
|
|
<input type="radio" id="<%= this.data.attr('wid') %>_radio0" name="<%= this.data.attr('wid') %>_radio" value="<%= !this.data.attr('invert_value') ? min : max %>" checked="checked"/><label for="<%= this.data.attr('wid') %>_radio0"><%= _('closed') %></label>
|
|
|
|
|
<input type="radio" id="<%= this.data.attr('wid') %>_radio1" name="<%= this.data.attr('wid') %>_radio" value="<%= !this.data.attr('invert_value') ? min + (max - min) * 0.25 : min + (max - min) * 0.75 %>" checked="checked"/><label for="<%= this.data.attr('wid') %>_radio1"><%= !this.data.attr('invert_value') ? '25%' : '75%' %></label>
|
|
|
|
|
<input type="radio" id="<%= this.data.attr('wid') %>_radio2" name="<%= this.data.attr('wid') %>_radio" value="<%= min + (max - min) * 0.5 %>" checked="checked"/><label for="<%= this.data.attr('wid') %>_radio2">50%</label>
|
|
|
|
|
<input type="radio" id="<%= this.data.attr('wid') %>_radio3" name="<%= this.data.attr('wid') %>_radio" value="<%= !this.data.attr('invert_value') ? min + (max - min) * 0.75 : min + (max - min) * 0.25 %>" checked="checked"/><label for="<%= this.data.attr('wid') %>_radio3"><%= !this.data.attr('invert_value') ? '75%' : '25%' %></label>
|
|
|
|
|
<input type="radio" id="<%= this.data.attr('wid') %>_radio4" name="<%= this.data.attr('wid') %>_radio" value="<%= !this.data.attr('invert_value') ? max : min %>"/><label for="<%= this.data.attr('wid') %>_radio4"><%= _('open') %></label>
|
|
|
|
|
</div>
|
|
|
|
|
<br/>
|
|
|
|
|
<div class="sliderJQUI" style="width: 90%" id="<%= this.data.attr('wid') %>_slider" data-oid="<%= this.data.attr('oid') %>" data-hm-wid="<%= this.data.attr('oid-working') %>" <%= (el) -> vis.binds.jqueryui.slider(el, {min: min, max: max, step: (max - min) / 100, inverted: this.data.attr('invert_value')}) %> />
|
|
|
|
|
<br/>
|
|
|
|
|
<%= vis.states.attr(this.data.oid + '.val') ? (((parseFloat(vis.states.attr(this.data.oid + '.val')) - min) / (max - min)) * 100).toFixed(0) : 0 %>%
|
|
|
|
|
<%= (this.data.show_value === 'true' || this.data.show_value === true) ? '(' + Math.round(parseFloat(vis.states.attr(this.data.oid + '.val') * 100) / 100) + ' ' + this.data.attr('units') + ')' : '' %>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="popup-helper" <%= (el) -> vis.binds.jqueryui.dialog(el, data, true) %> />
|
|
|
|
|
<div class="popup-helper" <%= (el) -> vis.binds.jqueryui.dialogAutoClose(el, data.attr('autoclose')) %> />
|
|
|
|
|
</div>
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<script id="tplMfdBlind"
|
|
|
|
|
type="text/ejs"
|
|
|
|
|
class="vis-tpl"
|
|
|
|
|
data-vis-set="jqui-mfd"
|
|
|
|
|
data-vis-type="state,blind"
|
|
|
|
|
data-vis-name="Shutter"
|
|
|
|
|
data-vis-prev='<div id="prev_tplMfdBlind" style="position: relative; text-align: initial;padding: 4px "><div class="vis-widget_prev vis-widget ui-widget ui-button ui-corner-all ui-state-default" style="width: 70px; height: 70px;"><div class="vis-widget-prev-body"> <img style="filter: invert(1); -webkit-filter: invert(1); -moz-filter: invert(1); -o-filter: invert(1); -ms-filter: invert(1);" width="100%" src="widgets/jqui-mfd/img/fts_markise_75.png"> </div></div></div>'
|
|
|
|
|
data-vis-attrs="oid;min;max;invert_icon/checkbox;asButton[true]/checkbox;iconColor/color;invert_value/checkbox;show_active/checkbox;"
|
|
|
|
|
data-vis-attrs0="group.colors;iconColor0/color;iconColor25/color;iconColor5/color;iconColor75/color;iconColor10/color;"
|
|
|
|
|
>
|
|
|
|
|
<div data-oid="<%= this.data.attr('oid') %>" class="vis-widget vis-widget <%= this.data.attr('asButton') ? ' ui-widget ui-button ui-corner-all ui-state-default' : '' %> <%= this.data.attr('class') %>" id="<%= this.data.attr('wid') %>" style="width:76px; height:76px; position:absolute" <%= (el) -> this.data.attr('show_active') ? vis.binds.jqueryui.classes(el, true) : '' %>><div class="vis-widget-body">
|
|
|
|
|
<%
|
|
|
|
|
var styles = '';
|
|
|
|
|
if (this.data.invert_icon === 'true' || this.data.invert_icon === true) {
|
|
|
|
|
styles = 'filter: invert(1); -webkit-filter: invert(1); -moz-filter: invert(1); -o-filter: invert(1); -ms-filter: invert(1);';
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
var max = (this.data.attr('max') !== undefined) ? this.data.attr('max') : 100;
|
|
|
|
|
var min = (this.data.attr('min') !== undefined) ? this.data.attr('min') : 0;
|
|
|
|
|
|
|
|
|
|
if (typeof max === 'string' && parseFloat(max).toString() == max) max = parseFloat(max);
|
|
|
|
|
if (typeof min === 'string' && parseFloat(min).toString() == min) min = parseFloat(min);
|
|
|
|
|
|
|
|
|
|
var val = parseFloat(vis.states.attr(this.data.oid + '.val'));
|
|
|
|
|
if (this.data.invert_value) val = max - val + min;
|
|
|
|
|
var image = '';
|
|
|
|
|
var imageColor = null;
|
|
|
|
|
if (val >= max) {
|
|
|
|
|
image = "fts_markise_100";
|
|
|
|
|
imageColor = this.data.attr('iconColor10');
|
|
|
|
|
} else if (val >= min + (max - min) * 0.75) {
|
|
|
|
|
image = "fts_markise_75";
|
|
|
|
|
imageColor = this.data.attr('iconColor75');
|
|
|
|
|
} else if (val >= min + (max - min) * 0.5) {
|
|
|
|
|
image = "fts_markise_50";
|
|
|
|
|
imageColor = this.data.attr('iconColor5');
|
|
|
|
|
} else if (val >= min + (max - min) * 0.25) {
|
|
|
|
|
image = "fts_markise_25";
|
|
|
|
|
imageColor = this.data.attr('iconColor25');
|
|
|
|
|
} else {
|
|
|
|
|
image = "fts_markise_0";
|
|
|
|
|
imageColor = this.data.attr('iconColor0');
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if (!vis.binds['jqui-mfd'].isNotEmpty(imageColor)) {
|
|
|
|
|
imageColor = this.data.attr('iconColor');
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if (vis.binds['jqui-mfd'].isNotEmpty(imageColor)) {
|
|
|
|
|
%>
|
|
|
|
|
<img style="<%= styles %>" width="100%" src="widgets/jqui-mfd/img/<%= image %>.svg" <%= (el) -> vis.binds.jqueryui.setSvgColor(el, imageColor) %>/>
|
|
|
|
|
<% } else { %>
|
|
|
|
|
<img style="<%= styles %>" width="100%" src="widgets/jqui-mfd/img/<%= image %>.png" <%= (el) -> vis.binds['jqui-mfd'].removeSvg(this.data.attr('wid')) %>/>
|
|
|
|
|
<% } %>
|
|
|
|
|
</div></div>
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<script id="tplMfdBlindDialog"
|
|
|
|
|
type="text/ejs"
|
|
|
|
|
class="vis-tpl"
|
|
|
|
|
data-vis-set="jqui-mfd"
|
|
|
|
|
data-vis-type="ctrl,blind,dialog"
|
|
|
|
|
data-vis-name="Blind + jqui Dialog"
|
|
|
|
|
data-vis-prev='<div id="prev_tplMfdBlind" style="position: relative; text-align: initial; padding: 4px "><div data-oid="dev1" class="vis-widget_prev vis-widget ui-widget ui-button ui-corner-all ui-state-default ui-state-active" style="width: 70px; height: 70px;"><div class="vis-widget-prev-body"> <img style="filter: invert(1); -webkit-filter: invert(1); -moz-filter: invert(1); -o-filter: invert(1); -ms-filter: invert(1);" width="100%" src="widgets/jqui-mfd/img/fts_markise_100.png"> </div></div></div>'
|
|
|
|
|
data-vis-attrs="oid;oid-working;min;max;invert_icon/checkbox;asButton[true]/checkbox;invert_value/checkbox;show_active/checkbox;iconColor/color;"
|
|
|
|
|
data-vis-attrs0="group.colors;iconColor0/color;iconColor25/color;iconColor5/color;iconColor75/color;iconColor10/color;"
|
|
|
|
|
data-vis-attrs1="group.dialog;title;noHeader/checkbox;autoclose/slider,0,30000,100;modal/checkbox;dialog_width[450];dialog_height[210];dialog_top;dialog_left;overflowX/nselect,,visible,hidden,scroll,auto,initial,inherit;overflowY/nselect,,visible,hidden,scroll,auto,initial,inherit;show_value/checkbox;units;"
|
|
|
|
|
>
|
|
|
|
|
<div data-oid="<%= this.data.attr('oid') %>" data-hm-wid="<%= this.data.attr('oid-working') %>" class="vis-widget <%= this.data.attr('asButton') ? ' ui-widget ui-button ui-corner-all ui-state-default' : '' %> <%= this.data.attr('class') %>" id="<%= this.data.attr('wid') %>" style="width:76px; height:76px; position:absolute" <%= (el) -> this.data.attr('show_active') ? vis.binds.jqueryui.classes(el, true) : '' %>>
|
|
|
|
|
<div id="<%= this.data.attr('wid') %>_body" class="vis-widget-body" style="width:100%; height:100%" <%= (el) -> vis.preloadImages(['widgets/jqui-mfd/img/light_light_dim_100.png','widgets/jqui-mfd/img/light_light_dim_90.png','widgets/jqui-mfd/img/light_light_dim_80.png','widgets/jqui-mfd/img/light_light_dim_70.png','widgets/jqui-mfd/img/light_light_dim_60.png','widgets/jqui-mfd/img/light_light_dim_50.png','widgets/jqui-mfd/img/light_light_dim_40.png','widgets/jqui-mfd/img/light_light_dim_30.png','widgets/jqui-mfd/img/light_light_dim_20.png','widgets/jqui-mfd/img/light_light_dim_10.png','widgets/jqui-mfd/img/light_light_dim.png']); %>>
|
|
|
|
|
<%
|
|
|
|
|
var styles = '';
|
|
|
|
|
if (this.data.invert_icon === 'true' || this.data.invert_icon === true) {
|
|
|
|
|
styles = 'filter: invert(1); -webkit-filter: invert(1); -moz-filter: invert(1); -o-filter: invert(1); -ms-filter: invert(1);';
|
|
|
|
|
}
|
|
|
|
|
var max = (this.data.attr('max') !== undefined) ? this.data.attr('max') : 100;
|
|
|
|
|
var min = (this.data.attr('min') !== undefined) ? this.data.attr('min') : 0;
|
|
|
|
|
|
|
|
|
|
if (typeof max === 'string' && parseFloat(max).toString() == max) max = parseFloat(max);
|
|
|
|
|
if (typeof min === 'string' && parseFloat(min).toString() == min) min = parseFloat(min);
|
|
|
|
|
|
|
|
|
|
var val = parseFloat(vis.states.attr(this.data.oid + '.val'));
|
|
|
|
|
|
|
|
|
|
if (this.data.attr('invert_value')) val = max - val + min;
|
|
|
|
|
|
|
|
|
|
var image = '';
|
|
|
|
|
var imageColor = null;
|
|
|
|
|
if (val >= max) {
|
|
|
|
|
image = "fts_markise_100";
|
|
|
|
|
imageColor = this.data.attr('iconColor10');
|
|
|
|
|
} else if (val >= min + (max - min) * 0.75) {
|
|
|
|
|
image = "fts_markise_75";
|
|
|
|
|
imageColor = this.data.attr('iconColor75');
|
|
|
|
|
} else if (val >= min + (max - min) * 0.5) {
|
|
|
|
|
image = "fts_markise_50";
|
|
|
|
|
imageColor = this.data.attr('iconColor5');
|
|
|
|
|
} else if (val >= min + (max - min) * 0.25) {
|
|
|
|
|
image = "fts_markise_25";
|
|
|
|
|
imageColor = this.data.attr('iconColor25');
|
|
|
|
|
} else {
|
|
|
|
|
image = "fts_markise_0";
|
|
|
|
|
imageColor = this.data.attr('iconColor0');
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if (!vis.binds['jqui-mfd'].isNotEmpty(imageColor)) {
|
|
|
|
|
imageColor = this.data.attr('iconColor');
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if (vis.binds['jqui-mfd'].isNotEmpty(imageColor)) {
|
|
|
|
|
%>
|
|
|
|
|
<img style="<%= styles %>" width="100%" src="widgets/jqui-mfd/img/<%= image %>.svg" <%= (el) -> vis.binds.jqueryui.setSvgColor(el, imageColor) %>/>
|
|
|
|
|
<% } else { %>
|
|
|
|
|
<img style="<%= styles %>" width="100%" src="widgets/jqui-mfd/img/<%= image %>.png" <%= (el) -> vis.binds['jqui-mfd'].removeSvg(this.data.attr('wid')) %>/>
|
|
|
|
|
<% } %>
|
|
|
|
|
</div>
|
|
|
|
|
<div id="<%= this.data.attr('wid') %>_dialog" class="<%= this.data.attr('wid') %>_dialog vis-widget-dialog" title="<%== this.data.title || this.data.attr('oid') %>" style="padding-left: 20px;">
|
|
|
|
|
<div id="<%= this.data.attr('wid') %>_radio" class="<%= this.data.attr('wid') %>_radio" style="text-align: center" data-oid="<%= this.data.attr('oid') %>" <%= (el) -> vis.binds.jqueryui.radio(el); %> >
|
|
|
|
|
<%
|
|
|
|
|
var max = (this.data.attr('max') !== undefined) ? this.data.attr('max') : 100;
|
|
|
|
|
var min = (this.data.attr('min') !== undefined) ? this.data.attr('min') : 0;
|
|
|
|
|
|
|
|
|
|
if (typeof max === 'string' && parseFloat(max).toString() == max) max = parseFloat(max);
|
|
|
|
|
if (typeof min === 'string' && parseFloat(min).toString() == min) min = parseFloat(min);
|
|
|
|
|
|
|
|
|
|
%>
|
|
|
|
|
<input type="radio" id="<%= this.data.attr('wid') %>_radio0" name="<%= this.data.attr('wid') %>_radio" value="<%= !this.data.attr('invert_value') ? min : max %>" checked="checked"/><label for="<%= this.data.attr('wid') %>_radio0"><%= _('closed') %></label>
|
|
|
|
|
<input type="radio" id="<%= this.data.attr('wid') %>_radio1" name="<%= this.data.attr('wid') %>_radio" value="<%= !this.data.attr('invert_value') ? min + (max - min) * 0.25 : min + (max - min) * 0.75 %>" checked="checked"/><label for="<%= this.data.attr('wid') %>_radio1">25%</label>
|
|
|
|
|
<input type="radio" id="<%= this.data.attr('wid') %>_radio2" name="<%= this.data.attr('wid') %>_radio" value="<%= min + (max - min) * 0.5 %>" checked="checked"/><label for="<%= this.data.attr('wid') %>_radio2">50%</label>
|
|
|
|
|
<input type="radio" id="<%= this.data.attr('wid') %>_radio3" name="<%= this.data.attr('wid') %>_radio" value="<%= !this.data.attr('invert_value') ? min + (max - min) * 0.75 : min + (max - min) * 0.25 %>" checked="checked"/><label for="<%= this.data.attr('wid') %>_radio3">75%</label>
|
|
|
|
|
<input type="radio" id="<%= this.data.attr('wid') %>_radio4" name="<%= this.data.attr('wid') %>_radio" value="<%= !this.data.attr('invert_value') ? max : min %>"/><label for="<%= this.data.attr('wid') %>_radio4"><%= _('open') %></label>
|
|
|
|
|
</div>
|
|
|
|
|
<br/>
|
|
|
|
|
<div class="sliderJQUI" style="width: 90%" id="<%= this.data.attr('wid') %>_slider" data-oid="<%= this.data.attr('oid') %>" data-hm-wid="<%= this.data.attr('oid-working') %>" <%= (el) -> vis.binds.jqueryui.slider(el, {min: min, max: max, step: (max - min) / 100, inverted: this.data.attr('invert_value')}) %> />
|
|
|
|
|
<br/>
|
|
|
|
|
<%= vis.states.attr(this.data.oid + '.val') ? (((parseFloat(vis.states.attr(this.data.oid + '.val')) - min) / (max - min)) * 100).toFixed(0) : 0 %>%
|
|
|
|
|
<%= (this.data.show_value === 'true' || this.data.show_value === true) ? '(' + Math.round(parseFloat(vis.states.attr(this.data.oid + '.val') * 100) / 100) + ' ' + this.data.attr('units') + ')' : '' %>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="popup-helper" <%= (el) -> vis.binds.jqueryui.dialog(el, data, true) %> />
|
|
|
|
|
<div class="popup-helper" <%= (el) -> vis.binds.jqueryui.dialogAutoClose(el, data.attr('autoclose')) %> />
|
|
|
|
|
</div>
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<script id="tplMfdHeating"
|
|
|
|
|
type="text/ejs"
|
|
|
|
|
class="vis-tpl"
|
|
|
|
|
data-vis-set="jqui-mfd"
|
|
|
|
|
data-vis-prev='<div id="prev_tplMfdHeating" style="position: relative; text-align: initial;padding: 4px"><div class="vis-widget_prev ui-widget ui-button ui-corner-all ui-state-default " style="width: 70px; height: 70px;"> <div class="vis-widget-prev-body" style="width:100%; height:100%"> <img style="filter: invert(1); -webkit-filter: invert(1); -moz-filter: invert(1); -o-filter: invert(1); -ms-filter: invert(1);" src="widgets/jqui-mfd/img/sani_heating_temp.png" width="100%"> </div></div>'
|
|
|
|
|
data-vis-type="ctrl,heating,dialog"
|
|
|
|
|
data-vis-name="ctrl - Heating + jqui Dialog"
|
|
|
|
|
data-vis-attrs="oid;oid-working;min[18];max[30];step[2];roundnumber[0];checkboxDisplay[image]/select,image,text;invert_icon/checkbox;asButton[true]/checkbox;iconColor/color;"
|
|
|
|
|
data-vis-attrs0="group.dialog;title;noHeader/checkbox;autoclose/slider,0,30000,100;modal/checkbox;dialog_width[600];dialog_height[200];"
|
|
|
|
|
>
|
|
|
|
|
<div data-oid="<%= this.data.attr('oid') %>" class="vis-widget <%= this.data.attr('asButton') ? ' ui-widget ui-button ui-corner-all ui-state-default' : '' %> <%= this.data.attr('class') %>" id="<%= this.data.attr('wid') %>" style="<%= this.data.attr('checkboxDisplay') == 'image' ? 'width:76px; height:76px; ' : '' %>position:absolute" >
|
|
|
|
|
<div id="<%= this.data.attr('wid') %>_body" class="vis-widget-body" style="width:100%; height:100%">
|
|
|
|
|
<%
|
|
|
|
|
var styles = '';
|
|
|
|
|
if (this.data.invert_icon === 'true' || this.data.invert_icon === true) {
|
|
|
|
|
styles = 'filter: invert(1); -webkit-filter: invert(1); -moz-filter: invert(1); -o-filter: invert(1); -ms-filter: invert(1);';
|
|
|
|
|
}
|
|
|
|
|
if (this.data.attr('checkboxDisplay') == 'image') {
|
|
|
|
|
if (this.data.attr('iconColor')) {
|
|
|
|
|
%>
|
|
|
|
|
<img style="<%= styles %>" width="100%" src="widgets/jqui-mfd/img/sani_heating_temp.svg" <%= (el) -> vis.binds.jqueryui.setSvgColor(el, this.data.attr('iconColor')) %>/>
|
|
|
|
|
<% } else { %>
|
|
|
|
|
<img style="<%= styles %>" width="100%" src="widgets/jqui-mfd/img/sani_heating_temp.png" <%= (el) -> vis.binds['jqui-mfd'].removeSvg(this.data.attr('wid')) %>/>
|
|
|
|
|
<% } %>
|
|
|
|
|
<% } else { %>
|
|
|
|
|
<% var dec = (this.data.attr('roundnumber') !== undefined || this.data.attr('roundnumber') >= 0) ? this.data.attr('roundnumber') : 0; %>
|
|
|
|
|
<span class="actTemp"><%= (parseFloat(vis.states.attr(this.data.oid + '.val'))).toFixed(dec) %> °C</span>
|
|
|
|
|
<% } %>
|
|
|
|
|
</div>
|
|
|
|
|
<div id="<%= this.data.attr('wid') %>_dialog" class="<%= this.data.attr('wid') %>_dialog vis-widget-dialog" title="<%== this.data.title || this.data.attr('oid') %>" style="padding-left:20px;">
|
|
|
|
|
<div id="<%= this.data.attr('wid') %>_radio" class="<%= this.data.attr('wid') %>_radio" style="text-align: center" data-oid="<%= this.data.attr('oid') %>" <%= (el) -> vis.binds.jqueryui.radio(el); %> >
|
|
|
|
|
<%
|
|
|
|
|
var min = (this.data.attr('min') !== undefined) ? this.data.attr('min') : 18;
|
|
|
|
|
var max = (this.data.attr('max') !== undefined) ? this.data.attr('max') : 30;
|
|
|
|
|
var step = (this.data.attr('step') !== undefined) ? this.data.attr('step') : 2;
|
|
|
|
|
var dec = (this.data.attr('roundnumber') !== undefined || this.data.attr('roundnumber') >= 0) ? this.data.attr('roundnumber') : 0;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
if (typeof min === 'string' && parseFloat(min).toString() == min) min = parseFloat(min);
|
|
|
|
|
if (typeof max === 'string' && parseFloat(max).toString() == max) max = parseFloat(max);
|
|
|
|
|
if (typeof step === 'string' && parseFloat(step).toString() == step) step = parseFloat(step);
|
|
|
|
|
|
|
|
|
|
var temparr = [];
|
|
|
|
|
if (step > 0 && min < max) {
|
|
|
|
|
for (var i = min; i <= max; i += step) {
|
|
|
|
|
temparr.push(i);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
for (var i = 0; i < temparr.length; i++) { %>
|
|
|
|
|
<input type="radio" id="<%= this.data.attr('wid') %>_radio<%= i %>" name="<%= this.data.attr('wid') %>_radio" value="<%= parseFloat(temparr[i]).toFixed(dec) %>" /><label for="<%= this.data.attr('wid') %>_radio<%= i %>"><%= parseFloat(temparr[i]).toFixed(dec) %> °C</label>
|
|
|
|
|
<% } %>
|
|
|
|
|
</div>
|
|
|
|
|
<br/>
|
|
|
|
|
<%
|
|
|
|
|
var min = (this.data.attr('min') !== undefined) ? this.data.attr('min') : 18;
|
|
|
|
|
var max = (this.data.attr('max') !== undefined) ? this.data.attr('max') : 30;
|
|
|
|
|
var step = (this.data.attr('step') !== undefined) ? this.data.attr('step') : 2;
|
|
|
|
|
var dec = (this.data.attr('roundnumber') !== undefined || this.data.attr('roundnumber') >= 0) ? this.data.attr('roundnumber') : 0;
|
|
|
|
|
|
|
|
|
|
if (typeof min === 'string' && parseFloat(min).toString() == min) min = parseFloat(min);
|
|
|
|
|
if (typeof max === 'string' && parseFloat(max).toString() == max) max = parseFloat(max);
|
|
|
|
|
if (typeof step === 'string' && parseFloat(step).toString() == step) step = parseFloat(step);
|
|
|
|
|
%>
|
|
|
|
|
<div class="sliderJQUI" style="width:90%" id="<%= this.data.attr('wid') %>_slider" data-oid="<%= this.data.attr('oid') %>" data-hm-wid="<%= this.data.attr('oid-working') %>" <%= (el) -> vis.binds.jqueryui.slider(el, {min: min, max: max,step: step}) %> />
|
|
|
|
|
<br/>
|
|
|
|
|
<%= (parseFloat(vis.states.attr(this.data.oid + '.val'))).toFixed(dec) %>°C
|
|
|
|
|
</div>
|
|
|
|
|
<div class="popup-helper" <%= (el) -> vis.binds.jqueryui.dialog(el, data, true) %> />
|
|
|
|
|
<div class="popup-helper" <%= (el) -> vis.binds.jqueryui.dialogAutoClose(el, data.attr('autoclose')) %> />
|
|
|
|
|
</div>
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<script id="tplMfdWindow"
|
|
|
|
|
type="text/ejs"
|
|
|
|
|
class="vis-tpl"
|
|
|
|
|
data-vis-set="jqui-mfd"
|
|
|
|
|
data-vis-type="val,window"
|
|
|
|
|
data-vis-name="Window Rotate Handle"
|
|
|
|
|
data-vis-prev='<div id="prev_tplMfdWindow" style="position: relative; text-align: initial;padding: 4px "><div class="vis-widget_prev ui-widget ui-button ui-corner-all ui-state-default" style="height: 70px; width: 70px;"> <div class="vis-widget-prev-body"> <img style="filter: invert(1); -webkit-filter: invert(1); -moz-filter: invert(1); -o-filter: invert(1); -ms-filter: invert(1);" height="100%" src="widgets/jqui-mfd/img/fts_window_1w_open.png"> </div> </div></div>'
|
|
|
|
|
data-vis-attrs="oid;invert_icon/checkbox;asButton[true]/checkbox;iconColor/color;"
|
|
|
|
|
data-vis-attrs0="group.values;closed_value;tilted_value;opened_value;"
|
|
|
|
|
data-vis-attrs1="group.icons;closed_icon/image;closed_iconColor/color;tilted_icon/image;tilted_iconColor/color;opened_icon/image;opened_iconColor/color"
|
|
|
|
|
>
|
|
|
|
|
<div class="vis-widget <%= this.data.attr('asButton') ? ' ui-widget ui-button ui-corner-all ui-state-default' : '' %> <%= this.data.attr('class') %>" id="<%= this.data.attr('wid') %>" data-oid="<%= this.data.attr('oid') %>" style="height:76px; width:76px; position:absolute" data-min="<%= this.data.attr('closed_value') %>" data-max="<%= this.data.attr('opened_value') %>" <%= (el) -> this.data.attr('asButton') ? vis.binds.jqueryui.active(el) : '' %> >
|
|
|
|
|
<div class="vis-widget-body">
|
|
|
|
|
<%
|
|
|
|
|
var styles = '';
|
|
|
|
|
if (this.data.invert_icon === 'true' || this.data.invert_icon === true) {
|
|
|
|
|
styles = 'filter: invert(1); -webkit-filter: invert(1); -moz-filter: invert(1); -o-filter: invert(1); -ms-filter: invert(1);';
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
var opened = this.data.attr('opened_value');
|
|
|
|
|
if (opened === undefined || opened === '') opened = 1;
|
|
|
|
|
|
|
|
|
|
var closed = this.data.attr('closed_value');
|
|
|
|
|
if (closed === undefined || closed === '') closed = 0;
|
|
|
|
|
|
|
|
|
|
var tilted = this.data.attr('tilted_value');
|
|
|
|
|
if (tilted === undefined || tilted === '') tilted = 2;
|
|
|
|
|
|
|
|
|
|
var val = vis.states.attr(this.data.oid + '.val');
|
|
|
|
|
if (val === 'true' || val === true) val = opened;
|
|
|
|
|
if (val === 'false' || val === false || val === undefined || val === null || val === '') val = closed;
|
|
|
|
|
|
|
|
|
|
var image = null;
|
|
|
|
|
var imageColor = null;
|
|
|
|
|
if (val == closed) {
|
|
|
|
|
imageColor = this.data.attr('closed_iconColor') ? this.data.attr('closed_iconColor') : this.data.attr('iconColor');
|
|
|
|
|
image = this.data.attr('closed_icon');
|
|
|
|
|
if (!image) {
|
|
|
|
|
image = imageColor ? "widgets/jqui-mfd/img/fts_window_1w.svg" : "widgets/jqui-mfd/img/fts_window_1w.png";
|
|
|
|
|
}
|
|
|
|
|
} else if (val == tilted) {
|
|
|
|
|
imageColor = this.data.attr('tilted_iconColor') ? this.data.attr('tilted_iconColor') : this.data.attr('iconColor');
|
|
|
|
|
image = this.data.attr('tilted_icon');
|
|
|
|
|
if (!image) {
|
|
|
|
|
image = imageColor ? "widgets/jqui-mfd/img/fts_window_1w_tilt.svg" : "widgets/jqui-mfd/img/fts_window_1w_tilt.png";
|
|
|
|
|
}
|
|
|
|
|
} else {
|
|
|
|
|
imageColor = this.data.attr('opened_iconColor') ? this.data.attr('opened_iconColor') : this.data.attr('iconColor');
|
|
|
|
|
image = this.data.attr('opened_icon');
|
|
|
|
|
if (!image) {
|
|
|
|
|
image = imageColor ? "widgets/jqui-mfd/img/fts_window_1w_open.svg" : "widgets/jqui-mfd/img/fts_window_1w_open.png";
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if (vis.binds['jqui-mfd'].isNotEmpty(imageColor)) {
|
|
|
|
|
%>
|
|
|
|
|
<img style="<%= styles %>" width="100%" src="<%= image %>" <%= (el) -> vis.binds.jqueryui.setSvgColor(el, imageColor) %> />
|
|
|
|
|
<%
|
|
|
|
|
} else {
|
|
|
|
|
%>
|
|
|
|
|
<img style="<%= styles %>" width="100%" src="<%= image %>" <%= (el) -> vis.binds['jqui-mfd'].removeSvg(this.data.attr('wid')) %>/>
|
|
|
|
|
<%
|
|
|
|
|
}
|
|
|
|
|
%>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<script id="tplMfdWindowBool"
|
|
|
|
|
type="text/ejs"
|
|
|
|
|
class="vis-tpl"
|
|
|
|
|
data-vis-set="jqui-mfd"
|
|
|
|
|
data-vis-type="val,window"
|
|
|
|
|
data-vis-name="Window"
|
|
|
|
|
data-vis-prev='<div id="prev_tplMfdWindowBool" style="position: relative; text-align: initial;padding: 4px "><div class="vis-widget_prev ui-widget ui-button ui-corner-all ui-state-default ui-state-active" style="height: 70px; width: 70px;"> <div class="vis-widget-prev-body"> <img style="filter: invert(1); -webkit-filter: invert(1); -moz-filter: invert(1); -o-filter: invert(1); -ms-filter: invert(1);" height="100%" src="widgets/jqui-mfd/img/fts_window_1w_open.png"></div></div></div>'
|
|
|
|
|
data-vis-attrs="oid;invert_icon/checkbox;invert_state/checkbox;asButton[true]/checkbox;iconColor/color;"
|
|
|
|
|
data-vis-attrs0="group.values;closed_value;opened_value;"
|
|
|
|
|
data-vis-attrs1="group.icons;closed_icon/image;closed_iconColor/color;opened_icon/image;opened_iconColor/color;"
|
|
|
|
|
>
|
|
|
|
|
<div class="vis-widget <%= this.data.attr('asButton') ? ' ui-widget ui-button ui-corner-all ui-state-default' : '' %> <%= this.data.attr('class') %>" id="<%= this.data.attr('wid') %>" data-oid="<%= this.data.attr('oid') %>" style="height:76px; width:76px; position:absolute" data-min="<%= this.data.attr('closed_value') %>" data-max="<%= this.data.attr('opened_value') %>" <%= (el) -> this.data.attr('asButton') ? vis.binds.jqueryui.active(el, this.data.invert_state) : '' %> >
|
|
|
|
|
<div class="vis-widget-body">
|
|
|
|
|
<%
|
|
|
|
|
var styles = '';
|
|
|
|
|
if (this.data.invert_icon === 'true' || this.data.invert_icon === true) {
|
|
|
|
|
styles = 'filter: invert(1); -webkit-filter: invert(1); -moz-filter: invert(1); -o-filter: invert(1); -ms-filter: invert(1);';
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
var opened = this.data.attr('opened_value');
|
|
|
|
|
var closed = this.data.attr('closed_value');
|
|
|
|
|
|
|
|
|
|
var val = vis.states.attr(this.data.oid + '.val');
|
|
|
|
|
|
|
|
|
|
if (opened === undefined || opened === '' || opened === null) {
|
|
|
|
|
opened = 1;
|
|
|
|
|
closed = 0;
|
|
|
|
|
|
|
|
|
|
if (val === 'true' || val === true) val = opened;
|
|
|
|
|
if (val === 'false' || val === false) val = closed;
|
|
|
|
|
|
|
|
|
|
val = parseFloat(val) || 0;
|
|
|
|
|
val = (val > closed) ? opened : closed;
|
|
|
|
|
}
|
|
|
|
|
if (this.data.invert_state) {
|
|
|
|
|
if (val == opened) {
|
|
|
|
|
val = closed;
|
|
|
|
|
} else {
|
|
|
|
|
val = opened;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
var image = null;
|
|
|
|
|
var imageColor = null;
|
|
|
|
|
if (val != opened) {
|
|
|
|
|
imageColor = this.data.attr('closed_iconColor') ? this.data.attr('closed_iconColor') : this.data.attr('iconColor');
|
|
|
|
|
image = this.data.attr('closed_icon');
|
|
|
|
|
if (!image) {
|
|
|
|
|
image = imageColor ? "widgets/jqui-mfd/img/fts_window_1w.svg" : "widgets/jqui-mfd/img/fts_window_1w.png";
|
|
|
|
|
}
|
|
|
|
|
} else {
|
|
|
|
|
imageColor = this.data.attr('opened_iconColor') ? this.data.attr('opened_iconColor') : this.data.attr('iconColor');
|
|
|
|
|
image = this.data.attr('opened_icon');
|
|
|
|
|
if (!image) {
|
|
|
|
|
image = imageColor ? "widgets/jqui-mfd/img/fts_window_1w_open.svg" : "widgets/jqui-mfd/img/fts_window_1w_open.png";
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if (vis.binds['jqui-mfd'].isNotEmpty(imageColor)) {
|
|
|
|
|
%>
|
|
|
|
|
<img style="<%= styles %>" width="100%" src="<%= image %>" <%= (el) -> vis.binds.jqueryui.setSvgColor(el, imageColor) %>/>
|
|
|
|
|
<%
|
|
|
|
|
} else {
|
|
|
|
|
%>
|
|
|
|
|
<img style="<%= styles %>" width="100%" src="<%= image %>" <%= (el) -> vis.binds['jqui-mfd'].removeSvg(this.data.attr('wid')) %>/>
|
|
|
|
|
<%
|
|
|
|
|
}
|
|
|
|
|
%>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<script id="tplMfdRoofWindowBool"
|
|
|
|
|
type="text/ejs"
|
|
|
|
|
class="vis-tpl"
|
|
|
|
|
data-vis-set="jqui-mfd"
|
|
|
|
|
data-vis-type="val,window"
|
|
|
|
|
data-vis-prev='<div id="prev_tplMfdRoofWindowBool" style="position: relative; text-align: initial;padding: 4px "><div class="vis-widget_prev ui-widget ui-button ui-corner-all ui-state-default" style="height: 70px; width: 70px;"> <div class="vis-widget-prev-body"> <img style="filter: invert(1); -webkit-filter: invert(1); -moz-filter: invert(1); -o-filter: invert(1); -ms-filter: invert(1);" height="100%" src="widgets/jqui-mfd/img/fts_window_roof.png"> </div> </div></div>'
|
|
|
|
|
data-vis-name="Roof window"
|
|
|
|
|
data-vis-attrs="oid;invert_icon/checkbox;invert_state/checkbox;asButton[true]/checkbox;iconColor/color;"
|
|
|
|
|
data-vis-attrs0="group.values;closed_value;opened_value;"
|
|
|
|
|
data-vis-attrs1="group.icons;closed_icon/image;closed_iconColor/color;opened_icon/image;opened_iconColor/color;"
|
|
|
|
|
>
|
|
|
|
|
<div class="vis-widget <%= this.data.attr('asButton') ? ' ui-widget ui-button ui-corner-all ui-state-default' : '' %> <%= this.data.attr('class') %>" id="<%= this.data.attr('wid') %>" data-oid="<%= this.data.attr('oid') %>" style="height:76px; width:76px; position:absolute" data-min="<%= this.data.attr('closed_value') %>" data-max="<%= this.data.attr('opened_value') %>" <%= (el) -> this.data.attr('asButton') ? vis.binds.jqueryui.active(el, this.data.invert_state) : '' %> >
|
|
|
|
|
<div class="vis-widget-body">
|
|
|
|
|
<%
|
|
|
|
|
var styles = '';
|
|
|
|
|
if (this.data.invert_icon === 'true' || this.data.invert_icon === true) {
|
|
|
|
|
styles = 'filter: invert(1); -webkit-filter: invert(1); -moz-filter: invert(1); -o-filter: invert(1); -ms-filter: invert(1);';
|
|
|
|
|
}
|
|
|
|
|
var opened = this.data.attr('opened_value');
|
|
|
|
|
var closed = this.data.attr('closed_value');
|
|
|
|
|
|
|
|
|
|
var val = vis.states.attr(this.data.oid + '.val');
|
|
|
|
|
|
|
|
|
|
if (opened === undefined || opened === '' || opened === null) {
|
|
|
|
|
opened = 1;
|
|
|
|
|
closed = 0;
|
|
|
|
|
|
|
|
|
|
if (val === 'true' || val === true) val = opened;
|
|
|
|
|
if (val === 'false' || val === false) val = closed;
|
|
|
|
|
|
|
|
|
|
val = parseFloat(val) || 0;
|
|
|
|
|
val = (val > closed) ? opened : closed;
|
|
|
|
|
}
|
|
|
|
|
if (this.data.invert_state) {
|
|
|
|
|
if (val == opened) {
|
|
|
|
|
val = closed;
|
|
|
|
|
} else {
|
|
|
|
|
val = opened;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
var image = null;
|
|
|
|
|
var imageColor = null;
|
|
|
|
|
if (val != opened) {
|
|
|
|
|
imageColor = this.data.attr('closed_iconColor') ? this.data.attr('closed_iconColor') : this.data.attr('iconColor');
|
|
|
|
|
image = this.data.attr('closed_icon');
|
|
|
|
|
if (!image) {
|
|
|
|
|
image = imageColor ? "widgets/jqui-mfd/img/fts_window_roof.svg" : "widgets/jqui-mfd/img/fts_window_roof.png";
|
|
|
|
|
}
|
|
|
|
|
} else {
|
|
|
|
|
imageColor = this.data.attr('opened_iconColor') ? this.data.attr('opened_iconColor') : this.data.attr('iconColor');
|
|
|
|
|
image = this.data.attr('opened_icon');
|
|
|
|
|
if (!image) {
|
|
|
|
|
image = imageColor ? "widgets/jqui-mfd/img/fts_window_roof_open_2.svg" : "widgets/jqui-mfd/img/fts_window_roof_open_2.png";
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if (imageColor) {
|
|
|
|
|
%>
|
|
|
|
|
<img style="<%= styles %>" width="100%" src="<%= image %>" <%= (el) -> vis.binds.jqueryui.setSvgColor(el, imageColor) %>/>
|
|
|
|
|
<%
|
|
|
|
|
} else {
|
|
|
|
|
%>
|
|
|
|
|
<img style="<%= styles %>" width="100%" src="<%= image %>" <%= (el) -> vis.binds['jqui-mfd'].removeSvg(this.data.attr('wid')) %>/>
|
|
|
|
|
<%
|
|
|
|
|
}
|
|
|
|
|
%>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<script id="tplMfdDoor"
|
|
|
|
|
type="text/ejs"
|
|
|
|
|
class="vis-tpl"
|
|
|
|
|
data-vis-set="jqui-mfd"
|
|
|
|
|
data-vis-name="val - Door"
|
|
|
|
|
data-vis-prev='<div id="prev_tplMfdDoor" style="position: relative; text-align: initial;padding: 4px "><div class="vis-widget_prev ui-widget ui-button ui-corner-all ui-state-default" style="height: 76px; width: 76px"> <div class="vis-widget-prev-body"> <img style="filter: invert(1); -webkit-filter: invert(1); -moz-filter: invert(1); -o-filter: invert(1); -ms-filter: invert(1);" height="100%" src="widgets/jqui-mfd/img/fts_door.png"> </div> </div></div>'
|
|
|
|
|
data-vis-attrs="oid;invert_icon/checkbox;invert_state/checkbox;asButton[true]/checkbox;iconColor/color;"
|
|
|
|
|
data-vis-attrs0="group.values;closed_value;tilted_value;opened_value;"
|
|
|
|
|
data-vis-attrs1="group.icons;closed_icon/image;closed_iconColor/color;tilted_icon/image;tilted_iconColor/color;opened_icon/image;opened_iconColor/color;"
|
|
|
|
|
>
|
|
|
|
|
<div data-oid="<%= this.data.attr('oid') %>" class="vis-widget <%= this.data.attr('asButton') ? ' ui-widget ui-button ui-corner-all ui-state-default' : '' %> <%= this.data.attr('class') %>" id="<%= this.data.attr('wid') %>" style="height:76px; width:76px; position:absolute" data-min="<%= this.data.attr('closed_value') %>" data-max="<%= this.data.attr('opened_value') %>" <%= (el) -> this.data.attr('asButton') ? vis.binds.jqueryui.active(el, this.data.invert_state) : '' %>>
|
|
|
|
|
<div class="vis-widget-body">
|
|
|
|
|
<%
|
|
|
|
|
var styles = '';
|
|
|
|
|
if (this.data.invert_icon === 'true' || this.data.invert_icon === true) {
|
|
|
|
|
styles = 'filter: invert(1); -webkit-filter: invert(1); -moz-filter: invert(1); -o-filter: invert(1); -ms-filter: invert(1);';
|
|
|
|
|
}
|
|
|
|
|
var opened = this.data.attr('opened_value');
|
|
|
|
|
if (opened === undefined || opened === '') opened = 1;
|
|
|
|
|
|
|
|
|
|
var closed = this.data.attr('closed_value');
|
|
|
|
|
if (closed === undefined || closed === '') closed = 0;
|
|
|
|
|
|
|
|
|
|
var tilted = this.data.attr('tilted_value');
|
|
|
|
|
if (tilted === undefined || tilted === '') tilted = 2;
|
|
|
|
|
|
|
|
|
|
var val = vis.states.attr(this.data.oid + '.val');
|
|
|
|
|
if (val === 'true' || val === true) val = opened;
|
|
|
|
|
if (val === 'false' || val === false || val === undefined || val === null) val = closed;
|
|
|
|
|
|
|
|
|
|
var image = null;
|
|
|
|
|
var imageColor = null;
|
|
|
|
|
if (val == closed) {
|
|
|
|
|
imageColor = this.data.attr('closed_iconColor') ? this.data.attr('closed_iconColor') : this.data.attr('iconColor');
|
|
|
|
|
image = this.data.attr('closed_icon');
|
|
|
|
|
if (!image) {
|
|
|
|
|
image = imageColor ? "widgets/jqui-mfd/img/fts_door.svg" : "widgets/jqui-mfd/img/fts_door.png";
|
|
|
|
|
}
|
|
|
|
|
} else if (val == tilted) {
|
|
|
|
|
imageColor = this.data.attr('tilted_iconColor') ? this.data.attr('tilted_iconColor') : this.data.attr('iconColor');
|
|
|
|
|
image = this.data.attr('tilted_icon');
|
|
|
|
|
if (!image) {
|
|
|
|
|
image = imageColor ? "widgets/jqui-mfd/img/fts_door_tilt.svg" : "widgets/jqui-mfd/img/fts_door_tilt.png";
|
|
|
|
|
}
|
|
|
|
|
} else {
|
|
|
|
|
imageColor = this.data.attr('opened_iconColor') ? this.data.attr('opened_iconColor') : this.data.attr('iconColor');
|
|
|
|
|
image = this.data.attr('opened_icon');
|
|
|
|
|
if (!image) {
|
|
|
|
|
image = imageColor ? "widgets/jqui-mfd/img/fts_door_open.svg" : "widgets/jqui-mfd/img/fts_door_open.png";
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if (imageColor) {
|
|
|
|
|
%>
|
|
|
|
|
<img style="<%= styles %>" width="100%" src="<%= image %>" <%= (el) -> vis.binds.jqueryui.setSvgColor(el, imageColor) %>/>
|
|
|
|
|
<%
|
|
|
|
|
} else {
|
|
|
|
|
%>
|
|
|
|
|
<img style="<%= styles %>" width="100%" src="<%= image %>" <%= (el) -> vis.binds['jqui-mfd'].removeSvg(this.data.attr('wid')) %>/>
|
|
|
|
|
<%
|
|
|
|
|
}
|
|
|
|
|
%>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<script id="tplMfdGarage"
|
|
|
|
|
type="text/ejs"
|
|
|
|
|
class="vis-tpl"
|
|
|
|
|
data-vis-set="jqui-mfd"
|
|
|
|
|
data-vis-name="val - Garage"
|
|
|
|
|
data-vis-prev='<div id="prev_tplMfdGarage" style="position: relative; text-align: initial;padding: 4px "><div class="vis-widget_prev ui-widget ui-button ui-corner-all ui-state-default" style="height: 76px; width: 76px;"><div class="vis-widget-prev-body"><img style="filter: invert(1); -webkit-filter: invert(1); -moz-filter: invert(1); -o-filter: invert(1); -ms-filter: invert(1);" height="100%" src="widgets/jqui-mfd/img/fts_garage_door_100.png"></div></div></div>'
|
|
|
|
|
data-vis-attrs="oid;invert_icon/checkbox;invert_state/checkbox;asButton[true]/checkbox;iconColor/color;"
|
|
|
|
|
data-vis-attrs0="group.values;closed_value;opened_value;"
|
|
|
|
|
data-vis-attrs1="group.icons;closed_icon/image;closed_iconColor/color;opened_icon/image;opened_iconColor/color;"
|
|
|
|
|
>
|
|
|
|
|
<div data-oid="<%= this.data.attr('oid') %>" class="vis-widget <%= this.data.attr('asButton') ? ' ui-widget ui-button ui-corner-all ui-state-default' : '' %> <%= this.data.attr('class') %>" id="<%= this.data.attr('wid') %>" style="height:76px; width:76px; position:absolute" data-min="<%= this.data.attr('closed_value') %>" data-max="<%= this.data.attr('opened_value') %>" <%= (el) -> this.data.attr('asButton') ? vis.binds.jqueryui.active(el, this.data.invert_state) : '' %>>
|
|
|
|
|
<div class="vis-widget-body">
|
|
|
|
|
<%
|
|
|
|
|
var styles = '';
|
|
|
|
|
if (this.data.invert_icon === 'true' || this.data.invert_icon === true) {
|
|
|
|
|
styles = 'filter: invert(1); -webkit-filter: invert(1); -moz-filter: invert(1); -o-filter: invert(1); -ms-filter: invert(1);';
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
var opened = this.data.attr('opened_value');
|
|
|
|
|
var closed = this.data.attr('closed_value');
|
|
|
|
|
|
|
|
|
|
var val = vis.states.attr(this.data.oid + '.val');
|
|
|
|
|
|
|
|
|
|
if (opened === undefined || opened === '' || opened === null) {
|
|
|
|
|
opened = 1;
|
|
|
|
|
closed = 0;
|
|
|
|
|
|
|
|
|
|
if (val === 'true' || val === true) val = opened;
|
|
|
|
|
if (val === 'false' || val === false) val = closed;
|
|
|
|
|
|
|
|
|
|
val = parseFloat(val) || 0;
|
|
|
|
|
val = (val > closed) ? opened : closed;
|
|
|
|
|
}
|
|
|
|
|
if (this.data.invert_state) {
|
|
|
|
|
if (val == opened) {
|
|
|
|
|
val = closed;
|
|
|
|
|
} else {
|
|
|
|
|
val = opened;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
var image = null;
|
|
|
|
|
var imageColor = null;
|
|
|
|
|
if (val != opened) {
|
|
|
|
|
imageColor = this.data.attr('closed_iconColor') ? this.data.attr('closed_iconColor') : this.data.attr('iconColor');
|
|
|
|
|
image = this.data.attr('closed_icon');
|
|
|
|
|
if (!image) {
|
|
|
|
|
image = imageColor ? "widgets/jqui-mfd/img/fts_garage_door_100.svg" : "widgets/jqui-mfd/img/fts_garage_door_100.png";
|
|
|
|
|
}
|
|
|
|
|
} else {
|
|
|
|
|
imageColor = this.data.attr('opened_iconColor') ? this.data.attr('opened_iconColor') : this.data.attr('iconColor');
|
|
|
|
|
image = this.data.attr('opened_icon');
|
|
|
|
|
if (!image) {
|
|
|
|
|
image = imageColor ? "widgets/jqui-mfd/img/fts_garage_door_10.svg" : "widgets/jqui-mfd/img/fts_garage_door_10.png";
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if (imageColor) {
|
|
|
|
|
%>
|
|
|
|
|
<img style="<%= styles %>" width="100%" src="<%= image %>" <%= (el) -> vis.binds.jqueryui.setSvgColor(el, imageColor) %>/>
|
|
|
|
|
<%
|
|
|
|
|
} else {
|
|
|
|
|
%>
|
|
|
|
|
<img style="<%= styles %>" width="100%" src="<%= image %>" <%= (el) -> vis.binds['jqui-mfd'].removeSvg(this.data.attr('wid')) %>/>
|
|
|
|
|
<%
|
|
|
|
|
}
|
|
|
|
|
%>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<script id="tplMfdValve"
|
|
|
|
|
type="text/ejs"
|
|
|
|
|
class="vis-tpl"
|
|
|
|
|
data-vis-set="jqui-mfd"
|
|
|
|
|
data-vis-type="state,valve"
|
|
|
|
|
data-vis-name="Valve"
|
|
|
|
|
data-vis-prev='<div id="prev_tplMfdValve" style="position: relative; text-align: initial;padding: 4px "><div data-oid="dev1" class="vis-widget_prev vis-widget ui-widget ui-button ui-corner-all ui-state-default" style="width: 70px; height: 70px;"><div class="vis-widget-prev-body"> <img style="filter: invert(1); -webkit-filter: invert(1); -moz-filter: invert(1); -o-filter: invert(1); -ms-filter: invert(1);" width="100%" src="widgets/jqui-mfd/img/sani_valve_30.png"> </div></div></div>'
|
|
|
|
|
data-vis-attrs="oid;min;max;invert_icon/checkbox;asButton[true]/checkbox;iconColor/color;invert_value/checkbox;show_active/checkbox;"
|
|
|
|
|
data-vis-attrs0="group.colors;iconColor0/color;iconColor1/color;iconColor2/color;iconColor3/color;iconColor4/color;iconColor5/color;iconColor6/color;iconColor7/color;iconColor8/color;iconColor9/color;iconColor10/color;"
|
|
|
|
|
>
|
|
|
|
|
<div data-oid="<%= this.data.attr('oid') %>" class="vis-widget vis-widget <%= this.data.attr('asButton') ? ' ui-widget ui-button ui-corner-all ui-state-default' : '' %> <%= this.data.attr('class') %>" id="<%= this.data.attr('wid') %>" style="width:76px; height:76px; position:absolute" <%= (el) -> this.data.attr('show_active') ? vis.binds.jqueryui.classes(el, true) : '' %>><div class="vis-widget-body">
|
|
|
|
|
<%
|
|
|
|
|
var styles = '';
|
|
|
|
|
if (this.data.invert_icon === 'true' || this.data.invert_icon === true) {
|
|
|
|
|
styles = 'filter: invert(1); -webkit-filter: invert(1); -moz-filter: invert(1); -o-filter: invert(1); -ms-filter: invert(1);';
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
var max = (this.data.attr('max') !== undefined) ? this.data.attr('max') : 100;
|
|
|
|
|
var min = (this.data.attr('min') !== undefined) ? this.data.attr('min') : 0;
|
|
|
|
|
|
|
|
|
|
if (typeof max === 'string' && parseFloat(max).toString() == max) max = parseFloat(max);
|
|
|
|
|
if (typeof min === 'string' && parseFloat(min).toString() == min) min = parseFloat(min);
|
|
|
|
|
|
|
|
|
|
var val = parseFloat(vis.states.attr(this.data.oid + '.val'));
|
|
|
|
|
if (this.data.invert_value) val = max - val + min;
|
|
|
|
|
var image = '';
|
|
|
|
|
var imageColor = null;
|
|
|
|
|
if (val >= max) {
|
|
|
|
|
image = "sani_valve_100";
|
|
|
|
|
imageColor = this.data.attr('iconColor10');
|
|
|
|
|
} else if (val >= min + (max - min) * 0.9) {
|
|
|
|
|
image = "sani_valve_90";
|
|
|
|
|
imageColor = this.data.attr('iconColor9');
|
|
|
|
|
} else if (val >= min + (max - min) * 0.8) {
|
|
|
|
|
image = "sani_valve_80";
|
|
|
|
|
imageColor = this.data.attr('iconColor8');
|
|
|
|
|
} else if (val >= min + (max - min) * 0.7) {
|
|
|
|
|
image = "sani_valve_70";
|
|
|
|
|
imageColor = this.data.attr('iconColor7');
|
|
|
|
|
} else if (val >= min + (max - min) * 0.6) {
|
|
|
|
|
image = "sani_valve_60";
|
|
|
|
|
imageColor = this.data.attr('iconColor6');
|
|
|
|
|
} else if (val >= min + (max - min) * 0.5) {
|
|
|
|
|
image = "sani_valve_50";
|
|
|
|
|
imageColor = this.data.attr('iconColor5');
|
|
|
|
|
} else if (val >= min + (max - min) * 0.4) {
|
|
|
|
|
image = "sani_valve_40";
|
|
|
|
|
imageColor = this.data.attr('iconColor4');
|
|
|
|
|
} else if (val >= min + (max - min) * 0.3) {
|
|
|
|
|
image = "sani_valve_30";
|
|
|
|
|
imageColor = this.data.attr('iconColor3');
|
|
|
|
|
} else if (val >= min + (max - min) * 0.2) {
|
|
|
|
|
image = "sani_valve_20";
|
|
|
|
|
imageColor = this.data.attr('iconColor2');
|
|
|
|
|
} else if (val >= min + (max - min) * 0.1) {
|
|
|
|
|
image = "sani_valve_10";
|
|
|
|
|
imageColor = this.data.attr('iconColor1');
|
|
|
|
|
} else {
|
|
|
|
|
image = "sani_valve_0";
|
|
|
|
|
imageColor = this.data.attr('iconColor0');
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if (!imageColor) {
|
|
|
|
|
imageColor = this.data.attr('iconColor');
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if (imageColor) { %>
|
|
|
|
|
<img style="<%= styles %>" width="100%" src="widgets/jqui-mfd/img/<%= image %>.svg" <%= (el) -> vis.binds.jqueryui.setSvgColor(el, imageColor) %>/>
|
|
|
|
|
<% } else { %>
|
|
|
|
|
<img style="<%= styles %>" width="100%" src="widgets/jqui-mfd/img/<%= image %>.png" <%= (el) -> vis.binds['jqui-mfd'].removeSvg(this.data.attr('wid')) %>/>
|
|
|
|
|
<% } %>
|
|
|
|
|
</div></div>
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<script id="tplMfdValveDialog"
|
|
|
|
|
type="text/ejs"
|
|
|
|
|
class="vis-tpl"
|
|
|
|
|
data-vis-set="jqui-mfd"
|
|
|
|
|
data-vis-type="ctrl,valve,dialog"
|
|
|
|
|
data-vis-name="Valve + jqui Dialog"
|
|
|
|
|
data-vis-prev='<div id="prev_tplMfdValveDialog" style="position: relative; text-align: initial;padding: 4px "><div data-oid="dev1" class="vis-widget_prev vis-widget ui-widget ui-button ui-corner-all ui-state-default ui-state-active" style="width: 70px; height: 70px;"><div class="vis-widget-prev-body"> <img style="filter: invert(1); -webkit-filter: invert(1); -moz-filter: invert(1); -o-filter: invert(1); -ms-filter: invert(1);" width="100%" src="widgets/jqui-mfd/img/sani_valve_30.png"> </div></div></div>'
|
|
|
|
|
data-vis-attrs="oid;oid-working;min;max;invert_icon/checkbox;asButton[true]/checkbox;iconColor/color;invert_value/checkbox;show_active/checkbox;"
|
|
|
|
|
data-vis-attrs0="group.colors;iconColor0/color;iconColor1/color;iconColor2/color;iconColor3/color;iconColor4/color;iconColor5/color;iconColor6/color;iconColor7/color;iconColor8/color;iconColor9/color;iconColor10/color;"
|
|
|
|
|
data-vis-attrs1="group.dialog;title;noHeader/checkbox;autoclose/slider,0,30000,100;modal/checkbox;dialog_width[440];dialog_height[200];dialog_top;dialog_left;overflowX/nselect,,visible,hidden,scroll,auto,initial,inherit;overflowY/nselect,,visible,hidden,scroll,auto,initial,inherit;show_value/checkbox;units;">
|
|
|
|
|
<div data-oid="<%= this.data.attr('oid') %>" data-hm-wid="<%= this.data.attr('oid-working') %>" class="vis-widget <%= this.data.attr('asButton') ? ' ui-widget ui-button ui-corner-all ui-state-default' : '' %> <%= this.data.attr('class') %>" id="<%= this.data.attr('wid') %>" style="width:76px; height:76px; position:absolute" <%= (el) -> this.data.attr('show_active') ? vis.binds.jqueryui.classes(el, true) : '' %>>
|
|
|
|
|
<div id="<%= this.data.attr('wid') %>_body" class="vis-widget-body" style="width:100%; height:100%" <%= (el) -> vis.preloadImages(['widgets/jqui-mfd/img/sani_valve_100.png','widgets/jqui-mfd/img/sani_valve_90.png','widgets/jqui-mfd/img/sani_valve_80.png','widgets/jqui-mfd/img/sani_valve_70.png','widgets/jqui-mfd/img/sani_valve_60.png','widgets/jqui-mfd/img/sani_valve_50.png','widgets/jqui-mfd/img/sani_valve_40.png','widgets/jqui-mfd/img/sani_valve_30.png','widgets/jqui-mfd/img/sani_valve_20.png','widgets/jqui-mfd/img/sani_valve_10.png','widgets/jqui-mfd/img/sani_valve_0.png']); %>>
|
|
|
|
|
<%
|
|
|
|
|
var styles = '';
|
|
|
|
|
if (this.data.invert_icon === 'true' || this.data.invert_icon === true) {
|
|
|
|
|
styles = 'filter: invert(1); -webkit-filter: invert(1); -moz-filter: invert(1); -o-filter: invert(1); -ms-filter: invert(1);';
|
|
|
|
|
}
|
|
|
|
|
var max = (this.data.attr('max') !== undefined) ? this.data.attr('max') : 100;
|
|
|
|
|
var min = (this.data.attr('min') !== undefined) ? this.data.attr('min') : 0;
|
|
|
|
|
|
|
|
|
|
if (typeof max === 'string' && parseFloat(max).toString() == max) max = parseFloat(max);
|
|
|
|
|
if (typeof min === 'string' && parseFloat(min).toString() == min) min = parseFloat(min);
|
|
|
|
|
|
|
|
|
|
var val = parseFloat(vis.states.attr(this.data.oid + '.val'));
|
|
|
|
|
|
|
|
|
|
if (this.data.attr('invert_value')) val = max - val + min;
|
|
|
|
|
|
|
|
|
|
var image = '';
|
|
|
|
|
var imageColor = null;
|
|
|
|
|
if (val >= max) {
|
|
|
|
|
image = "sani_valve_100";
|
|
|
|
|
imageColor = this.data.attr('iconColor10');
|
|
|
|
|
} else if (val >= min + (max - min) * 0.9) {
|
|
|
|
|
image = "sani_valve_90";
|
|
|
|
|
imageColor = this.data.attr('iconColor9');
|
|
|
|
|
} else if (val >= min + (max - min) * 0.8) {
|
|
|
|
|
image = "sani_valve_80";
|
|
|
|
|
imageColor = this.data.attr('iconColor8');
|
|
|
|
|
} else if (val >= min + (max - min) * 0.7) {
|
|
|
|
|
image = "sani_valve_70";
|
|
|
|
|
imageColor = this.data.attr('iconColor7');
|
|
|
|
|
} else if (val >= min + (max - min) * 0.6) {
|
|
|
|
|
image = "sani_valve_60";
|
|
|
|
|
imageColor = this.data.attr('iconColor6');
|
|
|
|
|
} else if (val >= min + (max - min) * 0.5) {
|
|
|
|
|
image = "sani_valve_50";
|
|
|
|
|
imageColor = this.data.attr('iconColor5');
|
|
|
|
|
} else if (val >= min + (max - min) * 0.4) {
|
|
|
|
|
image = "sani_valve_40";
|
|
|
|
|
imageColor = this.data.attr('iconColor4');
|
|
|
|
|
} else if (val >= min + (max - min) * 0.3) {
|
|
|
|
|
image = "sani_valve_30";
|
|
|
|
|
imageColor = this.data.attr('iconColor3');
|
|
|
|
|
} else if (val >= min + (max - min) * 0.2) {
|
|
|
|
|
image = "sani_valve_20";
|
|
|
|
|
imageColor = this.data.attr('iconColor2');
|
|
|
|
|
} else if (val >= min + (max - min) * 0.1) {
|
|
|
|
|
image = "sani_valve_10";
|
|
|
|
|
imageColor = this.data.attr('iconColor1');
|
|
|
|
|
} else {
|
|
|
|
|
image = "sani_valve_0";
|
|
|
|
|
imageColor = this.data.attr('iconColor0');
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if (!imageColor) {
|
|
|
|
|
imageColor = this.data.attr('iconColor');
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if (imageColor) { %>
|
|
|
|
|
<img style="<%= styles %>" width="100%" src="widgets/jqui-mfd/img/<%= image %>.svg" <%= (el) -> vis.binds.jqueryui.setSvgColor(el, imageColor) %>/>
|
|
|
|
|
<% } else { %>
|
|
|
|
|
<img style="<%= styles %>" width="100%" src="widgets/jqui-mfd/img/<%= image %>.png" <%= (el) -> vis.binds['jqui-mfd'].removeSvg(this.data.attr('wid')) %>/>
|
|
|
|
|
<% } %>
|
|
|
|
|
</div>
|
|
|
|
|
<div id="<%= this.data.attr('wid') %>_dialog" class="<%= this.data.attr('wid') %>_dialog vis-widget-dialog" title="<%== this.data.title || this.data.attr('oid') %>" style="padding-left: 20px;">
|
|
|
|
|
<div id="<%= this.data.attr('wid') %>_radio" class="<%= this.data.attr('wid') %>_radio" style="text-align: center" data-oid="<%= this.data.attr('oid') %>" <%= (el) -> vis.binds.jqueryui.radio(el); %> >
|
|
|
|
|
<%
|
|
|
|
|
var max = (this.data.attr('max') !== undefined) ? this.data.attr('max') : 100;
|
|
|
|
|
var min = (this.data.attr('min') !== undefined) ? this.data.attr('min') : 0;
|
|
|
|
|
|
|
|
|
|
if (typeof max === 'string' && parseFloat(max).toString() == max) max = parseFloat(max);
|
|
|
|
|
if (typeof min === 'string' && parseFloat(min).toString() == min) min = parseFloat(min);
|
|
|
|
|
%>
|
|
|
|
|
<input type="radio" id="<%= this.data.attr('wid') %>_radio0" name="<%= this.data.attr('wid') %>_radio" value="<%= !this.data.attr('invert_value') ? min : max %>" checked="checked"/><label for="<%= this.data.attr('wid') %>_radio0"><%= _('closed') %></label>
|
|
|
|
|
<input type="radio" id="<%= this.data.attr('wid') %>_radio1" name="<%= this.data.attr('wid') %>_radio" value="<%= !this.data.attr('invert_value') ? min + (max - min) * 0.25 : min + (max - min) * 0.75 %>" checked="checked"/><label for="<%= this.data.attr('wid') %>_radio1">25%</label>
|
|
|
|
|
<input type="radio" id="<%= this.data.attr('wid') %>_radio2" name="<%= this.data.attr('wid') %>_radio" value="<%= min + (max - min) * 0.5 %>" checked="checked"/><label for="<%= this.data.attr('wid') %>_radio2">50%</label>
|
|
|
|
|
<input type="radio" id="<%= this.data.attr('wid') %>_radio3" name="<%= this.data.attr('wid') %>_radio" value="<%= !this.data.attr('invert_value') ? min + (max - min) * 0.75 : min + (max - min) * 0.25 %>" checked="checked"/><label for="<%= this.data.attr('wid') %>_radio3">75%</label>
|
|
|
|
|
<input type="radio" id="<%= this.data.attr('wid') %>_radio4" name="<%= this.data.attr('wid') %>_radio" value="<%= !this.data.attr('invert_value') ? max : min %>"/><label for="<%= this.data.attr('wid') %>_radio4"><%= _('open') %></label>
|
|
|
|
|
</div>
|
|
|
|
|
<br/>
|
|
|
|
|
<div class="sliderJQUI" style="width: 90%" id="<%= this.data.attr('wid') %>_slider" data-oid="<%= this.data.attr('oid') %>" data-hm-wid="<%= this.data.attr('oid-working') %>" <%= (el) -> vis.binds.jqueryui.slider(el, {min: min, max: max, step: (max - min) / 100, inverted: this.data.attr('invert_value')}) %> />
|
|
|
|
|
<br/>
|
|
|
|
|
<%= vis.states.attr(this.data.oid + '.val') ? (((parseFloat(vis.states.attr(this.data.oid + '.val')) - min) / (max - min)) * 100).toFixed(0) : 0 %>%
|
|
|
|
|
<%= (this.data.show_value === 'true' || this.data.show_value === true) ? '(' + Math.round(parseFloat(vis.states.attr(this.data.oid + '.val') * 100) / 100) + ' ' + this.data.attr('units') + ')' : '' %>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="popup-helper" <%= (el) -> vis.binds.jqueryui.dialog(el, data, true) %> />
|
|
|
|
|
<div class="popup-helper" <%= (el) -> vis.binds.jqueryui.dialogAutoClose(el, data.attr('autoclose')) %> />
|
|
|
|
|
</div>
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<script id="tplMfdCustom10"
|
|
|
|
|
type="text/ejs"
|
|
|
|
|
class="vis-tpl"
|
|
|
|
|
data-vis-set="jqui-mfd"
|
|
|
|
|
data-vis-type="state"
|
|
|
|
|
data-vis-name="Custom10"
|
|
|
|
|
data-vis-prev='<div id="prev_tplMfdCustom10" style="position: relative; text-align: initial;padding: 4px "><div data-oid="dev1" class="vis-widget_prev vis-widget ui-widget ui-button ui-corner-all ui-state-default" style="width: 70px; height: 70px;"><div class="vis-widget-prev-body"> <img style="filter: invert(1); -webkit-filter: invert(1); -moz-filter: invert(1); -o-filter: invert(1); -ms-filter: invert(1);" width="100%" src="widgets/jqui-mfd/img/sani_valve_custom.svg"> </div></div></div>'
|
|
|
|
|
data-vis-attrs="oid;min;max;asButton[true]/checkbox;invert_value/checkbox;show_active/checkbox;"
|
|
|
|
|
data-vis-attrs0="group.images;iconValue0;icon0[widgets~jqui-mfd~img~sani_valve_0.svg]/image;iconColor0/color;iconValue1;icon1[widgets~jqui-mfd~img~sani_valve_10.svg]/image;iconColor1/color;iconValue2;icon2[widgets~jqui-mfd~img~sani_valve_20.svg]/image;iconColor2/color;iconValue3;icon3[widgets~jqui-mfd~img~sani_valve_30.svg]/image;iconColor3/color;iconValue4;icon4[widgets~jqui-mfd~img~sani_valve_40.svg]/image;iconColor4/color;iconValue5;icon5[widgets~jqui-mfd~img~sani_valve_50.svg]/image;iconColor5/color;iconValue6;icon6[widgets~jqui-mfd~img~sani_valve_60.svg]/image;iconColor6/color;iconValue7;icon7[widgets~jqui-mfd~img~sani_valve_70.svg]/image;iconColor7/color;iconValue8;icon8[widgets~jqui-mfd~img~sani_valve_80.svg]/image;iconColor8/color;iconValue9;icon9[widgets~jqui-mfd~img~sani_valve_90.svg]/image;iconColor9/color;iconValue10;icon10[widgets~jqui-mfd~img~sani_valve_100.svg]/image;iconColor10/color;"
|
|
|
|
|
>
|
|
|
|
|
<div data-oid="<%= this.data.attr('oid') %>" class="vis-widget vis-widget <%= this.data.attr('asButton') ? ' ui-widget ui-button ui-corner-all ui-state-default' : '' %> <%= this.data.attr('class') %>" id="<%= this.data.attr('wid') %>" style="width:76px; height:76px; position:absolute" <%= (el) -> this.data.attr('show_active') ? vis.binds.jqueryui.classes(el, true) : '' %>>
|
|
|
|
|
<div class="vis-widget-body">
|
|
|
|
|
<%
|
|
|
|
|
var styles = '';
|
|
|
|
|
if (this.data.invert_icon === 'true' || this.data.invert_icon === true) {
|
|
|
|
|
styles = 'filter: invert(1); -webkit-filter: invert(1); -moz-filter: invert(1); -o-filter: invert(1); -ms-filter: invert(1);';
|
|
|
|
|
}
|
|
|
|
|
var max = (this.data.attr('max') !== undefined) ? this.data.attr('max') : 100;
|
|
|
|
|
var min = (this.data.attr('min') !== undefined) ? this.data.attr('min') : 0;
|
|
|
|
|
|
|
|
|
|
if (typeof max === 'string' && parseFloat(max).toString() == max) max = parseFloat(max);
|
|
|
|
|
if (typeof min === 'string' && parseFloat(min).toString() == min) min = parseFloat(min);
|
|
|
|
|
|
|
|
|
|
var str = vis.states.attr(this.data.oid + '.val');
|
|
|
|
|
var val = parseFloat(str);
|
|
|
|
|
if (str === true || str === 'true') val = max;
|
|
|
|
|
if (str === false || str === 'false') val = min;
|
|
|
|
|
|
|
|
|
|
if (this.data.attr('invert_value')) val = max - val + min;
|
|
|
|
|
|
|
|
|
|
var image = null;
|
|
|
|
|
var imageColor = null;
|
|
|
|
|
|
|
|
|
|
if (vis.binds['jqui-mfd'].isNotEmpty(this.data.attr('iconValue0')) && this.data.attr('iconValue0') == str) {
|
|
|
|
|
imageColor = vis.binds['jqui-mfd'].isNotEmpty(this.data.attr('iconColor0')) ? this.data.attr('iconColor0') : this.data.attr('iconColor');
|
|
|
|
|
image = this.data.attr('icon0');
|
|
|
|
|
} else if (vis.binds['jqui-mfd'].isNotEmpty(this.data.attr('iconValue1')) && this.data.attr('iconValue1') == str) {
|
|
|
|
|
imageColor = vis.binds['jqui-mfd'].isNotEmpty(this.data.attr('iconColor1')) ? this.data.attr('iconColor1') : this.data.attr('iconColor');
|
|
|
|
|
image = this.data.attr('icon1');
|
|
|
|
|
} else if (vis.binds['jqui-mfd'].isNotEmpty(this.data.attr('iconValue2')) && this.data.attr('iconValue2') == str) {
|
|
|
|
|
imageColor = vis.binds['jqui-mfd'].isNotEmpty(this.data.attr('iconColor2')) ? this.data.attr('iconColor2') : this.data.attr('iconColor');
|
|
|
|
|
image = this.data.attr('icon2');
|
|
|
|
|
} else if (vis.binds['jqui-mfd'].isNotEmpty(this.data.attr('iconValue3')) && this.data.attr('iconValue3') == str) {
|
|
|
|
|
imageColor = vis.binds['jqui-mfd'].isNotEmpty(this.data.attr('iconColor3')) ? this.data.attr('iconColor3') : this.data.attr('iconColor');
|
|
|
|
|
image = this.data.attr('icon3');
|
|
|
|
|
} else if (vis.binds['jqui-mfd'].isNotEmpty(this.data.attr('iconValue4')) && this.data.attr('iconValue4') == str) {
|
|
|
|
|
imageColor = vis.binds['jqui-mfd'].isNotEmpty(this.data.attr('iconColor4')) ? this.data.attr('iconColor4') : this.data.attr('iconColor');
|
|
|
|
|
image = this.data.attr('icon4');
|
|
|
|
|
} else if (vis.binds['jqui-mfd'].isNotEmpty(this.data.attr('iconValue5')) && this.data.attr('iconValue5') == str) {
|
|
|
|
|
imageColor = vis.binds['jqui-mfd'].isNotEmpty(this.data.attr('iconColor5')) ? this.data.attr('iconColor5') : this.data.attr('iconColor');
|
|
|
|
|
image = this.data.attr('icon5');
|
|
|
|
|
} else if (vis.binds['jqui-mfd'].isNotEmpty(this.data.attr('iconValue6')) && this.data.attr('iconValue6') == str) {
|
|
|
|
|
imageColor = vis.binds['jqui-mfd'].isNotEmpty(this.data.attr('iconColor6')) ? this.data.attr('iconColor6') : this.data.attr('iconColor');
|
|
|
|
|
image = this.data.attr('icon6');
|
|
|
|
|
} else if (vis.binds['jqui-mfd'].isNotEmpty(this.data.attr('iconValue7')) && this.data.attr('iconValue7') == str) {
|
|
|
|
|
imageColor = vis.binds['jqui-mfd'].isNotEmpty(this.data.attr('iconColor7')) ? this.data.attr('iconColor7') : this.data.attr('iconColor');
|
|
|
|
|
image = this.data.attr('icon7');
|
|
|
|
|
} else if (vis.binds['jqui-mfd'].isNotEmpty(this.data.attr('iconValue8')) && this.data.attr('iconValue8') == str) {
|
|
|
|
|
imageColor = vis.binds['jqui-mfd'].isNotEmpty(this.data.attr('iconColor8')) ? this.data.attr('iconColor8') : this.data.attr('iconColor');
|
|
|
|
|
image = this.data.attr('icon8');
|
|
|
|
|
} else if (vis.binds['jqui-mfd'].isNotEmpty(this.data.attr('iconValue9')) && this.data.attr('iconValue9') == str) {
|
|
|
|
|
imageColor = vis.binds['jqui-mfd'].isNotEmpty(this.data.attr('iconColor9')) ? this.data.attr('iconColor9') : this.data.attr('iconColor');
|
|
|
|
|
image = this.data.attr('icon9');
|
|
|
|
|
} else if (vis.binds['jqui-mfd'].isNotEmpty(this.data.attr('iconValue10')) && this.data.attr('iconValue10') == str) {
|
|
|
|
|
imageColor = vis.binds['jqui-mfd'].isNotEmpty(this.data.attr('iconColor10')) ? this.data.attr('iconColor10') : this.data.attr('iconColor');
|
|
|
|
|
image = this.data.attr('icon10');
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if (!image && !imageColor) {
|
|
|
|
|
if (val >= max) {
|
|
|
|
|
imageColor = vis.binds['jqui-mfd'].isNotEmpty(this.data.attr('iconColor10')) ? this.data.attr('iconColor10') : this.data.attr('iconColor');
|
|
|
|
|
image = this.data.attr('icon10');
|
|
|
|
|
} else if (val >= min + (max - min) * 0.9) {
|
|
|
|
|
imageColor = vis.binds['jqui-mfd'].isNotEmpty(this.data.attr('iconColor9')) ? this.data.attr('iconColor9') : this.data.attr('iconColor');
|
|
|
|
|
image = this.data.attr('icon9');
|
|
|
|
|
} else if (val >= min + (max - min) * 0.8) {
|
|
|
|
|
imageColor = vis.binds['jqui-mfd'].isNotEmpty(this.data.attr('iconColor8')) ? this.data.attr('iconColor8') : this.data.attr('iconColor');
|
|
|
|
|
image = this.data.attr('icon8');
|
|
|
|
|
} else if (val >= min + (max - min) * 0.7) {
|
|
|
|
|
imageColor = vis.binds['jqui-mfd'].isNotEmpty(this.data.attr('iconColor7')) ? this.data.attr('iconColor7') : this.data.attr('iconColor');
|
|
|
|
|
image = this.data.attr('icon7');
|
|
|
|
|
} else if (val >= min + (max - min) * 0.6) {
|
|
|
|
|
imageColor = vis.binds['jqui-mfd'].isNotEmpty(this.data.attr('iconColor6')) ? this.data.attr('iconColor6') : this.data.attr('iconColor');
|
|
|
|
|
image = this.data.attr('icon6');
|
|
|
|
|
} else if (val >= min + (max - min) * 0.5) {
|
|
|
|
|
imageColor = vis.binds['jqui-mfd'].isNotEmpty(this.data.attr('iconColor5')) ? this.data.attr('iconColor5') : this.data.attr('iconColor');
|
|
|
|
|
image = this.data.attr('icon5');
|
|
|
|
|
} else if (val >= min + (max - min) * 0.4) {
|
|
|
|
|
imageColor = vis.binds['jqui-mfd'].isNotEmpty(this.data.attr('iconColor4')) ? this.data.attr('iconColor4') : this.data.attr('iconColor');
|
|
|
|
|
image = this.data.attr('icon4');
|
|
|
|
|
} else if (val >= min + (max - min) * 0.3) {
|
|
|
|
|
imageColor = vis.binds['jqui-mfd'].isNotEmpty(this.data.attr('iconColor3')) ? this.data.attr('iconColor3') : this.data.attr('iconColor');
|
|
|
|
|
image = this.data.attr('icon3');
|
|
|
|
|
} else if (val >= min + (max - min) * 0.2) {
|
|
|
|
|
imageColor = vis.binds['jqui-mfd'].isNotEmpty(this.data.attr('iconColor2')) ? this.data.attr('iconColor2') : this.data.attr('iconColor');
|
|
|
|
|
image = this.data.attr('icon2');
|
|
|
|
|
} else if (val >= min + (max - min) * 0.1) {
|
|
|
|
|
imageColor = vis.binds['jqui-mfd'].isNotEmpty(this.data.attr('iconColor1')) ? this.data.attr('iconColor1') : this.data.attr('iconColor');
|
|
|
|
|
image = this.data.attr('icon1');
|
|
|
|
|
} else {
|
|
|
|
|
imageColor = vis.binds['jqui-mfd'].isNotEmpty(this.data.attr('iconColor0')) ? this.data.attr('iconColor0') : this.data.attr('iconColor');
|
|
|
|
|
image = this.data.attr('icon0');
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if (vis.binds['jqui-mfd'].isNotEmpty(image)) {
|
|
|
|
|
if (vis.binds['jqui-mfd'].isNotEmpty(imageColor)) {
|
|
|
|
|
%>
|
|
|
|
|
<img style="<%= styles %>" width="100%" src="<%= image %>" <%= (el) -> vis.binds.jqueryui.setSvgColor(el, imageColor) %>/>
|
|
|
|
|
<% } else { %>
|
|
|
|
|
<img style="<%= styles %>" width="100%" src="<%= image %>" <%= (el) -> vis.binds['jqui-mfd'].removeSvg(this.data.attr('wid')) %>/>
|
|
|
|
|
<% }
|
|
|
|
|
}
|
|
|
|
|
%>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<script id="tplMfdCustom10Dialog"
|
|
|
|
|
type="text/ejs"
|
|
|
|
|
class="vis-tpl"
|
|
|
|
|
data-vis-set="jqui-mfd"
|
|
|
|
|
data-vis-type="ctrl,dialog"
|
|
|
|
|
data-vis-name="Custom10 + jqui Dialog"
|
|
|
|
|
data-vis-prev='<div id="prev_tplMfdCustom10Dialog" style="position: relative; text-align: initial;padding: 4px "><div data-oid="dev1" class="vis-widget_prev vis-widget ui-widget ui-button ui-corner-all ui-state-default ui-state-active" style="width: 70px; height: 70px;"><div class="vis-widget-prev-body"> <img style="filter: invert(1); -webkit-filter: invert(1); -moz-filter: invert(1); -o-filter: invert(1); -ms-filter: invert(1);" width="100%" src="widgets/jqui-mfd/img/sani_valve_custom.svg"> </div></div></div>'
|
|
|
|
|
data-vis-attrs="oid;oid-working;min;max;asButton[true]/checkbox;invert_value/checkbox;show_active/checkbox;"
|
|
|
|
|
data-vis-attrs0="group.dialog;title;noHeader/checkbox;autoclose/slider,0,30000,100;modal/checkbox;dialog_width[440];dialog_height[200];dialog_top;dialog_left;overflowX/nselect,,visible,hidden,scroll,auto,initial,inherit;overflowY/nselect,,visible,hidden,scroll,auto,initial,inherit;show_value/checkbox;units;"
|
|
|
|
|
data-vis-attrs1="group.images;iconValue0;icon0[widgets~jqui-mfd~img~sani_valve_0.svg]/image;iconColor0/color;iconValue1;icon1[widgets~jqui-mfd~img~sani_valve_10.svg]/image;iconColor1/color;iconValue2;icon2[widgets~jqui-mfd~img~sani_valve_20.svg]/image;iconColor2/color;iconValue3;icon3[widgets~jqui-mfd~img~sani_valve_30.svg]/image;iconColor3/color;iconValue4;icon4[widgets~jqui-mfd~img~sani_valve_40.svg]/image;iconColor4/color;iconValue5;icon5[widgets~jqui-mfd~img~sani_valve_50.svg]/image;iconColor5/color;iconValue6;icon6[widgets~jqui-mfd~img~sani_valve_60.svg]/image;iconColor6/color;iconValue7;icon7[widgets~jqui-mfd~img~sani_valve_70.svg]/image;iconColor7/color;iconValue8;icon8[widgets~jqui-mfd~img~sani_valve_80.svg]/image;iconColor8/color;iconValue9;icon9[widgets~jqui-mfd~img~sani_valve_90.svg]/image;iconColor9/color;iconValue10;icon10[widgets~jqui-mfd~img~sani_valve_100.svg]/image;iconColor10/color;"
|
|
|
|
|
>
|
|
|
|
|
<div data-oid="<%= this.data.attr('oid') %>" data-hm-wid="<%= this.data.attr('oid-working') %>" class="vis-widget <%= this.data.attr('asButton') ? ' ui-widget ui-button ui-corner-all ui-state-default' : '' %> <%= this.data.attr('class') %>" id="<%= this.data.attr('wid') %>" style="width:76px; height:76px; position:absolute" <%= (el) -> this.data.attr('show_active') ? vis.binds.jqueryui.classes(el, true) : '' %>>
|
|
|
|
|
<div id="<%= this.data.attr('wid') %>_body" class="vis-widget-body" style="width:100%; height:100%">
|
|
|
|
|
<%
|
|
|
|
|
var styles = '';
|
|
|
|
|
if (this.data.invert_icon === 'true' || this.data.invert_icon === true) {
|
|
|
|
|
styles = 'filter: invert(1); -webkit-filter: invert(1); -moz-filter: invert(1); -o-filter: invert(1); -ms-filter: invert(1);';
|
|
|
|
|
}
|
|
|
|
|
var max = (this.data.attr('max') !== undefined) ? this.data.attr('max') : 100;
|
|
|
|
|
var min = (this.data.attr('min') !== undefined) ? this.data.attr('min') : 0;
|
|
|
|
|
|
|
|
|
|
if (typeof max === 'string' && parseFloat(max).toString() == max) max = parseFloat(max);
|
|
|
|
|
if (typeof min === 'string' && parseFloat(min).toString() == min) min = parseFloat(min);
|
|
|
|
|
|
|
|
|
|
var str = vis.states.attr(this.data.oid + '.val');
|
|
|
|
|
var val = parseFloat(str);
|
|
|
|
|
if (str === true || str === 'true') val = max;
|
|
|
|
|
if (str === false || str === 'false') val = min;
|
|
|
|
|
|
|
|
|
|
if (this.data.attr('invert_value')) val = max - val + min;
|
|
|
|
|
|
|
|
|
|
var image = null;
|
|
|
|
|
var imageColor = null;
|
|
|
|
|
|
|
|
|
|
if (vis.binds['jqui-mfd'].isNotEmpty(this.data.attr('iconValue0')) && this.data.attr('iconValue0') == str) {
|
|
|
|
|
imageColor = vis.binds['jqui-mfd'].isNotEmpty(this.data.attr('iconColor0')) ? this.data.attr('iconColor0') : this.data.attr('iconColor');
|
|
|
|
|
image = this.data.attr('icon0');
|
|
|
|
|
} else if (vis.binds['jqui-mfd'].isNotEmpty(this.data.attr('iconValue1')) && this.data.attr('iconValue1') == str) {
|
|
|
|
|
imageColor = vis.binds['jqui-mfd'].isNotEmpty(this.data.attr('iconColor1')) ? this.data.attr('iconColor1') : this.data.attr('iconColor');
|
|
|
|
|
image = this.data.attr('icon1');
|
|
|
|
|
} else if (vis.binds['jqui-mfd'].isNotEmpty(this.data.attr('iconValue2')) && this.data.attr('iconValue2') == str) {
|
|
|
|
|
imageColor = vis.binds['jqui-mfd'].isNotEmpty(this.data.attr('iconColor2')) ? this.data.attr('iconColor2') : this.data.attr('iconColor');
|
|
|
|
|
image = this.data.attr('icon2');
|
|
|
|
|
} else if (vis.binds['jqui-mfd'].isNotEmpty(this.data.attr('iconValue3')) && this.data.attr('iconValue3') == str) {
|
|
|
|
|
imageColor = vis.binds['jqui-mfd'].isNotEmpty(this.data.attr('iconColor3')) ? this.data.attr('iconColor3') : this.data.attr('iconColor');
|
|
|
|
|
image = this.data.attr('icon3');
|
|
|
|
|
} else if (vis.binds['jqui-mfd'].isNotEmpty(this.data.attr('iconValue4')) && this.data.attr('iconValue4') == str) {
|
|
|
|
|
imageColor = vis.binds['jqui-mfd'].isNotEmpty(this.data.attr('iconColor4')) ? this.data.attr('iconColor4') : this.data.attr('iconColor');
|
|
|
|
|
image = this.data.attr('icon4');
|
|
|
|
|
} else if (vis.binds['jqui-mfd'].isNotEmpty(this.data.attr('iconValue5')) && this.data.attr('iconValue5') == str) {
|
|
|
|
|
imageColor = vis.binds['jqui-mfd'].isNotEmpty(this.data.attr('iconColor5')) ? this.data.attr('iconColor5') : this.data.attr('iconColor');
|
|
|
|
|
image = this.data.attr('icon5');
|
|
|
|
|
} else if (vis.binds['jqui-mfd'].isNotEmpty(this.data.attr('iconValue6')) && this.data.attr('iconValue6') == str) {
|
|
|
|
|
imageColor = vis.binds['jqui-mfd'].isNotEmpty(this.data.attr('iconColor6')) ? this.data.attr('iconColor6') : this.data.attr('iconColor');
|
|
|
|
|
image = this.data.attr('icon6');
|
|
|
|
|
} else if (vis.binds['jqui-mfd'].isNotEmpty(this.data.attr('iconValue7')) && this.data.attr('iconValue7') == str) {
|
|
|
|
|
imageColor = vis.binds['jqui-mfd'].isNotEmpty(this.data.attr('iconColor7')) ? this.data.attr('iconColor7') : this.data.attr('iconColor');
|
|
|
|
|
image = this.data.attr('icon7');
|
|
|
|
|
} else if (vis.binds['jqui-mfd'].isNotEmpty(this.data.attr('iconValue8')) && this.data.attr('iconValue8') == str) {
|
|
|
|
|
imageColor = vis.binds['jqui-mfd'].isNotEmpty(this.data.attr('iconColor8')) ? this.data.attr('iconColor8') : this.data.attr('iconColor');
|
|
|
|
|
image = this.data.attr('icon8');
|
|
|
|
|
} else if (vis.binds['jqui-mfd'].isNotEmpty(this.data.attr('iconValue9')) && this.data.attr('iconValue9') == str) {
|
|
|
|
|
imageColor = vis.binds['jqui-mfd'].isNotEmpty(this.data.attr('iconColor9')) ? this.data.attr('iconColor9') : this.data.attr('iconColor');
|
|
|
|
|
image = this.data.attr('icon9');
|
|
|
|
|
} else if (vis.binds['jqui-mfd'].isNotEmpty(this.data.attr('iconValue10')) && this.data.attr('iconValue10') == str) {
|
|
|
|
|
imageColor = vis.binds['jqui-mfd'].isNotEmpty(this.data.attr('iconColor10')) ? this.data.attr('iconColor10') : this.data.attr('iconColor');
|
|
|
|
|
image = this.data.attr('icon10');
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if (!image && !imageColor) {
|
|
|
|
|
if (val >= max) {
|
|
|
|
|
imageColor = vis.binds['jqui-mfd'].isNotEmpty(this.data.attr('iconColor10')) ? this.data.attr('iconColor10') : this.data.attr('iconColor');
|
|
|
|
|
image = this.data.attr('icon10');
|
|
|
|
|
} else if (val >= min + (max - min) * 0.9) {
|
|
|
|
|
imageColor = vis.binds['jqui-mfd'].isNotEmpty(this.data.attr('iconColor9')) ? this.data.attr('iconColor9') : this.data.attr('iconColor');
|
|
|
|
|
image = this.data.attr('icon9');
|
|
|
|
|
} else if (val >= min + (max - min) * 0.8) {
|
|
|
|
|
imageColor = vis.binds['jqui-mfd'].isNotEmpty(this.data.attr('iconColor8')) ? this.data.attr('iconColor8') : this.data.attr('iconColor');
|
|
|
|
|
image = this.data.attr('icon8');
|
|
|
|
|
} else if (val >= min + (max - min) * 0.7) {
|
|
|
|
|
imageColor = vis.binds['jqui-mfd'].isNotEmpty(this.data.attr('iconColor7')) ? this.data.attr('iconColor7') : this.data.attr('iconColor');
|
|
|
|
|
image = this.data.attr('icon7');
|
|
|
|
|
} else if (val >= min + (max - min) * 0.6) {
|
|
|
|
|
imageColor = vis.binds['jqui-mfd'].isNotEmpty(this.data.attr('iconColor6')) ? this.data.attr('iconColor6') : this.data.attr('iconColor');
|
|
|
|
|
image = this.data.attr('icon6');
|
|
|
|
|
} else if (val >= min + (max - min) * 0.5) {
|
|
|
|
|
imageColor = vis.binds['jqui-mfd'].isNotEmpty(this.data.attr('iconColor5')) ? this.data.attr('iconColor5') : this.data.attr('iconColor');
|
|
|
|
|
image = this.data.attr('icon5');
|
|
|
|
|
} else if (val >= min + (max - min) * 0.4) {
|
|
|
|
|
imageColor = vis.binds['jqui-mfd'].isNotEmpty(this.data.attr('iconColor4')) ? this.data.attr('iconColor4') : this.data.attr('iconColor');
|
|
|
|
|
image = this.data.attr('icon4');
|
|
|
|
|
} else if (val >= min + (max - min) * 0.3) {
|
|
|
|
|
imageColor = vis.binds['jqui-mfd'].isNotEmpty(this.data.attr('iconColor3')) ? this.data.attr('iconColor3') : this.data.attr('iconColor');
|
|
|
|
|
image = this.data.attr('icon3');
|
|
|
|
|
} else if (val >= min + (max - min) * 0.2) {
|
|
|
|
|
imageColor = vis.binds['jqui-mfd'].isNotEmpty(this.data.attr('iconColor2')) ? this.data.attr('iconColor2') : this.data.attr('iconColor');
|
|
|
|
|
image = this.data.attr('icon2');
|
|
|
|
|
} else if (val >= min + (max - min) * 0.1) {
|
|
|
|
|
imageColor = vis.binds['jqui-mfd'].isNotEmpty(this.data.attr('iconColor1')) ? this.data.attr('iconColor1') : this.data.attr('iconColor');
|
|
|
|
|
image = this.data.attr('icon1');
|
|
|
|
|
} else {
|
|
|
|
|
imageColor = vis.binds['jqui-mfd'].isNotEmpty(this.data.attr('iconColor0')) ? this.data.attr('iconColor0') : this.data.attr('iconColor');
|
|
|
|
|
image = this.data.attr('icon0');
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if (image) {
|
|
|
|
|
if (imageColor) {
|
|
|
|
|
%>
|
|
|
|
|
<img style="<%= styles %>" width="100%" src="<%= image %>" <%= (el) -> vis.binds.jqueryui.setSvgColor(el, imageColor) %>/>
|
|
|
|
|
<% } else { %>
|
|
|
|
|
<img style="<%= styles %>" width="100%" src="<%= image %>" <%= (el) -> vis.binds['jqui-mfd'].removeSvg(this.data.attr('wid')) %>/>
|
|
|
|
|
<% }
|
|
|
|
|
}
|
|
|
|
|
%>
|
|
|
|
|
</div>
|
|
|
|
|
<div id="<%= this.data.attr('wid') %>_dialog" class="<%= this.data.attr('wid') %>_dialog vis-widget-dialog" title="<%== this.data.title || this.data.attr('oid') %>" style="padding-left: 20px;">
|
|
|
|
|
<div id="<%= this.data.attr('wid') %>_radio" class="<%= this.data.attr('wid') %>_radio" style="text-align: center" data-oid="<%= this.data.attr('oid') %>" <%= (el) -> vis.binds.jqueryui.radio(el); %> >
|
|
|
|
|
<%
|
|
|
|
|
var max = (this.data.attr('max') !== undefined) ? this.data.attr('max') : 100;
|
|
|
|
|
var min = (this.data.attr('min') !== undefined) ? this.data.attr('min') : 0;
|
|
|
|
|
|
|
|
|
|
if (typeof max === 'string' && parseFloat(max).toString() == max) max = parseFloat(max);
|
|
|
|
|
if (typeof min === 'string' && parseFloat(min).toString() == min) min = parseFloat(min);
|
|
|
|
|
%>
|
|
|
|
|
<input type="radio" id="<%= this.data.attr('wid') %>_radio0" name="<%= this.data.attr('wid') %>_radio" value="<%= !this.data.attr('invert_value') ? min : max %>" checked="checked"/><label for="<%= this.data.attr('wid') %>_radio0"><%= _('closed') %></label>
|
|
|
|
|
<input type="radio" id="<%= this.data.attr('wid') %>_radio1" name="<%= this.data.attr('wid') %>_radio" value="<%= !this.data.attr('invert_value') ? min + (max - min) * 0.25 : min + (max - min) * 0.75 %>" checked="checked"/><label for="<%= this.data.attr('wid') %>_radio1">25%</label>
|
|
|
|
|
<input type="radio" id="<%= this.data.attr('wid') %>_radio2" name="<%= this.data.attr('wid') %>_radio" value="<%= min + (max - min) * 0.5 %>" checked="checked"/><label for="<%= this.data.attr('wid') %>_radio2">50%</label>
|
|
|
|
|
<input type="radio" id="<%= this.data.attr('wid') %>_radio3" name="<%= this.data.attr('wid') %>_radio" value="<%= !this.data.attr('invert_value') ? min + (max - min) * 0.75 : min + (max - min) * 0.25 %>" checked="checked"/><label for="<%= this.data.attr('wid') %>_radio3">75%</label>
|
|
|
|
|
<input type="radio" id="<%= this.data.attr('wid') %>_radio4" name="<%= this.data.attr('wid') %>_radio" value="<%= !this.data.attr('invert_value') ? max : min %>"/><label for="<%= this.data.attr('wid') %>_radio4"><%= _('open') %></label>
|
|
|
|
|
</div>
|
|
|
|
|
<br/>
|
|
|
|
|
<div class="sliderJQUI" style="width: 90%" id="<%= this.data.attr('wid') %>_slider" data-oid="<%= this.data.attr('oid') %>" data-hm-wid="<%= this.data.attr('oid-working') %>" <%= (el) -> vis.binds.jqueryui.slider(el, {min: min, max: max, step: (max - min) / 100, inverted: this.data.attr('invert_value')}) %> />
|
|
|
|
|
<br/>
|
|
|
|
|
<%= vis.states.attr(this.data.oid + '.val') ? (((parseFloat(vis.states.attr(this.data.oid + '.val')) - min) / (max - min)) * 100).toFixed(0) : 0 %>%
|
|
|
|
|
<%= (this.data.show_value === 'true' || this.data.show_value === true) ? '(' + Math.round(parseFloat(vis.states.attr(this.data.oid + '.val') * 100) / 100) + ' ' + this.data.attr('units') + ')' : '' %>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="popup-helper" <%= (el) -> vis.binds.jqueryui.dialog(el, data, true) %> />
|
|
|
|
|
<div class="popup-helper" <%= (el) -> vis.binds.jqueryui.dialogAutoClose(el, data.attr('autoclose')) %> />
|
|
|
|
|
</div>
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<!--script id="tplMfdHueDimmerDialog"
|
|
|
|
|
type="text/ejs"
|
|
|
|
|
class="vis-tpl"
|
|
|
|
|
data-vis-set="jqui-mfd"
|
|
|
|
|
data-vis-name="hue_ctrl - jqui Dialog HUE_DIMMABLE_LIGHT"
|
|
|
|
|
data-vis-attrs="oid;title;noHeader/checkbox;autoclose/checkbox;modal/checkbox;invert_icon/checkbox"
|
|
|
|
|
>
|
|
|
|
|
<%
|
|
|
|
|
var styles = '';
|
|
|
|
|
if (this.data.invert_icon === 'true' || this.data.invert_icon === true) {
|
|
|
|
|
styles = 'filter: invert(1); -webkit-filter: invert(1); -moz-filter: invert(1); -o-filter: invert(1); -ms-filter: invert(1);';
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if (!localData.metaObjects[this.data.oid] || (localData.metaObjects[this.data.oid].HssType != "HUE_DIMMABLE_PLUG-IN_UNIT" && localData.metaObjects[this.data.oid].HssType != "HUE_DIMMABLE_LIGHT")) {
|
|
|
|
|
console.log("Widget "+this.data.attr('wid')+" error! ID has to be HUE_DIMMABLE_LIGHT/HUE_DIMMABLE_PLUG-IN_UNIT Channel!");
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if (localData.metaObjects[this.data.oid] && localData.metaObjects[this.data.oid].DPs) {
|
|
|
|
|
var hueIDs = {
|
|
|
|
|
STATE: localData.metaObjects[this.data.oid].DPs.STATE || 'nothing_selected',
|
|
|
|
|
LEVEL: localData.metaObjects[this.data.oid].DPs.LEVEL || 'nothing_selected',
|
|
|
|
|
};
|
|
|
|
|
} else {
|
|
|
|
|
var hueIDs = {
|
|
|
|
|
STATE: 'nothing_selected',
|
|
|
|
|
LEVEL: 'nothing_selected',
|
|
|
|
|
};
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
%>
|
|
|
|
|
<div data-oid="<%= hueIDs.STATE %>" class="vis-widget <%= this.data.attr('asButton') ? ' ui-widget ui-button ui-corner-all ui-state-default' : '' %> <%= this.data.attr('class') %>" id="<%= this.data.attr('wid') %>" style="width:76px; height:76px; position:absolute" <%= (el) -> vis.binds.jqueryui.classes(el) %>>
|
|
|
|
|
<div id="<%= this.data.attr('wid') %>_body" class="vis-widget-body" style="width:100%; height:100%" <%= (el) -> vis.preloadImages(['widgets/jqui-mfd/img/light_light_dim_100.png','widgets/jqui-mfd/img/light_light_dim_90.png','widgets/jqui-mfd/img/light_light_dim_80.png','widgets/jqui-mfd/img/light_light_dim_70.png','widgets/jqui-mfd/img/light_light_dim_60.png','widgets/jqui-mfd/img/light_light_dim_50.png','widgets/jqui-mfd/img/light_light_dim_40.png','widgets/jqui-mfd/img/light_light_dim_30.png','widgets/jqui-mfd/img/light_light_dim_20.png','widgets/jqui-mfd/img/light_light_dim_10.png','widgets/jqui-mfd/img/light_light_dim.png']); %>>
|
|
|
|
|
<%
|
|
|
|
|
var str = vis.states.attr(hueIDs.LEVEL + '.val');
|
|
|
|
|
var val = (parseFloat(str) + 1) / 255;
|
|
|
|
|
|
|
|
|
|
if (val == 1) {
|
|
|
|
|
%>
|
|
|
|
|
<img style="<%= styles %>" width="100%" src="widgets/jqui-mfd/img/light_light_dim_100.png"/>
|
|
|
|
|
<% } else if (val >= 0.9) { %>
|
|
|
|
|
<img style="<%= styles %>" width="100%" src="widgets/jqui-mfd/img/light_light_dim_90.png"/>
|
|
|
|
|
<% } else if (val >= 0.8) { %>
|
|
|
|
|
<img style="<%= styles %>" width="100%" src="widgets/jqui-mfd/img/light_light_dim_80.png"/>
|
|
|
|
|
<% } else if (val >= 0.7) { %>
|
|
|
|
|
<img style="<%= styles %>" width="100%" src="widgets/jqui-mfd/img/light_light_dim_70.png"/>
|
|
|
|
|
<% } else if (val >= 0.6) { %>
|
|
|
|
|
<img style="<%= styles %>" width="100%" src="widgets/jqui-mfd/img/light_light_dim_60.png"/>
|
|
|
|
|
<% } else if (val >= 0.5) { %>
|
|
|
|
|
<img style="<%= styles %>" width="100%" src="widgets/jqui-mfd/img/light_light_dim_50.png"/>
|
|
|
|
|
<% } else if (val >= 0.4) { %>
|
|
|
|
|
<img style="<%= styles %>" width="100%" src="widgets/jqui-mfd/img/light_light_dim_40.png"/>
|
|
|
|
|
<% } else if (val >= 0.3) { %>
|
|
|
|
|
<img style="<%= styles %>" width="100%" src="widgets/jqui-mfd/img/light_light_dim_30.png"/>
|
|
|
|
|
<% } else if (val >= 0.2) { %>
|
|
|
|
|
<img style="<%= styles %>" width="100%" src="widgets/jqui-mfd/img/light_light_dim_20.png"/>
|
|
|
|
|
<% } else if (val >= 0.1) { %>
|
|
|
|
|
<img style="<%= styles %>" width="100%" src="widgets/jqui-mfd/img/light_light_dim_10.png"/>
|
|
|
|
|
<% } else if (val >= 0.01) { %>
|
|
|
|
|
<img style="<%= styles %>" width="100%" src="widgets/jqui-mfd/img/light_light_dim_00.png"/>
|
|
|
|
|
<% } else { %>
|
|
|
|
|
<img style="<%= styles %>" width="100%" src="widgets/jqui-mfd/img/light_light_dim.png"/>
|
|
|
|
|
<% } %>
|
|
|
|
|
</div>
|
|
|
|
|
<div id="<%= this.data.attr('wid') %>_dialog" class="vis-widget-dialog" title="<%== this.data.title || this.data.attr('oid') %>" style="padding-left:20px;">
|
|
|
|
|
|
|
|
|
|
<br/>
|
|
|
|
|
<span id="<%= this.data.attr('wid') %>_radio" data-oid="<%= hueIDs.STATE %>" <%= (el) -> vis.binds.jqueryui.radio(el); %> >
|
|
|
|
|
<input type="radio" id="<%= this.data.attr('wid') %>_radio_off" name="<%= this.data.attr('wid') %>_radio" value="false" checked="checked"/><label for="<%= this.data.attr('wid') %>_radio_off"><%= _('off') %></label>
|
|
|
|
|
<input type="radio" id="<%= this.data.attr('wid') %>_radio_on" name="<%= this.data.attr('wid') %>_radio" value="true"/><label for="<%= this.data.attr('wid') %>_radio_on"><%= _('on') %></label>
|
|
|
|
|
</span>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<br/><br/>
|
|
|
|
|
Helligkeit
|
|
|
|
|
<div class="sliderJQUI" style="width:90%" id="<%= this.data.attr('wid') %>_slider" data-oid="<%= hueIDs.LEVEL %>" data-hm-wid="<%= this.data.attr('oid-working') %>" <%= (el) -> vis.binds.jqueryui.slider(el, {min:0,max:255,step:1}) %> />
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
<div class="popup-helper" <%= (el) -> vis.binds.jqueryui.dialog(el,{width:440,height:320,modal:data.attr('modal')},true) %> />
|
|
|
|
|
<div class="popup-helper" <%= (el) -> vis.binds.jqueryui.dialogAutoClose(el, data.attr('autoclose')) %> />
|
|
|
|
|
</div>
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<script id="tplMfdLivingColorDialog"
|
|
|
|
|
type="text/ejs"
|
|
|
|
|
class="vis-tpl"
|
|
|
|
|
data-vis-set="jqui-mfd"
|
|
|
|
|
data-vis-name="hue_ctrl - jqui Dialog HUE_COLOR_LIGHT"
|
|
|
|
|
data-vis-attrs="oid;title;noHeader/checkbox;autoclose/checkbox;modal/checkbox;invert_icon/checkbox" >
|
|
|
|
|
<%
|
|
|
|
|
var styles = '';
|
|
|
|
|
if (this.data.invert_icon === 'true' || this.data.invert_icon === true) {
|
|
|
|
|
styles = 'filter: invert(1); -webkit-filter: invert(1); -moz-filter: invert(1); -o-filter: invert(1); -ms-filter: invert(1);';
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if (!localData.metaObjects[this.data.oid] || localData.metaObjects[this.data.oid].HssType != "HUE_COLOR_LIGHT") {
|
|
|
|
|
console.log("Widget "+this.data.attr('wid')+" error! ID has to be HUE_COLOR_LIGHT Channel!");
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if (localData.metaObjects[this.data.oid] && localData.metaObjects[this.data.oid].DPs) {
|
|
|
|
|
var hueIDs = {
|
|
|
|
|
STATE: localData.metaObjects[this.data.oid].DPs.STATE || 'nothing_selected',
|
|
|
|
|
LEVEL: localData.metaObjects[this.data.oid].DPs.LEVEL || 'nothing_selected',
|
|
|
|
|
SAT: localData.metaObjects[this.data.oid].DPs.SAT || 'nothing_selected',
|
|
|
|
|
HUE: localData.metaObjects[this.data.oid].DPs.HUE || 'nothing_selected',
|
|
|
|
|
};
|
|
|
|
|
} else {
|
|
|
|
|
var hueIDs = {
|
|
|
|
|
STATE: 'nothing_selected',
|
|
|
|
|
LEVEL: 'nothing_selected',
|
|
|
|
|
SAT: 'nothing_selected',
|
|
|
|
|
HUE: 'nothing_selected',
|
|
|
|
|
};
|
|
|
|
|
}
|
|
|
|
|
%>
|
|
|
|
|
<div data-oid="<%= hueIDs.STATE %>" class="vis-widget <%= this.data.attr('asButton') ? ' ui-widget ui-button ui-corner-all ui-state-default' : '' %> <%= this.data.attr('class') %>" id="<%= this.data.attr('wid') %>" style="width:76px; height:76px; position:absolute" <%= (el) -> vis.binds.jqueryui.classes(el) %>>
|
|
|
|
|
<div id="<%= this.data.attr('wid') %>_body" class="vis-widget-body" style="width:100%; height:100%" <%= (el) -> vis.preloadImages(['widgets/jqui-mfd/img/light_light_dim_100.png','widgets/jqui-mfd/img/light_light_dim_90.png','widgets/jqui-mfd/img/light_light_dim_80.png','widgets/jqui-mfd/img/light_light_dim_70.png','widgets/jqui-mfd/img/light_light_dim_60.png','widgets/jqui-mfd/img/light_light_dim_50.png','widgets/jqui-mfd/img/light_light_dim_40.png','widgets/jqui-mfd/img/light_light_dim_30.png','widgets/jqui-mfd/img/light_light_dim_20.png','widgets/jqui-mfd/img/light_light_dim_10.png','widgets/jqui-mfd/img/light_light_dim.png']); %>>
|
|
|
|
|
<%
|
|
|
|
|
var str = vis.states.attr(hueIDs.LEVEL + '.val');
|
|
|
|
|
var val = (parseFloat(str) + 1) / 255;
|
|
|
|
|
|
|
|
|
|
if (val == 1) {
|
|
|
|
|
%>
|
|
|
|
|
<img style="<%= styles %>" width="100%" src="widgets/jqui-mfd/img/light_light_dim_100.png"/>
|
|
|
|
|
<% } else if (val >= 0.9) { %>
|
|
|
|
|
<img style="<%= styles %>" width="100%" src="widgets/jqui-mfd/img/light_light_dim_90.png"/>
|
|
|
|
|
<% } else if (val >= 0.8) { %>
|
|
|
|
|
<img style="<%= styles %>" width="100%" src="widgets/jqui-mfd/img/light_light_dim_80.png"/>
|
|
|
|
|
<% } else if (val >= 0.7) { %>
|
|
|
|
|
<img style="<%= styles %>" width="100%" src="widgets/jqui-mfd/img/light_light_dim_70.png"/>
|
|
|
|
|
<% } else if (val >= 0.6) { %>
|
|
|
|
|
<img style="<%= styles %>" width="100%" src="widgets/jqui-mfd/img/light_light_dim_60.png"/>
|
|
|
|
|
<% } else if (val >= 0.5) { %>
|
|
|
|
|
<img style="<%= styles %>" width="100%" src="widgets/jqui-mfd/img/light_light_dim_50.png"/>
|
|
|
|
|
<% } else if (val >= 0.4) { %>
|
|
|
|
|
<img style="<%= styles %>" width="100%" src="widgets/jqui-mfd/img/light_light_dim_40.png"/>
|
|
|
|
|
<% } else if (val >= 0.3) { %>
|
|
|
|
|
<img style="<%= styles %>" width="100%" src="widgets/jqui-mfd/img/light_light_dim_30.png"/>
|
|
|
|
|
<% } else if (val >= 0.2) { %>
|
|
|
|
|
<img style="<%= styles %>" width="100%" src="widgets/jqui-mfd/img/light_light_dim_20.png"/>
|
|
|
|
|
<% } else if (val >= 0.1) { %>
|
|
|
|
|
<img style="<%= styles %>" width="100%" src="widgets/jqui-mfd/img/light_light_dim_10.png"/>
|
|
|
|
|
<% } else if (val >= 0.01) { %>
|
|
|
|
|
<img style="<%= styles %>" width="100%" src="widgets/jqui-mfd/img/light_light_dim_00.png"/>
|
|
|
|
|
<% } else { %>
|
|
|
|
|
<img style="<%= styles %>" width="100%" src="widgets/jqui-mfd/img/light_light_dim.png"/>
|
|
|
|
|
<% } %>
|
|
|
|
|
</div>
|
|
|
|
|
<div id="<%= this.data.attr('wid') %>_dialog" class="vis-widget-dialog" title="<%== this.data.title || this.data.attr('oid') %>" style="padding-left:20px;">
|
|
|
|
|
|
|
|
|
|
<br/>
|
|
|
|
|
<span id="<%= this.data.attr('wid') %>_radio" data-oid="<%= hueIDs.STATE %>" <%= (el) -> vis.binds.jqueryui.radio(el); %> >
|
|
|
|
|
<input type="radio" id="<%= this.data.attr('wid') %>_radio_off" name="<%= this.data.attr('wid') %>_radio" value="false" checked="checked"/><label for="<%= this.data.attr('wid') %>_radio_off"><%= _('off') %></label>
|
|
|
|
|
<input type="radio" id="<%= this.data.attr('wid') %>_radio_on" name="<%= this.data.attr('wid') %>_radio" value="true"/><label for="<%= this.data.attr('wid') %>_radio_on"><%= _('on') %></label>
|
|
|
|
|
</span>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<br/><br/>
|
|
|
|
|
Helligkeit
|
|
|
|
|
<div class="sliderJQUI" style="width:90%" id="<%= this.data.attr('wid') %>_slider" data-oid="<%= hueIDs.LEVEL %>" data-hm-wid="<%= this.data.attr('oid-working') %>" <%= (el) -> vis.binds.jqueryui.slider(el, {min:0,max:255,step:1}) %> />
|
|
|
|
|
<br/>
|
|
|
|
|
|
|
|
|
|
<br/>
|
|
|
|
|
<div class="hue-mode-hue">
|
|
|
|
|
<div class="sliderJQUI hue-slider-hue" style="width:90%" id="<%= this.data.attr('wid') %>_hue_hue_slider" data-oid="<%= hueIDs.HUE %>" data-hm-wid="<%= this.data.attr('oid-working') %>" <%= (el) -> vis.binds.jqueryui.slider(el, {min:0,max:'nothing_selected',step:1}) %> />
|
|
|
|
|
<br/>
|
|
|
|
|
Sättigung
|
|
|
|
|
<div class="sliderJQUI hue-slider-sat" style="width:90%" id="<%= this.data.attr('wid') %>_hue_sat_slider" data-oid="<%= hueIDs.SAT %>" data-hm-wid="<%= this.data.attr('oid-working') %>" <%= (el) -> vis.binds.jqueryui.slider(el, {min:0,max:255,step:1}) %> />
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
<div class="popup-helper" <%= (el) -> vis.binds.jqueryui.dialog(el,{width:440,height:320,modal:data.attr('modal')},true) %> />
|
|
|
|
|
<div class="popup-helper" <%= (el) -> vis.binds.jqueryui.dialogAutoClose(el, data.attr('autoclose')) %> />
|
|
|
|
|
</div>
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<script id="tplMfdHueDialog"
|
|
|
|
|
type="text/ejs"
|
|
|
|
|
class="vis-tpl"
|
|
|
|
|
data-vis-set="jqui-mfd"
|
|
|
|
|
data-vis-name="hue_ctrl - jqui Dialog HUE_EXTENDED_COLOR_LIGHT"
|
|
|
|
|
data-vis-attrs="oid;title;noHeader/checkbox;autoclose/checkbox;modal/checkbox;invert_icon/checkbox"
|
|
|
|
|
>
|
|
|
|
|
<%
|
|
|
|
|
var styles = '';
|
|
|
|
|
if (this.data.invert_icon === 'true' || this.data.invert_icon === true) {
|
|
|
|
|
styles = 'filter: invert(1); -webkit-filter: invert(1); -moz-filter: invert(1); -o-filter: invert(1); -ms-filter: invert(1);';
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if (!localData.metaObjects[this.data.oid] || localData.metaObjects[this.data.oid].HssType != "HUE_EXTENDED_COLOR_LIGHT") {
|
|
|
|
|
console.log("Widget "+this.data.attr('wid')+" error! ID has to be HUE_EXTENDED_COLOR_LIGHT Channel!");
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if (localData.metaObjects[this.data.oid] && localData.metaObjects[this.data.oid].DPs) {
|
|
|
|
|
var hueIDs = {
|
|
|
|
|
STATE: localData.metaObjects[this.data.oid].DPs.STATE || 'nothing_selected',
|
|
|
|
|
LEVEL: localData.metaObjects[this.data.oid].DPs.LEVEL || 'nothing_selected',
|
|
|
|
|
COLORMODE: localData.metaObjects[this.data.oid].DPs.COLORMODE || 'nothing_selected',
|
|
|
|
|
CT: localData.metaObjects[this.data.oid].DPs.CT || 'nothing_selected',
|
|
|
|
|
SAT: localData.metaObjects[this.data.oid].DPs.SAT || 'nothing_selected',
|
|
|
|
|
HUE: localData.metaObjects[this.data.oid].DPs.HUE || 'nothing_selected',
|
|
|
|
|
};
|
|
|
|
|
} else {
|
|
|
|
|
var hueIDs = {
|
|
|
|
|
STATE: 'nothing_selected',
|
|
|
|
|
LEVEL: 'nothing_selected',
|
|
|
|
|
COLORMODE: 'nothing_selected',
|
|
|
|
|
CT: 'nothing_selected',
|
|
|
|
|
SAT: 'nothing_selected',
|
|
|
|
|
HUE: 'nothing_selected'
|
|
|
|
|
};
|
|
|
|
|
}
|
|
|
|
|
%>
|
|
|
|
|
<div data-oid="<%= hueIDs.STATE %>" class="vis-widget <%= this.data.attr('asButton') ? ' ui-widget ui-button ui-corner-all ui-state-default' : '' %> <%= this.data.attr('class') %>" id="<%= this.data.attr('wid') %>" style="width:76px; height:76px; position:absolute" <%= (el) -> vis.binds.jqueryui.classes(el) %>>
|
|
|
|
|
<div id="<%= this.data.attr('wid') %>_body" class="vis-widget-body" style="width:100%; height:100%" <%= (el) -> vis.preloadImages(['widgets/jqui-mfd/img/light_light_dim_100.png','widgets/jqui-mfd/img/light_light_dim_90.png','widgets/jqui-mfd/img/light_light_dim_80.png','widgets/jqui-mfd/img/light_light_dim_70.png','widgets/jqui-mfd/img/light_light_dim_60.png','widgets/jqui-mfd/img/light_light_dim_50.png','widgets/jqui-mfd/img/light_light_dim_40.png','widgets/jqui-mfd/img/light_light_dim_30.png','widgets/jqui-mfd/img/light_light_dim_20.png','widgets/jqui-mfd/img/light_light_dim_10.png','widgets/jqui-mfd/img/light_light_dim.png']); %>>
|
|
|
|
|
<%
|
|
|
|
|
var str = vis.states.attr(hueIDs.LEVEL + '.val');
|
|
|
|
|
var val = (parseFloat(str) + 1) / 255;
|
|
|
|
|
|
|
|
|
|
if (val == 1) {
|
|
|
|
|
%>
|
|
|
|
|
<img style="<%= styles %>" width="100%" src="widgets/jqui-mfd/img/light_light_dim_100.png"/>
|
|
|
|
|
<% } else if (val >= 0.9) { %>
|
|
|
|
|
<img style="<%= styles %>" width="100%" src="widgets/jqui-mfd/img/light_light_dim_90.png"/>
|
|
|
|
|
<% } else if (val >= 0.8) { %>
|
|
|
|
|
<img style="<%= styles %>" width="100%" src="widgets/jqui-mfd/img/light_light_dim_80.png"/>
|
|
|
|
|
<% } else if (val >= 0.7) { %>
|
|
|
|
|
<img style="<%= styles %>" width="100%" src="widgets/jqui-mfd/img/light_light_dim_70.png"/>
|
|
|
|
|
<% } else if (val >= 0.6) { %>
|
|
|
|
|
<img style="<%= styles %>" width="100%" src="widgets/jqui-mfd/img/light_light_dim_60.png"/>
|
|
|
|
|
<% } else if (val >= 0.5) { %>
|
|
|
|
|
<img style="<%= styles %>" width="100%" src="widgets/jqui-mfd/img/light_light_dim_50.png"/>
|
|
|
|
|
<% } else if (val >= 0.4) { %>
|
|
|
|
|
<img style="<%= styles %>" width="100%" src="widgets/jqui-mfd/img/light_light_dim_40.png"/>
|
|
|
|
|
<% } else if (val >= 0.3) { %>
|
|
|
|
|
<img style="<%= styles %>" width="100%" src="widgets/jqui-mfd/img/light_light_dim_30.png"/>
|
|
|
|
|
<% } else if (val >= 0.2) { %>
|
|
|
|
|
<img style="<%= styles %>" width="100%" src="widgets/jqui-mfd/img/light_light_dim_20.png"/>
|
|
|
|
|
<% } else if (val >= 0.1) { %>
|
|
|
|
|
<img style="<%= styles %>" width="100%" src="widgets/jqui-mfd/img/light_light_dim_10.png"/>
|
|
|
|
|
<% } else if (val >= 0.01) { %>
|
|
|
|
|
<img style="<%= styles %>" width="100%" src="widgets/jqui-mfd/img/light_light_dim_00.png"/>
|
|
|
|
|
<% } else { %>
|
|
|
|
|
<img style="<%= styles %>" width="100%" src="widgets/jqui-mfd/img/light_light_dim.png"/>
|
|
|
|
|
<% } %>
|
|
|
|
|
</div>
|
|
|
|
|
<div id="<%= this.data.attr('wid') %>_dialog" class="vis-widget-dialog" title="<%== this.data.title || this.data.attr('oid') %>" style="padding-left:20px;">
|
|
|
|
|
|
|
|
|
|
<br/>
|
|
|
|
|
<span id="<%= this.data.attr('wid') %>_radio" data-oid="<%= hueIDs.STATE %>" <%= (el) -> vis.binds.jqueryui.radio(el); %> >
|
|
|
|
|
<input type="radio" id="<%= this.data.attr('wid') %>_radio_off" name="<%= this.data.attr('wid') %>_radio" value="false" checked="checked"/><label for="<%= this.data.attr('wid') %>_radio_off"><%= _('off') %></label>
|
|
|
|
|
<input type="radio" id="<%= this.data.attr('wid') %>_radio_on" name="<%= this.data.attr('wid') %>_radio" value="true"/><label for="<%= this.data.attr('wid') %>_radio_on"><%= _('on') %></label>
|
|
|
|
|
</span>
|
|
|
|
|
|
|
|
|
|
<span style="padding-left: 25px" id="<%= this.data.attr('wid') %>_radio_cm" data-oid="<%= hueIDs.COLORMODE %>" <%= (el) -> vis.binds.jqueryui.radio(el); %> >
|
|
|
|
|
<input type="radio" id="<%= this.data.attr('wid') %>_radio_cm_ct" name="<%= this.data.attr('wid') %>_radio_cm" value="ct" checked="checked"/><label for="<%= this.data.attr('wid') %>_radio_cm_ct">weiß</label>
|
|
|
|
|
<input type="radio" id="<%= this.data.attr('wid') %>_radio_cm_hs" name="<%= this.data.attr('wid') %>_radio_cm" value="hs"/><label for="<%= this.data.attr('wid') %>_radio_cm_hs">farbe</label>
|
|
|
|
|
</span>
|
|
|
|
|
|
|
|
|
|
<br/><br/>
|
|
|
|
|
Helligkeit
|
|
|
|
|
<div class="sliderJQUI" style="width:90%" id="<%= this.data.attr('wid') %>_slider" data-oid="<%= hueIDs.LEVEL %>" data-hm-wid="<%= this.data.attr('oid-working') %>" <%= (el) -> vis.binds.jqueryui.slider(el, {min:0,max:255,step:1}) %> />
|
|
|
|
|
<br/>
|
|
|
|
|
|
|
|
|
|
<br/>
|
|
|
|
|
<div class="hue-mode-ct">
|
|
|
|
|
<div class="sliderJQUI hue-slider-ct" style="width:90%" id="<%= this.data.attr('wid') %>_hue_ct_slider" data-oid="<%= hueIDs.CT %>" data-hm-wid="<%= this.data.attr('oid-working') %>" <%= (el) -> vis.binds.jqueryui.slider(el, {min:153,max:500,step:1}) %> />
|
|
|
|
|
</div>
|
|
|
|
|
<div class="hue-mode-hue">
|
|
|
|
|
<div class="sliderJQUI hue-slider-hue" style="width:90%" id="<%= this.data.attr('wid') %>_hue_hue_slider" data-oid="<%= hueIDs.HUE %>" data-hm-wid="<%= this.data.attr('oid-working') %>" <%= (el) -> vis.binds.jqueryui.slider(el, {min:0,max:'nothing_selected',step:1}) %> />
|
|
|
|
|
<br/>
|
|
|
|
|
Sättigung
|
|
|
|
|
<div class="sliderJQUI hue-slider-sat" style="width:90%" id="<%= this.data.attr('wid') %>_hue_sat_slider" data-oid="<%= hueIDs.SAT %>" data-hm-wid="<%= this.data.attr('oid-working') %>" <%= (el) -> vis.binds.jqueryui.slider(el, {min:0,max:255,step:1}) %> />
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
<div class="pupup-helper" <%= (el) -> vis.binds.jqueryui.hueColormode(el, hueIDs.COLORMODE) %> />
|
|
|
|
|
<div class="popup-helper" <%= (el) -> vis.binds.jqueryui.dialog(el,{width:440,height:320,modal:data.attr('modal')},true) %> />
|
|
|
|
|
<div class="popup-helper" <%= (el) -> vis.binds.jqueryui.dialogAutoClose(el, data.attr('autoclose')) %> />
|
|
|
|
|
</div>
|
|
|
|
|
</script-->
|
|
|
|
|
|
|
|
|
|
<script id="tplMfdCamSnapshot"
|
|
|
|
|
type="text/ejs"
|
|
|
|
|
class="vis-tpl"
|
|
|
|
|
data-vis-set="jqui-mfd"
|
|
|
|
|
data-vis-type="static,camera,dialog"
|
|
|
|
|
data-vis-prev='<div id="prev_tplMfdCamSnapshot" style="position: relative; text-align: initial;padding: 4px "><div class="vis-widget_prev ui-widget ui-button ui-corner-all ui-state-default " style="width: 70px; height: 70px;"> <div class="vis-widget-prev-body"> <img src="widgets/jqui-mfd/img/it_camera.png" style="filter: invert(1); -webkit-filter: invert(1); -moz-filter: invert(1); -o-filter: invert(1); -ms-filter: invert(1); vertical-align:middle;height:100%;"></div></div></div>'
|
|
|
|
|
data-vis-name="Cam/Snapshot - Dialog"
|
|
|
|
|
data-vis-attrs="alt;text;asButton[true]/checkbox;iconColor/color;"
|
|
|
|
|
data-vis-attrs0="group.icon;icon/image;invert_icon/checkbox;icon_interval;"
|
|
|
|
|
data-vis-attrs1="group.dialog;url;interval[2000];title;noHeader/checkbox;autoclose/slider,0,30000,100;modal/checkbox;dialog_width[640];dialog_height[480];dialog_top;dialog_left;overflowX/nselect,,visible,hidden,scroll,auto,initial,inherit;overflowY/nselect,,visible,hidden,scroll,auto,initial,inherit;"
|
|
|
|
|
>
|
|
|
|
|
<%
|
|
|
|
|
var styles = '';
|
|
|
|
|
if (this.data.invert_icon === 'true' || this.data.invert_icon === true) {
|
|
|
|
|
styles = 'filter: invert(1); -webkit-filter: invert(1); -moz-filter: invert(1); -o-filter: invert(1); -ms-filter: invert(1);';
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
%>
|
|
|
|
|
<div class="vis-widget <%= this.data.attr('asButton') ? ' ui-widget ui-button ui-corner-all ui-state-default' : '' %> <%== this.data.attr('class') %>" style="width: 76px; height: 76px;" id="<%= this.data.attr('wid') %>" <%= (el) -> this.data.attr('asButton') ? vis.binds.jqueryui.classes(el) : '' %>>
|
|
|
|
|
<div id="<%= this.data.attr('wid') %>_body" class="vis-widget-body">
|
|
|
|
|
<% if (this.data.attr('iconColor')) { %>
|
|
|
|
|
<img src="<%= this.data.attr('icon') ? this.data.attr('icon') : 'widgets/jqui-mfd/img/it_camera.svg' %>" style="<%= styles %> vertical-align:middle;height:100%;" alt="<%== this.data.attr('alt') %>" <%= (el) -> vis.binds.jqueryui.setSvgColor(el, this.data.attr('iconColor')) %>/>
|
|
|
|
|
<% } else { %>
|
|
|
|
|
<img src="<%= this.data.attr('icon') ? this.data.attr('icon') : 'widgets/jqui-mfd/img/it_camera.png' %>" style="<%= styles %> vertical-align:middle;height:100%;" alt="<%== this.data.attr('alt') %>" <%= (el) -> vis.binds['jqui-mfd'].removeSvg(this.data.attr('wid')) %>/>
|
|
|
|
|
<% } %>
|
|
|
|
|
<div <%= (el) -> vis.binds.basic.imgRefresh(el, {src: data.attr('icon'), refreshInterval: data.attr('icon_interval')}, this.view) %>></div>
|
|
|
|
|
<%= this.data.attr('text') %>
|
|
|
|
|
</div>
|
|
|
|
|
<div style="overflow-y: hidden !important;" id="<%= this.data.attr('wid') %>_dialog" class="<%= this.data.attr('wid') %>_dialog vis-widget-dialog" title="<%== this.data.attr('title') %>">
|
|
|
|
|
<img id="<%= this.data.wid %>_img" alt="<%= this.data.text %>" style="width:<%= this.data.dialog_width %>px; height:<%= this.data.dialog_height %>px; border:none;" src="<%= this.data.url %>"/>
|
|
|
|
|
<div <%= (el) -> vis.binds.basic.imgRefresh(el, {src: data.attr('url'), refreshInterval: data.attr('interval')}, this.view) %>></div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="popup-helper" <%= (el) -> vis.binds.jqueryui.dialog(el, data, true, true) %> />
|
|
|
|
|
<div class="popup-helper" <%= (el) -> vis.binds.jqueryui.dialogAutoClose(el, data.attr('autoclose')) %> />
|
|
|
|
|
</div>
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<script id="tplValMfdCamSnapshot"
|
|
|
|
|
type="text/ejs"
|
|
|
|
|
class="vis-tpl"
|
|
|
|
|
data-vis-set="jqui-mfd"
|
|
|
|
|
data-vis-type="val,camera,dialog"
|
|
|
|
|
data-vis-prev='<div id="prev_tplValMfdCamSnapshot" style="position: relative; text-align: initial;padding: 4px "><div class="vis-widget_prev ui-widget ui-button ui-corner-all ui-state-default ui-state-active" style="width: 70px; height: 70px;"> <div class="vis-widget-prev-body"> <img src="widgets/jqui-mfd/img/it_camera.png" style="filter: invert(1); -webkit-filter: invert(1); -moz-filter: invert(1); -o-filter: invert(1); -ms-filter: invert(1); vertical-align:middle;height:100%;"></div></div></div>'
|
|
|
|
|
data-vis-name="Cam/Snapshot - Dialog"
|
|
|
|
|
data-vis-attrs="oid;alt;text;asButton[true]/checkbox;iconColor/color;"
|
|
|
|
|
data-vis-attrs0="group.icon;icon/image;invert_icon/checkbox;icon_interval;"
|
|
|
|
|
data-vis-attrs1="group.dialog;url;interval[2000];title;noHeader/checkbox;autoclose/slider,0,30000,100;modal/checkbox;dialog_width[640];dialog_height[480];dialog_top;dialog_left;overflowX/nselect,,visible,hidden,scroll,auto,initial,inherit;overflowY/nselect,,visible,hidden,scroll,auto,initial,inherit;"
|
|
|
|
|
>
|
|
|
|
|
<%
|
|
|
|
|
var styles = '';
|
|
|
|
|
if (this.data.invert_icon === 'true' || this.data.invert_icon === true) {
|
|
|
|
|
styles = 'filter: invert(1); -webkit-filter: invert(1); -moz-filter: invert(1); -o-filter: invert(1); -ms-filter: invert(1);';
|
|
|
|
|
}
|
|
|
|
|
%>
|
|
|
|
|
<div class="vis-widget <%= this.data.attr('asButton') ? ' ui-widget ui-button ui-corner-all ui-state-default' : '' %> <%== this.data.attr('class') %>" style="width: 76px; height: 76px;" id="<%= this.data.attr('wid') %>" <%= (el) -> this.data.attr('asButton') ? vis.binds.jqueryui.classes(el) : '' %>>
|
|
|
|
|
<div id="<%= this.data.attr('wid') %>_body" class="vis-widget-body">
|
|
|
|
|
<% if (this.data.attr('iconColor')) { %>
|
|
|
|
|
<img src="<%= this.data.attr('icon') ? this.data.attr('icon') : 'widgets/jqui-mfd/img/it_camera.svg' %>" style="<%= styles %> vertical-align:middle;height:100%;" alt="<%== this.data.attr('alt') %>" <%= (el) -> vis.binds.jqueryui.setSvgColor(el, this.data.attr('iconColor')) %>/>
|
|
|
|
|
<% } else { %>
|
|
|
|
|
<img src="<%= this.data.attr('icon') ? this.data.attr('icon') : 'widgets/jqui-mfd/img/it_camera.png' %>" style="<%= styles %> vertical-align:middle;height:100%;" alt="<%== this.data.attr('alt') %>" <%= (el) -> vis.binds['jqui-mfd'].removeSvg(this.data.attr('wid')) %>/>
|
|
|
|
|
<% } %>
|
|
|
|
|
<div <%= (el) -> vis.binds.basic.imgRefresh(el, {src: data.attr('icon'), refreshInterval: data.attr('icon_interval')}, this.view) %>></div>
|
|
|
|
|
<%= this.data.attr('text') %>
|
|
|
|
|
</div>
|
|
|
|
|
<div style="overflow-y: hidden !important;" id="<%= this.data.attr('wid') %>_dialog" class="<%= this.data.attr('wid') %>_dialog vis-widget-dialog" title="<%== this.data.attr('title') %>">
|
|
|
|
|
<img id="<%= this.data.wid %>_img" alt="<%= this.data.text %>" style="width:<%= this.data.dialog_width %>px; height:<%= this.data.dialog_height %>px; border:none;" src="<%= vis.states.attr(this.data.oid + '.val' ) %>"/>
|
|
|
|
|
<div <%= (el) -> vis.binds.basic.imgRefresh(el, {src: vis.states.attr(data.oid + '.val'), refreshInterval: data.attr('interval')}, this.view) %>></div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="popup-helper" <%= (el) -> vis.binds.jqueryui.dialog(el, data, true, true) %> />
|
|
|
|
|
<div class="popup-helper" <%= (el) -> vis.binds.jqueryui.dialogAutoClose(el, data.attr('autoclose')) %> />
|
|
|
|
|
</div>
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<script id="tplMfdCamMjpg"
|
|
|
|
|
type="text/ejs"
|
|
|
|
|
class="vis-tpl"
|
|
|
|
|
data-vis-set="jqui-mfd"
|
|
|
|
|
data-vis-prev='<div id="prev_tplMfdCamMjpg" style="position: relative; text-align: initial;padding: 4px "><div class="vis-widget_prev ui-widget ui-button ui-corner-all ui-state-default" style="width: 70px; height: 70px;"> <div class="vis-widget-prev-body"> <img src="widgets/jqui-mfd/img/it_camera.png" style="filter: invert(1); -webkit-filter: invert(1); -moz-filter: invert(1); -o-filter: invert(1); -ms-filter: invert(1); vertical-align:middle;height:100%;"></div></div></div>'
|
|
|
|
|
data-vis-type="static,camera,dialog"
|
|
|
|
|
data-vis-name="Cam/Video (img) - Dialog"
|
|
|
|
|
data-vis-attrs="alt;text;asButton[true]/checkbox;iconColor/color;"
|
|
|
|
|
data-vis-attrs0="group.icon;icon/image;invert_icon/checkbox;icon_interval;"
|
|
|
|
|
data-vis-attrs1="group.dialog;url;title;noHeader/checkbox;modal/checkbox;dialog_width[640];dialog_height[480];dialog_top;dialog_left;overflowX/nselect,,visible,hidden,scroll,auto,initial,inherit;overflowY/nselect,,visible,hidden,scroll,auto,initial,inherit;">
|
|
|
|
|
<%
|
|
|
|
|
var styles = '';
|
|
|
|
|
if (this.data.invert_icon === 'true' || this.data.invert_icon === true) {
|
|
|
|
|
styles = 'filter: invert(1); -webkit-filter: invert(1); -moz-filter: invert(1); -o-filter: invert(1); -ms-filter: invert(1);';
|
|
|
|
|
}
|
|
|
|
|
var html = '<img id="' + this.data.wid + '_img" alt="' + this.data.text + '" style="width:' + this.data.dialog_width + 'px; height:' + this.data.dialog_height + 'px; border:none;" src="' + this.data.url + '"/>';
|
|
|
|
|
%>
|
|
|
|
|
<div class="vis-widget <%= this.data.attr('asButton') ? ' ui-widget ui-button ui-corner-all ui-state-default' : '' %> <%== this.data.attr('class') %>" style="width: 76px; height: 76px;" id="<%= this.data.attr('wid') %>" <%= (el) -> this.data.attr('asButton') ? vis.binds.jqueryui.classes(el) : '' %>>
|
|
|
|
|
<div id="<%= this.data.attr('wid') %>_body" class="vis-widget-body">
|
|
|
|
|
<% if (this.data.attr('iconColor')) { %>
|
|
|
|
|
<img src="<%= this.data.attr('icon') ? this.data.attr('icon') : 'widgets/jqui-mfd/img/it_camera.svg' %>" style="<%= styles %> vertical-align:middle;height:100%;" alt="<%== this.data.attr('alt') %>" <%= (el) -> vis.binds.jqueryui.setSvgColor(el, this.data.attr('iconColor')) %>/>
|
|
|
|
|
<% } else { %>
|
|
|
|
|
<img src="<%= this.data.attr('icon') ? this.data.attr('icon') : 'widgets/jqui-mfd/img/it_camera.png' %>" style="<%= styles %> vertical-align:middle;height:100%;" alt="<%== this.data.attr('alt') %>" <%= (el) -> vis.binds['jqui-mfd'].removeSvg(this.data.attr('wid')) %>/>
|
|
|
|
|
<% } %>
|
|
|
|
|
<div <%= (el) -> vis.binds.basic.imgRefresh(el, {src: data.attr('icon'), refreshInterval: data.attr('icon_interval')}, this.view) %>></div>
|
|
|
|
|
<%= this.data.attr('text') %>
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<div style="overflow-y: hidden !important;" id="<%= this.data.attr('wid') %>_dialog" class="<%= this.data.attr('wid') %>_dialog vis-widget-dialog" title="<%== this.data.attr('title') %>">
|
|
|
|
|
</div>
|
|
|
|
|
<div <%= (el) -> vis.binds.basic.imgRefresh(el, {src: data.attr('url'), refreshOnWakeUp: true}, this.view) %>>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="popup-helper" <%= (el) -> vis.binds.jqueryui.dialog(el, data, false, false, html) %> />
|
|
|
|
|
<div class="popup-helper" <%= (el) -> vis.binds.jqueryui.dialogAutoClose(el, data.attr('autoclose')) %> />
|
|
|
|
|
</div>
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<script id="tplValMfdCamMjpg"
|
|
|
|
|
type="text/ejs"
|
|
|
|
|
class="vis-tpl"
|
|
|
|
|
data-vis-set="jqui-mfd"
|
|
|
|
|
data-vis-type="val,camera,dialog"
|
|
|
|
|
data-vis-prev='<div id="prev_tplValMfdCamMjpg" style="position: relative; text-align: initial;padding: 4px "><div class="vis-widget_prev ui-widget ui-button ui-corner-all ui-state-default ui-state-active" style="width: 70px; height: 70px;"> <div class="vis-widget-prev-body"> <img src="widgets/jqui-mfd/img/it_camera.png" style="filter: invert(1); -webkit-filter: invert(1); -moz-filter: invert(1); -o-filter: invert(1); -ms-filter: invert(1); vertical-align:middle;height:100%;"></div></div></div>'
|
|
|
|
|
data-vis-name="Cam/Video (img) - Dialog"
|
|
|
|
|
data-vis-attrs="oid;alt;asButton[true]/checkbox;iconColor/color;"
|
|
|
|
|
data-vis-attrs0="group.icon;icon/image;invert_icon/checkbox;icon_interval;"
|
|
|
|
|
data-vis-attrs1="group.dialog;url;title;noHeader/checkbox;autoclose/slider,0,30000,100;modal/checkbox;dialog_width[640];dialog_height[480];dialog_top;dialog_left;overflowX/nselect,,visible,hidden,scroll,auto,initial,inherit;overflowY/nselect,,visible,hidden,scroll,auto,initial,inherit;"
|
|
|
|
|
>
|
|
|
|
|
<%
|
|
|
|
|
var styles = '';
|
|
|
|
|
if (this.data.invert_icon === 'true' || this.data.invert_icon === true) {
|
|
|
|
|
styles = 'filter: invert(1); -webkit-filter: invert(1); -moz-filter: invert(1); -o-filter: invert(1); -ms-filter: invert(1);';
|
|
|
|
|
}
|
|
|
|
|
var html = '<img id="' + this.data.wid + '_img" alt="' + this.data.text + '" style="width:' + this.data.dialog_width + 'px; height:' + this.data.dialog_height + 'px; border:none;" src="' + vis.states.attr(this.data.oid + '.val' ) + '"/>';
|
|
|
|
|
%>
|
|
|
|
|
<div class="vis-widget <%= this.data.attr('asButton') ? ' ui-widget ui-button ui-corner-all ui-state-default' : '' %> <%== this.data.attr('class') %>" style="width: 76px; height: 76px;" id="<%= this.data.attr('wid') %>" <%= (el) -> this.data.attr('asButton') ? vis.binds.jqueryui.classes(el) : '' %>>
|
|
|
|
|
<div id="<%= this.data.attr('wid') %>_body" class="vis-widget-body">
|
|
|
|
|
<% if (this.data.attr('iconColor')) { %>
|
|
|
|
|
<img src="<%= this.data.attr('icon') ? this.data.attr('icon') : 'widgets/jqui-mfd/img/it_camera.svg' %>" style="<%= styles %> vertical-align:middle;height:100%;" alt="<%== this.data.attr('alt') %>" <%= (el) -> vis.binds.jqueryui.setSvgColor(el, this.data.attr('iconColor')) %>/>
|
|
|
|
|
<% } else { %>
|
|
|
|
|
<img src="<%= this.data.attr('icon') ? this.data.attr('icon') : 'widgets/jqui-mfd/img/it_camera.png' %>" style="<%= styles %> vertical-align:middle;height:100%;" alt="<%== this.data.attr('alt') %>" <%= (el) -> vis.binds['jqui-mfd'].removeSvg(this.data.attr('wid')) %>/>
|
|
|
|
|
<% } %>
|
|
|
|
|
<div <%= (el) -> vis.binds.basic.imgRefresh(el, {src: data.attr('icon'), refreshInterval: data.attr('icon_interval')}, this.view) %>></div>
|
|
|
|
|
<%= this.data.attr('text') %>
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<div style="overflow-y: hidden !important;" id="<%= this.data.attr('wid') %>_dialog" class="<%= this.data.attr('wid') %>_dialog vis-widget-dialog" title="<%== this.data.attr('title') %>">
|
|
|
|
|
</div>
|
|
|
|
|
<div <%= (el) -> vis.binds.basic.imgRefresh(el, {src: data.attr('url'), refreshOnWakeUp: true}, this.view) %>>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="popup-helper" <%= (el) -> vis.binds.jqueryui.dialog(el, data, false, false, html) %> />
|
|
|
|
|
<div class="popup-helper" <%= (el) -> vis.binds.jqueryui.dialogAutoClose(el, data.attr('autoclose')) %> />
|
|
|
|
|
</div>
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<script id="tplMfdCamVideo"
|
|
|
|
|
type="text/ejs"
|
|
|
|
|
class="vis-tpl"
|
|
|
|
|
data-vis-set="jqui-mfd"
|
|
|
|
|
data-vis-prev='<div id="prev_tplMfdCamVideo" style="position: relative; text-align: initial;padding: 4px "><div class="vis-widget_prev ui-widget ui-button ui-corner-all ui-state-default" style="width: 70px; height: 70px;"> <div class="vis-widget-prev-body"> <img src="widgets/jqui-mfd/img/it_camera.png" style="filter: invert(1); -webkit-filter: invert(1); -moz-filter: invert(1); -o-filter: invert(1); -ms-filter: invert(1); vertical-align:middle;height:100%;"></div></div></div>'
|
|
|
|
|
data-vis-type="static,camera,dialog"
|
|
|
|
|
data-vis-name="Cam/Video (html5) - Dialog"
|
|
|
|
|
data-vis-attrs="alt;text;asButton[true]/checkbox;iconColor/color;use_object/checkbox;"
|
|
|
|
|
data-vis-attrs0="group.icon;icon/image;invert_icon/checkbox;icon_interval;"
|
|
|
|
|
data-vis-attrs1="group.dialog;src_url;poster_url;title;noHeader/checkbox;autoclose/slider,0,30000,100;modal/checkbox;dialog_width[640];dialog_height[480];dialog_top;dialog_left;overflowX/nselect,,visible,hidden,scroll,auto,initial,inherit;overflowY/nselect,,visible,hidden,scroll,auto,initial,inherit;"
|
|
|
|
|
>
|
|
|
|
|
<%
|
|
|
|
|
var styles = '';
|
|
|
|
|
if (this.data.invert_icon === 'true' || this.data.invert_icon === true) {
|
|
|
|
|
styles = 'filter: invert(1); -webkit-filter: invert(1); -moz-filter: invert(1); -o-filter: invert(1); -ms-filter: invert(1);';
|
|
|
|
|
}
|
|
|
|
|
var html = '<' + ((this.data.use_object === 'true' || this.data.use_object === true) ? 'object' : 'video') + ' id="' + this.data.wid + '_video" style="width:' + this.data.dialog_width + 'px; height:' + this.data.dialog_height + 'px; border:none;" src="' + this.data.src_url + '" poster="' + this.data.poster_url + '" autoplay="autoplay"></' + ((this.data.use_object === 'true' || this.data.use_object === true) ? 'object' : 'video') + '>';
|
|
|
|
|
%>
|
|
|
|
|
<div class="vis-widget <%= this.data.attr('asButton') ? ' ui-widget ui-button ui-corner-all ui-state-default' : '' %> <%== this.data.attr('class') %>" style="width: 76px; height: 76px;" id="<%= this.data.attr('wid') %>" <%= (el) -> this.data.attr('asButton') ? vis.binds.jqueryui.classes(el) : '' %>>
|
|
|
|
|
<div id="<%= this.data.attr('wid') %>_body" class="vis-widget-body">
|
|
|
|
|
<% if (this.data.attr('iconColor')) { %>
|
|
|
|
|
<img src="<%= this.data.attr('icon') ? this.data.attr('icon') : 'widgets/jqui-mfd/img/it_camera.svg' %>" style="<%= styles %> vertical-align:middle;height:100%;" alt="<%== this.data.attr('alt') %>" <%= (el) -> vis.binds.jqueryui.setSvgColor(el, this.data.attr('iconColor')) %>/>
|
|
|
|
|
<% } else { %>
|
|
|
|
|
<img src="<%= this.data.attr('icon') ? this.data.attr('icon') : 'widgets/jqui-mfd/img/it_camera.png' %>" style="<%= styles %> vertical-align:middle;height:100%;" alt="<%== this.data.attr('alt') %>" <%= (el) -> vis.binds['jqui-mfd'].removeSvg(this.data.attr('wid')) %>/>
|
|
|
|
|
<% } %>
|
|
|
|
|
<div <%= (el) -> vis.binds.basic.imgRefresh(el, {src: data.attr('icon'), refreshInterval: data.attr('icon_interval')}, this.view) %>></div>
|
|
|
|
|
<%= this.data.attr('text') %>
|
|
|
|
|
</div>
|
|
|
|
|
<div style="overflow-y: hidden !important;" id="<%= this.data.attr('wid') %>_dialog" class="<%= this.data.attr('wid') %>_dialog vis-widget-dialog" title="<%== this.data.attr('title') %>">
|
|
|
|
|
</div>
|
|
|
|
|
<div class="popup-helper" <%= (el) -> vis.binds.jqueryui.dialog(el, data, false, false, html) %> />
|
|
|
|
|
<div class="popup-helper" <%= (el) -> vis.binds.jqueryui.dialogAutoClose(el, data.attr('autoclose')) %> />
|
|
|
|
|
</div>
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<script id="tplValMfdCamVideo"
|
|
|
|
|
type="text/ejs"
|
|
|
|
|
class="vis-tpl"
|
|
|
|
|
data-vis-set="jqui-mfd"
|
|
|
|
|
data-vis-type="val,camera,dialog"
|
|
|
|
|
data-vis-prev='<div id="prev_tplValMfdCamVideo" style="position: relative; text-align: initial;padding: 4px "><div class="vis-widget_prev ui-widget ui-button ui-corner-all ui-state-default ui-state-active" style="width: 70px; height: 70px;"> <div class="vis-widget-prev-body"> <img src="widgets/jqui-mfd/img/it_camera.png" style="filter: invert(1); -webkit-filter: invert(1); -moz-filter: invert(1); -o-filter: invert(1); -ms-filter: invert(1); vertical-align:middle;height:100%;"></div></div></div>'
|
|
|
|
|
data-vis-name="Cam/Video (html5) - Dialog"
|
|
|
|
|
data-vis-attrs="oid;alt;asButton[true]/checkbox;iconColor/color;use_object/checkbox;"
|
|
|
|
|
data-vis-attrs0="group.icon;icon/image;invert_icon/checkbox;icon_interval;"
|
|
|
|
|
data-vis-attrs1="group.dialog;poster_url;title;noHeader/checkbox;autoclose/slider,0,30000,100;modal/checkbox;dialog_width[640];dialog_height[480];dialog_top;dialog_left;overflowX/nselect,,visible,hidden,scroll,auto,initial,inherit;overflowY/nselect,,visible,hidden,scroll,auto,initial,inherit;"
|
|
|
|
|
>
|
|
|
|
|
<%
|
|
|
|
|
var styles = '';
|
|
|
|
|
if (this.data.invert_icon === 'true' || this.data.invert_icon === true) {
|
|
|
|
|
styles = 'filter: invert(1); -webkit-filter: invert(1); -moz-filter: invert(1); -o-filter: invert(1); -ms-filter: invert(1);';
|
|
|
|
|
}
|
|
|
|
|
var html = '<' + ((this.data.use_object === 'true' || this.data.use_object === true) ? 'object' : 'video') + ' id="' + this.data.wid + '_video" style="width:' + this.data.dialog_width + 'px; height:' + this.data.dialog_height + 'px; border:none;" src="' + vis.states.attr(this.data.oid + '.val' ) + '" poster="' + this.data.poster_url + '" autoplay="autoplay"></' + ((this.data.use_object === 'true' || this.data.use_object === true) ? 'object' : 'video') + '>';
|
|
|
|
|
%>
|
|
|
|
|
<div class="vis-widget <%= this.data.attr('asButton') ? ' ui-widget ui-button ui-corner-all ui-state-default' : '' %> <%== this.data.attr('class') %>" style="width: 76px; height: 76px;" id="<%= this.data.attr('wid') %>" <%= (el) -> this.data.attr('asButton') ? vis.binds.jqueryui.classes(el) : '' %>>
|
|
|
|
|
<div id="<%= this.data.attr('wid') %>_body" class="vis-widget-body">
|
|
|
|
|
<% if (this.data.attr('iconColor')) { %>
|
|
|
|
|
<img src="<%= this.data.attr('icon') ? this.data.attr('icon') : 'widgets/jqui-mfd/img/it_camera.svg' %>" style="<%= styles %> vertical-align:middle;height:100%;" alt="<%== this.data.attr('alt') %>" <%= (el) -> vis.binds.jqueryui.setSvgColor(el, this.data.attr('iconColor')) %>/>
|
|
|
|
|
<% } else { %>
|
|
|
|
|
<img src="<%= this.data.attr('icon') ? this.data.attr('icon') : 'widgets/jqui-mfd/img/it_camera.png' %>" style="<%= styles %> vertical-align:middle;height:100%;" alt="<%== this.data.attr('alt') %>" <%= (el) -> vis.binds['jqui-mfd'].removeSvg(this.data.attr('wid')) %>/>
|
|
|
|
|
<% } %>
|
|
|
|
|
<div <%= (el) -> vis.binds.basic.imgRefresh(el, {src: data.attr('icon'), refreshInterval: data.attr('icon_interval')}, this.view) %>></div>
|
|
|
|
|
<%= this.data.attr('text') %>
|
|
|
|
|
</div>
|
|
|
|
|
<div style="overflow-y: hidden !important;" id="<%= this.data.attr('wid') %>_dialog" class="<%= this.data.attr('wid') %>_dialog vis-widget-dialog" title="<%== this.data.attr('title') %>">
|
|
|
|
|
</div>
|
|
|
|
|
<div class="popup-helper" <%= (el) -> vis.binds.jqueryui.dialog(el, data, false, false, html) %> />
|
|
|
|
|
<div class="popup-helper" <%= (el) -> vis.binds.jqueryui.dialogAutoClose(el, data.attr('autoclose')) %> />
|
|
|
|
|
</div>
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<script id="tplMfdCamVideoObject"
|
|
|
|
|
type="text/ejs"
|
|
|
|
|
class="vis-tpl"
|
|
|
|
|
data-vis-set="jqui-mfd"
|
|
|
|
|
data-vis-prev='<div id="prev_tplMfdCamVideoObject" style="position: relative; text-align: initial;padding: 4px "><div class="vis-widget_prev ui-widget ui-button ui-corner-all ui-state-default" style="width: 70px; height: 70px;"> <div class="vis-widget-prev-body"> <img src="widgets/jqui-mfd/img/it_camera.png" style="filter: invert(1); -webkit-filter: invert(1); -moz-filter: invert(1); -o-filter: invert(1); -ms-filter: invert(1); vertical-align:middle;height:100%;"></div></div></div>'
|
|
|
|
|
data-vis-type="static,camera,dialog"
|
|
|
|
|
data-vis-name="Cam/Video (Object) - Dialog"
|
|
|
|
|
data-vis-attrs="alt;text;asButton[true]/checkbox;iconColor/color;"
|
|
|
|
|
data-vis-attrs0="group.icon;icon/image;invert_icon/checkbox;icon_interval;"
|
|
|
|
|
data-vis-attrs1="group.dialog;src_url;qtsrc_url;title;noHeader/checkbox;autoclose/slider,0,30000,100;modal/checkbox;dialog_width[640];dialog_height[480];dialog_top;dialog_left;overflowX/nselect,,visible,hidden,scroll,auto,initial,inherit;overflowY/nselect,,visible,hidden,scroll,auto,initial,inherit;type_application[video~quicktime]/auto,video~mpeg,video~mp4,video~ogg,video~quicktime,video~webm,video~x-ms-wmv,video~x-flv;plugin;autoplay[true]"
|
|
|
|
|
>
|
|
|
|
|
<%
|
|
|
|
|
var styles = '';
|
|
|
|
|
if (this.data.invert_icon === 'true' || this.data.invert_icon === true) {
|
|
|
|
|
styles = 'filter: invert(1); -webkit-filter: invert(1); -moz-filter: invert(1); -o-filter: invert(1); -ms-filter: invert(1);';
|
|
|
|
|
}
|
|
|
|
|
var html = '<object id="' + this.data.wid + '_video" width="' + this.data.dialog_width + 'px" height="'+ this.data.dialog_height + 'px"><embed type="' +this.data.type_application +'" width="' + this.data.dialog_width + 'px" height="'+ this.data.dialog_height + 'px" src="' + this.data.src_url + '" qtsrc="' + this.data.qtsrc_url + '" autoplay="'+ this.data.autoplay + '" enablejavasript="true" href="javaScript:void(0)" plugin="'+ this.data.plugin + '" ></object>';
|
|
|
|
|
%>
|
|
|
|
|
<div class="vis-widget <%= this.data.attr('asButton') ? ' ui-widget ui-button ui-corner-all ui-state-default' : '' %> <%== this.data.attr('class') %>" style="width: 76px; height: 76px;" id="<%= this.data.attr('wid') %>" <%= (el) -> this.data.attr('asButton') ? vis.binds.jqueryui.classes(el) : '' %>>
|
|
|
|
|
<div id="<%= this.data.attr('wid') %>_body" class="vis-widget-body">
|
|
|
|
|
<% if (this.data.attr('iconColor')) { %>
|
|
|
|
|
<img src="<%= this.data.attr('icon') ? this.data.attr('icon') : 'widgets/jqui-mfd/img/it_camera.svg' %>" style="<%= styles %> vertical-align:middle;height:100%;" alt="<%== this.data.attr('alt') %>" <%= (el) -> vis.binds.jqueryui.setSvgColor(el, this.data.attr('iconColor')) %>/>
|
|
|
|
|
<% } else { %>
|
|
|
|
|
<img src="<%= this.data.attr('icon') ? this.data.attr('icon') : 'widgets/jqui-mfd/img/it_camera.png' %>" style="<%= styles %> vertical-align:middle;height:100%;" alt="<%== this.data.attr('alt') %>" <%= (el) -> vis.binds['jqui-mfd'].removeSvg(this.data.attr('wid')) %>/>
|
|
|
|
|
<% } %>
|
|
|
|
|
<div <%= (el) -> vis.binds.basic.imgRefresh(el, {src: data.attr('icon'), refreshInterval: data.attr('icon_interval')}, this.view) %>></div>
|
|
|
|
|
<%= this.data.attr('text') %>
|
|
|
|
|
</div>
|
|
|
|
|
<div style="overflow-y: hidden !important;" id="<%= this.data.attr('wid') %>_dialog" class="<%= this.data.attr('wid') %>_dialog vis-widget-dialog" title="<%== this.data.attr('title') %>">
|
|
|
|
|
</div>
|
|
|
|
|
<div class="popup-helper" <%= (el) -> vis.binds.jqueryui.dialog(el, data, false, false, html) %> />
|
|
|
|
|
<div class="popup-helper" <%= (el) -> vis.binds.jqueryui.dialogAutoClose(el, data.attr('autoclose')) %> />
|
|
|
|
|
</div>
|
|
|
|
|
</script>
|
