🌐 Web-сервер для удаленного доступа

Описание

Встроенный web-сервер позволяет получить доступ к панели управления 3D принтерами через браузер с любого устройства в локальной сети. Не требует установки дополнительного ПО — просто откройте браузер на компьютере, планшете или телефоне.

Возможности

✅ Просмотр статуса всех принтеров - в режиме реального времени
✅ Мониторинг температур - сопло, стол, камера
✅ Прогресс печати - процент выполнения и название файла
✅ WebSocket - обновления данных без перезагрузки страницы
✅ REST API - для интеграции с другими системами
✅ Адаптивный дизайн - работает на всех устройствах
✅ Безопасность - доступ только в локальной сети

Быстрый старт

1. Запуск web-сервера

Через UI:

Откройте 3D Printer Control Panel
Нажмите кнопку "🌐 Web Server"
При необходимости измените порт (по умолчанию 8000)
Нажмите "Запустить"
Скопируйте URL или нажмите "Открыть в браузере"

Автозапуск:

После первого запуска web-сервер будет автоматически запускаться при старте приложения
Чтобы отключить автозапуск - остановите сервер через UI

2. Доступ к web-интерфейсу

С того же компьютера:

http://localhost:8000

С другого устройства в сети:

http://[IP_ВАШЕГО_КОМПЬЮТЕРА]:8000

Например: http://192.168.1.100:8000

Как узнать IP адрес компьютера:

Windows: ipconfig в командной строке
macOS/Linux: ifconfig или ip addr

REST API

Базовый endpoint

GET http://localhost:8000/api

Возвращает информацию об API и доступных endpoint’ах.

Список принтеров

GET http://localhost:8000/api/printers

Пример ответа:

{
  "success": true,
  "count": 2,
  "printers": [
    {
      "id": "printer-1",
      "name": "Ender 3 Pro",
      "type": "klipper",
      "ip": "192.168.1.101",
      "status": {
        "state": "printing",
        "progress": 45
      }
    },
    {
      "id": "printer-2",
      "name": "Bambu P1S",
      "type": "bambu",
      "ip": "192.168.1.102",
      "status": {
        "state": "idle"
      }
    }
  ]
}

Данные конкретного принтера

GET /api/printers/:id

Пример ответа:

{
  "success": true,
  "printer": {
    "id": "printer-1",
    "name": "Ender 3 Pro",
    "type": "klipper",
    "ip": "192.168.1.101",
    "data": {
      "state": "printing",
      "progress": 45,
      "fileName": "benchy.gcode",
      "temps": {
        "nozzle": 210,
        "nozzle_target": 210,
        "bed": 60,
        "bed_target": 60
      }
    }
  }
}

Статус принтера

GET /api/printers/:id/status

Пример ответа:

{
  "success": true,
  "status": {
    "state": "printing",
    "progress": 45,
    "fileName": "benchy.gcode",
    "temps": {
      "nozzle": 210,
      "bed": 60
    }
  }
}

Проверка работоспособности (health)

GET /api/health

Пример ответа:

{
  "status": "ok",
  "timestamp": "2025-10-10T20:00:00.000Z",
  "connectedClients": 2
}

WebSocket Events

Web-интерфейс использует Socket.IO для обновлений в реальном времени.

Client → Server

Подписка на обновления принтера:

socket.emit('subscribe-printer', printerId);

Отписка от обновлений:

socket.emit('unsubscribe-printer', printerId);

Server → Client

Начальные данные при подключении:

socket.on('initial-data', (data) => {
  console.log(data.printers); // Список принтеров});

Обновление данных принтера:

socket.on('printer-update', (data) => {
  console.log(data.printerId);
  console.log(data.data); // Актуальные данные  console.log(data.timestamp);
});

Обновление статуса принтера:

socket.on('printer-status', (data) => {
  console.log(data.printerId);
  console.log(data.status);
  console.log(data.timestamp);
});

Интеграция с другими системами

Пример на Python

import requests
import json

# Получить список принтеровresponse = requests.get('http://localhost:8000/api/printers')
printers = response.json()

for printer in printers['printers']:
    print(f"{printer['name']}: {printer['status']['state']}")

# Получить данные конкретного принтераprinter_id = 'printer-1'
response = requests.get(f'http://localhost:8000/api/printers/{printer_id}')
printer_data = response.json()

print(f"Temperature: {printer_data['printer']['data']['temps']['nozzle']}°C")

Пример на Node.js

const axios = require('axios');

async function getPrinters() {
  const response = await axios.get('http://localhost:8000/api/printers');
  return response.data.printers;
}

async function getPrinterStatus(printerId) {
  const response = await axios.get(`http://localhost:8000/api/printers/${printerId}/status`);
  return response.data.status;
}

// ИспользованиеgetPrinters().then(printers => {
  printers.forEach(printer => {
    console.log(`${printer.name}: ${printer.status.state}`);
  });
});

WebSocket клиент (Node.js)

const io = require('socket.io-client');

const socket = io('http://localhost:8000');

socket.on('connect', () => {
  console.log('Connected to server');
  
  // Подписываемся на обновления принтера  socket.emit('subscribe-printer', 'printer-1');
});

socket.on('printer-update', (data) => {
  console.log(`Printer ${data.printerId} update:`, data.data);
});

socket.on('printer-status', (data) => {
  console.log(`Printer ${data.printerId} status: ${data.status.state}`);
});

Безопасность

Сетевой доступ

Web-сервер слушает на 0.0.0.0, что означает доступ со всех сетевых интерфейсов в локальной сети.

Если нужно ограничить доступ только с локального компьютера, это можно настроить в исходном коде (src/web-server.js).

Устранение неполадок

Сервер не запускается

Ошибка: "Port already in use"

Порт занят другим приложением
Решение: Измените порт на другой (например, 3001, 4000, 8080)

Ошибка: "Permission denied"

Недостаточно прав для открытия порта (< 1024 требуют администратора)
Решение: Используйте порт >= 1024

Не могу подключиться с другого устройства

Проверьте, что устройства в одной сети:
- Подключены к одному Wi-Fi/роутеру
- Находятся в одной подсети
Проверьте брандмауэр:
- Windows: Разрешите входящие подключения для порта
- macOS: Системные настройки → Безопасность → Брандмауэр
- Linux: sudo ufw allow 8000/tcp
Проверьте IP адрес:
- Убедитесь что используете правильный IP компьютера с сервером
- Попробуйте пинг: ping [IP]
Антивирус:
- Некоторые антивирусы блокируют локальные серверы
- Добавьте приложение в исключения

WebSocket не подключается

Проверьте что используете правильный URL
Откройте консоль браузера (F12) для просмотра ошибок
Убедитесь что сервер запущен
Проверьте что порт не заблокирован

Производительность

Оптимизация

Если у вас много принтеров (> 10):

Увеличьте polling interval в основном приложении
Подписывайтесь только на нужные принтеры
Ограничьте количество одновременных клиентов

Часто задаваемые вопросы (FAQ)

Q: Можно ли управлять принтерами через web-интерфейс?
A: В текущей версии - только просмотр. Управление доступно в основном приложении.

Q: Работает ли web-сервер когда приложение закрыто?
A: Нет, web-сервер работает только пока запущено основное приложение.

Q: Могу ли я получить доступ из интернета?
A: Технически да (через проброс портов), но не рекомендуется по соображениям безопасности.

Q: Поддерживает ли HTTPS?
A: Нет, только HTTP. Для локальной сети это безопасно.

Q: Могу ли я изменить дизайн web-интерфейса?
A: Да, файлы находятся в src/web-interface/ (HTML/CSS/JS).

Q: Будет ли мобильное приложение?
A: Web-интерфейс уже адаптирован для мобильных устройств. Нативного приложения пока не планируется.

Техническая информация

Архитектура

┌─────────────────────┐
│  Electron Main      │
│  - Printer Manager  │
│  - Bambu Adapters   │
└──────────┬──────────┘
           │
┌──────────▼──────────┐
│   Express Server    │
│   - REST API        │
│   - Socket.IO       │
└──────────┬──────────┘
           │
┌──────────▼──────────┐
│  Web Interface      │
│  - HTML/CSS/JS      │
│  - Chart.js         │
└─────────────────────┘

Технологии

Backend: Node.js, Express 4.x, Socket.IO 4.x
Frontend: Vanilla JavaScript (ES6+), HTML5, CSS3
Визуализация: Chart.js (будущее обновление)

Файлы проекта

src/
├── web-server.js              # Основной модуль web-сервера├── printer-manager.js         # Менеджер принтеров для API└── web-interface/
    ├── index.html            # HTML интерфейс    ├── style.css             # Стили    └── app.js                # JavaScript логика

История изменений

v1.5.28 (10 октября 2025)

✅ Оптимизирована передача данных (критические обновления первыми, offline принтеры только при изменении статуса)
✅ Добавлена очередь критических обновлений (максимум 10)
✅ Реализовано ограничение обновления температур и прогресса по таймингу основной панели
✅ Веб-панель получает все данные только от основного приложения (без прямого доступа к принтерам)
✅ Добавлены визуальные признаки (цвета карточек, статусов, прогресса, температур)
✅ Реализована сортировка принтеров по приоритету (error → paused → complete → ready → printing → offline)
✅ Статус "Подключено" интегрирован в одну строку с семафорами
✅ Клик по карточке принтера открывает его веб-интерфейс (Fluidd/Mainsail)
✅ Удалено модальное окно при клике на карточку
✅ Компактные статистики перенесены в верхний правый угол
✅ Исправлен перевод статуса "Standby" → "Готов"
✅ Добавлено звуковое уведомление для критических событий
✅ Кнопка "Помощь" ведет на локальную документацию (или GitHub)
✅ Отображение всех сетевых IP адресов хоста в модальном окне
✅ Семафоры статусов перемещены в одну строку с названием принтера (справа)
✅ Удалена кнопка "Обновить" (дублировала функционал "Проверить")

v1.0.0 (Октябрь 2025)

🎉 Первый релиз веб-сервера
✅ REST API для доступа к данным принтеров
✅ WebSocket для real-time обновлений
✅ Адаптивный веб-интерфейс с темной темой
✅ Поддержка Klipper и Bambu Lab принтеров
✅ Автозапуск при старте приложения
✅ Настройка порта (по умолчанию 8000)

Обратная связь

Нашли баг или есть предложение? Создайте Issue на GitHub

Версия: 1.5.28
Дата: Октябрь 2025
Автор: Tom Tomich

🌐 Web-сервер для удаленного доступа

Описание

Возможности

Быстрый старт

1. Запуск web-сервера

2. Доступ к web-интерфейсу

REST API

Базовый endpoint

Список принтеров

Данные конкретного принтера

Статус принтера

Проверка работоспособности (health)

WebSocket Events

Client → Server

Server → Client

Интеграция с другими системами

Пример на Python

Пример на Node.js

WebSocket клиент (Node.js)

Безопасность

Рекомендации

Сетевой доступ

Устранение неполадок

Сервер не запускается

Не могу подключиться с другого устройства

WebSocket не подключается

Производительность

Рекомендации

Оптимизация

Часто задаваемые вопросы (FAQ)

Техническая информация

Архитектура

Технологии

Файлы проекта

История изменений

v1.5.28 (10 октября 2025)

v1.0.0 (Октябрь 2025)

Обратная связь

💬 Задайте вопрос