search

luc-github / ESP3D-WEBUI

A Web UI for ESP8266 or ESP32 based boards connected to 3D printers / CNC
GNU General Public License v3.0
772 stars 306 forks source link

New WebUI Framework #48

Closed luc-github closed 4 years ago

luc-github commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

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

aganov commented 5 years ago

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"

Screen Shot 2019-03-28 at 11 24 34

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 commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

Btw: Some links to start:

luc-github commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

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

aganov commented 5 years ago

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 commented 5 years ago

https://github.com/aganov/esp3d-ui/commit/22fe698c5ca0e27f418359234a719ced2c427ec2

-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 commented 5 years ago

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

luc-github commented 5 years ago

Additionnaly I found a size comparaison of simple hello world apps image 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 commented 5 years ago

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 commented 5 years ago

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

luc-github commented 5 years ago

@aganov do you use gitter ? Join the chat at https://gitter.im/luc-github/ESP3D

It use Github ID so no need to create new account

luc-github commented 5 years ago

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

luc-github commented 5 years ago

Was busy these days but will continue on this soon

luc-github commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

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

image

Feedback / suggestions are welcome as usual

luc-github commented 5 years ago

@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 commented 5 years ago

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

luc-github commented 5 years ago

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 commented 4 years ago

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 commented 4 years ago

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 :

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 commented 4 years ago

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:

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

Any suggestion of small foot print lib is welcome

3 - test axios vs fetch

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 :

Feel free to comment if any missing 😸

DanielYWoo commented 4 years ago

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 commented 4 years ago

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

DanielYWoo commented 4 years ago

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

luc-github commented 4 years ago

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

luc-github commented 4 years ago

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 : https://github.com/luc-github/ESP3D-WEBUI/issues/94

github-actions[bot] commented 4 years ago

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.