Mirror/esp32-cam-webserver
1
0
Fork 0
mirror of https://github.com/easytarget/esp32-cam-webserver.git synced 2024-02-16 18:18:24 +08:00
Code Issues Projects Releases Wiki Activity

mdns name and tooltips

Browse Source
This commit is contained in:
Owen
2022-03-10 14:44:26 +01:00
parent a79667686f
commit fccbd75ac3
7 changed files with 68 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
app_httpd.cpp
View File

@ -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.

18
esp32-cam-webserver.ino
View File

@ -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");

2
index_other.h
View File

@ -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">

35
index_ov2640.h
View File

@ -35,13 +35,13 @@ 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">
@ -49,7 +49,7 @@ const uint8_t index_ov2640_html[] = R"=====(<!doctype html>
</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);

35
index_ov3660.h
View File

@ -35,13 +35,13 @@ 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">
@ -49,7 +49,7 @@ const uint8_t index_ov3660_html[] = R"=====(<!doctype html>
</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);

22
myconfig.sample.h
View File

@ -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

15
storage.cpp
View File

@ -89,14 +89,18 @@ void loadPrefs(fs::FS &fs){
}
// get sensor reference
sensor_t * s = esp_camera_sensor_get();
// process all the settings
// process local settings
lampVal = jsonExtract(prefs, "lamp").toInt();
if (jsonExtract(prefs, "autolamp").toInt() == 0) autoLamp = false; else autoLamp = true;
minFrameTime = jsonExtract(prefs, "min_frame_time").toInt();
s->set_framesize(s, (framesize_t)jsonExtract(prefs, "framesize").toInt());
s->set_quality(s, jsonExtract(prefs, "quality").toInt());
if (jsonExtract(prefs, "autolamp").toInt() == 0) autoLamp = false; else autoLamp = true;
int xclkPref = jsonExtract(prefs, "xclk").toInt();
if (xclkPref != 0) xclk = xclkPref;
myRotation = jsonExtract(prefs, "rotate").toInt();
// process camera settings
s->set_framesize(s, (framesize_t)jsonExtract(prefs, "framesize").toInt());
s->set_quality(s, jsonExtract(prefs, "quality").toInt());
s->set_xclk(s, LEDC_TIMER_0, xclk);
s->set_brightness(s, jsonExtract(prefs, "brightness").toInt());
s->set_contrast(s, jsonExtract(prefs, "contrast").toInt());
@ -120,7 +124,6 @@ void loadPrefs(fs::FS &fs){
s->set_hmirror(s, jsonExtract(prefs, "hmirror").toInt());
s->set_dcw(s, jsonExtract(prefs, "dcw").toInt());
s->set_colorbar(s, jsonExtract(prefs, "colorbar").toInt());
myRotation = jsonExtract(prefs, "rotate").toInt();
// close the file
file.close();
dumpPrefs(SPIFFS);
@ -142,10 +145,10 @@ void savePrefs(fs::FS &fs){
*p++ = '{';
p+=sprintf(p, "\"lamp\":%i,", lampVal);
p+=sprintf(p, "\"autolamp\":%u,", autoLamp);
p+=sprintf(p, "\"min_frame_time\":%d,", minFrameTime);
p+=sprintf(p, "\"framesize\":%u,", s->status.framesize);
p+=sprintf(p, "\"quality\":%u,", s->status.quality);
p+=sprintf(p, "\"xclk\":%u,", xclk);
p+=sprintf(p, "\"min_frame_time\":%d,", minFrameTime);
p+=sprintf(p, "\"brightness\":%d,", s->status.brightness);
p+=sprintf(p, "\"contrast\":%d,", s->status.contrast);
p+=sprintf(p, "\"saturation\":%d,", s->status.saturation);