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

add the start of a temperature graph to miner page

Browse Source
This commit is contained in:
UpstreamData
2022-03-21 09:39:54 -06:00
parent 4038dae446
commit e267073f76
3 changed files with 93 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

92
tools/web_monitor/templates/miner.html
View File

@@ -37,9 +37,27 @@
<div class="row">
<div class="col-12 line_chart">
<canvas id="line-chart" class="grad-border mt-3" width="600" height="200"></canvas>
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active text-dark" id="hashrate-tab" data-bs-toggle="tab" data-bs-target="#hashrate" type="button" role="tab" aria-controls="hashrate" aria-selected="true">Hashrate</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link text-dark" id="temp-tab" data-bs-toggle="tab" data-bs-target="#temp" type="button" role="tab" aria-controls="temp" aria-selected="false">Temperature</button>
</li>
</ul>
<div class="tab-content" id="hashrateTempTabs">
<div class="tab-pane fade show active" id="hashrate" role="tabpanel" aria-labelledby="hashrate-tab">
<div class="col-12 line_chart">
<canvas id="hr-chart" class="grad-border mt-3" width="600" height="200"></canvas>
</div>
</div>
<div class="tab-pane fade" id="temp" role="tabpanel" aria-labelledby="temp-tab">
<div class="col-12 line_chart">
<canvas id="temp-chart" class="grad-border mt-3" width="600" height="200"></canvas>
</div>
</div>
</div>
<div class="col-3">
<div class="d-flex justify-content-center text-nowrap" id="fan1">Fan 1</div>
<canvas class="mb-2" id="fan-chart-1" width="100" height="100"></canvas>
@@ -86,7 +104,7 @@ ws.onmessage = function(event) {
var miner_hr = document.getElementById("minerHashrate")
miner_hr.innerHTML = "?"
} else {
var chart = document.getElementById("line-chart")
var chart = document.getElementById("hr-chart")
var err_container = document.getElementById("errorContainer")
if (!err_container.classList.hasOwnProperty("invisible")) {
err_container.classList.add("invisible")
@@ -116,8 +134,8 @@ ws.onmessage = function(event) {
};
};
var ctx = document.getElementById("line-chart").getContext("2d");
var width = document.getElementById("line-chart").width;
var ctx = document.getElementById("hr-chart").getContext("2d");
var width = document.getElementById("hr-chart").width;
var chartGradient = ctx.createLinearGradient(0, 0, width, 0)
chartGradient.addColorStop(0, '#D0368A');
chartGradient.addColorStop(1, '#708AD4');
@@ -134,7 +152,7 @@ const chartAreaBorder = {
}
};
var minerDataChart = new Chart(document.getElementById("line-chart"), {
var minerDataChart = new Chart(document.getElementById("hr-chart"), {
type: 'line',
data: {
labels: [
@@ -196,6 +214,68 @@ var minerDataChart = new Chart(document.getElementById("line-chart"), {
}
});
var minerTempChart = new Chart(document.getElementById("temp-chart"), {
type: 'line',
data: {
labels: [
],
datasets: [{
label: "Temperature",
borderColor: chartGradient,
pointBorderColor: chartGradient,
pointBackgroundColor: chartGradient,
pointHoverBackgroundColor: chartGradient,
pointHoverBorderColor: chartGradient,
data: [
],
}
]
},
plugins: [chartAreaBorder],
options: {
animation: {
easing: 'easeInSine',
duration: 0
},
plugins: {
chartAreaBorder: {
borderColor: chartGradient,
borderWidth: 1
},
legend: {
labels: {
color: chartGradient
}
},
tooltip: {
callbacks: {
label: function(data) {
return data.dataset.data[data.dataIndex] + " °C";
}
}
}
},
scales: {
y: {
min: 0, // minimum value
suggestedMax: 100,
stepSize: 5,
ticks: {
callback: function(value, index, ticks) {
return value + " °C";
}
}
},
x: {
ticks: {
maxTicksLimit: 6,
maxRotation: 0
}
}
}
}
});
var options_fans = {
animation: {
easing: 'easeInSine',

10
tools/web_monitor/templates/navbar.html
View File

@@ -53,27 +53,27 @@
<div class="position-sticky pt-3">
<ul class="nav nav-pills flex-column">
<li class="nav-item mb-1 mx-2">
<a href="/dashboard" class="nav-link {% if request.path.strip('/') == 'dashboard' %}active{% else %}text-white{% endif %}">
<a href="/dashboard" class="nav-link navbar-link {% if request.path.strip('/') == 'dashboard' %}active{% else %}text-white{% endif %}">
<svg class="bi me-2" width="16" height="16"><use xlink:href="#dashboard"></use></svg>
Dashboard
</a>
</li>
<li class="nav-item mb-1 mx-2">
<a href="" class="nav-link {% if request.path.strip('/') == 'scan' or request.path.split('/')[1] == 'miner' %}active{% else %}text-white{% endif %}" data-bs-toggle="collapse" data-bs-target="#miners-collapse" aria-expanded="false">
<a href="" class="nav-link navbar-link {% if request.path.strip('/') == 'scan' or request.path.split('/')[1] == 'miner' %}active{% else %}text-white{% endif %}" data-bs-toggle="collapse" data-bs-target="#miners-collapse" aria-expanded="false">
<svg class="bi me-2" width="16" height="16"><use xlink:href="#miners"></use></svg>
Miners
</a>
<div class="collapse mt-1" id="miners-collapse" style="">
<ul id="navMiners" class="btn-toggle-nav overflow-auto list-unstyled fw-normal pb-1 small">
<li>
<a href="/scan" class="nav-link {% if request.path.strip('/') == 'scan' %}active{% else %}text-white{% endif %}">
<a href="/scan" class="nav-link navbar-link {% if request.path.strip('/') == 'scan' %}active{% else %}text-white{% endif %}">
<svg class="bi me-2 mt-1" width="16" height="16"><use xlink:href="#scan"></use></svg>
Add Miners
</a>
</li>
{% for miner in cur_miners %}
<li>
<a href="/miner/{{miner}}" class="nav-link {% if request.path.strip('/') == 'miner/' + miner %}active{% else %}text-white{% endif %}">
<a href="/miner/{{miner}}" class="nav-link navbar-link {% if request.path.strip('/') == 'miner/' + miner %}active{% else %}text-white{% endif %}">
<svg class="bi me-2 mt-1" width="16" height="16"><use xlink:href="#miner"></use></svg>
{{miner}}
</a>
@@ -87,7 +87,7 @@
<li class="border-top my-3"></li>
<li class="nav-item mb-1 mx-2">
<a href="/settings" class="nav-link {% if request.path.strip('/') == 'settings' %}active{% else %}text-white{% endif %}">
<a href="/settings" class="nav-link navbar-link {% if request.path.strip('/') == 'settings' %}active{% else %}text-white{% endif %}">
<svg class="bi me-2" width="16" height="16"><use xlink:href="#settings"></use></svg>
Settings
</a>