ESP_CAM webpage code.

[esp_man]

Hello

I trying to add some functionality to CameraWebServer project.
I add some variables and logic code to do this. For example:

else if (!strcmp(variable, "contrast"))
res = s->set_contrast(s, val);
else if (!strcmp(variable, "brightness"))
res = s->set_brightness(s, val);
else if (!strcmp(variable, "LED_R")) //<- my code
LED_R = val;
else if (!strcmp(variable, "LED_G"))
LED_G = val;
else if (!strcmp(variable, "LED_B"))
LED_B = val;
else if (!strcmp(variable, "saturation"))
res = s->set_saturation(s, val);


p += sprintf(p, "\"brightness\":%d,", s->status.brightness);
p += sprintf(p, "\"contrast\":%d,", s->status.contrast);
p += sprintf(p, "\"LED_R\":%d,", LED_R); //<- my code
p += sprintf(p, "\"LED_G\":%d,", LED_G);
p += sprintf(p, "\"LED_B\":%d,", LED_B);
p += sprintf(p, "\"saturation\":%d,", s->status.saturation);

Also additional ledcSetup and ledcAttachPin function calls, to configure PWM RGB outputs;
It (LED PWMs)works fine parallelly to video streaming.
But I also have to add additional sliders into webpage code, to allow remote control of the RGB values:

RGB.jpg (52.89 KiB) Viewed 7066 times

I have skills in writing/modifying HTML/PHP code, but I don't see webpage source code nowhere in CameraWebServer files. No in CameraWebServer.ino, no in app_httpd.cpp, no in another files.
Could You give me any idea where can I find this source code, to modify it?

Thank You in advance.

[corz.org]

There seems to be two versions of this sketch on my systems. One has nice HTML files you can edit named index_other.h, index_ov2640.h, index_ov3660.h, etc.. and the other has a camera_index.h which is a nasty HEX integer array declaration of gzipped data you most likely need a 3rd-party tool to decode.

https://github.com/easytarget/esp32-cam-webserver

Might be a better starting point.

[edit: fixed link]

[esp_man]

Thank you very much.
I would never have come up with it.

Decode of this was quite simple.
It was enough to convert from the .f format to the RAW file (save with .gz extension).
And decompress it in 7ip.

[noweare]

The html code is compressed and zipped and is stored in camera_index.h file in the project.
Based on the sensor you are using that file gets sent to you browser to be rendered. I believe
the header tells the browser it is a zip file. Anyways, the browser knows how to handle it.

The link below shows how to get the html code in a format you can understand, edit and put back into a
compressed zip format if you like.

https://robotzero.one/esp32-cam-custom-html/

[esp_man]

I already did this part successfully (decoding h array, and gz decompression) using my own methods.
But I have another two unexpected troubles.

There is that part of code:
#define index_ov2640_html_gz_len 6787
I thought that is the size of gz file, so I would be able to edit html code, compress it back to gz, and update this number.
But not. Original gz file have completely different size that index_ov2640_html_gz_len value.
It have 24798 B.
So what is the number 6787 for?

Another strange thing for me: gz file decompress into one html file, with 3 versions of webpage in it (for ov2640, ov3660 and ov5640).
It have for example 3 title and 3 body tags, which goes beyond my current html programming knowledge.

[corz.org]

For reference, here's a direct link to the "Recipe" required for decoding..

https://gchq.github.io/CyberChef/#recip ... 0x')Gunzip()

Enter the HEX in the top panel and get back HTML in the bottom panel.

[noweare]

Just to keep things simple use a modified version of the index.html file. Just keep the sensor your using. You will have to modify the
main.c file also since the removed index files are referenced there.

The number is the size of the html file in bytes. I get the number by opening the compressed, zipped file in my text editor which counts characters so I get my size by dividing by 5 for example ,0x34 so to the editor that is 5 characters.

[corz.org]

I would just skip all this faffing around and use this:

https://github.com/easytarget/esp32-cam-webserver

[esp_man]

I would just skip all this faffing around and use this:

https://github.com/easytarget/esp32-cam-webserver

Of course this is the best way, which I wanted to use at the beginning, but I was unable to find proper source code on github.
So thank You very much!
Thanks to noweare too.
I edited html file as I wanted.

But I have another issue, so I ask here by the way.
I add this to .ino file, in setup():

Code: Select all

ledcAttachPin(13, 0);
...
ledcSetup(0, 5000, 8);
...
ledcWrite(0, 0);

And It works fine. I can set another default values in ledcWrite, and LEDs follows its.

But when I want to dynamically change values in app_httpd.cpp file, i have this error:
'ledcWrite' was not declared in this scope
So, how to properly use this function in cpp file?
Maybe some header needed?

[corz.org]

ledc functions should work all over.

You will need to show the code you have changed and tell us what you mean by "when I want to dynamically change values".

Simply wanting a thing won't cause an error. There must be code!