Web interface improvements
- johu
- Site Admin
- Posts: 5791
- Joined: Thu Nov 08, 2018 10:52 pm
- Location: Kassel/Germany
- Has thanked: 157 times
- Been thanked: 1025 times
- Contact:
Re: Web interface improvements
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.
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
- Bigpie
- Posts: 1595
- Joined: Wed Apr 10, 2019 8:11 pm
- Location: South Yorkshire, UK
- Has thanked: 75 times
- Been thanked: 304 times
Re: Web interface improvements
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
Outlander front generator
Prius Gen 3 inverter (EVBMW logic board)
Outlander charger
3x Golf GTE batteries
Chademo Charging
Outlander water heater
-
- Posts: 211
- Joined: Sun Feb 20, 2022 4:23 am
- Location: N. Wiltshire. UK
- Has thanked: 16 times
- Been thanked: 101 times
Re: Web interface improvements
Thanks for doing this. I have been using this for over six months and this is a useful additional feature.
- johu
- Site Admin
- Posts: 5791
- Joined: Thu Nov 08, 2018 10:52 pm
- Location: Kassel/Germany
- Has thanked: 157 times
- Been thanked: 1025 times
- Contact:
Re: Web interface improvements
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
- Bigpie
- Posts: 1595
- Joined: Wed Apr 10, 2019 8:11 pm
- Location: South Yorkshire, UK
- Has thanked: 75 times
- Been thanked: 304 times
Re: Web interface improvements
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.
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
Outlander front generator
Prius Gen 3 inverter (EVBMW logic board)
Outlander charger
3x Golf GTE batteries
Chademo Charging
Outlander water heater
- johu
- Site Admin
- Posts: 5791
- Joined: Thu Nov 08, 2018 10:52 pm
- Location: Kassel/Germany
- Has thanked: 157 times
- Been thanked: 1025 times
- Contact:
Re: Web interface improvements
That would be awesome, the recent files are here https://github.com/jsphuebner/esp8266-w ... erWeb/dataBigpie 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.
I'll push one more commit with some typos fixed
EDIT: just tested
Code: Select all
server.sendHeader("Cache-Control", "max-age=86400");
Support R/D and forum on Patreon: https://patreon.com/openinverter - Subscribe on odysee: https://odysee.com/@openinverter:9
- chrskly
- Posts: 149
- Joined: Fri Feb 21, 2020 5:04 pm
- Location: Dublin, Ireland
- Has thanked: 39 times
- Been thanked: 38 times
- Contact:
Re: Web interface improvements
Yay! Great to see this stuff getting merged in. Really glad this has been useful ![Smile :)](./images/smilies/icon_e_smile.png)
Happy to help out of course if there are any other tweaks needed.
![Smile :)](./images/smilies/icon_e_smile.png)
Happy to help out of course if there are any other tweaks needed.
Christian
My 1965 Ford Mustang project
chrskly.com
My 1965 Ford Mustang project
chrskly.com
- johu
- Site Admin
- Posts: 5791
- Joined: Thu Nov 08, 2018 10:52 pm
- Location: Kassel/Germany
- Has thanked: 157 times
- Been thanked: 1025 times
- Contact:
Re: Web interface improvements
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
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
- chrskly
- Posts: 149
- Joined: Fri Feb 21, 2020 5:04 pm
- Location: Dublin, Ireland
- Has thanked: 39 times
- Been thanked: 38 times
- Contact:
Re: Web interface improvements
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.
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.
Christian
My 1965 Ford Mustang project
chrskly.com
My 1965 Ford Mustang project
chrskly.com
-
- Posts: 898
- Joined: Fri Apr 26, 2019 5:40 pm
- Has thanked: 291 times
- Been thanked: 177 times
Re: Web interface improvements
Looks slick. Next time I fire up my motor I'll give it a whirl. Readability-alone looks superior.
- chrskly
- Posts: 149
- Joined: Fri Feb 21, 2020 5:04 pm
- Location: Dublin, Ireland
- Has thanked: 39 times
- Been thanked: 38 times
- Contact:
Re: Web interface improvements
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![Smile :)](./images/smilies/icon_e_smile.png)
![Rolling Eyes :roll:](./images/smilies/icon_rolleyes.png)
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
![Smile :)](./images/smilies/icon_e_smile.png)
Christian
My 1965 Ford Mustang project
chrskly.com
My 1965 Ford Mustang project
chrskly.com
- johu
- Site Admin
- Posts: 5791
- Joined: Thu Nov 08, 2018 10:52 pm
- Location: Kassel/Germany
- Has thanked: 157 times
- Been thanked: 1025 times
- Contact:
Re: Web interface improvements
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?
- 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?
Support R/D and forum on Patreon: https://patreon.com/openinverter - Subscribe on odysee: https://odysee.com/@openinverter:9