{% load switch %}
{% load smart_if %}
{% switch code %}
{% case "js_includes" %}
{% case "html" %}
{% if not fullscreen %}
{% if timeskip == "1" %}
{% endif %}
{% if download == "1" %}
{% endif %}
{% endif %}
Loading...
{% if fullscreen %}
{% endif %}
{% for tag in tags %}
{% endfor %}
{% for color in colors %}
{% endfor %}
{% for legendlabel in legendlabels %}
{% endfor %}
{% case "tag_update_func" %}
var updateLegendTimeout = null;
var latestPosition = null;
var timeplots = new Array();
var previousPoint = null;
function showTooltip(x, y, contents) {
$('
' + contents + '
').css( {
position: 'absolute',
display: 'none',
top: y + 5,
left: x + 5,
border: '1px solid #fdd',
padding: '2px',
'background-color': '#fee',
opacity: 0.80
}).appendTo("body").fadeIn(200);
}
function calc_timeplot_resolution(id, period, month, year)
{
switch(period)
{
case "hour":
return 6;
break;
case "day":
return 24
break;
case "month":
return daysInMonth(month, year);
break;
case "year":
return 12;
break;
}
}
function daysInMonth(iMonth, iYear)
{
return 32 - new Date(iYear, iMonth - 1, 32).getDate();
}
function daysInYear(iYear)
{
return new Date(iYear, 1, 29).getDate() == 29 ? 366 : 365;
}
function UpdateTimeplot(id, spancount)
{
$("#" + id + " .loading").show();
var prop = GetObjectProperties(id);
{% if fullscreen %}
var period = window.opener.jQuery("#{{ timeplot_id }} .period").val();
var spancount = window.opener.jQuery("#{{ timeplot_id }} .spancount").val();
var hour = parseInt(window.opener.jQuery("#{{ timeplot_id }} .hour").val());
var day = window.opener.jQuery("#{{ timeplot_id }} .day").val();
var month = parseInt(window.opener.jQuery("#{{ timeplot_id }} .month").val());
var year = parseInt(window.opener.jQuery("#{{ timeplot_id }} .year").val());
var cumulative = window.opener.jQuery("#{{ timeplot_id }} [name='cumulative']").val();
var resolution = window.opener.jQuery("#{{ timeplot_id }} [name='resolution']").val();
{% else %}
var period = $("#" + id + " .period").val();
if (isNaN(spancount))
var spancount = parseInt($("#" + id + " .spancount").val());
var hour = parseInt($("#" + id + " .hour").val());
var day = parseInt($("#" + id + " .day").val());
var month = parseInt($("#" + id + " .month").val());
var year = parseInt($("#" + id + " .year").val());
var cumulative = prop["cumulative"];
var resolution = prop["resolution"];
{% endif %}
if (resolution.length == 0)
resolution = calc_timeplot_resolution(id, period, month, year);
var start = year + ":" + month + ":" + day + ":" + hour;
var req = new Array();
var decimals = parseInt(prop["decimals"]);
var tag_count = parseInt(prop["tag_count"]);
for (var i = 0; i < tag_count; i++)
{
var params = new Array();
params.push("i=" + i);
params.push("t=" + prop["tag_" + i]);
params.push("p=" + period);
params.push("s=" + start);
params.push("sc=" + spancount);
params.push("cum=" + cumulative);
params.push("res=" + resolution);
var re = new RegExp(".*/(\\d+)/?$");
var match = re.exec(window.location.pathname);
var plant_homepage = match[1];
params.push("page="+ plant_homepage);
req.push(params.join(","));
}
$.get("/service/get_timeplot_data/" + req.join(";") + "/?rand=" + new Date().getTime(),
function(data)
{
var series_data = [];
var bar_width = 1;
data = data.split("\n");
for (var i = 0; i < data.length; i++)
{
var d;
var series_label = "";
if (data[i].length != 0) {
try {
eval("d = " + data[i] + ";");
} catch (err) {
d = [];
}
} else
d = [];
if (cumulative == "1")
{
series_label = (prop["legendlabel_" + i] != null && prop["legendlabel_" + i].length > 0 ? prop["legendlabel_" + i] : prop["tag_" + i]);
} else
{
var last_value = d.length > 0 ? (d[d.length - 1][1] / Math.pow(10, decimals)).toFixed(decimals) : "?";
series_label = (prop["legendlabel_" + i] != null && prop["legendlabel_" + i].length > 0 ? prop["legendlabel_" + i] : prop["tag_" + i]) + " = " + last_value;
}
var color = prop["color_" + i] != null && prop["color_" + i].length != 0 ? prop["color_" + i] : null;
if (decimals != 0)
{
for (var n = 0; n < d.length; n++)
d[n][1] = d[n][1] / Math.pow(10, decimals);
}
series_data.push(
{
color: color,
data: d,
label: series_label
}
);
}
var ticks = [];
var markings = [];
var show_points = false;
var x_min = 0;
var x_max = 0;
var y_min = isNaN(parseInt(prop["min"])) ? null : prop["min"];
var y_max = isNaN(parseInt(prop["max"])) ? null : prop["max"];
function zeropad(value)
{
return value < 10 ? "0" + value.toString() : value.toString();
}
switch(period)
{
{# minutes in hour #}
case "hour":
for (var h = 0; h < spancount; h++)
{
if (spancount < 10)
{
var min_inc = spancount < 4 ? 10 : 30;
for (var m = 0; m < 60; m += min_inc)
ticks.push([h * 60 + m, zeropad((hour + h) % 24) + ":" + zeropad(m)]);
if (h == spancount - 1)
ticks.push([(h + 1) * 60, zeropad((hour + h + 1) % 24) + ":00"]);
} else
{
ticks.push([h * 60, zeropad((hour + h) % 24) + ":00"]);
if (h == spancount - 1)
ticks.push([(h + 1) * 60, zeropad((hour + h + 1) % 24) + ":00"]);
}
}
show_points = true;
x_max = 60 * spancount;
break;
{# hours in day #}
case "day":
var h_inc = [1, 2, 2, 4, 4, 6, 6];
for (var h = 0; h <= spancount * 24; h += h_inc[spancount - 1])
ticks.push([h, zeropad(h % 24)]);
x_max = 24 * spancount;
break;
{# days in month #}
case "month":
var days_ofs = 0;
var m_inc = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 10, 10];
var x_ticks = new Array();
for (var m = 0; m < spancount; m++)
{
var mm = (month + m) % 12;
var yy = year + Math.floor((month + m) / 12);
for (var i = 1; i <= daysInMonth(mm, yy); i++)
x_ticks.push([days_ofs + i, i.toString()]); // 3 PORT/KREM: BUGFIX 1.1.4a
days_ofs += daysInMonth(mm, yy);
}
for (var i = 0; i + m_inc[spancount - 1] <= x_ticks.length; i += m_inc[spancount - 1])
ticks.push(x_ticks[i]);
ticks.push([days_ofs + 1, "1"]); // 3 PORT/KREM: BUGFIX 1.1.4a
x_min = 1;
x_max = days_ofs + 1;
break;
{# months in year #}
case "year":
var m_inc = [1, 1, 1, 1, 1, 1, 1];
var days_cnt = 0;
for (var y = 0; y < spancount; y++)
{
var y_days_cnt = 0;
for (var m = 0; m < 12; m += m_inc[spancount - 1])
{
ticks.push([(days_cnt + y_days_cnt) / 10.0, (m + 1).toString()]); // 3 PORT/KREM: BUGFIX 1.1.4a
y_days_cnt += daysInMonth(m + 1, year + y);
}
days_cnt += daysInYear(year + y)
ticks.push([days_cnt / 10.0, "1"]); // 3 PORT/KREM: BUGFIX 1.1.4a
}
x_min = 0;
x_max = days_cnt / 10.0;
break;
}
{# calculate bar width for cumulative graph #}
if (cumulative == "1")
{
try
{
bar_width = x_max / spancount /resolution / tag_count * 0.8;
}
catch(err)
{
bar_width = 1;
}
if (series_data.length > 1)
{
for (var i = 1; i < series_data.length; i++)
{
for (var j = 0; j < series_data[i].data.length; j++)
series_data[i].data[j][0] += bar_width;
}
}
}
var series_options = {};
switch (prop["graphstyle"])
{
case "bars":
series_options = {
bars: { show: true, align: "left", barWidth: bar_width }
};
break;
default:
series_options = {
lines: { show: true },
points: { show: show_points }
};
break;
}
timeplots[id] = $.plot($("#" + id + " .graph"),
series_data,
{
series: series_options,
crosshair: { mode: "x" },
xaxis: {
ticks: ticks,
min: x_min,
max: x_max
},
yaxis: {
ticks: 10,
min: y_min,
max: y_max
},
grid: {
hoverable: true,
autoHighlight: false,
backgroundColor: { colors: ["#FFFFFF", "#E4E4E4"] },
markings: markings
},
legend: {
show: GetObjectProperties(id)["tag_0"].length != 0 && GetObjectProperties(id)["showlegend"] == "true",
labelFormatter: function(label, series) {
var legendunit = prop["legendunit"];
if (legendunit != null && legendunit.length > 0) {
return label + " " + legendunit;
}
return label;
}
}
}
);
if (cumulative != "1")
{
$("#" + id + " .graph").bind("plothover",
function(event, pos, item)
{
latestPosition = pos;
if (!updateLegendTimeout)
updateLegendTimeout = setTimeout(
function()
{
var plot = timeplots[id];
updateLegendTimeout = null;
var pos = latestPosition;
var axes = plot.getAxes();
if (pos.x < axes.xaxis.min || pos.x > axes.xaxis.max ||
pos.y < axes.yaxis.min || pos.y > axes.yaxis.max)
return;
var i, j, dataset = plot.getData();
for (i = 0; i < dataset.length; ++i)
{
var series = dataset[i];
if (cumulative == "1")
{
// TODO!
} else
{
// find the nearest points, x-wise
for (j = 0; j < series.data.length; ++j)
if (series.data[j][0] > pos.x)
break;
// now interpolate
var y, p1 = series.data[j - 1], p2 = series.data[j];
if (p1 == null && p2 == null)
return;
if (p1 == null)
y = p2[1];
else if (p2 == null)
y = p1[1];
else
y = p1[1] + (p2[1] - p1[1]) * (pos.x - p1[0]) / (p2[0] - p1[0]);
$("#" + id + " .legendLabel").eq(i).text(series.label.replace(/=.*/, "= " + y.toFixed(decimals) + (prop["legendunit"] != null && prop["legendunit"].length > 0?" "+prop["legendunit"]:"")));
}
}
}
, 50);
if (show_points && item) {
if (previousPoint != item.datapoint) {
previousPoint = item.datapoint;
$("#tooltip").remove();
var x = item.datapoint[0].toFixed(decimals),
y = item.datapoint[1].toFixed(decimals);
showTooltip(item.pageX, item.pageY, item.series.label.replace(/=.*/, "= " + y));
}
}
else {
$("#tooltip").remove();
previousPoint = null;
}
}
);
}
$("#" + id + " .loading").hide();
}
);
}
function UpdateTimeplotCmdVisibility(id)
{
var value = $("#" + id + " .period").val();
$("#" + id + " .hour").hide();
$("#" + id + " .day").hide();
$("#" + id + " .month").hide();
switch(value)
{
case "hour":
$("#" + id + " .hour").show();
$("#" + id + " .day").show();
$("#" + id + " .month").show();
break;
case "day":
$("#" + id + " .day").show();
$("#" + id + " .month").show();
break;
case "month":
$("#" + id + " .month").show();
break;
}
}
function UpdateSpanCountCombo(id)
{
var period = $("#" + id + " .period").val();
var min = 1;
var max = 1;
var html = "";
var prop = GetObjectProperties(id);
switch(period)
{
case "hour": max = 24; break;
case "day": max = 7; break;
case "month": max = 12; break;
case "year": max = 40; break;
}
var sel_default = prop["initialized"] == 0 ? prop["spancount"] : 1;
for (var i = min; i <= max; i++)
{
var sel = i == sel_default ? ' selected="selected"' : '';
html += '';
}
{# first erase to avoid unusual number jumping #}
$("#" + id + " .spancount").html("").html(html);
return sel_default;
}
function ChangeTimeplotDate(id, increment)
{
var period = $("#" + id + " .period").val();
var hour = parseInt($("#" + id + " .hour").val());
var day = parseInt($("#" + id + " .day").val());
var month = parseInt($("#" + id + " .month").val());
var year = parseInt($("#" + id + " .year").val());
var date = new Date(year, month - 1, day, hour, 0, 0, 0);
switch(period)
{
case "hour":
date = new Date(year, month - 1, day, hour + increment, 0, 0, 0);
break;
case "day":
date.setDate(date.getDate() + increment);
break;
case "month":
date = new Date(year, month - 1 + increment, day, hour, 0, 0, 0);
break;
case "year":
date = new Date(year + increment, month - 1, day, hour, 0, 0, 0);
break;
}
day = date.getDate();
month = date.getMonth() + 1;
year = date.getFullYear();
var year_exists = $(".period_selection .year option[value='" + year + "']").val() != null;
if (year_exists)
{
var days_in_month = daysInMonth(month, year);
if (days_in_month != $("#" + id + " .day option").size())
{
var html = "";
for (var n = 1; n <= daysInMonth(month, year); n++)
html += '';
$("#" + id + " .day").html(html);
}
$("#" + id + " .hour").val(date.getHours());
$("#" + id + " .day").val(day);
$("#" + id + " .month").val(month);
$("#" + id + " .year").val(year);
return true;
}
return false;
}
function ChangeNumberOfDaysInMonth(id)
{
ChangeTimeplotDate(id, 0);
}
function UpdateTimeplotTrigger(id)
{
if (ChangeTimeplotDate(id, 0))
UpdateTimeplot(id);
}
{% case "page_load_init" %}
UpdateTimeplotCmdVisibility("{{ id }}");
UpdateSpanCountCombo("{{ id }}");
UpdateTimeplot("{{ id }}");
$("#{{ id }} [name='initialized']").val("1");
{% case "init_jq_binding" %}
$(".cybro_{{ type }} .timeplot_trigger").change(
function()
{
var id = $(this).parent().parent().parent().attr("id");
UpdateTimeplotTrigger(id);
}
);
$(".cybro_{{ type }} .period").change(
function()
{
var id = $(this).parent().parent().parent().attr("id");
UpdateSpanCountCombo(id);
UpdateTimeplotCmdVisibility(id);
UpdateTimeplotTrigger(id);
}
);
$(".cybro_{{ type }} .month").change(
function()
{
var id = $(this).parent().parent().parent().attr("id");
ChangeNumberOfDaysInMonth(id);
UpdateTimeplotTrigger(id);
}
);
$(".cybro_{{ type }} .next").click(
function()
{
var id = $(this).parent().parent().parent().attr("id");
if (ChangeTimeplotDate(id, 1))
UpdateTimeplot(id);
return false;
}
);
$(".cybro_{{ type }} .prev").click(
function()
{
var id = $(this).parent().parent().parent().attr("id");
if (ChangeTimeplotDate(id, -1))
UpdateTimeplot(id);
return false;
}
);
$(".cybro_{{ type }} .now").click(
function()
{
var id = $(this).parent().parent().parent().attr("id");
//var prop = GetObjectProperties(id);
var spancount = parseInt($("#" + id + " .spancount").val());
var now = new Date();
$("#" + id + " .hour").val(now.getHours());
$("#" + id + " .day").val(now.getDate());
$("#" + id + " .month").val(now.getMonth() + 1);
$("#" + id + " .year").val(now.getFullYear());
if (ChangeTimeplotDate(id, -(spancount - 1)))
UpdateTimeplot(id);
return false;
}
);
$(".cybro_{{ type }} .download_csv_data").click(
function()
{
var id = $(this).parent().parent().parent().attr("id");
var prop = GetObjectProperties(id);
var period = $("#" + id + " .period").val();
var hour = $("#" + id + " .hour").val();
var day = $("#" + id + " .day").val();
var month = $("#" + id + " .month").val();
var year = $("#" + id + " .year").val();
var start = year + ":" + month + ":" + day + ":" + hour;
var cumulative = prop["cumulative"];
var resolution = prop["resolution"];
var spancount = $("#" + id + " .spancount").val();
var req = new Array();
if (resolution.length == 0)
resolution = calc_timeplot_resolution(id, period, month, year);
var params = new Array();
var tags = new Array();
for (var i = 0; i < parseInt(prop["tag_count"]); i++)
tags.push(prop["tag_" + i]);
params.push("t=" + tags.join("+"));
params.push("p=" + period);
params.push("s=" + start);
params.push("sc=" + spancount);
params.push("cum=" + cumulative);
params.push("res=" + resolution);
params.push("dec=" + prop["decimals"]);
var re = new RegExp(".*/(\\d+)/?$");
var match = re.exec(window.location.pathname);
var plant_homepage = match[1];
params.push("page="+ plant_homepage);
var url = "/service/download_timeplot_data/" + params.join(",") + "/?rand=" + new Date().getTime();
window.location = url;
return false;
}
);
$(".cybro_{{ type }} .timeplot_fullscreen").click(
function()
{
var container = $(this).parents(".cybro_{{ type }}");
var id = $(container).attr("id");
var prop = GetObjectProperties(id);
var args = new Array();
var tags = new Array();
var colors = new Array();
var legend_labels = new Array();
var myWin;
for (var i = 0; i < parseInt(prop["tag_count"]); i++)
tags.push(prop["tag_" + i]);
for (var i = 0; i < parseInt(prop["tag_count"]); i++)
if (prop["color_" + i].length != 0)
colors.push(prop["color_" + i]);
for (var i = 0; i < parseInt(prop["tag_count"]); i++)
if (prop["legendlabel_" + i] != null && prop["legendlabel_" + i].length != 0)
legend_labels.push(prop["legendlabel_" + i]);
colors = colors.join(",");
if (colors.length == 0)
colors = "-";
legend_labels = legend_labels.join(",");
if (legend_labels.length == 0)
legend_labels = "-";
var re = new RegExp(".*/(\\d+)/?$");
var match = re.exec(window.location.pathname);
var plant_homepage = match[1];
args.push(id);
args.push(prop["graphstyle"]);
args.push(tags.join(","));
args.push(prop["min"]);
args.push(prop["max"]);
args.push(escape(colors));
args.push(prop["decimals"]);
args.push(encodeURIComponent(legend_labels));
args.push(prop["legendunit"]!=null&&prop["legendunit"].length>0?prop["legendunit"]:"-");
args.push(prop["showlegend"]);
args.push(plant_homepage);
var w = 800;
var h = 600;
if (window.screen)
{
w = window.screen.availWidth;
h = window.screen.availHeight;
}
window.open("/timeplot/" + args.join("/") + "/", "myWin", "resizable,width=" + w + ",height=" + "h" + ",top=0,left=0");
return false;
}
);
{% endswitch %}