Skip to content

BarbourSmith/ESP3D-WEBUI

ย 
ย 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 

Repository files navigation

gulp package -en to build with english language

ESP3D-WEBUI

Latest stable release Release Version Release Date Travis (.org) branch

Latest development version Development Version GitHub last commit (branch) Travis (.org) branch

What is that ?

A web configuration tool for ESP3D 2.1 Originaly based on great UI from Jarek Szczepanski (imrahil): smoothieware-webui to get a multi firmware support for Repetier, Repetier for Davinci printer, (Marlin)[https://github.com/MarlinFirmware], Marlin Kimbra and of course Smoothieware

Why doing it ?

Original I ported smoothieware-webui to support ESP3D firmware and it was working pretty well and gave :smoothieware-webui-for-ESP3D But this UI has a 2 big limitations:
1 - you need internet access to get all libraries available to download, which may not happen when ESP is in AP mode for configuration if you do not have all js/css in your browser cache, or if you want to use in local environement, in that case not only ESP AP mode is not displaying UI properly but also STA mode - so it make the ESP useless

2 - it rely on server availability and certificat check, I got several certificat failure for unknown reason that made the UI not working

So the solution was to make all resources available - easy no ?

Yes but! ESP webserver is a convenient but it is also a very light webserver, allowing no more than 5 active connections at once and with a pretty limited filesystem space, so even concatenated all resources like bootstrap icon, angular and others libraries do not work as expected and do not fit the available space.

So I came with a full rewrite using pure javascript and resized resources:
1 - a compressed css based on bootstrap
2 - a local limited version of svg based of Glyphicons Halflings to get a small footprint.
3 - a customized version of smoothiecharts is used to display temperatures charts, it is simple and perfectly sized for the current purpose

The result is a monolitic file with a minimal size allowing almost full control of ESP3D board and your 3D printer

Sponsors


@bdring

Supporters

Become a sponsor or a supporter

  • A sponsor is a recurent donator
    The github sponsors are automaticaly displayed by github, if your tier is A big hug or more, to thank you for your support, your logo / avatar will be also added to the readme page with eventually with a link to your site.

  • A supporter is per time donator PayPal โ€“ The safer, easier way to pay online.
    If your donation is over a per year sponsor tier A big hug, to thank you for your support, your logo / avatar will be added to the readme page with eventually with a link to your site

Every support is welcome, giving support/ developing new features need time and devices, donations contribute a lot to make things happen, thank you.

Features

  • It supports several firmwares based on Repetier, Marlin, Smoothieware and GRBL.
  • It allows to fully configure ESP wifi
  • It has a macro support to add custom commands in UI by adding buttons launching some GCODE files from SD or ESP
  • It supports several languages, check list here
  • It allows to display a web camera in UI or detached
  • It allows to edit the Repetier EEPROM, Smoothieware config file, Marlin and GRBL settings
  • It allows to update the ESP3D by uploading the FW
  • it allows to control and monitor your 3D printer in every aspect (position, temperature, print, SD card content, custom command

Please look at screenshots: Main tab and menu:

Control panel:

Macro dialog:

Temperatures panel:

Extruder panel:

SD card panel:




Camera Tab:

Repetier EEPROM Editor tab:

Smoothieware config Editor tab:

Marlin config Editor tab:

GRBL config Editor tab: ESP3D settings Editor:

ESP3D Status:

ESP3D SPIFFS:

Installation

Please use the latest ESP3D firmware and copy the index.html.gz file on root of SPIFFS, in theory ESP3D have a version of web-ui but it may not be the latest one

Compilation & Development

Quick Start

The UI can be compiled using modern tools! Here's how to get started:

# 1. Install dependencies
npm install

# 2. Build for English (recommended - ~124KB)
gulp package --lang en

# 3. Output files will be in:
#    - dist/index.html.gz (compressed for ESP32)
#    - dist/index.html (uncompressed for development)

๐Ÿ“– For complete compilation instructions, see COMPILATION.md

Available Languages

# Single language builds (fit on ESP32):
gulp package --lang en      # English (~122KB)
gulp package --lang fr      # French (~122KB) 
gulp package --lang es      # Spanish (~125KB)
gulp package --lang de      # German
gulp package --lang it      # Italian
gulp package --lang ja      # Japanese
gulp package --lang pl      # Polish
gulp package --lang ptbr    # Portuguese (Brazil)
gulp package --lang ru      # Russian
gulp package --lang tr      # Turkish
gulp package --lang uk      # Ukrainian
gulp package --lang zh_CN   # Chinese (Simplified)
gulp package --lang hu      # Hungarian

# Multi-language build (may be too large for ESP32):
gulp package                 # All languages

NPM Scripts

npm run build        # Same as: gulp package
npm run build:en     # Same as: gulp package --lang en
npm run start        # Build English only (testing on hardware recommended)
npm run serve        # Not recommended - test on actual hardware instead

Testing Your Build

โš ๏ธ Important: Always test on actual hardware for reliable results.

Upload dist/index.html.gz to your ESP32 device for proper testing. Local testing with the proxy server can introduce bugs and doesn't accurately represent how the UI behaves on the actual hardware.

Automated Builds via GitHub Actions

๐Ÿค– Get builds automatically compiled for you!

Option 1: Request @MaslowBot as reviewer on your PR

  • When you create a PR, add @MaslowBot as a reviewer
  • The WebUI will be automatically compiled and attached as a downloadable artifact

Option 2: Comment on your PR

  • Comment "please build" or "/build" on any PR
  • The system will compile and provide a download link

Both methods create a downloadable "Updated UI.zip" file with installation instructions.

Development Requirements

  • Node.js: v20+ (tested with v20.19.5)
  • npm: v10+ (tested with v10.8.2)
  • Python: v3.12+ (for testing server)

Build Output

  • Compressed: dist/index.html.gz (~122-125KB)
  • Uncompressed: dist/index.html (~535KB)
  • Build time: ~3 seconds per language

Contribution / Development

For detailed development information, check the HOWTO-Test-Locally.md file or the wiki section Contribution/Development

Issues / Questions

You can submit ticket here or open discussion if it is not an issue here or Join the chat at Discord server

About

A Web UI for ESP8266 or ESP32 based boards connected to 3D printers / CNC

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 67.9%
  • HTML 26.2%
  • CSS 2.7%
  • Smarty 1.7%
  • Python 1.0%
  • TypeScript 0.4%
  • Batchfile 0.1%