iobroker.vis
Version:
Graphical user interface for iobroker.
175 lines (156 loc) • 11.2 kB
HTML
<link rel="stylesheet" type="text/css" href="widgets/jqplot/css/jquery.jqplot.min.css" />
<script type="text/javascript" src="widgets/jqplot/js/jquery.jqplot.min.js"></script>
<script type="text/javascript">
if (vis.editMode) {
// Add words for basic widgets
$.extend(true, systemDictionary, {
"background": {"en": "Background", "de": "Hintergrund", "ru": "Фон"},
"group_ticks": {"en": "Ticks", "de": "Ticken", "ru": "Штрихи"},
"ticks": {"en": "Ticks-Namen", "de": "Ticken-Beschriften", "ru": "Подписи штрихов"},
"ticks_tooltip": {"en": "Divide with semicolon, e.g '10;50;70'", "de": "Mit Semikolon trennen, z.B. '10;50;70'", "ru": "Разделять точкой запятой, например '10;50;70'"},
"showTickLabels": {"en": "Show tick labels", "de": "Zeige Ticken-Beschriftungen", "ru": "Показать подписи"},
"tickPadding": {"en": "Tick padding", "de": "Ticken-Abstand", "ru": "Отступ штрихов"},
"group_intervals": {"en": "Intervals", "de": "Intervale", "ru": "Интервалы"},
"intervals": {"en": "Intervals", "de": "Intervale", "ru": "Отрезки"},
"intervals_tooltip": {"en": "Divide with semicolon, e.g '10;50;70'", "de": "Mit Semikolon trennen, z.B. ''10;50;70'", "ru": "Разделять точкой запятой, например '10;50;70'"},
"intervalColors": {"en": "Interval colors", "de": "Intervalfarben", "ru": "Цвета интервалов"},
"intervalColors_tooltip": {"en": "Divide with semicolon, e.g 'green;#0000FF;red'", "de": "Mit Semikolon trennen, z.B. 'green;#0000FF;red'", "ru": "Разделять точкой запятой, например 'green;#0000FF;red'"},
"intervalInnerRadius": {"en": "Inner interval raduis", "de": "Inner Inerval-Radius", "ru": "Внутренний радиус интервалов"},
"intervalOuterRadius": {"en": "Outer interval radius", "de": " Außenmaß-Radius", "ru": "Внешний радиус интервалов"},
"diameter": {"en": "Diameter", "de": "Diameter", "ru": "Диаметер"},
"padding": {"en": "Padding", "de": "Abstand", "ru": "Отступ"},
"group_shadow": {"en": "Shadow", "de": "Schatten", "ru": "Тень"},
"shadowOffset": {"en": "shadowOffset", "de": "Schatten offset", "ru": "Сдвиг тени"},
"shadowAlpha": {"en": "Shadow transparence", "de": "Schatten Alpha", "ru": "Прозрачость тени"},
"shadowDepth": {"en": "Shadow depth", "de": "Schattentiefe", "ru": "Глубина тени"},
"group_ring": {"en": "Ring", "de": "Rand", "ru": "Кайма"},
"ringColor": {"en": "Ring color", "de": "Randfarbe", "ru": "Цвет окантовки"},
"ringWidth": {"en": "Ring width", "de": "Randbreite", "ru": "Ширина окантовки"},
"group_needle": {"en": "Needle", "de": "Zeiger", "ru": "Стрелка"},
"needleThickness": {"en": "Needle thickness", "de": "Zeigerdicke", "ru": "Ширина стрелки"},
"needlePad": {"en": "Needle pad", "de": "Zeigeroffset", "ru": "Радиус основания"},
"hubRadius": {"en": "Hub radius", "de": "Zeigerbasis-Radius", "ru": "Основание стрелки"}
});
}
vis.binds.jqplot = {
gauge: function (el, data) {
var $this = $(el).find('.jqplot-gauge');
var id = $(el).attr('id');
if (id && id.match(/_removed$/)) {
return;
}
if (!$this.length || !$this.is(':visible')) {
setTimeout(function () {
vis.binds.jqplot.gauge(el, data);
}, 100);
return;
}
if (!data) return;
var options = {
title: data.title,
seriesDefaults: {
rendererOptions: {
min: (data.min ? parseFloat(data.min) : undefined),
max: (data.max ? parseFloat(data.max) : undefined),
ticks: (data.ticks ? jQuery.map(data.ticks.split(';'), Number) : undefined),
intervals: (data.intervals ? jQuery.map(data.intervals.split(';'), Number) : undefined),
intervalColors: (data.intervalColors ? data.intervalColors.split(';') : undefined),
label: data.label,
showTickLabels: ((data.showTickLabels === 'false' || data.showTickLabels === false) ? false : undefined),
intervalInnerRadius: (!data.intervalInnerRadius ? undefined : parseInt(data.intervalInnerRadius, 10)),
intervalOuterRadius: (!data.intervalOuterRadius ? undefined : parseInt(data.intervalOuterRadius, 10)),
diameter: (!data.diameter ? undefined : parseInt(data.diameter, 10)),
padding: (!data.padding ? undefined : parseInt(data.padding, 10)),
shadowOffset: (!data.shadowOffset ? undefined : parseInt(data.shadowOffset, 10)),
shadowAlpha: (!data.shadowAlpha ? undefined : parseInt(data.shadowAlpha, 10)),
shadowDepth: (!data.shadowDepth ? undefined : parseInt(data.shadowDepth, 10)),
background: data.background, ringColor: data.ringColor,
tickColor: data.tickColor,
ringWidth: (!data.ringWidth ? undefined : parseInt(data.ringWidth, 10)),
hubRadius: (!data.hubRadius ? undefined : parseInt(data.hubRadius, 10)),
tickPadding: (!data.tickPadding ? undefined : parseInt(data.tickPadding, 10)),
needleThickness: (!data.needleThickness ? undefined : parseInt(data.needleThickness, 10)),
needlePad: (!data.needlePad ? undefined : parseInt(data.needlePad, 10))
}
}
};
if (options.seriesDefaults.rendererOptions.ticks && options.seriesDefaults.rendererOptions.ticks.length === 1) {
options.seriesDefaults.rendererOptions.ticks[1] = options.seriesDefaults.rendererOptions.ticks[0];
}
$(el).data('options', data);
$this.html('');
try {
var jqplotOptions = $.extend(true, {
title: {show: false},
grid: {
background: 'transparent'
},
seriesDefaults: {
renderer: $.jqplot.MeterGaugeRenderer,
rendererOptions: {
min: 0,
max: 100
}
}
}, options);
var oid = $this.attr('data-oid');
var series;
if (oid !== 'nothing_selected' && vis.states[oid + '.val'] !== undefined) {
series = [[vis.states[oid + '.val']]];
} else {
series = [[1, 0]];
}
function onChange(e, newVal/* , oldVal */) {
plot.series[0].data = [[1, newVal]];
plot.redraw();
}
var bound = [];
if (oid) {
vis.states.bind(oid + '.val', onChange);
bound.push(oid + '.val');
}
var plot = $.jqplot($this.attr('id'), series, jqplotOptions);
if (bound.length) {
// remember all ids, that bound
$(el).data('bound', bound);
// remember bind handler
$(el).data('bindHandler', onChange);
}
} catch(e) {
servConn.logError('Cannot render widget jqplot: ' + e);
}
if (vis.editMode) {
$(el).resize(function () {
var timer = $(this).data('timer');
if (timer) {
clearTimeout(timer);
}
var that = this;
$(this).data('timer', setTimeout(function () {
$(that).data('timer', null);
$('#' + $(that).attr('id') + '_gauge').html('');
vis.binds.jqplot.gauge(that, $(that).data('options'));
}, 300));
});
$(el).data('destroy', function (id, $widget) {
$widget.off('resize');
});
}
}
};
</script>
<script type="text/ejs"
id="tplJqplotGauge"
class="vis-tpl"
data-vis-prev='<img src="widgets/jqplot/img/Prev_MeterGauge.png"></img>'
data-vis-set="jqplot"
data-vis-type="number"
data-vis-name="MeterGauge"
data-vis-attrs="oid;title;min/number;max/number;label;background/color;padding/slider,0,50,1;group.ticks;ticks;showTickLabels[true]/checkbox;tickPadding/slider,0,50,1;group.intervals;intervals;intervalColors;intervalInnerRadius/slider,0,550,1;intervalOuterRadius/slider,0,550,1;group.shadow;shadowOffset/slider,0,50,1;shadowAlpha/slider,0,1,0.05;shadowDepth/slider,0,50,1;group.ring;ringColor/color;ringWidth/slider,0,150,1;group.needle;needleThickness/slider,0,50,1;needlePad/slider,0,150,1;hubRadius/slider,0,150,1"
>
<div class="vis-widget <%== this.data.attr('class') %>" style="width:460px; height:280px;" id="<%= this.data.attr('wid') %>" <%= (el) -> vis.binds.jqplot.gauge(el, data) %>>
<div class="vis-widget-body" style="width: 100%; height: 100%">
<div class="jqplot-gauge" id="_<%= this.data.attr('wid') %>" data-oid="<%= this.data.attr('oid') %>" style="width: 100%; height: 100%"/>
</div>
</div>
</script>