conductivity reading update and logging of uvicorn set to warning
This commit is contained in:
parent
9b0daf2d06
commit
81353c8b1f
|
|
@ -132,7 +132,7 @@ class CANBackend:
|
||||||
"MV08": 100 * data[6] / 255,
|
"MV08": 100 * data[6] / 255,
|
||||||
})
|
})
|
||||||
|
|
||||||
elif cob_id == 0x2AB and len(data) >= 7:
|
elif cob_id == 0x2B2 and len(data) >= 7:
|
||||||
self.latest_data[2].update({
|
self.latest_data[2].update({
|
||||||
"PU2_STATE" : data[0],
|
"PU2_STATE" : data[0],
|
||||||
"Conductivity_Feed" : int.from_bytes(data[1:3], 'little') / 100.0,
|
"Conductivity_Feed" : int.from_bytes(data[1:3], 'little') / 100.0,
|
||||||
|
|
|
||||||
9
main.py
9
main.py
|
|
@ -31,7 +31,9 @@ if platform.system() in ["Darwin"]: # macOS or Windows
|
||||||
else:
|
else:
|
||||||
from classCAN import CANBackend # Your real backend
|
from classCAN import CANBackend # Your real backend
|
||||||
|
|
||||||
logging.basicConfig(level=logging.ERROR)
|
logging.basicConfig(level=logging.INFO)
|
||||||
|
|
||||||
|
logging.getLogger("uvicorn.access").setLevel(logging.WARNING)
|
||||||
|
|
||||||
app = FastAPI()
|
app = FastAPI()
|
||||||
app.add_middleware(SessionMiddleware, secret_key="your_super_secret_key")
|
app.add_middleware(SessionMiddleware, secret_key="your_super_secret_key")
|
||||||
|
|
@ -169,10 +171,10 @@ def monitor_page(request: Request):
|
||||||
|
|
||||||
@app.post("/connect_toggle")
|
@app.post("/connect_toggle")
|
||||||
def connect_toggle():
|
def connect_toggle():
|
||||||
logging.info("Toggling CAN connection...")
|
logging.info(f"Toggling CAN connection, CAN is {can_backend.connected}")
|
||||||
print("CONNECTING")
|
|
||||||
if can_backend.connected:
|
if can_backend.connected:
|
||||||
can_backend.shutdown()
|
can_backend.shutdown()
|
||||||
|
logging.info("Shutting down CAN connection...")
|
||||||
return {"connected": False}
|
return {"connected": False}
|
||||||
else:
|
else:
|
||||||
success = can_backend.connect()
|
success = can_backend.connect()
|
||||||
|
|
@ -250,7 +252,6 @@ async def update_latest_data():
|
||||||
|
|
||||||
@app.get("/monitor")
|
@app.get("/monitor")
|
||||||
async def get_monitor_data(pu_number: Optional[float] = Query(None)):
|
async def get_monitor_data(pu_number: Optional[float] = Query(None)):
|
||||||
print(f"pu_number is {pu_number}")
|
|
||||||
if pu_number is not None:
|
if pu_number is not None:
|
||||||
return latest_data.get(f"PU_{pu_number}", {})
|
return latest_data.get(f"PU_{pu_number}", {})
|
||||||
else:
|
else:
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,6 @@
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
|
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
|
@ -17,6 +18,7 @@
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
|
|
||||||
.header {
|
.header {
|
||||||
background-color: #1e1e1e;
|
background-color: #1e1e1e;
|
||||||
padding: 10px 20px;
|
padding: 10px 20px;
|
||||||
|
|
@ -24,6 +26,7 @@
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.connect-button {
|
.connect-button {
|
||||||
background-color: #ff4444;
|
background-color: #ff4444;
|
||||||
color: white;
|
color: white;
|
||||||
|
|
@ -36,9 +39,11 @@
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 10px;
|
gap: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.connected {
|
.connected {
|
||||||
background-color: #00C851;
|
background-color: #00C851;
|
||||||
}
|
}
|
||||||
|
|
||||||
.container {
|
.container {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex: 1;
|
flex: 1;
|
||||||
|
|
@ -46,17 +51,21 @@
|
||||||
overflow-x: hidden;
|
overflow-x: hidden;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
.left-panel, .right-panel {
|
|
||||||
|
.left-panel,
|
||||||
|
.right-panel {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
padding: 20px;
|
padding: 20px;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.left-panel {
|
.left-panel {
|
||||||
background-color: #1e1e1e;
|
background-color: #1e1e1e;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: 10px;
|
gap: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mode-block {
|
.mode-block {
|
||||||
background-color: #333;
|
background-color: #333;
|
||||||
padding: 15px;
|
padding: 15px;
|
||||||
|
|
@ -65,10 +74,12 @@
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: 10px;
|
gap: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pu-buttons {
|
.pu-buttons {
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: 10px;
|
gap: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mode-block button {
|
.mode-block button {
|
||||||
background-color: #4285F4;
|
background-color: #4285F4;
|
||||||
color: white;
|
color: white;
|
||||||
|
|
@ -80,39 +91,49 @@
|
||||||
transition: background-color 0.3s;
|
transition: background-color 0.3s;
|
||||||
flex: 1;
|
flex: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mode-block button:hover {
|
.mode-block button:hover {
|
||||||
background-color: #3367d6;
|
background-color: #3367d6;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mode-block button.active {
|
.mode-block button.active {
|
||||||
background-color: #00C851;
|
background-color: #00C851;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mode-block button.in-progress {
|
.mode-block button.in-progress {
|
||||||
background-color: #ffcc00;
|
background-color: #ffcc00;
|
||||||
color: #000;
|
color: #000;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mode-block button.ready {
|
.mode-block button.ready {
|
||||||
background-color: #00C851;
|
background-color: #00C851;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mode-block button.disabled {
|
.mode-block button.disabled {
|
||||||
background-color: #777;
|
background-color: #777;
|
||||||
cursor: not-allowed;
|
cursor: not-allowed;
|
||||||
}
|
}
|
||||||
|
|
||||||
.in-progress {
|
.in-progress {
|
||||||
background-color: yellow !important;
|
background-color: yellow !important;
|
||||||
color: black !important;
|
color: black !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ready {
|
.ready {
|
||||||
background-color: orange !important;
|
background-color: orange !important;
|
||||||
color: black !important;
|
color: black !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.production {
|
.production {
|
||||||
background-color: green !important;
|
background-color: green !important;
|
||||||
color: white !important;
|
color: white !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pu-status {
|
.pu-status {
|
||||||
margin-top: 20px;
|
margin-top: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pu-item {
|
.pu-item {
|
||||||
background-color: #333;
|
background-color: #333;
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
|
|
@ -122,24 +143,28 @@
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.monitor-block {
|
.monitor-block {
|
||||||
background-color: #333;
|
background-color: #333;
|
||||||
padding: 15px;
|
padding: 15px;
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
margin-bottom: 15px;
|
margin-bottom: 15px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.monitor-values {
|
.monitor-values {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: repeat(3, 1fr);
|
grid-template-columns: repeat(3, 1fr);
|
||||||
gap: 10px;
|
gap: 10px;
|
||||||
margin-top: 10px;
|
margin-top: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.monitor-value {
|
.monitor-value {
|
||||||
background-color: #444;
|
background-color: #444;
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.slider-container {
|
.slider-container {
|
||||||
background-color: #1e1e1e;
|
background-color: #1e1e1e;
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
|
|
@ -147,12 +172,14 @@
|
||||||
color: #fff;
|
color: #fff;
|
||||||
width: 95%;
|
width: 95%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.slider-container label {
|
.slider-container label {
|
||||||
font-size: 1.2rem;
|
font-size: 1.2rem;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
.slider-values {
|
.slider-values {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
|
|
@ -161,10 +188,12 @@
|
||||||
width: 100%;
|
width: 100%;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
.slider-values span#currentValue {
|
.slider-values span#currentValue {
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
color: #00bfff;
|
color: #00bfff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.slider {
|
.slider {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 8px;
|
height: 8px;
|
||||||
|
|
@ -174,13 +203,16 @@
|
||||||
appearance: none;
|
appearance: none;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
.slider::-webkit-slider-thumb, .slider::-moz-range-thumb {
|
|
||||||
|
.slider::-webkit-slider-thumb,
|
||||||
|
.slider::-moz-range-thumb {
|
||||||
height: 18px;
|
height: 18px;
|
||||||
width: 18px;
|
width: 18px;
|
||||||
background: #007bff;
|
background: #007bff;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
.monitor-link {
|
.monitor-link {
|
||||||
color: white;
|
color: white;
|
||||||
background-color: #007bff;
|
background-color: #007bff;
|
||||||
|
|
@ -189,14 +221,17 @@
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
|
|
||||||
.monitor-link:hover {
|
.monitor-link:hover {
|
||||||
background-color: #0056b3;
|
background-color: #0056b3;
|
||||||
}
|
}
|
||||||
|
|
||||||
.monitor-pu-buttons {
|
.monitor-pu-buttons {
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: 10px;
|
gap: 10px;
|
||||||
margin: 10px;
|
margin: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.monitor-pu-buttons a {
|
.monitor-pu-buttons a {
|
||||||
color: white;
|
color: white;
|
||||||
background-color: #007bff;
|
background-color: #007bff;
|
||||||
|
|
@ -205,287 +240,303 @@
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
|
|
||||||
.monitor-pu-buttons a:hover {
|
.monitor-pu-buttons a:hover {
|
||||||
background-color: #0056b3;
|
background-color: #0056b3;
|
||||||
}
|
}
|
||||||
|
|
||||||
.button-group {
|
.button-group {
|
||||||
margin-top: 10px;
|
margin-top: 10px;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-around;
|
justify-content: space-around;
|
||||||
}
|
}
|
||||||
|
|
||||||
.button-group button {
|
.button-group button {
|
||||||
padding: 8px 16px;
|
padding: 8px 16px;
|
||||||
font-size: 1rem;
|
font-size: 1rem;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
background-color: #008CBA;
|
background-color: #008CBA;
|
||||||
color: white;
|
color: white;
|
||||||
border: none;
|
border: none;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
.button-group button:hover {
|
.button-group button:hover {
|
||||||
background-color: #005f6b;
|
background-color: #005f6b;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<div class="header">
|
<div class="header">
|
||||||
<h1>Hydraulic Machine Control</h1>
|
<h1>Hydraulic Machine Control</h1>
|
||||||
<div class="monitor-pu-buttons">
|
<div class="monitor-pu-buttons">
|
||||||
<!-- New multi-monitor button -->
|
<!-- New multi-monitor button -->
|
||||||
<a href="/multi-monitor-page" target="_blank" class="monitor-link">
|
<a href="/multi-monitor-page" target="_blank" class="monitor-link">
|
||||||
<i class="fas fa-chart-bar"></i> Monitor All PUs
|
<i class="fas fa-chart-bar"></i> Monitor All PUs
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
<a href="/monitor-page?pu_number=1" target="_blank" class="monitor-link">
|
<a href="/monitor-page?pu_number=1" target="_blank" class="monitor-link">
|
||||||
<i class="fas fa-chart-line"></i> Monitor PU 1
|
<i class="fas fa-chart-line"></i> Monitor PU 1
|
||||||
</a>
|
</a>
|
||||||
<a href="/monitor-page?pu_number=2" target="_blank" class="monitor-link">
|
<a href="/monitor-page?pu_number=2" target="_blank" class="monitor-link">
|
||||||
<i class="fas fa-chart-line"></i> Monitor PU 2
|
<i class="fas fa-chart-line"></i> Monitor PU 2
|
||||||
</a>
|
</a>
|
||||||
<a href="/monitor-page?pu_number=3" target="_blank" class="monitor-link">
|
<a href="/monitor-page?pu_number=3" target="_blank" class="monitor-link">
|
||||||
<i class="fas fa-chart-line"></i> Monitor PU 3
|
<i class="fas fa-chart-line"></i> Monitor PU 3
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
<!-- New Record Button -->
|
<!-- New Record Button -->
|
||||||
<button id="recordButton" class="connect-button" onclick="toggleRecording()">
|
<button id="recordButton" class="connect-button" onclick="toggleRecording()">
|
||||||
<i class="fas fa-circle"></i> Start Recording
|
<i class="fas fa-circle"></i> Start Recording
|
||||||
</button>
|
</button>
|
||||||
|
</div>
|
||||||
|
<button id="connectButton" class="connect-button" onclick="toggleConnection()">
|
||||||
|
<i class="fas fa-power-off"></i> Disconnect
|
||||||
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<button id="connectButton" class="connect-button" onclick="toggleConnection()">
|
|
||||||
<i class="fas fa-power-off"></i> Disconnect
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="left-panel">
|
<div class="left-panel">
|
||||||
<div class="mode-block">
|
<div class="mode-block">
|
||||||
<div class="pu-buttons">
|
<div class="pu-buttons">
|
||||||
<button onclick="sendCommand('IDLE', 1, this)" data-action="IDLE" data-pu="1"><i class="fas fa-power-off"></i> IDLE PU 1</button>
|
<button onclick="sendCommand('IDLE', 1, this)" data-action="IDLE" data-pu="1"><i
|
||||||
<button onclick="sendCommand('IDLE', 2, this)" data-action="IDLE" data-pu="2"><i class="fas fa-power-off"></i> IDLE PU 2</button>
|
class="fas fa-power-off"></i> IDLE PU 1</button>
|
||||||
<button onclick="sendCommand('IDLE', 3, this)" data-action="IDLE" data-pu="3"><i class="fas fa-power-off"></i> IDLE PU 3</button>
|
<button onclick="sendCommand('IDLE', 2, this)" data-action="IDLE" data-pu="2"><i
|
||||||
|
class="fas fa-power-off"></i> IDLE PU 2</button>
|
||||||
|
<button onclick="sendCommand('IDLE', 3, this)" data-action="IDLE" data-pu="3"><i
|
||||||
|
class="fas fa-power-off"></i> IDLE PU 3</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="mode-block">
|
||||||
|
<div class="pu-buttons">
|
||||||
|
<button onclick="sendCommand('PRE-PRODUCTION', 1, this)" data-action="PRE-PRODUCTION" data-pu="1"><i
|
||||||
|
class="fas fa-play"></i> PRE-PROD PU 1</button>
|
||||||
|
<button onclick="sendCommand('PRE-PRODUCTION', 2, this)" data-action="PRE-PRODUCTION" data-pu="2"><i
|
||||||
|
class="fas fa-play"></i> PRE-PROD PU 2</button>
|
||||||
|
<button onclick="sendCommand('PRE-PRODUCTION', 3, this)" data-action="PRE-PRODUCTION" data-pu="3"><i
|
||||||
|
class="fas fa-play"></i> PRE-PROD PU 3</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="mode-block">
|
||||||
|
<div class="pu-buttons">
|
||||||
|
<button onclick="sendCommand('FIRST_START', 1, this)" data-action="FIRST_START" data-pu="1"><i
|
||||||
|
class="fas fa-power-off"></i> FIRST START PU 1</button>
|
||||||
|
<button onclick="sendCommand('FIRST_START', 2, this)" data-action="FIRST_START" data-pu="2"><i
|
||||||
|
class="fas fa-power-off"></i> FIRST START PU 2</button>
|
||||||
|
<button onclick="sendCommand('FIRST_START', 3, this)" data-action="FIRST_START" data-pu="3"><i
|
||||||
|
class="fas fa-power-off"></i> FIRST START PU 3</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="slider-container">
|
||||||
|
<label for="ploopSetpoint">P-loop Setpoint (bars):</label>
|
||||||
|
<div class="slider-values">
|
||||||
|
<span id="minValue">0.5</span>
|
||||||
|
<span id="currentValue">2.5</span>
|
||||||
|
<span id="maxValue">3.5</span>
|
||||||
|
</div>
|
||||||
|
<input type="range" min="0.5" max="3.5" step="0.1" value="2.5" id="ploopSetpoint" class="slider"
|
||||||
|
oninput="updatePloopSetpoint(this.value)">
|
||||||
|
</div>
|
||||||
|
<div class="mode-block">
|
||||||
|
<button onclick="sendCommand('ThermalLoopCleaning', 0, this)"><i class="fas fa-fire"></i> Thermal Loop
|
||||||
|
Cleaning</button>
|
||||||
|
</div>
|
||||||
|
<div class="pu-status">
|
||||||
|
<div class="pu-item"><span>PU 1: </span><span id="pu1-status">Offline</span></div>
|
||||||
|
<div class="pu-item"><span>PU 2: </span><span id="pu2-status">Offline</span></div>
|
||||||
|
<div class="pu-item"><span>PU 3: </span><span id="pu3-status">Offline</span></div>
|
||||||
|
</div>
|
||||||
|
<div class="button-group">
|
||||||
|
<button onclick="runAutoTest(1)">Automatic Test PU1</button>
|
||||||
|
<button onclick="runAutoTest(2)">Automatic Test PU2</button>
|
||||||
|
<button onclick="runAutoTest(3)">Automatic Test PU3</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="mode-block">
|
<div class="right-panel">
|
||||||
<div class="pu-buttons">
|
<div class="monitor-block">
|
||||||
<button onclick="sendCommand('PRE-PRODUCTION', 1, this)" data-action="PRE-PRODUCTION" data-pu="1"><i class="fas fa-play"></i> PRE-PROD PU 1</button>
|
<h2><i class="fas fa-tint"></i> Q Perm</h2>
|
||||||
<button onclick="sendCommand('PRE-PRODUCTION', 2, this)" data-action="PRE-PRODUCTION" data-pu="2"><i class="fas fa-play"></i> PRE-PROD PU 2</button>
|
<div class="monitor-values" id="Qperm">
|
||||||
<button onclick="sendCommand('PRE-PRODUCTION', 3, this)" data-action="PRE-PRODUCTION" data-pu="3"><i class="fas fa-play"></i> PRE-PROD PU 3</button>
|
<div class="monitor-value">#1<br>0.0 L/h</div>
|
||||||
|
<div class="monitor-value">#2<br>0.0 L/h</div>
|
||||||
|
<div class="monitor-value">#3<br>0.0 L/h</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div class="monitor-block">
|
||||||
<div class="mode-block">
|
<h2><i class="fas fa-water"></i> P Dilute</h2>
|
||||||
<div class="pu-buttons">
|
<div class="monitor-values" id="Pdilute">
|
||||||
<button onclick="sendCommand('FIRST_START', 1, this)" data-action="FIRST_START" data-pu="1"><i class="fas fa-power-off"></i> FIRST START PU 1</button>
|
<div class="monitor-value">#1<br>0.0 bar</div>
|
||||||
<button onclick="sendCommand('FIRST_START', 2, this)" data-action="FIRST_START" data-pu="2"><i class="fas fa-power-off"></i> FIRST START PU 2</button>
|
<div class="monitor-value">#2<br>0.0 bar</div>
|
||||||
<button onclick="sendCommand('FIRST_START', 3, this)" data-action="FIRST_START" data-pu="3"><i class="fas fa-power-off"></i> FIRST START PU 3</button>
|
<div class="monitor-value">#3<br>0.0 bar</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div class="monitor-block">
|
||||||
<div class="slider-container">
|
<h2><i class="fas fa-bolt"></i> Cdilute</h2>
|
||||||
<label for="ploopSetpoint">P-loop Setpoint (bars):</label>
|
<div class="monitor-values" id="Cdilute">
|
||||||
<div class="slider-values">
|
<div class="monitor-value">#1<br>0.0 µS/cm</div>
|
||||||
<span id="minValue">0.5</span>
|
<div class="monitor-value">#2<br>0.0 µS/cm</div>
|
||||||
<span id="currentValue">2.5</span>
|
<div class="monitor-value">#3<br>0.0 µS/cm</div>
|
||||||
<span id="maxValue">3.5</span>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<input type="range" min="0.5" max="3.5" step="0.1" value="2.5" id="ploopSetpoint" class="slider" oninput="updatePloopSetpoint(this.value)">
|
<div class="monitor-block">
|
||||||
</div>
|
<h2><i class="fas fa-thermometer-half"></i> Pro</h2>
|
||||||
<div class="mode-block">
|
<div class="monitor-values" id="Pro">
|
||||||
<button onclick="sendCommand('ThermalLoopCleaning', 0, this)"><i class="fas fa-fire"></i> Thermal Loop Cleaning</button>
|
<div class="monitor-value">#1<br>0.0 units</div>
|
||||||
</div>
|
<div class="monitor-value">#2<br>0.0 units</div>
|
||||||
<div class="pu-status">
|
<div class="monitor-value">#3<br>0.0 units</div>
|
||||||
<div class="pu-item"><span>PU 1: </span><span id="pu1-status">Offline</span></div>
|
</div>
|
||||||
<div class="pu-item"><span>PU 2: </span><span id="pu2-status">Offline</span></div>
|
|
||||||
<div class="pu-item"><span>PU 3: </span><span id="pu3-status">Offline</span></div>
|
|
||||||
</div>
|
|
||||||
<div class="button-group">
|
|
||||||
<button onclick="runAutoTest(1)">Automatic Test PU1</button>
|
|
||||||
<button onclick="runAutoTest(2)">Automatic Test PU2</button>
|
|
||||||
<button onclick="runAutoTest(3)">Automatic Test PU3</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="right-panel">
|
|
||||||
<div class="monitor-block">
|
|
||||||
<h2><i class="fas fa-tint"></i> Q Perm</h2>
|
|
||||||
<div class="monitor-values" id="Qperm">
|
|
||||||
<div class="monitor-value">#1<br>0.0 L/h</div>
|
|
||||||
<div class="monitor-value">#2<br>0.0 L/h</div>
|
|
||||||
<div class="monitor-value">#3<br>0.0 L/h</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="monitor-block">
|
|
||||||
<h2><i class="fas fa-water"></i> P Dilute</h2>
|
|
||||||
<div class="monitor-values" id="Pdilute">
|
|
||||||
<div class="monitor-value">#1<br>0.0 bar</div>
|
|
||||||
<div class="monitor-value">#2<br>0.0 bar</div>
|
|
||||||
<div class="monitor-value">#3<br>0.0 bar</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="monitor-block">
|
|
||||||
<h2><i class="fas fa-bolt"></i> Cdilute</h2>
|
|
||||||
<div class="monitor-values" id="Cdilute">
|
|
||||||
<div class="monitor-value">#1<br>0.0 µS/cm</div>
|
|
||||||
<div class="monitor-value">#2<br>0.0 µS/cm</div>
|
|
||||||
<div class="monitor-value">#3<br>0.0 µS/cm</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="monitor-block">
|
|
||||||
<h2><i class="fas fa-thermometer-half"></i> Pro</h2>
|
|
||||||
<div class="monitor-values" id="Pro">
|
|
||||||
<div class="monitor-value">#1<br>0.0 units</div>
|
|
||||||
<div class="monitor-value">#2<br>0.0 units</div>
|
|
||||||
<div class="monitor-value">#3<br>0.0 units</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<script>
|
||||||
<script>
|
function updatePloopSetpoint(value) {
|
||||||
function updatePloopSetpoint(value) {
|
document.getElementById('currentValue').textContent = value;
|
||||||
document.getElementById('currentValue').textContent = value;
|
}
|
||||||
}
|
|
||||||
|
|
||||||
async function getConnectionStatus() {
|
async function getConnectionStatus() {
|
||||||
const response = await fetch('/is_connected', { method: 'GET' });
|
const response = await fetch('/is_connected', { method: 'GET' });
|
||||||
const data = await response.json();
|
const data = await response.json();
|
||||||
const connectButton = document.getElementById('connectButton');
|
const connectButton = document.getElementById('connectButton');
|
||||||
if (data.connected) {
|
if (data.connected) {
|
||||||
connectButton.classList.add('connected');
|
connectButton.classList.add('connected');
|
||||||
connectButton.innerHTML = '<i class="fas fa-power-off"></i> Disconnect';
|
connectButton.innerHTML = '<i class="fas fa-power-off"></i> Disconnect';
|
||||||
} else {
|
|
||||||
connectButton.classList.remove('connected');
|
|
||||||
connectButton.innerHTML = '<i class="fas fa-power-off"></i> Connect';
|
|
||||||
}
|
|
||||||
connectButton.innerHTML = `<i class="fas fa-power-off"></i> ${data.connected ? 'Disconnect' : 'Connect'}`;
|
|
||||||
}
|
|
||||||
|
|
||||||
async function toggleConnection() {
|
|
||||||
const response = await fetch('/connect_toggle', { method: 'POST' });
|
|
||||||
const data = await response.json();
|
|
||||||
const connectButton = document.getElementById('connectButton');
|
|
||||||
// connectButton.classList.toggle('connected', data.connected);
|
|
||||||
// connectButton.innerHTML = `<i class="fas fa-power-off"></i> ${data.connected ? 'Disconnect' : 'Connect'}`;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
let isRecording = false;
|
|
||||||
|
|
||||||
async function toggleRecording() {
|
|
||||||
const button = document.getElementById('recordButton');
|
|
||||||
try {
|
|
||||||
if (!isRecording) {
|
|
||||||
await fetch('/start_recording', { method: 'POST' });
|
|
||||||
button.innerHTML = '<i class="fas fa-stop-circle"></i> Stop Recording';
|
|
||||||
button.classList.add('connected'); // Optional: green background
|
|
||||||
} else {
|
} else {
|
||||||
await fetch('/stop_recording', { method: 'POST' });
|
connectButton.classList.remove('connected');
|
||||||
button.innerHTML = '<i class="fas fa-circle"></i> Start Recording';
|
connectButton.innerHTML = '<i class="fas fa-power-off"></i> Connect';
|
||||||
button.classList.remove('connected');
|
|
||||||
}
|
}
|
||||||
isRecording = !isRecording;
|
connectButton.innerHTML = `<i class="fas fa-power-off"></i> ${data.connected ? 'Disconnect' : 'Connect'}`;
|
||||||
} catch (error) {
|
|
||||||
console.error('Recording toggle failed:', error);
|
|
||||||
alert('Failed to toggle recording. Check connection.');
|
|
||||||
}
|
}
|
||||||
}
|
|
||||||
async function sendCommand(state, puNumber, buttonEl) {
|
async function toggleConnection() {
|
||||||
const ploopSetpoint = document.getElementById('ploopSetpoint').value;
|
const response = await fetch('/connect_toggle', { method: 'POST' });
|
||||||
await fetch(`/command/${state}/pu/${puNumber}?ploop_setpoint=${ploopSetpoint}`, {method: 'POST'});
|
const data = await response.json();
|
||||||
document.querySelectorAll('button').forEach(btn => {
|
const connectButton = document.getElementById('connectButton');
|
||||||
btn.classList.remove('in-progress', 'ready', 'production');
|
// connectButton.classList.toggle('connected', data.connected);
|
||||||
});
|
// connectButton.innerHTML = `<i class="fas fa-power-off"></i> ${data.connected ? 'Disconnect' : 'Connect'}`;
|
||||||
if (state === 'PRE-PRODUCTION') {
|
}
|
||||||
buttonEl.classList.add('in-progress');
|
|
||||||
buttonEl.textContent = `Waiting... PU ${puNumber}`;
|
|
||||||
buttonEl.disabled = true;
|
let isRecording = false;
|
||||||
const checkReady = async () => {
|
|
||||||
const res = await fetch(`/api/pu_status`);
|
async function toggleRecording() {
|
||||||
const states = await res.json();
|
const button = document.getElementById('recordButton');
|
||||||
const currentState = states[`PU${puNumber}`];
|
try {
|
||||||
if (currentState === 'SYSTEM_MODE_READY') {
|
if (!isRecording) {
|
||||||
buttonEl.classList.remove('in-progress');
|
await fetch('/start_recording', { method: 'POST' });
|
||||||
buttonEl.classList.add('ready');
|
button.innerHTML = '<i class="fas fa-stop-circle"></i> Stop Recording';
|
||||||
buttonEl.textContent = `START PRODUCTION PU ${puNumber}`;
|
button.classList.add('connected'); // Optional: green background
|
||||||
buttonEl.disabled = false;
|
|
||||||
buttonEl.onclick = async () => {
|
|
||||||
await sendCommand("PRODUCTION", puNumber, buttonEl);
|
|
||||||
buttonEl.classList.remove('ready');
|
|
||||||
buttonEl.classList.add('production');
|
|
||||||
buttonEl.textContent = `PRODUCTION ON PU ${puNumber}`;
|
|
||||||
buttonEl.disabled = true;
|
|
||||||
};
|
|
||||||
} else {
|
} else {
|
||||||
setTimeout(checkReady, 1000);
|
await fetch('/stop_recording', { method: 'POST' });
|
||||||
|
button.innerHTML = '<i class="fas fa-circle"></i> Start Recording';
|
||||||
|
button.classList.remove('connected');
|
||||||
}
|
}
|
||||||
};
|
isRecording = !isRecording;
|
||||||
checkReady();
|
} catch (error) {
|
||||||
} else if (state === 'PRODUCTION') {
|
console.error('Recording toggle failed:', error);
|
||||||
buttonEl.classList.add('production');
|
alert('Failed to toggle recording. Check connection.');
|
||||||
buttonEl.textContent = `PRODUCTION ON PU ${puNumber}`;
|
|
||||||
} else if (state === 'IDLE' || state === 'FIRST_START') {
|
|
||||||
buttonEl.classList.remove('in-progress', 'ready', 'production');
|
|
||||||
buttonEl.classList.add('production');
|
|
||||||
buttonEl.textContent = `${state.replace('_', ' ')} PU ${puNumber}`;
|
|
||||||
const preProdBtn = document.querySelector(`button[data-action="PRE-PRODUCTION"][data-pu="${puNumber}"]`);
|
|
||||||
if (preProdBtn) {
|
|
||||||
preProdBtn.classList.remove('in-progress', 'ready', 'production');
|
|
||||||
preProdBtn.innerHTML = `<i class="fas fa-play"></i> PRE-PROD PU ${puNumber}`;
|
|
||||||
preProdBtn.disabled = false;
|
|
||||||
preProdBtn.onclick = () => sendCommand("PRE-PRODUCTION", puNumber, preProdBtn);
|
|
||||||
}
|
|
||||||
const idleBtn = document.querySelector(`button[data-action="IDLE"][data-pu="${puNumber}"]`);
|
|
||||||
if (idleBtn && idleBtn !== buttonEl) {
|
|
||||||
idleBtn.classList.remove('in-progress', 'ready', 'production');
|
|
||||||
idleBtn.innerHTML = `<i class="fas fa-power-off"></i> IDLE PU ${puNumber}`;
|
|
||||||
idleBtn.disabled = false;
|
|
||||||
idleBtn.onclick = () => sendCommand("IDLE", puNumber, idleBtn);
|
|
||||||
}
|
|
||||||
const firstStartBtn = document.querySelector(`button[data-action="FIRST_START"][data-pu="${puNumber}"]`);
|
|
||||||
if (firstStartBtn && firstStartBtn !== buttonEl) {
|
|
||||||
firstStartBtn.classList.remove('in-progress', 'ready', 'production');
|
|
||||||
firstStartBtn.innerHTML = `<i class="fas fa-power-off"></i> FIRST START PU ${puNumber}`;
|
|
||||||
firstStartBtn.disabled = false;
|
|
||||||
firstStartBtn.onclick = () => sendCommand("FIRST_START", puNumber, firstStartBtn);
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
async function sendCommand(state, puNumber, buttonEl) {
|
||||||
function runAutoTest(puNumber) {
|
const ploopSetpoint = document.getElementById('ploopSetpoint').value;
|
||||||
const endpoint = `/test/auto/${puNumber}`; // Example: /test/auto/1
|
await fetch(`/command/${state}/pu/${puNumber}?ploop_setpoint=${ploopSetpoint}`, { method: 'POST' });
|
||||||
|
document.querySelectorAll('button').forEach(btn => {
|
||||||
fetch(endpoint, {
|
btn.classList.remove('in-progress', 'ready', 'production');
|
||||||
method: 'POST'
|
});
|
||||||
})
|
if (state === 'PRE-PRODUCTION') {
|
||||||
.then(response => {
|
buttonEl.classList.add('in-progress');
|
||||||
if (!response.ok) {
|
buttonEl.textContent = `Waiting... PU ${puNumber}`;
|
||||||
throw new Error(`Test PU${puNumber} failed`);
|
buttonEl.disabled = true;
|
||||||
|
const checkReady = async () => {
|
||||||
|
const res = await fetch(`/api/pu_status`);
|
||||||
|
const states = await res.json();
|
||||||
|
const currentState = states[`PU${puNumber}`];
|
||||||
|
if (currentState === 'SYSTEM_MODE_READY') {
|
||||||
|
buttonEl.classList.remove('in-progress');
|
||||||
|
buttonEl.classList.add('ready');
|
||||||
|
buttonEl.textContent = `START PRODUCTION PU ${puNumber}`;
|
||||||
|
buttonEl.disabled = false;
|
||||||
|
buttonEl.onclick = async () => {
|
||||||
|
await sendCommand("PRODUCTION", puNumber, buttonEl);
|
||||||
|
buttonEl.classList.remove('ready');
|
||||||
|
buttonEl.classList.add('production');
|
||||||
|
buttonEl.textContent = `PRODUCTION ON PU ${puNumber}`;
|
||||||
|
buttonEl.disabled = true;
|
||||||
|
};
|
||||||
|
} else {
|
||||||
|
setTimeout(checkReady, 1000);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
checkReady();
|
||||||
|
} else if (state === 'PRODUCTION') {
|
||||||
|
buttonEl.classList.add('production');
|
||||||
|
buttonEl.textContent = `PRODUCTION ON PU ${puNumber}`;
|
||||||
|
} else if (state === 'IDLE' || state === 'FIRST_START') {
|
||||||
|
buttonEl.classList.remove('in-progress', 'ready', 'production');
|
||||||
|
buttonEl.classList.add('production');
|
||||||
|
buttonEl.textContent = `${state.replace('_', ' ')} PU ${puNumber}`;
|
||||||
|
const preProdBtn = document.querySelector(`button[data-action="PRE-PRODUCTION"][data-pu="${puNumber}"]`);
|
||||||
|
if (preProdBtn) {
|
||||||
|
preProdBtn.classList.remove('in-progress', 'ready', 'production');
|
||||||
|
preProdBtn.innerHTML = `<i class="fas fa-play"></i> PRE-PROD PU ${puNumber}`;
|
||||||
|
preProdBtn.disabled = false;
|
||||||
|
preProdBtn.onclick = () => sendCommand("PRE-PRODUCTION", puNumber, preProdBtn);
|
||||||
|
}
|
||||||
|
const idleBtn = document.querySelector(`button[data-action="IDLE"][data-pu="${puNumber}"]`);
|
||||||
|
if (idleBtn && idleBtn !== buttonEl) {
|
||||||
|
idleBtn.classList.remove('in-progress', 'ready', 'production');
|
||||||
|
idleBtn.innerHTML = `<i class="fas fa-power-off"></i> IDLE PU ${puNumber}`;
|
||||||
|
idleBtn.disabled = false;
|
||||||
|
idleBtn.onclick = () => sendCommand("IDLE", puNumber, idleBtn);
|
||||||
|
}
|
||||||
|
const firstStartBtn = document.querySelector(`button[data-action="FIRST_START"][data-pu="${puNumber}"]`);
|
||||||
|
if (firstStartBtn && firstStartBtn !== buttonEl) {
|
||||||
|
firstStartBtn.classList.remove('in-progress', 'ready', 'production');
|
||||||
|
firstStartBtn.innerHTML = `<i class="fas fa-power-off"></i> FIRST START PU ${puNumber}`;
|
||||||
|
firstStartBtn.disabled = false;
|
||||||
|
firstStartBtn.onclick = () => sendCommand("FIRST_START", puNumber, firstStartBtn);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
return response.json();
|
}
|
||||||
})
|
function runAutoTest(puNumber) {
|
||||||
// .then(data => {
|
const endpoint = `/test/auto/${puNumber}`; // Example: /test/auto/1
|
||||||
// alert(`Automatic Test PU${puNumber} started successfully.`);
|
|
||||||
// console.log(data);
|
|
||||||
// })
|
|
||||||
// .catch(error => {
|
|
||||||
// alert(`Error starting test for PU${puNumber}: ${error.message}`);
|
|
||||||
// console.error(error);
|
|
||||||
// });
|
|
||||||
}
|
|
||||||
|
|
||||||
async function fetchPUStatus() {
|
fetch(endpoint, {
|
||||||
const response = await fetch("/api/pu_status");
|
method: 'POST'
|
||||||
const data = await response.json();
|
})
|
||||||
document.getElementById("pu1-status").textContent = data.PU1 || "Unknown";
|
.then(response => {
|
||||||
document.getElementById("pu2-status").textContent = data.PU2 || "Unknown";
|
if (!response.ok) {
|
||||||
document.getElementById("pu3-status").textContent = data.PU3 || "Unknown";
|
throw new Error(`Test PU${puNumber} failed`);
|
||||||
}
|
}
|
||||||
|
return response.json();
|
||||||
|
})
|
||||||
|
// .then(data => {
|
||||||
|
// alert(`Automatic Test PU${puNumber} started successfully.`);
|
||||||
|
// console.log(data);
|
||||||
|
// })
|
||||||
|
// .catch(error => {
|
||||||
|
// alert(`Error starting test for PU${puNumber}: ${error.message}`);
|
||||||
|
// console.error(error);
|
||||||
|
// });
|
||||||
|
}
|
||||||
|
|
||||||
fetchPUStatus();
|
async function fetchPUStatus() {
|
||||||
setInterval(fetchPUStatus, 5000);
|
const response = await fetch("/api/pu_status");
|
||||||
|
const data = await response.json();
|
||||||
|
document.getElementById("pu1-status").textContent = data.PU1 || "Unknown";
|
||||||
|
document.getElementById("pu2-status").textContent = data.PU2 || "Unknown";
|
||||||
|
document.getElementById("pu3-status").textContent = data.PU3 || "Unknown";
|
||||||
|
}
|
||||||
|
|
||||||
async function updateMonitorData() {
|
fetchPUStatus();
|
||||||
const response = await fetch('/monitor');
|
setInterval(fetchPUStatus, 5000);
|
||||||
const data = await response.json();
|
|
||||||
for (const [puId, puData] of Object.entries(data)) {
|
async function updateMonitorData() {
|
||||||
const container = document.getElementById(puId);
|
const response = await fetch('/monitor');
|
||||||
if (!container) continue;
|
const data = await response.json();
|
||||||
container.innerHTML = `
|
for (const [puId, puData] of Object.entries(data)) {
|
||||||
|
const container = document.getElementById(puId);
|
||||||
|
if (!container) continue;
|
||||||
|
container.innerHTML = `
|
||||||
<h3>${puId}</h3>
|
<h3>${puId}</h3>
|
||||||
<div class="monitor-value">Q_perm<br>${puData.Qperm.toFixed(1)} L/h</div>
|
<div class="monitor-value">Q_perm<br>${puData.Qperm.toFixed(1)} L/h</div>
|
||||||
<div class="monitor-value">Q_dilute<br>${puData.Qdilute.toFixed(1)} L/h</div>
|
<div class="monitor-value">Q_dilute<br>${puData.Qdilute.toFixed(1)} L/h</div>
|
||||||
|
|
@ -496,56 +547,57 @@
|
||||||
<div class="monitor-value">P_retentate<br>${puData.Pretentate.toFixed(1)} bar</div>
|
<div class="monitor-value">P_retentate<br>${puData.Pretentate.toFixed(1)} bar</div>
|
||||||
<div class="monitor-value">Cdilute<br>${puData.Cdilute.toFixed(1)} µS/cm</div>
|
<div class="monitor-value">Cdilute<br>${puData.Cdilute.toFixed(1)} µS/cm</div>
|
||||||
`;
|
`;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
function updateMonitorValues(id, values, unit) {
|
|
||||||
const container = document.getElementById(id);
|
|
||||||
const valueElements = container.querySelectorAll('.monitor-value');
|
|
||||||
valueElements.forEach((element, index) => {
|
|
||||||
if (index < values.length) {
|
|
||||||
element.innerHTML = `#${index + 1}<br>${values[index]} ${unit}`;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
setInterval(updateMonitorData, 1000);
|
|
||||||
async function fetchMonitorData() {
|
|
||||||
try {
|
|
||||||
const puLabels = ["PU_1", "PU_2", "PU_3"];
|
|
||||||
const fields = {
|
|
||||||
"Qperm": "L/h",
|
|
||||||
"Pdilute": "bar",
|
|
||||||
"Cdilute": "µS/cm",
|
|
||||||
"Pro": "bar"
|
|
||||||
};
|
|
||||||
|
|
||||||
const dataResponse = await fetch('/monitor');
|
|
||||||
const allData = await dataResponse.json();
|
|
||||||
|
|
||||||
for (const [fieldId, unit] of Object.entries(fields)) {
|
|
||||||
const container = document.getElementById(fieldId);
|
|
||||||
if (!container) continue;
|
|
||||||
|
|
||||||
|
function updateMonitorValues(id, values, unit) {
|
||||||
|
const container = document.getElementById(id);
|
||||||
const valueElements = container.querySelectorAll('.monitor-value');
|
const valueElements = container.querySelectorAll('.monitor-value');
|
||||||
|
valueElements.forEach((element, index) => {
|
||||||
puLabels.forEach((puLabel, index) => {
|
if (index < values.length) {
|
||||||
const puData = allData[puLabel];
|
element.innerHTML = `#${index + 1}<br>${values[index]} ${unit}`;
|
||||||
const value = puData && fieldId in puData ? puData[fieldId] : 0.0;
|
|
||||||
if (valueElements[index]) {
|
|
||||||
valueElements[index].innerHTML = `#${index + 1}<br>${value.toFixed(1)} ${unit}`;
|
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
} catch (error) {
|
setInterval(updateMonitorData, 1000);
|
||||||
console.error('Error fetching monitor data:', error);
|
async function fetchMonitorData() {
|
||||||
}
|
try {
|
||||||
}
|
const puLabels = ["PU_1", "PU_2", "PU_3"];
|
||||||
|
const fields = {
|
||||||
|
"Qperm": "L/h",
|
||||||
|
"Pdilute": "bar",
|
||||||
|
"Cdilute": "µS/cm",
|
||||||
|
"Pro": "bar"
|
||||||
|
};
|
||||||
|
|
||||||
getConnectionStatus();
|
const dataResponse = await fetch('/monitor');
|
||||||
ssetInterval(getConnectionStatus, 1000);
|
const allData = await dataResponse.json();
|
||||||
|
|
||||||
setInterval(fetchMonitorData, 1000);
|
for (const [fieldId, unit] of Object.entries(fields)) {
|
||||||
fetchMonitorData();
|
const container = document.getElementById(fieldId);
|
||||||
</script>
|
if (!container) continue;
|
||||||
|
|
||||||
|
const valueElements = container.querySelectorAll('.monitor-value');
|
||||||
|
|
||||||
|
puLabels.forEach((puLabel, index) => {
|
||||||
|
const puData = allData[puLabel];
|
||||||
|
const value = puData && fieldId in puData ? puData[fieldId] : 0.0;
|
||||||
|
if (valueElements[index]) {
|
||||||
|
valueElements[index].innerHTML = `#${index + 1}<br>${value.toFixed(1)} ${unit}`;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error fetching monitor data:', error);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
setInterval(getConnectionStatus, 1000);
|
||||||
|
getConnectionStatus();
|
||||||
|
|
||||||
|
setInterval(fetchMonitorData, 1000);
|
||||||
|
fetchMonitorData();
|
||||||
|
</script>
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
Loading…
Reference in New Issue
Block a user