Web-GUI. Extreme speed up for SD-card webpage load

[Dam5]

Recently picked up fiddling with my Dafang camera again. Found that the WebGUI for the SD-card handling is extremely slow. Loading the SD-card Motion webpage took about 30 seconds to load for 500 files, while loading 'Motion Events' was very fast. After analysing it turns out the serverside scripting for gathering file information is the cullpit.

I moved the information handling from serverside to clientside and page load is now less then 1 second.

In www/cgi-bin/ui_sdcard.cgi replaced:

28  getFiles)
29    ip_addr=$(ip -o -4 addr show  | sed 's/.* inet \([^/]*\).*/\1/' | grep -v "127.0.0.1")
30    for file in $(find /system/sdcard/DCIM/${F_dir}/ -type f)
31      do                                                 
32        if [[ -f $file ]]; then                           
33          file_size=$(ls -lh $file | awk '{print $5}')                                          
34          file_url=$(ls -lh $file | awk '{print $9}' | sed 's/\/system\/sdcard\/DCIM/\/viewer/')
35          file_date=$(ls -lh $file | awk '{print $6 "-" $7 "-" $8}')                            
36          file_name=$(ls -lh $file | awk '{print $9}' | awk -F / '{print $(NF)}')                                                                                                      
37          echo "${file_name}#:#${file_size}#:#${file_date}#:#${file_url}"
38        fi                                        
39      done             
40    return
41    ;;

with:

28  getFiles)
29    if [[ -d /system/sdcard/DCIM/${F_dir} ]]; then
30        find /system/sdcard/DCIM/${F_dir}/ -type f | xargs ls -lh
31      fi
32    ;;

and in www/js/sdcard.js replaced:

39        for (var i = 0; i < config_all.length-1; i++) {
40         var config_info = config_all[i].split("#:#");
41         var file_info = config_info[3].split(".");       
42         var html_photo = "";
43         if (file_info[1] == "jpg")
44            html_photo = "<span onclick='openPicture(\""+config_info[3]+"\");' title='View picture'><i class='far fa-eye'></i>";
45         $('#result_'+dir).append("<tr> \
46         <td>"+config_info[0]+"</td> \
47         <td>"+config_info[1]+"</td> \
48         <td>"+config_info[2]+"</td> \
49         <td> \
50             <a href=\""+config_info[3]+"\" download><i class='fas fa-download' title='Download file'></i></a> \
51            <span onclick=\"deleteFile('"+config_info[3]+"','"+dir+",true')\"><i class='fas fa-trash' title='Delete file'></i></span>\
52            "+html_photo+"\
53            </td></tr>");
54        }

with:

39        for (var i = 0; i < config_all.length-1; i++) {
40         var config_trim = config_all[i].trim().replace(/\s+/g, " ");   // Replace all multiple whitespaces with single space
41         var config_info = config_trim.split(" ");
42         var file_path = config_info[8].replace('/system/sdcard/DCIM', '/viewer');
43         var file_info = file_path.split(".");       
44         var html_photo = "";
45         if (file_info[1] == "jpg")
46            html_photo = "<span onclick='openPicture(\""+file_path+"\");' title='View picture'><i class='far fa-eye'></i>";
47         var file_full = file_path.split('/');
48         var file_name = file_full[file_full.length - 1];
49         var file_date = config_info[5] + "-" + config_info[6] + "-" + config_info[7] ;
50         $('#result_'+dir).append("<tr> \
51         <td>"+file_name+"</td> \
52         <td>"+config_info[4]+"</td> \
53         <td>"+file_date+"</td> \
54         <td> \
55             <a href=\""+file_path+"\" download><i class='fas fa-download' title='Download file'></i></a> \
56            <span onclick=\"deleteFile('"+file_path+"','"+dir+",true')\"><i class='fas fa-trash' title='Delete file'></i></span>\
57            "+html_photo+"\
58            </td></tr>");
59        }

It could have been more robust and compact, but I've kept it quick and dirty. I've no intention to PR, but feel free to use or comment.

[int2018]

Hallo, thanks for your work, maybe I will update my scripts.

I mentioned another issue with the "new UI" way back in 2020, the file listing was very slow, I think due to the js code. https://github.com/EliasKotlyar/Xiaomi-Dafang-Hacks/issues/1447#issuecomment-676532470

And another strange thing is (was?) the handling of image files: https://github.com/EliasKotlyar/Xiaomi-Dafang-Hacks/issues/1447#issuecomment-676520534

I don't know if anything was updated for the new ui but it seems there is not much work going on anymore. Well, it basically works ...

Best regards !

[Dam5]

@int2018 Indeed, there's not much project activity going on, but occasionally I tamper with my camera and hack away. Regarding your https://github.com/EliasKotlyar/Xiaomi-Dafang-Hacks/issues/1447#issuecomment-676520534, I don't see this behaviour on my camera (last updated with "20210621 Xiaomi-Dafang-Hacks-master" version) I temporarily changed the filename-pattern to match your example and the "view"-icon also appears (and is working).

[int2018]

Thanks for sharing, maybe I should upgrade to the latest version but that is always a risk :-)

[famewolf]

How is it risky? Use a new microsd and try it out....if it doesn't work to your satisfaction put the old microsd back in...or did you mean risky because cam is hard to access physically?