Web interface improvements

[johu]

I have worked on the ui-rework branch a bit more and I think it is now better than the original gui. It was just a few tweaks like allowing to turn auto-reload off and removing the double fetch of json data when reloading.

https://github.com/jsphuebner/esp8266-w ... /ui-rework

When it is lined up with the directory structure of the master branch I think I'll merge it over.

Only downside: it loads slower because it has more assets.

[Bigpie]

Maybe combine some of the js files into a single file to reduce the number of requests actually made. Same for the icons. Also using the cache headers.

[royhen99]

Thanks for doing this. I have been using this for over six months and this is a useful additional feature.

[johu]

Maybe combine some of the js files into a single file to reduce the number of requests actually made. Same for the icons. Also using the cache headers.

ok, js is obvious. How the icons and what are cache headers?

[Bigpie]

Cache heaters are on the http response to tell the brower how long it's safe to cache the files for, set this for a loooong time, drawback is you'd need to change the url each new release to be sure new assets are loaded, typically this would be with a rel url parameter.
e.g.
<script src="ui.js?rel=1234" type="text/javascript"></script>

https://www.keycdn.com/blog/http-cache-headers

The icon images is pretty similar to the sprites concept for games https://www.w3schools.com/Css/css_image_sprites.asp

I have on other esp8266 projects combined everything in to just a single html page to load to reduce the request count to speed things up, it's the number of requests that really slows things down, so anything to reduce that number helps.

I can try and find some time to look at it if needed.

[johu]

I have on other esp8266 projects combined everything in to just a single html page to load to reduce the request count to speed things up, it's the number of requests that really slows things down, so anything to reduce that number helps.

I can try and find some time to look at it if needed.

That would be awesome, the recent files are here https://github.com/jsphuebner/esp8266-w ... aster/data
I'll push one more commit with some typos fixed

EDIT: just tested

Code: Select all

server.sendHeader("Cache-Control", "max-age=86400");

when serving a file and that already yields a huge speedup. Ctrl+F5 force reloads.

[chrskly]

Yay! Great to see this stuff getting merged in. Really glad this has been useful

Happy to help out of course if there are any other tweaks needed.

[johu]

Yes that took a while its quite awesome.

Do you have ideas on how to make it more phone compatible? It's too wide when holding the phone upright

[chrskly]

I'd say the thing to do would be to use the "@media" css stuff to show/hide things depending on the width of the screen.

On small screens the left hand menu would normally be hidden, but pop out when you hit a 'hamburger' icon in the top left. Could probably do something similar with the right hand menu too.

Not sure what to do about the pop up modals. Been a while, so would need to check how wide they are ... if they need to be shrunk a bit.

I'll take a look a this this over the next few days.

[MattsAwesomeStuff]

Looks slick. Next time I fire up my motor I'll give it a whirl. Readability-alone looks superior.

[chrskly]

I had to do some fighting with some crappy Olimex boards but managed to get there in the end.

Changes:
* For screens where the width is less than 1000px, the menu bar will automatically shrink down and only show the icons.
* The icons get bigger to make them more easy to tap on a small screen
* The toggles and version box dissappear (no room for them)
* I've made the right hand menu a bit smaller to leave more space in the middle.
* You can manually grow/shrink the menu by clicking on the logo.
* Right hand menu gets hidden on the spot values page because it has not content

This works OK down to a screen around 800px wide.

Pull request with changes here : https://github.com/jsphuebner/esp8266-w ... ce/pull/21

All feedback/suggestions/thoughts are welcome

[johu]

I believe I have now merged the new UI to all variants main/master branches
- ESP8266
- ESP32 - UART
- ESP32 - CAN

Would be cool to unify this a bit more. The Web Code for ESP32-UART and ESP8266 is identical. The CAN Web code is a bit different but 90% identical I would say. Maybe we can shell out the commonalities in a submodule?