New WebUI Framework #48

luc-github · 2019-03-26T10:49:58Z

I got feedback from aganov:

@luc-github Do you have any plans for the web ui. My proposal is to use webpack for the build process and then we can use https://github.com/developit/preact (3kb) or https://github.com/choojs/choo (4kb) to organise the UI into components and bring some reactivity. Also we can replace glyph icons with some svg based icons like https://feathericons.com/ for example... What do you think?

here my answer:

Not yet, I was planning to reuse the existing javascript I have wrote for 3.X as I do not want online dependency in case printer is not connected to internet - but I am open to new solutions
I never used these projects do you ?
about glyph currently I use svg extracted from bootstrap, but I am also Ok to change - and there was a request to be able to add new ones so I am fine as soon the size is kept small

To sum up I open to everything but I am not sure I can study all solutions by my own, especially because I do not know them so any proposal is welcome

Because it is a good discussion - lets discuss

aganov · 2019-03-27T09:20:56Z

I'll try to setup example prototype with preact (or something else) and webpack when I have some spare time. I'll check the bundle size and give you the feedback.

luc-github · 2019-03-27T09:30:19Z

thank you, I have watched quickly one preact tutorial and it is a complete new world for me...
Even just setup is still not clear - so sample app would be great

luc-github · 2019-03-27T09:51:51Z

May be embedded page could be a good start for a prototype - it is not complex and could give a size reference also

aganov · 2019-03-28T10:07:11Z

I've created base app with preact + storeon, feather icons and bootstrap@4

The size of bundled index.html (html + css + js) is 183KB uncompressed and 30K after gzip. You can find the repo here: https://github.com/aganov/esp3d-ui

just run npm install and then npm run start. It will start the webpack-dev-server and open the application.

Build can be done with npm run build. We can introduce some env variables during build process for example LOCALE=de to build a language specific bundles.

I've disabled some of the bootstrap components => https://github.com/aganov/esp3d-ui/blob/master/src/stylesheets/_bootstrap.scss We can bring them back by uncommenting in the scss file.

-> % tree
.
├── components
│   ├── app.js
│   ├── head-movement.js
│   ├── machine-status.js
│   ├── nav-bar.js
│   └── temperatures.js
├── index.html
├── index.js
├── libraries
│   └── hooks.js
├── store
│   ├── index.js
│   ├── positions.js
│   └── temperatures.js
└── stylesheets
    ├── _bootstrap.scss
    └── application.scss

This is the SPA project structure. I'm using React with hooks => https://reactjs.org/docs/hooks-intro.html. Preact is just lightweight 3.4kB implementation of React.js. We will need some global state so I choose to use storeon. It is very lightweight 330B gzipped.

Here is screenshot from the "app"

I've added some random generated properties to illustrate dom rerendering...

  // This should be polled from websocket for example
  useInterval(() => {
    const positions = ["X", "Y", "Z"]
    const tempKeys = ["T1", "B"]

    store.dispatch("positions/update" + positions[Math.floor(Math.random() * positions.length)], Math.floor(Math.random() * 225))
    tempKeys.forEach(key => store.dispatch("temperatures/update", { key, value: Math.floor(Math.random() * 215) }))
  }, 1000)

Btw, if you find React.js a big bite for you, we can use Vue.js + vuex It has short and sweet learning curve but the bundle size will increase a lot (Vuejs is 22.8kB gzipped alone)

luc-github · 2019-03-28T10:39:12Z

Wow that was fast 🐱 - I need to read all that and digest it
I do not think it is a big bite but I start from 0 - full newbee here so long way to go and no idea how to start - thanks to your prototype I should have a reference to start.

ok going to bootstrap@4 is good.
What is storeon, used for global state, related to a preact : a preact component ? a js library ?

I will test the sample code and read it this afternoon and report - I may have a tons of questions - sorry in advance 😸

aganov · 2019-03-28T10:46:46Z

storeon is "state manager" so instead of using local scoped useState hook we are using some "global" state. You can read some information about Redux or Vuex. This will give you basic idea of "State Management Pattern"

aganov · 2019-03-28T11:00:06Z

Btw: Some links to start:

luc-github · 2019-03-28T17:49:05Z

Thank you - I have started reading several tutorials about Preact, including https://github.com/developit/preact - fall asleep watching last one 😸
I had also to read about VirtualDOM, ES2015 and every word I discover so I need couple of days, I really start from 0 so I need time.

Is Preact very different than React ?- as I found serveral tutorials and books for React
Does it worth I read them to understand the global concept and behavior ?

also @aganov as you seems mastering it, the does the script building can also compress the index.html, I guess yes reading that : https://medium.com/@rajaraodv/two-quick-ways-to-reduce-react-apps-size-in-production-82226605771a but did you it already

aganov · 2019-03-28T19:52:00Z

Almost everything you can find for react will apply to preact. Here you can read about the differences. Keep in mind that after releasing React.js v16.8 (the one with hooks) the whole community is moving from Class to Function components (for good). Actually my example project is using pre-release version of preact in order to use hooks today...

luc-github · 2019-03-28T19:55:36Z

Ok thank you. I have tested the prototype and UI is 100% identical unlike current one on every browsers I tested, very good.

aganov · 2019-03-28T20:18:35Z

About compression. Some fine tuning is needed there, involving terser-webpack-plugin, compression-webpack-plugin and optimize-css-assets-webpack-plugin. I will add them later on.

aganov · 2019-03-29T11:16:32Z

aganov/esp3d-ui@22fe698

-rw-r--r--  1 alex  staff   140K Mar 29 13:15 index.html
-rw-r--r--@ 1 alex  staff    25K Mar 29 13:15 index.html.gz

luc-github · 2019-03-31T13:48:08Z

Found this for reference : https://github.com/ooade/awesome-preact looks interresting
Still reading and I will start experimenting soon

luc-github · 2019-03-31T14:06:08Z

Additionnaly I found a size comparaison of simple hello world apps

so even Vuejs is easier to learn I think better stick to Preact

@aganov I have one question related to bootstrap and grid display as you looks WebDesign guru 😸.
Originally i used like you did in prototype grids display using:
<div className="col-md-6">...
but as in preferences we can hide some panels/components, then I moved to flex way to have more self adaptable UI :

.panel-flex-row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

and I also played with grid-template-columns: to adapt UI according resolution
do you have any advice on this ?

aganov · 2019-03-31T16:03:13Z

You can check bootstrap's references about flexbox https://getbootstrap.com/docs/4.0/utilities/flex/ also this references about display-ing and hiding stuff https://getbootstrap.com/docs/4.0/utilities/display/

The doc about responsive-breakpoints is very useful too

Since we write our source CSS in Sass, all our media queries are available via Sass mixins:

https://getbootstrap.com/docs/4.3/layout/overview/#responsive-breakpoints

luc-github · 2019-03-31T16:12:12Z

My mistake I did not checked 4.0
Thank you will check these links you provide
Now studying: :

luc-github · 2019-04-08T08:45:06Z

@aganov do you use gitter ?

It use Github ID so no need to create new account

luc-github · 2019-04-08T11:51:05Z

https://feathericons.com/ looks good, they seems cover all current needs

luc-github · 2019-04-25T09:42:57Z

Was busy these days but will continue on this soon

luc-github · 2019-05-19T08:04:07Z

This lib looks nice for popup https://popper.js.org/
It is auto adaptive according position in viewport, but 6KB gziped just for popup is little bit too much I think. May be the size can be tweaked in reactjs like for bootstrap. TBC

luc-github · 2019-06-16T15:45:04Z

Ok, I am super late in learning PreactJS I need to lear a lot of new concepts - understand them is not hard but use them is another story ...
Integrating bootstrap as scss instead of css is now what I am studiying using @aganov sample code - but slowly 😊 and with some pain 😈

luc-github · 2019-07-12T19:38:43Z

Ok learning curve is slow but I did not spent as much time as I wanted - still a lot to learn but in same time need to define the new UI

I choose to go to a header always visible , the menu in header should collapse if width is too low (TBD)
menu will show Dashboard, camera (optional), Settings and loggin(optional) then UI version with link on github on right

the Dashboard will be main UI, top will have a status area for print status / DHT temperature, wifi status, etc and TBD
The settings will be the full settings place unlike today : ESP3D, Printer, Preferences, File system, Update

I am not sure yet how it will be displayed but it is a start

Feedback / suggestions are welcome as usual

luc-github · 2019-07-13T18:58:20Z

@aganov thanks again a lot for your sample code - it is a tremendous help for me to understand how preact works, I won't be able to do anything without it - it is hard to start from scratch on such tech with so little tutorial available and out of date due to permanent evolution.

I am on router part, and next coming are storage and hooks parts - I feel exausted already just thinking of them 😜

ETE-Design · 2019-09-18T20:57:05Z

This looks really great :-) Will it be 3.0?

luc-github · 2019-09-18T21:45:30Z

Well framework should be this one yes. UI itself is not yet defined, I am super late on this. I should finish the fw base soon so I could focus on WebUI hopefully
Also I have created a repo for the missing icons https://github.com/luc-github/svg-icons
This one is part of mandatory development steps

luc-github · 2020-02-21T10:03:16Z

Ok still late on this but todo list is skrinking 😉
also esp8266 plan to set SPIFFS deprecated it become urgent to have a running ESP3D 3.0 and so need to work on WebUI implementation
March should be dedicated to new webUI as all new features are now put on hold - so please do not find any critical bug until new webUI is done 🙏

luc-github · 2020-03-05T08:43:56Z

Some update:
Thanks to @aganov giving advices and refreshing my notes onPreact my learning curve is not bad
Javascript ES6 syntax is more clear
I am able to fetch query at start and started to test bootstrap 4 components
I still need to re build a http query like in 2.X to be sure only one query is done at once, which will lead me on how to organize code
In same time I need to see how use Preact and Bootstrap for Modal dialog windows and tooltips this should be done this week.

The UI design itself is not yet defined but :
I would like to unify all settings in one place :

ESP3D settings (wifi and features),Printer settings, WebUI settings(preferences)
Files : ESP3D File System, SD files, any additionals FS like flash drive, etc

the header should be present only in PC / high res, for phone / low res menu should be responsive
the notification bar should display : printer name / print status / temperatures for 3D printers / positions for GRBL TBD for others infos

the Camera should allow to have 3 views:
1 - Control and camera splitted on 2 views
2 - Camera output in background with all control Overlay
3 - Camera output as main screen with notification area as described above only in overlay

A confortable UI in tablet / phone as option vs a reactive UI = mobile view

Limit modal windows for messages / alert / notification only - so no modal overlap unlike 2.1

any suggestion is welcome of course 😁

luc-github · 2020-03-22T15:12:16Z

Done week 1 :

1 - Dev server can be used to simulate all UI including basic queries so it will save time in pre-tests
2 - Code syntax is now clear, not yet fully but enough to start
3 - Code organisation mechanism is now clear
4 - Major functions to be write are now identified vs possible available libraries
5 - Dev server can be used to simulate all UI including basic queries so it will save time in pre-tests
6 - Bootstrap Modal usage is now ok using native bootstrap 4.0 (no transition effect but UI is ok so far)
7 - Bootstrap usage limitations is now more clear, tooltips need JQuery so we will go to classic tooltips

Conclusion : so far so good 😸

Done week 2:

1 - Test translation libraries and identify the good one among:

preact-i18nline Size +13KB gzipped => not able to work and footprint is too big 💣
preact-i18n about 1.3KB gzipped =>Ok 🥇 but with bug which make lib useless : All translations disappear after any component change its state (preact X) synacor/preact-i18n#39
preact-translate Bundle size: ~1KB => not able to work 💣
current plan is to code simple lib as no working libs found 💻

2 - Identify/test a chart library for the temperatures for 3D printers (current smoothie is 10KB gzipped):

preact-chartjs-2 Size 130KB => too big 💣
vx Size 17KB =>not able to work and too big 💣
Code simple lib like suggested here Size ??? => TBD 🤔

Any suggestion of small foot print lib is welcome

3 - test axios vs fetch

axios (using XMLHttpRequest) : Size 5KB gzipped
fetch: native so Size 0KB => stay with fetch
test of fetch API for basic Get 🆗

4 - training/tests on Preact Hooks, Preact code syntax and scss syntax 👨‍🎓

Done week 3:

1 - port GET http queries manager from 2.1 using XMLHttpRequest👨‍🎓
2 - code simple light translate manager 👨‍🎓
3 - code first loading page of webUI and start code skeleton of 3.0 with websocket setup👨‍🎓
4 - add websocket support to development server to simulate ESP3D firmware 👨‍🎓

Done week 4:

1 - add POST query and post upload to http queries manager 👨‍🎓
2 - allow download / upload to devt server 👨‍🎓
3 - add preferences loading files to start process 👨‍🎓
4 - define UI components list for 3.0 :

Jog interface allowing manual distance in addition of preset ones
List interface
Progress bar (bootstrap) 👨‍🎓
Camera overlay / off / full / embedded👨‍🎓
Split GRBL / 3D Printer code 👨‍🎓
use switch instead of check box ?
Tooltips (use html one) 👨‍🎓
File upload selector (bootstrap) 👨‍🎓
Temperature graph : write one or find a component (TBC)
Wizard dialogs to setup UI : Review Wizard #55 (comment)
Files interface all in same place (ESP/SD/Flash if any )
Settings all in same place : ESP settings / Machine settings / UI preferences
Have phone/tablet improved version
Notification area (Machine status/temperature/conected devices like DHT/Error/ etc)
Update for ESP3D firmware
Full status of current configuration including (wifi signal strength. esp info, browser info/etc)
Manual command terminal easy to use and access any time
Macro area
Specific control according Machine :
- temperature / extruder for 3D printer according settings
- spin / mist / flood / probe controls for GRBL according settings
Auto disconnection if no board connection
Configurable area for extern code stored on flash or online

Feel free to comment if any missing 😸

DanielYWoo · 2020-04-28T14:41:11Z

We willl have modern Html5 streaming control instead of flash, right?

<video autoplay controls>
    <source src="/camera.m3u8" type="application/vnd.apple.mpegurl" />
    <p class="warning">Your browser doesn't support video</p>
</video>

luc-github · 2020-04-28T16:26:52Z

@DanielYWoo what flash are you talking about ? there is not flash in code

DanielYWoo · 2020-04-29T02:43:00Z

From the project homepage, camera tab, looks like a flash player.

luc-github · 2020-04-29T05:20:34Z

ho this come from camera, not from esp3d, esp3d just use ip and display camera page in frame for ip cam

luc-github · 2020-06-16T09:42:01Z

I think it is time to close this topic - I am still on learning curve about the good practice and still got some Preact crash but I mostly handle them by trial/error

discussion is now more here : #94

github-actions · 2020-09-21T11:13:18Z

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.

luc-github added Enhancement help welcome Feature request Feedback Welcome 3.0 labels Mar 26, 2019

luc-github mentioned this issue Mar 26, 2019

ESP 3D 3.0 Status luc-github/ESP3D#239

Closed

luc-github mentioned this issue Mar 22, 2020

[Question] Local Development #91

Closed

luc-github closed this as completed Jun 16, 2020

github-actions bot added the outdated label Sep 21, 2020

github-actions bot locked as resolved and limited conversation to collaborators Sep 21, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

New WebUI Framework #48

New WebUI Framework #48

luc-github commented Mar 26, 2019

aganov commented Mar 27, 2019

luc-github commented Mar 27, 2019 •

edited

Loading

luc-github commented Mar 27, 2019

aganov commented Mar 28, 2019

luc-github commented Mar 28, 2019

aganov commented Mar 28, 2019

aganov commented Mar 28, 2019 •

edited

Loading

luc-github commented Mar 28, 2019 •

edited

Loading

aganov commented Mar 28, 2019

luc-github commented Mar 28, 2019 •

edited

Loading

aganov commented Mar 28, 2019

aganov commented Mar 29, 2019

luc-github commented Mar 31, 2019

luc-github commented Mar 31, 2019 •

edited

Loading

aganov commented Mar 31, 2019

luc-github commented Mar 31, 2019 •

edited

Loading

luc-github commented Apr 8, 2019

luc-github commented Apr 8, 2019

luc-github commented Apr 25, 2019

luc-github commented May 19, 2019

luc-github commented Jun 16, 2019

luc-github commented Jul 12, 2019 •

edited

Loading

luc-github commented Jul 13, 2019 •

edited

Loading

ETE-Design commented Sep 18, 2019

luc-github commented Sep 18, 2019 •

edited

Loading

luc-github commented Feb 21, 2020 •

edited

Loading

luc-github commented Mar 5, 2020 •

edited

Loading

luc-github commented Mar 22, 2020 •

edited

Loading

DanielYWoo commented Apr 28, 2020

luc-github commented Apr 28, 2020

DanielYWoo commented Apr 29, 2020

luc-github commented Apr 29, 2020

luc-github commented Jun 16, 2020

github-actions bot commented Sep 21, 2020

New WebUI Framework #48

New WebUI Framework #48

Comments

luc-github commented Mar 26, 2019

aganov commented Mar 27, 2019

luc-github commented Mar 27, 2019 • edited Loading

luc-github commented Mar 27, 2019

aganov commented Mar 28, 2019

luc-github commented Mar 28, 2019

aganov commented Mar 28, 2019

aganov commented Mar 28, 2019 • edited Loading

luc-github commented Mar 28, 2019 • edited Loading

aganov commented Mar 28, 2019

luc-github commented Mar 28, 2019 • edited Loading

aganov commented Mar 28, 2019

aganov commented Mar 29, 2019

luc-github commented Mar 31, 2019

luc-github commented Mar 31, 2019 • edited Loading

aganov commented Mar 31, 2019

luc-github commented Mar 31, 2019 • edited Loading

luc-github commented Apr 8, 2019

luc-github commented Apr 8, 2019

luc-github commented Apr 25, 2019

luc-github commented May 19, 2019

luc-github commented Jun 16, 2019

luc-github commented Jul 12, 2019 • edited Loading

luc-github commented Jul 13, 2019 • edited Loading

ETE-Design commented Sep 18, 2019

luc-github commented Sep 18, 2019 • edited Loading

luc-github commented Feb 21, 2020 • edited Loading

luc-github commented Mar 5, 2020 • edited Loading

luc-github commented Mar 22, 2020 • edited Loading

Done week 1 :

Done week 2:

Done week 3:

Done week 4:

DanielYWoo commented Apr 28, 2020

luc-github commented Apr 28, 2020

DanielYWoo commented Apr 29, 2020

luc-github commented Apr 29, 2020

luc-github commented Jun 16, 2020

github-actions bot commented Sep 21, 2020

luc-github commented Mar 27, 2019 •

edited

Loading

aganov commented Mar 28, 2019 •

edited

Loading

luc-github commented Mar 28, 2019 •

edited

Loading

luc-github commented Mar 28, 2019 •

edited

Loading

luc-github commented Mar 31, 2019 •

edited

Loading

luc-github commented Mar 31, 2019 •

edited

Loading

luc-github commented Jul 12, 2019 •

edited

Loading

luc-github commented Jul 13, 2019 •

edited

Loading

luc-github commented Sep 18, 2019 •

edited

Loading

luc-github commented Feb 21, 2020 •

edited

Loading

luc-github commented Mar 5, 2020 •

edited

Loading

luc-github commented Mar 22, 2020 •

edited

Loading