{% load switch %} {% load smart_if %} {% switch code %} {% case "js_includes" %} {% case "html" %}
{% if not fullscreen %}
{% if timeskip == "1" %} {% endif %}
{% if download == "1" %}
{% endif %}
 
{% endif %}
 
{% 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 %}