Lot of extra http blah blah

[Franck78]

I think there is a lot of useless 'refresh' or 'updates' between the browser and the ESP32 Webserver. Maybe this can explain weird ' response delay' I sometimes see with the log buffer > 5KB.

That is capture of the exchange on just opening the dashboard and doing nothing. Seeing GET /getOTAProgress is unexpected. Is it possible to refresh only the active TAB ?

tcpdump -n host 10.0.0.44

16:43:33.653495 IP 10.0.0.2.47754 > 10.0.0.44.80: Flags [S], seq 954427014, win 64240, options [mss 1460,sackOK,TS val 2746111969 ecr 0,nop,wscale 7], length 0
16:43:33.703667 IP 10.0.0.44.80 > 10.0.0.2.47754: Flags [S.], seq 704469228, ack 954427015, win 5744, options [mss 1436], length 0
16:43:33.703764 IP 10.0.0.2.47754 > 10.0.0.44.80: Flags [.], ack 1, win 64240, length 0
16:43:33.704039 IP 10.0.0.2.47754 > 10.0.0.44.80: Flags [P.], seq 1:364, ack 1, win 64240, length 363: HTTP: GET /getOTAProgress HTTP/1.1
16:43:33.708752 IP 10.0.0.44.80 > 10.0.0.2.47754: Flags [P.], seq 1:126, ack 364, win 5381, length 125: HTTP: HTTP/1.1 200 OK
16:43:33.708837 IP 10.0.0.2.47754 > 10.0.0.44.80: Flags [.], ack 126, win 64115, length 0
16:43:33.709260 IP 10.0.0.2.47754 > 10.0.0.44.80: Flags [F.], seq 364, ack 126, win 64115, length 0
16:43:33.710869 IP 10.0.0.44.80 > 10.0.0.2.47754: Flags [F.], seq 126, ack 365, win 5380, length 0
16:43:33.710942 IP 10.0.0.2.47754 > 10.0.0.44.80: Flags [.], ack 127, win 64114, length 0
16:43:34.657908 IP 10.0.0.2.46608 > 10.0.0.44.80: Flags [S], seq 2329069684, win 64240, options [mss 1460,sackOK,TS val 2746112973 ecr 0,nop,wscale 7], length 0
16:43:34.727474 IP 10.0.0.44.80 > 10.0.0.2.46608: Flags [S.], seq 791292743, ack 2329069685, win 5744, options [mss 1436], length 0
16:43:34.727569 IP 10.0.0.2.46608 > 10.0.0.44.80: Flags [.], ack 1, win 64240, length 0
16:43:34.727915 IP 10.0.0.2.46608 > 10.0.0.44.80: Flags [P.], seq 1:364, ack 1, win 64240, length 363: HTTP: GET /getOTAProgress HTTP/1.1
16:43:34.731769 IP 10.0.0.44.80 > 10.0.0.2.46608: Flags [P.], seq 1:126, ack 364, win 5381, length 125: HTTP: HTTP/1.1 200 OK
16:43:34.731853 IP 10.0.0.2.46608 > 10.0.0.44.80: Flags [.], ack 126, win 64115, length 0
16:43:34.732442 IP 10.0.0.2.46608 > 10.0.0.44.80: Flags [F.], seq 364, ack 126, win 64115, length 0
16:43:34.733976 IP 10.0.0.44.80 > 10.0.0.2.46608: Flags [F.], seq 126, ack 365, win 5380, length 0
16:43:34.734030 IP 10.0.0.2.46608 > 10.0.0.44.80: Flags [.], ack 127, win 64114, length 0
16:43:35.657474 IP 10.0.0.2.46610 > 10.0.0.44.80: Flags [S], seq 1428191170, win 64240, options [mss 1460,sackOK,TS val 2746113973 ecr 0,nop,wscale 7], length 0
16:43:35.738825 IP 10.0.0.44.80 > 10.0.0.2.43770: Flags [P.], seq 528455:528581, ack 2684, win 4508, length 126: HTTP
16:43:35.740278 IP 10.0.0.44.80 > 10.0.0.2.46610: Flags [S.], seq 3996612020, ack 1428191171, win 5744, options [mss 1436], length 0
16:43:35.740352 IP 10.0.0.2.46610 > 10.0.0.44.80: Flags [.], ack 1, win 64240, length 0
16:43:35.740613 IP 10.0.0.2.46610 > 10.0.0.44.80: Flags [P.], seq 1:364, ack 1, win 64240, length 363: HTTP: GET /getOTAProgress HTTP/1.1
16:43:35.742437 IP 10.0.0.2.43770 > 10.0.0.44.80: Flags [P.], seq 2684:2696, ack 528581, win 65535, length 12: HTTP
16:43:35.745153 IP 10.0.0.44.80 > 10.0.0.2.46610: Flags [P.], seq 1:126, ack 364, win 5381, length 125: HTTP: HTTP/1.1 200 OK
16:43:35.745207 IP 10.0.0.2.46610 > 10.0.0.44.80: Flags [.], ack 126, win 64115, length 0
16:43:35.745647 IP 10.0.0.2.46610 > 10.0.0.44.80: Flags [F.], seq 364, ack 126, win 64115, length 0
16:43:35.748665 IP 10.0.0.44.80 > 10.0.0.2.43770: Flags [P.], seq 528581:529550, ack 2696, win 4496, length 969: HTTP
16:43:35.752020 IP 10.0.0.44.80 > 10.0.0.2.46610: Flags [F.], seq 126, ack 365, win 5380, length 0

[dewenni]

getOTAProgress is used for the progress-bar in the Tools Tab to visualize the progress of the OTA update. The actual HTML code is maybe not the best one in some points. To be honest, this whole html stuff is not really my thing ;-) There is cyclic call (every 1s) for that updateOTABar()function. I have to check how to change this. It would be better if this function is only called when the process started.

Also the list of files in the right part of the Tools Tab has a cyclic refresh every 3 seconds. That is also something that could be improved.

[Franck78]

to be honest, this whole html stuff is not really my thing ;-)

yeah, and me I can add javascript json & css to html ;)

Is this 'refresh' addition by you or is it included in the webui lib ?

[dewenni]

the content of the Tools-Tab is a custom add-on from my side. The ESPUI Library creates two "Label-Container" and inside this container I am using two iframe to include two predefined html sites. The content of the html sites are locate in the webtools.h file. Some corresponding code to the website is in the webtools.cpp

one cyclic part is this one

<script>
    function updateOTABar() {
        $.ajax({
            url: '/getOTAProgress', // Endpoint zum Abrufen des OTA-Fortschritts vom ESP32
            method: 'GET',
            dataType: 'json',
            success: function (data) {
                const otaProgress = data.progress;
                $('#ota-progress').css('width', otaProgress + '%');
            }
        });
    }
    setInterval(updateOTABar, 1000);

the other one is in the webtools.cpp

void webToolsCyclic() {

  if (webTimer.cycleTrigger(3000)){
    listDir(LittleFS, "/", 0);
  }

}

I think the cyclic refresh of the files (listDir) could be removed. It is enough if the list is refreshed once or when a new file was uploaded. I will check this.

Maybe you can check how to redesign the script for the OTA Upload?

[Franck78]

ah listing the directory is really not needed. It's not a file server ;)

id.tab.dashboard = ESPUI.addControl(Tab, "", webText.DASHBORAD[config.lang], ControlColor::None, 0, generalCallback); DASHBORAD ?!

Maybe the 'Tab' control have an 'active' or 'visible' propertie. I will check that.

[Franck78]

ok here is what I found and maybe what to do (try to).

Each TAB receives a handle that you keep in the

typedef struct {
  uint16_t dashboard;
  uint16_t control;
  uint16_t hc1;
  uint16_t hc2;
  uint16_t ww;
  uint16_t boiler;
  uint16_t general;
  uint16_t system;
  uint16_t alarm;
  uint16_t settings;
  uint16_t log;
} s_webui_id_tab;

  Serial.printf ("Unhandled call back ID=%u type=%u\n",sender->id ,type);

} // end generalCallback()

Unhandled call back ID=55 type=0
Unhandled call back ID=2 type=0
Unhandled call back ID=55 type=0

On the client side the menu Tab is a UL list with one LI per Tab; each LI have a property with the ID:

<ul id="tabsnav" class="navigation navigation-tabs u-full-width">
<li class="active"><a onmouseup="tabclick(2)" href="#tab2" aria-selected="true">Dashboard</a></li>
<li class=""><a onmouseup="tabclick(55)" href="#tab55" aria-selected="false">Control</a></li>
<li class=""><a onmouseup="tabclick(163)" href="#tab163" aria-selected="false">Heating Circuit 1</a></li>
<li class=""><a onmouseup="tabclick(176)" href="#tab176" aria-selected="false">Heating Circuit 2</a></li>
<li class=""><a onmouseup="tabclick(189)" href="#tab189" aria-selected="false">Warm Water</a></li>
<li class=""><a onmouseup="tabclick(199)" href="#tab199" aria-selected="false">Burner</a></li>
<li class=""><a onmouseup="tabclick(209)" href="#tab209" aria-selected="false">General Values</a></li>
<li class=""><a onmouseup="tabclick(217)" href="#tab217" aria-selected="false">Logger</a></li>
<li class=""><a onmouseup="tabclick(233)" href="#tab233" aria-selected="false">System</a></li>
<li class=""><a onmouseup="tabclick(253)" href="#tab253" aria-selected="false">Settings</a></li>
<li class=""><a onmouseup="tabclick(384)" href="#tab384" aria-selected="false">Tools</a></li>
</ul>

LI list have only one active element. So, on the server , it is possible to add a condition in the
function updateOTABar()

"if Tab{ID_tabs.tools} == active then refresh"

Lot of rework for me to split the construction of the 'ota html page' to insert at runtime the ID.

[dewenni]

the refreh of the file´s is solved. That was not a big deal. Don´t know why I haven´t done this before. I will also have a look at the getOTAProgress. This is a interaction between the html script and a variable from the esp.

[dewenni]

So, I think I could solve both cyclic callings (listDir & getOTAProgress)

I have added a condition variable to the function

    function updateOTABar() {
        if (updateRunning) {   //  <<< NEW >>>
            $.ajax({
                url: '/getOTAProgress',
                method: 'GET',
                dataType: 'json',
                success: function (data) {
                    const otaProgress = data.progress;
                    $('#ota-progress').css('width', otaProgress + '%');
                }
            });
        }
    }

The variable is set if the Update button is pressed and will be false when the update is finished.

If you like to verify, here are the two files. But you have to change the server->on("/logger" Part to your solution. The file is based on my implementation.

webTools.zip

[Franck78]

Ah, zip file contains nothing about (updateRunning) { // <<< NEW >>>

I believe you when you say that removing WebToolsCyclic will eliminate the refresh ;)