🌐 Built-in Web Server for Remote Access

Description

The built-in web server provides access to the 3D printer control panel from any device on the local network via a browser. No extra software required — just open a browser on your PC, tablet, or phone.

Features

• ✅ View status of all printers - in real time
• ✅ Temperature monitoring - nozzle, bed, chamber
• ✅ Print progress - completion percentage and file name
• ✅ WebSocket - data updates without page reload
• ✅ REST API - for integration with other systems
• ✅ Responsive design - works on all devices
• ✅ Security - local network access only

Quick Start

1. Start the web server

Via UI:

1. Open 3D Printer Control Panel
2. Click the "🌐 Web Server" button
3. Change port if needed (default 8000)
4. Click "Start"
5. Copy URL or click "Open in browser"

Autostart:

• After first start, the web server will automatically start when the application launches
• To disable autostart - stop the server via UI

2. Access the web interface

From the same computer:

http://localhost:8000

From another device on the network:

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

For example: http://192.168.1.100:8000

How to find your computer IP:

• Windows: ipconfig in command prompt
• macOS/Linux: ifconfig or ip addr

REST API

Base endpoint

GET http://localhost:8000/api

Returns information about the API and available endpoints.

List of printers

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

Example response:

{
  "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"
      }
    }
  ]
}

Single printer data

GET /api/printers/:id

Example response:

{
  "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
      }
    }
  }
}

Printer status

GET /api/printers/:id/status

Example response:

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

Health check

GET /api/health

Example response:

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

WebSocket Events

The web interface uses Socket.IO for real-time updates.

Client → Server

Subscribe to printer updates:

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

Unsubscribe from updates:

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

Server → Client

Initial data on connect:

socket.on('initial-data', (data) => {
  console.log(data.printers); // List of printers});

Printer data update:

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

Printer status update:

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

Integration with other systems

Python example

import requests
import json

# Get list of printersresponse = requests.get('http://localhost:8000/api/printers')
printers = response.json()

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

# Get specific printer dataprinter_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 example

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;
}

// UsagegetPrinters().then(printers => {
  printers.forEach(printer => {
    console.log(`${printer.name}: ${printer.status.state}`);
  });
});

WebSocket client (Node.js)

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

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

socket.on('connect', () => {
  console.log('Connected to server');
  
  // Subscribe to printer updates  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}`);
});

Security

Recommendations

1. Don't expose the port externally - web server is intended for local network only
2. Use firewall - limit port access to trusted devices only
3. Use high ports - ports 8000-9000 are usually free and don't require admin rights

Network access

The web server listens on 0.0.0.0, which means it accepts connections on all network interfaces in the LAN.

If you need to limit access to localhost only, you can adjust it in the source code (src/web-server.js).

Troubleshooting

Server does not start

Error: "Port already in use"

• Port is occupied by another application
• Solution: Change port to another (e.g., 3001, 4000, 8080)

Error: "Permission denied"

• Insufficient rights to open port (< 1024 requires admin)
• Solution: Use port >= 1024

Cannot connect from another device

1. Check that devices are on the same network:

   • Connected to the same Wi-Fi/router
   • Are in the same subnet

2. Check firewall:

   • Windows: Allow incoming connections for the port
   • macOS: System Preferences → Security → Firewall
   • Linux: sudo ufw allow 8000/tcp

3. Check IP address:

   • Make sure you're using the correct IP of the computer with the server
   • Try ping: ping [IP]

4. Antivirus:

   • Some antiviruses block local servers
   • Add the application to exceptions

WebSocket cannot connect

1. Check that you're using the correct URL
2. Open browser console (F12) to view errors
3. Make sure the server is running
4. Check that the port is not blocked

Performance

Recommendations

• Max clients: Up to 20 simultaneous connections
• Update frequency: Every 30 seconds (same as main app)
• Memory usage: ~20-30 MB for server
• CPU load: Minimal (< 1%)

Optimization

If you have many printers (> 10):

• Increase polling interval in the main app
• Subscribe only to needed printers
• Limit the number of simultaneous clients

Frequently Asked Questions (FAQ)

Q: Can I control printers through the web interface?
A: In the current version - view only. Control is available in the main app.

Q: Does the web server work when the app is closed?
A: No, the web server only works while the main app is running.

Q: Can I access it from the internet?
A: Technically yes (via port forwarding), but not recommended for security reasons.

Q: Does it support HTTPS?
A: No, HTTP only. For local network this is safe.

Q: Can I change the web interface design?
A: Yes, files are located in src/web-interface/ (HTML/CSS/JS).

Q: Will there be a mobile app?
A: The web interface is already adapted for mobile devices. No native app is planned yet.

Technical information

Architecture

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

Technologies

• Backend: Node.js, Express 4.x, Socket.IO 4.x
• Frontend: Vanilla JavaScript (ES6+), HTML5, CSS3
• Visualization: Chart.js (future update)

Project files

src/
├── web-server.js              # Main web server module├── printer-manager.js         # Printer manager for API└── web-interface/
    ├── index.html            # HTML interface    ├── style.css             # Styles    └── app.js                # JavaScript logic

Changelog

v1.5.28 (Oct 10, 2025)

• ✅ Optimized data transfer (critical updates first, offline printers only on status change)
• ✅ Added critical updates queue (max 10)
• ✅ Implemented temperature and progress update limits based on main panel timing
• ✅ Web panel receives all data only from main app (no direct printer access)
• ✅ Added visual indicators (card colors, statuses, progress, temperatures)
• ✅ Implemented printer sorting by priority (error → paused → complete → ready → printing → offline)
• ✅ Status "Connected" integrated in one line with semaphores
• ✅ Click on printer card opens its web interface (Fluidd/Mainsail)
• ✅ Removed modal window on card click
• ✅ Compact statistics moved to top right corner
• ✅ Fixed status translation "Standby" → "Ready"
• ✅ Added sound notification for critical events
• ✅ Help button leads to local documentation (or GitHub)
• ✅ Display of all host network IP addresses in modal window
• ✅ Status semaphores moved to one line with printer name (right)
• ✅ Removed "Refresh" button (duplicated "Check" functionality)

v1.0.0 (October 2025)

• 🎉 First web server release
• ✅ REST API for printer data access
• ✅ WebSocket for real-time updates
• ✅ Responsive web interface with dark theme
• ✅ Support for Klipper and Bambu Lab printers
• ✅ Autostart on app launch
• ✅ Port configuration (default 8000)

Feedback

Found a bug or have a suggestion? Create an Issue on GitHub

Version: 1.5.28
Date: October 2025
Author: Tom Tomich