502 lines
17 KiB
JavaScript
502 lines
17 KiB
JavaScript
function get_data(val) {
|
|
jQuery.ajax({
|
|
url: 'json_input',
|
|
type: 'GET',
|
|
timeout: 5000,
|
|
success: function(data) {
|
|
console.log("Incommming data: ");
|
|
console.log(data);
|
|
var obj = JSON.parse(data);
|
|
console.log(obj);
|
|
|
|
if (!document.querySelector('#light-icon img')) {
|
|
var img = document.createElement('img');
|
|
img.src = (obj.led == "true") ? 'light-on-icon.svg' : 'light-off-icon.svg';
|
|
document.getElementById('light-icon').appendChild(img);
|
|
}
|
|
document.title = obj.mdns;
|
|
|
|
if (val == "config") {
|
|
$("#fingerprint").text(obj.fingerprint);
|
|
$("#refreshInterval").text(obj.refreshInterval);
|
|
document.getElementById('tokenid').value = obj.token;
|
|
document.getElementById('refreshid').value = obj.refreshInterval;
|
|
document.getElementById('photo_qualityid').value = obj.photoquality;
|
|
document.getElementById('framesizeid').value = obj.framesize;
|
|
document.getElementById('brightnessid').value = obj.brightness;
|
|
document.getElementById('contrastid').value = obj.contrast;
|
|
document.getElementById('saturationid').value = obj.saturation;
|
|
document.getElementById('image_rotationid').value = obj.image_rotation;
|
|
document.getElementById('hmirrorid').checked = obj.hmirror;
|
|
document.getElementById('vflipid').checked = obj.vflip;
|
|
document.getElementById('lencid').checked = obj.lensc;
|
|
document.getElementById('exposure_ctrlid').checked = obj.exposure_ctrl;
|
|
document.getElementById('awbid').checked = obj.awb;
|
|
document.getElementById('awb_gainid').checked = obj.awb_gain;
|
|
document.getElementById('wb_modeid').value = obj.wb_mode;
|
|
document.getElementById('ledid').checked = obj.led;
|
|
document.getElementById('flashid').checked = obj.flash;
|
|
document.getElementById('flash_timeid').value = obj.flash_time;
|
|
document.getElementById('bpcid').checked = obj.bpc;
|
|
document.getElementById('wpcid').checked = obj.wpc;
|
|
document.getElementById('raw_gamaid').checked = obj.raw_gama;
|
|
document.getElementById('aec2id').checked = obj.aec2;
|
|
document.getElementById('ae_levelid').value = obj.ae_level;
|
|
document.getElementById('aec_valueid').value = obj.aec_value;
|
|
document.getElementById('gain_ctrlid').checked = obj.gain_ctrl;
|
|
document.getElementById('agc_gainid').value = obj.agc_gain;
|
|
document.getElementById("flash_time_value").innerText = obj.flash_time;
|
|
document.getElementById("aec_value_value").innerText = obj.aec_value;
|
|
document.getElementById('timelapsid').checked = obj.timelaps;
|
|
$("#status_hmirror").text((obj.hmirror == "true") ? "On" : "Off");
|
|
$("#status_vflip").text((obj.vflip == "true") ? "On" : "Off");
|
|
$("#status_lensc").text((obj.lensc == "true") ? "On" : "Off");
|
|
$("#status_exposure_ctrl").text((obj.exposure_ctrl == "true") ? "On" : "Off");
|
|
$("#status_awb").text((obj.awb == "true") ? "On" : "Off");
|
|
$("#status_awb_gain").text((obj.awb_gain == "true") ? "On" : "Off");
|
|
$("#status_led").text((obj.led == "true") ? "On" : "Off");
|
|
$("#status_flash").text((obj.flash == "true") ? "On" : "Off");
|
|
$("#status_bpc").text((obj.bpc == "true") ? "On" : "Off");
|
|
$("#status_wpc").text((obj.wpc == "true") ? "On" : "Off");
|
|
$("#status_raw_gama").text((obj.raw_gama == "true") ? "On" : "Off");
|
|
$("#status_aec2").text((obj.aec2 == "true") ? "On" : "Off");
|
|
$("#status_gain_ctrl").text((obj.gain_ctrl == "true") ? "On" : "Off");
|
|
$("#status_timelaps").text((obj.timelaps == "true") ? "On" : "Off");
|
|
sliderCheck();
|
|
}
|
|
|
|
if (val == "auth") {
|
|
document.getElementById('authid').checked = obj.auth;
|
|
$("#status_auth").text((obj.auth == "true") ? "On" : "Off");
|
|
document.getElementById('auth_username').value = obj.auth_username;
|
|
}
|
|
|
|
if (val == "wifi") {
|
|
document.getElementById('serviceapid').checked = obj.serviceap;
|
|
$("#status_serviceap").text((obj.serviceap == "true") ? "On" : "Off");
|
|
$("#ssid").text(obj.ssid);
|
|
$("#rssi").text(obj.rssi);
|
|
$("#rssi_percentage").text(obj.rssi_percentage);
|
|
$("#ip").text(obj.ip);
|
|
$("#mdns").text(obj.mdns);
|
|
$("#wifi_network_status").text(obj.wifi_network_status);
|
|
document.getElementById('ipcfgid').value = obj.ip_cfg;
|
|
document.getElementById('net_ip_id').value = obj.net_ip;
|
|
document.getElementById('net_mask_id').value = obj.net_mask;
|
|
document.getElementById('net_gw_id').value = obj.net_gw;
|
|
document.getElementById('net_dns_id').value = obj.net_dns;
|
|
|
|
if (!document.querySelector('#main-wifi-signal wifi_img')) {
|
|
var wifi_img = document.createElement('wifi_img');
|
|
wifi_img.width = 19;
|
|
wifi_img.height = 12;
|
|
wifi_img.src = getIconPath(obj.rssi);
|
|
document.getElementById('main-wifi-signal').appendChild(wifi_img);
|
|
}
|
|
}
|
|
|
|
if (val == "system") {
|
|
$("#uptime").text(obj.uptime);
|
|
$("#sw_ver").text(obj.sw_ver);
|
|
$("#sw_build").text(obj.sw_build);
|
|
$("#last_upload_status").text(obj.last_upload_status);
|
|
$("#wifi_mode").text(obj.wifi_mode);
|
|
$("#sw_new_ver").text(obj.sw_new_ver);
|
|
$("#service_ap_ssid").text(obj.service_ap_ssid);
|
|
$("#sd_status").text(obj.sd_status);
|
|
$("#sd_total").text(obj.sd_total);
|
|
$("#sd_free_p").text(obj.sd_free_p);
|
|
$("#sd_used_p").text(obj.sd_used_p);
|
|
$("#mcu_temp").text(obj.mcu_temp);
|
|
|
|
var sd_free_prog = document.getElementById("progress_bar_sd_free");
|
|
sd_free_prog.style.width = obj.sd_free_p + "%";
|
|
sd_free_prog.innerHTML = obj.sd_free_p + "%";
|
|
|
|
var sd_free_prog = document.getElementById("progress_bar_sd_used");
|
|
sd_free_prog.style.width = obj.sd_used_p + "%";
|
|
sd_free_prog.innerHTML = obj.sd_used_p + "%";
|
|
|
|
document.getElementById('mdnsid').value = obj.mdns;
|
|
document.getElementById('loglevelid').value = obj.log_level;
|
|
}
|
|
|
|
if (val == "temp") {
|
|
$("#extsens_stat").text(obj.extsens_stat);
|
|
document.getElementById('extsetsid').checked = obj.extsen_en;
|
|
document.getElementById('temp_unitid').value = obj.exttemp_unit;
|
|
$("#ext_temp").text(obj.ext_temp);
|
|
$("#ext_hum").text(obj.ext_hum);
|
|
}
|
|
},
|
|
error: function(html) {
|
|
console.log("json Timeout or error");
|
|
//alert("jquery timeout or comunication error");
|
|
}
|
|
});
|
|
}
|
|
|
|
function sliderCheck() {
|
|
var ranges = document.querySelectorAll(".slider");
|
|
ranges.forEach(function(range) {
|
|
var percent = (range.value - range.min) / (range.max - range.min) * 100;
|
|
var gradient = "linear-gradient(to right, #FA6831 " + percent + "%, #d3d3d3 " + percent + "%)";
|
|
range.style.background = gradient;
|
|
range.oninput = function() {
|
|
var percent = (this.value - this.min) / (this.max - this.min) * 100;
|
|
var gradient = "linear-gradient(to right, #FA6831 " + percent + "%, #d3d3d3 " + percent + "%)";
|
|
this.style.background = gradient;
|
|
}
|
|
});
|
|
}
|
|
|
|
function getIconPath(rssi) {
|
|
let path;
|
|
if (rssi == 0) {
|
|
path = 'wifi-icon-0.svg';
|
|
} else if (rssi <= -70) {
|
|
path = 'wifi-icon-1.svg';
|
|
} else if (rssi > -70 && rssi <= -60) {
|
|
path = 'wifi-icon-2.svg';
|
|
} else if (rssi > -60 && rssi <= -50) {
|
|
path = 'wifi-icon-3.svg';
|
|
} else {
|
|
path = 'wifi-icon-4.svg';
|
|
}
|
|
return path;
|
|
}
|
|
|
|
var OpenImageclickCount = 0;
|
|
|
|
function openImage() {
|
|
var img = document.getElementById("photo");
|
|
if (OpenImageclickCount % 2 == 0) {
|
|
img.style.position = "fixed";
|
|
img.style.top = "5%";
|
|
img.style.left = "5%";
|
|
img.style.width = "auto";
|
|
img.style.height = "auto";
|
|
img.style.maxWidth = "100%";
|
|
img.style.maxHeight = "90%";
|
|
img.style.zIndex = "9999";
|
|
} else {
|
|
img.style.position = "";
|
|
img.style.top = "";
|
|
img.style.left = "";
|
|
img.style.width = "";
|
|
img.style.height = "";
|
|
img.style.zIndex = "";
|
|
}
|
|
OpenImageclickCount++;
|
|
}
|
|
|
|
function actionButton(url, reload, msg) {
|
|
var xhr = new XMLHttpRequest();
|
|
|
|
if (msg != '') {
|
|
alert(msg);
|
|
}
|
|
|
|
xhr.onreadystatechange = function() {
|
|
if (xhr.readyState == 4 && xhr.status == 200) {
|
|
if (reload == true) {
|
|
setTimeout(function() {
|
|
location.reload();
|
|
}, 200);
|
|
}
|
|
}
|
|
};
|
|
|
|
xhr.open('GET', url, true);
|
|
xhr.send();
|
|
}
|
|
|
|
function setActive(link) {
|
|
var links = document.querySelectorAll('#links li a');
|
|
links.forEach(function(item) {
|
|
item.classList.remove('active');
|
|
});
|
|
link.classList.add('active');
|
|
}
|
|
|
|
var links = document.querySelectorAll('#links li a');
|
|
links.forEach(function(link) {
|
|
link.addEventListener('click', function() {
|
|
setActive(link);
|
|
});
|
|
});
|
|
|
|
function addClickListener(id) {
|
|
var link = document.getElementById(id);
|
|
if (!link.hasOwnProperty('clickListener')) {
|
|
link.addEventListener('click', function(event) {
|
|
event.preventDefault();
|
|
window.open(link.href, '_blank');
|
|
});
|
|
link.clickListener = true;
|
|
}
|
|
}
|
|
|
|
/* wifi page */
|
|
function setWifi(val_ssid, val_pass) {
|
|
var xmlHttp = new XMLHttpRequest();
|
|
xmlHttp.open("GET", "wifi_cfg?wifi_ssid=" + encodeURIComponent(val_ssid) + "&wifi_pass=" + encodeURIComponent(val_pass), false);
|
|
xmlHttp.send(null);
|
|
alert(xmlHttp.responseText);
|
|
get_data("wifi");
|
|
}
|
|
|
|
function setWifiNet(val_ip, val_mask, val_gw, val_dns) {
|
|
var xmlHttp = new XMLHttpRequest();
|
|
xmlHttp.open("GET", "wifi_net_cfg?ip=" + encodeURIComponent(val_ip) + "&mask=" + encodeURIComponent(val_mask) + "&gw=" + encodeURIComponent(val_gw) + "&dns=" + encodeURIComponent(val_dns), false);
|
|
xmlHttp.send(null);
|
|
alert(xmlHttp.responseText);
|
|
get_data("wifi");
|
|
}
|
|
|
|
function scanWifi() {
|
|
var xmlHttp = new XMLHttpRequest();
|
|
xmlHttp.open("GET", "wifi_scan?", false);
|
|
xmlHttp.send(null);
|
|
alert(xmlHttp.responseText);
|
|
get_data("wifi");
|
|
setTimeout(function() {
|
|
GetDataAndPrintTableWiFi();
|
|
}, 8000);
|
|
}
|
|
|
|
function GetDataAndPrintTableWiFi() {
|
|
$("#wifi_ntw").find("tr:gt(0)").remove();
|
|
$.ajax({
|
|
url: 'json_wifi',
|
|
type: 'GET',
|
|
timeout: 15000,
|
|
dataType: 'json',
|
|
data: {},
|
|
|
|
success: function(data) {
|
|
for (var i = 0; i < data.length; i++) {
|
|
const IconName = "wifi-icon-" + i;
|
|
var row = $('<tr><td>' + data[i].ssid + '</td><td><div id="' + IconName + '" style="display: flex; align-items: center;"></div></td><td>' + data[i].channel + '</td><td>' + data[i].encryption + '</td></tr>');
|
|
$('#wifi_ntw').append(row);
|
|
|
|
if (!document.querySelector('#' + IconName + ' img')) {
|
|
var img = document.createElement('img');
|
|
img.src = getIconPath(data[i].rssi);
|
|
document.getElementById(IconName).prepend(img);
|
|
document.getElementById(IconName).append(data[i].rssi_percentage);
|
|
document.getElementById(IconName).append("% / ");
|
|
document.getElementById(IconName).append(data[i].rssi);
|
|
document.getElementById(IconName).append("dBm");
|
|
}
|
|
}
|
|
},
|
|
error: function(jqXHR, textStatus, errorThrown) {
|
|
console.log('Error:' + textStatus + '-' + errorThrown);
|
|
}
|
|
});
|
|
}
|
|
|
|
/* auth page */
|
|
function setAuth(val_name, val_pass) {
|
|
var xmlHttp = new XMLHttpRequest();
|
|
xmlHttp.open("GET", "basicauth_cfg?" + "auth_username=" + encodeURIComponent(val_name) + "&auth_password=" + encodeURIComponent(val_pass), false);
|
|
xmlHttp.send(null);
|
|
alert(xmlHttp.responseText);
|
|
get_data("auth");
|
|
}
|
|
|
|
function changeValue(val, url, reload, msg) {
|
|
var xmlHttp = new XMLHttpRequest();
|
|
xmlHttp.open("GET", url + val, false);
|
|
xmlHttp.send(null);
|
|
if ((url == "set_int?refresh=") || (url == "set_token?token=") || (url == "set_mdns?mdns=") || (url == "set_int?ipcfg=")) {
|
|
alert(xmlHttp.responseText);
|
|
}
|
|
if (url == "set_flash_time?flash_time=") {
|
|
document.getElementById("flash_time_value").innerText = val;
|
|
}
|
|
get_data(reload);
|
|
}
|
|
|
|
function togglePasswordVisibility() {
|
|
const passwordInput = document.getElementById("auth_password");
|
|
const eyeIcon = document.getElementById("eye-icon");
|
|
if (passwordInput.getAttribute("type") === "password") {
|
|
passwordInput.setAttribute("type", "text");
|
|
passwordInput.classList.add("reveal");
|
|
eyeIcon.src = "eye-slash.svg";
|
|
eyeIcon.alt = "Hide Password";
|
|
} else {
|
|
passwordInput.setAttribute("type", "password");
|
|
passwordInput.classList.remove("reveal");
|
|
eyeIcon.src = "eye.svg";
|
|
eyeIcon.alt = "Show Password";
|
|
}
|
|
}
|
|
|
|
/* system page */
|
|
if (typeof uploadingFirmware === 'undefined') {
|
|
var uploadingFirmware = false;
|
|
}
|
|
|
|
if (typeof FileSize === 'undefined') {
|
|
var FileSize = 0;
|
|
}
|
|
|
|
function uploadFile() {
|
|
alert("Started updating...");
|
|
const firmwareInput = document.getElementById('firmwareInput');
|
|
const statusDiv = document.getElementById('status');
|
|
const file = firmwareInput.files[0];
|
|
FileSize = file.size;
|
|
SetFirmwareSize(file.size);
|
|
|
|
if (file) {
|
|
statusDiv.innerText = 'Updating...';
|
|
const formData = new FormData();
|
|
formData.append('firmware', file);
|
|
uploadingFirmware = true;
|
|
|
|
fetch('/upload', {
|
|
method: 'POST',
|
|
body: formData,
|
|
})
|
|
.then((response) => {
|
|
if (response.ok) {
|
|
response.text().then((data) => {
|
|
const jsonData = JSON.parse(data);
|
|
updateProgress();
|
|
uploadingFirmware = false;
|
|
if (jsonData.errorMessage) {
|
|
alert(`Error message: ${jsonData.errorMessage}`);
|
|
}
|
|
});
|
|
} else {
|
|
uploadingFirmware = false;
|
|
response.text().then((errorMessage) => {
|
|
alert(`Error message: ${errorMessage}`);
|
|
});
|
|
}
|
|
})
|
|
.catch((error) => {
|
|
console.error('Error:', error);
|
|
uploadingFirmware = false;
|
|
});
|
|
} else {
|
|
statusDiv.innerText = 'No file selected';
|
|
}
|
|
}
|
|
|
|
function SetFirmwareSize(val) {
|
|
var xmlHttp = new XMLHttpRequest();
|
|
xmlHttp.open("GET", "set_firmware_size?size=" + val, false);
|
|
xmlHttp.send(null);
|
|
}
|
|
|
|
function updateProgress() {
|
|
if (!uploadingFirmware) {
|
|
return;
|
|
}
|
|
|
|
fetch('/UpdateProcessing', {
|
|
method: 'GET',
|
|
})
|
|
.then((response) => {
|
|
if (response.ok) {
|
|
return response.json();
|
|
} else {
|
|
throw new Error('Failed to fetch progress');
|
|
}
|
|
})
|
|
.then((data) => {
|
|
const statusDiv = document.getElementById('status');
|
|
var progressBar = document.getElementById("myProgressBar");
|
|
progressBar.style.width = data.processed_percent + "%";
|
|
progressBar.innerHTML = data.processed_percent + "%";
|
|
|
|
statusDiv.innerText = data.message;
|
|
uploadingFirmware = data.updating;
|
|
if (data.updating == false && !updateCompleted) {
|
|
alert('Operation done. Please reboot MCU.');
|
|
uploadingFirmware = false;
|
|
updateCompleted = true;
|
|
clearInterval(updateInterval);
|
|
}
|
|
})
|
|
.catch((error) => {
|
|
console.error('Error:', error);
|
|
var progressBar = document.getElementById("myProgressBar");
|
|
progressBar.innerHTML = "Error";
|
|
clearInterval(updateInterval);
|
|
});
|
|
}
|
|
|
|
function checkUpdate() {
|
|
var xmlHttp = new XMLHttpRequest();
|
|
alert("Connecting to server... Please wait several seconds");
|
|
xmlHttp.open("GET", "/check_web_ota_update", false);
|
|
xmlHttp.send(null);
|
|
alert(xmlHttp.responseText);
|
|
get_data("system");
|
|
}
|
|
|
|
function updateWeb() {
|
|
alert("Started updating from cloud.");
|
|
var xmlHttp = new XMLHttpRequest();
|
|
xmlHttp.open("GET", "web_ota_update?update=true", false);
|
|
xmlHttp.send(null);
|
|
uploadingFirmware = true;
|
|
}
|
|
|
|
function validatePasswords() {
|
|
var password = document.getElementById("auth_password").value;
|
|
var confirmPassword = document.getElementById("auth_password_confirm").value;
|
|
var saveButton = document.querySelector(".btn_save_a");
|
|
var passwordStatus = document.getElementById("pass_match");
|
|
|
|
if (password === confirmPassword) {
|
|
passwordStatus.innerHTML = "✔️";
|
|
saveButton.disabled = false;
|
|
} else {
|
|
passwordStatus.innerHTML = "❌";
|
|
saveButton.disabled = true;
|
|
}
|
|
}
|
|
|
|
if (document.getElementById("auth_password")) {
|
|
document.getElementById("auth_password").addEventListener("input", validatePasswords);
|
|
}
|
|
|
|
if (document.getElementById("auth_password_confirm")) {
|
|
document.getElementById("auth_password_confirm").addEventListener("input", validatePasswords);
|
|
}
|
|
|
|
if ((document.getElementById("auth_password")) && (document.getElementById("auth_password_confirm"))) {
|
|
validatePasswords();
|
|
}
|
|
|
|
function setupCollapsibleButtons() {
|
|
$(".btn_collapsible").click(function(){
|
|
$(this).toggleClass("active");
|
|
var content = $(this).parent().next();
|
|
if (content.css("display") === "block") {
|
|
content.css("display", "none");
|
|
} else {
|
|
content.css("display", "block");
|
|
}
|
|
});
|
|
}
|
|
|
|
function setupCollapsibleButtonsWiFi() {
|
|
$(".btn_collapsible_wifi").click(function(){
|
|
$(this).toggleClass("active");
|
|
var content_wifi = $(this).parent().next();
|
|
if (content_wifi.css("display") === "block") {
|
|
content_wifi.css("display", "none");
|
|
} else {
|
|
content_wifi.css("display", "block");
|
|
}
|
|
});
|
|
}
|