jens/brewpi
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add soll temperature marker to thermometer

Browse Source 
Orange tick and label on the left side of the tube, dynamically
positioned via plotTempSoll updated from TempCtrl Soll messages.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01DGKe8JzTM2Gr1fdx9wYXTi
This commit is contained in:
jens
2026-06-26 22:31:20 +02:00
co-authored by Claude Sonnet 4.6
parent bc4a11dcb7
commit 6bcf1fda0a
2 changed files with 26 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/app.js
+20 -1
View File
@@ -15,7 +15,8 @@ let ws = null;
let connected = false; let connected = false;
// Live Manual-tab readouts (TempCtrl/Heater/Stirrer channels). // Live Manual-tab readouts (TempCtrl/Heater/Stirrer channels).
let plotTempIst = null; let plotTempIst = null;
let plotTempSoll = null;
let stirrerSpeedIst = 0; let stirrerSpeedIst = 0;
// Only the very first authoritative read after connecting is used to set // Only the very first authoritative read after connecting is used to set
// these particular sliders - thereafter they're purely user-controlled. // these particular sliders - thereafter they're purely user-controlled.
@@ -339,6 +340,22 @@ function updatePotVisualization() {
document.getElementById('thermo-temp-label').textContent = document.getElementById('thermo-temp-label').textContent =
plotTempIst !== null ? plotTempIst.toFixed(1) + ' °C' : '--'; plotTempIst !== null ? plotTempIst.toFixed(1) + ' °C' : '--';
// Soll temperature marker
const sollTick = document.getElementById('thermo-soll-tick');
const sollLabel = document.getElementById('thermo-soll-label');
if (plotTempSoll !== null) {
const sollY = (tubeBottom - Math.max(0, Math.min(100, plotTempSoll)) / 100 * tubeLen).toFixed(1);
sollTick.setAttribute('y1', sollY);
sollTick.setAttribute('y2', sollY);
sollLabel.setAttribute('y', sollY);
sollLabel.textContent = plotTempSoll.toFixed(0) + '°';
sollTick.style.display = '';
sollLabel.style.display = '';
} else {
sollTick.style.display = 'none';
sollLabel.style.display = 'none';
}
// Water fill // Water fill
const waterFillEl = document.getElementById('water-fill'); const waterFillEl = document.getElementById('water-fill');
const waterWaveEl = document.getElementById('water-wave'); const waterWaveEl = document.getElementById('water-wave');
@@ -538,12 +555,14 @@ function onTempCtrlChanged(msg) {
if (key === 'Soll') { if (key === 'Soll') {
const soll = msg.Soll; const soll = msg.Soll;
if ('Temp' in soll) { if ('Temp' in soll) {
plotTempSoll = soll.Temp;
document.getElementById('lcd-temp-soll').textContent = soll.Temp.toFixed(1); document.getElementById('lcd-temp-soll').textContent = soll.Temp.toFixed(1);
if (initialTempSollSync) { if (initialTempSollSync) {
document.getElementById('temp-soll').value = Math.round(soll.Temp); document.getElementById('temp-soll').value = Math.round(soll.Temp);
initialTempSollSync = false; initialTempSollSync = false;
} }
document.getElementById('temp-soll-readout').textContent = document.getElementById('temp-soll').value; document.getElementById('temp-soll-readout').textContent = document.getElementById('temp-soll').value;
updatePotVisualization();
} }
if ('Rate' in soll) { if ('Rate' in soll) {
const rate = soll.Rate; const rate = soll.Rate;
web/index.html
+6
View File
@@ -170,6 +170,12 @@
<rect id="thermo-mercury" x="215" y="174" width="8" height="0" <rect id="thermo-mercury" x="215" y="174" width="8" height="0"
fill="#e0190a" clip-path="url(#tube-clip)"/> fill="#e0190a" clip-path="url(#tube-clip)"/>
<!-- Soll temperature marker (left side, orange, JS-positioned) -->
<line id="thermo-soll-tick" x1="203" y1="174" x2="212" y2="174"
stroke="#ff7043" stroke-width="2" stroke-linecap="round"/>
<text id="thermo-soll-label" x="201" y="174" font-size="9"
fill="#ff7043" text-anchor="end" dominant-baseline="middle"></text>
<!-- Scale ticks --> <!-- Scale ticks -->
<line x1="227" y1="28" x2="236" y2="28" stroke="#9e9e9e" stroke-width="1.5"/> <line x1="227" y1="28" x2="236" y2="28" stroke="#9e9e9e" stroke-width="1.5"/>
<text x="239" y="32" font-size="9" fill="#9e9e9e">100</text> <text x="239" y="32" font-size="9" fill="#9e9e9e">100</text>