IP addresses in HTML files

[wetneb]

Thanks for developing this project, it works very well!

To isolate this device from the rest of our network, I run it on a separate WiFi network and then access it via some tunnels. When I do so, some of the UI fails to load. While investigating this I noticed that the HTML files stored on the SD card contain some static IP addresses, such as

AI-on-the-edge-device/sd-card/html/edit_alignment.html

Line 107 in a020fce

basepath = "http://192.168.178.26";

I wonder if those should not be replaced by

basepath = window.location.protocol + "//" + window.location.host

or something along those lines, so that the UI works regardless of how the UI is served?

[jomjol]

This is not necessary. The hard coded IP-adresses are only for my personal local debugging of the html in my test environment. and should not make a difference in a real live implementation.

[wetneb]

Well they do in my case, because I am accessing the device at http://localhost:8080/ on my laptop (via a tunnel).

[jomjol]

Any idea, how I can distinguish between your localhost usage and my debugging mode?
If I merge your issue, my debugging will not work automatically (triggered by localhost).

[wetneb]

I think you could just use a different mechanism to trigger the debugging mode, for instance by providing an alternate host in a localStorage field. That would have the advantage of not leaving your own IP addresses in the official HTML/JS files.

[jomjol]

I need to think about it. The IP is not a problem, it is a local one behind a server. Currently I leave it like it is, but also will leave the merge request open.

Thanks in any case for improving!

[jomjol]

Currently not followed anymore - debugging is triggered through IP adress

[wetneb]

I think fixing this would really help making the project more welcoming for other developers. It looks like I am not the only one who struggled with this, see #865.

Are you at all interested in contributions from others, such as the InfluxDB PR (#774) I sent a while ago? If so, do you think it would be worth making the life of other developers easier on the project? In the coming weeks I am going to work on Ethernet support (following #607).

When I see a GitHub project I generally assume that the maintainer(s) are keen to see other people involved, but I recognize that it is not always the case, often GitHub is just used as a hosting solution and not as a collaboration platform. If that is the case for this project, then sorry for the noise: I will not send further issues and PRs.

[jomjol]

Support and contribution is highly wellcome. The only thing is, that I'm really not a html programmer, which makes my effort to html changes much higher, than to the firmware. If you have a good idea, please let send to me and I will change the code.

[jomjol]

@Webnet: I tried now for 5 hours to get another automated option and failed!

Any ideas?

I reopen the issue, just to have somebody helping, but currently I'm at the end of my html-knowledge.

Request: I need to detect, when I'm running on my local computer (VSCode) or on the ESP32 camera in order to go to a debugging mode

[wetneb]

Thanks! Would it be okay for you if you had to type one command in the Javascript console of your browser, as a one-time measure, and then the host would be automatically adjusted as it currently is? If that sounds like an acceptable solution to you, I can open a PR for this.

[jomjol]

I'm not sure, if this helps. I tell you my workflow.

1. I'm using VSCode for the HTML/JavaScript development in there I start any of the html pages with the integrated web server "Go Live". This allows to use the debugging and break points directly in VSCode
2. When I start any of the single hmtl pages, the script in "gethost.js" checks, if the calling host IP is from an extern device (ESP32 AI-on-the-edge) or from a local client (in this case VSCode-Go Live). I do this with the IP-address.
3. If it detects a local adress, it replaces the host IP with any of my running ESP32-AI-on-the-edge devices, so that I connect with this device and e.g. download the config.ini, although the code is running from VSCode.
4. I can upload anytime the new htm and code to github and release it, because I don't need to set any variable / file to switch of the debug mode.

With this I can easily debug anything, especially if I have a second VSCode with an ESP32-device running in parallel, in which I can then check the log informations in parallel.

In order to keep this system running, I need in step 2) another mechanism to savely detect the VSCode environment, whitout manually switching to debug mode or something similar.

My idea was to have a local file as a switch (which I don't sync with github), to detect the local environment, but I cannot get it running by now.

P.S.: next day I'm only available very limited - answers will be delayed.

[wetneb]

Yes, using a file that is unchecked in Git could also work. With the localStorage-based solution I am thinking of, this is how it would work:

• Once my PR would be merged, you would open the web interface in development mode for the first time. You would type there a javascript command in the web developer console, which would store your desired host with the IP of your running ESP32 devices. You could refresh the page and it would then work as expected
• Then you leave development mode and upload the HTML files to your devices. Accessing those would work out of the box, because the localStorage option is not applied to the production website (because the hosts used to access the websites differ).
• Then you go back to development mode: it still works out of the box because the browser remembers your custom settings for this environment.
• Then you go back to production and it still works, for the same reason as above.

Would that be appropriate for you? If you prefer a file based solution, I can also write that for you.

[jomjol]

Thanks for your explanation. I would prefer the file based solution, cause it is almost no change to my running system. If you coulud support with this, that would be great. I almost made it with jQuery, but was stucked at the asyncronous loading of the file. The rest of my javascript finished, before the filecheck could be done.

[jomjol]

Are there updates to the file based version? Are you still working on this or should I close this issue?

[wetneb]

I have not had time to work on this as I am ill, but it is still on my radar.
In the meantime, one easy way to be more welcoming to other contributors would be to keep your personal IP addresses in your own version of the get_host.js file, without checking it into your Git repository.

[jomjol]

Okay - then I suggest to close this issue and you can reopen a new one, as soon as you have some results. I need to keep the overview and try to clean up older not followed topics currently.

[wetneb]

Fixed by #2378, thankfully.