diff --git a/ESPController/web_src/pagecode.js b/ESPController/web_src/pagecode.js
index 700b8bb..79dc038 100644
--- a/ESPController/web_src/pagecode.js
+++ b/ESPController/web_src/pagecode.js
@@ -644,624 +644,626 @@ function secondsToHms(seconds) {
return dDisplay + hDisplay + mDisplay + sDisplay;
}
-function queryBMS() {
- $.getJSON("/api/monitor2", function (jsondata) {
- var labels = [];
- var cells = [];
- var bank = [];
- var voltages = [];
- var voltagesmin = [];
- var voltagesmax = [];
- var tempint = [];
- var tempext = [];
- var pwm = [];
-
- var minVoltage = DEFAULT_GRAPH_MIN_VOLTAGE / 1000.0;
- var maxVoltage = DEFAULT_GRAPH_MAX_VOLTAGE / 1000.0;
-
- var minExtTemp = 999;
- var maxExtTemp = -999;
-
- var bankNumber = 0;
- var cellsInBank = 0;
-
- // Need one color for each bank, could make it colourful I suppose :-)
- const colours = [
- '#55a1ea', '#33628f', '#498FD0', '#6D8EA0',
- '#55a1ea', '#33628f', '#498FD0', '#6D8EA0',
- '#55a1ea', '#33628f', '#498FD0', '#6D8EA0',
- '#55a1ea', '#33628f', '#498FD0', '#6D8EA0',
- ]
-
- const red = '#B44247'
-
- const highestCell = '#8c265d'
- const lowestCell = '#b6a016'
-
- var markLineData = [];
-
- markLineData.push({ name: 'avg', type: 'average', lineStyle: { color: '#eee', width: 3, type: 'dotted', opacity: 0.4 }, label: { distance: [10, 0], position: 'start', color: "#eeeeee", textBorderColor: '#313131', textBorderWidth: 2 } });
-
- var xAxis = 0;
- for (let index = 0; index < jsondata.banks; index++) {
- markLineData.push({ name: "Bank " + index, xAxis: xAxis, lineStyle: { color: colours[index], width: 4, type: 'dashed', opacity: 0.5 }, label: { show: true, distance: [0, 0], formatter: '{b}', color: '#eeeeee', textBorderColor: colours[index], textBorderWidth: 2 } });
- xAxis += jsondata.seriesmodules;
- }
+function updateChart(jsondata) {
+
+ let labels = [];
+ let cells = [];
+ let bank = [];
+ let voltages = [];
+ let voltagesmin = [];
+ let voltagesmax = [];
+ let tempint = [];
+ let tempext = [];
+ let pwm = [];
+
+ let minVoltage = DEFAULT_GRAPH_MIN_VOLTAGE / 1000.0;
+ let maxVoltage = DEFAULT_GRAPH_MAX_VOLTAGE / 1000.0;
+
+ let minExtTemp = 999;
+ let maxExtTemp = -999;
+
+ var bankNumber = 0;
+ let cellsInBank = 0;
+
+ // Need one color for each bank, could make it colourful I suppose :-)
+ const colours = [
+ '#55a1ea', '#33628f', '#498FD0', '#6D8EA0',
+ '#55a1ea', '#33628f', '#498FD0', '#6D8EA0',
+ '#55a1ea', '#33628f', '#498FD0', '#6D8EA0',
+ '#55a1ea', '#33628f', '#498FD0', '#6D8EA0',
+ ]
+
+ const red = '#B44247'
+
+ const highestCell = '#8c265d'
+ const lowestCell = '#b6a016'
+
+ let markLineData = [];
+
+ markLineData.push({ name: 'avg', type: 'average', lineStyle: { color: '#eee', width: 3, type: 'dotted', opacity: 0.4 }, label: { distance: [10, 0], position: 'start', color: "#eeeeee", textBorderColor: '#313131', textBorderWidth: 2 } });
+
+ let xAxis = 0;
+ for (let index = 0; index < jsondata.banks; index++) {
+ markLineData.push({ name: "Bank " + index, xAxis: xAxis, lineStyle: { color: colours[index], width: 4, type: 'dashed', opacity: 0.5 }, label: { show: true, distance: [0, 0], formatter: '{b}', color: '#eeeeee', textBorderColor: colours[index], textBorderWidth: 2 } });
+ xAxis += jsondata.seriesmodules;
+ }
- if (jsondata.voltages) {
- //Clone array of voltages
- tempArray = [];
- for (i = 0; i < jsondata.voltages.length; i++) {
- tempArray[i] = jsondata.voltages[i];
- }
+ if (jsondata.voltages) {
+ //Clone array of voltages
+ let tempArray = [];
+ for (i = 0; i < jsondata.voltages.length; i++) {
+ tempArray[i] = jsondata.voltages[i];
+ }
- //Split voltages into banks
- sorted_voltages = [];
- for (i = 0; i < jsondata.banks; i++) {
- unsorted = tempArray.splice(0, jsondata.seriesmodules);
- sorted_voltages.push(unsorted.sort());
- }
+ //Split voltages into banks
+ let sorted_voltages = [];
+ for (i = 0; i < jsondata.banks; i++) {
+ let unsorted = tempArray.splice(0, jsondata.seriesmodules);
+ sorted_voltages.push(unsorted.sort());
+ }
- for (let i = 0; i < jsondata.voltages.length; i++) {
- labels.push(bankNumber + "/" + i);
+ for (let i = 0; i < jsondata.voltages.length; i++) {
+ labels.push(bankNumber + "/" + i);
- // Make different banks different colours (stripes)
- var stdcolor = colours[bankNumber];
+ // Make different banks different colours (stripes)
+ let stdcolor = colours[bankNumber];
- var color = stdcolor;
+ let color = stdcolor;
- //Highlight lowest cell voltage in this bank
- if (jsondata.voltages[i] === sorted_voltages[bankNumber][0]) {
- color = lowestCell;
- }
- //Highlight highest cell voltage in this bank
- if (jsondata.voltages[i] === sorted_voltages[bankNumber][jsondata.seriesmodules - 1]) {
- color = highestCell;
- }
- // Red
- if (jsondata.bypass[i] === 1) {
- color = red;
- }
+ //Highlight lowest cell voltage in this bank
+ if (jsondata.voltages[i] === sorted_voltages[bankNumber][0]) {
+ color = lowestCell;
+ }
+ //Highlight highest cell voltage in this bank
+ if (jsondata.voltages[i] === sorted_voltages[bankNumber][jsondata.seriesmodules - 1]) {
+ color = highestCell;
+ }
+ // Red
+ if (jsondata.bypass[i] === 1) {
+ color = red;
+ }
- var v = (parseFloat(jsondata.voltages[i]) / 1000.0);
- voltages.push({ value: v, itemStyle: { color: color } });
+ const v = (parseFloat(jsondata.voltages[i]) / 1000.0);
+ voltages.push({ value: v, itemStyle: { color: color } });
- //Auto scale graph is outside of normal bounds
- if (v > maxVoltage) { maxVoltage = v; }
- if (v < minVoltage) { minVoltage = v; }
+ //Auto scale graph is outside of normal bounds
+ if (v > maxVoltage) { maxVoltage = v; }
+ if (v < minVoltage) { minVoltage = v; }
- if (jsondata.minvoltages) {
- voltagesmin.push((parseFloat(jsondata.minvoltages[i]) / 1000.0));
- }
- if (jsondata.maxvoltages) {
- voltagesmax.push((parseFloat(jsondata.maxvoltages[i]) / 1000.0));
- }
+ if (jsondata.minvoltages) {
+ voltagesmin.push((parseFloat(jsondata.minvoltages[i]) / 1000.0));
+ }
+ if (jsondata.maxvoltages) {
+ voltagesmax.push((parseFloat(jsondata.maxvoltages[i]) / 1000.0));
+ }
- bank.push(bankNumber);
- cells.push(i);
+ bank.push(bankNumber);
+ cells.push(i);
- cellsInBank++;
- if (cellsInBank == jsondata.seriesmodules) {
- cellsInBank = 0;
- bankNumber++;
- }
+ cellsInBank++;
+ if (cellsInBank == jsondata.seriesmodules) {
+ cellsInBank = 0;
+ bankNumber++;
+ }
- color = jsondata.bypasshot[i] == 1 ? red : stdcolor;
- tempint.push({ value: jsondata.inttemp[i], itemStyle: { color: color } });
- var exttemp = (jsondata.exttemp[i] == -40 ? 0 : jsondata.exttemp[i]);
- tempext.push({ value: exttemp, itemStyle: { color: stdcolor } });
+ color = jsondata.bypasshot[i] == 1 ? red : stdcolor;
+ tempint.push({ value: jsondata.inttemp[i], itemStyle: { color: color } });
+ let exttemp = (jsondata.exttemp[i] == -40 ? 0 : jsondata.exttemp[i]);
+ tempext.push({ value: exttemp, itemStyle: { color: stdcolor } });
- if (jsondata.exttemp[i] != null) {
- if (exttemp > maxExtTemp) {
- maxExtTemp = exttemp;
- }
- if (exttemp < minExtTemp) {
- minExtTemp = exttemp;
- }
+ if (jsondata.exttemp[i] != null) {
+ if (exttemp > maxExtTemp) {
+ maxExtTemp = exttemp;
+ }
+ if (exttemp < minExtTemp) {
+ minExtTemp = exttemp;
}
+ }
- pwm.push({ value: jsondata.bypasspwm[i] == 0 ? null : Math.trunc(jsondata.bypasspwm[i] / 255 * 100) });
- }
+ pwm.push({ value: jsondata.bypasspwm[i] == 0 ? null : Math.trunc(jsondata.bypasspwm[i] / 255 * 100) });
}
+ }
- //Scale down for low voltages
- if (minVoltage < 0) { minVoltage = 0; }
-
- if (jsondata) {
- $("#badcrc .v").html(jsondata.badcrc);
- $("#ignored .v").html(jsondata.ignored);
- $("#sent .v").html(jsondata.sent);
- $("#received .v").html(jsondata.received);
- $("#roundtrip .v").html(jsondata.roundtrip);
- $("#oos .v").html(jsondata.oos);
- $("#canfail .v").html(jsondata.can_fail);
- $("#canrecerr .v").html(jsondata.can_r_err);
- $("#cansent .v").html(jsondata.can_sent);
- $("#canrecd .v").html(jsondata.can_rec);
- $("#qlen .v").html(jsondata.qlen);
- $("#uptime .v").html(secondsToHms(jsondata.uptime));
- if (minExtTemp == 999 || maxExtTemp == -999) {
- $("#celltemp .v").html("");
- } else {
- $("#celltemp .v").html(minExtTemp + "/" + maxExtTemp + "°C");
- }
+ //Scale down for low voltages
+ if (minVoltage < 0) { minVoltage = 0; }
+
+ if (jsondata) {
+ $("#badcrc .v").html(jsondata.badcrc);
+ $("#ignored .v").html(jsondata.ignored);
+ $("#sent .v").html(jsondata.sent);
+ $("#received .v").html(jsondata.received);
+ $("#roundtrip .v").html(jsondata.roundtrip);
+ $("#oos .v").html(jsondata.oos);
+ $("#canfail .v").html(jsondata.can_fail);
+ $("#canrecerr .v").html(jsondata.can_r_err);
+ $("#cansent .v").html(jsondata.can_sent);
+ $("#canrecd .v").html(jsondata.can_rec);
+ $("#qlen .v").html(jsondata.qlen);
+ $("#uptime .v").html(secondsToHms(jsondata.uptime));
+ if (minExtTemp == 999 || maxExtTemp == -999) {
+ $("#celltemp .v").html("");
+ } else {
+ $("#celltemp .v").html(minExtTemp + "/" + maxExtTemp + "°C");
+ }
- if (jsondata.activerules == 0) {
- $("#activerules").hide();
- } else {
- $("#activerules").html(jsondata.activerules);
- $("#activerules").show(400);
- }
+ if (jsondata.activerules == 0) {
+ $("#activerules").hide();
+ } else {
+ $("#activerules").html(jsondata.activerules);
+ $("#activerules").show(400);
+ }
- if (jsondata.dyncv) {
- $("#dyncvolt .v").html(parseFloat(jsondata.dyncv / 10).toFixed(2) + "V");
- } else { $("#dyncvolt .v").html(""); }
+ if (jsondata.dyncv) {
+ $("#dyncvolt .v").html(parseFloat(jsondata.dyncv / 10).toFixed(2) + "V");
+ } else { $("#dyncvolt .v").html(""); }
- if (jsondata.dyncc) {
- $("#dynccurr .v").html(parseFloat(jsondata.dyncc / 10).toFixed(2) + "A");
- } else { $("#dynccurr .v").html(""); }
+ if (jsondata.dyncc) {
+ $("#dynccurr .v").html(parseFloat(jsondata.dyncc / 10).toFixed(2) + "A");
+ } else { $("#dynccurr .v").html(""); }
- switch (jsondata.cmode) {
- case 0: $("#chgmode .v").html("Standard"); break;
- case 1: $("#chgmode .v").html("Absorb " + secondsToHms(jsondata.ctime)); break;
- case 2: $("#chgmode .v").html("Float " + secondsToHms(jsondata.ctime)); break;
- case 3: $("#chgmode .v").html("Dynamic"); break;
- case 4: $("#chgmode .v").html("Stopped"); break;
- default: $("#chgmode .v").html("Unknown");
- }
+ switch (jsondata.cmode) {
+ case 0: $("#chgmode .v").html("Standard"); break;
+ case 1: $("#chgmode .v").html("Absorb " + secondsToHms(jsondata.ctime)); break;
+ case 2: $("#chgmode .v").html("Float " + secondsToHms(jsondata.ctime)); break;
+ case 3: $("#chgmode .v").html("Dynamic"); break;
+ case 4: $("#chgmode .v").html("Stopped"); break;
+ default: $("#chgmode .v").html("Unknown");
}
+ }
- if (jsondata.bankv) {
- for (var bankNumber = 0; bankNumber < jsondata.bankv.length; bankNumber++) {
- $("#voltage" + bankNumber + " .v").html((parseFloat(jsondata.bankv[bankNumber]) / 1000.0).toFixed(2) + "V");
- $("#range" + bankNumber + " .v").html(jsondata.voltrange[bankNumber] + "mV");
- $("#voltage" + bankNumber).removeClass("hide");
- $("#range" + bankNumber).removeClass("hide");
- }
+ if (jsondata.bankv) {
+ for (let bankNumber = 0; bankNumber < jsondata.bankv.length; bankNumber++) {
+ $("#voltage" + bankNumber + " .v").html((parseFloat(jsondata.bankv[bankNumber]) / 1000.0).toFixed(2) + "V");
+ $("#range" + bankNumber + " .v").html(jsondata.voltrange[bankNumber] + "mV");
+ $("#voltage" + bankNumber).removeClass("hide");
+ $("#range" + bankNumber).removeClass("hide");
+ }
- for (var bankNumber = jsondata.bankv.length; bankNumber < MAXIMUM_NUMBER_OF_BANKS; bankNumber++) {
- $("#voltage" + bankNumber).hide().addClass("hide");
- $("#range" + bankNumber).hide().addClass("hide");
- }
+ for (let bankNumber = jsondata.bankv.length; bankNumber < MAXIMUM_NUMBER_OF_BANKS; bankNumber++) {
+ $("#voltage" + bankNumber).hide().addClass("hide");
+ $("#range" + bankNumber).hide().addClass("hide");
}
+ }
- if (jsondata.current) {
- if (jsondata.current[0] == null) {
- $("#current .v").html("");
- $("#shuntv .v").html("");
- $("#soc .v").html("");
- $("#power .v").html("");
- $("#amphout .v").html("");
- $("#amphin .v").html("");
- $("#damphout .v").html("");
- $("#damphin .v").html("");
- $("#time100 .v").html("");
- $("#time10 .v").html("");
- $("#time20 .v").html("");
- } else {
- var data = jsondata.current[0];
- $("#current .v").html(parseFloat(data.c).toFixed(2) + "A");
- $("#shuntv .v").html(parseFloat(data.v).toFixed(2) + "V");
- $("#soc .v").html(parseFloat(data.soc).toFixed(2) + "%");
- $("#power .v").html(parseFloat(data.p) + "W");
- $("#amphout .v").html((parseFloat(data.mahout) / 1000).toFixed(3));
- $("#amphin .v").html((parseFloat(data.mahin) / 1000).toFixed(3));
- $("#damphout .v").html((parseFloat(data.dmahout) / 1000).toFixed(3));
- $("#damphin .v").html((parseFloat(data.dmahin) / 1000).toFixed(3));
-
- if (data.time100 > 0) {
- $("#time100 .v").html(secondsToHms(data.time100));
- } else { $("#time100 .v").html("∞"); }
- if (data.time20 > 0) {
- $("#time20 .v").html(secondsToHms(data.time20));
- } else { $("#time20 .v").html("∞"); }
- if (data.time10 > 0) {
- $("#time10 .v").html(secondsToHms(data.time10));
- } else { $("#time10 .v").html("∞"); }
- }
+ if (jsondata.current) {
+ if (jsondata.current[0] == null) {
+ $("#current .v").html("");
+ $("#shuntv .v").html("");
+ $("#soc .v").html("");
+ $("#power .v").html("");
+ $("#amphout .v").html("");
+ $("#amphin .v").html("");
+ $("#damphout .v").html("");
+ $("#damphin .v").html("");
+ $("#time100 .v").html("");
+ $("#time10 .v").html("");
+ $("#time20 .v").html("");
+ } else {
+ var data = jsondata.current[0];
+ $("#current .v").html(parseFloat(data.c).toFixed(2) + "A");
+ $("#shuntv .v").html(parseFloat(data.v).toFixed(2) + "V");
+ $("#soc .v").html(parseFloat(data.soc).toFixed(2) + "%");
+ $("#power .v").html(parseFloat(data.p) + "W");
+ $("#amphout .v").html((parseFloat(data.mahout) / 1000).toFixed(3));
+ $("#amphin .v").html((parseFloat(data.mahin) / 1000).toFixed(3));
+ $("#damphout .v").html((parseFloat(data.dmahout) / 1000).toFixed(3));
+ $("#damphin .v").html((parseFloat(data.dmahin) / 1000).toFixed(3));
+
+ if (data.time100 > 0) {
+ $("#time100 .v").html(secondsToHms(data.time100));
+ } else { $("#time100 .v").html("∞"); }
+ if (data.time20 > 0) {
+ $("#time20 .v").html(secondsToHms(data.time20));
+ } else { $("#time20 .v").html("∞"); }
+ if (data.time10 > 0) {
+ $("#time10 .v").html(secondsToHms(data.time10));
+ } else { $("#time10 .v").html("∞"); }
}
+ }
- //Loop size needs increasing when more warnings are added
- if (jsondata.warnings) {
- for (let warning = 1; warning <= 9; warning++) {
- if (jsondata.warnings.includes(warning)) {
- //Once a warning has triggered, hide it from showing in the future
- if ($("#warning" + warning).data("notify") == undefined) {
- $("#warning" + warning).data("notify", 1);
- $.notify($("#warning" + warning).text(), { autoHideDelay: 15000, globalPosition: 'top left', className: 'warn' });
- }
+ //Loop size needs increasing when more warnings are added
+ if (jsondata.warnings) {
+ for (let warning = 1; warning <= 9; warning++) {
+ if (jsondata.warnings.includes(warning)) {
+ //Once a warning has triggered, hide it from showing in the future
+ if ($("#warning" + warning).data("notify") == undefined) {
+ $("#warning" + warning).data("notify", 1);
+ $.notify($("#warning" + warning).text(), { autoHideDelay: 15000, globalPosition: 'top left', className: 'warn' });
}
}
+ }
- //Allow charge/discharge warnings to reappear
- if (jsondata.warnings.includes(7) == false) {
- $("#warning7").removeData("notify");
- }
- if (jsondata.warnings.includes(8) == false) {
- $("#warning8").removeData("notify");
- }
+ //Allow charge/discharge warnings to reappear
+ if (jsondata.warnings.includes(7) == false) {
+ $("#warning7").removeData("notify");
}
+ if (jsondata.warnings.includes(8) == false) {
+ $("#warning8").removeData("notify");
+ }
+ }
- //Needs increasing when more errors are added
- if (jsondata.errors) {
- for (let error = 1; error <= 7; error++) {
- if (jsondata.errors.includes(error)) {
- $("#error" + error).show();
+ //Needs increasing when more errors are added
+ if (jsondata.errors) {
+ for (let error = 1; error <= 7; error++) {
+ if (jsondata.errors.includes(error)) {
+ $("#error" + error).show();
- if (error == INTERNALERRORCODE.ModuleCountMismatch) {
- $("#missingmodule1").html(jsondata.modulesfnd);
- $("#missingmodule2").html(jsondata.banks * jsondata.seriesmodules);
- }
- } else {
- $("#error" + error).hide();
+ if (error == INTERNALERRORCODE.ModuleCountMismatch) {
+ $("#missingmodule1").html(jsondata.modulesfnd);
+ $("#missingmodule2").html(jsondata.banks * jsondata.seriesmodules);
}
+ } else {
+ $("#error" + error).hide();
}
}
+ }
- $("#info").show();
- $("#iperror").hide();
+ $("#info").show();
+ $("#iperror").hide();
- if ($('#modulesPage').is(':visible')) {
- //The modules page is visible
- var tbody = $("#modulesRows");
+ if ($('#modulesPage').is(':visible')) {
+ //The modules page is visible
+ var tbody = $("#modulesRows");
- if ($('#modulesRows tr').length != cells.length) {
- $("#settingConfig").hide();
+ if ($('#modulesRows tr').length != cells.length) {
+ $("#settingConfig").hide();
- //Add rows if they dont exist (or incorrect amount)
- $(tbody).find("tr").remove();
+ //Add rows if they dont exist (or incorrect amount)
+ $(tbody).find("tr").remove();
- $.each(cells, function (index, value) {
- $(tbody).append("| "
- + bank[index]
- + " | " + value + " | | | | "
- + " | | | | | | "
- + ""
- + " |
")
- });
+ $.each(cells, function (index, value) {
+ $(tbody).append("| "
+ + bank[index]
+ + " | " + value + " | | | | "
+ + " | | | | | | "
+ + ""
+ + " |
")
+ });
+ }
+
+ var rows = $(tbody).find("tr");
+
+ $.each(cells, function (index, value) {
+ var columns = $(rows[index]).find("td");
+ $(columns[2]).html(voltages[index].value.toFixed(3));
+ if (voltagesmin.length > 0) {
+ $(columns[3]).html(voltagesmin[index].toFixed(3));
+ } else {
+ $(columns[3]).html("n/a");
+ }
+ if (voltagesmax.length > 0) {
+ $(columns[4]).html(voltagesmax[index].toFixed(3));
+ } else {
+ $(columns[4]).html("n/a");
}
+ $(columns[5]).html(tempint[index].value);
+ $(columns[6]).html(tempext[index].value);
+ $(columns[7]).html(pwm[index].value);
+ });
- var rows = $(tbody).find("tr");
+ //As the module page is open, we refresh the last 3 columns using seperate JSON web service to keep the monitor2
+ //packets as small as possible
+ $.getJSON("/api/monitor3", function (jsondata) {
+ var tbody = $("#modulesRows");
+ var rows = $(tbody).find("tr");
$.each(cells, function (index, value) {
var columns = $(rows[index]).find("td");
- $(columns[2]).html(voltages[index].value.toFixed(3));
- if (voltagesmin.length > 0) {
- $(columns[3]).html(voltagesmin[index].toFixed(3));
- } else {
- $(columns[3]).html("n/a");
- }
- if (voltagesmax.length > 0) {
- $(columns[4]).html(voltagesmax[index].toFixed(3));
- } else {
- $(columns[4]).html("n/a");
- }
- $(columns[5]).html(tempint[index].value);
- $(columns[6]).html(tempext[index].value);
- $(columns[7]).html(pwm[index].value);
+ $(columns[8]).html(jsondata.badpacket[index]);
+ $(columns[9]).html(jsondata.pktrecvd[index]);
+ $(columns[10]).html(jsondata.balcurrent[index]);
});
-
- //As the module page is open, we refresh the last 3 columns using seperate JSON web service to keep the monitor2
- //packets as small as possible
-
- $.getJSON("/api/monitor3", function (jsondata) {
- var tbody = $("#modulesRows");
- var rows = $(tbody).find("tr");
- $.each(cells, function (index, value) {
- var columns = $(rows[index]).find("td");
- $(columns[8]).html(jsondata.badpacket[index]);
- $(columns[9]).html(jsondata.pktrecvd[index]);
- $(columns[10]).html(jsondata.balcurrent[index]);
- });
- });
- }
+ });
+ }
- if ($('#homePage').is(':visible')) {
- if (window.g1 == null && $('#graph1').css('display') != 'none') {
- // based on prepared DOM, initialize echarts instance
- window.g1 = echarts.init(document.getElementById('graph1'))
+ if ($('#homePage').is(':visible')) {
+ if (window.g1 == null && $('#graph1').css('display') != 'none') {
+ // based on prepared DOM, initialize echarts instance
+ window.g1 = echarts.init(document.getElementById('graph1'))
- // specify chart configuration item and data
- let option = {
- tooltip: {
- show: true, axisPointer: {
- type: 'cross', label: {
- backgroundColor: '#6a7985'
- }
+ // specify chart configuration item and data
+ let option = {
+ tooltip: {
+ show: true, axisPointer: {
+ type: 'cross', label: {
+ backgroundColor: '#6a7985'
+ }
+ }
+ },
+ legend: {
+ show: false
+ },
+ xAxis: [{
+ gridIndex: 0, type: 'category', axisLine: {
+ lineStyle: {
+ color: '#c1bdbd'
+ }
+ }
+ }, {
+ gridIndex: 1, type: 'category', axisLine: {
+ lineStyle: { color: '#c1bdbd' }
+ }
+ }],
+ yAxis: [{
+ id: 0, gridIndex: 0, name: 'Volts', type: 'value', min: 2.5, max: 4.5, interval: 0.25, position: 'left',
+ axisLine: {
+ lineStyle: {
+ color: '#c1bdbd'
}
},
- legend: {
- show: false
+ axisLabel: {
+ formatter: function (value, index) {
+ return value.toFixed(2);
+ }
+ }
+ },
+ {
+ id: 1,
+ gridIndex: 0, name: 'Bypass', type: 'value', min: 0,
+ max: 100, interval: 10, position: 'right',
+ axisLabel: { formatter: '{value}%' },
+ splitLine: { show: false },
+ axisLine: { lineStyle: { type: 'dotted', color: '#c1bdbd' } },
+ axisTick: { show: false }
+ },
+ {
+ id: 2,
+ gridIndex: 1,
+ name: 'Temperature',
+ type: 'value',
+ interval: 10,
+ position: 'left',
+ axisLine: {
+ lineStyle: { color: '#c1bdbd' }
},
- xAxis: [{
- gridIndex: 0, type: 'category', axisLine: {
- lineStyle: {
- color: '#c1bdbd'
+ axisLabel: { formatter: '{value}°C' }
+ }],
+ series: [
+ {
+ xAxisIndex: 0,
+ name: 'Voltage',
+ yAxisIndex: 0,
+ type: 'bar',
+ data: [],
+ markLine: {
+ silent: true, symbol: 'none', data: markLineData
+ },
+ itemStyle: { color: '#55a1ea', barBorderRadius: [8, 8, 0, 0] },
+ label: {
+ normal: {
+ show: true, position: 'insideBottom', distance: 10, align: 'left', verticalAlign: 'middle', rotate: 90, formatter: '{c}V', fontSize: 24, color: '#eeeeee', fontFamily: 'Share Tech Mono'
}
}
}, {
- gridIndex: 1, type: 'category', axisLine: {
- lineStyle: { color: '#c1bdbd' }
- }
- }],
- yAxis: [{
- id: 0, gridIndex: 0, name: 'Volts', type: 'value', min: 2.5, max: 4.5, interval: 0.25, position: 'left',
- axisLine: {
- lineStyle: {
- color: '#c1bdbd'
+ xAxisIndex: 0,
+ name: 'Min V',
+ yAxisIndex: 0,
+ type: 'line',
+ data: [],
+ label: {
+ normal: {
+ show: true, position: 'bottom', distance: 5, formatter: '{c}V', fontSize: 14, color: '#eeeeee', fontFamily: 'Share Tech Mono'
}
},
- axisLabel: {
- formatter: function (value, index) {
- return value.toFixed(2);
+ symbolSize: 16,
+ symbol: ['circle'],
+ itemStyle: {
+ normal: {
+ color: "#c1bdbd", lineStyle: { color: 'transparent' }
}
}
- },
- {
- id: 1,
- gridIndex: 0, name: 'Bypass', type: 'value', min: 0,
- max: 100, interval: 10, position: 'right',
- axisLabel: { formatter: '{value}%' },
- splitLine: { show: false },
- axisLine: { lineStyle: { type: 'dotted', color: '#c1bdbd' } },
- axisTick: { show: false }
- },
- {
- id: 2,
- gridIndex: 1,
- name: 'Temperature',
- type: 'value',
- interval: 10,
- position: 'left',
- axisLine: {
- lineStyle: { color: '#c1bdbd' }
- },
- axisLabel: { formatter: '{value}°C' }
- }],
- series: [
- {
- xAxisIndex: 0,
- name: 'Voltage',
- yAxisIndex: 0,
- type: 'bar',
- data: [],
- markLine: {
- silent: true, symbol: 'none', data: markLineData
- },
- itemStyle: { color: '#55a1ea', barBorderRadius: [8, 8, 0, 0] },
- label: {
- normal: {
- show: true, position: 'insideBottom', distance: 10, align: 'left', verticalAlign: 'middle', rotate: 90, formatter: '{c}V', fontSize: 24, color: '#eeeeee', fontFamily: 'Share Tech Mono'
- }
- }
- }, {
- xAxisIndex: 0,
- name: 'Min V',
- yAxisIndex: 0,
- type: 'line',
- data: [],
- label: {
- normal: {
- show: true, position: 'bottom', distance: 5, formatter: '{c}V', fontSize: 14, color: '#eeeeee', fontFamily: 'Share Tech Mono'
- }
- },
- symbolSize: 16,
- symbol: ['circle'],
- itemStyle: {
- normal: {
- color: "#c1bdbd", lineStyle: { color: 'transparent' }
- }
+ }
+ , {
+ xAxisIndex: 0,
+ name: 'Max V',
+ yAxisIndex: 0,
+ type: 'line',
+ data: [],
+ label: {
+ normal: {
+ show: true, position: 'top', distance: 5, formatter: '{c}V', fontSize: 14, color: '#c1bdbd', fontFamily: 'Share Tech Mono'
}
- }
- , {
- xAxisIndex: 0,
- name: 'Max V',
- yAxisIndex: 0,
- type: 'line',
- data: [],
- label: {
- normal: {
- show: true, position: 'top', distance: 5, formatter: '{c}V', fontSize: 14, color: '#c1bdbd', fontFamily: 'Share Tech Mono'
- }
- },
- symbolSize: 16,
- symbol: ['arrow'],
- itemStyle: {
- normal: {
- color: "#c1bdbd", lineStyle: { color: 'transparent' }
- }
+ },
+ symbolSize: 16,
+ symbol: ['arrow'],
+ itemStyle: {
+ normal: {
+ color: "#c1bdbd", lineStyle: { color: 'transparent' }
}
}
+ }
- , {
- xAxisIndex: 0,
- name: 'Bypass',
- yAxisIndex: 1,
- type: 'line',
- data: [],
- label: {
- normal: {
- show: true, position: 'right', distance: 5, formatter: '{c}%', fontSize: 14, color: '#f0e400', fontFamily: 'Share Tech Mono'
- }
- },
- symbolSize: 16,
- symbol: ['square'],
- itemStyle: { normal: { color: "#f0e400", lineStyle: { color: 'transparent' } } }
- }
+ , {
+ xAxisIndex: 0,
+ name: 'Bypass',
+ yAxisIndex: 1,
+ type: 'line',
+ data: [],
+ label: {
+ normal: {
+ show: true, position: 'right', distance: 5, formatter: '{c}%', fontSize: 14, color: '#f0e400', fontFamily: 'Share Tech Mono'
+ }
+ },
+ symbolSize: 16,
+ symbol: ['square'],
+ itemStyle: { normal: { color: "#f0e400", lineStyle: { color: 'transparent' } } }
+ }
- , {
- xAxisIndex: 1,
- yAxisIndex: 2,
- name: 'BypassTemperature',
- type: 'bar',
- data: [],
- itemStyle: {
- color: '#55a1ea', barBorderRadius: [8, 8, 0, 0]
- },
- label: {
- normal: {
- show: true, position: 'insideBottom', distance: 8,
- align: 'left', verticalAlign: 'middle',
- rotate: 90, formatter: '{c}°C', fontSize: 20, color: '#eeeeee', fontFamily: 'Share Tech Mono'
- }
+ , {
+ xAxisIndex: 1,
+ yAxisIndex: 2,
+ name: 'BypassTemperature',
+ type: 'bar',
+ data: [],
+ itemStyle: {
+ color: '#55a1ea', barBorderRadius: [8, 8, 0, 0]
+ },
+ label: {
+ normal: {
+ show: true, position: 'insideBottom', distance: 8,
+ align: 'left', verticalAlign: 'middle',
+ rotate: 90, formatter: '{c}°C', fontSize: 20, color: '#eeeeee', fontFamily: 'Share Tech Mono'
}
}
+ }
- , {
- xAxisIndex: 1,
- yAxisIndex: 2,
- name: 'CellTemperature',
- type: 'bar',
- data: [],
- itemStyle: {
- color: '#55a1ea', barBorderRadius: [8, 8, 0, 0]
- },
- label: {
- normal: {
- show: true, position: 'insideBottom', distance: 8,
- align: 'left', verticalAlign: 'middle', rotate: 90,
- formatter: '{c}°C', fontSize: 20, color: '#eeeeee', fontFamily: 'Share Tech Mono'
- }
+ , {
+ xAxisIndex: 1,
+ yAxisIndex: 2,
+ name: 'CellTemperature',
+ type: 'bar',
+ data: [],
+ itemStyle: {
+ color: '#55a1ea', barBorderRadius: [8, 8, 0, 0]
+ },
+ label: {
+ normal: {
+ show: true, position: 'insideBottom', distance: 8,
+ align: 'left', verticalAlign: 'middle', rotate: 90,
+ formatter: '{c}°C', fontSize: 20, color: '#eeeeee', fontFamily: 'Share Tech Mono'
}
-
}
- ],
- grid: [
- {
- containLabel: false, left: '4%', right: '4%', bottom: '30%'
- }, {
- containLabel: false, left: '4%', right: '4%', top: '76%'
- }]
- };
+ }
+ ],
+ grid: [
+ {
+ containLabel: false, left: '4%', right: '4%', bottom: '30%'
+ }, {
+ containLabel: false, left: '4%', right: '4%', top: '76%'
+ }]
+ };
- if (jsondata.voltages.length > 24) {
- // When lots of cell data is on screen, hide the labels to improve visability
- for (const element of option.series) {
- element.label.normal.show = false;
- }
+
+ if (jsondata.voltages.length > 24) {
+ // When lots of cell data is on screen, hide the labels to improve visability
+ for (const element of option.series) {
+ element.label.normal.show = false;
}
+ }
- // use configuration item and data specified to show chart
- g1.setOption(option);
+ // use configuration item and data specified to show chart
+ g1.setOption(option);
- }
+ }
- if (window.g2 == null && $('#graph2').css('display') != 'none' && window.Graph3DAvailable === true) {
- window.g2 = echarts.init(document.getElementById('graph2'));
-
- var Option3dBar = {
- tooltip: {},
- visualMap: { max: 4, inRange: { color: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026'] } },
- xAxis3D: { type: 'category', data: [], name: 'Cell', nameTextStyle: { color: '#ffffff' } },
- yAxis3D: { type: 'category', data: [], name: 'Bank', nameTextStyle: { color: '#ffffff' } },
- zAxis3D: { type: 'value', name: 'Voltage', nameTextStyle: { color: '#ffffff' } },
- grid3D: {
- boxWidth: 200,
- boxDepth: 80,
- viewControl: {
- // projection: 'orthographic'
- },
- light: {
- main: {
- intensity: 1.2,
- shadow: true
- },
- ambient: {
- intensity: 0.3
- }
- }
+ if (window.g2 == null && $('#graph2').css('display') != 'none' && window.Graph3DAvailable === true) {
+ window.g2 = echarts.init(document.getElementById('graph2'));
+
+ var Option3dBar = {
+ tooltip: {},
+ visualMap: { max: 4, inRange: { color: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026'] } },
+ xAxis3D: { type: 'category', data: [], name: 'Cell', nameTextStyle: { color: '#ffffff' } },
+ yAxis3D: { type: 'category', data: [], name: 'Bank', nameTextStyle: { color: '#ffffff' } },
+ zAxis3D: { type: 'value', name: 'Voltage', nameTextStyle: { color: '#ffffff' } },
+ grid3D: {
+ boxWidth: 200,
+ boxDepth: 80,
+ viewControl: {
+ // projection: 'orthographic'
},
- series: [{
- type: 'bar3D',
- data: [],
- shading: 'lambert',
- label: { textStyle: { fontSize: 16, borderWidth: 1, color: '#ffffff' } },
-
- emphasis: {
- label: {
- textStyle: {
- fontSize: 16,
- color: '#aaa'
- }
- },
- itemStyle: { color: '#fff' }
+ light: {
+ main: {
+ intensity: 1.2,
+ shadow: true
+ },
+ ambient: {
+ intensity: 0.3
}
- }]
- };
+ }
+ },
+ series: [{
+ type: 'bar3D',
+ data: [],
+ shading: 'lambert',
+ label: { textStyle: { fontSize: 16, borderWidth: 1, color: '#ffffff' } },
+
+ emphasis: {
+ label: {
+ textStyle: {
+ fontSize: 16,
+ color: '#aaa'
+ }
+ },
+ itemStyle: { color: '#fff' }
+ }
+ }]
+ };
- g2.setOption(Option3dBar);
- }
+ g2.setOption(Option3dBar);
+ }
- if (window.g1 != null && $('#graph1').css('display') != 'none') {
- g1.setOption({
- markLine: { data: markLineData },
- xAxis: { data: labels },
- yAxis: [{ gridIndex: 0, min: minVoltage, max: maxVoltage }]
- , series: [{ name: 'Voltage', data: voltages }
- , { name: 'Min V', data: voltagesmin }
- , { name: 'Max V', data: voltagesmax }
- , { name: 'Bypass', data: pwm }
- , { name: 'BypassTemperature', data: tempint }
- , { name: 'CellTemperature', data: tempext }]
- });
- }
+ if (window.g1 != null && $('#graph1').css('display') != 'none') {
+ g1.setOption({
+ markLine: { data: markLineData },
+ xAxis: { data: labels },
+ yAxis: [{ gridIndex: 0, min: minVoltage, max: maxVoltage }]
+ , series: [{ name: 'Voltage', data: voltages }
+ , { name: 'Min V', data: voltagesmin }
+ , { name: 'Max V', data: voltagesmax }
+ , { name: 'Bypass', data: pwm }
+ , { name: 'BypassTemperature', data: tempint }
+ , { name: 'CellTemperature', data: tempext }]
+ });
+ }
- if (window.g2 != null && $('#graph2').css('display') != 'none') {
- //Format the data to show as 3D Bar chart
- var cells3d = [];
- var banks3d = [];
+ if (window.g2 != null && $('#graph2').css('display') != 'none') {
+ //Format the data to show as 3D Bar chart
+ var cells3d = [];
+ var banks3d = [];
- for (let seriesmodules = 0; seriesmodules < jsondata.seriesmodules; seriesmodules++) {
- cells3d.push({ value: 'Cell ' + seriesmodules, textStyle: { color: '#ffffff' } });
- }
+ for (let seriesmodules = 0; seriesmodules < jsondata.seriesmodules; seriesmodules++) {
+ cells3d.push({ value: 'Cell ' + seriesmodules, textStyle: { color: '#ffffff' } });
+ }
- var data3d = [];
- var cell = 0;
- for (let bankNumber = 0; bankNumber < jsondata.banks; bankNumber++) {
- banks3d.push({ value: 'Bank ' + bankNumber, textStyle: { color: '#ffffff' } });
- //Build up 3d array for cell data
- for (let seriesmodules = 0; seriesmodules < jsondata.seriesmodules; seriesmodules++) {
- data3d.push({ value: [seriesmodules, bankNumber, voltages[cell].value], itemStyle: voltages[cell].itemStyle });
- cell++;
- }
+ var data3d = [];
+ var cell = 0;
+ for (let bankNumber = 0; bankNumber < jsondata.banks; bankNumber++) {
+ banks3d.push({ value: 'Bank ' + bankNumber, textStyle: { color: '#ffffff' } });
+ //Build up 3d array for cell data
+ for (let seriesmodules = 0; seriesmodules < jsondata.seriesmodules; seriesmodules++) {
+ data3d.push({ value: [seriesmodules, bankNumber, voltages[cell].value], itemStyle: voltages[cell].itemStyle });
+ cell++;
}
+ }
- g2.setOption({
- xAxis3D: { data: cells3d },
- yAxis3D: { data: banks3d },
- zAxis3D: { min: minVoltage, max: maxVoltage },
- series: [{ data: data3d }]
+ g2.setOption({
+ xAxis3D: { data: cells3d },
+ yAxis3D: { data: banks3d },
+ zAxis3D: { min: minVoltage, max: maxVoltage },
+ series: [{ data: data3d }]
- , grid3D: {
- boxWidth: 20 * jsondata.seriesmodules > 200 ? 200 : 20 * jsondata.seriesmodules,
- boxDepth: 20 * jsondata.banks > 100 ? 100 : 20 * jsondata.banks
- }
+ , grid3D: {
+ boxWidth: 20 * jsondata.seriesmodules > 200 ? 200 : 20 * jsondata.seriesmodules,
+ boxDepth: 20 * jsondata.banks > 100 ? 100 : 20 * jsondata.banks
}
-
- );
}
- }//end homepage visible
+ );
+ }
+
+ }//end homepage visible
- $("#homePage").css({ opacity: 1.0 });
- $("#loading").hide();
- //Call again in a few seconds
- setTimeout(queryBMS, 3500);
+ $("#homePage").css({ opacity: 1.0 });
+ $("#loading").hide();
+ //Call again in a few seconds
+ setTimeout(queryBMS, 3500);
- loadVisibleTileData();
+ loadVisibleTileData();
+}
- }).fail(function (jqXHR, textStatus, errorThrown) {
+function queryBMS() {
+ $.getJSON("/api/monitor2", updateChart).fail(function (jqXHR, textStatus, errorThrown) {
if (jqXHR.status == 400 && jqXHR.responseJSON.error === "Invalid cookie") {
if ($("#warningXSS").data("notify") == undefined) {