-
×
+
×
![]()
@@ -441,35 +70,35 @@ const uint8_t miniviewer_html[] = R"=====(
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 streamGroup = document.getElementById('stream-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
@@ -494,10 +123,11 @@ const uint8_t miniviewer_html[] = R"=====(
} 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();
- console.log('Rotate initial value: ' + rotate.value);
} else if(el.id === "stream_url"){
streamURL = value;
streamButton.setAttribute("title", `You can also browse to '${streamURL}' for a raw stream`);
@@ -505,7 +135,7 @@ const uint8_t miniviewer_html[] = R"=====(
}
}
}
-
+
function updateConfig (el) {
let value
switch (el.type) {
@@ -523,15 +153,15 @@ const uint8_t miniviewer_html[] = R"=====(
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 => {
@@ -539,7 +169,7 @@ const uint8_t miniviewer_html[] = R"=====(
hide(el.parentNode)
}
})
-
+
// read initial values
fetch(`${baseHost}/status`)
.then(function (response) {
@@ -556,16 +186,16 @@ const uint8_t miniviewer_html[] = R"=====(
show(streamButton);
startStream();
})
-
+
// Put some helpful text on the 'Still' button
stillButton.setAttribute("title", `You can also browse to '${baseHost}/capture' for standalone images`);
-
+
const stopStream = () => {
window.stop();
streamButton.innerHTML = 'Start Stream';
hide(viewContainer);
}
-
+
const startStream = () => {
view.src = streamURL;
view.scrollIntoView(false);
@@ -577,28 +207,37 @@ const uint8_t miniviewer_html[] = R"=====(
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%)`
+ 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)`
+ 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) {
@@ -607,23 +246,36 @@ const uint8_t miniviewer_html[] = R"=====(
startStream();
}
}
-
+
// Attach default on change action
document
.querySelectorAll('.action-setting')
.forEach(el => {
el.onchange = () => updateConfig(el)
})
-
+
// Custom actions
// Detection and framesize
rotate.onchange = () => {
- console.log('Rotation changed');
applyRotation();
updateConfig(rotate);
}
- }) // event
+
+ framesize.onchange = () => {
+ updateConfig(framesize)
+ if (framesize.value > 5) {
+ updateValue(detect, false)
+ updateValue(recognize, false)
+ }
+ }
+
+ swapButton.onclick = () => {
+ window.open('/','_self');
+ }
+
+ })