Update index_other.h
This commit is contained in:
Ladvine D Almeida
GitHub
parent
9e0224776b
commit
fe59914011
334
index_other.h
334
index_other.h
|
|
@ -306,7 +306,339 @@ const uint8_t index_simple_html[] = R"=====(<!doctype html>
|
|||
</script>
|
||||
</html>)=====";
|
||||
|
||||
size_t index_simple_html_len = sizeof(index_simple_html)-1;
|
||||
/* with Sensor Data */
|
||||
const uint8_t index_simple_sensor_html[] = R"=====(<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||||
<title id="title">ESP32-CAM Simplified View</title>
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
|
||||
<link rel="stylesheet" type="text/css" href="/style.css">
|
||||
<style>
|
||||
@media (min-width: 800px) and (orientation:landscape) {
|
||||
#content {
|
||||
display:flex;
|
||||
flex-wrap: nowrap;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<section class="main">
|
||||
<div id="logo">
|
||||
<label for="nav-toggle-cb" id="nav-toggle" style="float:left;" title="Settings">☰ </label>
|
||||
<button id="swap-viewer" style="float:left;" title="Swap to full feature viewer">Full</button>
|
||||
<button id="get-still" style="float:left;">Get Still</button>
|
||||
<button id="toggle-stream" style="float:left;" class="hidden">Start Stream</button>
|
||||
<div id="wait-settings" style="float:left;" class="loader" title="Waiting for camera settings to load"></div>
|
||||
</div>
|
||||
<div class="card">
|
||||
Sensor Hum: <span id="HUMValue">0</span> %, Temp: <span id="TempValue">0</span> ℃, Pres: <span id="PresValue">0</span> hPa
|
||||
</div>
|
||||
<div id="content">
|
||||
<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="Flashlight LED.

Warning:
Built-In lamps can be Very Bright! Avoid looking directly at LED
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">
|
||||
<div class="range-max">Full⚠</div>
|
||||
</div>
|
||||
<div class="input-group" id="framesize-group">
|
||||
<label for="framesize">Resolution</label>
|
||||
<select id="framesize" class="action-setting">
|
||||
<option value="13">UXGA (1600x1200)</option>
|
||||
<option value="12">SXGA (1280x1024)</option>
|
||||
<option value="11">HD (1280x720)</option>
|
||||
<option value="10">XGA (1024x768)</option>
|
||||
<option value="9">SVGA (800x600)</option>
|
||||
<option value="8">VGA (640x480)</option>
|
||||
<option value="7">HVGA (480x320)</option>
|
||||
<option value="6">CIF (400x296)</option>
|
||||
<option value="5">QVGA (320x240)</option>
|
||||
<option value="3">HQVGA (240x176)</option>
|
||||
<option value="1">QQVGA (160x120)</option>
|
||||
<option value="0">THUMB (96x96)</option>
|
||||
</select>
|
||||
</div>
|
||||
<!-- Hide the next entries, they are present in the body so that we
|
||||
can pass settings to/from them for use in the scripting, not for user setting -->
|
||||
<div id="rotate" class="action-setting hidden"></div>
|
||||
<div id="cam_name" class="action-setting hidden"></div>
|
||||
<div id="stream_url" class="action-setting hidden"></div>
|
||||
</nav>
|
||||
</div>
|
||||
<figure>
|
||||
<div id="stream-container" class="image-container hidden">
|
||||
<div class="close close-rot-none" id="close-stream">×</div>
|
||||
<img id="stream" src="">
|
||||
</div>
|
||||
</figure>
|
||||
</div>
|
||||
</section>
|
||||
</body>
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function (event) {
|
||||
var baseHost = document.location.origin;
|
||||
var streamURL = 'Undefined';
|
||||
|
||||
const settings = document.getElementById('sidebar')
|
||||
const waitSettings = document.getElementById('wait-settings')
|
||||
const lampGroup = document.getElementById('lamp-group')
|
||||
const rotate = document.getElementById('rotate')
|
||||
const view = document.getElementById('stream')
|
||||
const viewContainer = document.getElementById('stream-container')
|
||||
const stillButton = document.getElementById('get-still')
|
||||
const streamButton = document.getElementById('toggle-stream')
|
||||
const closeButton = document.getElementById('close-stream')
|
||||
const swapButton = document.getElementById('swap-viewer')
|
||||
|
||||
const hide = el => {
|
||||
el.classList.add('hidden')
|
||||
}
|
||||
const show = el => {
|
||||
el.classList.remove('hidden')
|
||||
}
|
||||
|
||||
const disable = el => {
|
||||
el.classList.add('disabled')
|
||||
el.disabled = true
|
||||
}
|
||||
|
||||
const enable = el => {
|
||||
el.classList.remove('disabled')
|
||||
el.disabled = false
|
||||
}
|
||||
|
||||
const updateValue = (el, value, updateRemote) => {
|
||||
updateRemote = updateRemote == null ? true : updateRemote
|
||||
let initialValue
|
||||
if (el.type === 'checkbox') {
|
||||
initialValue = el.checked
|
||||
value = !!value
|
||||
el.checked = value
|
||||
} else {
|
||||
initialValue = el.value
|
||||
el.value = value
|
||||
}
|
||||
|
||||
if (updateRemote && initialValue !== value) {
|
||||
updateConfig(el);
|
||||
} else if(!updateRemote){
|
||||
if(el.id === "lamp"){
|
||||
if (value == -1) {
|
||||
hide(lampGroup)
|
||||
} else {
|
||||
show(lampGroup)
|
||||
}
|
||||
} else if(el.id === "cam_name"){
|
||||
window.document.title = value;
|
||||
console.log('Name set to: ' + value);
|
||||
} else if(el.id === "code_ver"){
|
||||
console.log('Firmware Build: ' + value);
|
||||
} else if(el.id === "rotate"){
|
||||
rotate.value = value;
|
||||
applyRotation();
|
||||
} else if(el.id === "stream_url"){
|
||||
streamURL = value;
|
||||
streamButton.setAttribute("title", `Start the stream :: {streamURL}`);
|
||||
console.log('Stream URL set to:' + value);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
var rangeUpdateScheduled = false
|
||||
var latestRangeConfig
|
||||
|
||||
function updateRangeConfig (el) {
|
||||
latestRangeConfig = el
|
||||
if (!rangeUpdateScheduled) {
|
||||
rangeUpdateScheduled = true;
|
||||
setTimeout(function(){
|
||||
rangeUpdateScheduled = false
|
||||
updateConfig(latestRangeConfig)
|
||||
}, 150);
|
||||
}
|
||||
}
|
||||
|
||||
function updateConfig (el) {
|
||||
let value
|
||||
switch (el.type) {
|
||||
case 'checkbox':
|
||||
value = el.checked ? 1 : 0
|
||||
break
|
||||
case 'range':
|
||||
case 'select-one':
|
||||
value = el.value
|
||||
break
|
||||
case 'button':
|
||||
case 'submit':
|
||||
value = '1'
|
||||
break
|
||||
default:
|
||||
return
|
||||
}
|
||||
|
||||
const query = `${baseHost}/control?var=${el.id}&val=${value}`
|
||||
|
||||
fetch(query)
|
||||
.then(response => {
|
||||
console.log(`request to ${query} finished, status: ${response.status}`)
|
||||
})
|
||||
}
|
||||
|
||||
document
|
||||
.querySelectorAll('.close')
|
||||
.forEach(el => {
|
||||
el.onclick = () => {
|
||||
hide(el.parentNode)
|
||||
}
|
||||
})
|
||||
|
||||
// read initial values
|
||||
fetch(`${baseHost}/status`)
|
||||
.then(function (response) {
|
||||
return response.json()
|
||||
})
|
||||
.then(function (state) {
|
||||
document
|
||||
.querySelectorAll('.action-setting')
|
||||
.forEach(el => {
|
||||
updateValue(el, state[el.id], false)
|
||||
})
|
||||
hide(waitSettings);
|
||||
show(settings);
|
||||
show(streamButton);
|
||||
startStream();
|
||||
})
|
||||
|
||||
// Put some helpful text on the 'Still' button
|
||||
stillButton.setAttribute("title", `Capture a still image :: ${baseHost}/capture`);
|
||||
|
||||
const stopStream = () => {
|
||||
window.stop();
|
||||
streamButton.innerHTML = 'Start Stream';
|
||||
streamButton.setAttribute("title", `Start the stream :: ${streamURL}`);
|
||||
hide(viewContainer);
|
||||
}
|
||||
|
||||
const startStream = () => {
|
||||
view.src = streamURL;
|
||||
view.scrollIntoView(false);
|
||||
streamButton.innerHTML = 'Stop Stream';
|
||||
streamButton.setAttribute("title", `Stop the stream`);
|
||||
show(viewContainer);
|
||||
}
|
||||
|
||||
const applyRotation = () => {
|
||||
rot = rotate.value;
|
||||
if (rot == -90) {
|
||||
viewContainer.style.transform = `rotate(-90deg) translate(-100%)`;
|
||||
closeButton.classList.remove('close-rot-none');
|
||||
closeButton.classList.remove('close-rot-right');
|
||||
closeButton.classList.add('close-rot-left');
|
||||
} else if (rot == 90) {
|
||||
viewContainer.style.transform = `rotate(90deg) translate(0, -100%)`;
|
||||
closeButton.classList.remove('close-rot-left');
|
||||
closeButton.classList.remove('close-rot-none');
|
||||
closeButton.classList.add('close-rot-right');
|
||||
} else {
|
||||
viewContainer.style.transform = `rotate(0deg)`;
|
||||
closeButton.classList.remove('close-rot-left');
|
||||
closeButton.classList.remove('close-rot-right');
|
||||
closeButton.classList.add('close-rot-none');
|
||||
}
|
||||
console.log('Rotation ' + rot + ' applied');
|
||||
}
|
||||
|
||||
// Attach actions to controls
|
||||
|
||||
stillButton.onclick = () => {
|
||||
stopStream();
|
||||
view.src = `${baseHost}/capture?_cb=${Date.now()}`;
|
||||
view.scrollIntoView(false);
|
||||
show(viewContainer);
|
||||
}
|
||||
|
||||
closeButton.onclick = () => {
|
||||
stopStream();
|
||||
hide(viewContainer);
|
||||
}
|
||||
|
||||
streamButton.onclick = () => {
|
||||
const streamEnabled = streamButton.innerHTML === 'Stop Stream'
|
||||
if (streamEnabled) {
|
||||
stopStream();
|
||||
} else {
|
||||
startStream();
|
||||
}
|
||||
}
|
||||
|
||||
// Attach default on change action
|
||||
document
|
||||
.querySelectorAll('.action-setting')
|
||||
.forEach(el => {
|
||||
el.onchange = () => updateConfig(el)
|
||||
})
|
||||
|
||||
// Update range sliders as they are being moved
|
||||
document
|
||||
.querySelectorAll('input[type="range"]')
|
||||
.forEach(el => {
|
||||
el.oninput = () => updateRangeConfig(el)
|
||||
})
|
||||
|
||||
// Custom actions
|
||||
// Detection and framesize
|
||||
rotate.onchange = () => {
|
||||
applyRotation();
|
||||
updateConfig(rotate);
|
||||
}
|
||||
|
||||
framesize.onchange = () => {
|
||||
updateConfig(framesize)
|
||||
}
|
||||
|
||||
swapButton.onclick = () => {
|
||||
window.open('/?view=full','_self');
|
||||
}
|
||||
|
||||
})
|
||||
|
||||
|
||||
|
||||
setInterval(function() {
|
||||
getData();
|
||||
}, 10000);
|
||||
|
||||
function getData() {
|
||||
var xhttp = new XMLHttpRequest();
|
||||
xhttp.onreadystatechange = function() {
|
||||
if (this.readyState == 4 && this.status == 200) {
|
||||
|
||||
const sensorValues = this.responseText.split('#',3);
|
||||
document.getElementById("HUMValue").innerHTML =
|
||||
sensorValues[0];
|
||||
document.getElementById("TempValue").innerHTML =
|
||||
sensorValues[1];
|
||||
document.getElementById("PresValue").innerHTML =
|
||||
sensorValues[2];
|
||||
}
|
||||
};
|
||||
xhttp.open("GET", "readSensor", true);
|
||||
xhttp.send();
|
||||
}
|
||||
|
||||
</script>
|
||||
</html>)=====";
|
||||
|
||||
|
||||
/* Stream Viewer */
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue