I want to integrate a popup for users of my website to accept or deny google analytics
I want when the user clicks on Accept "Alle cookies zulassen" ga is enabled and disabled if the user click on refuse "Nur die Notwendigen"
Here is the js file that handle all that
const cookieStorage = {
getItem: (item) => {
const cookies = document.cookie
.split(';')
.map(cookie => cookie.split('='))
.reduce((acc, [key, value]) => ({ ...acc, [key.trim()]: value }), {});
return cookies[item];
},
setItem: (item, value) => {
document.cookie = `${item}=${value};`
} }
const storageType = cookieStorage;
const consentPropertyName = 'ga';
const shouldShowPopup = () => !localStorage.getItem(consentPropertyName);
const saveToStorage = () => localStorage.setItem(consentPropertyName, true);
document.cookie = 'ga=ga';
var gaProperty = 'UA-18247156-4';
var disableStr = 'ga-disable-' + gaProperty;
window.onload = () => {
console.log(localStorage.getItem('ga'));
if (localStorage.getItem('ga') === 'false') {
window[disableStr] = true;
//alert('ga is desactivated')
console.log(localStorage.getItem('ga'));
}
if (localStorage.getItem('ga') === 'true') {
window[disableStr] = false;
//alert('ga is activated')
console.log(localStorage.getItem('ga'));
}
const acceptFn = event => {
localStorage.setItem('ga', true);
consentPopup.classList.add('hidden');
window['ga-disable-UA-18247156-4'] = false;
document.getElementById('overlay').style.display = 'none';
if(document.getElementById('slider')) {
}
}
const refuseFn = event => {
localStorage.setItem('ga', false);
consentPopup.classList.add('hidden');
window['ga-disable-UA-18247156-4'] = true;
document.getElementById('overlay').style.display = 'none';
if(document.getElementById('slider')) {
}
}
const consentPopup = document.getElementById('cookiebanner_con');
const acceptBtn = document.getElementById('accept');
const refuseBtn = document.getElementById('refuse');
acceptBtn.addEventListener('click', acceptFn);
refuseBtn.addEventListener('click', refuseFn);
console.log(shouldShowPopup)
if (shouldShowPopup(storageType)) {
setTimeout(() => {
if(document.getElementById('slider')) {
}
document.getElementById('overlay').style.display = 'block';
console.log(consentPopup.classList)
consentPopup.classList.remove('hidden');
}, 2000);
}
};
When I try to go to google analytics dashboard it says that ga is enabled even after clicking refuse
I want to know if this code is correct to disable and enabling google analytics or I need to change
Thanks
Related
I've setup a test script that successfully transcribes what I am saying, both in english and german if I set the lang property beforehand.
However, I want it to automatically recognize which language I am speaking. Since SpeechRecognition does not support this, my idea was to just use multiple constructors at the same time, each with their own lang property and then just use the transcription with the highest confidence score.
However, this does not seem to work, as chrome does not transcribe anything if i start both constructors at once. In fact, I have to close chrome alltogether before it will start working again.
Any ideas? Here is the full code, if I uncomment the commented lines it will not work.
function listenEN(){
navigator.webkitGetUserMedia(
{ audio: true },
() => {},
() => {},
)
let triggerPhrase = "Computer"
triggerPhrase = triggerPhrase ? triggerPhrase.toLowerCase() : "Alexa"
let voices = window.speechSynthesis.getVoices()
const voiceEN = voices.find((voice) => voice.name === 'Google US English')
const voiceDE = voices.find((voice) => voice.name === 'Google DE German')
async function notifyStartListening() {
const utterance = new SpeechSynthesisUtterance("beep!");
utterance.rate = 2;
utterance.pitch = 1.5;
utterance.voice = voiceEN;
speechSynthesis.speak(utterance);
}
const recognitionEN = new webkitSpeechRecognition()
recognitionEN.lang = 'en-US'
recognitionEN.continuous = true
const recognitionDE = new webkitSpeechRecognition()
recognitionDE.lang = 'de-DE'
recognitionDE.continuous = true
try {
let isActive = false
function startListening() {
notifyStartListening();
isActive = true
}
recognitionEN.addEventListener('result', async () => {
recognitionEN.lang = 'en-US'
const transcriptEN = event.results[event.results?.length - 1][0].transcript
console.log(transcriptEN)
if (isActive) {
let instruction = transcriptEN
if (transcriptEN.trimStart().startsWith(triggerPhrase)) {
instruction = transcriptEN.trimStart().substring(triggerPhrase.length)
}
isActive = false
return
}
const trimmed = transcriptEN.trimStart().trimEnd().toLowerCase()
if (trimmed.startsWith(triggerPhrase)) {
const instructionEN = trimmed.substring(triggerPhrase.length)
if (instructionEN && instructionEN?.length > 2) {
let confidenceEN = document.createElement('p')
confidenceEN.innerHTML = event.results[event.results?.length - 1][0].confidence
document.body.appendChild(confidenceEN);
} else {
startListening()
}
}
})
recognitionDE.addEventListener('result', async () => {
recognitionDE.lang = 'de-DE'
const transcriptDE = event.results[event.results?.length - 1][0].transcript
console.log(transcriptDE)
if (isActive) {
let instruction = transcriptDE
if (transcriptDE.trimStart().startsWith(triggerPhrase)) {
instruction = transcriptDE.trimStart().substring(triggerPhrase.length)
}
isActive = false
return
}
const trimmed = transcriptDE.trimStart().trimEnd().toLowerCase()
if (trimmed.startsWith(triggerPhrase)) {
const instructionDE = trimmed.substring(triggerPhrase.length)
if (instructionDE && instructionDE?.length > 2) {
let confidenceDE = document.createElement('p')
confidenceDE.innerHTML = event.results[event.results?.length - 1][0].confidence
document.body.appendChild(confidenceDE);
} else {
startListening()
}
}
})
recognitionEN.addEventListener('error', (event) => {
console.log(event)
})
recognitionEN.onend = function () {
recognitionEN.start()
}
recognitionEN.start()
/*recognitionDE.addEventListener('error', (event) => {
console.log(event)
})
recognitionDE.onend = function () {
recognitionDE.start()
}
recognitionDE.start() */
} catch (e) {
console.error(e)
}
}
I am pretty much new to Javascript and working on this simple ToDo app that uses local storage to persist data. However, the Delete function can only delete from local storage when refreshed the page. What could be causing this bug? I have attached my code below
I tried commenting on the e.preventDefault() on the form but the page kept on reloading when a task is submitted.
// Selectors
const ul = document.querySelector('.todo-list');
const todoContainer = document.querySelector('.todo-container');
const clearButton = document.createElement('button');
clearButton.classList.add('clear-button');
clearButton.textContent = 'Clear all Completed';
const form = document.querySelector('.form');
const taskInput = document.querySelector('.todo-input');
let todoTasks = JSON.parse(localStorage.getItem('todo')) || [];
let id = todoTasks.length + 1;
const createElement = ({ description, completed = true, index }) => {
const todoItem = document.createElement('li');
todoItem.classList.add('todo-list-item');
todoItem.setAttribute('id', index);
todoItem.innerHTML = `
<input type="checkbox" class="check" value="${completed}">
<button class="hidden" name="${index}"></button>
<span class="todo-item">${description}</span>
<button name='eclips'><i class="fas fa-ellipsis-v"></i></button>
<button name='delete'><i class="fas fa-trash"></i></button>
`;
ul.appendChild(todoItem);
todoContainer.appendChild(ul);
todoContainer.appendChild(clearButton);
};
// get each todo task
todoTasks.forEach(createElement);
// Function that add todo
const addTask = (description, completed, ind) => {
const input = taskInput.value;
todoTasks.push({
description: input,
completed: false,
index: ind,
});
localStorage.setItem('todo', JSON.stringify(todoTasks));
return { description, completed, ind };
};
const checkTodo = (e) => {
const lineText = e.target.nextElementSibling.nextElementSibling.nextElementSibling;
if (lineText.style.textDecoration === 'line-through') {
lineText.style.textDecoration = 'none';
} else {
lineText.style.textDecoration = 'line-through';
lineText.classList.toggle('completed');
}
};
// Function that delete todo
const handleDeleteAndCheck = (e) => {
const item = e.target;
if (e.target.classList[1] === 'fa-trash') {
const todo = item.parentElement.parentElement;
const targetId = item.parentElement.parentElement.id;
todoTasks = todoTasks.filter((task) => task.index !== +targetId);
localStorage.setItem('todo', JSON.stringify(todoTasks));
todo.remove();
}
if (e.target.classList === 'check') {
checkTodo();
}
};
// Function that Edit todo
const editTask = (e) => {
const item = e.target;
if (item.classList[0] === 'todo-item') {
item.contentEditable = true;
item.style.display = 'block';
}
};
const check = document.querySelectorAll('.fa-check-square');
const index = document.querySelectorAll('#index');
form.addEventListener('submit', (e) => {
e.preventDefault();
const input = taskInput.value;
const checkValue = check.value;
// const indexValue = index.value;
const newTask = addTask(input, checkValue, id);
createElement(newTask);
// location.reload();
taskInput.value = '';
id += 1;
});
ul.addEventListener('click', handleDeleteAndCheck);
ul.addEventListener('click', editTask);
Here please change the statement with this in your handleDeleteAndCheck() method. It will remove the local storage at that time.
localStorage.removeItem('todo');
I am making a list where you can edit or delete items. I am listening for 2 events on the same table. One for edit and one for delete, I am listening on the table and not the actual buttons as they are created dinamycally. Edit and Delete both have the same id, the id of the product, which I am using later for the http requests.
,
Now when I press edit the console.logs from the delete functions fire up,but nothing happens, if I am trying to save the item the http request doesnt work, it will not take the id (but it logs it to the console)
If I press the delete button once nothing happnes, if I press it a second time the page refreshes and the item is deleted.
Is there a way to listen for those events separately or for them to not interfere with one another? All I want is if I press the edit button the respective item's values to go to the input field and when I press Add Item update the product in the JSON file as well, and on delete press, to delete the item from the JSON file and remove from the html document.
Update: Managed to resolve edit function
Here is my code:
import { http } from "./http.js";
import { ui } from "./ui.js";
const productsURL = "https://61363d1a8700c50017ef54c1.mockapi.io/product";
// const addProductBtn = document.querySelector('.new-product-btn');
const adminContainer = document.querySelector('.admin-container');
const addItem = document.querySelector('.admin-add-item-btn');
const imgInput = document.getElementById('image');
const nameInput = document.getElementById('name');
const priceInput = document.getElementById('price');
const stockInput = document.getElementById('stock');
const categoryInput = document.getElementById('category');
const typeInput = document.getElementById('type');
const descriptionInput = document.getElementById('description');
const validSvg = document.querySelectorAll('.valid_input_svg');
// const adminForm = document.getElementById('admin-form');
const adminTable = document.getElementById('admin-tbody');
const editBtn = document.querySelectorAll('.edit-btn');
const adminBtn = document.querySelectorAll('.admin-delete-btn');
const cancel = document.getElementById('cancel');
let productToEdit;
let edit = false;
let id;
document.addEventListener('DOMContentLoaded', listAdminProducts);
// adminForm.addEventListener('submit', validateInput);
addItem.addEventListener('click', addOrEditProducts);
// adminTable.addEventListener('click', editOrDeleteItem);
adminTable.addEventListener('click', deleteProduct);
adminTable.addEventListener('click', editProduct);
cancel.addEventListener('click', cancelEdit);
function listAdminProducts() {
http.get(productsURL).then(products => {
ui.showAllAdminProducts(products);
});
};
function addOrEditProducts() {
if (edit === true && validateInput() === true) {
productToEdit = {
image: imgInput.value,
name: nameInput.value,
price: priceInput.value,
stock: stockInput.value,
category: categoryInput.value,
type: typeInput.value,
description: descriptionInput.value,
};
http
.put(`${productsURL}/${id}`, productToEdit)
.then(() => listAdminProducts());
console.log(`${productsURL}/${id}`)
ui.clearFields();
id = '';
edit = false;
return;
} else if (edit === false && validateInput() === true) {
const product = {
image: imgInput.value,
name: nameInput.value,
price: priceInput.value,
stock: stockInput.value,
category: categoryInput.value,
type: typeInput.value,
description: descriptionInput.value
};
http.post(productsURL, product).then(() => listAdminProducts());
ui.clearFields();
};
};
function editProduct(e) {
console.log('works');
if (e.target.classList.contains('edit-btn')) {
edit = true;
id = e.target.getAttribute('id');
console.log(id);
console.log(e.target)
http.get(`${productsURL}/${id}`).then((data) => {
imgInput.value = data.image;
nameInput.value = data.name;
priceInput.value = data.price;
stockInput.value = data.stock;
categoryInput.value = data.category;
typeInput.value = data.type;
descriptionInput.value = data.description;
});
console.log(`${productsURL}/${id}`)
};
// id = '';
}
function deleteProduct(e) {
console.log(e.target);
if (e.target.className === 'admin-delete-btn') {
console.log(e.target);
id = e.target.getAttribute('id');
console.log(id);
http
.delete(`${productsURL}/${id}`)
.then(() => listAdminProducts())
.catch("Error on delete");
id = '';
}
ui.showSuccessMessage('Product deleted', adminContainer);
}
function cancelEdit() {
ui.clearFields;
imgInput.className = '';
nameInput.className = '';
priceInput.className = '';
stockInput.className = '';
categoryInput.className = '';
edit = false;
}
function validateInput() {
let valid = true;
if (imgInput.value == '') {
if (imgInput.classList.contains('input-invalid')) {
imgInput.classList.remove('input-invalid');
};
ui.showAdminMessage('Must contain a link to an image', 0);
imgInput.classList.add('input-invalid');
valid = false;
} else {
imgInput.classList.add('input-valid');
validSvg[0].style.display = "block";
removeClass(imgInput, 0);
};
if (nameInput.value === '') {
if (nameInput.classList.contains('input-invalid')) {
nameInput.classList.remove('input-invalid');
};
ui.showAdminMessage('Name is requierd', 1);
nameInput.classList.add('input-invalid');
valid = false;
} else {
// stockInput.classList.remove('input-invalid');
nameInput.classList.add('input-valid');
validSvg[1].style.display = "block";
removeClass(nameInput, 1);
};
if (priceInput.value == "" || isNaN(priceInput.value) || priceInput.value < 0) {
if (priceInput.classList.contains('input-invalid')) {
priceInput.classList.remove('input-invalid');
};
ui.showAdminMessage('Price must be a number greater then 0', 2);
priceInput.classList.add('input-invalid');
valid = false;
} else {
// stockInput.classList.remove('input-invalid');
priceInput.classList.add('input-valid');
validSvg[2].style.display = "block";
removeClass(priceInput, 2);
};
if (stockInput.value == "" || isNaN(stockInput.value) || stockInput.value < 0) {
if (stockInput.classList.contains('input-invalid')) {
stockInput.classList.remove('input-invalid');
};
ui.showAdminMessage('Stock must be a number greater then 0', 3);
stockInput.classList.add('input-invalid');
valid = false;
} else {
// stockInput.classList.remove('input-invalid');
stockInput.classList.add('input-valid');
validSvg[3].style.display = "block";
removeClass(stockInput, 3);
};
if (categoryInput.value === 'barware' || categoryInput.value === 'spirits') {
// categoryInput.classList.remove('input-invalid');
categoryInput.classList.add('input-valid');
validSvg[4].style.display = "block";
removeClass(categoryInput, 4);
} else {
ui.showAdminMessage('Category must be barware or spirits', 4);
categoryInput.classList.add('input-invalid');
valid = false;
};
return valid;
};
function removeClass(element, index) {
// console.log(element, index);
setTimeout(() => {
element.className = '';
validSvg[index].style.display = "none";
}, 3000)
}
Finally managed to resolve it, I had to put e.preventDefault() in both functions, so the page will not reload first
I am using dolby.io
Till now I have implemented join conference, leave conference, start and stop video, start and stop recording, start and stop screen sharing. What I am facing issue is about multiple conference. I want to implement multiple conferences with unique conference IDs so that every user specified for relevant conference should join its own. I am not getting any idea from its official documentation.
here is my code
const initUI = () => {
const nameMessage = document.getElementById('name-message');
const joinButton = document.getElementById('join-btn');
const conferenceAliasInput = document.getElementById('alias-input');
const leaveButton = document.getElementById('leave-btn');
const startVideoBtn = document.getElementById('start-video-btn');
const stopVideoBtn = document.getElementById('stop-video-btn');
const startScreenShareBtn = document.getElementById('start-screenshare-btn');
const stopScreenShareBtn = document.getElementById('stop-screenshare-btn');
const startRecordingBtn = document.getElementById('start-recording-btn');
const stopRecordingBtn = document.getElementById('stop-recording-btn');
//const mute_unmute = document.getElementById('mute');
//oxeetSDK.conference.mute(VoxeetSDK.session.participant, VoxeetSDK.session.participant.isMuted);
//let isMuted = VoxeetSDK.conference.toggleMute(VoxeetSDK.session.participant);
nameMessage.innerHTML = `${randomName}`;
joinButton.disabled = false;
joinButton.onclick = () => {
let conferenceAlias = conferenceAliasInput.value;
/*
1. Create a conference room with an alias
2. Join the conference with its id
*/
VoxeetSDK.conference.create({ alias: conferenceAlias })
.then((conference) => VoxeetSDK.conference.join(conference, {}))
.then(() => {
joinButton.disabled = true;
leaveButton.disabled = false;
startVideoBtn.disabled = false;
startScreenShareBtn.disabled = false;
startRecordingBtn.disabled = false;
})
.catch((e) => console.log('Something wrong happened : ' + e))
};
leaveButton.onclick = () => {
VoxeetSDK.conference.leave()
.then(() => {
joinButton.disabled = false;
leaveButton.disabled = true;
startScreenShareBtn.disabled = true;
stopScreenShareBtn.disabled = true;
})
.catch((err) => {
console.log(err);
});
};
startVideoBtn.onclick = () => {
VoxeetSDK.conference.startVideo(VoxeetSDK.session.participant)
.then(() => {
startVideoBtn.disabled = true;
stopVideoBtn.disabled = false;
});
};
stopVideoBtn.onclick = () => {
VoxeetSDK.conference.stopVideo(VoxeetSDK.session.participant)
.then(() => {
stopVideoBtn.disabled = true;
startVideoBtn.disabled = false;
});
};
startScreenShareBtn.onclick = () => {
VoxeetSDK.conference.startScreenShare()
.then(() => {
startScreenShareBtn.disabled = true;
stopScreenShareBtn.disabled = false;
})
.catch((e) => console.log(e))
};
stopScreenShareBtn.onclick = () => {
VoxeetSDK.conference.stopScreenShare()
.then(() => {
startScreenShareBtn.disabled = false;
stopScreenShareBtn.disabled = true;
})
.catch((e) => console.log(e))
};
startRecordingBtn.onclick = () => {
let recordStatus = document.getElementById('record-status');
VoxeetSDK.recording.start()
.then(() => {
recordStatus.innerText = 'Recording...';
startRecordingBtn.disabled = true;
stopRecordingBtn.disabled = false;
})
.catch((err) => {
console.log(err);
})
};
stopRecordingBtn.onclick = () => {
let recordStatus = document.getElementById('record-status');
VoxeetSDK.recording.stop()
.then(() => {
recordStatus.innerText = '';
startRecordingBtn.disabled = false;
stopRecordingBtn.disabled = true;
})
.catch((err) => {
console.log(err);
})
};
};
const addVideoNode = (participant, stream) => {
const videoContainer = document.getElementById('video-container');
let videoNode = document.getElementById('video-' + participant.id);
if(!videoNode) {
videoNode = document.createElement('video');
videoNode.setAttribute('id', 'video-' + participant.id);
videoNode.setAttribute('controls', true);
//VoxeetSDK.conference.mute(VoxeetSDK.session.participant, VoxeetSDK.session.participant.isMuted);
//let isMuted = VoxeetSDK.conference.toggleMute(VoxeetSDK.session.participant);
//console.log(isMuted);
//videoNode.setAttribute('height', 240);
//videoNode.setAttribute('width', 720);
videoContainer.appendChild(videoNode);
videoNode.autoplay = 'autoplay';
videoNode.muted = true;
}
navigator.attachMediaStream(videoNode, stream);
};
const removeVideoNode = (participant) => {
let videoNode = document.getElementById('video-' + participant.id);
if (videoNode) {
videoNode.parentNode.removeChild(videoNode);
}
};
const addParticipantNode = (participant) => {
//const members_count++;
const participantsList = document.getElementById('participants-list');
// if the participant is the current session user, don't add himself to the list
if (participant.id === VoxeetSDK.session.participant.id) return;
// let participantNode = document.createElement('li');
// participantNode.setAttribute('id', 'participant-' + participant.id);
// participantNode.innerText = `${participant.info.name}`;
//alert(VoxeetSDK.session.participant);
//document.getElementById('members_count').innerText=participant.id;
let participantNode = document.createElement('div');
participantNode.setAttribute('class', 'tabcnt-item');
participantNode.setAttribute('id', 'participant-' + participant.id);
//document.getElementById('members_count').innerText = document.getElementById('members_count').innerText + 1;
//document.getElementById('members_count').innerText = members_count;
participantNode.innerText = `${participant.info.name}`;
const send_html = "<div class='tabcnt-item'><div class='row align-items-center'><div class='col-md-8'><div class='media'><img src='images/pp.png' alt=''><div class='media-body'><h3>'"+`${participant.info.name}`+"'</h3><p>email#dname.com</p></div></div></div><div class='col-md-4'><ul><li><a href='#'><i class='fas fa-video'></i></a></li><li><a href='#'><i class='fas fa-microphone'></i></a></li></ul></div></div></div>";
participantNode.innerHTML = send_html;
participantsList.appendChild(participantNode);
document.getElementById('members_count').innerText= $('.tab-cnt').length;
};
const removeParticipantNode = (participant) => {
let participantNode = document.getElementById('participant-' + participant.id);
if (participantNode) {
participantNode.parentNode.removeChild(participantNode);
document.getElementById('members_count').innerText= $('.tab-cnt').length;
}
};
const addScreenShareNode = (stream) => {
const screenShareContainer = document.getElementById('screenshare-container');
let screenShareNode = document.getElementById('screenshare');
if (screenShareNode) return alert('There is already a participant sharing his screen !');
screenShareNode = document.createElement('video');
screenShareNode.setAttribute('id', 'screenshare');
screenShareNode.autoplay = 'autoplay';
navigator.attachMediaStream(screenShareNode, stream);
screenShareContainer.appendChild(screenShareNode);
}
const removeScreenShareNode = () => {
let screenShareNode = document.getElementById('screenshare');
if (screenShareNode) {
screenShareNode.parentNode.removeChild(screenShareNode);
}
}
I am exhausted and tired of googling. It will be a great help if some can guide or provide direction towards more elaborative documentation. I have read each and every bit of dolby docs. Thanks for reading
When you call create() a new conference id is generated which is a guid specific for your account. You can call get_id() to find it. You can also specify an alias to help for readability when there may be multiple conferences active at any given time.
If you want to have multiple conferences, you should call create() multiple times. That is, the expectation is the typical app initializes only a single conference but there are multiple running instances each having its own conference and/or to invite others to an existing conference. For webapps, that may be a separate user session rather than a separate deployed mobile application. You may want to do some book keeping for what ids are generated for each user in your own services.
You may be looking for all of the conferences that are active on an account at any given time while testing or monitoring your deployed apps. You can use the Monitor API getConferences to get that list.
If you have additional questions, it is probably best to use Dolby.io Support for more personal answers and guidance.
I've had a look to see if this has been covered elsewhere but I couldn't find anything, so can anyone help me, please?
I have an html page, which includes a script section. Currently, the script shows a button to start and stop the streaming of esp32 camera video to a webpage. The relevant sections are these, I think:
const stopStream = () => {
window.stop();
streamButton.innerHTML = "Start Stream";
};
const startStream = () => {
view.src = `${streamUrl}/stream`;
show(viewContainer);
streamButton.innerHTML = "Stop Stream";
};
What I want to do is replace the code, to run the ffmpeg or ffplay command. So, in pseudo code it would be:
const stopStream = () => {
ffmpeg -q; //to quit??
streamButton.innerHTML = "Start Stream";
};
const startStream = () => {
ffmpeg -i ${streamUrl}/stream;
streamButton.innerHTML = "Stop Stream";
};
A subsidiary question would be:
Could the ffmpeg command be uploaded with the html code, somehow? ie could the ffmpeg application be run WITHOUT the user having to install ffmpeg on the device used to view the video stream? (hope that makes sense)
Any pointers will be gratefully received.
Thanks
The whole script (minus some extraneous parts) is shown below.
<script>
document.addEventListener("DOMContentLoaded", function (event) {
var baseHost = document.location.origin;
var streamUrl = baseHost + ":81";
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 === "aec") {
value ? hide(exposure) : show(exposure);
} else if (el.id === "agc") {
if (value) {
show(gainCeiling);
hide(agcGain);
} else {
hide(gainCeiling);
show(agcGain);
}
} else if (el.id === "awb_gain") {
value ? show(wb) : hide(wb);
} else if (el.id === "face_recognize") {
value ? enable(enrollButton) : disable(enrollButton);
}
}
};
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(".default-action").forEach((el) => {
updateValue(el, state[el.id], false);
});
});
const view = document.getElementById("stream");
const viewContainer = document.getElementById("stream-container");
const stillButton = document.getElementById("get-still");
const streamButton = document.getElementById("toggle-stream");
const enrollButton = document.getElementById("face_enroll");
const closeButton = document.getElementById("close-stream");
const stopStream = () => {
window.stop();
streamButton.innerHTML = "Start Stream";
};
const startStream = () => {
view.src = `${streamUrl}/stream`;
show(viewContainer);
streamButton.innerHTML = "Stop Stream";
};
// Attach actions to buttons
stillButton.onclick = () => {
stopStream();
view.src = `${baseHost}/capture?_cb=${Date.now()}`;
show(viewContainer);
};
closeButton.onclick = () => {
stopStream();
hide(viewContainer);
};
streamButton.onclick = () => {
const streamEnabled = streamButton.innerHTML === "Stop Stream";
if (streamEnabled) {
stopStream();
} else {
startStream();
}
};
enrollButton.onclick = () => {
updateConfig(enrollButton);
};
// Attach default on change action
document.querySelectorAll(".default-action").forEach((el) => {
el.onchange = () => updateConfig(el);
});
});
</script>