Version 2.1.X

This version is the production version, features are frozen, only bugfixes are accepted.

WebUI should support features of the following firmwares:

image image

The ESP3D-WEBUI 2.X must be used with ESP3D 2.X, ESP3DLib 1.X.


If any error or need any addition,
please let me know by opening a ticket here
or submit a fix by PR or use the edit button on top menu

Subsections of Version 2.1.X

Features

The V2.1.X features are :

  • Multiple firmwares support: Repetier, Marlin, Smoothieware and GRBL.
  • Multiple languages support
  • Full WiFi configuration of ESP3D settings including web update
  • Control and monitor your connected board and firmware in every aspect (position, temperature, print, SD card content, custom commands, etc…)
  • Macro support to add custom commands in WebUI by adding buttons launching some GCODE files from SD or ESP
  • IP Camera support.

If any error or need any addition,
please let me know by opening a ticket here
or submit a fix by PR or use the edit button on top menu

Installation

The Web UI is represented by one file : index.hml.gz The full package with all languages is available here But it may not fit your available size on flash, so you can select a single language package here which is lighter and will fit smallest boards.

Upload index.html.gz

Using embedded uploader

image image

If the embedded is not visible you can access to it using: http://your_IP_address?forcefallback=yes anytime

Using Web UI

You can upload file using Web UI

image image

image image

Finalize update

Refresh the page to http://your_IP to display updated Web interface.

image image

Note: you can also upload a customized favicon.ico


If any error or need any addition,
please let me know by opening a ticket here
or submit a fix by PR or use the edit button on top menu

Documentation

Browser compatibility for ESP3D 2.1.X

OS Browser Support Comment Action
Win7/Win10 IE 11 Limited Dashboard is has one column due to no grid layout support Defined as limitation
Win7 Safari 5.1.7 2012 Low Dashboard is has one column due to no grid layout support / not good SVG support so no Jog UI Defined as limitation
Win10 Edge Ok
Win7 /Win10 Chrome Ok
Win7 Opera Ok
Win7 Firefox Ok
Android Chrome Ok
OSX Safari 11.1.2 2018 Ok

The documentation section will help you on:


If any error or need any addition,
please let me know by opening a ticket here
or submit a fix by PR or use the edit button on top menu

Subsections of Documentation

Translations

The WebUI unfortunatly does not support UTF8, so for special character specific to the language like : ¡ í á ó
please refere to : specialcharacters.php and wiki

Language currently supported

English (en) : 100% Here

French (fr) : 72% Here

German (de): 72% Here

Hungarian: (hu) 99% Here

Italian : (it) 72% Here

Spanish : (es) 72% Here

Polish : (pl) 87% Here

Russian: (ru) 87% Here

Ukrainian: (uk) 87% Here

Portuguese-Br: (ptbr) 97% Here

Chinese (simplified) (zh_CN): 99% Here

Chinese (traditional) (zh_TW): 99% Here

Japanese (ja): 99% Here

Turkish: (tr) 97% Here

How to translate

  • Translate the right side only if necessary
  • Check language.tpl if any update
  • Submit Issue or PR with modified file

Note: English is the reference but it can be adjusted if necessary, just add the corresponding reference to the english file.

To add a new language :

The template file is here

  • Change lang to the proper local descriptor
  • Translate the right side only
  • Submit Issue with modified file (do not do PR as another file need to be updated)

If any error or need any addition,
please let me know by opening a ticket here
or submit a fix by PR or use the edit button on top menu

Camera support

You can display external IP camera stream enabling the camera page, and put ip address in input control. The address depend on your camera, same for credentials

The screenshot is just an example

image image

If your camera cannot be opened in web browser, then it is not possible to capture it in WebUI.

If you use espcam32 and want to use esp3d also on it, you need to use ESP3D V3 with ESP3D-WEBUI V3


If any error or need any addition,
please let me know by opening a ticket here
or submit a fix by PR or use the edit button on top menu

Compilation

To be able to generate file from sources you need to install nodejs, gulp and some addons.
1 - Install current nodejs LTS (v10.15.3)
2 - Install gulp-cli globaly npm install --global gulp-cli
3 - Install gulp globaly npm install --global gulp@4.0.0
4 - Install all addons npm install

You should have something like this :

E:\github\ESP3D-WEBUI>node -v
v10.14.0

E:\github\ESP3D-WEBUI>gulp -v
[22:17:03] CLI version 2.0.1
[22:17:03] Local version 4.0.0

E:\github\ESP3D-WEBUI>npm -v
6.4.1

5 - Do the code modification you want, then launch gulp package.

E:\github\ESP3D-WEBUI>gulp package
[15:17:13] Using gulpfile E:\github\ESP3D-WEBUI\gulpfile.js
[15:17:13] Starting 'package'...
[15:17:13] Starting 'clean'...
[15:17:13] Finished 'clean' after 5.6 ms
[15:17:13] Starting 'lint'...
[15:17:13] Finished 'lint' after 144 ms
[15:17:13] Starting 'Copy'...
[15:17:13] Finished 'Copy' after 21 ms
[15:17:13] Starting 'concatApp'...
[15:17:14] Finished 'concatApp' after 53 ms
[15:17:14] Starting 'includehtml'...
[15:17:14] Finished 'includehtml' after 7.91 ms
[15:17:14] Starting 'includehtml'...
[15:17:14] Finished 'includehtml' after 6.18 ms
[15:17:14] Starting 'replaceSVG'...
[15:17:14] Finished 'replaceSVG' after 5.36 ms
[15:17:14] Starting 'minifyApp'...
\style.css: 125691
\style.css: 102958
[15:17:16] Finished 'minifyApp' after 2.2 s
[15:17:16] Starting 'smoosh'...
[15:17:16] Finished 'smoosh' after 117 ms
[15:17:16] Starting 'compress'...
[15:17:16] Finished 'compress' after 26 ms
[15:17:16] Starting 'clean2'...
[15:17:16] Finished 'clean2' after 3.83 ms
[15:17:16] Finished 'package' after 2.61 s

If no issue, a file called index.html.gz will be generated at the root of repository, so you just need to upload it like described in installation page

By default is build a multilanguage file, if file is too big for your flash size you can build with only english and one additional language:

  • gulp package --lang en will only build english
  • gulp package --lang fr will only build french + english
  • gulp package --lang es will only build spanish + english
  • gulp package --lang it will only build italian + english
  • gulp package --lang de will only build german + english
  • etc…

If any error or need any addition,
please let me know by opening a ticket here
or submit a fix by PR or use the edit button on top menu

Showcase

Full UI

image image

Terminal panel

image image

Jog panel

image image

Macro dialog

image image

Extruders panel

image image

Temperatures panel

image image

SD panel

Repetier / smoothieware

Long names support image image

Marlin

Short names only image image

Camera tab

image image

ESP3D tab

image image

Status dialog

image image

Flash filesystem dialog

image image

Firmware update dialog

image image

Target Firmware settings

Repetier

image image

Smoothieware

image image


If any error or need any addition,
please let me know by opening a ticket here
or submit a fix by PR or use the edit button on top menu

Credits

Based on great UI from Jarek Szczepanski (imrahil): smoothieware-webui

Libraries

A compressed css

Based on bootstrap 3.x

A stripped and limited version of svg icons

Based on Glyphicons Halflings to get a small footprint.

A Customized version of smoothiecharts

Based on smoothiecharts to display temperatures charts