Merge pull request #10 from rzeldent/feature/html_gzip

Feature/html gzip

generate_html.ps1

@@ -2,3 +2,4 @@
 . python3 -m pip install htmlmin
 
 . python3 ./html_to_cpp.py ./html ./include/html_data.h
+. python3 ./html_to_cpp_gzip.py ./html_gzip ./include/html_data_gzip.h

generate_html.sh

@@ -2,4 +2,5 @@
 python3 -m pip install --upgrade pip setuptools wheel
 python3 -m pip install htmlmin
 
-python3 ./html_to_cpp.py ./html ./include/html_data.h
+python3 ./html_to_cpp.py ./html ./include/html_data.h
+python3 ./html_to_cpp_gzip.py ./html_gzip ./include/html_data_gzip.h

html/index.html

@@ -107,12 +107,12 @@
                             <div class="col-8">{{IpV6}}</div>
                         </div>
                         {{#NetworkState.ApMode}}
-                        <div class="alert alert-warning" role="alert">
+                        <div class="mt-4 alert alert-warning" role="alert">
                             <p>Not connected to an access point. Consider configuring the access point.</p>
                         </div>
                         {{/NetworkState.ApMode}}
                         {{#NetworkState.OnLine}}
-                        <div class="alert alert-success" role="alert">
+                        <div class="mt-4 alert alert-success" role="alert">
                             <p>Connected to the access point</p>
                         </div>
                         {{/NetworkState.OnLine}}
@@ -148,12 +148,12 @@
                             <div class="col-8">{{JpegQuality}} (0-100)</div>
                         </div>
                         {{#CameraInitialized}}
-                        <div class="alert alert-success" role="alert">
+                        <div class="mt-4 alert alert-success" role="alert">
                             <p>Camera was initialized successfully!</p>
                         </div>
                         {{/CameraInitialized}}
                         {{^CameraInitialized}}
-                        <div class="alert alert-danger" role="alert">
+                        <div class="mt-4 alert alert-danger" role="alert">
                             <p>Failed to initialize the camera!</p>
                             <p>Result: {{CameraInitResultText}} ({{CameraInitResult}})</p>
                             <p>Please check hardware or correct the camera settings and restart.</p>

html_to_cpp.py

@@ -16,11 +16,11 @@ file_names = filter(lambda x: x[0] != '.' and os.path.isfile(os.path.join(input_
 file_names = sorted(file_names)
 
 output_file = open(file_h, 'w')
-output_file.write('//*******************************************************************************\n')
-output_file.write('// HTML import\n')
-output_file.write('// Machine generated file\n')
-output_file.write('// ******************************************************************************\n')
-output_file.write('\n')
+output_file.write('//*******************************************************************************\n'
+    '// HTML import\n'
+    '// Machine generated file\n'
+    '// ******************************************************************************\n'
+    '\n\n')
 
 for file_name in file_names:
     print(f'Processing: {file_name}... ')
@@ -33,13 +33,9 @@ for file_name in file_names:
     file.close()
 
     html_mimified = htmlmin.minify(html, remove_empty_space=True)
-
-    output_file.write('\n')
-    output_file.write('constexpr char ' + file_data_name + '[] = "')
     # escape "
     html_mimified_escaped = html_mimified.replace('"', '\\"')
-    output_file.write(html_mimified_escaped)
-    output_file.write('";\n')
+    output_file.write(f'constexpr char {file_data_name }[] = "{html_mimified_escaped}";\n')
 
 output_file.close()
 

html_to_cpp_gzip.py

@@ -37,9 +37,9 @@ for file_name in file_names:
 
     html_mimified = htmlmin.minify(html, remove_empty_space=True)
     html_mimified_gzip = gzip.compress(bytes(html_mimified, 'utf-8'))
-    html_mimified_gzip_values = ','.join(f'0x{i:02x}' for x in html_mimified_gzip)
+    html_mimified_gzip_values = ','.join(f'0x{i:02x}' for i in html_mimified_gzip)
 
-    output_file.write(f'constexpr unsigned char {file_data_name}[] = {{{html_mimified_gzip_values}}};\n\n')
+    output_file.write(f'constexpr unsigned char {file_data_name}[] = {{\n{html_mimified_gzip_values}\n}};\n\n')
 
 output_file.close()
 

src/main.cpp

@@ -12,6 +12,7 @@
 #include <format_number.h>
 #include <template_render.h>
 #include <html_data.h>
+#include <html_data_gzip.h>
 #include <settings.h>
 
 char camera_config_val[sizeof(camera_config_entry)];
@@ -42,11 +43,14 @@ bool config_changed = false;
 // Camera initialization result
 esp_err_t camera_init_result;
 
-void stream_text_file(const char *contents, const char *mime_type)
+void stream_text_file_gzip(const unsigned char *content, size_t length, const char *mime_type)
 {
   // Cache for 86400 seconds (one day)
   web_server.sendHeader("Cache-Control", "max-age=86400");
-  web_server.send(200, mime_type, contents);
+  web_server.sendHeader("Content-encoding", "gzip");
+  web_server.setContentLength(length);
+  web_server.send(200, mime_type, "");
+  web_server.sendContent(reinterpret_cast<const char *>(content), length);
 }
 
 void handle_root()
@@ -138,14 +142,13 @@ void handle_snapshot()
     return;
   }
 
-  web_server.sendHeader("Cache-Control", "no-cache, no-store, must-revalidate");
-  web_server.sendContent("HTTP/1.1 200 OK\r\n"
-                         "Content-Disposition: inline; filename=snapshot.jpg\r\n"
-                         "Content-Type: image/jpeg\r\n\r\n");
   // Make a copy in memory to prevent interaction with RTSP
-  auto fb_len = cam.getSize();
   cam.run();
+  auto fb_len = cam.getSize();
   auto fb = (uint8_t *)memcpy(new uint8_t[cam.getSize()], cam.getfb(), fb_len);
+  web_server.sendHeader("Cache-Control", "no-cache, no-store, must-revalidate");
+  web_server.setContentLength(fb_len);
+  web_server.send(200, "image/jpeg", "");
   web_server.sendContent(reinterpret_cast<const char *>(fb), fb_len);
   delete[] fb;
 }
@@ -238,7 +241,7 @@ void setup()
 
   // bootstrap
   web_server.on("/bootstrap.min.css", HTTP_GET, []()
-                { stream_text_file(file_data_bootstrap_min_css, "text/css"); });
+                { stream_text_file_gzip(file_data_bootstrap_min_css, sizeof(file_data_bootstrap_min_css), "text/css"); });
 
   web_server.onNotFound([]()
                         { iotWebConf.handleNotFound(); });