Willie
/
ESP32-CAM


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783
							#include <Arduino.h>
#define new_index_len 27740
char new_index[] = "<!doctype html>\n"
"<html>\n"
"    <head>\n"
"        <meta charset=\"utf-8\">\n"
"        <meta name=\"viewport\" content=\"width=device-width,initial-scale=1\">\n"
"        <title>ESP32 OV2460</title>\n"
"        <style>\n"
"            body {\n"
"                font-family: Arial,Helvetica,sans-serif;\n"
"                background: #181818;\n"
"                color: #EFEFEF;\n"
"                font-size: 16px\n"
"            }\n"
"\n"
"            h2 {\n"
"                font-size: 18px\n"
"            }\n"
"\n"
"            section.main {\n"
"                display: flex\n"
"            }\n"
"\n"
"            #menu,section.main {\n"
"                flex-direction: column\n"
"            }\n"
"\n"
"            #menu {\n"
"                display: none;\n"
"                flex-wrap: nowrap;\n"
"                min-width: 340px;\n"
"                background: #363636;\n"
"                padding: 8px;\n"
"                border-radius: 4px;\n"
"                margin-top: -10px;\n"
"                margin-right: 10px;\n"
"            }\n"
"\n"
"            #content {\n"
"                display: flex;\n"
"                flex-wrap: wrap;\n"
"                align-items: stretch\n"
"            }\n"
"\n"
"            figure {\n"
"                padding: 0px;\n"
"                margin: 0;\n"
"                -webkit-margin-before: 0;\n"
"                margin-block-start: 0;\n"
"                -webkit-margin-after: 0;\n"
"                margin-block-end: 0;\n"
"                -webkit-margin-start: 0;\n"
"                margin-inline-start: 0;\n"
"                -webkit-margin-end: 0;\n"
"                margin-inline-end: 0\n"
"            }\n"
"\n"
"            figure img {\n"
"                display: block;\n"
"                width: 100%;\n"
"                height: auto;\n"
"                border-radius: 4px;\n"
"                margin-top: 8px;\n"
"            }\n"
"\n"
"            @media (min-width: 800px) and (orientation:landscape) {\n"
"                #content {\n"
"                    display:flex;\n"
"                    flex-wrap: nowrap;\n"
"                    align-items: stretch\n"
"                }\n"
"\n"
"                figure img {\n"
"                    display: block;\n"
"                    max-width: 100%;\n"
"                    max-height: calc(100vh - 40px);\n"
"                    width: auto;\n"
"                    height: auto\n"
"                }\n"
"\n"
"                figure {\n"
"                    padding: 0 0 0 0px;\n"
"                    margin: 0;\n"
"                    -webkit-margin-before: 0;\n"
"                    margin-block-start: 0;\n"
"                    -webkit-margin-after: 0;\n"
"                    margin-block-end: 0;\n"
"                    -webkit-margin-start: 0;\n"
"                    margin-inline-start: 0;\n"
"                    -webkit-margin-end: 0;\n"
"                    margin-inline-end: 0\n"
"                }\n"
"            }\n"
"\n"
"            section#buttons {\n"
"                display: flex;\n"
"                flex-wrap: nowrap;\n"
"                justify-content: space-between\n"
"            }\n"
"\n"
"            #nav-toggle {\n"
"                cursor: pointer;\n"
"                display: block\n"
"            }\n"
"\n"
"            #nav-toggle-cb {\n"
"                outline: 0;\n"
"                opacity: 0;\n"
"                width: 0;\n"
"                height: 0\n"
"            }\n"
"\n"
"            #nav-toggle-cb:checked+#menu {\n"
"                display: flex\n"
"            }\n"
"\n"
"            .input-group {\n"
"                display: flex;\n"
"                flex-wrap: nowrap;\n"
"                line-height: 22px;\n"
"                margin: 5px 0\n"
"            }\n"
"\n"
"            .input-group>label {\n"
"                display: inline-block;\n"
"                padding-right: 10px;\n"
"                min-width: 47%\n"
"            }\n"
"\n"
"            .input-group input,.input-group select {\n"
"                flex-grow: 1\n"
"            }\n"
"\n"
"            .range-max,.range-min {\n"
"                display: inline-block;\n"
"                padding: 0 5px\n"
"            }\n"
"\n"
"            button {\n"
"                display: block;\n"
"                margin: 5px;\n"
"                padding: 0 12px;\n"
"                border: 0;\n"
"                line-height: 28px;\n"
"                cursor: pointer;\n"
"                color: #fff;\n"
"                background: #ff3034;\n"
"                border-radius: 5px;\n"
"                font-size: 16px;\n"
"                outline: 0\n"
"            }\n"
"\n"
"            button:hover {\n"
"                background: #ff494d\n"
"            }\n"
"\n"
"            button:active {\n"
"                background: #f21c21\n"
"            }\n"
"\n"
"            button.disabled {\n"
"                cursor: default;\n"
"                background: #a0a0a0\n"
"            }\n"
"\n"
"            input[type=range] {\n"
"                -webkit-appearance: none;\n"
"                width: 100%;\n"
"                height: 22px;\n"
"                background: #363636;\n"
"                cursor: pointer;\n"
"                margin: 0\n"
"            }\n"
"\n"
"            input[type=range]:focus {\n"
"                outline: 0\n"
"            }\n"
"\n"
"            input[type=range]::-webkit-slider-runnable-track {\n"
"                width: 100%;\n"
"                height: 2px;\n"
"                cursor: pointer;\n"
"                background: #EFEFEF;\n"
"                border-radius: 0;\n"
"                border: 0 solid #EFEFEF\n"
"            }\n"
"\n"
"            input[type=range]::-webkit-slider-thumb {\n"
"                border: 1px solid rgba(0,0,30,0);\n"
"                height: 22px;\n"
"                width: 22px;\n"
"                border-radius: 50px;\n"
"                background: #ff3034;\n"
"                cursor: pointer;\n"
"                -webkit-appearance: none;\n"
"                margin-top: -11.5px\n"
"            }\n"
"\n"
"            input[type=range]:focus::-webkit-slider-runnable-track {\n"
"                background: #EFEFEF\n"
"            }\n"
"\n"
"            input[type=range]::-moz-range-track {\n"
"                width: 100%;\n"
"                height: 2px;\n"
"                cursor: pointer;\n"
"                background: #EFEFEF;\n"
"                border-radius: 0;\n"
"                border: 0 solid #EFEFEF\n"
"            }\n"
"\n"
"            input[type=range]::-moz-range-thumb {\n"
"                border: 1px solid rgba(0,0,30,0);\n"
"                height: 22px;\n"
"                width: 22px;\n"
"                border-radius: 50px;\n"
"                background: #ff3034;\n"
"                cursor: pointer\n"
"            }\n"
"\n"
"            input[type=range]::-ms-track {\n"
"                width: 100%;\n"
"                height: 2px;\n"
"                cursor: pointer;\n"
"                background: 0 0;\n"
"                border-color: transparent;\n"
"                color: transparent\n"
"            }\n"
"\n"
"            input[type=range]::-ms-fill-lower {\n"
"                background: #EFEFEF;\n"
"                border: 0 solid #EFEFEF;\n"
"                border-radius: 0\n"
"            }\n"
"\n"
"            input[type=range]::-ms-fill-upper {\n"
"                background: #EFEFEF;\n"
"                border: 0 solid #EFEFEF;\n"
"                border-radius: 0\n"
"            }\n"
"\n"
"            input[type=range]::-ms-thumb {\n"
"                border: 1px solid rgba(0,0,30,0);\n"
"                height: 22px;\n"
"                width: 22px;\n"
"                border-radius: 50px;\n"
"                background: #ff3034;\n"
"                cursor: pointer;\n"
"                height: 2px\n"
"            }\n"
"\n"
"            input[type=range]:focus::-ms-fill-lower {\n"
"                background: #EFEFEF\n"
"            }\n"
"\n"
"            input[type=range]:focus::-ms-fill-upper {\n"
"                background: #363636\n"
"            }\n"
"\n"
"            .switch {\n"
"                display: block;\n"
"                position: relative;\n"
"                line-height: 22px;\n"
"                font-size: 16px;\n"
"                height: 22px\n"
"            }\n"
"\n"
"            .switch input {\n"
"                outline: 0;\n"
"                opacity: 0;\n"
"                width: 0;\n"
"                height: 0\n"
"            }\n"
"\n"
"            .slider {\n"
"                width: 50px;\n"
"                height: 22px;\n"
"                border-radius: 22px;\n"
"                cursor: pointer;\n"
"                background-color: grey\n"
"            }\n"
"\n"
"            .slider,.slider:before {\n"
"                display: inline-block;\n"
"                transition: .4s\n"
"            }\n"
"\n"
"            .slider:before {\n"
"                position: relative;\n"
"                content: \"\";\n"
"                border-radius: 50%;\n"
"                height: 16px;\n"
"                width: 16px;\n"
"                left: 4px;\n"
"                top: 3px;\n"
"                background-color: #fff\n"
"            }\n"
"\n"
"            input:checked+.slider {\n"
"                background-color: #ff3034\n"
"            }\n"
"\n"
"            input:checked+.slider:before {\n"
"                -webkit-transform: translateX(26px);\n"
"                transform: translateX(26px)\n"
"            }\n"
"\n"
"            select {\n"
"                border: 1px solid #363636;\n"
"                font-size: 14px;\n"
"                height: 22px;\n"
"                outline: 0;\n"
"                border-radius: 5px\n"
"            }\n"
"\n"
"            .image-container {\n"
"                position: relative;\n"
"                min-width: 160px\n"
"            }\n"
"\n"
"            .close {\n"
"                position: absolute;\n"
"                right: 5px;\n"
"                top: 5px;\n"
"                background: #ff3034;\n"
"                width: 16px;\n"
"                height: 16px;\n"
"                border-radius: 100px;\n"
"                color: #fff;\n"
"                text-align: center;\n"
"                line-height: 18px;\n"
"                cursor: pointer\n"
"            }\n"
"\n"
"            .hidden {\n"
"                display: none\n"
"            }\n"
"        </style>\n"
"    </head>\n"
"    <body>\n"
"        <section class=\"main\">\n"
"            <div id=\"logo\">\n"
"                <label for=\"nav-toggle-cb\" id=\"nav-toggle\">&#9776;&nbsp;&nbsp;Toggle OV2640 settings</label>\n"
"            </div>\n"
"            <div id=\"content\">\n"
"                <div id=\"sidebar\">\n"
"                    <input type=\"checkbox\" id=\"nav-toggle-cb\" checked=\"checked\">\n"
"                    <nav id=\"menu\">\n"
"                        <div class=\"input-group\" id=\"framesize-group\">\n"
"                            <label for=\"framesize\">Resolution</label>\n"
"                            <select id=\"framesize\" class=\"default-action\">\n"
"                                <option value=\"10\">UXGA(1600x1200)</option>\n"
"                                <option value=\"9\">SXGA(1280x1024)</option>\n"
"                                <option value=\"8\">XGA(1024x768)</option>\n"
"                                <option value=\"7\">SVGA(800x600)</option>\n"
"                                <option value=\"6\">VGA(640x480)</option>\n"
"                                <option value=\"5\" selected=\"selected\">CIF(400x296)</option>\n"
"                                <option value=\"4\">QVGA(320x240)</option>\n"
"                                <option value=\"3\">HQVGA(240x176)</option>\n"
"                                <option value=\"0\">QQVGA(160x120)</option>\n"
"                            </select>\n"
"                        </div>\n"
"                        <div class=\"input-group\" id=\"quality-group\">\n"
"                            <label for=\"quality\">Quality</label>\n"
"                            <div class=\"range-min\">10</div>\n"
"                            <input type=\"range\" id=\"quality\" min=\"10\" max=\"63\" value=\"10\" class=\"default-action\">\n"
"                            <div class=\"range-max\">63</div>\n"
"                        </div>\n"
"                        <div class=\"input-group\" id=\"brightness-group\">\n"
"                            <label for=\"brightness\">Brightness</label>\n"
"                            <div class=\"range-min\">-2</div>\n"
"                            <input type=\"range\" id=\"brightness\" min=\"-2\" max=\"2\" value=\"0\" class=\"default-action\">\n"
"                            <div class=\"range-max\">2</div>\n"
"                        </div>\n"
"                        <div class=\"input-group\" id=\"contrast-group\">\n"
"                            <label for=\"contrast\">Contrast</label>\n"
"                            <div class=\"range-min\">-2</div>\n"
"                            <input type=\"range\" id=\"contrast\" min=\"-2\" max=\"2\" value=\"0\" class=\"default-action\">\n"
"                            <div class=\"range-max\">2</div>\n"
"                        </div>\n"
"                        <div class=\"input-group\" id=\"saturation-group\">\n"
"                            <label for=\"saturation\">Saturation</label>\n"
"                            <div class=\"range-min\">-2</div>\n"
"                            <input type=\"range\" id=\"saturation\" min=\"-2\" max=\"2\" value=\"0\" class=\"default-action\">\n"
"                            <div class=\"range-max\">2</div>\n"
"                        </div>\n"
"                        <div class=\"input-group\" id=\"special_effect-group\">\n"
"                            <label for=\"special_effect\">Special Effect</label>\n"
"                            <select id=\"special_effect\" class=\"default-action\">\n"
"                                <option value=\"0\" selected=\"selected\">No Effect</option>\n"
"                                <option value=\"1\">Negative</option>\n"
"                                <option value=\"2\">Grayscale</option>\n"
"                                <option value=\"3\">Red Tint</option>\n"
"                                <option value=\"4\">Green Tint</option>\n"
"                                <option value=\"5\">Blue Tint</option>\n"
"                                <option value=\"6\">Sepia</option>\n"
"                            </select>\n"
"                        </div>\n"
"                        <div class=\"input-group\" id=\"awb-group\">\n"
"                            <label for=\"awb\">AWB</label>\n"
"                            <div class=\"switch\">\n"
"                                <input id=\"awb\" type=\"checkbox\" class=\"default-action\" checked=\"checked\">\n"
"                                <label class=\"slider\" for=\"awb\"></label>\n"
"                            </div>\n"
"                        </div>\n"
"                        <div class=\"input-group\" id=\"awb_gain-group\">\n"
"                            <label for=\"awb_gain\">AWB Gain</label>\n"
"                            <div class=\"switch\">\n"
"                                <input id=\"awb_gain\" type=\"checkbox\" class=\"default-action\" checked=\"checked\">\n"
"                                <label class=\"slider\" for=\"awb_gain\"></label>\n"
"                            </div>\n"
"                        </div>\n"
"                        <div class=\"input-group\" id=\"wb_mode-group\">\n"
"                            <label for=\"wb_mode\">WB Mode</label>\n"
"                            <select id=\"wb_mode\" class=\"default-action\">\n"
"                                <option value=\"0\" selected=\"selected\">Auto</option>\n"
"                                <option value=\"1\">Sunny</option>\n"
"                                <option value=\"2\">Cloudy</option>\n"
"                                <option value=\"3\">Office</option>\n"
"                                <option value=\"4\">Home</option>\n"
"                            </select>\n"
"                        </div>\n"
"                        <div class=\"input-group\" id=\"aec-group\">\n"
"                            <label for=\"aec\">AEC SENSOR</label>\n"
"                            <div class=\"switch\">\n"
"                                <input id=\"aec\" type=\"checkbox\" class=\"default-action\" checked=\"checked\">\n"
"                                <label class=\"slider\" for=\"aec\"></label>\n"
"                            </div>\n"
"                        </div>\n"
"                        <div class=\"input-group\" id=\"aec2-group\">\n"
"                            <label for=\"aec2\">AEC DSP</label>\n"
"                            <div class=\"switch\">\n"
"                                <input id=\"aec2\" type=\"checkbox\" class=\"default-action\" checked=\"checked\">\n"
"                                <label class=\"slider\" for=\"aec2\"></label>\n"
"                            </div>\n"
"                        </div>\n"
"                        <div class=\"input-group\" id=\"ae_level-group\">\n"
"                            <label for=\"ae_level\">AE Level</label>\n"
"                            <div class=\"range-min\">-2</div>\n"
"                            <input type=\"range\" id=\"ae_level\" min=\"-2\" max=\"2\" value=\"0\" class=\"default-action\">\n"
"                            <div class=\"range-max\">2</div>\n"
"                        </div>\n"
"                        <div class=\"input-group\" id=\"aec_value-group\">\n"
"                            <label for=\"aec_value\">Exposure</label>\n"
"                            <div class=\"range-min\">0</div>\n"
"                            <input type=\"range\" id=\"aec_value\" min=\"0\" max=\"1200\" value=\"204\" class=\"default-action\">\n"
"                            <div class=\"range-max\">1200</div>\n"
"                        </div>\n"
"                        <div class=\"input-group\" id=\"agc-group\">\n"
"                            <label for=\"agc\">AGC</label>\n"
"                            <div class=\"switch\">\n"
"                                <input id=\"agc\" type=\"checkbox\" class=\"default-action\" checked=\"checked\">\n"
"                                <label class=\"slider\" for=\"agc\"></label>\n"
"                            </div>\n"
"                        </div>\n"
"                        <div class=\"input-group hidden\" id=\"agc_gain-group\">\n"
"                            <label for=\"agc_gain\">Gain</label>\n"
"                            <div class=\"range-min\">1x</div>\n"
"                            <input type=\"range\" id=\"agc_gain\" min=\"0\" max=\"30\" value=\"5\" class=\"default-action\">\n"
"                            <div class=\"range-max\">31x</div>\n"
"                        </div>\n"
"                        <div class=\"input-group\" id=\"gainceiling-group\">\n"
"                            <label for=\"gainceiling\">Gain Ceiling</label>\n"
"                            <div class=\"range-min\">2x</div>\n"
"                            <input type=\"range\" id=\"gainceiling\" min=\"0\" max=\"6\" value=\"0\" class=\"default-action\">\n"
"                            <div class=\"range-max\">128x</div>\n"
"                        </div>\n"
"                        <div class=\"input-group\" id=\"bpc-group\">\n"
"                            <label for=\"bpc\">BPC</label>\n"
"                            <div class=\"switch\">\n"
"                                <input id=\"bpc\" type=\"checkbox\" class=\"default-action\">\n"
"                                <label class=\"slider\" for=\"bpc\"></label>\n"
"                            </div>\n"
"                        </div>\n"
"                        <div class=\"input-group\" id=\"wpc-group\">\n"
"                            <label for=\"wpc\">WPC</label>\n"
"                            <div class=\"switch\">\n"
"                                <input id=\"wpc\" type=\"checkbox\" class=\"default-action\" checked=\"checked\">\n"
"                                <label class=\"slider\" for=\"wpc\"></label>\n"
"                            </div>\n"
"                        </div>\n"
"                        <div class=\"input-group\" id=\"raw_gma-group\">\n"
"                            <label for=\"raw_gma\">Raw GMA</label>\n"
"                            <div class=\"switch\">\n"
"                                <input id=\"raw_gma\" type=\"checkbox\" class=\"default-action\" checked=\"checked\">\n"
"                                <label class=\"slider\" for=\"raw_gma\"></label>\n"
"                            </div>\n"
"                        </div>\n"
"                        <div class=\"input-group\" id=\"lenc-group\">\n"
"                            <label for=\"lenc\">Lens Correction</label>\n"
"                            <div class=\"switch\">\n"
"                                <input id=\"lenc\" type=\"checkbox\" class=\"default-action\" checked=\"checked\">\n"
"                                <label class=\"slider\" for=\"lenc\"></label>\n"
"                            </div>\n"
"                        </div>\n"
"                        <div class=\"input-group\" id=\"hmirror-group\">\n"
"                            <label for=\"hmirror\">H-Mirror</label>\n"
"                            <div class=\"switch\">\n"
"                                <input id=\"hmirror\" type=\"checkbox\" class=\"default-action\" checked=\"checked\">\n"
"                                <label class=\"slider\" for=\"hmirror\"></label>\n"
"                            </div>\n"
"                        </div>\n"
"                        <div class=\"input-group\" id=\"vflip-group\">\n"
"                            <label for=\"vflip\">V-Flip</label>\n"
"                            <div class=\"switch\">\n"
"                                <input id=\"vflip\" type=\"checkbox\" class=\"default-action\" checked=\"checked\">\n"
"                                <label class=\"slider\" for=\"vflip\"></label>\n"
"                            </div>\n"
"                        </div>\n"
"                        <div class=\"input-group\" id=\"dcw-group\">\n"
"                            <label for=\"dcw\">DCW (Downsize EN)</label>\n"
"                            <div class=\"switch\">\n"
"                                <input id=\"dcw\" type=\"checkbox\" class=\"default-action\" checked=\"checked\">\n"
"                                <label class=\"slider\" for=\"dcw\"></label>\n"
"                            </div>\n"
"                        </div>\n"
"                        <div class=\"input-group\" id=\"colorbar-group\">\n"
"                            <label for=\"colorbar\">Color Bar</label>\n"
"                            <div class=\"switch\">\n"
"                                <input id=\"colorbar\" type=\"checkbox\" class=\"default-action\">\n"
"                                <label class=\"slider\" for=\"colorbar\"></label>\n"
"                            </div>\n"
"                        </div>\n"
"                        <div class=\"input-group\" id=\"face_detect-group\">\n"
"                            <label for=\"face_detect\">Face Detection</label>\n"
"                            <div class=\"switch\">\n"
"                                <input id=\"face_detect\" type=\"checkbox\" class=\"default-action\">\n"
"                                <label class=\"slider\" for=\"face_detect\"></label>\n"
"                            </div>\n"
"                        </div>\n"
"                        <div class=\"input-group\" id=\"face_recognize-group\">\n"
"                            <label for=\"face_recognize\">Face Recognition</label>\n"
"                            <div class=\"switch\">\n"
"                                <input id=\"face_recognize\" type=\"checkbox\" class=\"default-action\">\n"
"                                <label class=\"slider\" for=\"face_recognize\"></label>\n"
"                            </div>\n"
"                        </div>\n"
"                        <section id=\"buttons\">\n"
"                            <button id=\"get-still\">Get Still</button>\n"
"                            <button id=\"toggle-stream\">Start Stream</button>\n"
"                            <button id=\"face_enroll\" class=\"disabled\" disabled=\"disabled\">Enroll Face</button>\n"
"                        </section>\n"
"                    </nav>\n"
"                </div>\n"
"                <figure>\n"
"                    <div id=\"stream-container\" class=\"image-container hidden\">\n"
"                        <div class=\"close\" id=\"close-stream\">×</div>\n"
"                        <img id=\"stream\" src=\"\">\n"
"                    </div>\n"
"                </figure>\n"
"            </div>\n"
"        </section>\n"
"        <script>\n"
"document.addEventListener('DOMContentLoaded', function (event) {\n"
"  var baseHost = document.location.origin\n"
"  var streamUrl = baseHost + ':81'\n"
"\n"
"  const hide = el => {\n"
"    el.classList.add('hidden')\n"
"  }\n"
"  const show = el => {\n"
"    el.classList.remove('hidden')\n"
"  }\n"
"\n"
"  const disable = el => {\n"
"    el.classList.add('disabled')\n"
"    el.disabled = true\n"
"  }\n"
"\n"
"  const enable = el => {\n"
"    el.classList.remove('disabled')\n"
"    el.disabled = false\n"
"  }\n"
"\n"
"  const updateValue = (el, value, updateRemote) => {\n"
"    updateRemote = updateRemote == null ? true : updateRemote\n"
"    let initialValue\n"
"    if (el.type === 'checkbox') {\n"
"      initialValue = el.checked\n"
"      value = !!value\n"
"      el.checked = value\n"
"    } else {\n"
"      initialValue = el.value\n"
"      el.value = value\n"
"    }\n"
"\n"
"    if (updateRemote && initialValue !== value) {\n"
"      updateConfig(el);\n"
"    } else if(!updateRemote){\n"
"      if(el.id === \"aec\"){\n"
"        value ? hide(exposure) : show(exposure)\n"
"      } else if(el.id === \"agc\"){\n"
"        if (value) {\n"
"          show(gainCeiling)\n"
"          hide(agcGain)\n"
"        } else {\n"
"          hide(gainCeiling)\n"
"          show(agcGain)\n"
"        }\n"
"      } else if(el.id === \"awb_gain\"){\n"
"        value ? show(wb) : hide(wb)\n"
"      } else if(el.id === \"face_recognize\"){\n"
"        value ? enable(enrollButton) : disable(enrollButton)\n"
"      }\n"
"    }\n"
"  }\n"
"\n"
"  function updateConfig (el) {\n"
"    let value\n"
"    switch (el.type) {\n"
"      case 'checkbox':\n"
"        value = el.checked ? 1 : 0\n"
"        break\n"
"      case 'range':\n"
"      case 'select-one':\n"
"        value = el.value\n"
"        break\n"
"      case 'button':\n"
"      case 'submit':\n"
"        value = '1'\n"
"        break\n"
"      default:\n"
"        return\n"
"    }\n"
"\n"
"    const query = `${baseHost}/control?var=${el.id}&val=${value}`\n"
"\n"
"    fetch(query)\n"
"      .then(response => {\n"
"        console.log(`request to ${query} finished, status: ${response.status}`)\n"
"      })\n"
"  }\n"
"\n"
"  document\n"
"    .querySelectorAll('.close')\n"
"    .forEach(el => {\n"
"      el.onclick = () => {\n"
"        hide(el.parentNode)\n"
"      }\n"
"    })\n"
"\n"
"  // read initial values\n"
"  fetch(`${baseHost}/status`)\n"
"    .then(function (response) {\n"
"      return response.json()\n"
"    })\n"
"    .then(function (state) {\n"
"      document\n"
"        .querySelectorAll('.default-action')\n"
"        .forEach(el => {\n"
"          updateValue(el, state[el.id], false)\n"
"        })\n"
"    })\n"
"\n"
"  const view = document.getElementById('stream')\n"
"  const viewContainer = document.getElementById('stream-container')\n"
"  const stillButton = document.getElementById('get-still')\n"
"  const streamButton = document.getElementById('toggle-stream')\n"
"  const enrollButton = document.getElementById('face_enroll')\n"
"  const closeButton = document.getElementById('close-stream')\n"
"\n"
"  const stopStream = () => {\n"
"    window.stop();\n"
"    streamButton.innerHTML = 'Start Stream'\n"
"  }\n"
"\n"
"  const startStream = () => {\n"
"    view.src = `${streamUrl}/stream`\n"
"    show(viewContainer)\n"
"    streamButton.innerHTML = 'Stop Stream'\n"
"  }\n"
"\n"
"  // Attach actions to buttons\n"
"  stillButton.onclick = () => {\n"
"    stopStream()\n"
"    view.src = `${baseHost}/capture?_cb=${Date.now()}`\n"
"    show(viewContainer)\n"
"  }\n"
"\n"
"  closeButton.onclick = () => {\n"
"    stopStream()\n"
"    hide(viewContainer)\n"
"  }\n"
"\n"
"  streamButton.onclick = () => {\n"
"    const streamEnabled = streamButton.innerHTML === 'Stop Stream'\n"
"    if (streamEnabled) {\n"
"      stopStream()\n"
"    } else {\n"
"      startStream()\n"
"    }\n"
"  }\n"
"\n"
"  enrollButton.onclick = () => {\n"
"    updateConfig(enrollButton)\n"
"  }\n"
"\n"
"  // Attach default on change action\n"
"  document\n"
"    .querySelectorAll('.default-action')\n"
"    .forEach(el => {\n"
"      el.onchange = () => updateConfig(el)\n"
"    })\n"
"\n"
"  // Custom actions\n"
"  // Gain\n"
"  const agc = document.getElementById('agc')\n"
"  const agcGain = document.getElementById('agc_gain-group')\n"
"  const gainCeiling = document.getElementById('gainceiling-group')\n"
"  agc.onchange = () => {\n"
"    updateConfig(agc)\n"
"    if (agc.checked) {\n"
"      show(gainCeiling)\n"
"      hide(agcGain)\n"
"    } else {\n"
"      hide(gainCeiling)\n"
"      show(agcGain)\n"
"    }\n"
"  }\n"
"\n"
"  // Exposure\n"
"  const aec = document.getElementById('aec')\n"
"  const exposure = document.getElementById('aec_value-group')\n"
"  aec.onchange = () => {\n"
"    updateConfig(aec)\n"
"    aec.checked ? hide(exposure) : show(exposure)\n"
"  }\n"
"\n"
"  // AWB\n"
"  const awb = document.getElementById('awb_gain')\n"
"  const wb = document.getElementById('wb_mode-group')\n"
"  awb.onchange = () => {\n"
"    updateConfig(awb)\n"
"    awb.checked ? show(wb) : hide(wb)\n"
"  }\n"
"\n"
"  // Detection and framesize\n"
"  const detect = document.getElementById('face_detect')\n"
"  const recognize = document.getElementById('face_recognize')\n"
"  const framesize = document.getElementById('framesize')\n"
"\n"
"  framesize.onchange = () => {\n"
"    updateConfig(framesize)\n"
"    if (framesize.value > 5) {\n"
"      updateValue(detect, false)\n"
"      updateValue(recognize, false)\n"
"    }\n"
"  }\n"
"\n"
"  detect.onchange = () => {\n"
"    if (framesize.value > 5) {\n"
"      alert(\"Please select CIF or lower resolution before enabling this feature!\");\n"
"      updateValue(detect, false)\n"
"      return;\n"
"    }\n"
"    updateConfig(detect)\n"
"    if (!detect.checked) {\n"
"      disable(enrollButton)\n"
"      updateValue(recognize, false)\n"
"    }\n"
"  }\n"
"\n"
"  recognize.onchange = () => {\n"
"    if (framesize.value > 5) {\n"
"      alert(\"Please select CIF or lower resolution before enabling this feature!\");\n"
"      updateValue(recognize, false)\n"
"      return;\n"
"    }\n"
"    updateConfig(recognize)\n"
"    if (recognize.checked) {\n"
"      enable(enrollButton)\n"
"      updateValue(detect, true)\n"
"    } else {\n"
"      disable(enrollButton)\n"
"    }\n"
"  }\n"
"})\n"
"\n"
"        </script>\n"
"    </body>\n"
"</html>\n"
;