RP6conrad / ESP-GPS-Logger

GPS logger for Speedsurfing, based on ESP32 & Ublox M8N hardware.
MIT License
36 stars 19 forks source link

Web page improvements #13

Open prichterich opened 1 year ago

prichterich commented 1 year ago

The web page for downloading and editing files is great. I suggest several improvements:

  1. Sort files by date in descending order, so that the newest files are on top. Users typically are most interested in the newest file.
  2. Support folders: show folders in the view, and allow opening folders to see their contents. I typically keep all files for a GPS on the SD card, but move older files to a separate folder. Currently, the web page shows the contents of all subdirectories, so moving files to a different folder does not gain anything.
  3. Hide "hidden" files added by various operating systems. On macOS, that's trash and spotlight folders, and sometimes "copies" of files that start with a dot (not really copies, but rather OS specific info about the files). Windows adds a couple of directories with volume information.

Of the changes above, the first one is relevant to all users. The third one is not important to users with sealed units, since they never put the SD cards into a computer. The second change is somewhere in between, since files can be moved to new folders with ftp clients.

RP6conrad commented 1 year ago

As the order of the file listing is coming from the FAT32 system, it is not quite easy to change this order. Probably you have to store all the reported filenames in RAM, then order them again, and then make the a new listing. I found a intresting article about this subject : https://www.codeproject.com/articles/95721/fat-32-sorter?fid=1580209&df=90&mpp=25&sort=Position&view=Normal&spc=Relaxed&prof=True&fr=26

Rolzzz commented 1 year ago

I've been playing with ChatGPT and posted this question into it... can it be of any help?

ME: I have an esp32 with a webserver and wish to present saved files sorted by newest date, how can I do this?

ChatGPT: You can use the stat function to get the modification time of a file, and then sort the list of files based on this value. Here is some example code in C that demonstrates this:

include

include

include <sys/stat.h>

include

// Comparison function for qsort int compare_modification_time(const void a, const void b) { struct stat file_a, file_b; if (stat((const char)a, &file_a) == -1 || stat((const char)b, &file_b) == -1) { perror("Error getting file modification time"); exit(EXIT_FAILURE); } return difftime(file_b.st_mtime, file_a.st_mtime); }

int main(int argc, char* argv[]) { if (argc < 2) { printf("Usage: %s ...\n", argv[0]); exit(EXIT_FAILURE); }

// Sort the files by modification time qsort(argv + 1, argc - 1, sizeof(char*), compare_modification_time);

// Print the sorted list of files for (int i = 1; i < argc; i++) { printf("%s\n", argv[i]); }

return 0; }

This code sorts the command line arguments (which are assumed to be filenames) based on their modification time, and then prints the sorted list of filenames. You can modify this code to suit your needs, such as reading the filenames from a directory instead of the command line arguments.

RP6conrad commented 1 year ago

There is a other (simpler) way : It should be possible to sort the "table" on the client side : after loading al the filenames, a script should sort again the files with descending dates. But javascript is not my cup of tea.....

tritondm commented 1 year ago

I did IT but struggling with some JavaScript Bugs i Work in IT.. greets

RP6conrad @.***> schrieb am Sa., 14. Jän. 2023, 19:20:

There is a other (simpler) way : It should be possible to sort the "table" on the client side : after loading al the filenames, a script should sort again the files with descending dates. But javascript is not my cup of tea.....

— Reply to this email directly, view it on GitHub https://github.com/RP6conrad/ESP-GPS-Logger/issues/13#issuecomment-1382878482, or unsubscribe https://github.com/notifications/unsubscribe-auth/ABC2JWZYL373X7IP6S44VFLWSLVABANCNFSM6AAAAAATUHWIVQ . You are receiving this because you are subscribed to this thread.Message ID: @.***>

Freezer-SD commented 1 year ago

I found a nice and easy to understand explanation of sorting tables in java at https://www.w3schools.com/howto/howto_js_sort_table.asp There are 2 sections and I like the 2ns solution where you click on the header to sort it by: Sort Table by Clicking the Headers Click the headers to sort the table. Click "Name" to sort by names, and "Country" to sort by country. The first time you click, the sorting direction is ascending (A to Z). Click again, and the sorting direction will be descending (Z to A): One can try/customize the script as well at https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_sort_table_desc

There are also examples available to do filtering: https://www.w3schools.com/howto/howto_js_filter_table.asp This one provides a search field where text can be typed. If you wanted a GPY file one could simply type a GPY in the search. But it will be better to restrict it to a certain available file extensions (ubx, gpy, gpx, sbp) through a dropdown filtering: https://www.w3schools.com/howto/howto_js_filter_dropdown.asp

More fancy without clicking would be a hover able dropdown preventing additional clicking: https://www.w3schools.com/howto/howto_css_dropdown.asp

In practice there is so much space on the sdcard that I don’t think it is required to delete anything. As long as the access to the files is great. I’m not sure if it is possible, but during storing the file to keep index files that are stored with the summary results (max2s, max10s, 5x10s, mile, distance). In that way you could also show or sort the files with the additional info. Currently we use large file names to keep all info in the name. Not sure if we can either store it in the metadata or in a separate file (owner, gps-receiver, firmware version, date, time, location, etc.)

For the configuration file html page, the info column consumes a lot of space. Once users know what it means it does not make sense to show. It could be shown as alternative tekst on a info.gif i

I like to compact the views as much as possible and with minimum amount of clicks. I’m not sure if you can detect the device (mobile, tablet or PC format), but the styles should be optimized for best user experience.

I hope this helps.

From: triton_dm @.> Sent: zaterdag 14 januari 2023 21:32 To: RP6conrad/ESP-GPS-Logger @.> Cc: Subscribed @.***> Subject: Re: [RP6conrad/ESP-GPS-Logger] Web page improvements (Issue #13)

I did IT but struggling with some JavaScript Bugs i Work in IT.. greets

RP6conrad @.<mailto:@.>> schrieb am Sa., 14. Jän. 2023, 19:20:

There is a other (simpler) way : It should be possible to sort the "table" on the client side : after loading al the filenames, a script should sort again the files with descending dates. But javascript is not my cup of tea.....

— Reply to this email directly, view it on GitHub https://github.com/RP6conrad/ESP-GPS-Logger/issues/13#issuecomment-1382878482, or unsubscribe https://github.com/notifications/unsubscribe-auth/ABC2JWZYL373X7IP6S44VFLWSLVABANCNFSM6AAAAAATUHWIVQ . You are receiving this because you are subscribed to this thread.Message ID: @.<mailto:@.>>

— Reply to this email directly, view it on GitHubhttps://github.com/RP6conrad/ESP-GPS-Logger/issues/13#issuecomment-1382910077, or unsubscribehttps://github.com/notifications/unsubscribe-auth/AXUAXP6GW2DQKXSY3AGPOLTWSMEKFANCNFSM6AAAAAATUHWIVQ. You are receiving this because you are subscribed to this thread.Message ID: @.**@.>>

RP6conrad commented 1 year ago

Actually, that was the base where I started ! I made a simple javascript function, which just order the table with the latest date first in the table. But after sorting, the buttons did not work anymore… I took me some time, but with some changes, it works now fine. Before sorting, you have to wait until the page is completely loaded. As there is a event when the page is loaded, I used that for starting the sorting. The reason for limiting the number of files, is the time that is needed for loading. As you never know when which file will be loaded (is a FAT32 issue), you just have to wait until all files are loaded. I use FTP to delete files (WinSCP), goes fast en reliable. I will upload the new SW tomorrow (still some testing to do) :

I have another issue with Android : when in AP mode, I cannot load the page from the webserver on my smartphone (Android 9). Sometimes it works, other times no reaction. The phone connect to the AP (just some messages “internet not available”). On my PC (Win10), AP mode works exactly the same as Station mode (SSID). Do you have issues with phones and AP-mode (Iphone, Android 10....) ?

I experimented with a timeapi : "http://worldtimeapi.org/api/ip"; This gives the back the local time where the IP is located. When connected to a SSID with internet, you can check the local time offset. This can be used in the config.timezone, and when you save the config.txt, it will have the correct local timestamp. I did not include it yet, as the HTTPClient.h needs another 100kb !

The Ali M10 is very promising, seems to be better then the M8, with less power needed. There is just 1 red LED (PPS), which only start to blink @1Hz when there is a fix. I noticed that the small M10 is out of stock, but I hope that my order is shipped.

Greetings, Jan.

Verzonden vanuit Mail voor Windows

Van: Freezer-SD Verzonden: dinsdag 17 januari 2023 19:17 Aan: RP6conrad/ESP-GPS-Logger CC: RP6conrad; Comment Onderwerp: Re: [RP6conrad/ESP-GPS-Logger] Web page improvements (Issue #13)

I found a nice and easy to understand explanation of sorting tables in java at https://www.w3schools.com/howto/howto_js_sort_table.asp There are 2 sections and I like the 2ns solution where you click on the header to sort it by: Sort Table by Clicking the Headers Click the headers to sort the table. Click "Name" to sort by names, and "Country" to sort by country. The first time you click, the sorting direction is ascending (A to Z). Click again, and the sorting direction will be descending (Z to A): One can try/customize the script as well at https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_sort_table_desc

There are also examples available to do filtering: https://www.w3schools.com/howto/howto_js_filter_table.asp This one provides a search field where text can be typed. If you wanted a GPY file one could simply type a GPY in the search. But it will be better to restrict it to a certain available file extensions (ubx, gpy, gpx, sbp) through a dropdown filtering: https://www.w3schools.com/howto/howto_js_filter_dropdown.asp

More fancy without clicking would be a hover able dropdown preventing additional clicking: https://www.w3schools.com/howto/howto_css_dropdown.asp

In practice there is so much space on the sdcard that I don’t think it is required to delete anything. As long as the access to the files is great. I’m not sure if it is possible, but during storing the file to keep index files that are stored with the summary results (max2s, max10s, 5x10s, mile, distance). In that way you could also show or sort the files with the additional info. Currently we use large file names to keep all info in the name. Not sure if we can either store it in the metadata or in a separate file (owner, gps-receiver, firmware version, date, time, location, etc.)

For the configuration file html page, the info column consumes a lot of space. Once users know what it means it does not make sense to show. It could be shown as alternative tekst on a info.gif i

I like to compact the views as much as possible and with minimum amount of clicks. I’m not sure if you can detect the device (mobile, tablet or PC format), but the styles should be optimized for best user experience.

I hope this helps.

From: triton_dm @.> Sent: zaterdag 14 januari 2023 21:32 To: RP6conrad/ESP-GPS-Logger @.> Cc: Subscribed @.***> Subject: Re: [RP6conrad/ESP-GPS-Logger] Web page improvements (Issue #13)

I did IT but struggling with some JavaScript Bugs i Work in IT.. greets

RP6conrad @.<mailto:@.>> schrieb am Sa., 14. Jän. 2023, 19:20:

There is a other (simpler) way : It should be possible to sort the "table" on the client side : after loading al the filenames, a script should sort again the files with descending dates. But javascript is not my cup of tea.....

— Reply to this email directly, view it on GitHub https://github.com/RP6conrad/ESP-GPS-Logger/issues/13#issuecomment-1382878482, or unsubscribe https://github.com/notifications/unsubscribe-auth/ABC2JWZYL373X7IP6S44VFLWSLVABANCNFSM6AAAAAATUHWIVQ . You are receiving this because you are subscribed to this thread.Message ID: @.<mailto:@.>>

— Reply to this email directly, view it on GitHubhttps://github.com/RP6conrad/ESP-GPS-Logger/issues/13#issuecomment-1382910077, or unsubscribehttps://github.com/notifications/unsubscribe-auth/AXUAXP6GW2DQKXSY3AGPOLTWSMEKFANCNFSM6AAAAAATUHWIVQ. You are receiving this because you are subscribed to this thread.Message ID: @.**@.>>

— Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you commented.Message ID: @.***>

RP6conrad commented 1 year ago

Just uploaded SW 5.71 : After the main page is loaded, a simple javascript will sort the files, newest files come on top. Had to made some minor changes to the form attr, as the buttons did not work after the sorting. It looks ok now.

prichterich commented 1 year ago

I have another issue with Android : when in AP mode, I cannot load the page from the webserver on my smartphone (Android 9). Sometimes it works, other times no reaction. The phone connect to the AP (just some messages “internet not available”).

I have had problems upgrading firmware in AP mode, but only in Australia, not in the US. The cause is that the web page uses Javascript libraries that are downloaded from the web (perhaps jquery). At home, I always had the computer plugged into Ethernet, so that worked. In Oz, I'm wifi only, so no internet when using AP mode.

One Google search result I found said that this can be solved by including the necessary Javascript libraries on the ESP, as part of the firmware. It's been a while so I don't have a link, but I think that should be done. Testing requires unplugging Ethernet :-).

On a separate topic: I'd appreciate a settings flag to not write .txt files. I never look at them, so they just clutter up the web page when downloading. Sometimes, my wife and I swap gear in a session, and we create new files every time we do. That means we may have 4 or more files per person, per unit, from one session. 4 extra text files make finding anything harder...

Cheers,

Peter

RP6conrad commented 1 year ago

Setting flag for the text file will be done in the next sw release.

Freezer-SD commented 1 year ago

Hi,

I just loaded the v5.71 M10 B74 and had a look at the menus.

I notice that the files are properly sorted by reverse date (good). But, it does not add the control to the user. Clicking inside the header sorting it the way the user wants as was shown on https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_sort_table_desc both ordered and reverse by another click.

I notice there is a “/” in front of the name. Once downloaded the “/”has become a “_” in front of the filename. I don’t think it is intentional.

Would it be possible to configure the timestamp format? It contains a lot of characters. Usually month and day would be OK, but sometimes you might want to see the year and hours perhaps. “MMM dd HH” would do it for me, to make it more compact. But it might be set in the config.txt.

The size has 4 significant numbers in kB or Mb. For me it would be good to always be Mb. Since there are 4 digits, the small .txt files will show as 0.002Mb very clear that it is small.

Instead having 4 separate rows, the file types could be combined in a single row. Name Size Timestamp Download Delete /2008311709_Simon_M10S.ubx 7.904 MB 2023-01-04 17:54:28 Download Delete /2008311709_Simon_M10S.gpy 1.596 MB 2023-01-04 17:54:28 Download Delete /2008311709_Simon_M10S.gpx 2.919 MB 2023-01-04 17:54:28 Download Delete /2008311709_Simon_M10S.txt 2.803 KB 2023-01-04 17:54:28 Download Delete

Into more compact (no redundant info). I understand this requires quite a bit of additional table formatting: Name<Sort:%20by%20File%20name%20;%20again%20for%20reverse%20order> Info Date<Sort:%20by%20Date%20;%20again%20for%20reverse%20order> Types 2008311709_Simon_M10S i<Open:%20Info%20session%20txt%20file%20file> 0.003 MB delete<delete:%20all%20session%20files> Jan-04 17:54 UBX<download:%20UBX-file> 7.904 MB delete<delete:%20UBX%20file> GPY<download:%20GPY%20file> 1.596 MB delete<delete:%20GPY%20file> GPX<download:%20GPX%20file> 2.919 MB delete<delete:%20GPX%20file>

Instead of having to click for the info, perhaps it could be a user defined value listed in the info. For me the 5x10sec, so one immediately can judge the session Name<Sort:%20by%20File%20name%20;%20again%20for%20reverse%20order> Date<Sort:%20by%20Date%20;%20again%20for%20reverse%20order> avg 5_best_runs Types 2008311709_Simon_M10S delete<delete:%20all%20session%20files> Jan-04 17:54 64.094 km/h UBX<download:%20UBX-file> 7.904 MB delete<delete:%20UBX%20file> GPY<download:%20GPY%20file> 1.596 MB delete<delete:%20GPY%20file> GPX<download:%20GPX%20file> 2.919 MB delete<delete:%20GPX%20file>

The header of the page could contain the “Sleep_info” from the config file (in my case “Simon M10”), rather than: @.***

Perhaps included with the GPS-ESP logo, board and sail logos as selected in the config file plus the preferred GPS website (to be added to the config.txt): [Logo Description automatically generated]https://github.com/RP6conrad/ESP-GPS-Logger Simon M10 http://192.168.68.122/ [Icon Description automatically generated] https://windsurf.star-board.com/ [A picture containing text, sign Description automatically generated] https://ga-windsurfing.com/ @.*** https://www.gps-speedsurfing.com/mygps.aspx

Trying to make things nice.

Kind regards, Simon

From: RP6conrad @.> Sent: dinsdag 17 januari 2023 20:14 To: RP6conrad/ESP-GPS-Logger @.> Cc: Freezer-SD @.>; Comment @.> Subject: Re: [RP6conrad/ESP-GPS-Logger] Web page improvements (Issue #13)

Actually, that was the base where I started ! I made a simple javascript function, which just order the table with the latest date first in the table. But after sorting, the buttons did not work anymore… I took me some time, but with some changes, it works now fine. Before sorting, you have to wait until the page is completely loaded. As there is a event when the page is loaded, I used that for starting the sorting. The reason for limiting the number of files, is the time that is needed for loading. As you never know when which file will be loaded (is a FAT32 issue), you just have to wait until all files are loaded. I use FTP to delete files (WinSCP), goes fast en reliable. I will upload the new SW tomorrow (still some testing to do) :

I have another issue with Android : when in AP mode, I cannot load the page from the webserver on my smartphone (Android 9). Sometimes it works, other times no reaction. The phone connect to the AP (just some messages “internet not available”). On my PC (Win10), AP mode works exactly the same as Station mode (SSID). Do you have issues with phones and AP-mode (Iphone, Android 10....) ?

I experimented with a timeapi : "http://worldtimeapi.org/api/ip"; This gives the back the local time where the IP is located. When connected to a SSID with internet, you can check the local time offset. This can be used in the config.timezone, and when you save the config.txt, it will have the correct local timestamp. I did not include it yet, as the HTTPClient.h needs another 100kb !

The Ali M10 is very promising, seems to be better then the M8, with less power needed. There is just 1 red LED (PPS), which only start to blink @1Hz when there is a fix. I noticed that the small M10 is out of stock, but I hope that my order is shipped.

Greetings, Jan.

Verzonden vanuit Mail voor Windows

Van: Freezer-SD Verzonden: dinsdag 17 januari 2023 19:17 Aan: RP6conrad/ESP-GPS-Logger CC: RP6conrad; Comment Onderwerp: Re: [RP6conrad/ESP-GPS-Logger] Web page improvements (Issue #13)

I found a nice and easy to understand explanation of sorting tables in java at https://www.w3schools.com/howto/howto_js_sort_table.asp There are 2 sections and I like the 2ns solution where you click on the header to sort it by: Sort Table by Clicking the Headers Click the headers to sort the table. Click "Name" to sort by names, and "Country" to sort by country. The first time you click, the sorting direction is ascending (A to Z). Click again, and the sorting direction will be descending (Z to A): One can try/customize the script as well at https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_sort_table_desc

There are also examples available to do filtering: https://www.w3schools.com/howto/howto_js_filter_table.asp This one provides a search field where text can be typed. If you wanted a GPY file one could simply type a GPY in the search. But it will be better to restrict it to a certain available file extensions (ubx, gpy, gpx, sbp) through a dropdown filtering: https://www.w3schools.com/howto/howto_js_filter_dropdown.asp

More fancy without clicking would be a hover able dropdown preventing additional clicking: https://www.w3schools.com/howto/howto_css_dropdown.asp

In practice there is so much space on the sdcard that I don’t think it is required to delete anything. As long as the access to the files is great. I’m not sure if it is possible, but during storing the file to keep index files that are stored with the summary results (max2s, max10s, 5x10s, mile, distance). In that way you could also show or sort the files with the additional info. Currently we use large file names to keep all info in the name. Not sure if we can either store it in the metadata or in a separate file (owner, gps-receiver, firmware version, date, time, location, etc.)

For the configuration file html page, the info column consumes a lot of space. Once users know what it means it does not make sense to show. It could be shown as alternative tekst on a info.gif i

I like to compact the views as much as possible and with minimum amount of clicks. I’m not sure if you can detect the device (mobile, tablet or PC format), but the styles should be optimized for best user experience.

I hope this helps.

From: triton_dm @.<mailto:@.>> Sent: zaterdag 14 januari 2023 21:32 To: RP6conrad/ESP-GPS-Logger @.<mailto:@.>> Cc: Subscribed @.<mailto:@.>> Subject: Re: [RP6conrad/ESP-GPS-Logger] Web page improvements (Issue #13)

I did IT but struggling with some JavaScript Bugs i Work in IT.. greets

RP6conrad @.<mailto:@.mailto:***@***.***%3cmailto:***@***.***>> schrieb am Sa., 14. Jän. 2023, 19:20:

There is a other (simpler) way : It should be possible to sort the "table" on the client side : after loading al the filenames, a script should sort again the files with descending dates. But javascript is not my cup of tea.....

— Reply to this email directly, view it on GitHub https://github.com/RP6conrad/ESP-GPS-Logger/issues/13#issuecomment-1382878482, or unsubscribe https://github.com/notifications/unsubscribe-auth/ABC2JWZYL373X7IP6S44VFLWSLVABANCNFSM6AAAAAATUHWIVQ . You are receiving this because you are subscribed to this thread.Message ID: @.<mailto:@.mailto:***@***.***%3cmailto:***@***.***>>

— Reply to this email directly, view it on GitHubhttps://github.com/RP6conrad/ESP-GPS-Logger/issues/13#issuecomment-1382910077, or unsubscribehttps://github.com/notifications/unsubscribe-auth/AXUAXP6GW2DQKXSY3AGPOLTWSMEKFANCNFSM6AAAAAATUHWIVQ. You are receiving this because you are subscribed to this thread.Message ID: @.**@.mailto:***@***.******@***.***>>

— Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you commented.Message ID: @.<mailto:@.>>

— Reply to this email directly, view it on GitHubhttps://github.com/RP6conrad/ESP-GPS-Logger/issues/13#issuecomment-1385923309, or unsubscribehttps://github.com/notifications/unsubscribe-auth/AXUAXP5NRXJ3VKMQLZXIHF3WS3VP3ANCNFSM6AAAAAATUHWIVQ. You are receiving this because you commented.Message ID: @.**@.>>

RP6conrad commented 1 year ago

@Freezer : I have to check or this can be / ignored. Timestamp format in the filename can easily be configured, but it has to stay "unique". Otherwise, It could be overwritten by accident. If you want to see the AVG from a session, the txt file must be read and these values must be parsed. Can be done, but not so simple.

@prichterich To limit the number of files that is listed, we could easily make a "Archive" dir. All files older then xx days would be renamed and transferred to this "Archive". They will not be in the file listing anymore, but they will still be on the SD-card. When the ESP is on Wifi, it can get NTP time, and check for old files. Nr of days can be in the config.txt