init

pub/js/focusZoom.js

@@ -0,0 +1,166 @@
+/*jshint esversion: 6 */
+function focusTouchEvents() {
+    const opts = ['tele', 'wide'];
+    opts.forEach((opt) => {
+        const eleId = 'focus' + opt.charAt(0).toUpperCase() + opt.slice(1);
+        const ele = document.getElementById(eleId);
+        ele.addEventListener('mousedown', variableFocus);
+        ele.addEventListener('mouseup', stopFocus);
+        ele.addEventListener('touchstart', variableFocus);
+        ele.addEventListener('touchend', stopFocus);
+    });
+    zoomTouchEvents();
+}
+
+function zoomTouchEvents() {
+    const opts = ['tele', 'wide'];
+    opts.forEach((opt) => {
+        const eleId = 'zoom' + opt.charAt(0).toUpperCase() + opt.slice(1);
+        const ele = document.getElementById(eleId);
+        ele.addEventListener('mousedown', variableZoom);
+        ele.addEventListener('mouseup', stopZoom);
+        ele.addEventListener('touchstart', variableZoom);
+        ele.addEventListener('touchend', stopZoom);
+    });
+}
+
+function getFocusSpeed() {
+    return document.getElementById('focusSpeedInput').value;
+}
+
+function getZoomSpeed() {
+    return document.getElementById('zoomSpeedInput').value;
+}
+
+function stopFocus(e) {
+    e.preventDefault();
+    stdFocus('stop');
+}
+
+function stopZoom(e) {
+    e.preventDefault();
+    stdZoom('stop');
+}
+
+function variableFocus(e) {
+    e.preventDefault();
+    const opt = e.currentTarget.getAttribute('data-value');
+    const focusSpeed = getFocusSpeed();
+
+    const payload = {
+        "mode": "variable",
+        "option": opt,
+        "intensity": focusSpeed
+    };
+    sendCmd("/ptz/focus", "POST", payload)
+        .then(function(res) {
+            alertMsg("variableFocus res: " + res);
+        })
+        .catch(function(err) {
+            alertMsg(err, true);
+        });
+}
+
+function directFocus(focusPos) {
+    const payload = {
+        "mode": "direct",
+        "focusPos": focusPos
+    };
+    sendCmd("/ptz/focus", "POST", payload)
+        .then(function(res) {
+            alertMsg("directFocus res: " + res);
+        })
+        .catch(function(err) {
+            alertMsg(err, true);
+        });
+}
+
+function stdFocus(opt) {
+    const payload = {
+        "mode": "standard",
+        "option": opt
+    };
+    sendCmd("/ptz/focus", "POST", payload)
+        .then(function(res) {
+            alertMsg("stdFocus res: " + res);
+        })
+        .catch(function(err) {
+            alertMsg(err, true);
+        });
+}
+
+function focusMode() {
+    const payload = {
+        "mode": "focusmode",
+        "option": document.getElementById('focusModeSel').selectedOptions[0].value
+    };
+    sendCmd("/ptz/focus", "POST", payload)
+        .then(function(res) {
+            alertMsg("focusmode res: " + res);
+        })
+        .catch(function(err) {
+            alertMsg(err, true);
+        });
+}
+
+function afZone() {
+    const payload = {
+        "mode": "afzone",
+        "option": document.getElementById('afZoneSel').selectedOptions[0].value
+    };
+    sendCmd("/ptz/focus", "POST", payload)
+        .then(function(res) {
+            alertMsg("afzone res: " + res);
+        })
+        .catch(function(err) {
+            alertMsg(err, true);
+        });
+}
+
+// **************************************** ZOOM *************************************
+
+function variableZoom(e) {
+    e.preventDefault();
+    const opt = e.currentTarget.getAttribute('data-value');
+    const zoomSpeed = getZoomSpeed();
+    const payload = {
+        "mode": "variable",
+        "option": opt,
+        "intensity": zoomSpeed
+    };
+    sendCmd("/ptz/zoom", "POST", payload)
+        .then(function(res) {
+            alertMsg("variableZoom res: " + res);
+        })
+        .catch(function(err) {
+            alertMsg(err, true);
+        });
+}
+
+function stdZoom(opt) {
+    const payload = {
+        "mode": "standard",
+        "option": opt
+    };
+    sendCmd("/ptz/zoom", "POST", payload)
+        .then(function(res) {
+            alertMsg("stdZoom res: " + res);
+        })
+        .catch(function(err) {
+            alertMsg(err, true);
+        });
+}
+
+function directZoom(zoomPos) {
+    const payload = {
+        "mode": "direct",
+        "zoomPos": zoomPos
+    };
+    sendCmd("/ptz/zoom", "POST", payload)
+        .then(function(res) {
+            alertMsg("directZoom res: " + res);
+        })
+        .catch(function(err) {
+            alertMsg(err, true);
+        });
+}

pub/js/image.js

@@ -0,0 +1,237 @@
+/*jshint esversion: 6 */
+
+function whiteBalance(mode) {
+    let id;
+    if (mode === 'wbmode') {
+        id = "wbModeSel";
+    } else {
+        id = "awbSel";
+    }
+
+    const payload = {
+        "mode": mode,
+        "option": document.getElementById(id).selectedOptions[0].value
+    };
+    sendCmd("/image/wb", "POST", payload)
+        .then((res) => {
+            alertMsg("white bal res: " + res);
+        })
+        .catch((err) => {
+            alertMsg(err, true);
+        });
+}
+
+
+function autoExp() {
+    const payload = {
+        "option": document.getElementById("aeSel").selectedOptions[0].value
+    };
+    sendCmd("/image/ae", "POST", payload)
+        .then((res) => {
+            alertMsg("auto exp res: " + res);
+        })
+        .catch((err) => {
+            alertMsg(err, true);
+        });
+}
+
+function rgain(mode, opt, pos) {
+    const payload = {
+        "mode": mode
+    };
+    if (mode === "direct") {
+        payload.pos = pos;
+    } else if (mode === "standard"){
+        payload.option = opt;
+    }
+    sendCmd("/image/rgain", "POST", payload)
+        .then((res) => {
+            alertMsg("rgain res: " + res);
+        })
+        .catch((err) => {
+            alertMsg(err, true);
+        });
+}
+
+function bgain(mode, opt, pos) {
+    const payload = {
+        "mode": mode
+    };
+    if (mode === "direct") {
+        payload.pos = pos;
+    } else if (mode === "standard"){
+        payload.option = opt;
+    }
+    sendCmd("/image/bgain", "POST", payload)
+        .then((res) => {
+            alertMsg("bgain res: " + res);
+        })
+        .catch((err) => {
+            alertMsg(err, true);
+        });
+}
+
+function shutter(mode, option) {
+    const payload = {
+        "mode": mode,
+        "option": option
+    };
+
+    sendCmd("/image/shutter", "POST", payload)
+        .then((res) => {
+            alertMsg("shutter res: " + res);
+        })
+        .catch((err) => {
+            alertMsg(err, true);
+        });
+}
+
+function iris(mode, option) {
+    const payload = {
+        "mode": mode
+    };
+
+    if (mode === "direct") {
+        payload.pos = pos;
+    } else if (mode === "standard"){
+        payload.option = option;
+    }
+
+    sendCmd("/image/iris", "POST", payload)
+        .then((res) => {
+            alertMsg("iris res: " + res);
+        })
+        .catch((err) => {
+            alertMsg(err, true);
+        });
+}
+
+function gain(mode, opt) {
+    const payload = {
+        "mode": mode,
+        "option": opt
+    };
+
+    sendCmd("/image/gain", "POST", payload)
+        .then((res) => {
+            alertMsg("gain res: " + res);
+        })
+        .catch((err) => {
+            alertMsg(err, true);
+        });
+}
+
+function backlight(opt) {
+    const payload = {
+        "option": opt
+    };
+    sendCmd("/image/backlight", "POST", payload)
+        .then((res) => {
+            alertMsg("backlight res: " + res);
+        })
+        .catch((err) => {
+            alertMsg(err, true);
+        });
+}
+
+function blackWhite(opt) {
+    const payload = {
+        "option": opt
+    };
+    sendCmd("/image/bw", "POST", payload)
+        .then((res) => {
+            alertMsg("blackwhite res: " + res);
+        })
+        .catch((err) => {
+            alertMsg(err, true);
+        });
+}
+
+function flicker(opt) {
+    const payload = {
+        "option": opt
+    };
+    sendCmd("/image/flicker", "POST", payload)
+        .then((res) => {
+            alertMsg("flicker res: " + res);
+        })
+        .catch((err) => {
+            alertMsg(err, true);
+        });
+}
+
+function imgFlip(mode) {
+    let opt;
+    if (document.getElementById(mode).checked) {
+        opt = 'on';
+    } else {
+        opt = 'off';
+    }
+    const payload = {
+        "option": opt,
+        "mode": mode
+    };
+    sendCmd("/image/imgFlip", "POST", payload)
+        .then((res) => {
+            alertMsg("image flip res: " + res);
+        })
+        .catch((err) => {
+            alertMsg(err, true);
+        });
+}
+
+function changeInputLabel(setting) {
+    const input = document.getElementById(setting + 'Input');
+    const label = document.getElementById(setting + "InputLabel");
+    if (setting === 'bright') {
+        label.innerHTML = "Brightness: " + input.value;
+    } else {
+        label.innerHTML =  setting.charAt(0).toUpperCase() + setting.slice(1) + ": " + input.value;
+    }
+}
+
+function colorHue() {
+    changeInputLabel('colorHue');
+    const payload = {
+        "pos": document.getElementById('colorHueInput').value
+    };
+    sendCmd("/image/colorHue", "POST", payload)
+        .then((res) => {
+            alertMsg("color hue res: " + res);
+        })
+        .catch((err) => {
+            alertMsg(err, true);
+        });
+}
+
+function brightness() {
+    changeInputLabel('bright');
+    const payload = {
+        "pos": document.getElementById('brightInput').value
+    };
+    sendCmd("/image/bright", "POST", payload)
+        .then((res) => {
+            alertMsg("bright res: " + res);
+        })
+        .catch((err) => {
+            alertMsg(err, true);
+        });
+}
+
+function contrast() {
+    changeInputLabel('contrast');
+    const payload = {
+        "pos": document.getElementById('contrastInput').value
+    };
+    sendCmd("/image/contrast", "POST", payload)
+        .then((res) => {
+            alertMsg("contrast res: " + res);
+        })
+        .catch((err) => {
+            alertMsg(err, true);
+        });
+}
+
+function saveSetting() {
+    sendCmd("/image/save", "POST", {});
+}

pub/js/main.js

@@ -0,0 +1,149 @@
+/*jshint esversion: 6 */
+
+function sendCmd(path, method, payload = {}) {
+    const server = 'http://' + document.location.hostname + ':4000';
+    return new Promise((resolve, reject) => {
+        const xhr = new XMLHttpRequest();
+        xhr.open(method, server + path);
+        xhr.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
+        xhr.onload = function() {
+            if (this.status >= 200 && this.status < 300) {
+                resolve(xhr.response);
+            } else {
+                reject(xhr.response);
+            }
+        };
+        xhr.onerror = function() {
+            reject(xhr.response);
+        };
+        if (method !== "GET") {
+            payload.id = getCurrentCamera().value;
+            xhr.send(JSON.stringify(payload));
+        } else {
+            xhr.send();
+        }
+    });
+}
+
+function alertMsg(msg, err) {
+    const msgStage = document.getElementById('msgStage');
+    msgStage.style.display = "block";
+
+    if (err) {
+        msgStage.classList.add("errMsg");
+        setTimeout(() => {
+            msgStage.classList.remove("errMsg");
+            msgStage.style.display = "none";
+        }, 4000);
+    } else {
+        msgStage.classList.add("successMsg");
+        setTimeout(() => {
+            msgStage.classList.remove("successMsg");
+            msgStage.style.display = "none";
+        }, 4000);
+    }
+
+    msgStage.innerHTML = msg;
+}
+
+function getAllSavedCameras() {
+    return new Promise((resolve, reject) => {
+        resolve(sendCmd('/camera/cameras', 'GET', null));
+    });
+}
+
+function getCurrentCamera() {
+    const cameraSelectTag = document.getElementById('cameraList');
+    return cameraSelectTag.options[cameraSelectTag.selectedIndex];
+}
+
+function optionView(view) {
+    document.getElementById("options").querySelectorAll("a.active")[0].classList.remove("active", "highlight");
+    document.querySelectorAll("a[value=" + view + "]")[0].classList.add("active", "highlight");
+
+    const allOptionViews = document.getElementsByClassName('optionView');
+    Array.prototype.forEach.call(allOptionViews, function(view) {
+        view.style.display = "none";
+    });
+    document.getElementById(view).style.display = "block";
+}
+
+Array.prototype.forEach.call(document.getElementsByClassName('panTiltInput'), function(input) {
+    input.addEventListener('change', changeRangeInputLabel, false);
+});
+
+function changeRangeInputLabel(e) {
+    const identity = e.currentTarget.getAttribute('data-html');
+    document.getElementById(identity + "SpeedLabel").innerHTML = identity.charAt(0).toUpperCase() + identity.slice(1) + " Speed: " + e.currentTarget.value;
+}
+
+function addCamera() {
+    const payload = {
+        name: document.getElementById('cameraNickname').value,
+        ip: document.getElementById('cameraIpAddy').value,
+        port: document.getElementById('cameraPort').value,
+        rtsp: document.getElementById('cameraRtsp').value
+    };
+    sendCmd('/camera/create', 'POST', payload)
+        .then(function(res) {
+            const camera = JSON.parse(res);
+            addCameraTag(camera);
+            alertMsg("Camera Successfully Added");
+        })
+        .catch(err => {
+            alertMsg(err);
+        });
+}
+
+function toggleSideBar() {
+    const sidebar = document.getElementById('sidebar');
+    const content = document.getElementById('content');
+    if(sidebar.classList.contains('active')) {
+        sidebar.classList.remove('active');
+        content.classList.remove('active');
+    } else {
+        sidebar.classList.add('active');
+        content.classList.add('active');
+    }
+}
+
+function addCameraTag(camera, index = 1) {
+    const optTag = document.createElement("option");
+    const eleId = camera.name || camera.ip;
+    optTag.dataset.streamPort = camera.streamPort;
+    if (index === 0) {
+        optTag.setAttribute("selected", "selected");
+    }
+    optTag.appendChild(document.createTextNode(eleId));
+    optTag.setAttribute("value", camera._id);
+    document.getElementById('cameraList').appendChild(optTag);
+}
+
+function deleteCamera() {
+    const camera = getCurrentCamera();
+    if(confirm("Would you like to delete " + camera.innerHTML + "?")) {
+        sendCmd('/camera/', "DELETE")
+            .then(() => {
+                const cameraSelectTag = document.getElementById('cameraList');
+                cameraSelectTag.remove(cameraSelectTag.selectedIndex);
+                changeStream();
+            })
+            .catch((err) => {
+                console.log(err);
+            });
+    }
+}
+
+function reqFullScreen() {
+    const doc = window.document;
+    const docEl = doc.documentElement;
+
+    const requestFullScreen = docEl.requestFullscreen || docEl.mozRequestFullScreen || docEl.webkitRequestFullScreen || docEl.msRequestFullscreen;
+    const cancelFullScreen = doc.exitFullscreen || doc.mozCancelFullScreen || doc.webkitExitFullscreen || doc.msExitFullscreen;
+
+    if(!doc.fullscreenElement && !doc.mozFullScreenElement && !doc.webkitFullscreenElement && !doc.msFullscreenElement) {
+        requestFullScreen.call(docEl);
+    } else {
+        cancelFullScreen.call(doc);
+    }
+}

pub/js/motion.js

@@ -0,0 +1,116 @@
+/*jshint esversion: 6 */
+function motionTouchEvents() {
+    const directions = ['right', 'left', 'up', 'down'];
+    directions.forEach((direction) => {
+        const eleId = 'motion' + direction.charAt(0).toUpperCase() + direction.slice(1);
+        const ele = document.getElementById(eleId);
+        ele.addEventListener('mousedown', stdMove);
+        ele.addEventListener('mouseup', stopMotion);
+        ele.addEventListener('touchstart', stdMove);
+        ele.addEventListener('touchend', stopMotion);
+    });
+}
+
+function moveHome() {
+    const payload = {mode: "home"};
+    sendCmd("/ptz/motion", "POST", payload)
+        .then(function(res) {
+            alertMsg("home res: " + res);
+        })
+        .catch(function(err) {
+            alertMsg(err, true);
+        });
+}
+
+function stopMotion(e) {
+    e.preventDefault();
+
+    const panTiltArr = getPanTiltSpeeds();
+    const payload = {
+        "mode": "standard",
+        "direction": "stop",
+        "panSpeed": panTiltArr[0],
+        "tiltSpeed": panTiltArr[1]
+    };
+    sendCmd("/ptz/motion", "POST", payload)
+        .then(function(res) {
+            alertMsg("continousMove_" + direction + " res: " + res);
+        })
+        .catch(function(err) {
+            alertMsg(err, true);
+        });
+}
+
+function stdMove(e) {
+    e.preventDefault();
+    const direction = e.target.getAttribute('data-value');
+    const panTiltArr = getPanTiltSpeeds();
+
+    const payload = {
+        "mode": "standard",
+        "direction": direction,
+        "panSpeed": panTiltArr[0],
+        "tiltSpeed": panTiltArr[1]
+    };
+    sendCmd("/ptz/motion", "POST", payload)
+        .then(function(res) {
+            alertMsg("continousMove_" + direction + " res: " + res);
+        })
+        .catch(function(err) {
+            alertMsg(err, true);
+        });
+}
+
+function getPanTiltSpeeds() {
+    return [document.getElementById('panSpeedInput').value,  document.getElementById('tiltSpeedInput').value];
+}
+
+function moveAbsPos(pan, tilt) {
+    const panTiltArr = getPanTiltSpeeds();
+    const payload = {
+        "mode": "absolute",
+        "panSpeed": panTiltArr[0],
+        "tiltSpeed": panTiltArr[1],
+        "pan": pan,
+        "tilt": tilt
+    };
+    sendCmd("/ptz/motion", "POST", payload)
+        .then(function(res) {
+            alertMsg("moveAbsPos res: " + res);
+        })
+        .catch(function(err) {
+            alertMsg(err, true);
+        });
+}
+
+function moveRelPos(pan, tilt) {
+    const panTiltArr = getPanTiltSpeeds();
+    const payload = {
+        "mode": "relative",
+        "panSpeed": panTiltArr[0],
+        "tiltSpeed": panTiltArr[1],
+        "pan": pan,
+        "tilt": tilt
+    };
+    sendCmd("/ptz/motion", "POST", payload)
+        .then(function(res) {
+            alertMsg("moveRelPos res: " + res);
+        })
+        .catch(function(err) {
+            alertMsg(err, true);
+        });
+}
+
+function presets(mode, memNum) {
+    const payload = {
+        "mode": mode,
+        "num": memNum
+    };
+    sendCmd("ptz/presets", "POST", payload)
+        .then(function(res) {
+            alertMsg("Preset res: " + res);
+        })
+        .catch(function(err) {
+            alertMsg(err, true);
+        });
+}

pub/js/preset.js

@@ -0,0 +1,39 @@
+/*jshint esversion: 6 */
+
+function presetAction(action, eleId = 'presetInput') {
+    let payload = {
+        mode: action
+    };
+    if (action === 'speed') {
+        payload.speed = document.getElementById(eleId).value;
+        changePresetSpeedLabel(payload.speed);
+    } else {
+        animateActionBtn(action);
+        payload.memNum = document.getElementById(eleId).value;
+    }
+
+    sendCmd('/ptz/presets', 'POST', payload)
+        .then((res) => {
+            console.log(res);
+            if (action !== 'speed' && res === "Socket1 Cmd Done" || action !== 'speed' && res === "Socket2 Cmd Done") {
+                stopPresetBtnAnimate(action);
+            }
+            alertMsg("Preset Action res: " + res + " Payload: " + payload);
+        }).catch((err) => {
+            alertMsg(err, true);
+        });
+}
+
+function animateActionBtn(action) {
+    const btn = document.getElementById(action + 'PresetBtn');
+    btn.innerHTML = '<i class="fa fa-spinner fa-pulse"></i>';
+}
+
+function stopPresetBtnAnimate(action) {
+    const btn = document.getElementById(action + 'PresetBtn');
+    btn.innerHTML = action.charAt(0).toUpperCase() + action.slice(1);
+}
+
+function changePresetSpeedLabel(speed) {
+    document.getElementById("presetSpeedLabel").innerHTML = "Preset Recall Speed: " + speed;
+}

pub/js/stream.js

@@ -0,0 +1,20 @@
+/*jshint esversion: 6 */
+let player;
+
+function changeStream() {
+    player.destroy();
+    startStream();
+}
+
+function startStream() {
+    const canvas = document.getElementById('streamStage');
+    const payload = {
+        width: window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth,
+        height: window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
+    };
+
+    sendCmd('/camera/stream', 'POST', payload).then((camera) => {
+        const streamPort = JSON.parse(camera);
+        player = new JSMpeg.Player('ws://' + document.location.hostname + ':' + streamPort, {canvas:canvas});
+    });
+}