Web interface improvements

[chrskly]

Hi all,

I've been poking around with the html/css/js in an attempt to try and make some improvements to the web interface. I'm by no means a designer, but I do have some familiarity with web technologies.

The general idea is, menu on the left, content in the middle, and context-specific actions on the right. It's still essentially a one page site with some js for the dynamic parts, so, under the hood it hasn't really changed.

This is very much a work in progress, but I wanted to get some feedback from people to see what they think. Is this something that people would be interested in? I'm not married to the green by the way, it's more about grouping things together and trying to make the interface a bit more friendly and understandable.

One thing I was wondering about, for example, was adding more context-specific help. For example, some help text on the parameters page explaining what each parameter was for. Not sure where just yet though

I started out by making changes and uploading files to my inverter, but that got a bit tedious. So, I created a little docker image to allow me to work on the web interface locally on my laptop. It also mocks some of the responses from the inverter, the /cmd calls, so that things like params are populated when developing. The mocks responses could be extended and improved a bit. It's using a little python app, but it could actually just be done with nginx instead to keep it simple.

I sometimes see people on the forum using their phone to access their inverters, so, making it work well on a small screen would be on the to do list as well.

Anyway, any and all feedback welcome.

I'm working on a fork here : https://github.com/chrskly/esp8266-web- ... /ui-rework

[Isaac96]

Looks good! Context-specific help might be tough just because there's so much information, so links to the wiki could be an excellent supplementary resource.

One thing I'd love to have -- the enter key working in the 'send command' box. (currently the user needs to press 'send' or whatever button.) A JS onkeypress or something like that?

[johu]

Yes, loving that!
The SWD functionality is in alpha state, so might want to hide that by default. It is only useful to people who made their own boards and do not have an ST-Link or something. On already programmed boards it is not needed.
The Spot values are kindof stretched now. Maybe you have some better idea than me for CAN mapping that would also allow mapping parameters?

[joromy]

This looks great!!
One thing that is annoying with old interface are the "name value unit min max default" is scrolled away.
Would be nice if it was static, but you may already be ahead with that?

[chrskly]

Looks good! Context-specific help might be tough just because there's so much information, so links to the wiki could be an excellent supplementary resource.

Yeah, it could be tricky to squeeze in. I was thinking about having little question marks dotted about and they open a little popup/overlay. Or using the bottom part of the right-hand bar for this. Not sure. I'll play around a bit and see if any of this works.

The other option is to have a whole separate help section. I.e., a menu item like parameters.

One thing I'd love to have -- the enter key working in the 'send command' box. (currently the user needs to press 'send' or whatever button.) A JS onkeypress or something like that?

This is a great idea. I've run into this myself, but had forgotten about it. I've added it to the list.

The SWD functionality is in alpha state, so might want to hide that by default. It is only useful to people who made their own boards and do not have an ST-Link or something. On already programmed boards it is not needed.

This is good to know. Maybe we could show 'UART Update' by default but have a little button/link near the bottom with some text like 'show advanced options...' and that would show the SWD update form.

The Spot values are kindof stretched now. Maybe you have some better idea than me for CAN mapping that would also allow mapping parameters?

Yeah, this is a good point. The spot values page does feel a bit overloaded. Maybe CAN mapping should be a separate page/menu item to spot values.

Similarly, I was wondering about how to deal with the interaction between spot values and plot. Clicking on the checkboxes on the spot values page to configure the plots is not super intuitive. Maybe there's a nice way to choose the spot values to plot from the plot page itself.

One thing that is annoying with old interface are the "name value unit min max default" is scrolled away.
Would be nice if it was static, but you may already be ahead with that?

That's a great idea. Added to the list.

[Leo M]

Great job!I downloaded the files, I'll try the functionality ) write when you confirm all the updates from the list above ...good luck

[janosch]

This looks neat.

I thought some visual feedback when I changed a param that the POST request was successful would be great.
In the current interface I would sometimes refresh the page to make sure my changes were saved.

[chrskly]

Great job!I downloaded the files, I'll try the functionality ) write when you confirm all the updates from the list above ...good luck

Thanks, appreciate the offer. Definitely would like some help with testing once I think it's in good enough shape for others to try out.

[chrskly]

This looks neat.

I thought some visual feedback when I changed a param that the POST request was successful would be great.
In the current interface I would sometimes refresh the page to make sure my changes were saved.

This is a good one. I've added it to the list. Thanks!

[Leo M]

Slightly redesigned the design.)))

[Leo M]

Just remove ( /) and don't change the icons.

[Leo M]

what is planned in this block ? I would like to see the output code....

[Leo M]

my version of the design...)))

[chrskly]

A little update on my progress.

I've been working on adding in some pop up dialogs for certain pages.

I've also added a whole new page for CAN mapping rules. This way you can see all of the rules in one place with no superfluous information. Clicking the 'Add a new CAN mapping' button brings up a popup dialog for filling out the details.

After a little more polish, I'll start cutting back and simplifying the spot values page by removing the CAN mapping stuff from there.



I've also re-worked the way importing param from a file works. A single click to load the file chooser dialog. As soon as you select the file, it brings up a popup to show progress and starts importing the params.

[Leo M]

Great! I am working in parallel on my own version of Interfax . Your ideas are excellent. Continue developing .I really like your ideas . I will be happy to apply them and will certainly indicate your authorship in my version.good luck with your creativity.

[chrskly]

Dashboard is coming together.

Top left box displays some key stats. Top right shows error messages from inverter. Both auto-refresh.

Bottom right is a terminal type of box for entering commands.

Any thoughts on what to do with the 4th box?

[joromy]

Maybe a gauge?
Maybe join the two left boxes, and add motor temp and other essential info?

[johu]

That looks very nice!
Just a note on auto-refresh: it will disturb updates, so it must be disabled while sending one. Also when sending an update from another device or browser tab auto updating pages need to be closed.

[chrskly]

Maybe a gauge?
Maybe join the two left boxes, and add motor temp and other essential info?

Yeah, these are good suggestions. I'll play around and try some stuff out.

[chrskly]

That looks very nice!
Just a note on auto-refresh: it will disturb updates, so it must be disabled while sending one. Also when sending an update from another device or browser tab auto updating pages need to be closed.

Thanks!

Good to know about the updates. I have a function that's called on a timer to do the refresh of all of the various bits. I'll put a hidden field somewhere with an enable/disable flag and check for that in that loop. I'll set this flag at the start of a firmware update to block the refresh.

Not sure how I could block auto-refresh across clients though. Will need to think a bit about that. Might just be a case of putting up a warning message saying that you need to close all other tabs on all clients prior to executing an update.

[chrskly]

I'm pretty happy with how the plot page is coming together.

What do people think? Does this make sense? Do you get how it works? I've been looking at it a lot. I'd appreciate if some 'fresh' eyes looked at it.

[johu]

Amazing work and much better than my Lynx compatible version About time I start testing this.

[Leo M]

Great solution!

[chrskly]

Thanks for the feedback

Just to give a general update on where this is ... There are a few things that still don't work. The data logger doesn't work at all, for example, and a few things on the parameters page need attention.

I'm also working on an over-the-air firmware update mechanism. I was hoping to do it 100% in JS, but it looks like this won't work out. I have it pulling down a list of releases from Github and presenting the user with a drop-down to pick a version, but it can't fetch the actual firmware file due to redirect/cors issues. I think I might need to add a new endpoint to the esp firmware for downloading files from the web to get around this. I was trying to avoid this as esp updates are a bit more involved for users, but I don't see another way around it. This 'file download' endpoint could also be used to automatically apply updates to the web interface too, which would be nice.

Once all of this is done I plan to do a bit cleanup and re-org of the code. I'd like to split it up into more manageable chunks.

Oh, and I stumbled across syncofs.html. Does this work? It would be nice to integrate it into the rest of the interface.

[Leo M]

I have already finished my release with your ideas.... but I do it for my users in Russian. The data logger can only work in a separate page and it seems to me that this is not a problem.syncofs.html -it works .. I have already integrated it in my version. After a while, my work can be seen on my channel on you tube. Thank you for your efforts and ideas,they helped me a lot...