добавил gui

john103C6T6NewVer/app.js

@@ -0,0 +1,1640 @@
+const SENSOR_COUNT = 16;
+const VALVE_COUNT = 32;
+const DEFAULT_OPEN_DEGREES_MAX = 90;
+const CHANNEL_LOCATIONS = [
+  "DUO прав",
+  "DUO лев",
+  "TRIO",
+  "SOLO",
+  "ОСНОВА 7",
+  "ОСНОВА 6",
+  "ОСНОВА 5",
+  "ОСНОВА 4",
+  "ОСНОВА 3",
+  "ОСНОВА 2",
+  "ОСНОВА 1",
+];
+
+function defaultChannelLocation(index) {
+  return CHANNEL_LOCATIONS[index % CHANNEL_LOCATIONS.length];
+}
+
+function makeDefaultSensors() {
+  return Array.from({ length: SENSOR_COUNT }, (_, index) => {
+    const number = index + 1;
+    return {
+      id: `zone_${number}`,
+      name: `Датчик ${number}`,
+      value: 0,
+      setpoint: 28,
+      unit: "°C",
+      zone: String(number),
+      location: defaultChannelLocation(index),
+      ds18b20Id: `28-00-00-00-00-00-00-${number.toString(16).toUpperCase().padStart(2, "0")}`,
+    };
+  });
+}
+
+function makeDefaultValves() {
+  return Array.from({ length: VALVE_COUNT }, (_, index) => {
+    const number = index + 1;
+    const zone = (index % SENSOR_COUNT) + 1;
+    return {
+      id: `valve_${number}`,
+      name: `Клапан ${number}`,
+      zone: String(zone),
+      mode: "auto",
+      position: 0,
+      targetTemp: 28,
+      isOpen: false,
+      openDegrees: 0,
+      openDegreesMax: DEFAULT_OPEN_DEGREES_MAX,
+    };
+  });
+}
+
+const defaultSensors = makeDefaultSensors();
+const defaultValves = makeDefaultValves();
+
+const API_PATHS = {
+  sensorsRead: ["/api/sensors", "/sensors", "/api/data", "/state"],
+  valvesRead: ["/api/valves", "/valves", "/api/data", "/state"],
+  sensorWrite: [
+    (id) => `/api/sensors/${encodeURIComponent(id)}`,
+    (id) => `/sensors/${encodeURIComponent(id)}`,
+    () => "/api/sensors",
+    () => "/sensors",
+  ],
+  valveWrite: [
+    (id) => `/api/valves/${encodeURIComponent(id)}`,
+    (id) => `/valves/${encodeURIComponent(id)}`,
+    () => "/api/valves",
+    () => "/valves",
+  ],
+  valveCalibrate: [
+    (id) => `/api/valves/${encodeURIComponent(id)}/calibrate`,
+    (id) => `/valves/${encodeURIComponent(id)}/calibrate`,
+  ],
+  valvesCalibrateAll: ["/api/valves/calibrate-all", "/api/calibration/all", "/calibration/all"],
+};
+
+const SERIAL_API_PATHS = {
+  ports: [
+    "/api/serial/ports",
+    "/api/ports",
+    "/ports",
+    "/serial/ports",
+    "/status/ports",
+  ],
+  status: [
+    "/api/serial/status",
+    "/api/state",
+    "/state",
+    "/serial/status",
+  ],
+  connect: [
+    "/api/serial/connect",
+    "/api/connect",
+    "/connect",
+    "/serial/connect",
+  ],
+  disconnect: [
+    "/api/serial/disconnect",
+    "/api/disconnect",
+    "/disconnect",
+    "/serial/disconnect",
+  ],
+};
+
+const state = {
+  sensors: [...defaultSensors],
+  valves: [...defaultValves],
+  apiBase: "",
+  timer: null,
+};
+
+let serialConnected = false;
+let selectedPort = "";
+
+const sensorsEl = document.getElementById("sensors");
+const valvesEl = document.getElementById("valves");
+const statusEl = document.getElementById("status");
+const globalStatus = document.getElementById("globalStatus");
+const apiInput = document.getElementById("apiBase");
+const refreshBtn = document.getElementById("refreshBtn");
+const saveApiBtn = document.getElementById("saveApiBtn");
+const refreshPortsBtn = document.getElementById("refreshPortsBtn");
+const connectPortBtn = document.getElementById("connectPortBtn");
+const comPortSelect = document.getElementById("comPortSelect");
+const modbusTransport = document.getElementById("modbusTransport");
+const tcpHost = document.getElementById("tcpHost");
+const tcpPort = document.getElementById("tcpPort");
+const modbusSlaveId = document.getElementById("modbusSlaveId");
+const serialStatus = document.getElementById("serialStatus");
+const calibrateAllBtn = document.getElementById("calibrateAllBtn");
+
+function clamp(value, min, max) {
+  return Math.max(min, Math.min(max, value));
+}
+
+function parseGuiNumber(value, fallback = 0) {
+  const parsed = Number(String(value ?? "").replace(",", "."));
+  return Number.isFinite(parsed) ? parsed : fallback;
+}
+
+function storageGet(name, fallback) {
+  const raw = localStorage.getItem(name);
+  if (!raw) return fallback;
+  try {
+    return JSON.parse(raw);
+  } catch {
+    return fallback;
+  }
+}
+
+function storageSet(name, value) {
+  localStorage.setItem(name, JSON.stringify(value));
+}
+
+function getModbusTransport() {
+  return (modbusTransport?.value || storageGet("modbusTransport", "rtu") || "rtu").toLowerCase();
+}
+
+function applyModbusTransportView() {
+  const transport = getModbusTransport();
+  const isTcp = transport === "tcp";
+
+  document.querySelectorAll(".rtu-field").forEach((element) => {
+    element.classList.toggle("hidden", isTcp);
+  });
+  document.querySelectorAll(".tcp-field").forEach((element) => {
+    element.classList.toggle("hidden", !isTcp);
+  });
+
+  if (refreshPortsBtn) {
+    refreshPortsBtn.disabled = isTcp;
+  }
+  if (serialStatus && !serialConnected) {
+    serialStatus.textContent = isTcp ? "Modbus TCP: не подключен" : "COM: не подключен";
+  }
+}
+
+function initModbusTransportControls() {
+  if (modbusTransport) {
+    modbusTransport.value = storageGet("modbusTransport", "rtu");
+    modbusTransport.addEventListener("change", () => {
+      storageSet("modbusTransport", modbusTransport.value);
+      applyModbusTransportView();
+    });
+  }
+  if (tcpHost) {
+    tcpHost.value = storageGet("tcpHost", tcpHost.value || "192.168.0.10");
+    tcpHost.addEventListener("change", () => storageSet("tcpHost", tcpHost.value.trim()));
+  }
+  if (tcpPort) {
+    tcpPort.value = storageGet("tcpPort", tcpPort.value || "502");
+    tcpPort.addEventListener("change", () => storageSet("tcpPort", tcpPort.value || "502"));
+  }
+  if (modbusSlaveId) {
+    modbusSlaveId.value = storageGet("modbusSlaveId", modbusSlaveId.value || "3");
+    modbusSlaveId.addEventListener("change", () => storageSet("modbusSlaveId", modbusSlaveId.value || "3"));
+  }
+  applyModbusTransportView();
+}
+
+function normalizeApiUrl(value) {
+  const trimmed = (value || "").trim();
+  if (trimmed && !/^[a-z][a-z0-9+.-]*:\/\//i.test(trimmed)) {
+    return normalizeApiUrl(`http://${trimmed}`);
+  }
+  if (trimmed.startsWith("http://") || trimmed.startsWith("https://")) {
+    try {
+      const parsed = new URL(trimmed);
+      return `${parsed.protocol}//${parsed.host}`;
+    } catch {
+      return trimmed.endsWith("/") ? trimmed.slice(0, -1) : trimmed;
+    }
+  }
+  return trimmed.endsWith("/") ? trimmed.slice(0, -1) : trimmed;
+}
+
+function ensureApiBase() {
+  if (state.apiBase) {
+    return state.apiBase;
+  }
+  if (window.location?.protocol?.startsWith("http") && window.location.host) {
+    state.apiBase = `${window.location.protocol}//${window.location.host}`;
+  } else {
+    state.apiBase = "http://127.0.0.1:8080";
+  }
+  if (apiInput) {
+    apiInput.value = state.apiBase;
+  }
+  storageSet("apiBase", state.apiBase);
+  return state.apiBase;
+}
+
+function endpoint(path) {
+  if (!state.apiBase) {
+    throw new Error("demo");
+  }
+  return `${state.apiBase}${path}`;
+}
+
+async function parseResponseBody(response) {
+  const body = await response.text();
+  if (!body) {
+    return {};
+  }
+  try {
+    return JSON.parse(body);
+  } catch {
+    return body;
+  }
+}
+
+async function apiGet(path) {
+  const response = await fetch(endpoint(path), {
+    method: "GET",
+    headers: { accept: "application/json" },
+  });
+  if (!response.ok) {
+    const body = await response.text();
+    throw new Error(`HTTP ${response.status}: ${body}`);
+  }
+  return parseResponseBody(response);
+}
+
+async function apiPut(path, payload) {
+  const response = await fetch(endpoint(path), {
+    method: "PUT",
+    headers: { "content-type": "application/json", accept: "application/json" },
+    body: JSON.stringify(payload),
+  });
+  if (!response.ok) {
+    const body = await response.text();
+    throw new Error(`HTTP ${response.status}: ${body}`);
+  }
+  return parseResponseBody(response);
+}
+
+async function apiPost(path, payload) {
+  const response = await fetch(endpoint(path), {
+    method: "POST",
+    headers: { "content-type": "application/json", accept: "application/json" },
+    body: JSON.stringify(payload),
+  });
+  if (!response.ok) {
+    const body = await response.text();
+    throw new Error(`HTTP ${response.status}: ${body}`);
+  }
+  return parseResponseBody(response);
+}
+
+function extractPorts(payload) {
+  if (Array.isArray(payload)) return payload;
+  if (Array.isArray(payload?.ports)) return payload.ports;
+  return [];
+}
+
+function extractSelectedPort(payload) {
+  if (typeof payload?.selected === "string") return payload.selected;
+  if (typeof payload?.port === "string") return payload.port;
+  return "";
+}
+
+async function apiGetFallback(paths) {
+  let lastError;
+  for (const path of paths) {
+    try {
+      return await apiGet(path);
+    } catch (error) {
+      lastError = error;
+    }
+  }
+  throw lastError || new Error("No available endpoint");
+}
+
+async function apiPostFallback(paths, payload) {
+  let lastError;
+  for (const path of paths) {
+    try {
+      return await apiPost(path, payload);
+    } catch (error) {
+      lastError = error;
+    }
+  }
+  throw lastError || new Error("No available endpoint");
+}
+
+function degreesFromPosition(position, maxDegrees = DEFAULT_OPEN_DEGREES_MAX) {
+  const maxValue = Number(maxDegrees) > 0 ? Number(maxDegrees) : DEFAULT_OPEN_DEGREES_MAX;
+  return Math.round(clamp(position, 0, 100) * maxValue / 100);
+}
+
+function positionFromDegrees(degrees, maxDegrees = DEFAULT_OPEN_DEGREES_MAX) {
+  const maxValue = Number(maxDegrees) > 0 ? Number(maxDegrees) : DEFAULT_OPEN_DEGREES_MAX;
+  return Math.round(clamp(degrees, 0, maxValue) * 100 / maxValue);
+}
+
+async function fetchComPorts() {
+  if (!state.apiBase) {
+    return { ports: [], selected: "" };
+  }
+  const payload = await apiGetFallback(SERIAL_API_PATHS.ports);
+  return {
+    ports: extractPorts(payload),
+    selected: extractSelectedPort(payload),
+  };
+}
+
+function applyPortOptions(ports, preferredPort = "") {
+  if (!comPortSelect) return;
+  const current = comPortSelect.value;
+  comPortSelect.innerHTML = "<option value=\"\">Порт не выбран</option>";
+  for (const item of ports) {
+    const entry = typeof item === "string" ? { device: item, description: "" } : item;
+    const option = document.createElement("option");
+    const value = entry.device || entry.port || "";
+    if (!value) continue;
+    option.value = value;
+    option.textContent = `${entry.description ? `${entry.description} (${value})` : value}`;
+    option.dataset.hwid = entry.hwid || "";
+    comPortSelect.appendChild(option);
+  }
+  const targetPort = preferredPort || current;
+  if (ports.find((item) => (typeof item === "string" ? item : item.device) === targetPort)) {
+    comPortSelect.value = targetPort;
+  } else if (current) {
+    comPortSelect.value = "";
+  }
+}
+
+async function refreshPortsLegacy(silent = false) {
+  const payload = await fetchComPorts();
+  const ports = payload?.ports || [];
+  applyPortOptions(ports, payload?.selected || "");
+  if (!silent) {
+    updateStatus(ports.length ? "Доступные порты обновлены" : "Порты не найдены", ports.length ? "ok" : "warn");
+  }
+}
+
+async function connectSelectedPortLegacyOld() {
+  if (!state.apiBase) {
+    updateStatus("Укажите API endpoint, чтобы работать с COM-портами", "warn");
+    return;
+  }
+  const value = comPortSelect.value;
+  if (!value) {
+    updateStatus("Выберите COM порт", "warn");
+    return;
+  }
+  selectedPort = value;
+  try {
+    const payload = { port: value, baud: 115200, baudrate: 115200, parity: "N", stopbits: 1, bytesize: 8, timeout: 0.3 };
+    await apiPostFallback(SERIAL_API_PATHS.connect, payload);
+    serialConnected = true;
+    serialStatus.textContent = `COM: подключён (${value})`;
+    serialStatus.className = "status status-ok";
+    updateStatus(`COM ${value} подключён`, "ok");
+  } catch (error) {
+    serialConnected = false;
+    serialStatus.textContent = "COM: ошибка подключения";
+    serialStatus.className = "status status-error";
+    updateStatus(`Ошибка подключения COM: ${error.message}`, "error");
+  }
+}
+
+async function disconnectPortLegacy() {
+  if (!state.apiBase) return;
+  try {
+    await apiPostFallback(SERIAL_API_PATHS.disconnect, {});
+  } catch {
+    // ignore
+  } finally {
+    serialConnected = false;
+    serialStatus.textContent = "COM: не подключён";
+    serialStatus.className = "status status-warn";
+    selectedPort = "";
+  }
+}
+
+function normalizeSensor(raw = {}) {
+  const rawId = raw.id ?? raw.sensorId ?? raw.key ?? raw.code;
+  const zone = String(raw.zone ?? raw.channel ?? raw.sensorZone ?? "").trim() || String(rawId ?? "").replace(/\D+/g, "");
+  const fallbackZone = zone ? `zone_${zone}` : "zone_1";
+  const id = rawId || fallbackZone;
+  return {
+    id: String(id),
+    name: String(raw.name ?? raw.label ?? `Термопара ${zone || 1}`),
+    zone: String(zone || "1"),
+    value: Number(raw.value ?? raw.current ?? raw.temperature ?? raw.temp ?? 0),
+    setpoint: Number(raw.setpoint ?? raw.target ?? raw.targetTemp ?? raw.tSet ?? 0),
+    unit: raw.unit ?? raw.units ?? "°C",
+  };
+}
+
+function normalizeValve(raw = {}) {
+  const rawId = raw.id ?? raw.valveId ?? raw.key ?? raw.code;
+  const zone = String(raw.zone ?? raw.channel ?? raw.controlZone ?? "").trim() || String(rawId ?? "").replace(/\D+/g, "");
+  const id = rawId || `valve_${zone || "1"}`;
+  const mode = String(raw.mode ?? raw.workMode ?? "auto").toLowerCase() === "manual" ? "manual" : "auto";
+  const maxOpenDegrees = Number(raw.openDegreesMax ?? raw.maxOpenDegrees ?? raw.degMax ?? DEFAULT_OPEN_DEGREES_MAX);
+  const maxDegrees = Number.isFinite(maxOpenDegrees) && maxOpenDegrees > 0 ? maxOpenDegrees : DEFAULT_OPEN_DEGREES_MAX;
+  let position = Number(raw.position ?? raw.pos ?? raw.percent ?? raw.value);
+  let openDegrees = Number(raw.openDegrees ?? raw.degree ?? raw.posDeg ?? raw.opening ?? raw.openAngle ?? raw.angle);
+
+  if (Number.isNaN(position)) {
+    if (Number.isNaN(openDegrees)) {
+      position = 0;
+      openDegrees = 0;
+    } else {
+      position = positionFromDegrees(openDegrees, maxDegrees);
+    }
+  } else if (Number.isNaN(openDegrees)) {
+    openDegrees = degreesFromPosition(position, maxDegrees);
+  } else {
+    position = positionFromDegrees(openDegrees, maxDegrees);
+  }
+  return {
+    id: String(id),
+    name: String(raw.name ?? raw.label ?? `Клапан ${zone || 1}`),
+    zone: String(zone || "1"),
+    mode,
+    position: clamp(position, 0, 100),
+    openDegrees: clamp(Math.round(openDegrees), 0, maxDegrees),
+    openDegreesMax: maxDegrees,
+    targetTemp: Number(raw.targetTemp ?? raw.targetTemperature ?? raw.setpoint ?? raw.tSet ?? 0),
+    isOpen: Boolean(raw.isOpen ?? raw.open ?? position > 0),
+  };
+}
+
+function extractCollection(payload, key) {
+  if (!payload) return null;
+  if (Array.isArray(payload)) return payload;
+  if (Array.isArray(payload[key])) return payload[key];
+  if (Array.isArray(payload.data?.[key])) return payload.data[key];
+  if (Array.isArray(payload.result?.[key])) return payload.result[key];
+  if (Array.isArray(payload.state?.[key])) return payload.state[key];
+  if (Array.isArray(payload.data?.[`temperature_${key}`])) return payload.data[`temperature_${key}`];
+  return null;
+}
+
+async function fetchCollection(paths, key, normalizer) {
+  let lastError;
+  for (const path of paths) {
+    try {
+      const payload = await apiGet(path);
+      const collection = extractCollection(payload, key);
+      if (!collection || !Array.isArray(collection)) continue;
+      return collection.map(normalizer);
+    } catch (error) {
+      lastError = error;
+    }
+  }
+  throw lastError || new Error(`No available endpoint for ${key}`);
+}
+
+async function sendWithFallback(paths, id, payload) {
+  let lastError;
+  for (const resolvePath of paths) {
+    try {
+      const route = typeof resolvePath === "function" ? resolvePath(id) : resolvePath;
+      return await apiPut(route, payload);
+    } catch (error) {
+      lastError = error;
+    }
+  }
+  throw lastError || new Error("No available write endpoint");
+}
+
+async function postWithFallback(paths, id, payload) {
+  let lastError;
+  for (const resolvePath of paths) {
+    try {
+      const route = typeof resolvePath === "function" ? resolvePath(id) : resolvePath;
+      return await apiPost(route, payload);
+    } catch (error) {
+      lastError = error;
+    }
+  }
+  throw lastError || new Error("No available write endpoint");
+}
+
+function writePayloadBase(id, type = "sensor") {
+  const sensor = findSensorById(id);
+  const valve = findValveById(id);
+  const entity = type === "valve" ? valve : sensor;
+  return {
+    id,
+    ...(entity ? { zone: entity.zone, name: entity.name } : {}),
+  };
+}
+
+function mergeDefaults(stored, defaults, normalizer = (item) => item) {
+  const source = Array.isArray(stored) ? stored : [];
+  const byId = new Map(source.map((item) => [String(item.id), normalizer(item)]));
+  return defaults.map((item) => ({
+    ...item,
+    ...(byId.get(String(item.id)) || {}),
+  }));
+}
+
+function buildDemos() {
+  state.sensors = mergeDefaults(storageGet("sensorState", []), defaultSensors, normalizeSensor);
+  state.valves = mergeDefaults(storageGet("valveState", []), defaultValves, normalizeValve);
+  storageSet("sensorState", state.sensors);
+  storageSet("valveState", state.valves);
+}
+
+function updateStatus(message, type = "ok") {
+  globalStatus.textContent = message;
+  globalStatus.className = `status-${type}`;
+}
+
+function setConnectButtonText() {
+  if (!connectPortBtn) {
+    return;
+  }
+  connectPortBtn.textContent = serialConnected ? "Отключить" : "Подключить";
+}
+
+function setSerialBusyState(isBusy, message) {
+  if (refreshPortsBtn) {
+    refreshPortsBtn.disabled = isBusy;
+  }
+  if (connectPortBtn) {
+    connectPortBtn.disabled = isBusy;
+    connectPortBtn.textContent = isBusy ? "..." : (serialConnected ? "Отключить" : "Подключить");
+  }
+  if (calibrateAllBtn) {
+    calibrateAllBtn.disabled = isBusy || !serialConnected;
+  }
+  if (message) {
+    serialStatus.textContent = message;
+  }
+}
+
+function applySerialStateFromPayload(payload = {}) {
+  const connected = Boolean(payload?.connected);
+  const transport = String(payload?.transport || getModbusTransport()).toLowerCase();
+  const isTcp = transport === "tcp";
+  const tcpAddress = payload?.address || (payload?.host || payload?.ip ? `${payload?.host || payload?.ip}:${payload?.tcpPort || payload?.tcp_port || 502}` : "");
+  const port = isTcp ? (tcpAddress || payload?.port || "") : (payload?.port || payload?.selected || payload?.com || "");
+  serialConnected = connected;
+  selectedPort = connected && port ? port : "";
+  if (comPortSelect && selectedPort) {
+    comPortSelect.value = selectedPort;
+  }
+  if (serialStatus) {
+    if (connected && selectedPort) {
+      serialStatus.textContent = isTcp ? `Modbus TCP: connected (${selectedPort})` : `COM: connected (${selectedPort})`;
+      serialStatus.className = "status status-ok";
+    } else {
+      serialStatus.textContent = isTcp ? "Modbus TCP: disconnected" : "COM: disconnected";
+      serialStatus.className = "status status-warn";
+    }
+  }
+  if (calibrateAllBtn) {
+    calibrateAllBtn.disabled = !serialConnected;
+  }
+  setConnectButtonText();
+  storageSet("comPort", selectedPort || "");
+}
+
+async function loadState() {
+  if (!state.apiBase) {
+    buildDemos();
+    simulateSensorPhysics();
+    statusEl.textContent = "Режим: демо (без API)";
+    statusEl.className = "status status-warn";
+    globalStatus.textContent = "Демо: все изменения сохраняются в браузере";
+    return;
+  }
+  const [sensors, valves] = await Promise.all([
+    fetchCollection(API_PATHS.sensorsRead, "sensors", normalizeSensor),
+    fetchCollection(API_PATHS.valvesRead, "valves", normalizeValve),
+  ]);
+  state.sensors = sensors;
+  state.valves = valves;
+  statusEl.textContent = "Подключено к API";
+  statusEl.className = "status status-ok";
+  globalStatus.textContent = `API подключен: ${state.apiBase}`;
+}
+
+function findSensorByZone(zone) {
+  return state.sensors.find((s) => String(s.zone) === String(zone));
+}
+
+function findValveByZone(zone) {
+  return state.valves.find((v) => String(v.zone) === String(zone));
+}
+
+function findSensorById(id) {
+  return state.sensors.find((s) => s.id === id);
+}
+
+function findValveById(id) {
+  return state.valves.find((v) => v.id === id);
+}
+
+function renderSensors() {
+  const sensorsRoot = document.getElementById("sensors");
+  if (!sensorsRoot) return;
+  sensorsRoot.innerHTML = "";
+  const sensorPanel = sensorsRoot.closest(".panel");
+  if (sensorPanel) {
+    sensorPanel.hidden = false;
+    const title = sensorPanel.querySelector("h2");
+    if (title) title.textContent = "Каналы обработки датчиков";
+  }
+}
+
+function renderValves() {
+  const separateValvesRoot = document.getElementById("valves");
+  if (separateValvesRoot) {
+    separateValvesRoot.innerHTML = "";
+    const separateValvesPanel = separateValvesRoot.closest(".panel");
+    if (separateValvesPanel) separateValvesPanel.hidden = true;
+  }
+
+  const valvesRoot = document.getElementById("sensors");
+  if (!valvesRoot) return;
+  valvesRoot.innerHTML = "";
+  const valvePanel = valvesRoot.closest(".panel");
+  if (valvePanel) {
+    valvePanel.hidden = false;
+    const title = valvePanel.querySelector("h2");
+    if (title) title.textContent = "Каналы обработки датчиков";
+  }
+
+  const sensorLocations = storageGet("sensorLocations", {});
+  state.sensors.forEach((sensor, index) => {
+    const channelNumber = index + 1;
+    const openValve = state.valves[index * 2] || {};
+    const closeValve = state.valves[index * 2 + 1] || {};
+    const valve = openValve.id ? openValve : closeValve;
+    const card = document.createElement("article");
+    card.className = "item compact-item valve-item channel-card full-channel-card";
+    card.dataset.id = valve.id || `valve_${channelNumber * 2 - 1}`;
+
+    const rawTemp = Number(sensor.value);
+    const temp = Number.isFinite(rawTemp) ? rawTemp : 0;
+    const tempText = Number.isFinite(rawTemp) ? temp.toFixed(1) : "--";
+    let setpoint = Number(valve.targetTemp ?? sensor.setpoint ?? 28);
+    const positionRaw = Number(valve.position ?? 0);
+    const position = Number.isFinite(positionRaw) ? Math.max(0, Math.min(100, Math.round(positionRaw))) : 0;
+    const maxDegreesRaw = Number(valve.openDegreesMax ?? DEFAULT_OPEN_DEGREES_MAX);
+    const maxDegrees = Number.isFinite(maxDegreesRaw) && maxDegreesRaw > 0 ? maxDegreesRaw : DEFAULT_OPEN_DEGREES_MAX;
+    const angleRaw = Number(valve.openDegrees ?? ((position / 100) * maxDegrees));
+    const openDegrees = Number.isFinite(angleRaw) ? Math.max(0, Math.min(maxDegrees, Math.round(angleRaw))) : 0;
+    const openActive = Boolean(openValve.isOpen || position > 0 || openDegrees > 0);
+    const closeActive = Boolean(closeValve.isOpen || position <= 0);
+    const connected = Boolean(valve.connected ?? valve.isConnected ?? sensor.connected ?? state.connected);
+    const tempFill = Math.max(0, Math.min(100, ((temp + 5) / 55) * 100));
+    const mode = valve.mode === "manual" ? "manual" : "auto";
+    const modeText = mode === "manual" ? "ручной" : "авто";
+    const sensorName = sensor.name || `Датчик ${channelNumber}`;
+    const sensorId = sensor.id || `zone_${channelNumber}`;
+    const setpointDrafts = storageGet("setpointDrafts", {});
+    const draftValue = setpointDrafts[sensorId] ?? setpointDrafts[valve.id];
+    if (draftValue !== undefined) {
+      setpoint = parseGuiNumber(draftValue, setpoint);
+    }
+    const ds18b20Id = sensor.ds18b20Id || sensor.romId || sensor.rom || sensor.address || "--";
+    const location = sensorLocations[sensorId] || sensor.location || defaultChannelLocation(index);
+    const locationOptions = CHANNEL_LOCATIONS.map((name) => (
+      `<option value="${name}" ${name === location ? "selected" : ""}>${name}</option>`
+    )).join("");
+    const openValveId = openValve.id || `valve_${channelNumber * 2 - 1}`;
+    const closeValveId = closeValve.id || `valve_${channelNumber * 2}`;
+    const openHex = (Number(String(openValveId).replace(/\D/g, "")) || channelNumber * 2 - 1).toString(16).toUpperCase().padStart(2, "0");
+    const closeHex = (Number(String(closeValveId).replace(/\D/g, "")) || channelNumber * 2).toString(16).toUpperCase().padStart(2, "0");
+    const setpointText = Number.isFinite(setpoint) ? setpoint.toFixed(1) : "--";
+    const delta = Number.isFinite(rawTemp) && Number.isFinite(setpoint) ? temp - setpoint : NaN;
+    const deltaText = Number.isFinite(delta) ? `${delta > 0 ? "+" : ""}${delta.toFixed(1)}°C` : "--";
+    const deltaClass = !Number.isFinite(delta) || Math.abs(delta) <= 0.5 ? "ok" : delta > 0 ? "hot" : "cold";
+    const stateText = openActive ? "открытие" : closeActive ? "закрытие" : "стоп";
+
+    card.innerHTML = `
+      <div class="channel-head">
+        <div class="channel-title">
+          <strong>Канал ${channelNumber}</strong>
+          <small>${sensorName} · ${location} · зона ${sensor.zone || channelNumber}</small>
+        </div>
+        <span>связь <i class="channel-lamp ${connected ? "on" : "alarm"}"></i></span>
+      </div>
+
+      <div class="channel-id-grid full-channel-id-grid">
+        <label>уставка
+          <input class="targetTemp" type="number" step="0.5" value="${setpoint}">
+        </label>
+        <label>Расположение
+          <select class="sensorLocation" data-id="${sensorId}">
+            ${locationOptions}
+          </select>
+        </label>
+        <label>ID DS18B20
+          <input readonly value="${ds18b20Id}">
+        </label>
+      </div>
+
+      <div class="channel-body full-channel-body">
+        <div class="temperature-widget" aria-label="Температура канала ${channelNumber}">
+          <div class="temp-scale">
+            <span>50</span><span>40</span><span>30</span><span>20</span><span>10</span><span>0</span><span>-5</span>
+          </div>
+          <div class="temp-bar"><b style="height: ${tempFill}%"></b></div>
+          <div class="temp-now">${tempText}°C</div>
+        </div>
+
+        <div class="channel-workarea">
+          <div class="top-metrics-row">
+            <div class="angle-panel">
+              <span>угол открытия</span>
+              <strong>${openDegrees}°</strong>
+              <small>максимум ${Math.round(maxDegrees)}°</small>
+            </div>
+          </div>
+
+          <div class="channel-data-grid full-channel-data-grid">
+            <div><span>температура</span><strong>${tempText}°C</strong></div>
+            <div><span>уставка</span><strong>${setpointText}°C</strong></div>
+            <div><span>отклонение</span><strong class="delta ${deltaClass}">${deltaText}</strong></div>
+            <div><span>расположение</span><strong>${location}</strong></div>
+            <div><span>ID DS18B20</span><strong>${ds18b20Id}</strong></div>
+            <div><span>режим</span><strong>${modeText}</strong></div>
+            <div><span>угол/max</span><strong>${openDegrees}° / ${Math.round(maxDegrees)}°</strong></div>
+            <div><span>команда</span><strong>${stateText}</strong></div>
+            <div><span>связь</span><strong>${connected ? "есть" : "нет"}</strong></div>
+            <div><span>канал</span><strong>${channelNumber}</strong></div>
+          </div>
+
+          <label class="range-control channel-position">положение заслонки
+            <input class="position" type="range" min="0" max="100" value="${position}">
+            <strong>${position}%</strong>
+          </label>
+
+          <div class="valve-state-row full-state-row">
+            <span><i class="channel-lamp ${openActive ? "on" : "off"}"></i> клапан откр ${channelNumber}</span>
+            <span><i class="channel-lamp ${closeActive ? "on" : "off"}"></i> клапан закр ${channelNumber}</span>
+          </div>
+
+          <div class="channel-actions">
+            <button class="quickPosition" data-position="100" type="button">откр ${channelNumber}</button>
+            <button class="quickPosition" data-position="0" type="button">закр ${channelNumber}</button>
+          </div>
+
+          <div class="channel-actions channel-mode-line">
+            <div class="toggle channel-mode">
+              <button class="modeBtn valveAuto ${mode === "auto" ? "active" : ""}" data-mode="auto" type="button">авто</button>
+              <button class="modeBtn valveManual ${mode === "manual" ? "active" : ""}" data-mode="manual" type="button">ручное</button>
+            </div>
+            <button class="applyTarget mini-btn" type="button">SP</button>
+            <button class="applyManual mini-btn" type="button">OK</button>
+            <button class="calibrateValve mini-btn" type="button">CAL</button>
+          </div>
+        </div>
+      </div>
+    `;
+
+    valvesRoot.appendChild(card);
+  });
+}
+
+function render() {
+  renderSensors();
+  renderValves();
+}
+
+async function applySetpoint(sensorId) {
+  const sensor = findSensorById(sensorId);
+  const input = document.querySelector(`.setpoint[data-id="${sensorId}"]`);
+  const value = Number(input.value);
+  if (Number.isNaN(value)) {
+    updateStatus("Некорректное значение уставки", "warn");
+    return;
+  }
+
+  if (!state.apiBase) {
+    sensor.setpoint = value;
+    storageSet("sensorState", state.sensors);
+    render();
+    updateStatus(`Демо: уставка ${sensor.name} = ${value.toFixed(1)} °C`, "ok");
+    return;
+  }
+
+  const payload = {
+    ...writePayloadBase(sensorId, "sensor"),
+    setpoint: value,
+    id: sensorId,
+  };
+
+  try {
+    await sendWithFallback(API_PATHS.sensorWrite, sensorId, payload);
+    await loadState();
+    render();
+    updateStatus(`Уставка ${sensor.name} обновлена`, "ok");
+  } catch (error) {
+    updateStatus(`Ошибка уставки ${sensor.name}: ${error.message}`, "error");
+  }
+}
+
+async function applyValveMode(valveId, mode) {
+  const valve = findValveById(valveId);
+  if (!valve) return;
+  valve.mode = mode;
+
+  if (!state.apiBase) {
+    storageSet("valveState", state.valves);
+    render();
+    updateStatus(`Демо: ${valve.name} → ${mode}`, "ok");
+    return;
+  }
+
+  const payload = {
+    ...writePayloadBase(valveId, "valve"),
+    mode,
+    id: valveId,
+  };
+
+  try {
+    await sendWithFallback(API_PATHS.valveWrite, valveId, payload);
+    await loadState();
+    render();
+    updateStatus(`Режим ${valve.name}: ${mode}`, "ok");
+  } catch (error) {
+    updateStatus(`Ошибка режима ${valve.name}: ${error.message}`, "error");
+    await loadState();
+    render();
+  }
+}
+
+async function applyValveTarget(valveId) {
+  const valve = findValveById(valveId);
+  const input = document.querySelector(`.targetTemp[data-id="${valveId}"]`);
+  const value = Number(input.value);
+  if (Number.isNaN(value)) {
+    updateStatus("Некорректная целевая температура", "warn");
+    return;
+  }
+
+  if (!state.apiBase) {
+    valve.targetTemp = value;
+    storageSet("valveState", state.valves);
+    updateStatus(`Демо: цель ${valve.name} = ${value.toFixed(1)} °C`, "ok");
+    return;
+  }
+
+  const payload = {
+    ...writePayloadBase(valveId, "valve"),
+    targetTemp: value,
+    id: valveId,
+  };
+
+  try {
+    await sendWithFallback(API_PATHS.valveWrite, valveId, payload);
+    await loadState();
+    render();
+    updateStatus(`Целевая температура ${valve.name} обновлена`, "ok");
+  } catch (error) {
+    updateStatus(`Ошибка цели ${valve.name}: ${error.message}`, "error");
+  }
+}
+
+async function applyValvePosition(valveId) {
+  const valve = findValveById(valveId);
+  const input = document.querySelector(`.position[data-id="${valveId}"]`);
+  const value = Number(input.value);
+  if (Number.isNaN(value)) {
+    updateStatus("Некорректная позиция клапана", "warn");
+    return;
+  }
+  valve.position = clamp(Math.round(value), 0, 100);
+  valve.openDegrees = degreesFromPosition(valve.position, valve.openDegreesMax);
+  valve.isOpen = valve.position > 0;
+
+  if (!state.apiBase) {
+    storageSet("valveState", state.valves);
+    render();
+    updateStatus(`Демо: ручная позиция ${valve.name} = ${value}%`, "ok");
+    return;
+  }
+
+  const payload = {
+    ...writePayloadBase(valveId, "valve"),
+    mode: "manual",
+    position: valve.position,
+    openDegrees: valve.openDegrees,
+    openDegreesMax: valve.openDegreesMax,
+    id: valveId,
+  };
+
+  try {
+    await sendWithFallback(API_PATHS.valveWrite, valveId, payload);
+    await loadState();
+    render();
+    updateStatus(`Позиция ${valve.name} обновлена`, "ok");
+  } catch (error) {
+    updateStatus(`Ошибка позиции ${valve.name}: ${error.message}`, "error");
+  }
+}
+
+async function calibrateValve(valveId) {
+  const valve = findValveById(valveId);
+  if (!valve) return;
+
+  if (!state.apiBase) {
+    valve.position = 0;
+    valve.openDegrees = 0;
+    valve.isOpen = false;
+    storageSet("valveState", state.valves);
+    render();
+    updateStatus(`Демо: калибровка ${valve.name} выполнена`, "ok");
+    return;
+  }
+
+  try {
+    const response = await postWithFallback(API_PATHS.valveCalibrate, valveId, {});
+    const updated = response?.valve || response;
+    if (updated && updated.id) {
+      const index = state.valves.findIndex((item) => item.id === valveId);
+      if (index !== -1) {
+        state.valves[index] = normalizeValve(updated);
+      } else {
+        await loadState();
+      }
+    } else {
+      await loadState();
+    }
+    render();
+    updateStatus(`Калибровка ${valve.name} выполнена`, "ok");
+  } catch (error) {
+    updateStatus(`Ошибка калибровки ${valve.name}: ${error.message}`, "error");
+  }
+}
+
+async function calibrateAllValves(silent = false) {
+  if (!state.apiBase) {
+    state.valves = state.valves.map((valve) => ({
+      ...valve,
+      position: 0,
+      openDegrees: 0,
+      isOpen: false,
+    }));
+    render();
+    if (!silent) {
+      updateStatus("Демо: калибровка всех клапанов выполнена", "ok");
+    }
+    return;
+  }
+
+  try {
+    const response = await apiPostFallback(API_PATHS.valvesCalibrateAll, {});
+    const payload = Array.isArray(response?.valves) ? response.valves : null;
+    if (payload) {
+      state.valves = payload.map(normalizeValve);
+    } else {
+      await loadState();
+    }
+    render();
+    if (!silent) {
+      updateStatus("Калибровка всех клапанов выполнена", "ok");
+    }
+  } catch (error) {
+    if (!silent) {
+      updateStatus(`Ошибка калибровки всех клапанов: ${error.message}`, "error");
+    }
+  }
+}
+
+function simulateSensorPhysics() {
+  if (state.timer) clearInterval(state.timer);
+  state.timer = setInterval(() => {
+    for (const sensor of state.sensors) {
+      const valve = findValveByZone(sensor.zone);
+      const v = valve || {};
+      let target;
+      if (v.mode === "manual") {
+        target = 20 + (clamp(v.position ?? 0, 0, 100) / 100) * 70;
+      } else {
+        target = v.targetTemp ?? sensor.setpoint ?? 30;
+      }
+      const drift = target - sensor.value;
+      const noise = (Math.random() - 0.5) * 0.2;
+      sensor.value = clamp(sensor.value + drift * 0.08 + noise, -40, 150);
+      sensor.value = Number(sensor.value.toFixed(2));
+    }
+    for (const valve of state.valves) {
+      const maxOpenDegrees = Number(valve.openDegreesMax) > 0 ? Number(valve.openDegreesMax) : DEFAULT_OPEN_DEGREES_MAX;
+      valve.openDegrees = Math.round(degreesFromPosition(valve.position ?? 0, maxOpenDegrees));
+      valve.isOpen = (valve.position ?? 0) > 0;
+    }
+    storageSet("sensorState", state.sensors);
+    storageSet("valveState", state.valves);
+    render();
+  }, 2500);
+}
+
+function attachEvents() {
+  refreshBtn.addEventListener("click", () => {
+    const url = normalizeApiUrl(apiInput.value);
+    state.apiBase = url;
+    storageSet("apiBase", state.apiBase);
+    refreshAll(true);
+    refreshPorts(false);
+  });
+
+  refreshPortsBtn.addEventListener("click", () => {
+    refreshPorts();
+  });
+
+  connectPortBtn.addEventListener("click", async () => {
+    if (serialConnected) {
+      await disconnectPort();
+      setConnectButtonText();
+      return;
+    }
+    await connectSelectedPort();
+    setConnectButtonText();
+  });
+
+  if (calibrateAllBtn) {
+    calibrateAllBtn.addEventListener("click", () => {
+      calibrateAllValves(false);
+    });
+  }
+
+  saveApiBtn.addEventListener("click", () => {
+    const url = normalizeApiUrl(apiInput.value);
+    state.apiBase = url;
+    storageSet("apiBase", url);
+    if (!url) {
+      updateStatus("API отключён; переход в демо", "warn");
+      statusEl.textContent = "Режим: демо (без API)";
+      statusEl.className = "status status-warn";
+    } else {
+      updateStatus(`Сохранён API: ${state.apiBase}`, "ok");
+      statusEl.textContent = "Сохранён адрес API";
+      statusEl.className = "status status-ok";
+    }
+    render();
+    refreshPorts(false);
+    if (!url) {
+      serialStatus.textContent = "COM: не подключён";
+      serialStatus.className = "status status-warn";
+      connectPortBtn.textContent = "Подключить";
+      selectedPort = "";
+      serialConnected = false;
+    }
+  });
+
+  sensorsEl.addEventListener("click", (event) => {
+    const target = event.target;
+    if (target.classList.contains("applySetpoint")) {
+      applySetpoint(target.dataset.id);
+    }
+  });
+
+  valvesEl.addEventListener("click", (event) => {
+    const target = event.target;
+    if (target.classList.contains("modeBtn")) {
+      const button = target.closest(".toggle");
+      const valveId = button.dataset.id;
+      const mode = target.dataset.mode;
+      const card = button.closest(".item");
+      if (!card) return;
+      const autoBlock = card.querySelector(".valveAuto");
+      const manualBlock = card.querySelector(".valveManual");
+      const applyManualBtn = card.querySelector(".applyManual");
+
+      button.querySelectorAll(".modeBtn").forEach((b) => b.classList.remove("active"));
+      target.classList.add("active");
+      if (mode === "auto") {
+        autoBlock.classList.remove("hidden");
+        manualBlock.classList.add("hidden");
+        applyManualBtn.classList.add("hidden");
+      } else {
+        autoBlock.classList.add("hidden");
+        manualBlock.classList.remove("hidden");
+        applyManualBtn.classList.remove("hidden");
+      }
+      applyValveMode(valveId, mode);
+    }
+    if (target.classList.contains("applyTarget")) {
+      applyValveTarget(target.dataset.id);
+    }
+    if (target.classList.contains("applyManual")) {
+      applyValvePosition(target.dataset.id);
+    }
+    if (target.classList.contains("calibrateValve")) {
+      calibrateValve(target.dataset.id);
+    }
+  });
+
+  valvesEl.addEventListener("input", (event) => {
+    const target = event.target;
+    if (target.classList.contains("position")) {
+      const label = target.closest("label");
+      const span = label ? label.querySelector("strong") : null;
+      if (span) span.textContent = `${target.value}%`;
+    }
+  });
+}
+
+async function refreshAll(silent = false) {
+  try {
+    await loadState();
+    render();
+    if (!silent) updateStatus("Данные обновлены", "ok");
+  } catch (error) {
+    if (state.apiBase) {
+      statusEl.textContent = `Ошибка API: ${error.message}`;
+      statusEl.className = "status status-error";
+      globalStatus.textContent = "Не удалось получить данные с API. Откат в демо";
+      globalStatus.className = "status-warn";
+      await refreshPorts();
+      render();
+    } else {
+      updateStatus(`Демо инициализирован: ${error.message}`, "warn");
+    }
+  }
+}
+
+async function connectSelectedPortLegacy() {
+  if (!state.apiBase) {
+    updateStatus("Укажите API endpoint для работы с COM-портами", "warn");
+    return;
+  }
+  const value = comPortSelect.value;
+  if (!value) {
+    updateStatus("Выберите COM порт", "warn");
+    return;
+  }
+  const payload = { port: value, baud: 115200, baudrate: 115200, parity: "N", stopbits: 1, bytesize: 8, timeout: 0.3 };
+  try {
+    await apiPostFallback(SERIAL_API_PATHS.connect, payload);
+    selectedPort = value;
+    serialConnected = true;
+    storageSet("comPort", value);
+    serialStatus.textContent = `COM: подключен (${value})`;
+    serialStatus.className = "status status-ok";
+    connectPortBtn.textContent = "Отключить";
+    updateStatus(`COM ${value} подключен`, "ok");
+  } catch (error) {
+    serialConnected = false;
+    serialStatus.textContent = "COM: ошибка подключения";
+    serialStatus.className = "status status-error";
+    connectPortBtn.textContent = "Подключить";
+    storageSet("comPort", "");
+    selectedPort = "";
+    updateStatus(`Ошибка подключения COM: ${error.message}`, "error");
+  }
+}
+
+async function disconnectPortLegacy() {
+  if (!state.apiBase) return;
+  try {
+    await apiPostFallback(SERIAL_API_PATHS.disconnect, {});
+  } catch {
+    // ignore
+  } finally {
+    serialConnected = false;
+    selectedPort = "";
+    storageSet("comPort", "");
+    serialStatus.textContent = "COM: не подключен";
+    serialStatus.className = "status status-warn";
+    connectPortBtn.textContent = "Подключить";
+  }
+}
+
+async function restoreSerialUiLegacy() {
+  if (!state.apiBase) return;
+  try {
+    const status = await apiGetFallback(SERIAL_API_PATHS.status);
+    serialConnected = Boolean(status?.connected);
+    const port = status?.port || status?.selected;
+    if (serialConnected && port) {
+      selectedPort = port;
+      comPortSelect.value = selectedPort;
+      serialStatus.textContent = `COM: подключен (${selectedPort})`;
+      serialStatus.className = "status status-ok";
+      connectPortBtn.textContent = "Отключить";
+      storageSet("comPort", selectedPort);
+    } else {
+      selectedPort = "";
+      storageSet("comPort", "");
+      serialStatus.textContent = "COM: не подключен";
+      serialStatus.className = "status status-warn";
+      connectPortBtn.textContent = "Подключить";
+    }
+  } catch {
+    // no-op
+  }
+}
+
+async function refreshPorts(silent = false) {
+  if (!state.apiBase) {
+    ensureApiBase();
+  }
+  if (!state.apiBase) {
+    if (!silent) {
+      updateStatus("Set API base URL first", "warn");
+    }
+    return;
+  }
+  setSerialBusyState(true, "Scanning COM ports...");
+  try {
+    const payload = await fetchComPorts();
+    const ports = Array.isArray(payload?.ports) ? payload.ports : [];
+    const preferredPort = payload?.selected || selectedPort || storageGet("comPort", "");
+    applyPortOptions(ports, preferredPort);
+    if (!silent) {
+      updateStatus(
+        ports.length ? `Found COM ports: ${ports.length}` : "No COM ports found",
+        ports.length ? "ok" : "warn"
+      );
+    }
+  } catch (error) {
+    applyPortOptions([], "");
+    updateStatus(`Port scan error: ${error.message}`, "error");
+  } finally {
+    setSerialBusyState(false);
+  }
+}
+
+async function connectSelectedPort() {
+  if (!state.apiBase) {
+    updateStatus("Set API base URL first", "warn");
+    return;
+  }
+  const requestedPort = comPortSelect.value;
+  if (!requestedPort) {
+    updateStatus("Select COM port", "warn");
+    return;
+  }
+  setSerialBusyState(true, `Connecting ${requestedPort}...`);
+  try {
+    const payload = {
+      port: requestedPort,
+      baud: 115200,
+      baudrate: 115200,
+      parity: "N",
+      stopBits: 1,
+      stopbits: 1,
+      byteSize: 8,
+      bytesize: 8,
+      timeout: 0.3,
+    };
+    const status = await apiPostFallback(SERIAL_API_PATHS.connect, payload);
+    applySerialStateFromPayload({
+      connected: true,
+      port: status?.port || requestedPort,
+      selected: status?.selected || requestedPort,
+    });
+    await calibrateAllValves(true);
+    updateStatus(`COM ${requestedPort} connected`, "ok");
+    await refreshPorts(true);
+  } catch (error) {
+    applySerialStateFromPayload({ connected: false });
+    updateStatus(`COM connect error: ${error.message}`, "error");
+  } finally {
+    setSerialBusyState(false);
+  }
+}
+
+async function connectRtuPort() {
+  if (!state.apiBase) {
+    updateStatus("Укажи API endpoint для Modbus RTU", "warn");
+    return;
+  }
+
+  const value = comPortSelect?.value || selectedPort;
+  if (!value) {
+    updateStatus("Выберите COM порт", "warn");
+    return;
+  }
+
+  const unitId = Number(modbusSlaveId?.value || 3);
+  storageSet("modbusTransport", "rtu");
+  storageSet("comPort", value);
+  storageSet("modbusSlaveId", String(unitId));
+  setSerialBusyState(true, `Modbus RTU: подключение ${value}, slave ${unitId}...`);
+  try {
+    const status = await apiPostFallback(SERIAL_API_PATHS.connect, {
+      transport: "rtu",
+      mode: "rtu",
+      port: value,
+      baud: 115200,
+      baudrate: 115200,
+      parity: "N",
+      stopbits: 1,
+      bytesize: 8,
+      timeout: 0.8,
+      unitId,
+      slaveId: unitId,
+    });
+    applySerialStateFromPayload({
+      ...(status || {}),
+      connected: Boolean(status?.connected ?? status?.ok),
+      transport: "rtu",
+      port: value,
+    });
+    updateStatus(`Modbus RTU connected: ${value}, slave ${unitId}`, "ok");
+  } catch (error) {
+    applySerialStateFromPayload({ connected: false, transport: "rtu" });
+    updateStatus(`Modbus RTU error: ${error.message}`, "error");
+  } finally {
+    setSerialBusyState(false);
+    applyModbusTransportView();
+  }
+}
+
+async function connectTcpPort() {
+  if (!state.apiBase) {
+    updateStatus("Укажи API endpoint для Modbus TCP", "warn");
+    return;
+  }
+
+  const host = (tcpHost?.value || "").trim();
+  const port = Number(tcpPort?.value || 502);
+  const unitId = Number(modbusSlaveId?.value || 3);
+  if (!host) {
+    updateStatus("Укажи IP адрес Modbus TCP", "warn");
+    return;
+  }
+  if (!Number.isInteger(port) || port < 1 || port > 65535) {
+    updateStatus("Некорректный TCP порт", "warn");
+    return;
+  }
+
+  storageSet("modbusTransport", "tcp");
+  storageSet("tcpHost", host);
+  storageSet("tcpPort", String(port));
+  storageSet("modbusSlaveId", String(unitId));
+  setSerialBusyState(true, `Modbus TCP: подключение ${host}:${port}, slave ${unitId}...`);
+  try {
+    const status = await apiPostFallback(SERIAL_API_PATHS.connect, {
+      transport: "tcp",
+      mode: "tcp",
+      host,
+      ip: host,
+      tcpPort: port,
+      tcp_port: port,
+      port,
+      unitId,
+      slaveId: unitId,
+      timeout: 0.8,
+    });
+    applySerialStateFromPayload({
+      ...(status || {}),
+      connected: Boolean(status?.connected ?? status?.ok),
+      transport: "tcp",
+      host,
+      tcpPort: port,
+      address: `${host}:${port}`,
+    });
+    updateStatus(`Modbus TCP connected: ${host}:${port}, slave ${unitId}`, "ok");
+  } catch (error) {
+    applySerialStateFromPayload({ connected: false, transport: "tcp" });
+    updateStatus(`Modbus TCP error: ${error.message}`, "error");
+  } finally {
+    setSerialBusyState(false);
+    applyModbusTransportView();
+  }
+}
+
+if (connectPortBtn) {
+  connectPortBtn.addEventListener("click", async (event) => {
+    event.preventDefault();
+    event.stopImmediatePropagation();
+
+    if (serialConnected) {
+      await disconnectPort();
+      setConnectButtonText();
+      applyModbusTransportView();
+      return;
+    }
+
+    if (getModbusTransport() === "tcp") {
+      await connectTcpPort();
+    } else {
+      await connectRtuPort();
+    }
+    setConnectButtonText();
+  }, true);
+}
+
+async function disconnectPort() {
+  if (!state.apiBase) {
+    applySerialStateFromPayload({ connected: false });
+    return;
+  }
+  setSerialBusyState(true, "Disconnecting...");
+  try {
+    const status = await apiPostFallback(SERIAL_API_PATHS.disconnect, {});
+    applySerialStateFromPayload(status || { connected: false });
+  } catch {
+    // ignore
+  } finally {
+    applySerialStateFromPayload({ connected: false });
+    setSerialBusyState(false);
+  }
+}
+
+async function restoreSerialUi() {
+  if (!state.apiBase) {
+    return;
+  }
+  try {
+    const status = await apiGetFallback(SERIAL_API_PATHS.status);
+    applySerialStateFromPayload(status);
+    if (status?.connected) {
+      await calibrateAllValves(true);
+    }
+  } catch {
+    applySerialStateFromPayload({ connected: false });
+  }
+}
+
+
+
+// Channel location selector
+document.addEventListener("change", (event) => {
+  const select = event.target.closest(".sensorLocation");
+  if (!select) return;
+
+  const sensorId = select.dataset.id;
+  const sensor = state.sensors.find((item) => item.id === sensorId);
+  if (sensor) {
+    sensor.location = select.value;
+    storageSet("sensorState", state.sensors);
+  }
+
+  const locations = storageGet("sensorLocations", {});
+  locations[sensorId] = select.value;
+  storageSet("sensorLocations", locations);
+
+  render();
+});
+
+// Controls inside sensor processing channel cards
+document.addEventListener("input", (event) => {
+  const targetInput = event.target.closest(".full-channel-card .targetTemp");
+  if (targetInput) {
+    const card = targetInput.closest(".full-channel-card");
+    const valveId = card?.dataset.id;
+    const targetTemp = parseGuiNumber(targetInput.value, 0);
+    const valve = state.valves.find((item) => item.id === valveId);
+    if (valve) {
+      valve.targetTemp = targetTemp;
+    }
+
+    const valveNumber = Number(String(valveId || "").replace(/\D/g, "")) || 1;
+    const sensorIndex = Math.max(0, Math.floor((valveNumber - 1) / 2));
+    const sensor = state.sensors[sensorIndex];
+    if (sensor) {
+      sensor.setpoint = targetTemp;
+    }
+
+    const setpointDrafts = storageGet("setpointDrafts", {});
+    if (sensor?.id) {
+      setpointDrafts[sensor.id] = targetInput.value;
+    }
+    if (valveId) {
+      setpointDrafts[valveId] = targetInput.value;
+    }
+    storageSet("setpointDrafts", setpointDrafts);
+    storageSet("sensorState", state.sensors);
+    storageSet("valveState", state.valves);
+    return;
+  }
+
+  const positionInput = event.target.closest(".full-channel-card .position");
+  if (!positionInput) return;
+  const label = positionInput.closest("label");
+  const value = Number(positionInput.value || 0);
+  const strong = label?.querySelector("strong");
+  if (strong) strong.textContent = `${value}%`;
+});
+
+document.addEventListener("click", async (event) => {
+  const button = event.target.closest(".full-channel-card button");
+  if (!button) return;
+
+  const card = button.closest(".full-channel-card");
+  const valveId = card?.dataset.id;
+  if (!card || !valveId) return;
+
+  if (button.classList.contains("modeBtn")) {
+    const mode = button.dataset.mode === "manual" ? "manual" : "auto";
+    card.querySelectorAll(".modeBtn").forEach((item) => item.classList.remove("active"));
+    button.classList.add("active");
+    const valve = state.valves.find((item) => item.id === valveId);
+    if (valve) valve.mode = mode;
+    storageSet("valveState", state.valves);
+    await sendWithFallback(API_PATHS.valveWrite, valveId, {
+      ...writePayloadBase(valveId, "valve"),
+      id: valveId,
+      mode,
+    });
+    return;
+  }
+
+  if (button.classList.contains("applyTarget")) {
+    const targetInput = card.querySelector(".targetTemp");
+    const targetTemp = parseGuiNumber(targetInput?.value, 0);
+    const valve = state.valves.find((item) => item.id === valveId);
+    if (valve) valve.targetTemp = targetTemp;
+    const valveNumber = Number(String(valveId || "").replace(/\D/g, "")) || 1;
+    const sensorIndex = Math.max(0, Math.floor((valveNumber - 1) / 2));
+    const sensor = state.sensors[sensorIndex];
+    if (sensor) sensor.setpoint = targetTemp;
+    const setpointDrafts = storageGet("setpointDrafts", {});
+    if (sensor?.id) {
+      setpointDrafts[sensor.id] = targetInput?.value ?? String(targetTemp);
+    }
+    setpointDrafts[valveId] = targetInput?.value ?? String(targetTemp);
+    storageSet("setpointDrafts", setpointDrafts);
+    storageSet("sensorState", state.sensors);
+    storageSet("valveState", state.valves);
+    await sendWithFallback(API_PATHS.valveWrite, valveId, {
+      ...writePayloadBase(valveId, "valve"),
+      id: valveId,
+      targetTemp,
+    });
+    await loadState();
+    return;
+  }
+
+  if (button.classList.contains("applyManual")) {
+    const positionInput = card.querySelector(".position");
+    const position = Number(positionInput?.value || 0);
+    const valve = state.valves.find((item) => item.id === valveId);
+    if (valve) {
+      valve.position = position;
+      valve.isOpen = position > 0;
+    }
+    storageSet("valveState", state.valves);
+    await sendWithFallback(API_PATHS.valveWrite, valveId, {
+      ...writePayloadBase(valveId, "valve"),
+      id: valveId,
+      position,
+    });
+    await loadState();
+    return;
+  }
+
+  if (button.classList.contains("calibrateValve")) {
+    await postWithFallback(API_PATHS.valveCalibrate, valveId, {
+      ...writePayloadBase(valveId, "valve"),
+      id: valveId,
+    });
+    await loadState();
+  }
+});
+
+// Quick manual open/close buttons for channel cards
+document.addEventListener("click", (event) => {
+  const quickButton = event.target.closest(".quickPosition");
+  if (!quickButton) return;
+
+  const card = quickButton.closest(".valve-item");
+  if (!card) return;
+
+  const manualButton = card.querySelector(".valveManual");
+  if (manualButton && !manualButton.classList.contains("active")) {
+    manualButton.click();
+  }
+
+  const positionInput = card.querySelector(".position");
+  if (positionInput) {
+    positionInput.value = quickButton.dataset.position || "0";
+    positionInput.dispatchEvent(new Event("input", { bubbles: true }));
+  }
+
+  const applyButton = card.querySelector(".applyManual");
+  if (applyButton) applyButton.click();
+});
+window.addEventListener("load", async () => {
+  apiInput.value = storageGet("apiBase", "");
+  state.apiBase = normalizeApiUrl(apiInput.value);
+  initModbusTransportControls();
+  ensureApiBase();
+  selectedPort = storageGet("comPort", "");
+  attachEvents();
+  await refreshAll(true);
+  if (getModbusTransport() !== "tcp") {
+    await refreshPorts(true);
+  }
+  render();
+  if (selectedPort) {
+    comPortSelect.value = selectedPort;
+  }
+  await restoreSerialUi();
+  setInterval(() => {
+    if (state.apiBase) {
+      loadState().then(render).catch(() => {});
+    }
+  }, 3000);
+});