mdns name and tooltips

easytarget · Mar 10, 2022 · fccbd75 · fccbd75
1 parent a796676
commit fccbd75
Show file tree

Hide file tree

Showing 7 changed files with 68 additions and 62 deletions.
diff --git a/app_httpd.cpp b/app_httpd.cpp
@@ -606,7 +606,8 @@ static esp_err_t dump_handler(httpd_req_t *req){
     // Footer
     d+= sprintf(d,"<br><div class=\"input-group\">\n");
     d+= sprintf(d,"<button title=\"Instant Refresh; the page reloads every minute anyway\" onclick=\"location.replace(document.URL)\">Refresh</button>\n");
-    d+= sprintf(d,"<button title=\"Stop any active streams\" onclick=\"let throwaway = fetch('stop');setTimeout(function(){\nlocation.replace(document.URL);\n}, 200);\">Stop Stream</button>\n");
+    d+= sprintf(d,"<button title=\"Force-stop all active streams on the camera module\" ");
+    d+= sprintf(d,"onclick=\"let throwaway = fetch('stop');setTimeout(function(){\nlocation.replace(document.URL);\n}, 200);\">Kill Stream</button>\n");
     d+= sprintf(d,"<button title=\"Close this page\" onclick=\"javascript:window.close()\">Close</button>\n");
     d+= sprintf(d,"</div>\n</body>\n");
     // A javascript timer to refresh the page every minute.

diff --git a/esp32-cam-webserver.ino b/esp32-cam-webserver.ino
@@ -75,13 +75,19 @@ IPAddress gw;
 extern void startCameraServer(int hPort, int sPort);
 extern void serialDump();
 
-// A Name for the Camera. (set in myconfig.h)
+// Names for the Camera. (set these in myconfig.h)
 #if defined(CAM_NAME)
     char myName[] = CAM_NAME;
 #else
     char myName[] = "ESP32 camera server";
 #endif
 
+#if defined(MDNS_NAME)
+    char mdnsName[] = MDNS_NAME;
+#else
+    char mdnsName[] = "esp32-cam";
+#endif
+
 // Ports for http and stream (override in myconfig.h)
 #if defined(HTTP_PORT)
     int httpPort = HTTP_PORT;
@@ -138,7 +144,7 @@ char myVer[] PROGMEM = __DATE__ " @ " __TIME__;
 // Originally: config.xclk_freq_mhz = 20000000, but this lead to visual artifacts on many modules.
 // See https://github.com/espressif/esp32-camera/issues/150#issuecomment-726473652 et al.
 #if !defined (XCLK_FREQ_MHZ)
-    unsigned long xclk = 16;
+    unsigned long xclk = 8;
 #else
     unsigned long xclk = XCLK_FREQ_MHZ;
 #endif
@@ -399,9 +405,7 @@ void WifiSetup() {
             #endif
         }
 
-        #if defined(HOSTNAME)
-            WiFi.setHostname(HOSTNAME);
-        #endif
+        WiFi.setHostname(mdnsName);
 
         // Initiate network connection request (3rd argument, channel = 0 is 'auto')
         WiFi.begin(bestSSID, stationList[bestStation].password, 0, bestBSSID);
@@ -686,7 +690,7 @@ void setup() {
         // Port defaults to 3232
         // ArduinoOTA.setPort(3232);
         // Hostname defaults to esp3232-[MAC]
-        ArduinoOTA.setHostname(myName);
+        ArduinoOTA.setHostname(mdnsName);
         // No authentication by default
         if (strlen(otaPassword) != 0) {
             ArduinoOTA.setPassword(otaPassword);
@@ -722,7 +726,7 @@ void setup() {
     } else {
         Serial.println("OTA is disabled");
 
-        if (!MDNS.begin(myName)) {
+        if (!MDNS.begin(mdnsName)) {
           Serial.println("Error setting up MDNS responder!");
         }
         Serial.println("mDNS responder started");

diff --git a/index_other.h b/index_other.h
@@ -36,7 +36,7 @@ const uint8_t index_simple_html[] = R"=====(<!doctype html>
         <div class="hidden" id="sidebar">
           <input type="checkbox" id="nav-toggle-cb">
             <nav id="menu" style="width:24em;">
-              <div class="input-group hidden" id="lamp-group" title="Brightness of flashlight LED. Warning: Very bright! Be careful when increasing. Avoid looking directly at LED!>
+              <div class="input-group hidden" id="lamp-group" title="Flashlight LED.&#013;&#013;Warning:&#013;Built-In lamps can be Very Bright! Avoid looking directly at LED&#013;Can draw a lot of power and may cause visual artifacts, affect WiFi or even brownout the camera on high settings">
                 <label for="lamp">Light</label>
                 <div class="range-min">Off</div>
                 <input type="range" id="lamp" min="0" max="100" value="0" class="action-setting">

diff --git a/index_ov2640.h b/index_ov2640.h
@@ -35,21 +35,21 @@ const uint8_t index_ov2640_html[] = R"=====(<!doctype html>
         <div class="hidden" id="sidebar">
           <input type="checkbox" id="nav-toggle-cb" checked="checked">
             <nav id="menu">
-              <div class="input-group hidden" id="lamp-group" title="Brightness of flashlight LED. Warning: Very bright! Be careful when increasing. Avoid looking directly at LED!">
+              <div class="input-group hidden" id="lamp-group" title="Flashlight LED.&#013;&#013;Warning:&#013;Built-In lamps can be Very Bright! Avoid looking directly at LED&#013;Can draw a lot of power and may cause visual artifacts, affect WiFi or even brownout the camera on high settings">
                 <label for="lamp">Light</label>
                 <div class="range-min">Off</div>
                 <input type="range" id="lamp" min="0" max="100" value="0" class="default-action">
-                <div class="range-max">Full&#9888;</div>
+                <div class="range-max"><span style="font-size: 125%;">&#9888;</span>Full</div>
               </div>
-              <div class="input-group hidden" id="autolamp-group" title="Lamp only on when camera active">
+              <div class="input-group hidden" id="autolamp-group" title="When enabled the lamp will only turn on while the camera is active">
                 <label for="autolamp">Auto Lamp</label>
                 <div class="switch">
                   <input id="autolamp" type="checkbox" class="default-action">
                   <label class="slider" for="autolamp"></label>
                 </div>
               </div>
 
-              <div class="input-group" id="framesize-group">
+              <div class="input-group" id="framesize-group" title="Camera resolution&#013;Higher resolutions will result in lower framerates">
                 <label for="framesize">Resolution</label>
                 <select id="framesize" class="default-action">
                   <option value="13">UXGA (1600x1200)</option>
@@ -66,18 +66,18 @@ const uint8_t index_ov2640_html[] = R"=====(<!doctype html>
                   <option value="0">THUMB (96x96)</option>
                 </select>
               </div>
-              <div class="input-group" id="quality-group">
+              <div class="input-group" id="quality-group" title="Camera Image and Stream quality factor&#013;Higher settings will result in lower framerates">
                 <label for="quality">Quality</label>
-                <div class="range-min">Low<br><span style="font-size: 80%;">(fast)</span></div>
+                <div class="range-min">Low</div>
                 <!-- Note; the following element is 'flipped' in CSS so that it slides from High to Low
                      As a result the 'min' and 'max' values are reversed here too -->
                 <input type="range" id="quality" min="6" max="63" value="10" class="default-action">
-                <div class="range-max">High<br><span style="font-size: 80%;">(slow)</span></div>
+                <div class="range-max">High</div>
               </div>
-              <div class="input-group" id="set-xclk-group">
+              <div class="input-group" id="set-xclk-group" title="Camera Bus Clock Frequency&#013;Increasing this will raise the camera framerate and capture speed&#013;&#013;Raising too far will result in visual artifacts and/or incomplete frames&#013;This setting can vary a lot between boards, budget boards typically need lower values">
                  <label for="set-xclk">XCLK</label>
                  <div class="text">
-                    <input id="xclk" type="number" min="2" max="32" size="4" step="1" class="default-action">
+                    <input id="xclk" type="number" min="2" max="32" size="3" step="1" class="default-action">
                     <div class="range-max">MHz</div>
                   </div>
               </div>
@@ -112,14 +112,14 @@ const uint8_t index_ov2640_html[] = R"=====(<!doctype html>
                 </select>
               </div>
               <div class="input-group" id="awb-group">
-                <label for="awb">AWB</label>
+                <label for="awb">AWB Enable</label>
                 <div class="switch">
                   <input id="awb" type="checkbox" class="default-action" checked="checked">
                   <label class="slider" for="awb"></label>
                 </div>
               </div>
               <div class="input-group" id="awb_gain-group">
-                <label for="awb_gain">AWB Gain</label>
+                <label for="awb_gain">Manual AWB Gain</label>
                 <div class="switch">
                   <input id="awb_gain" type="checkbox" class="default-action" checked="checked">
                   <label class="slider" for="awb_gain"></label>
@@ -136,7 +136,7 @@ const uint8_t index_ov2640_html[] = R"=====(<!doctype html>
                 </select>
               </div>
               <div class="input-group" id="aec-group">
-                <label for="aec">AEC SENSOR</label>
+                <label for="aec">AEC Sensor Enable</label>
                 <div class="switch">
                   <input id="aec" type="checkbox" class="default-action" checked="checked">
                   <label class="slider" for="aec"></label>
@@ -195,7 +195,7 @@ const uint8_t index_ov2640_html[] = R"=====(<!doctype html>
                 </div>
               </div>
               <div class="input-group" id="raw_gma-group">
-                <label for="raw_gma">Raw GMA</label>
+                <label for="raw_gma">Raw GMA Enable</label>
                 <div class="switch">
                   <input id="raw_gma" type="checkbox" class="default-action" checked="checked">
                   <label class="slider" for="raw_gma"></label>
@@ -244,12 +244,12 @@ const uint8_t index_ov2640_html[] = R"=====(<!doctype html>
                   <label class="slider" for="colorbar"></label>
                 </div>
               </div>
-              <div class="input-group" id="min_frame_time-group">
+              <div class="input-group" id="min_frame_time-group" title="Minimum frame time&#013;Higher settings reduce the frame rate&#013;Use this for a smoother stream and to reduce load on the WiFi and browser">
                 <label for="min_frame_time">Frame Duration Limit</label>
                 <select id="min_frame_time" class="default-action">
-                  <option value="3333">3333ms (0.3fps)</option>
-                  <option value="2000">2000ms (0.5fps)</option>
-                  <option value="1000">1000ms (1fps)</option>
+                  <option value="3333">3.3s  (0.3fps)</option>
+                  <option value="2000">2s    (0.5fps)</option>
+                  <option value="1000">1s    (1fps)</option>
                   <option value="500">500ms (2fps)</option>
                   <option value="333">333ms (3fps)</option>
                   <option value="200">200ms (5fps)</option>
@@ -590,6 +590,7 @@ const uint8_t index_ov2640_html[] = R"=====(<!doctype html>
 
     minFrameTime.onchange = () => {
       updateConfig(minFrameTime)
+    }
 
     xclk.onchange = () => {
       console.log("xclk:" , xclk);

diff --git a/index_ov3660.h b/index_ov3660.h
@@ -35,21 +35,21 @@ const uint8_t index_ov3660_html[] = R"=====(<!doctype html>
         <div class="hidden" id="sidebar">
           <input type="checkbox" id="nav-toggle-cb" checked="checked">
             <nav id="menu">
-              <div class="input-group hidden" id="lamp-group" title="Brightness of flashlight LED. Warning: Very bright! Be careful when increasing. Avoid looking directly at LED!">
+              <div class="input-group hidden" id="lamp-group" title="Flashlight LED.&#013;&#013;Warning:&#013;Built-In lamps can be Very Bright! Avoid looking directly at LED&#013;Can draw a lot of power and may cause visual artifacts, affect WiFi or even brownout the camera on high settings">
                 <label for="lamp">Light</label>
                 <div class="range-min">Off</div>
                 <input type="range" id="lamp" min="0" max="100" value="0" class="default-action">
-                <div class="range-max">Full&#9888;</div>
+                <div class="range-max"><span style="font-size: 125%;">&#9888;</span>Full</div>
               </div>
-              <div class="input-group hidden" id="autolamp-group" title="Lamp only on when camera active">
+              <div class="input-group hidden" id="autolamp-group" title="When enabled the lamp will only turn on while the camera is active">
                 <label for="autolamp">Auto Lamp</label>
                 <div class="switch">
                   <input id="autolamp" type="checkbox" class="default-action">
                   <label class="slider" for="autolamp"></label>
                 </div>
               </div>
 
-              <div class="input-group" id="framesize-group">
+              <div class="input-group" id="framesize-group" title="Camera resolution&#013;Higher resolutions will result in lower framerates">
                 <label for="framesize">Resolution</label>
                 <select id="framesize" class="default-action">
                   <option value="17">QXGA (2048x1536)</option>
@@ -68,18 +68,18 @@ const uint8_t index_ov3660_html[] = R"=====(<!doctype html>
                   <option value="0">THUMB (96x96)</option>
                 </select>
               </div>
-              <div class="input-group" id="quality-group">
+              <div class="input-group" id="quality-group" title="Camera Image and Stream quality factor&#013;Higher settings will result in lower framerates">
                 <label for="quality">Quality</label>
-                <div class="range-min">Low<br><span style="font-size: 80%;">(fast)</span></div>
+                <div class="range-min">Low</div>
                 <!-- Note; the following element is 'flipped' in CSS so that it slides from High to Low
                      As a result the 'min' and 'max' values are reversed here too -->
                 <input type="range" id="quality" min="4" max="63" value="10" class="default-action">
-                <div class="range-max">High<br><span style="font-size: 80%;">(slow)</span></div>
+                <div class="range-max">High</div>
               </div>
-              <div class="input-group" id="set-xclk-group">
+              <div class="input-group" id="set-xclk-group" title="Camera Bus Clock Frequency&#013;Increasing this will raise the camera framerate and capture speed&#013;&#013;Raising too far will result in visual artifacts and/or incomplete frames&#013;This setting can vary a lot between boards, budget boards typically need lower values">
                  <label for="set-xclk">XCLK</label>
                  <div class="text">
-                    <input id="xclk" type="number" min="2" max="32" size="4" step="1" class="default-action">
+                    <input id="xclk" type="number" min="2" max="32" size="3" step="1" class="default-action">
                     <div class="range-max">MHz</div>
                   </div>
               </div>
@@ -152,14 +152,14 @@ const uint8_t index_ov3660_html[] = R"=====(<!doctype html>
                 </div>
               </div>
               <div class="input-group" id="awb_gain-group">
-                <label for="awb_gain">Manual AWB</label>
+                <label for="awb_gain">Manual AWB Gain</label>
                 <div class="switch">
                   <input id="awb_gain" type="checkbox" class="default-action" checked="checked">
                   <label class="slider" for="awb_gain"></label>
                 </div>
               </div>
               <div class="input-group" id="wb_mode-group">
-                <label for="wb_mode">AWB Mode</label>
+                <label for="wb_mode">WB Mode</label>
                 <select id="wb_mode" class="default-action">
                   <option value="0" selected="selected">Auto</option>
                   <option value="1">Sunny</option>
@@ -169,7 +169,7 @@ const uint8_t index_ov3660_html[] = R"=====(<!doctype html>
                 </select>
               </div>
               <div class="input-group" id="aec-group">
-                <label for="aec">AEC Enable</label>
+                <label for="aec">AEC Sensor Enable</label>
                 <div class="switch">
                   <input id="aec" type="checkbox" class="default-action" checked="checked">
                   <label class="slider" for="aec"></label>
@@ -202,7 +202,7 @@ const uint8_t index_ov3660_html[] = R"=====(<!doctype html>
                 <div class="range-max">64x</div>
               </div>
               <div class="input-group" id="raw_gma-group">
-                <label for="raw_gma">GMA Enable</label>
+                <label for="raw_gma">Raw GMA Enable</label>
                 <div class="switch">
                   <input id="raw_gma" type="checkbox" class="default-action" checked="checked">
                   <label class="slider" for="raw_gma"></label>
@@ -258,12 +258,12 @@ const uint8_t index_ov3660_html[] = R"=====(<!doctype html>
                   <label class="slider" for="colorbar"></label>
                 </div>
               </div>
-              <div class="input-group" id="min_frame_time-group">
+              <div class="input-group" id="min_frame_time-group" title="Minimum frame time&#013;Higher settings reduce the frame rate&#013;Use this for a smoother stream and to reduce load on the WiFi and browser">
                 <label for="min_frame_time">Frame Duration Limit</label>
                 <select id="min_frame_time" class="default-action">
-                  <option value="3333">3333ms (0.3fps)</option>
-                  <option value="2000">2000ms (0.5fps)</option>
-                  <option value="1000">1000ms (1fps)</option>
+                  <option value="3333">3.3s  (0.3fps)</option>
+                  <option value="2000">2s    (0.5fps)</option>
+                  <option value="1000">1s    (1fps)</option>
                   <option value="500">500ms (2fps)</option>
                   <option value="333">333ms (3fps)</option>
                   <option value="200">200ms (5fps)</option>
@@ -599,6 +599,7 @@ const uint8_t index_ov3660_html[] = R"=====(<!doctype html>
 
     minFrameTime.onchange = () => {
       updateConfig(minFrameTime)
+    }
 
     xclk.onchange = () => {
       console.log("xclk:" , xclk);

diff --git a/myconfig.sample.h b/myconfig.sample.h
@@ -5,12 +5,14 @@
  */
 
 
-/* Give the camera a name for the web interface
- * A word of warning: This name is also used for OTA updates and MDNS addressing.
- * Pick something convenient!
- */
+/* Give the camera a name for the web interface */
 #define CAM_NAME "ESP32 camera server"
 
+/*
+ * Give the mdns network name
+ * This is the name the camera will advertise on the network
+ */
+#define MDNS_NAME "esp32-cam"
 
 /*
  *    WiFi Settings
@@ -42,15 +44,9 @@ struct station stationList[] = {{"ssid1", "pass1", true},
 /* Extended WiFi Settings */
 
 /*
- * Hostname. Optional, uncomment and set if desired
- * - used in DHCP request when connecting to networks, not used in AP mode
- * - Most useful when used with a static netwrk config, not all routers respect this setting
- *
- * The URL_HOSTNAME will be used in place of the IP address in internal URL's
+ * If defined: URL_HOSTNAME will be used in place of the IP address in internal URL's
  */
-
-// #define HOSTNAME "esp-cam"
-// #define URL_HOSTNAME "esp-cam"
+// #define URL_HOSTNAME "esp32-cam"
 
 /*
  * Static network settings for client mode
@@ -108,6 +104,7 @@ struct station stationList[] = {{"ssid1", "pass1", true},
 
 /*
  * Over The Air firmware updates can be disabled by uncommenting the folowing line
+ * When enabled the device will advertise itself using the MDNS_NAME defined above
  */
 // #define NO_OTA
 
@@ -197,4 +194,3 @@ struct station stationList[] = {{"ssid1", "pass1", true},
 // For clone modules that have camera module and SPIFFS startup issues try setting
 // this very low (start at 2MHZ and increase):
 // #define XCLK_FREQ_MHZ 2
-