CAT_TOM/pyasic
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

finished light functionality

Browse Source
This commit is contained in:
UpstreamData
2022-04-14 13:16:16 -06:00
parent 41a6078790
commit e74f67089e
5 changed files with 329 additions and 300 deletions
Download Patch File Download Diff File Expand all files Collapse all files

588
tools/web_testbench/templates/index.html
View File

@@ -79,294 +79,308 @@ var options_fans = {
var ws = new WebSocket("ws://{{request.url.hostname}}:{% if request.url.port %}{{request.url.port}}{% else %}80{% endif %}/ws");
ws.onmessage = function(event) {
var data = JSON.parse(event.data)
if (data.hasOwnProperty("miners")) {
var container_all = document.getElementById('chart_container');
container_all.innerHTML = ""
data["miners"].forEach(function(miner) {
// create column with ID being the IP for later use
var column = document.createElement('div');
column.className = "col border border-dark p-3"
column.id = miner
// create IP address header
var header = document.createElement('button');
header.className = "text-center btn btn-primary w-100"
header.onclick = function(){window.open("http://" + miner, '_blank');}
header.innerHTML += miner
column.append(header)
// create install stdout
var row_text = document.createElement('div');
row_text.className = "row p-3"
row_text.id = miner + "-stdout"
// create text area for data
var text_area = document.createElement('textarea');
text_area.id = miner + "-stdout_text"
text_area.rows = "15"
text_area.className = "form-control"
text_area.style = "font-size: 12px"
text_area.disabled = true
text_area.readonly = true
row_text.append(text_area)
column.append(row_text)
// create hr and temp canvas
var hr_canvas = document.createElement('canvas');
hr_canvas.width = 125
hr_canvas.height = 125
hr_canvas.id = miner + "-hr"
var temp_canvas = document.createElement('canvas');
temp_canvas.width = 125
temp_canvas.height = 125
temp_canvas.id = miner + "-temp"
// create fan 1 title
var fan_1_title = document.createElement('p');
fan_1_title.innerHTML += "Fan L: 0 RPM";
fan_1_title.className = "text-center"
fan_1_title.id = miner + "-fan_l"
// create fan 2 title
var fan_2_title = document.createElement('p');
fan_2_title.innerHTML += "Fan R: 0 RPM";
fan_2_title.className = "text-center"
fan_2_title.id = miner + "-fan_r"
// create fan 1 canvas
var fan_1_canvas = document.createElement('canvas');
fan_1_canvas.width = 100
fan_1_canvas.height = 100
fan_1_canvas.id = miner + "-fan-1"
// create fan 2 canvas
var fan_2_canvas = document.createElement('canvas');
fan_2_canvas.width = 100
fan_2_canvas.height = 100
fan_2_canvas.id = miner + "-fan-2"
// create row for hr and temp data
var row_hr = document.createElement('div');
row_hr.className = "row"
// create row for titles of fans
var row_fan_title = document.createElement('div');
row_fan_title.className = "row"
// create row for fan graphs
var row_fan = document.createElement('div');
row_fan.className = "row"
// create hr container
var container_col_hr = document.createElement('div');
container_col_hr.className = "col w-50 ps-0 pe-4"
// create temp container
var container_col_temp = document.createElement('div');
container_col_temp.className = "col w-50 ps-0 pe-4"
// create fan title 1 container
var container_col_title_fan_1 = document.createElement('div');
container_col_title_fan_1.className = "col"
// create fan title 2 container
var container_col_title_fan_2 = document.createElement('div');
container_col_title_fan_2.className = "col"
// create fan 1 data container
var container_col_fan_1 = document.createElement('div');
container_col_fan_1.className = "col w-50 ps-3 pe-1"
// create fan 2 data container
var container_col_fan_2 = document.createElement('div');
container_col_fan_2.className = "col w-50 ps-3 pe-1"
// append canvases to the appropriate container columns
container_col_hr.append(hr_canvas)
container_col_temp.append(temp_canvas)
container_col_title_fan_1.append(fan_1_title)
container_col_title_fan_2.append(fan_2_title)
container_col_fan_1.append(fan_1_canvas)
container_col_fan_2.append(fan_2_canvas)
// add container columns to the correct rows
row_hr.append(container_col_hr)
row_hr.append(container_col_temp)
row_fan_title.append(container_col_title_fan_1)
row_fan_title.append(container_col_title_fan_2)
row_fan.append(container_col_fan_1)
row_fan.append(container_col_fan_2)
// create miner graph container
var miner_graphs = document.createElement('div');
miner_graphs.id = miner + "-graphs"
miner_graphs.hidden = true
// append the rows to the column
miner_graphs.append(row_hr)
miner_graphs.append(row_fan_title)
miner_graphs.append(row_fan)
column.append(miner_graphs)
// create light button container
var container_light = document.createElement('div');
container_light.className = "form-check form-switch d-flex justify-content-evenly"
// create light button
var light_switch = document.createElement('input');
light_switch.type = "checkbox"
light_switch.id = miner + "-light"
light_switch.className = "form-check-input"
// add a light label to the button
var label_light = document.createElement("label");
label_light.setAttribute("for", "light_" + miner.IP);
label_light.innerHTML = "Light";
// add the button and label to the container
container_light.append(label_light)
container_light.append(light_switch)
column.append(container_light)
container_all.append(column)
var chart_hr = new Chart(hr_canvas, {
type: "bar",
data: {
labels: ["Hashrate"],
datasets: [],
},
options: options_hr
});
var chart_temp = new Chart(temp_canvas, {
type: "bar",
data: {
labels: ["Temps"],
datasets: [],
},
options: options_temp,
});
var chart_fan_1 = new Chart(fan_1_canvas, {
type: "doughnut",
data: {
labels: ["Fan L"],
datasets: [
{
data: [],
// add colors
backgroundColor: [
"rgba(103, 0, 221, 1)",
"rgba(199, 199, 199, 1)"
]
},
]
},
options: options_fans
});
// create the fan 2 chart
var chart_fan_2 = new Chart(fan_2_canvas, {
type: "doughnut",
data: {
labels: ["Fan R"],
datasets: [
{
data: [],
backgroundColor: [
"rgba(103, 0, 221, 1)",
"rgba(199, 199, 199, 1)"
]
},
]
},
options: options_fans
});
});
}
else if (data.hasOwnProperty("HR")) {
var miner_stdout = document.getElementById(data["IP"] + "-stdout")
miner_stdout.hidden = true
var miner_graphs = document.getElementById(data["IP"] + "-graphs")
miner_graphs.hidden = false
var hr_graph = Chart.getChart(data["IP"] + "-hr")
var temp_graph = Chart.getChart(data["IP"] + "-temp")
var fan_1_graph = Chart.getChart(data["IP"] + "-fan-1")
var fan_2_graph = Chart.getChart(data["IP"] + "-fan-2")
// update hr graph data and call the Update method
var hr_data = []
hr_data.push({label: "Board 6", data: [data["HR"]["board_6"]["HR"]], backgroundColor: ["rgba(0, 19, 97, 1)"]});
hr_data.push({label: "Board 7", data: [data["HR"]["board_7"]["HR"]], backgroundColor: ["rgba(0, 84, 219, 1)"]});
hr_data.push({label: "Board 8", data: [data["HR"]["board_8"]["HR"]], backgroundColor: ["rgba(36, 180, 224, 1)"]});
hr_graph.data.datasets = hr_data;
hr_graph.update();
// update temp graph data and call the Update method
var temp_data = []
temp_data.push({label: "Board 6 Chips", data: [data["Temps"]["board_6"]["Chip"]], backgroundColor: ["rgba(6, 92, 39, 1)"]});
temp_data.push({label: "Board 6", data: [data["Temps"]["board_6"]["Board"]], backgroundColor: ["rgba(255, 15, 58, 1)"]});
temp_data.push({label: "Board 7 Chips", data: [data["Temps"]["board_7"]["Chip"]], backgroundColor: ["rgba(6, 92, 39, 1)"]});
temp_data.push({label: "Board 7", data: [data["Temps"]["board_7"]["Board"]], backgroundColor: ["rgba(255, 15, 58, 1)"]});
temp_data.push({label: "Board 8 Chips", data: [data["Temps"]["board_8"]["Chip"]], backgroundColor: ["rgba(6, 92, 39, 1)"]});
temp_data.push({label: "Board 8", data: [data["Temps"]["board_8"]["Board"]], backgroundColor: ["rgba(255, 15, 58, 1)"]});
temp_graph.data.datasets = temp_data;
temp_graph.update();
// update fan 1 graph data and call the Update method
var fan_1_rpm = data["Fans"]["fan_0"]["RPM"]
var fan_1_title = document.getElementById(data["IP"] + "-fan_l");
fan_1_title.innerHTML = "Fan L: " + fan_1_rpm + " RPM";
if (fan_1_rpm == 0){
var secondary_col_1 = "rgba(97, 4, 4, 1)"
} else {
var secondary_col_1 = "rgba(199, 199, 199, 1)"
}
var fan_1_data = [{label: "Fan Speed", data: [fan_1_rpm, 6000-fan_1_rpm], backgroundColor: ["rgba(103, 0, 221, 1)", secondary_col_1]}]
fan_1_graph.data.datasets = fan_1_data;
fan_1_graph.update();
// update fan 2 graph data and call the Update method
var fan_2_rpm = data["Fans"]["fan_1"]["RPM"]
var fan_2_title = document.getElementById(data["IP"] + "-fan_r");
fan_2_title.innerHTML = "Fan R: " + fan_2_rpm + " RPM";
if (fan_2_rpm == 0){
var secondary_col_2 = "rgba(97, 4, 4, 1)"
} else {
var secondary_col_2 = "rgba(199, 199, 199, 1)"
}
var fan_2_data = [{label: "Fan Speed", data: [fan_2_rpm, 6000-fan_2_rpm], backgroundColor: ["rgba(103, 0, 221, 1)", secondary_col_2]}]
fan_2_graph.data.datasets = fan_2_data;
fan_2_graph.update();
} else {
var miner_graphs = document.getElementById(data["IP"] + "-graphs")
miner_graphs.hidden = true
var miner_stdout = document.getElementById(data["IP"] + "-stdout_text")
miner_stdout.hidden = false
miner_stdout.innerHTML = data["text"] + miner_stdout.innerHTML
};
if (data.hasOwnProperty("Light")) {
if (data["Light"] == "show") {
} else {
}
};
function lightMiner(ip, checkbox) {
// if the checkbox is checked turn the light on, otherwise off
if (checkbox.checked){
ws.send(JSON.stringify({"IP": ip, "Data": "light"}))
} else if (!(checkbox.check)) {
ws.send(JSON.stringify({"IP": ip, "Data": "unlight"}))
}
};
ws.onmessage = function(event) {
var data = JSON.parse(event.data)
if (data.hasOwnProperty("miners")) {
var container_all = document.getElementById('chart_container');
container_all.innerHTML = ""
data["miners"].forEach(function(miner) {
// create column with ID being the IP for later use
var column = document.createElement('div');
column.className = "col border border-dark p-3"
column.id = miner["IP"]
// create IP address header
var header = document.createElement('button');
header.className = "text-center btn btn-primary w-100"
header.onclick = function(){window.open("http://" + miner["IP"], '_blank');}
header.innerHTML += miner["IP"]
column.append(header)
// create install stdout
var row_text = document.createElement('div');
row_text.className = "row p-3"
row_text.id = miner["IP"] + "-stdout"
// create text area for data
var text_area = document.createElement('textarea');
text_area.id = miner["IP"] + "-stdout_text"
text_area.rows = "15"
text_area.className = "form-control"
text_area.style = "font-size: 12px"
text_area.disabled = true
text_area.readonly = true
row_text.append(text_area)
column.append(row_text)
// create hr and temp canvas
var hr_canvas = document.createElement('canvas');
hr_canvas.width = 125
hr_canvas.height = 125
hr_canvas.id = miner["IP"] + "-hr"
var temp_canvas = document.createElement('canvas');
temp_canvas.width = 125
temp_canvas.height = 125
temp_canvas.id = miner["IP"] + "-temp"
// create fan 1 title
var fan_1_title = document.createElement('p');
fan_1_title.innerHTML += "Fan L: 0 RPM";
fan_1_title.className = "text-center"
fan_1_title.id = miner["IP"] + "-fan_l"
// create fan 2 title
var fan_2_title = document.createElement('p');
fan_2_title.innerHTML += "Fan R: 0 RPM";
fan_2_title.className = "text-center"
fan_2_title.id = miner["IP"] + "-fan_r"
// create fan 1 canvas
var fan_1_canvas = document.createElement('canvas');
fan_1_canvas.width = 100
fan_1_canvas.height = 100
fan_1_canvas.id = miner["IP"] + "-fan-1"
// create fan 2 canvas
var fan_2_canvas = document.createElement('canvas');
fan_2_canvas.width = 100
fan_2_canvas.height = 100
fan_2_canvas.id = miner["IP"] + "-fan-2"
// create row for hr and temp data
var row_hr = document.createElement('div');
row_hr.className = "row"
// create row for titles of fans
var row_fan_title = document.createElement('div');
row_fan_title.className = "row"
// create row for fan graphs
var row_fan = document.createElement('div');
row_fan.className = "row mb-4"
// create hr container
var container_col_hr = document.createElement('div');
container_col_hr.className = "col w-50 ps-0 pe-4"
// create temp container
var container_col_temp = document.createElement('div');
container_col_temp.className = "col w-50 ps-0 pe-4"
// create fan title 1 container
var container_col_title_fan_1 = document.createElement('div');
container_col_title_fan_1.className = "col"
// create fan title 2 container
var container_col_title_fan_2 = document.createElement('div');
container_col_title_fan_2.className = "col"
// create fan 1 data container
var container_col_fan_1 = document.createElement('div');
container_col_fan_1.className = "col w-50 ps-3 pe-1"
// create fan 2 data container
var container_col_fan_2 = document.createElement('div');
container_col_fan_2.className = "col w-50 ps-3 pe-1"
// append canvases to the appropriate container columns
container_col_hr.append(hr_canvas)
container_col_temp.append(temp_canvas)
container_col_title_fan_1.append(fan_1_title)
container_col_title_fan_2.append(fan_2_title)
container_col_fan_1.append(fan_1_canvas)
container_col_fan_2.append(fan_2_canvas)
// add container columns to the correct rows
row_hr.append(container_col_hr)
row_hr.append(container_col_temp)
row_fan_title.append(container_col_title_fan_1)
row_fan_title.append(container_col_title_fan_2)
row_fan.append(container_col_fan_1)
row_fan.append(container_col_fan_2)
// create miner graph container
var miner_graphs = document.createElement('div');
miner_graphs.id = miner["IP"] + "-graphs"
miner_graphs.hidden = true
// append the rows to the column
miner_graphs.append(row_hr)
miner_graphs.append(row_fan_title)
miner_graphs.append(row_fan)
column.append(miner_graphs)
// create light button container
var container_light = document.createElement('div');
container_light.className = "form-check form-switch d-flex justify-content-evenly"
container_light.id = miner["IP"] + "-light_container"
// create light button
var light_switch = document.createElement('input');
light_switch.type = "checkbox"
if (miner["Light_On"] == true) {
light_switch.checked = true
}
light_switch.id = miner["IP"] + "-light"
light_switch.className = "form-check-input"
light_switch.addEventListener("click", function(){lightMiner(miner, light_switch);}, false);
// add a light label to the button
var label_light = document.createElement("label");
label_light.setAttribute("for", miner["IP"] + "-light");
label_light.innerHTML = "Light";
// add the button and label to the container
container_light.append(light_switch)
container_light.append(label_light)
column.append(container_light)
container_all.append(column)
var chart_hr = new Chart(hr_canvas, {
type: "bar",
data: {
labels: ["Hashrate"],
datasets: [],
},
options: options_hr
});
var chart_temp = new Chart(temp_canvas, {
type: "bar",
data: {
labels: ["Temps"],
datasets: [],
},
options: options_temp,
});
var chart_fan_1 = new Chart(fan_1_canvas, {
type: "doughnut",
data: {
labels: ["Fan L"],
datasets: [
{
data: [],
// add colors
backgroundColor: [
"rgba(103, 0, 221, 1)",
"rgba(199, 199, 199, 1)"
]
},
]
},
options: options_fans
});
// create the fan 2 chart
var chart_fan_2 = new Chart(fan_2_canvas, {
type: "doughnut",
data: {
labels: ["Fan R"],
datasets: [
{
data: [],
backgroundColor: [
"rgba(103, 0, 221, 1)",
"rgba(199, 199, 199, 1)"
]
},
]
},
options: options_fans
});
});
}
else if (data.hasOwnProperty("HR")) {
var miner_stdout = document.getElementById(data["IP"] + "-stdout")
miner_stdout.hidden = true
var miner_graphs = document.getElementById(data["IP"] + "-graphs")
miner_graphs.hidden = false
var hr_graph = Chart.getChart(data["IP"] + "-hr")
var temp_graph = Chart.getChart(data["IP"] + "-temp")
var fan_1_graph = Chart.getChart(data["IP"] + "-fan-1")
var fan_2_graph = Chart.getChart(data["IP"] + "-fan-2")
// update hr graph data and call the Update method
var hr_data = []
hr_data.push({label: "Board 6", data: [data["HR"]["board_6"]["HR"]], backgroundColor: ["rgba(0, 19, 97, 1)"]});
hr_data.push({label: "Board 7", data: [data["HR"]["board_7"]["HR"]], backgroundColor: ["rgba(0, 84, 219, 1)"]});
hr_data.push({label: "Board 8", data: [data["HR"]["board_8"]["HR"]], backgroundColor: ["rgba(36, 180, 224, 1)"]});
hr_graph.data.datasets = hr_data;
hr_graph.update();
// update temp graph data and call the Update method
var temp_data = []
temp_data.push({label: "Board 6 Chips", data: [data["Temps"]["board_6"]["Chip"]], backgroundColor: ["rgba(6, 92, 39, 1)"]});
temp_data.push({label: "Board 6", data: [data["Temps"]["board_6"]["Board"]], backgroundColor: ["rgba(255, 15, 58, 1)"]});
temp_data.push({label: "Board 7 Chips", data: [data["Temps"]["board_7"]["Chip"]], backgroundColor: ["rgba(6, 92, 39, 1)"]});
temp_data.push({label: "Board 7", data: [data["Temps"]["board_7"]["Board"]], backgroundColor: ["rgba(255, 15, 58, 1)"]});
temp_data.push({label: "Board 8 Chips", data: [data["Temps"]["board_8"]["Chip"]], backgroundColor: ["rgba(6, 92, 39, 1)"]});
temp_data.push({label: "Board 8", data: [data["Temps"]["board_8"]["Board"]], backgroundColor: ["rgba(255, 15, 58, 1)"]});
temp_graph.data.datasets = temp_data;
temp_graph.update();
// update fan 1 graph data and call the Update method
var fan_1_rpm = data["Fans"]["fan_0"]["RPM"]
var fan_1_title = document.getElementById(data["IP"] + "-fan_l");
fan_1_title.innerHTML = "Fan L: " + fan_1_rpm + " RPM";
if (fan_1_rpm == 0){
var secondary_col_1 = "rgba(97, 4, 4, 1)"
} else {
var secondary_col_1 = "rgba(199, 199, 199, 1)"
}
var fan_1_data = [{label: "Fan Speed", data: [fan_1_rpm, 6000-fan_1_rpm], backgroundColor: ["rgba(103, 0, 221, 1)", secondary_col_1]}]
fan_1_graph.data.datasets = fan_1_data;
fan_1_graph.update();
// update fan 2 graph data and call the Update method
var fan_2_rpm = data["Fans"]["fan_1"]["RPM"]
var fan_2_title = document.getElementById(data["IP"] + "-fan_r");
fan_2_title.innerHTML = "Fan R: " + fan_2_rpm + " RPM";
if (fan_2_rpm == 0){
var secondary_col_2 = "rgba(97, 4, 4, 1)"
} else {
var secondary_col_2 = "rgba(199, 199, 199, 1)"
}
var fan_2_data = [{label: "Fan Speed", data: [fan_2_rpm, 6000-fan_2_rpm], backgroundColor: ["rgba(103, 0, 221, 1)", secondary_col_2]}]
fan_2_graph.data.datasets = fan_2_data;
fan_2_graph.update();
} else {
var miner_graphs = document.getElementById(data["IP"] + "-graphs")
miner_graphs.hidden = true
var miner_stdout = document.getElementById(data["IP"] + "-stdout_text")
miner_stdout.hidden = false
miner_stdout.innerHTML = data["text"] + miner_stdout.innerHTML
};
if (data.hasOwnProperty("Light")) {
light_box = document.getElementById(data["IP"] + "-light_container")
if (data["Light"] == "show") {
light_box.hidden = false
} else {
light_box.hidden = true
}
};
}
</script>