From 59e8f60d4da988754b468975b58d8481908eb785 Mon Sep 17 00:00:00 2001
From: Artyom Beilis <artyomtnk@yahoo.com>
Date: Thu, 20 Apr 2023 19:12:25 +0300
Subject: [PATCH] Split HTML/CSS/JS Added calculated direction of plate-sovling
 correction in units

---
 include/plate_solver.h         |   2 +
 include/plate_solver_ctl_app.h |  46 ++
 src/plate_solver.cpp           |   2 +
 www-data/index.html            | 879 +--------------------------------
 www-data/media/css/style.css   |  75 +++
 www-data/media/js/code.js      | 851 +++++++++++++++++++++++++++++++
 6 files changed, 984 insertions(+), 871 deletions(-)
 create mode 100644 www-data/media/css/style.css
 create mode 100644 www-data/media/js/code.js

diff --git a/include/plate_solver.h b/include/plate_solver.h
index 741ff17..4313fde 100644
--- a/include/plate_solver.h
+++ b/include/plate_solver.h
@@ -10,6 +10,8 @@ namespace ols {
     class PlateSolver {
     public:
         struct Result {
+            double center_ra_deg;
+            double center_de_deg;
             int center_row;
             int center_col;
             int target_row;
diff --git a/include/plate_solver_ctl_app.h b/include/plate_solver_ctl_app.h
index 1d71db9..be85bc7 100644
--- a/include/plate_solver_ctl_app.h
+++ b/include/plate_solver_ctl_app.h
@@ -8,8 +8,10 @@
 #include <cppcms/service.h>
 #include <booster/log.h>
 
+#include "rotation.h"
 #include "server_sent_events.h"
 #include "util.h"
+
 namespace ols {
     class PlateSolverControlApp : public ControlAppBase {
     public:
@@ -20,12 +22,45 @@ namespace ols {
         {
             dispatcher().map("POST","/?",&PlateSolverControlApp::solve,this);
         }
+        struct DeltaAZ {
+            double delta_alt;
+            double delta_az;
+        };
+
+        DeltaAZ calc_delta_alt_az(double t_ra,double t_de,double c_ra,double c_de,double lat,double lon)
+        {
+            Derotator derot(lon,lat,c_ra,c_de);
+            double time_now = time(nullptr); 
+            auto src = derot.rayFromPos(c_ra,c_de,time_now);
+            double src_E = src.x;
+            double src_N = src.y;
+            double src_U = src.z;
+            auto tgt = derot.rayFromPos(t_ra,t_de,time_now);
+            double tgt_E = tgt.x;
+            double tgt_N = tgt.y;
+            double tgt_U = tgt.z;
+
+            double d_alt = (std::asin(tgt_U)  - std::asin(src_U)) * 180 / M_PI;
+            double d_az = (std::atan2(tgt_E,tgt_N) - std::atan2(src_E,src_N)) * 180 / M_PI;
+            if(d_az > 180)
+                d_az -= 360;
+            if(d_az < -180)
+                d_az += 360;
+            DeltaAZ res;
+            res.delta_alt = d_alt;
+            res.delta_az  = d_az;
+            return res;
+        }
+
         void solve()
         {
             double fov = content_.get<double>("fov");
             double ra  = content_.get<double>("ra");
             double de  = content_.get<double>("de");
             double rad = content_.get<double>("rad");
+            double constexpr invalid_geolocation = 1e6;
+            double lat = content_.get<double>("lat",invalid_geolocation);
+            double lon = content_.get<double>("lon",invalid_geolocation);
             std::string img = "/plate_solving_solution.jpeg";
             std::string jpeg = data_dir_ + img;
             try {
@@ -33,6 +68,17 @@ namespace ols {
                 response_["solved"]=true;
                 response_["distance_to_target"] = res.angle_to_target_deg;
                 response_["result_image"] = "/data" + img;
+                response_["delta_ra"] = ra - res.center_ra_deg;
+                response_["delta_de"] = de - res.center_de_deg;
+                if(lat != invalid_geolocation && lon != invalid_geolocation) {
+                    auto delta = calc_delta_alt_az(ra,de,res.center_ra_deg, res.center_de_deg,lat,lon);
+                    response_["delta_alt"] = delta.delta_alt;
+                    response_["delta_az"]  = delta.delta_az;
+                }
+                else {
+                    response_["delta_alt"] = cppcms::json::null();
+                    response_["delta_az"]  = cppcms::json::null();
+                }
             }
             catch(std::exception const &e) {
                 response_["solved"]=false;
diff --git a/src/plate_solver.cpp b/src/plate_solver.cpp
index 194505c..1dc2bc6 100644
--- a/src/plate_solver.cpp
+++ b/src/plate_solver.cpp
@@ -99,6 +99,8 @@ namespace ols {
         r.target_col = xt;
         r.target_row = rows - yt;
         r.angle_to_target_deg = diff_deg;
+        r.center_ra_deg = ra0;
+        r.center_de_deg = de0;
         return r;
     }
     double PlateSolver::get(std::map<std::string,double> const &vals,std::string const &name)
diff --git a/www-data/index.html b/www-data/index.html
index a2eddf7..1919582 100644
--- a/www-data/index.html
+++ b/www-data/index.html
@@ -4,878 +4,10 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
     <meta charset="UTF-8">
     <link rel="icon" type="image/x-icon" href="/media/img/facicon.png" >
+    <link rel="stylesheet" href="/media/css/style.css">
     <title>OpenLiveStacker</title>
 </head>
-<style>
-    html {
-        overflow: scroll;
-        overflow-x: hidden;
-        scrollbar-width: none; /* Firefox */
-        -ms-overflow-style: none;
-    }
-    ::-webkit-scrollbar {
-        width: 0;
-    }
-    body, td { font-size: 5mm ; color:red ; font-family: sans; background-color:black }
-    a:link {color: red;}
-    a:visited { color: red; }
-    a:active { color:red; }
-    a:hover { color:red; }
-    img { padding:0; margin:0; }
-    button { border-radius:2mm; height:10mm; font-size:5mm ; text-align:center; vertical-align: middle; background-color:black; color:red; border: 2px solid red }
-    button:disabled {
-        color:#800000;
-    }
-    .slider { width: 100%; }
-    .slider_elem { background-color: transparent; }
-    .comp_but, .incdec_but { width: 10mm ; height:10mm; font-size:5mm ; padding: 0 }
-    .stretch_background {
-        background: url(/media/img/stretch.png) no-repeat center center;
-        background-size: 10mm 10mm;
-    }
-    .solve_background {
-        background: url(/media/img/solve.png) no-repeat center center;
-        background-size: 10mm 10mm;
-    }
-    .pause_background {
-        background: url(/media/img/pause.png) no-repeat center center;
-        background-size: 10mm 10mm;
-    }
-    .resume_background {
-        background: url(/media/img/resume.png) no-repeat center center;
-        background-size: 10mm 10mm;
-    }
-    .save_background {
-        background: url(/media/img/save.png) no-repeat center center;
-        background-size: 10mm 10mm;
-    }
-    .cancel_background {
-        background: url(/media/img/cancel.png) no-repeat center center;
-        background-size: 10mm 10mm;
-    }
-    .settings_background {
-        background: url(/media/img/settings.png) no-repeat center center;
-        background-size: 10mm 10mm;
-    }
-    #thumb_stream_video {
-        padding:0;
-        margin:0;
-    }
-    #live_stream_video {
-        padding:0;
-        margin:0;
-    }
-    #solver_result_image {
-        padding:0;
-        margin:0;
-    }
-    #thumb {
-        text-align:right;
-        width:100%
-        padding: 0;
-        margin:0;
-    }
-    #video {
-        text-align:center;
-        width:100%
-        padding: 0;
-        margin:0;
-    }
-</style>
-<script src="/media/js/jsdb.js"></script>
 <body>
-<script>
-
-var global_width = 0;
-var global_height = 0;
-var g_prev_high = -1;
-var g_prev_low = -1;
-var g_stacker_status = 'idle';
-var g_show_thumb_live = false;
-var g_stats = null;
-
-function parseRA(svalue)
-{
-    const re_float = /^(\d+\.\d+)$/;
-    const re_colon = /^(\d+):(\d+)(?::(\d+(.\d+)?))?$/;
-    const re_hms = /^(\d+)[hH \t]\s*(\d+)[mM'′]\s*(?:(\d+(.\d+)?)(?:s|S|′′|″|''))?$/;
-    const re_space = /^(\d+)\s+(\d+)(?:\s+(\d+(.\d+)?))?$/;
-    var res = svalue.match(re_float);
-    var deg = null;
-    if(res) {
-        deg = parseFloat(res[1]);
-        if(deg < 0 || deg > 360)
-            return null;
-        return deg;
-    }
-    res = svalue.match(re_colon) || svalue.match(re_hms) || svalue.match(re_space);
-    if(!res)
-        return null;
-    var h = parseInt(res[1]);
-    var m = parseInt(res[2]);
-    var s = 0;
-    if(res[3]) {
-        s = parseFloat(res[3]);
-    }
-    if(h  >= 24 || m >= 60 || s >= 60) {
-        return null
-    }
-    deg = 15 * (h + (60 * m + s) / 3600.0 );
-    return deg;
-}
-
-function parseDEC(svalue)
-{
-    const re_float = /^([+-−]?\d+.\d+?)$/;
-    const re_colon = /^([-+−]?)(\d+):(\d+)(?::(\d+(.\d+)?))?$/;
-    const re_dms = /^([-+−]?)(\d+)[dD° \t]\s*(\d+)[mM'′]\s*(?:(\d+(.\d+)?)(?:s|S|″|′′|''))?$/;
-    const re_space = /^([-+−]?)(\d+)\s+(\d+)(?:\s+(\d+(.\d+)?))?$/;
-    var res = svalue.match(re_float)
-    if(res) {
-        var deg = parseFloat(res[1])
-        if(deg < -90 || deg > 90)
-            return null;
-        return deg;
-    }
-    res = svalue.match(re_colon) || svalue.match(re_dms) || svalue.match(re_space);
-    if(!res)
-        return null;
-    var sig = (res[1] == '-' || res[1] == '−')? -1.0 : 1.0;
-    var d = parseInt(res[2]);
-    var m = parseInt(res[3]);
-    var s = 0;
-    if(res[4]) {
-        s = parseFloat(res[3]);
-    }
-    if(d  > 90 || m >= 60 || s >= 60)
-        return null;
-    return sig*(d + (60 * m + s) / 3600.0);
-}
-
-function restCall(method,url,request,on_response,on_error = alert)
-{
-    var xhr = new XMLHttpRequest()
-    xhr.open(method,url,true)
-    xhr.onload = function() {
-        var response;
-        try {
-            response = JSON.parse(xhr.responseText);
-        }
-        catch(e) { 
-            on_error(e); 
-            return;
-        }
-        if('status' in response && response.status == 'fail') {
-            on_error(response.error);
-            return;
-        }
-        on_response(response)
-    };
-    if(request != null) {
-        xhr.setRequestHeader('Content-Type','application/json');
-        xhr.send(JSON.stringify(request));
-    }
-    else {
-        xhr.send();
-    }
-}
-
-function run()
-{
-    restCall("get","/api/camera",null,listCameras);
-    if(navigator.geolocation) {
-        navigator.geolocation.getCurrentPosition((pos)=>{
-            document.getElementById("stack_lat").value=pos.coords.latitude.toFixed(2);
-            document.getElementById("stack_lon").value=pos.coords.longitude.toFixed(2);
-        });
-    }
-}
-
-
-function listCameras(cameras)
-{
-    var sel = document.getElementById('camera_select')
-    for(var i=0;i<cameras.length;i++) {
-        var option = document.createElement("option");
-        option.text = cameras[i].name
-        option.value = cameras[i].id.toString()
-        sel.add(option)
-    }
-    restCall("get","/api/camera/status",null,checkOpenStatus);
-}
-
-function updateStackSelect()
-{
-    var type = getVal('type');
-    var elements = document.getElementsByClassName('dso_config');
-    var new_style = type == 'dso' ? '' : 'none';
-    for(var i=0;i<elements.length;i++) {
-        elements[i].style.display = new_style;
-    }
-}
-
-function checkOpenStatus(st)
-{
-    if(st.status == 'closed') {
-        return;
-    }
-    else if(st.status == 'open') {
-        loadFormats();
-        loadControls();
-    }
-    else if(st.status == 'streaming') {
-        global_width = st.width;
-        global_height = st.height;
-        loadFormats();
-        loadControls();
-        showConfig(false);
-        showLiveVideo();
-        restCall('get','/api/stacker/status',null, (d)=> {
-            changeStackerStatus(d.status);
-        });
-    }
-}
-
-function changeStackerStatus(new_status)
-{
-    var ui_ctl = {
-        stack: true,
-        pause: false,
-        cancel: false,
-        resume: false,
-        solve: true,
-        save: false,
-        live: false,
-        pp: false,
-        stats: false
-    };
-    if(new_status == 'idle') {
-        if(g_stacker_status != 'idle') {
-            showLiveVideo();
-            showThumbLive(false);
-        }
-        ui_ctl.stack = true;
-        ui_ctl.pause = false;
-        ui_ctl.resume = false;
-        ui_ctl.save=false;
-        ui_ctl.cancel=false;
-        ui_ctl.pp=false;
-        ui_ctl.live = false;
-        ui_ctl.stats = false;
-    }
-    else if(new_status =='stacking') {
-        if(g_stacker_status == 'idle') {
-            showStackedVideo(true);
-        }
-        ui_ctl.stack = false;
-        ui_ctl.cancel = true;
-        ui_ctl.pause = true;
-        ui_ctl.resume = false;
-        ui_ctl.save = true;
-        ui_ctl.pp = true;
-        ui_ctl.live = true;
-        ui_ctl.stats = true;
-    }
-    else if(new_status == 'paused') {
-        if(g_stacker_status == 'idle') {
-            showStackedVideo(true);
-        }
-        ui_ctl.stack = false;
-        ui_ctl.pause = false;
-        ui_ctl.cancel = true;
-        ui_ctl.resume = true;
-        ui_ctl.save = true;
-        ui_ctl.pp = true;
-        ui_ctl.live = true;
-        ui_ctl.stats = true;
-    }
-    else {
-        alert('Internal error invalud status' + new_status);
-    }
-    for(var name in ui_ctl) {
-        var st = ui_ctl[name] ? 'inline' : 'none';
-        document.getElementById('stacking_ui_' + name).style.display = st;
-    }
-    if(ui_ctl.stats) {
-        if(!g_stats) {
-            g_stats = new EventSource("/api/updates");
-            g_stats.onmessage = (e) => {
-                updateStackerStats(e.data);
-            };
-        }
-    }
-    else {
-        if(g_stats) {
-            g_stats.close();
-            g_stats = null;
-        }
-    }
-    g_stacker_status = new_status;
-}
-
-function updateStackerStats(e) {
-    var stats = JSON.parse(e);
-    document.getElementById('stats_info').innerHTML = stats.stacked + '/' + stats.missed + '/' + stats.dropped;
-}
-
-function loadFormats()
-{
-    document.getElementById('open_camera').style.display='none';
-    document.getElementById('std_controls').style.display='inline';
-    showConfig(true);
-    restCall('get','/api/camera/formats', null, (formats)=> {
-        var sel = document.getElementById('stream_format')
-        for(var i=sel.length-1;i>=0;i--) {
-            sel.options.remove(i);
-        }
-        for(var i=0;i<formats.length;i++) {
-            var option = document.createElement("option");
-            option.text = formats[i].format_id
-            option.value = formats[i].format_id
-            sel.add(option)
-        }
-    });
-}
-
-function openCamera()
-{
-    var cam_id = document.getElementById('camera_select').value;
-    restCall('post','/api/camera', { operation: 'open',id:parseInt(cam_id) }, function(msg) {
-        loadFormats();
-        loadControls();
-    });
-}
-
-function updateControl(optid,value)
-{
-    restCall('post','/api/camera/option/' + optid,{'value':value},(e)=>{
-        enableNumControl(optid,false);
-        if(optid == 'auto_exp') {
-            enableNumControl('exp',value ? false : true);
-        }
-        else if(optid == 'auto_wb') {
-            enableNumControl('wb',value ? false : true);
-        }
-    });
-}
-function updateBoolControl(optid,value)
-{
-    updateControl(optid,value ? 1 : 0);
-}
-
-function enableNumControl(optid,val)
-{
-    var ctl = document.getElementById('control_button_' + optid);
-    if(ctl)
-        ctl.disabled = !val;
-}
-
-function updateNumControl(optid)
-{
-    var val = document.getElementById('control_opt_' + optid).value;
-    val = parseFloat(val);
-    updateControl(optid,val);
-    enableNumControl(optid,false);
-    return false;
-}
-
-
-function prepareControls(ctls)
-{
-    var controls = document.getElementById('cam_controls');
-    var controls_str = ''
-    for(var i=0;i<ctls.length;i++) {
-        var ctl = ctls[i];
-        var unit='';
-        if(ctl.type == 'percent')
-            unit='(%)';
-        else if(ctl.type == 'msec')
-            unit='(ms)';
-        else if(ctl.type == 'kelvin')
-            unit='(K)';
-        var control_str = `<td>${ctl.name}${unit}</td>`;
-        if(ctl.type == 'bool') {
-            var checked = ctl.cur != 0 ? 'checked' : '';
-            control_str += `<td><input type="checkbox" ${checked} onchange="updateBoolControl('${ctl.option_id}',this.checked ? 1 : 0);" /></td>`;
-            control_str += '<td>&nbsp;</td>';
-            control_str += '<td>&nbsp;</td>';
-            control_str += `<td>${ctl.default != 0 ? 'on' : 'off'}</td>`;
-        }
-        else {
-            control_str +=`<td><form onsubmit="return updateNumControl('${ctl.option_id}');" ><input id="control_opt_${ctl.option_id}" min="${ctl.min}" max="${ctl.max}" step="${ctl.step}" type="number" value="${ctl.cur}" oninput="enableNumControl('${ctl.option_id}',true);"  /></form></td>`;
-            control_str += `<td><button disabled id="control_button_${ctl.option_id}" onclick="updateNumControl('${ctl.option_id}');" >set</button></td>`;
-            control_str +=`<td>[${ctl.min},${ctl.max}]</td>`;
-            control_str +=`<td>${ctl.default}</td>`;
-        }
-        controls_str += '<tr>' + control_str + '</tr>\n';
-    }
-    controls.innerHTML = controls_str;
-}
-
-function loadControls()
-{
-    restCall('get','/api/camera/options',null,prepareControls);
-}
-
-function calcImgSize()
-{
-    var W = window.innerWidth;
-    var H = window.innerHeight;
-    var img_H,img_W;
-    var p_top=0,p_left=0;
-    var w2h = global_width/global_height
-    if(W/H > w2h) {
-        img_H = H;
-        img_W = H*w2h;
-        p_left = (W - img_W)/2;
-    }
-    else {
-        img_W = W;
-        img_H = W/w2h;
-        p_top = (H - img_H) / 2;
-    }
-    return [img_W,img_H,p_left,p_top]
-}
-
-function updateCalibFramesById(data,elemid)
-{
-    var sel = document.getElementById(elemid);
-    var selected = sel.value;
-    for(var i=sel.length-1;i>=0;i--) {
-        sel.options.remove(i);
-    }
-    var found=false;
-    for(var i=-1;i<data.length;i++) {
-        var fid = 'N/A';
-        var width=global_width;
-        var height=global_height;
-        if(i >= 0) {
-            fid = data[i].id;
-            width = data[i].width;
-            height = data[i].height;
-        }
-        if(width != global_width || height != global_height)
-            continue;
-        var option = document.createElement("option");
-        option.text = fid;
-        option.value = fid;
-        sel.add(option)
-        if(fid == selected)
-            found=true;
-    }
-    sel.value = selected;
-}
-
-function updateCalibFrames(data)
-{
-    updateCalibFramesById(data,'stack_darks');
-    updateCalibFramesById(data,'stack_flats');
-    updateCalibFramesById(data,'stack_dark_flats');
-}
-
-function loadCalibFrames()
-{
-    restCall('get','/data/calibration/index.json',null,updateCalibFrames);
-}
-
-function showStackedVideo(stacked_on)
-{
-    if(stacked_on) {
-        showStream('stacked')
-    }
-    else
-        showStream('live')
-}
-
-function showStream(name)
-{
-    document.getElementById('video').innerHTML = `<img id="live_stream_video" alt="streaming video" src="/api/video/${name}" />`;
-    onResize(null);
-}
-
-function toggleThumbLive()
-{
-    showThumbLive(!g_show_thumb_live);
-}
-
-function showThumbLive(v)
-{
-    var thumb = document.getElementById('thumb');
-    var thumb_video = document.getElementById('thumb_video');
-    g_show_thumb_live = v;
-    var live_button = document.getElementById('stacking_ui_live');
-    if(v) {
-        thumb_video.innerHTML = `<img id="thumb_stream_video" alt="streaming video" src="/api/video/live" />`;
-        thumb.style.display = 'inline';
-        live_button.innerHTML = 'X';
-        onResize(null);
-    }
-    else {
-        thumb_video.innerHTML ='';
-        thumb.style.display = 'none';
-        live_button.innerHTML = 'L';
-    }
-}
-
-function showLiveVideo()
-{
-    showStream('live');
-}
-
-function onResize(ev)
-{
-    var video = document.getElementById('live_stream_video');
-    var size = calcImgSize();
-    if(video) {
-        video.style.width = size[0] + 'px';
-        video.style.height = size[1] + 'px';
-        video.style.marginLeft = size[2] + 'px';
-        video.style.marginTop  = size[3] + 'px';
-    }
-    var thumb = document.getElementById('thumb_stream_video')
-    if(thumb) {
-        thumb.style.width = Math.round(size[0] / 4) + 'px';
-        thumb.style.height = Math.round(size[1] / 4) + 'px';
-        thumb.style.marginRight = '0px';
-        thumb.style.marginTop  = '0px';
-    }
-    var solved = document.getElementById('solver_result_image');
-    if(solved) {
-        solved.style.width = Math.round(size[0] / 2) + 'px';
-        solved.style.height = Math.round(size[1] / 2) + 'px';
-    }
-}
-
-function startStream()
-{
-    var format_id = document.getElementById('stream_format').value;
-    restCall('post','/api/camera/stream',{op:'start',format_id:format_id},(r)=>{
-        global_width = r.width;
-        global_height = r.height;
-        showLiveVideo();
-        changeStackerStatus('idle');
-    });
-    showConfig(false);
-}
-
-function showStack(v)
-{
-    if(v) {
-        loadCalibFrames();
-    }
-	document.getElementById('stack').style.display = v ? 'inline' : 'none';
-}
-
-function showPP(v)
-{
-	document.getElementById('pp_control').style.display = v ? 'inline' : 'none';
-}
-
-function showConfig(v)
-{
-	document.getElementById('config').style.display = v ? 'inline' : 'none';
-}
-
-function getVal(name)
-{
-    return document.getElementById('stack_' + name).value;
-}
-
-function getBVal(name)
-{
-    return document.getElementById('stack_' + name).checked;
-}
-
-function getPVal(name)
-{
-    return document.getElementById('stack_' + name).value * 0.001;
-}
-
-function ctlStack(status)
-{
-    restCall('post','/api/stacker/control',{operation:status},(s)=> {
-        if(status == 'save' || status == 'cancel') {
-            changeStackerStatus('idle');
-        }
-        else if(status == 'resume') {
-            changeStackerStatus('stacking');
-        }
-        else if(status =='pause') {
-            changeStackerStatus('paused');
-        }
-    });
-}
-
-function setPPVal(name,val)
-{
-    document.getElementById('stack_stretch_' + name + '_disp').innerHTML = val.toFixed(3);
-}
-
-
-
-function setPPSlider(name,val)
-{
-    document.getElementById('stack_stretch_' + name).value = Math.round(val*1000);
-    setPPVal(name,val);
-}
-
-function updatePPSliders(data)
-{
-    setPPSlider('low',data.cut);
-    setPPSlider('high',data.gain);
-    setPPSlider('gamma',data.gamma);
-    g_prev_low = data.cut;
-    g_prev_high = data.gain;
-    updatePP();
-}
-
-function setDefaultPPSliders(e=null)
-{
-    updatePPSliders({
-        gamma: 2.4,
-        cut : 0.0,
-        gain : 1.0
-    });
-}
-
-function updateAutoPP()
-{
-    var auto_pp = getBVal("auto_stretch");
-    if(auto_pp) {
-        document.getElementById('dynamic_parameters').style.display='none';
-        updatePP();
-        return;
-    }
-    document.getElementById('dynamic_parameters').style.display='inline';
-    restCall('get','/data/stretch.json',null,updatePPSliders,setDefaultPPSliders);
-}
-
-function updatePPLow()
-{
-    g_prev_low = getPVal('stretch_low');
-    g_prev_high = getPVal("stretch_high");
-    updatePP();
-}
-
-function updatePPHigh()
-{
-    var new_high = getPVal("stretch_high");
-    if(g_prev_low != -1 && g_prev_high != -1) {
-        var new_low = Math.min(Math.max(g_prev_low,0.8),g_prev_low * (new_high / g_prev_high));
-        setPPSlider('low',new_low);
-    }
-    else {
-        g_prev_high = new_high;
-        g_prev_low = getPVal("stretch_low");
-    }
-    updatePP();
-}
-
-function updatePP()
-{
-
-    var config={
-        auto_stretch:       getBVal("auto_stretch"),
-        stretch_low:        getPVal('stretch_low'),
-        stretch_high:       getPVal('stretch_high'),
-        stretch_gamma:      getPVal('stretch_gamma'),
-    };
-    setPPVal('low',config.stretch_low);
-    setPPVal('high',config.stretch_high);
-    setPPVal('gamma',config.stretch_gamma);
-    restCall('post','/api/stacker/stretch',config,(e)=>{
-    });
-}
-
-function startStack()
-{
-    var darks = getVal('darks');
-    if(darks == 'N/A') {
-        darks = null;
-    }
-    var flats = getVal('flats');
-    if(flats == 'N/A') {
-        flats = null;
-    }
-    var dark_flats = getVal('dark_flats');
-    if(dark_flats == 'N/A') {
-        dark_flats = null;
-    }
-    var ra=parseRA(getVal("ra"));
-    var de=parseDEC(getVal("de"));
-    var lat = parseFloat(getVal("lat"));
-    var lon = parseFloat(getVal("lon"));
-    var field_derotation = getBVal("field_derotation");
-    if(field_derotation) {
-        if(isNaN(lat) || isNaN(lon) || ra==null || de==null) {
-            alert('Need RA, DE and geolocation for derotation');
-            return;
-        }
-    }
-    if(isNaN(lat))
-        lat = 0;
-    if(isNaN(lon))
-        lon = 0;
-
-    var name = getVal('name').trim();
-    var obj = getVal('object').trim();
-
-    var type = getVal('type');
-    var calib = type != 'dso';
-    if(!calib) {
-        if(name == '')
-            name = obj;
-        else if(obj != '')
-            name = name + '_' + obj;
-    }
-    name = name.replace(/ /g,'_');
-    const name_pat = /^[A-Za-z0-9_.\-]*$/g;
-    if(!name.match(name_pat)) {
-        alert('Name and Object should contain only English letters, digits, "_", "-" and "."')
-        return;
-    }
-    if(calib && name=='') {
-        alert('Provide name for calibration frame');
-        return;
-    }
-
-    var config={
-        name:               name,
-        save_data:          getBVal("save_data"),
-        field_derotation:   field_derotation,
-        image_flip:         getBVal("image_flip"),
-        auto_stretch:       getBVal("auto_stretch"),
-        stretch_low:        getPVal('stretch_low'),
-        stretch_high:       getPVal('stretch_high'),
-        stretch_gamma:      getPVal('stretch_gamma'),
-        type:               type,
-        location : {
-            lat:            lat,
-            lon:            lon,
-        },
-        target: {
-            ra:             ra,
-            de:             de,
-        },
-        darks : darks,
-        flats : flats,
-        dark_flats : dark_flats
-    };
-    restCall('post','/api/stacker/start',config,(e)=>{
-        changeStackerStatus('stacking');
-        showStack(false);
-    });
-}
-
-function updateRADE(name)
-{
-    updateRADEFor(name,'stack');
-}
-function updateSolverRADE(name)
-{
-    updateRADEFor(name,'solver');
-}
-
-function updateRADEFor(name,target_id)
-{
-    var coord=['','']
-    name = name.toUpperCase();
-    if(name in jsdb) {
-        coord = jsdb[name]
-    }
-    document.getElementById(target_id + '_ra').value = coord[0];
-    document.getElementById(target_id + '_de').value = coord[1];
-}
-
-function recalcFOV()
-{
-    try {
-        var pixel_size = parseFloat(document.getElementById('solver_pixel_size').value);
-        var FL = parseFloat(document.getElementById('solver_focal_length').value);
-        var fov = global_height * pixel_size * 1e-3 / FL * 180 / 3.14159;
-        document.getElementById('solver_fov').value = fov.toFixed(3);
-    }
-    catch(e) {
-        console.log('calcing FOV failed' + e)
-    }
-
-}
-
-function showSolve(show)
-{
-    document.getElementById('plate_solve_div').style.display = show ? 'inline' : 'none';
-}
-
-
-function toggleFS(fs)
-{
-    if(fs) {
-        document.documentElement.requestFullscreen({navigationUI:'hide'});
-    }
-    else {
-        document.exitFullscreen();
-    }
-}
-
-
-function plateSolve()
-{
-    var ra,de,fov,rad;
-    try {
-        ra = parseRA(document.getElementById('solver_ra').value);
-        de = parseDEC(document.getElementById('solver_de').value);
-        fov = parseFloat(document.getElementById('solver_fov').value);
-        rad = parseFloat(document.getElementById('solver_radius').value);
-    }
-    catch(e) {
-        alert('Invalid Inputs' + e)
-        return;
-    }
-    document.getElementById('solver_config').style.display = 'none';
-    document.getElementById('solver_status_div').style.display = 'inline';
-    document.getElementById('solver_status').innerHTML = 'Waiting...';
-    document.getElementById('solver_result').style.display = 'none';
-    var req = {
-        "fov" : fov,
-        "ra"  : ra,
-        "de"  : de,
-        "rad" : rad
-    };
-    restCall('post','/api/plate_solver',req,solveResult)
-}
-
-function solveResult(v)
-{
-    var status, jpeg = null;
-    if(v.solved) {
-        jpeg = v.result_image + '?' + Date.now();
-        status = 'Distance to target ' + v.distance_to_target.toFixed(2) + '°';
-    }
-    else {
-        status = v.error;
-    }
-    document.getElementById('solver_status').innerHTML = status;
-    if(jpeg) {
-        document.getElementById('solver_result_image').src = jpeg;
-    }
-    document.getElementById('solver_result').style.display = jpeg ? 'inline' : 'none';
-}
-
-function solverRestart()
-{
-    document.getElementById('solver_status_div').style.display='none';
-    document.getElementById('solver_config').style.display='inline';
-}
-
-
-window.onload = (event) => {
-  run();
-};
-
-window.onresize = onResize;
-
-
-</script> 
 <div id='video' style="position:absolute; left:0; top:0; z-index:-2"></div>
 <div id='thumb' style="display:none; position:absolute; right:0; top:0; z-index:-1;">
     <span id="thumb_video"><span>
@@ -914,7 +46,6 @@
     <tr class="dso_config stack_opt" ><td>Derotate Mirror</td><td><input id="stack_image_flip" type="checkbox" ></td><td>&nbsp;</td></tr>
     <tr class="dso_config stack_opt" ><td>Object ID</td><td><input oninput="updateRADE(this.value)" id="stack_object" type="text" value="" ></td><td>for example: M31, NGC457</td></tr>
     <tr class="dso_config stack_opt" ><td>Target</td><td>RA:<input id="stack_ra" type="text" ></td><td>DE:<input id="stack_de" type="text" ></td></tr>
-    <tr class="dso_config stack_opt" ><td>Geolocation</td><td>Lat:<input id="stack_lat" type="text" ></td><td>Lon:<input id="stack_lon" type="text" ></td></tr>
     <tr class="dso_config stack_opt" ><td>Darks</td><td><select id="stack_darks"></select></td><td>&nbsp;</td></tr>
     <tr class="dso_config stack_opt" ><td>Flats</td><td><select id="stack_flats"></select></td><td>&nbsp;</td></tr>
     <tr class="dso_config stack_opt" ><td>Dark Flats</td><td><select id="stack_dark_flats"></select></td><td>&nbsp;</td></tr>
@@ -961,7 +92,11 @@
         <button class="incdec_but" onclick="showConfig(false);">X</button>
     </span>
     <p>Format: <select id="stream_format"></select><button onclick="startStream()" >Stream</button></p>
-    <p><label for="FS_checked">Full screen</label><input id="FS_checked" type="checkbox" onchange="toggleFS(this.checked)" ></p>
+    <p>
+        <label for="FS_checked">Full screen</label><input id="FS_checked" type="checkbox" onchange="toggleFS(this.checked)" >
+        Lat:<input id="stack_lat" type="number" >
+        Lon:<input id="stack_lon" type="number" >
+    </p>
     <table>
     <thead>
         <tr>
@@ -996,5 +131,7 @@
         </div>
     </div>
 </div>
+<script src="/media/js/jsdb.js"></script>
+<script src="/media/js/code.js"></script>
 </body>
 </html>
diff --git a/www-data/media/css/style.css b/www-data/media/css/style.css
new file mode 100644
index 0000000..eb67640
--- /dev/null
+++ b/www-data/media/css/style.css
@@ -0,0 +1,75 @@
+    html {
+        overflow: scroll;
+        overflow-x: hidden;
+        scrollbar-width: none; /* Firefox */
+        -ms-overflow-style: none;
+    }
+    ::-webkit-scrollbar {
+        width: 0;
+    }
+    body, td { font-size: 5mm ; color:red ; font-family: sans; background-color:black }
+    a:link {color: red;}
+    a:visited { color: red; }
+    a:active { color:red; }
+    a:hover { color:red; }
+    img { padding:0; margin:0; }
+    button { border-radius:2mm; height:10mm; font-size:5mm ; text-align:center; vertical-align: middle; background-color:black; color:red; border: 2px solid red }
+    button:disabled {
+        color:#800000;
+    }
+    .slider { width: 100%; }
+    .slider_elem { background-color: transparent; }
+    .comp_but, .incdec_but { width: 10mm ; height:10mm; font-size:5mm ; padding: 0 }
+    .stretch_background {
+        background: url(/media/img/stretch.png) no-repeat center center;
+        background-size: 10mm 10mm;
+    }
+    .solve_background {
+        background: url(/media/img/solve.png) no-repeat center center;
+        background-size: 10mm 10mm;
+    }
+    .pause_background {
+        background: url(/media/img/pause.png) no-repeat center center;
+        background-size: 10mm 10mm;
+    }
+    .resume_background {
+        background: url(/media/img/resume.png) no-repeat center center;
+        background-size: 10mm 10mm;
+    }
+    .save_background {
+        background: url(/media/img/save.png) no-repeat center center;
+        background-size: 10mm 10mm;
+    }
+    .cancel_background {
+        background: url(/media/img/cancel.png) no-repeat center center;
+        background-size: 10mm 10mm;
+    }
+    .settings_background {
+        background: url(/media/img/settings.png) no-repeat center center;
+        background-size: 10mm 10mm;
+    }
+    #thumb_stream_video {
+        padding:0;
+        margin:0;
+    }
+    #live_stream_video {
+        padding:0;
+        margin:0;
+    }
+    #solver_result_image {
+        padding:0;
+        margin:0;
+    }
+    #thumb {
+        text-align:right;
+        width:100%
+        padding: 0;
+        margin:0;
+    }
+    #video {
+        text-align:center;
+        width:100%
+        padding: 0;
+        margin:0;
+    }
+
diff --git a/www-data/media/js/code.js b/www-data/media/js/code.js
new file mode 100644
index 0000000..3fbfcb4
--- /dev/null
+++ b/www-data/media/js/code.js
@@ -0,0 +1,851 @@
+
+var global_width = 0;
+var global_height = 0;
+var g_prev_high = -1;
+var g_prev_low = -1;
+var g_stacker_status = 'idle';
+var g_show_thumb_live = false;
+var g_stats = null;
+
+function parseRA(svalue)
+{
+    const re_float = /^(\d+\.\d+)$/;
+    const re_colon = /^(\d+):(\d+)(?::(\d+(.\d+)?))?$/;
+    const re_hms = /^(\d+)[hH \t]\s*(\d+)[mM'′]\s*(?:(\d+(.\d+)?)(?:s|S|′′|″|''))?$/;
+    const re_space = /^(\d+)\s+(\d+)(?:\s+(\d+(.\d+)?))?$/;
+    var res = svalue.match(re_float);
+    var deg = null;
+    if(res) {
+        deg = parseFloat(res[1]);
+        if(deg < 0 || deg > 360)
+            return null;
+        return deg;
+    }
+    res = svalue.match(re_colon) || svalue.match(re_hms) || svalue.match(re_space);
+    if(!res)
+        return null;
+    var h = parseInt(res[1]);
+    var m = parseInt(res[2]);
+    var s = 0;
+    if(res[3]) {
+        s = parseFloat(res[3]);
+    }
+    if(h  >= 24 || m >= 60 || s >= 60) {
+        return null
+    }
+    deg = 15 * (h + (60 * m + s) / 3600.0 );
+    return deg;
+}
+
+function parseDEC(svalue)
+{
+    const re_float = /^([+-−]?\d+.\d+?)$/;
+    const re_colon = /^([-+−]?)(\d+):(\d+)(?::(\d+(.\d+)?))?$/;
+    const re_dms = /^([-+−]?)(\d+)[dD° \t]\s*(\d+)[mM'′]\s*(?:(\d+(.\d+)?)(?:s|S|″|′′|''))?$/;
+    const re_space = /^([-+−]?)(\d+)\s+(\d+)(?:\s+(\d+(.\d+)?))?$/;
+    var res = svalue.match(re_float)
+    if(res) {
+        var deg = parseFloat(res[1])
+        if(deg < -90 || deg > 90)
+            return null;
+        return deg;
+    }
+    res = svalue.match(re_colon) || svalue.match(re_dms) || svalue.match(re_space);
+    if(!res)
+        return null;
+    var sig = (res[1] == '-' || res[1] == '−')? -1.0 : 1.0;
+    var d = parseInt(res[2]);
+    var m = parseInt(res[3]);
+    var s = 0;
+    if(res[4]) {
+        s = parseFloat(res[3]);
+    }
+    if(d  > 90 || m >= 60 || s >= 60)
+        return null;
+    return sig*(d + (60 * m + s) / 3600.0);
+}
+
+function restCall(method,url,request,on_response,on_error = alert)
+{
+    var xhr = new XMLHttpRequest()
+    xhr.open(method,url,true)
+    xhr.onload = function() {
+        var response;
+        try {
+            response = JSON.parse(xhr.responseText);
+        }
+        catch(e) { 
+            on_error(e); 
+            return;
+        }
+        if('status' in response && response.status == 'fail') {
+            on_error(response.error);
+            return;
+        }
+        on_response(response)
+    };
+    if(request != null) {
+        xhr.setRequestHeader('Content-Type','application/json');
+        xhr.send(JSON.stringify(request));
+    }
+    else {
+        xhr.send();
+    }
+}
+
+function run()
+{
+    restCall("get","/api/camera",null,listCameras);
+    if(navigator.geolocation) {
+        navigator.geolocation.getCurrentPosition((pos)=>{
+            document.getElementById("stack_lat").value=pos.coords.latitude.toFixed(2);
+            document.getElementById("stack_lon").value=pos.coords.longitude.toFixed(2);
+        });
+    }
+}
+
+
+function listCameras(cameras)
+{
+    var sel = document.getElementById('camera_select')
+    for(var i=0;i<cameras.length;i++) {
+        var option = document.createElement("option");
+        option.text = cameras[i].name
+        option.value = cameras[i].id.toString()
+        sel.add(option)
+    }
+    restCall("get","/api/camera/status",null,checkOpenStatus);
+}
+
+function updateStackSelect()
+{
+    var type = getVal('type');
+    var elements = document.getElementsByClassName('dso_config');
+    var new_style = type == 'dso' ? '' : 'none';
+    for(var i=0;i<elements.length;i++) {
+        elements[i].style.display = new_style;
+    }
+}
+
+function checkOpenStatus(st)
+{
+    if(st.status == 'closed') {
+        return;
+    }
+    else if(st.status == 'open') {
+        loadFormats();
+        loadControls();
+    }
+    else if(st.status == 'streaming') {
+        global_width = st.width;
+        global_height = st.height;
+        loadFormats();
+        loadControls();
+        showConfig(false);
+        showLiveVideo();
+        restCall('get','/api/stacker/status',null, (d)=> {
+            changeStackerStatus(d.status);
+        });
+    }
+}
+
+function changeStackerStatus(new_status)
+{
+    var ui_ctl = {
+        stack: true,
+        pause: false,
+        cancel: false,
+        resume: false,
+        solve: true,
+        save: false,
+        live: false,
+        pp: false,
+        stats: false
+    };
+    if(new_status == 'idle') {
+        if(g_stacker_status != 'idle') {
+            showLiveVideo();
+            showThumbLive(false);
+        }
+        ui_ctl.stack = true;
+        ui_ctl.pause = false;
+        ui_ctl.resume = false;
+        ui_ctl.save=false;
+        ui_ctl.cancel=false;
+        ui_ctl.pp=false;
+        ui_ctl.live = false;
+        ui_ctl.stats = false;
+    }
+    else if(new_status =='stacking') {
+        if(g_stacker_status == 'idle') {
+            showStackedVideo(true);
+        }
+        ui_ctl.stack = false;
+        ui_ctl.cancel = true;
+        ui_ctl.pause = true;
+        ui_ctl.resume = false;
+        ui_ctl.save = true;
+        ui_ctl.pp = true;
+        ui_ctl.live = true;
+        ui_ctl.stats = true;
+    }
+    else if(new_status == 'paused') {
+        if(g_stacker_status == 'idle') {
+            showStackedVideo(true);
+        }
+        ui_ctl.stack = false;
+        ui_ctl.pause = false;
+        ui_ctl.cancel = true;
+        ui_ctl.resume = true;
+        ui_ctl.save = true;
+        ui_ctl.pp = true;
+        ui_ctl.live = true;
+        ui_ctl.stats = true;
+    }
+    else {
+        alert('Internal error invalud status' + new_status);
+    }
+    for(var name in ui_ctl) {
+        var st = ui_ctl[name] ? 'inline' : 'none';
+        document.getElementById('stacking_ui_' + name).style.display = st;
+    }
+    if(ui_ctl.stats) {
+        if(!g_stats) {
+            g_stats = new EventSource("/api/updates");
+            g_stats.onmessage = (e) => {
+                updateStackerStats(e.data);
+            };
+        }
+    }
+    else {
+        if(g_stats) {
+            g_stats.close();
+            g_stats = null;
+        }
+    }
+    g_stacker_status = new_status;
+}
+
+function updateStackerStats(e) {
+    var stats = JSON.parse(e);
+    document.getElementById('stats_info').innerHTML = stats.stacked + '/' + stats.missed + '/' + stats.dropped;
+}
+
+function loadFormats()
+{
+    document.getElementById('open_camera').style.display='none';
+    document.getElementById('std_controls').style.display='inline';
+    showConfig(true);
+    restCall('get','/api/camera/formats', null, (formats)=> {
+        var sel = document.getElementById('stream_format')
+        for(var i=sel.length-1;i>=0;i--) {
+            sel.options.remove(i);
+        }
+        for(var i=0;i<formats.length;i++) {
+            var option = document.createElement("option");
+            option.text = formats[i].format_id
+            option.value = formats[i].format_id
+            sel.add(option)
+        }
+    });
+}
+
+function openCamera()
+{
+    var cam_id = document.getElementById('camera_select').value;
+    restCall('post','/api/camera', { operation: 'open',id:parseInt(cam_id) }, function(msg) {
+        loadFormats();
+        loadControls();
+    });
+}
+
+function updateControl(optid,value)
+{
+    restCall('post','/api/camera/option/' + optid,{'value':value},(e)=>{
+        enableNumControl(optid,false);
+        if(optid == 'auto_exp') {
+            enableNumControl('exp',value ? false : true);
+        }
+        else if(optid == 'auto_wb') {
+            enableNumControl('wb',value ? false : true);
+        }
+    });
+}
+function updateBoolControl(optid,value)
+{
+    updateControl(optid,value ? 1 : 0);
+}
+
+function enableNumControl(optid,val)
+{
+    var ctl = document.getElementById('control_button_' + optid);
+    if(ctl)
+        ctl.disabled = !val;
+}
+
+function updateNumControl(optid)
+{
+    var val = document.getElementById('control_opt_' + optid).value;
+    val = parseFloat(val);
+    updateControl(optid,val);
+    enableNumControl(optid,false);
+    return false;
+}
+
+
+function prepareControls(ctls)
+{
+    var controls = document.getElementById('cam_controls');
+    var controls_str = ''
+    for(var i=0;i<ctls.length;i++) {
+        var ctl = ctls[i];
+        var unit='';
+        if(ctl.type == 'percent')
+            unit='(%)';
+        else if(ctl.type == 'msec')
+            unit='(ms)';
+        else if(ctl.type == 'kelvin')
+            unit='(K)';
+        var control_str = `<td>${ctl.name}${unit}</td>`;
+        if(ctl.type == 'bool') {
+            var checked = ctl.cur != 0 ? 'checked' : '';
+            control_str += `<td><input type="checkbox" ${checked} onchange="updateBoolControl('${ctl.option_id}',this.checked ? 1 : 0);" /></td>`;
+            control_str += '<td>&nbsp;</td>';
+            control_str += '<td>&nbsp;</td>';
+            control_str += `<td>${ctl.default != 0 ? 'on' : 'off'}</td>`;
+        }
+        else {
+            control_str +=`<td><form onsubmit="return updateNumControl('${ctl.option_id}');" ><input id="control_opt_${ctl.option_id}" min="${ctl.min}" max="${ctl.max}" step="${ctl.step}" type="number" value="${ctl.cur}" oninput="enableNumControl('${ctl.option_id}',true);"  /></form></td>`;
+            control_str += `<td><button disabled id="control_button_${ctl.option_id}" onclick="updateNumControl('${ctl.option_id}');" >set</button></td>`;
+            control_str +=`<td>[${ctl.min},${ctl.max}]</td>`;
+            control_str +=`<td>${ctl.default}</td>`;
+        }
+        controls_str += '<tr>' + control_str + '</tr>\n';
+    }
+    controls.innerHTML = controls_str;
+}
+
+function loadControls()
+{
+    restCall('get','/api/camera/options',null,prepareControls);
+}
+
+function calcImgSize()
+{
+    var W = window.innerWidth;
+    var H = window.innerHeight;
+    var img_H,img_W;
+    var p_top=0,p_left=0;
+    var w2h = global_width/global_height
+    if(W/H > w2h) {
+        img_H = H;
+        img_W = H*w2h;
+        p_left = (W - img_W)/2;
+    }
+    else {
+        img_W = W;
+        img_H = W/w2h;
+        p_top = (H - img_H) / 2;
+    }
+    return [img_W,img_H,p_left,p_top]
+}
+
+function updateCalibFramesById(data,elemid)
+{
+    var sel = document.getElementById(elemid);
+    var selected = sel.value;
+    for(var i=sel.length-1;i>=0;i--) {
+        sel.options.remove(i);
+    }
+    var found=false;
+    for(var i=-1;i<data.length;i++) {
+        var fid = 'N/A';
+        var width=global_width;
+        var height=global_height;
+        if(i >= 0) {
+            fid = data[i].id;
+            width = data[i].width;
+            height = data[i].height;
+        }
+        if(width != global_width || height != global_height)
+            continue;
+        var option = document.createElement("option");
+        option.text = fid;
+        option.value = fid;
+        sel.add(option)
+        if(fid == selected)
+            found=true;
+    }
+    sel.value = selected;
+}
+
+function updateCalibFrames(data)
+{
+    updateCalibFramesById(data,'stack_darks');
+    updateCalibFramesById(data,'stack_flats');
+    updateCalibFramesById(data,'stack_dark_flats');
+}
+
+function loadCalibFrames()
+{
+    restCall('get','/data/calibration/index.json',null,updateCalibFrames);
+}
+
+function showStackedVideo(stacked_on)
+{
+    if(stacked_on) {
+        showStream('stacked')
+    }
+    else
+        showStream('live')
+}
+
+function showStream(name)
+{
+    document.getElementById('video').innerHTML = `<img id="live_stream_video" alt="streaming video" src="/api/video/${name}" />`;
+    onResize(null);
+}
+
+function toggleThumbLive()
+{
+    showThumbLive(!g_show_thumb_live);
+}
+
+function showThumbLive(v)
+{
+    var thumb = document.getElementById('thumb');
+    var thumb_video = document.getElementById('thumb_video');
+    g_show_thumb_live = v;
+    var live_button = document.getElementById('stacking_ui_live');
+    if(v) {
+        thumb_video.innerHTML = `<img id="thumb_stream_video" alt="streaming video" src="/api/video/live" />`;
+        thumb.style.display = 'inline';
+        live_button.innerHTML = 'X';
+        onResize(null);
+    }
+    else {
+        thumb_video.innerHTML ='';
+        thumb.style.display = 'none';
+        live_button.innerHTML = 'L';
+    }
+}
+
+function showLiveVideo()
+{
+    showStream('live');
+}
+
+function onResize(ev)
+{
+    var video = document.getElementById('live_stream_video');
+    var size = calcImgSize();
+    if(video) {
+        video.style.width = size[0] + 'px';
+        video.style.height = size[1] + 'px';
+        video.style.marginLeft = size[2] + 'px';
+        video.style.marginTop  = size[3] + 'px';
+    }
+    var thumb = document.getElementById('thumb_stream_video')
+    if(thumb) {
+        thumb.style.width = Math.round(size[0] / 4) + 'px';
+        thumb.style.height = Math.round(size[1] / 4) + 'px';
+        thumb.style.marginRight = '0px';
+        thumb.style.marginTop  = '0px';
+    }
+    var solved = document.getElementById('solver_result_image');
+    if(solved) {
+        solved.style.width = Math.round(size[0] / 2) + 'px';
+        solved.style.height = Math.round(size[1] / 2) + 'px';
+    }
+}
+
+function startStream()
+{
+    var format_id = document.getElementById('stream_format').value;
+    restCall('post','/api/camera/stream',{op:'start',format_id:format_id},(r)=>{
+        global_width = r.width;
+        global_height = r.height;
+        showLiveVideo();
+        changeStackerStatus('idle');
+    });
+    showConfig(false);
+}
+
+function showStack(v)
+{
+    if(v) {
+        loadCalibFrames();
+    }
+	document.getElementById('stack').style.display = v ? 'inline' : 'none';
+}
+
+function showPP(v)
+{
+	document.getElementById('pp_control').style.display = v ? 'inline' : 'none';
+}
+
+function showConfig(v)
+{
+	document.getElementById('config').style.display = v ? 'inline' : 'none';
+}
+
+function getVal(name)
+{
+    return document.getElementById('stack_' + name).value;
+}
+
+function getBVal(name)
+{
+    return document.getElementById('stack_' + name).checked;
+}
+
+function getPVal(name)
+{
+    return document.getElementById('stack_' + name).value * 0.001;
+}
+
+function ctlStack(status)
+{
+    restCall('post','/api/stacker/control',{operation:status},(s)=> {
+        if(status == 'save' || status == 'cancel') {
+            changeStackerStatus('idle');
+        }
+        else if(status == 'resume') {
+            changeStackerStatus('stacking');
+        }
+        else if(status =='pause') {
+            changeStackerStatus('paused');
+        }
+    });
+}
+
+function setPPVal(name,val)
+{
+    document.getElementById('stack_stretch_' + name + '_disp').innerHTML = val.toFixed(3);
+}
+
+
+
+function setPPSlider(name,val)
+{
+    document.getElementById('stack_stretch_' + name).value = Math.round(val*1000);
+    setPPVal(name,val);
+}
+
+function updatePPSliders(data)
+{
+    setPPSlider('low',data.cut);
+    setPPSlider('high',data.gain);
+    setPPSlider('gamma',data.gamma);
+    g_prev_low = data.cut;
+    g_prev_high = data.gain;
+    updatePP();
+}
+
+function setDefaultPPSliders(e=null)
+{
+    updatePPSliders({
+        gamma: 2.4,
+        cut : 0.0,
+        gain : 1.0
+    });
+}
+
+function updateAutoPP()
+{
+    var auto_pp = getBVal("auto_stretch");
+    if(auto_pp) {
+        document.getElementById('dynamic_parameters').style.display='none';
+        updatePP();
+        return;
+    }
+    document.getElementById('dynamic_parameters').style.display='inline';
+    restCall('get','/data/stretch.json',null,updatePPSliders,setDefaultPPSliders);
+}
+
+function updatePPLow()
+{
+    g_prev_low = getPVal('stretch_low');
+    g_prev_high = getPVal("stretch_high");
+    updatePP();
+}
+
+function updatePPHigh()
+{
+    var new_high = getPVal("stretch_high");
+    if(g_prev_low != -1 && g_prev_high != -1) {
+        var new_low = Math.min(Math.max(g_prev_low,0.8),g_prev_low * (new_high / g_prev_high));
+        setPPSlider('low',new_low);
+    }
+    else {
+        g_prev_high = new_high;
+        g_prev_low = getPVal("stretch_low");
+    }
+    updatePP();
+}
+
+function updatePP()
+{
+
+    var config={
+        auto_stretch:       getBVal("auto_stretch"),
+        stretch_low:        getPVal('stretch_low'),
+        stretch_high:       getPVal('stretch_high'),
+        stretch_gamma:      getPVal('stretch_gamma'),
+    };
+    setPPVal('low',config.stretch_low);
+    setPPVal('high',config.stretch_high);
+    setPPVal('gamma',config.stretch_gamma);
+    restCall('post','/api/stacker/stretch',config,(e)=>{
+    });
+}
+
+function startStack()
+{
+    var darks = getVal('darks');
+    if(darks == 'N/A') {
+        darks = null;
+    }
+    var flats = getVal('flats');
+    if(flats == 'N/A') {
+        flats = null;
+    }
+    var dark_flats = getVal('dark_flats');
+    if(dark_flats == 'N/A') {
+        dark_flats = null;
+    }
+    var ra=parseRA(getVal("ra"));
+    var de=parseDEC(getVal("de"));
+    var lat = parseFloat(getVal("lat"));
+    var lon = parseFloat(getVal("lon"));
+    var field_derotation = getBVal("field_derotation");
+    if(field_derotation) {
+        if(isNaN(lat) || isNaN(lon)) {
+            alert('Need Geolocation for derotation support\n(see settings menu)');
+            return;
+        }
+        if(ra==null || de==null) {
+            alert('Need RA, DE for derotation');
+            return;
+        }
+    }
+    if(isNaN(lat))
+        lat = 0;
+    if(isNaN(lon))
+        lon = 0;
+
+    var name = getVal('name').trim();
+    var obj = getVal('object').trim();
+
+    var type = getVal('type');
+    var calib = type != 'dso';
+    if(!calib) {
+        if(name == '')
+            name = obj;
+        else if(obj != '')
+            name = name + '_' + obj;
+    }
+    name = name.replace(/ /g,'_');
+    const name_pat = /^[A-Za-z0-9_.\-]*$/g;
+    if(!name.match(name_pat)) {
+        alert('Name and Object should contain only English letters, digits, "_", "-" and "."')
+        return;
+    }
+    if(calib && name=='') {
+        alert('Provide name for calibration frame');
+        return;
+    }
+
+    var config={
+        name:               name,
+        save_data:          getBVal("save_data"),
+        field_derotation:   field_derotation,
+        image_flip:         getBVal("image_flip"),
+        auto_stretch:       getBVal("auto_stretch"),
+        stretch_low:        getPVal('stretch_low'),
+        stretch_high:       getPVal('stretch_high'),
+        stretch_gamma:      getPVal('stretch_gamma'),
+        type:               type,
+        location : {
+            lat:            lat,
+            lon:            lon,
+        },
+        target: {
+            ra:             ra,
+            de:             de,
+        },
+        darks : darks,
+        flats : flats,
+        dark_flats : dark_flats
+    };
+    restCall('post','/api/stacker/start',config,(e)=>{
+        changeStackerStatus('stacking');
+        showStack(false);
+    });
+}
+
+function updateRADE(name)
+{
+    updateRADEFor(name,'stack');
+}
+function updateSolverRADE(name)
+{
+    updateRADEFor(name,'solver');
+}
+
+function updateRADEFor(name,target_id)
+{
+    var coord=['','']
+    name = name.toUpperCase();
+    if(name in jsdb) {
+        coord = jsdb[name]
+    }
+    document.getElementById(target_id + '_ra').value = coord[0];
+    document.getElementById(target_id + '_de').value = coord[1];
+}
+
+function recalcFOV()
+{
+    try {
+        var pixel_size = parseFloat(document.getElementById('solver_pixel_size').value);
+        var FL = parseFloat(document.getElementById('solver_focal_length').value);
+        var fov = global_height * pixel_size * 1e-3 / FL * 180 / 3.14159;
+        document.getElementById('solver_fov').value = fov.toFixed(3);
+    }
+    catch(e) {
+        console.log('calcing FOV failed' + e)
+    }
+
+}
+
+function showSolve(show)
+{
+    document.getElementById('plate_solve_div').style.display = show ? 'inline' : 'none';
+}
+
+
+function toggleFS(fs)
+{
+    if(fs) {
+        document.documentElement.requestFullscreen({navigationUI:'hide'});
+    }
+    else {
+        document.exitFullscreen();
+    }
+}
+
+
+function plateSolve()
+{
+    var ra,de,fov,rad,lat,non;
+    try {
+        ra = parseRA(document.getElementById('solver_ra').value);
+        de = parseDEC(document.getElementById('solver_de').value);
+        fov = parseFloat(document.getElementById('solver_fov').value);
+        rad = parseFloat(document.getElementById('solver_radius').value);
+        lat = parseFloat(getVal("lat"));
+        lon = parseFloat(getVal("lon"));
+        if(isNaN(lat))
+            lat = null;
+        if(isNaN(lon))
+            lon = null;
+    }
+    catch(e) {
+        alert('Invalid Inputs' + e)
+        return;
+    }
+    document.getElementById('solver_config').style.display = 'none';
+    document.getElementById('solver_status_div').style.display = 'inline';
+    document.getElementById('solver_status').innerHTML = 'Waiting...';
+    document.getElementById('solver_result').style.display = 'none';
+    var req = {
+        "fov" : fov,
+        "ra"  : ra,
+        "de"  : de,
+        "rad" : rad,
+        "lat" : lat,
+        "lon" : lon
+    };
+    restCall('post','/api/plate_solver',req,solveResult)
+}
+
+function formatAngle(deg,as_hours)
+{
+    if(as_hours) {
+        deg = deg / 15;
+        sep = "h";
+    }
+    else {
+        sep = "\u00b0";
+    }
+	var direction = deg >= 0 ? '+' : '-';
+	deg = Math.abs(deg);
+	var ideg = Math.floor(deg);
+	var min = 60*(deg - ideg);
+	var imin = Math.floor(min);
+	var sec = 60*(min - imin);
+    var msg = direction + ideg + sep + imin + "'";
+    if(as_hours)
+	    msg += Math.floor(sec) + "''";
+    return msg;
+}
+
+function formatTableRow(a)
+{
+    var res = '<tr>';
+    for(var i=0;i<a.length;i++) {
+        res += '<td>' + a[i] + '</td>';
+    }
+    res += '</tr>\n';
+    return res;
+}
+
+function solveResult(v)
+{
+    var status, jpeg = null;
+    if(v.solved) {
+        jpeg = v.result_image + '?' + Date.now();
+        status = 'Distance to target ' + v.distance_to_target.toFixed(2) + '°';
+        var delta_ra_hms = formatAngle(v.delta_ra,true);
+        var delta_ra_dms = formatAngle(v.delta_ra,false);
+        var delta_ra_deg = v.delta_ra.toFixed(2) + "\u00b0";
+        var delta_de_dms = formatAngle(v.delta_de,false);
+        var delta_de_deg = v.delta_de.toFixed(2) + "\u00b0";
+        status += '<table>'
+        status += formatTableRow(['∆RA',delta_ra_dms,delta_ra_deg,delta_ra_hms,'∆DEC',delta_ra_dms,delta_ra_deg]);
+        if(v.delta_az) {
+            var delta_az_dms = formatAngle(v.delta_az,false);
+            var delta_az_deg = v.delta_az.toFixed(2) + "\u00b0";
+            var delta_alt_dms = formatAngle(v.delta_alt,false);
+            var delta_alt_deg = v.delta_alt.toFixed(2) + "\u00b0";
+            status += formatTableRow(['∆ALT',delta_alt_dms,delta_alt_deg,'&nbsp;','∆AZ',delta_az_dms,delta_az_deg]);
+        }
+        status += '</table>'
+        if(!v.delta_az) {
+            status += 'for ∆Alt/∆AZ provide geolocation in settings';
+        }
+    }
+    else {
+        status = v.error;
+    }
+    document.getElementById('solver_status').innerHTML = status;
+    if(jpeg) {
+        document.getElementById('solver_result_image').src = jpeg;
+    }
+    document.getElementById('solver_result').style.display = jpeg ? 'inline' : 'none';
+}
+
+function solverRestart()
+{
+    document.getElementById('solver_status_div').style.display='none';
+    document.getElementById('solver_config').style.display='inline';
+}
+
+
+window.onload = (event) => {
+  run();
+};
+
+window.onresize = onResize;
+
+