diff options
Diffstat (limited to 'src/usr/local/www/widgets/javascript')
| -rw-r--r-- | src/usr/local/www/widgets/javascript/cpu_graphs.js | 245 | ||||
| -rw-r--r-- | src/usr/local/www/widgets/javascript/ipsec.js | 9 | ||||
| -rw-r--r-- | src/usr/local/www/widgets/javascript/thermal_sensors.js | 296 | ||||
| -rw-r--r-- | src/usr/local/www/widgets/javascript/traffic_graph.js | 41 |
4 files changed, 591 insertions, 0 deletions
diff --git a/src/usr/local/www/widgets/javascript/cpu_graphs.js b/src/usr/local/www/widgets/javascript/cpu_graphs.js new file mode 100644 index 0000000..1fc690a --- /dev/null +++ b/src/usr/local/www/widgets/javascript/cpu_graphs.js @@ -0,0 +1,245 @@ +/****************************************************************************** + $Id: graphlink.js,v 1.1 2006/12/21 17:10:25 dberlin Exp $ + + This file is part of the GraphLink software. + GraphLink is distributed under the MIT License. + Copyright (C) 2005-2006 Max Khitrov <max@mxsoft.org> + ******************************************************************************/ + +/***** Global data ************************************************************/ + +var gl_graphCount = 0; // Number of graphs on the current page + +/***** Constants **************************************************************/ + +var GL_START = 0; +var GL_END = 1; +var GL_STATIC = 0; +var GL_DYNAMIC = 1; + +/***** Public functions *******************************************************/ + +/** + * Creates a graph and returns the graph data structure which can later be + * manipulated using the other graph functions. + * + * element_id - DOM element id (should be a DIV) that will contain the graph. + * width - The width of the graph in pixels. + * height - Height of the graph in pixels. + * bar_width - Width of each bar on the graph. This number should divide width + * evenly, or else width will be adjusted to meet this requirement. + * General formula to keep in mind: + * Smaller bar width = more bars = higher CPU usage on client-side. + * + * Returns graph data structure on success, false on error. + */ +function GraphInitialize(element_id, width, height, bar_width) { + // Find the page element which will contain the graph + var owner; + if((owner = jQuery('#' + element_id)) == null) { + alert("GraphLink Error: Element ID '" + element_id + "' not found."); + return false; + } + + // Make sure width is divisible by bar_width + if(width / bar_width != Math.floor(width / bar_width)) + width = Math.floor(width / bar_width) * bar_width; + + var bar_count = width / bar_width; + + // Create the graph data structure + var graph = new Array(); + graph['id'] = gl_graphCount; // ID used to separate elements of one graph from those of another + graph['width'] = width; // Graph width + graph['height'] = height; // Graph height + graph['bar_count'] = bar_count; // Number of bars on the graph + graph['scale_type'] = GL_STATIC; // How the graph is scaled + graph['scale'] = 1; // Multiplier for the bar height + graph['max'] = 0; // Largest value currently on the graph + graph['vmax'] = height; // Virtual graph maximum + graph['spans'] = new Array(bar_count); // References to all the spans for each graph + graph['vals'] = new Array(bar_count); // The height of each bar on the graph, actually it's (graph height - bar height) + gl_graphCount++; + + // Build the graph (x)html + var graph_html = ''; + graph_html += '<div id="GraphLinkData' + graph['id'] + '" class="GraphLinkData">'; + + for(var i = 0; i < bar_count; i++) { + graph['vals'][i] = height; + graph_html += '<span id="GraphLinkBar' + graph['id'] + '_' + i + '" class="GraphLinkBar"></span>'; + } + + graph_html += '</div>'; + owner.html(graph_html); + graph['element_id'] = jQuery('#GraphLinkData' + graph['id']); + + for(i = 0; i < bar_count; i++) { + graph['spans'][i] = jQuery('#GraphLinkBar' + graph['id'] + '_' + i); + graph['spans'][i].css('width',bar_width + 'px'); + graph['spans'][i].css('margin-top',height + 'px'); + } + + return graph; +} + +/** + * Adds a new value to a graph. + * + * graph - Graph object to which to add the new value. + * value - Value to add. + * where - (optional) GL_START (0) or GL_END (1), depending on where you want + * the new value to appear. GL_START will add the value on the left + * of the graph, GL_END will add it on the right (default). + */ +function GraphValue(graph, value, where) { + if(typeof(where) == 'undefined') + where = GL_END; + + var rescale = false; + var lost = 0; + + if(value < 0) + value = 0; + + if(graph['scale_type'] == GL_DYNAMIC && value > graph['max']) + rescale = true; + + if(graph['scale_type'] == GL_STATIC) { + if(value > graph['vmax']) + value = graph['vmax']; + value = Math.round(value * graph['scale']); + } + + if(where == GL_START) { + graph['vals'].unshift(graph['height'] - value); + lost = graph['vals'].pop(); + } + else { + graph['vals'].push(graph['height'] - value); + lost = graph['vals'].shift(); + } + + if(graph['scale_type'] == GL_DYNAMIC && (graph['height'] - lost) == graph['max']) + rescale = true; + + if(rescale) + GraphAdjustScale(graph) + + GraphDraw(graph); +} + +/** + * Sets a virtual maximum for the graph allowing you to have non-scaled graphs + * that can show a value greater then the graph height. This function will + * automatically set the graph to a static scale mode, meaning that no values + * above the maximum will be permitted. If you need to have a graph with no + * pre-defined maximum, make it dynamic. Also note that if you set a vmax on a + * graph that has data larger than vmax, that data will be reduced. + * + * graph - Graph object for which to set virtual max. + * vmax - The virtual maximum value for the graph. + */ +function GraphSetVMax(graph, vmax) { + graph['scale_type'] = GL_STATIC; + graph['vmax'] = vmax; + + GraphAdjustScale(graph); + GraphDraw(graph); +} + +/** + * This function instructs the graph to be scaled according to what the maximum + * value is. That value is used as the graph maximum and is reevaluated whenever + * a new value is added, or the current maximum is removed. Dynamic scaling is a + * good way of showing data for which you don't know what the maximum will be, + * but it also is a bit more resource-intensive then statically scaled graphs. + * + * graph - Graph object for which to enable dynamic scaling. + */ +function GraphDynamicScale(graph) { + graph['scale_type'] = GL_DYNAMIC; + + GraphAdjustScale(graph); + GraphDraw(graph); +} + +/***** Private functions ******************************************************/ + +/** + * Checks if the current scale of the graph is still valid, or needs to be + * adjusted. + * + * graph - Graph object for which to check the scale. + */ +function GraphAdjustScale(graph) { + var limit = graph['bar_count']; + var new_max = 0; + var new_scale = 0; + var val = 0; + + if(graph['scale_type'] == GL_STATIC) { + new_max = graph['vmax']; + new_scale = graph['height'] / new_max; + + if(new_scale == graph['scale']) + return; + } + + for(var i = 0; i < limit; i++) { + if(graph['scale_type'] == GL_STATIC) { + val = (graph['height'] - graph['vals'][i]) * graph['scale']; + val = val * new_scale; + + if(val > new_max) + val = new_max; + + graph['vals'][i] = graph['height'] - Math.round(val * new_scale); + + } + else if((graph['height'] - graph['vals'][i]) > new_max) { + new_max = graph['height'] - graph['vals'][i]; + } + } + + + if(graph['scale_type'] == GL_STATIC) { + graph['scale'] = new_scale; + } + else { + if(new_max == 0) + graph['scale'] = 1; + else + graph['scale'] = graph['height'] / new_max; + + graph['max'] = new_max; + } +} + +/** + * Redraws the graph on the screen. + * + * graph - Graph object which needs to be re-drawn. + */ +function GraphDraw(graph) { + var count = graph['bar_count']; + + if(graph['scale_type'] == GL_STATIC) + var getMargin = function(i) { + return graph['vals'][i] + 'px'; + }; + else + var getMargin = function(i) { + var h = graph['height']; + var s = graph['scale']; + var v = graph['vals'][i]; + return (h - Math.round((h - v) * s)) + 'px'; + }; + + graph['spans'][count - 1].css("display", "none"); + + for(var i = 0; i < count; i++) + graph['spans'][i].css("marginTop", getMargin(i)); + +// jQuery('#' + graph['spans'][count - 1]).fadeIn(500); +} diff --git a/src/usr/local/www/widgets/javascript/ipsec.js b/src/usr/local/www/widgets/javascript/ipsec.js new file mode 100644 index 0000000..d38f6cd --- /dev/null +++ b/src/usr/local/www/widgets/javascript/ipsec.js @@ -0,0 +1,9 @@ +function updateIpsec() { + selectIntLink = "ipsecDetailed"; + ipsecsettings = "ipsecDetail="; + ipsecsettings += d.getElementById(selectIntLink).checked; + + selectIntLink = "ipsec-config"; + textlink = d.getElementById(selectIntLink); + textlink.value = ipsecsettings; +}
\ No newline at end of file diff --git a/src/usr/local/www/widgets/javascript/thermal_sensors.js b/src/usr/local/www/widgets/javascript/thermal_sensors.js new file mode 100644 index 0000000..7415b01 --- /dev/null +++ b/src/usr/local/www/widgets/javascript/thermal_sensors.js @@ -0,0 +1,296 @@ +/* + $Id: thermal_sensors.js + Description: + Javascript functions to get and show thermal sensors data in thermal_sensors.widget.php. + NOTE: depends on proper config in System >> Advanced >> Miscellaneous tab >> Thermal Sensors section. + File location: + \usr\local\www\widgets\javascript\ + Used by: + \usr\local\www\widgets\widgets\thermal_sensors.widget.php + + Redistribution and use in source and binary forms, with or without + modification, are permitted provided that the following conditions are met: + + 1. Redistributions of source code must retain the above copyright notice, + this list of conditions and the following disclaimer. + + 2. Redistributions in binary form must reproduce the above copyright + notice, this list of conditions and the following disclaimer in the + documentation and/or other materials provided with the distribution. + + THIS SOFTWARE IS PROVIDED ``AS IS'' AND ANY EXPRESS OR IMPLIED WARRANTIES, + INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY + AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE + AUTHOR BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, + OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF + SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS + INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN + CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) + ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE + POSSIBILITY OF SUCH DAMAGE. +*/ + + + +//should be called from "thermal_sensors.widget.php" +function showThermalSensorsData() { + + //get data from thermal_sensors.widget.php + url = "/widgets/widgets/thermal_sensors.widget.php?getThermalSensorsData=1" + //IE fix to disable cache when using http:// , just append timespan + + new Date().getTime(); + + jQuery.ajax(url, { + type: 'get', + success: function(data) { + var thermalSensorsData = data || ""; + buildThermalSensorsData(thermalSensorsData); + }, + error: function(jqXHR, status, error) { + buildThermalSensorsDataRaw( + "Error getting data from [thermal_sensors.widget.php] - |" + + "status: [" + (status || "") + "]|" + + "error: [" + (error || "") + "]"); + } + }); + + //call itself in 11 seconds + window.setTimeout(showThermalSensorsData, 11000); +} + +function buildThermalSensorsData(thermalSensorsData) { + //NOTE: variable thermal_sensors_widget_showRawOutput is declared/set in "thermal_sensors.widget.php" + if (thermal_sensors_widget_showRawOutput) { + buildThermalSensorsDataRaw(thermalSensorsData); + } else { + buildThermalSensorsDataGraph(thermalSensorsData); + } +} + +function buildThermalSensorsDataRaw(thermalSensorsData) { + + var thermalSensorsContent = ""; + + if (thermalSensorsData && thermalSensorsData != "") { + thermalSensorsContent = thermalSensorsData.replace(/\|/g, "<br />"); + //rawData = thermalSensorsData.split("|").join("<br />"); + } + + loadThermalSensorsContainer(thermalSensorsContent); +} + +function loadThermalSensorsContainer (thermalSensorsContent) { + + if (thermalSensorsContent && thermalSensorsContent != "") { + //load generated graph (or raw data) into thermalSensorsContainer (thermalSensorsContainer DIV defined in "thermal_sensors.widget.php") + jQuery('#thermalSensorsContainer').html(thermalSensorsContent); + } else { + jQuery('#thermalSensorsContainer').html("No Thermal Sensors data available.<br /><br />"); + jQuery('<div/>').html( + "<span>* You can configure a proper Thermal Sensor / Module under <br />" + + " <a href='system_advanced_misc.php'>System > Advanced > Miscellaneous : Thermal Sensors section</a>.</span>" + ).appendTo('#thermalSensorsContainer'); + } +} + +function buildThermalSensorsDataGraph(thermalSensorsData) { + + //local constants + var normalColor = "LimeGreen"; + var normalColorShadowTop = "Lime"; + var normalColorShadowBottom = "Green"; + + var warningColor = "Orange"; + var warningColorShadowBottom = "Chocolate"; + + var criticalColor = "Red"; + var criticalColorShadowBottom = "DarkRed"; + + //local variables + var barBgColor = normalColor; //green/normal as default + var barBgColorShadowTop = normalColorShadowTop; //green/normal as default + var barBgColorShadowBottom = normalColorShadowBottom; //green/normal as default + + var thermalSensorsArray = new Array(); + + if (thermalSensorsData && thermalSensorsData != "") { + thermalSensorsArray = thermalSensorsData.split("|"); + } + + var thermalSensorsHTMLContent = ""; + var itemsToPulsate = new Array(); + + //generate graph for each temperature sensor and append to thermalSensorsHTMLContent string + for (var i = 0; i < thermalSensorsArray.length; i++) { + + var sensorDataArray = thermalSensorsArray[i].split(":"); + var sensorName = sensorDataArray[0].trim(); + var thermalSensorValue = getThermalSensorValue(sensorDataArray[1]); + + var pulsateTimes = 0; + var pulsateDuration = 0; + + var warningTempThresholdPosition = 0; + var criticalTempThresholdPosition = 0; + + //NOTE: the following variables are declared/set in "thermal_sensors.widget.php": + // thermal_sensors_widget_coreWarningTempThreshold, thermal_sensors_widget_coreCriticalTempThreshold, + // thermal_sensors_widget_zoneWarningTempThreshold, thermal_sensors_widget_zoneCriticalTempThreshold + // thermal_sensors_widget_pulsateWarning, thermal_sensors_widget_pulsateCritical + + //set graph color and pulsate parameters + if (sensorName.indexOf("cpu") > -1) { //check CPU Threshold config settings + + warningTempThresholdPosition = thermal_sensors_widget_coreWarningTempThreshold; + criticalTempThresholdPosition = thermal_sensors_widget_coreCriticalTempThreshold; + + if (thermalSensorValue < thermal_sensors_widget_coreWarningTempThreshold) { + barBgColor = normalColor; + barBgColorShadowTop = normalColorShadowTop; + barBgColorShadowBottom = normalColorShadowBottom; + pulsateTimes = 0; + pulsateDuration = 0; + } else if (thermalSensorValue >= thermal_sensors_widget_coreWarningTempThreshold && thermalSensorValue < thermal_sensors_widget_coreCriticalTempThreshold) { + barBgColor = warningColor; + barBgColorShadowTop = warningColor; + barBgColorShadowBottom = warningColorShadowBottom; + pulsateTimes = thermal_sensors_widget_pulsateWarning ? 4 : 0; + pulsateDuration = thermal_sensors_widget_pulsateWarning ? 900 : 0; + } else { // thermalSensorValue > thermal_sensors_widget_coreCriticalTempThreshold + barBgColor = criticalColor; + barBgColorShadowTop = criticalColor; + barBgColorShadowBottom = criticalColorShadowBottom; + pulsateTimes = thermal_sensors_widget_pulsateCritical ? 7 : 0; + pulsateDuration = thermal_sensors_widget_pulsateCritical ? 900 : 0; + } + } else { //assuming sensor is for a zone, check Zone Threshold config settings + + warningTempThresholdPosition = thermal_sensors_widget_zoneWarningTempThreshold; + criticalTempThresholdPosition = thermal_sensors_widget_zoneCriticalTempThreshold; + + if (thermalSensorValue < thermal_sensors_widget_zoneWarningTempThreshold) { + + barBgColor = normalColor; + barBgColorShadowTop = normalColorShadowTop; + barBgColorShadowBottom = normalColorShadowBottom; + pulsateTimes = 0; + pulsateDuration = 0; + + } else if (thermalSensorValue >= thermal_sensors_widget_zoneWarningTempThreshold && + thermalSensorValue < thermal_sensors_widget_zoneCriticalTempThreshold) { + + barBgColor = warningColor; + barBgColorShadowTop = warningColor; + barBgColorShadowBottom = warningColorShadowBottom; + pulsateTimes = thermal_sensors_widget_pulsateWarning ? 4 : 0; + pulsateDuration = thermal_sensors_widget_pulsateWarning ? 900 : 0; + + } else { // thermalSensorValue > thermal_sensors_widget_zoneCriticalTempThreshold + + barBgColor = criticalColor; + barBgColorShadowTop = criticalColor; + barBgColorShadowBottom = criticalColorShadowBottom; + pulsateTimes = thermal_sensors_widget_pulsateCritical ? 7 : 0; + pulsateDuration = thermal_sensors_widget_pulsateCritical ? 900 : 0; + } + } + + //NOTE: variable thermal_sensors_widget_showFullSensorName is declared/set in "thermal_sensors.widget.php" + if (!thermal_sensors_widget_showFullSensorName) { + sensorName = getSensorFriendlyName(sensorName); + } + + //build temperature item/row for a sensor + //NOTE: additional styles are set in 'thermal_sensors.widget.php' + var thermalSensorRow = "<div class='thermalSensorRow' id='thermalSensorRow" + i + "' >" + + //sensor name and temperature value + " <div class='thermalSensorTextShell'><div class='thermalSensorText' id='thermalSensorText" + i + "'>" + sensorName + ": </div><div class='thermalSensorValue' id='thermalSensorValue" + i + "'>" + thermalSensorValue + " °C</div></div>" + + //temperature bar + " <div class='thermalSensorBarShell' id='thermalSensorBarShell" + i + "' >" + + " <div class='thermalSensorBar' id='thermalSensorBar" + i + "' style='background-color: " + barBgColor + "; border-top-color: " + barBgColorShadowTop + "; border-bottom-color: " + barBgColorShadowBottom + "; width:" + thermalSensorValue + "%;' ></div>" + + //threshold targets (warning and critical) + " <div class='thermalSensorWarnThresh' id='thermalSensorWarnThresh" + i + "' style='left:" + warningTempThresholdPosition + "%;' ></div>" + + " <div class='thermalSensorCritThresh' id='thermalSensorCritThresh" + i + "' style='left:" + criticalTempThresholdPosition + "%;' ></div>" + + //temperature scale (max 100 C) + " <div class='thermal_sensors_widget_scale000'></div>" + + " <div class='thermal_sensors_widget_scale010'></div>" + + " <div class='thermal_sensors_widget_scale020'></div>" + + " <div class='thermal_sensors_widget_scale030'></div>" + + " <div class='thermal_sensors_widget_scale040'></div>" + + " <div class='thermal_sensors_widget_scale050'></div>" + + " <div class='thermal_sensors_widget_scale060'></div>" + + " <div class='thermal_sensors_widget_scale070'></div>" + + " <div class='thermal_sensors_widget_scale080'></div>" + + " <div class='thermal_sensors_widget_scale090'></div>" + + " <div class='thermal_sensors_widget_scale100'></div>" + + " <div class='thermal_sensors_widget_mark100'>100°</div>" + + " </div>" + + "</div>"; + + //collect parameters for warning/critical items we need to pulsate + if (pulsateTimes > 0) { + var params = i + "|" + barBgColor + "|" + pulsateTimes + "|" + pulsateDuration; + itemsToPulsate.push(params); + } + + //append HTML item + thermalSensorsHTMLContent = thermalSensorsHTMLContent + thermalSensorRow; + } + + //load generated graph into thermalSensorsContainer (DIV defined in "thermal_sensors.widget.php") + loadThermalSensorsContainer(thermalSensorsHTMLContent); + + if (itemsToPulsate.length > 0) { + //pulsate/flash warning/critical items we collected + pulsateThermalSensorsItems(itemsToPulsate); + } +} + +function pulsateThermalSensorsItems(itemsToPulsate) { + + //pulsate/flash warning/critical items we collected + for (var i = 0; i < itemsToPulsate.length; i++) { + + var pulsateParams = itemsToPulsate[i].split("|"); + var rowNum = parseInt(pulsateParams[0]); + //var textColor = pulsateParams[1]; + var pulsateTimes = parseInt(pulsateParams[2]); + var pulsateDuration = parseInt(pulsateParams[3]); + + //pulsate temp Value + var divThermalSensorValue = jQuery("#thermalSensorValue" + rowNum); //get temp value by id + divThermalSensorValue.effect("pulsate", { + times: pulsateTimes, + easing: 'linear' //'easeInExpo' + }, pulsateDuration); + ////set Temp Value color + //divThermalSensorValue.css({ color: textColor }); + + //pulsate temp Bar + var divThermalSensorBar = jQuery("#thermalSensorBar" + rowNum); //get temp bar by id + divThermalSensorBar.effect("pulsate", { + times: pulsateTimes, + easing: 'linear' //'easeInExpo' + }, pulsateDuration); + + } +} + +function getSensorFriendlyName(sensorFullName) { + var rzone = /^hw\.acpi\.thermal\.tz([0-9]+)\.temperature$/; + var rcore = /^dev\.cpu\.([0-9]+)\.temperature$/; + + if (rzone.test(sensorFullName)) { + return "Zone " + rzone.exec(sensorFullName)[1]; + } + + if (rcore.test(sensorFullName)) { + return "Core " + rcore.exec(sensorFullName)[1]; + } + + return sensorFullName; +} + +function getThermalSensorValue(stringValue) { + return (+parseFloat(stringValue) || 0).toFixed(1); +} diff --git a/src/usr/local/www/widgets/javascript/traffic_graph.js b/src/usr/local/www/widgets/javascript/traffic_graph.js new file mode 100644 index 0000000..383a549 --- /dev/null +++ b/src/usr/local/www/widgets/javascript/traffic_graph.js @@ -0,0 +1,41 @@ +function trafficshowDiv(incDiv,ifDescription,refreshIntervalSec,swapButtons) { + // put the graph object HTML in the element and make it appear + selectedDiv = incDiv + "graphdiv"; + jQuery('#' + selectedDiv).html( + '<object data="graph.php?ifnum=' + incDiv + '&ifname=' + ifDescription + '&timeint=' + refreshIntervalSec + '&initdelay=0" height="100%" width="100%">' + + '<param name="id" value="graph" />' + + '<param name="type" value="image/svg+xml" />' + + '<param name="pluginspage" value="http://www.adobe.com/svg/viewer/install/auto" />' + + '</object>'); + jQuery('#' + selectedDiv).effect('blind',{mode:'show'},1000); + d = document; + if (swapButtons) { + selectIntLink = selectedDiv + "-min"; + textlink = d.getElementById(selectIntLink); + textlink.style.display = "inline"; + + selectIntLink = selectedDiv + "-open"; + textlink = d.getElementById(selectIntLink); + textlink.style.display = "none"; + } + document.traffic_graphs_widget_iform["shown[" + incDiv + "]"].value = "show"; +} + +function trafficminimizeDiv(incDiv,swapButtons) { + // remove the graph object HTML from the element (so it does not keep using CPU) and fade + selectedDiv = incDiv + "graphdiv"; + jQuery('#' + selectedDiv).html(''); + jQuery('#' + selectedDiv).effect('blind',{mode:'hide'},1000); + d = document; + if (swapButtons) { + selectIntLink = selectedDiv + "-open"; + textlink = d.getElementById(selectIntLink); + textlink.style.display = "inline"; + + selectIntLink = selectedDiv + "-min"; + textlink = d.getElementById(selectIntLink); + textlink.style.display = "none"; + } + document.traffic_graphs_widget_iform["shown[" + incDiv + "]"].value = "hide"; +} + |
