Web interface improvements

Discussion about various user interfaces such as web interface, displays and apps
User avatar
johu
Site Admin
Posts: 5537
Joined: Thu Nov 08, 2018 10:52 pm
Location: Kassel/Germany
Has thanked: 147 times
Been thanked: 917 times
Contact:

Re: Web interface improvements

Post by 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.
image.png
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.
Support R/D and forum on Patreon: https://patreon.com/openinverter - Subscribe on odysee: https://odysee.com/@openinverter:9
User avatar
Bigpie
Posts: 1564
Joined: Wed Apr 10, 2019 8:11 pm
Location: South Yorkshire, UK
Has thanked: 72 times
Been thanked: 286 times

Re: Web interface improvements

Post by 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.
VW Beetle 2003
Outlander front generator
Prius Gen 3 inverter (EVBMW logic board)
Outlander charger
3x Golf GTE batteries
Chademo Charging
Outlander water heater
royhen99
Posts: 180
Joined: Sun Feb 20, 2022 4:23 am
Location: N. Wiltshire. UK
Has thanked: 13 times
Been thanked: 87 times

Re: Web interface improvements

Post by royhen99 »

Thanks for doing this. I have been using this for over six months and this is a useful additional feature.
User avatar
johu
Site Admin
Posts: 5537
Joined: Thu Nov 08, 2018 10:52 pm
Location: Kassel/Germany
Has thanked: 147 times
Been thanked: 917 times
Contact:

Re: Web interface improvements

Post by johu »

Bigpie wrote: Fri Nov 03, 2023 2:44 pm 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?
Support R/D and forum on Patreon: https://patreon.com/openinverter - Subscribe on odysee: https://odysee.com/@openinverter:9
User avatar
Bigpie
Posts: 1564
Joined: Wed Apr 10, 2019 8:11 pm
Location: South Yorkshire, UK
Has thanked: 72 times
Been thanked: 286 times

Re: Web interface improvements

Post by 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.
VW Beetle 2003
Outlander front generator
Prius Gen 3 inverter (EVBMW logic board)
Outlander charger
3x Golf GTE batteries
Chademo Charging
Outlander water heater
User avatar
johu
Site Admin
Posts: 5537
Joined: Thu Nov 08, 2018 10:52 pm
Location: Kassel/Germany
Has thanked: 147 times
Been thanked: 917 times
Contact:

Re: Web interface improvements

Post by johu »

Bigpie wrote: Sat Nov 04, 2023 9:11 am 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 ... erWeb/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.
Support R/D and forum on Patreon: https://patreon.com/openinverter - Subscribe on odysee: https://odysee.com/@openinverter:9
User avatar
chrskly
Posts: 145
Joined: Fri Feb 21, 2020 5:04 pm
Location: Dublin, Ireland
Has thanked: 39 times
Been thanked: 28 times
Contact:

Re: Web interface improvements

Post by 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.
User avatar
johu
Site Admin
Posts: 5537
Joined: Thu Nov 08, 2018 10:52 pm
Location: Kassel/Germany
Has thanked: 147 times
Been thanked: 917 times
Contact:

Re: Web interface improvements

Post by 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
Support R/D and forum on Patreon: https://patreon.com/openinverter - Subscribe on odysee: https://odysee.com/@openinverter:9
User avatar
chrskly
Posts: 145
Joined: Fri Feb 21, 2020 5:04 pm
Location: Dublin, Ireland
Has thanked: 39 times
Been thanked: 28 times
Contact:

Re: Web interface improvements

Post by 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
Posts: 832
Joined: Fri Apr 26, 2019 5:40 pm
Has thanked: 255 times
Been thanked: 153 times

Re: Web interface improvements

Post by MattsAwesomeStuff »

Looks slick. Next time I fire up my motor I'll give it a whirl. Readability-alone looks superior.
User avatar
chrskly
Posts: 145
Joined: Fri Feb 21, 2020 5:04 pm
Location: Dublin, Ireland
Has thanked: 39 times
Been thanked: 28 times
Contact:

Re: Web interface improvements

Post by chrskly »

I had to do some fighting with some crappy Olimex boards :roll: 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 :)

Post Reply