livemap.js 18514
try {
  var check = $(document);
} catch (e) {
  document.addEventListener("DOMContentLoaded", function(event) {
    document.getElementById('map').innerHTML = '<br /><br />In order to use this functionality, there must be an internet connection.<br /><br/><a href="livemap.html">retry</a><br /><br/><a href="index.html">go back</a>';
  });
}

$(document).ready(function(){

  var map = L.map('map', { attributionControl: false, zoomControl: false });
  map.on('mousedown touchstart',function () { follow=false; });

  L.control.scale().addTo(map);
  L.control.attribution({prefix:false}).addTo(map);

  var osm = L.tileLayer('https://{s}.tile.openstreetmap.de/tiles/osmde/{z}/{x}/{y}.png', {
    attribution: '<div><a href="https://leafletjs.com/">Leaflet</a> &middot; Map: <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a></div>',
    minZoom: 1,
    maxZoom: 19
  });
  var esri = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
    attribution: '<div><a href="https://leafletjs.com/">Leaflet</a> &middot; Map: <a href="https://www.esri.com/">Esri</a> &middot; Earthstar Geographics</div>',
    minZoom: 1,
    maxZoom: 20
  });

  var basemap = 'osm';
  osm.addTo(map);

  basemap_change = function () {
      if (basemap == 'osm') {
          map.removeLayer(osm);
          map.addLayer(esri);
          basemap = 'esri';
      } else {
          map.removeLayer(esri);
          map.addLayer(osm);
          basemap = 'osm';
      }
  };

  if(mapcenter) map.setView(mapcenter, 5); 
  else map.setView([51.163361,10.447683], 5); // Mitte DE

var reddot = '<span class="ldot rbg"></span>';
var yellowdot = '<span class="ldot ybg"></span>';
var greendot = '<span class="ldot gbg"></span>';
var lastframe = 0;

$('#map .leaflet-control-container').append(L.DomUtil.create('div', 'leaflet-top leaflet-center leaflet-header'));
var header = '';
header += '<div id="sonde_main"><b>rdzTTGOSonde LiveMap</b><br />🎈 <b><span id="sonde_id"></span> - <span id="sonde_freq"></span> MHz - <span id="sonde_type"></span></b></div>';
header += '<div id="sonde_detail"><span id="sonde_alt"></span>m | <span id="sonde_climb"></span>m/s | <span id="sonde_speed"></span>km/h | <span id="sonde_dir"></span>°<br /><span id="sonde_time"></span> | -<span id="sonde_rssi"></span>dBm</div>';
header += '<div id="sonde_status"><span id="sonde_statbar"></span></div>';
header += '<div id="settings"><br /><b>Prediction-Settings</b><br />';

header += '<label for="burst">Burst at:</label><input type="text" id="burst" maxlength="5" value="..."  /> m<br />';
header += '<label for="overwrite_descend">Descending:</label><input type="text" id="overwrite_descend" maxlength="2" value="..."  /> m/s<br />';
header += '<label for="overwrite_descend_till">Use this descending until:</label><input type="text" id="overwrite_descend_till" maxlength="5" value="..."  /> m<br />';
header += '<small>after the transmitted descend will be used</small>';
header += '<div id="submit"><input type="button" value="save" onclick="settings_save();"/>&nbsp;&nbsp;&nbsp;<input type="button" id="submit" value="reset" onclick="settings_reset();"/></div>';
header += '</div>';
$('.leaflet-header').append(header);


$('#map .leaflet-control-container').append(L.DomUtil.create('div', 'leaflet-bottom leaflet-center leaflet-footer'));
var footer = '';
footer += '<div id="gps_main"><b>Direction: </b><span class="gps_dir">...</span>°<br /><b>Distance: </b><span class="gps_dist">...</span>m</div>';
$('.leaflet-footer').append(footer);

var statbar = '';
headtxt = function(data,stat) {
  //console.log(data);
  var staticon = (stat == '1')?greendot:yellowdot; 
  statbar = staticon + statbar;
  if ((statbar.length) > 10*greendot.length) { statbar = statbar.substring(0,10*greendot.length); }
  if (data.id && data.vframe != lastframe ) {
    lastframe = data.vframe;
    $('#sonde_id').html(data.id);
    $('#sonde_alt').html(data.alt);
    $('#sonde_climb').html(data.climb);
    $('#sonde_speed').html( mr(data.speed * 3.6 * 10) / 10 );
    $('#sonde_dir').html(data.dir);
    $('#sonde_time').html(new Date(data.time * 1000).toISOString());
    $('#sonde_rssi').html(data.rssi / 2 );
    $('#sonde_detail').show();
  } else {
    if (!data.id) {
    $('#sonde_id').html(data.launchsite.trim());
    // $('#sonde_detail').hide();
    }
  }
  $('#sonde_freq').html(data.freq);
  $('#sonde_type').html(data.type);
  $('#sonde_statbar').html('&nbsp;'+statbar);
};

  map.addControl(new L.Control.Button([ { position: 'topleft', text: '🔙', href: 'index.html' } ]));
  
  L.control.zoom({ position:'topleft' }).addTo(map);

  map.addControl(new L.Control.Button([ { position: 'topleft', text: '🗺️', href: 'javascript:basemap_change();' } ]));

  map.addControl(new L.Control.Button([ { position: 'topright', id: "status", text: '', href: 'javascript:get_data();' } ]));

  map.addControl(new L.Control.Button([
    { position:'topright', text: '🎈', href: 'javascript:show(marker,\'marker\');' },
    { text: '〰️', href: 'javascript:show_line();' },
    { text: '💥', href: 'javascript:show(marker_burst,\'burst\');' },
    { text: '🎯', href: 'javascript:show(marker_landing,\'landing\');' }
  ]));
  
  map.addControl(new L.Control.Button([ { position:'topright', text: '⚙️', href: 'javascript:show_settings();' } ]));
  
    
  show = function(e,p) {
    if (p == 'landing') { get_predict(last_data); }
    if (e) {
      map.closePopup();
      map.setView(map._layers[e._leaflet_id].getLatLng());
      map._layers[e._leaflet_id].openPopup();
      follow = p;
    }
  };


  getTwoBounds = function (a,b) {
    var sW = new L.LatLng((a._southWest.lat > b._southWest.lat)?b._southWest.lat:a._southWest.lat, (a._southWest.lng > b._southWest.lng)?b._southWest.lng:a._southWest.lng);
    var nE = new L.LatLng((a._northEast.lat < b._northEast.lat)?b._northEast.lat:a._northEast.lat, (a._northEast.lng < b._northEast.lng)?b._northEast.lng:a._northEast.lng);

    return new L.LatLngBounds(sW, nE);
  };

  show_line = function() {
      $('.i_position, .i_landing').remove();
      map.closePopup();
      if (line._latlngs.length != 0 && line_predict._latlngs.length != 0) {
        map.fitBounds(getTwoBounds(line.getBounds(),line_predict.getBounds()));
      } else if (line._latlngs.length != 0) {
        map.fitBounds(line.getBounds());
      } else if (line_predict._latlngs.length != 0) {
        map.fitBounds(line_predict.getBounds());
      }
  };



  last_data = false;
  follow = 'marker';

  marker_landing = false;
  icon_landing = L.divIcon({className: 'leaflet-landing'});
  dots_predict = [];
  line_predict = L.polyline(dots_predict,{color: 'yellow'}).addTo(map);
  marker_burst = false;
  icon_burst = L.divIcon({className: 'leaflet-burst'});

  marker = false;
  dots = [];
  line = L.polyline(dots).addTo(map);

  draw = function(data) {
    var stat;
    //console.log(data);
    if (data.id) {
      // data.res: 0: ok  1: no rx (timeout), 2: crc err, >2 some other error
      if ((data.lat != '0.000000' && data.lon != '0.000000') && (lastframe != 0)) { //JSON.stringify(data) !=  JSON.stringify(last_data)) ) {
        var location = [data.lat,data.lon,data.alt];
        if (!marker) {
          map.setView(location, 14);
          marker = L.marker(location).addTo(map)
          .bindPopup(poptxt('position',data),{closeOnClick:false, autoPan:false}).openPopup();
          get_predict(data);
        } else {
          marker.slideTo(location, {
              duration: 500,
              keepAtCenter: (follow=='marker')?true:false
          })
          .setPopupContent(poptxt('position',data));
          if (last_data.id != data.id) {
            storage_remove();
            dots = [];
            get_predict(data);
          }
        }
        dots.push(location);
        line.setLatLngs(dots);
      }
      if (data.res == 0) {
        storage_write(data);
        $('#status').html(greendot);
        stat = 1;
      }
      else {
        $('#status').html(yellowdot);
        stat = 0;
      }
      headtxt(data,stat);
      last_data = data;
    } else {
      $('#status').html(yellowdot);
      headtxt(data,0);
    }
  };


  marker_gps = false;
  icon_gps = L.divIcon({className: 'leaflet-gps'});
  circ_gps = false;

  gps = function(e) {
    gps_location = [e.lat,e.lon];
    gps_accuracy = e.hdop*2;

    if (last_data && last_data.lat != '0.000000') {
      if ($('.leaflet-footer').css('display') == 'none') { $('.leaflet-footer').show(); }

      var distance = Math.round(map.distance(gps_location,[last_data.lat, last_data.lon]));
      distance = (distance > 1000)?(distance / 1000) + 'k':distance;
      $('.leaflet-footer .gps_dist').html(distance);

      $('.leaflet-footer .gps_dir').html( bearing(gps_location,[last_data.lat, last_data.lon]) );
    }

    if (!marker_gps) {
      map.addControl(new L.Control.Button([{ position: 'topleft', text: '🛰️', href: 'javascript:show(marker_gps,\'gps\');' }]));

      marker_gps = L.marker(gps_location,{icon:icon_gps}).addTo(map)
      .bindPopup(poptxt('gps',e),{closeOnClick:false, autoPan:false});
      circ_gps = L.circle(gps_location, gps_accuracy).addTo(map);
    } else {
      marker_gps.slideTo(gps_location, {
          duration: 500,
          keepAtCenter: (follow=='gps')?true:false
      })
      .setPopupContent(poptxt('gps',e));
      circ_gps.slideTo(gps_location, { duration: 500 });
      circ_gps.setRadius(gps_accuracy);
    }
  };

  get_data = function() {
      $('#status').html(reddot);
      $.ajax({url: 'live.json', success: (function( data ) {
        if (typeof data != "object") { data = $.parseJSON(data); }
        //console.log(data);
        if (data.sonde) {
          draw(data.sonde);
        } else {
          setTimeout(function() {$('#status').html(yellowdot);},100);
        }
        if (data.gps) {
          gps(data.gps);
        }
        }),
        timeout: 1000}
     );
  };
  
  storage = (typeof(Storage) !== "undefined")?true:false;
  
  settings_std = {
    burst: 32500,
    overwrite_descend: 6,
    overwrite_descend_till: 12000
  };

  settings_read = function() {
    if (storage) {
      if (sessionStorage.settings) {
        return JSON.parse(sessionStorage.settings); 
      } else {
        settings_write(settings_std);
        return settings_std;
      }
    } else {
      return settings_std;
    }
    return false;
  };
  
  settings_write = function (data) {
    if (storage) { 
      sessionStorage.settings = JSON.stringify(data);
      settings = data;
    }
  };
  
  settings = settings_read();
  
  settings_save = function() {
    settings.burst = parseInt($('#settings #burst').val());
    settings.overwrite_descend = parseInt($('#settings #overwrite_descend').val());
    settings.overwrite_descend_till = parseInt($('#settings #overwrite_descend_till').val());
    if (Number.isInteger(settings.burst) && Number.isInteger(settings.overwrite_descend) && Number.isInteger(settings.overwrite_descend_till)) {
      settings_write(settings);
      $("#settings").slideUp();
      get_predict(last_data);
    } else {
      alert('Error: only numeric values allowed!');
    }
  };
  
  settings_reset = function() {
    if (confirm('Reset to default?')) {
      settings_write(settings_std);
      show_settings();
    }
  };

  show_settings = function() {
    $('#settings #burst').val(settings.burst);
    $('#settings #overwrite_descend').val(settings.overwrite_descend);
    $('#settings #overwrite_descend_till').val(settings.overwrite_descend_till);
    $("#settings").slideToggle();
  };

  predictor = false;
  get_predict = function(data) {
    if (!data) { return; }
    var ascent = (data.climb > 0)? data.climb : 15;
    var descent = (data.climb > 0)? settings.overwrite_descend : data.climb * -1;

    var burst;
    if (data.climb > 0) {
      burst = (data.alt > settings.burst )?data.alt + 100 : settings.burst;
    } else {
      burst = parseInt(data.alt) + 7;
      if (data.alt > settings.overwrite_descend_till ) { descent = settings.overwrite_descend; }
    }

    var m = new Date();
    var datetime = m.getUTCFullYear() + "-" + az(m.getUTCMonth()+1) + "-" + az(m.getUTCDate()) + "T" +
      az(m.getUTCHours()) + ":" + az(m.getUTCMinutes()) + ":" + az(m.getUTCSeconds()) + "Z";
    var url = 'https://predict.cusf.co.uk/api/v1/';
    url += '?launch_latitude='+data.lat + '&launch_longitude='+tawhiri_lon(data.lon);
    url += '&launch_altitude='+data.alt + '&launch_datetime='+datetime;
    url += '&ascent_rate='+ascent + '&burst_altitude=' + burst + '&descent_rate='+descent;

    $.getJSON(url, function( prediction ) {
      draw_predict(prediction,data);
    });
  };

  draw_predict = function(prediction,data) {
    var ascending = prediction.prediction[0].trajectory;
    var highest = ascending[ascending.length-1];
    var highest_location = [highest.latitude,sanitize_lon(highest.longitude)];

    var descending = prediction.prediction[1].trajectory;
    var landing = descending[descending.length-1];
    var landing_location = [landing.latitude,sanitize_lon(landing.longitude)];

    if (!marker_landing) {
      marker_landing = L.marker(landing_location,{icon: icon_landing}).addTo(map)
      .bindPopup(poptxt('landing',landing),{closeOnClick:false, autoPan:false});
    } else {
      marker_landing.slideTo(landing_location, {
          duration: 500,
          keepAtCenter: (follow=='landing')?true:false
      })
      .setPopupContent(poptxt('landing',landing));
    }

    dots_predict=[];

    if (data.climb > 0) {
      ascending.forEach(p => dots_predict.push([p.latitude,sanitize_lon(p.longitude)]));

      if (!marker_burst) {
        marker_burst = L.marker(highest_location,{icon:icon_burst}).addTo(map).bindPopup(poptxt('burst',highest),{closeOnClick:false, autoPan:false});
      } else {
        marker_burst.slideTo(highest_location, {
          duration: 500,
          keepAtCenter: (follow=='burst')?true:false
        }).setPopupContent(poptxt('burst',highest));
      }
    }

    descending.forEach(p => dots_predict.push([p.latitude,sanitize_lon(p.longitude)]));
    line_predict.setLatLngs(dots_predict);

    if (data.climb > 0) {
      predictor_time =  5 * 60; // ascending, every 5 min
    } else if (data.climb < 0 && data.alt > 5000) {
      predictor_time =  2 * 60; // descending, above 5km, every 2 min
    } else {
      predictor_time =  30; // descending, below 5km, every 30 sec
    }
    clearTimeout(predictor);
    predictor = setTimeout(function() {get_predict(last_data);}, predictor_time*1000);
  };

  sanitize_lon = function(lon) {
    if (lon > 180) { return lon - 360; }
    return lon;
  }
  tawhiri_lon = function(lon) {
    if (lon < 0) { return lon + 360; }
    return lon;
  }  

  poptxt = function(t,i) {
    var lat_input = (i.id)?i.lat:i.latitude;
    var lon_input = sanitize_lon((i.id)?i.lon:i.longitude);

    var lat = Math.round(lat_input * 1000000) / 1000000;
    var lon = Math.round(lon_input * 1000000) / 1000000;

    var add =
    '<br /><b>Position:</b> '+lat+',  '+lon+'<br />'+
    '<b>Open:</b> <a href="https://www.google.de/maps/?q='+lat+', '+lon+'" target="_blank">GMaps</a> | <a href="https://www.openstreetmap.org/?mlat='+lat+'&mlon='+lon+'&zoom=15" target="_blank">OSM</a> | <a href="mapsme://map?ll='+lat+','+lon+'">Maps.me</a>';

    if (t == 'position') { return '<div class="i_position"><b>🎈 '+i.id+'</b>'+add+'</div>'; }
    if (t == 'burst') { return '<div class="i_burst"><b>💥 Predicted Burst:</b><br />'+fd(i.datetime)+' in '+mr(i.altitude)+'m'+add+'</div>'; }
    if (t == 'highest') { return '<div class="i_burst"><b>💥 Burst:</b> '+mr(i.altitude)+'m'+add+'</div>';}
    if (t == 'landing') { return '<div class="i_landing"><b>🎯 Predicted Landing:</b><br />'+fd(i.datetime)+' at '+mr(i.altitude)+'m'+add+'</div>'; }
    if (t == 'gps') { return '<div class="i_gps">Position: '+(i.lat)+','+(i.lon)+'<br />Altitude: '+i.alt+'m<br />Speed: '+mr(i.speed * 3.6 * 10)/10+'km/h '+i.dir+'°<br />Sat: '+i.sat+' Hdop:'+(i.hdop/10)+'</div>'; }
  };

  fd = function(date) {
    var d = new Date(Date.parse(date));
    return az(d.getUTCHours()) +':'+ az(d.getUTCMinutes())+' UTC';
  };
  az = function(n) { return (n<10)?'0'+n:n; };
  mr = function(n) { return Math.round(n); };

  storage = (typeof(Storage) !== "undefined")?true:false;
  storage_write = function (data) {
    if (storage) {
      if (sessionStorage.sonde) {
        storage_data = JSON.parse(sessionStorage.sonde);
      } else {
        storage_data = [];
      }
      if (JSON.stringify(data) !=  JSON.stringify(storage_data[storage_data.length - 1])) {
        storage_data.push(data);
        sessionStorage.sonde = JSON.stringify(storage_data);
      }
    }
  };

  storage_read = function() {
    if (storage) {
      if (sessionStorage.sonde) {
        storage_data = JSON.parse(sessionStorage.sonde);
        return storage_data;
      }
    }
    return false;
  };

  storage_remove = function() {
    sessionStorage.removeItem('sonde');
  };

  session_storage = storage_read();
  if (session_storage) {
    session_storage.forEach(function(d) {
      dots.push([d.lat,d.lon,d.alt]);
      session_storage_last = d;
    });
    draw(session_storage_last);
  }

  setInterval(get_data,1000);

});

L.Control.Button = L.Control.extend({
  onAdd: function (map) {
    var container = L.DomUtil.create('div', 'leaflet-bar leaflet-control');
    options = this.options;
    Object.keys(options).forEach(function(key) {
      this.link = L.DomUtil.create('a', '', container);
      this.link.text = options[key].text;
      this.link.href = options[key].href;
      this.link.id =  options[key].id;
    });

    this.options.position = this.options[0].position;
    return container;
  }
});


// https://github.com/makinacorpus/Leaflet.GeometryUtil/blob/master/src/leaflet.geometryutil.js#L682
// modified to fit
function bearing(latlng1, latlng2) {
    var rad = Math.PI / 180,
        lat1 = latlng1[0] * rad,
        lat2 = latlng2[0] * rad,
        lon1 = latlng1[1] * rad,
        lon2 = latlng2[1] * rad,
        y = Math.sin(lon2 - lon1) * Math.cos(lat2),
        x = Math.cos(lat1) * Math.sin(lat2) -
            Math.sin(lat1) * Math.cos(lat2) * Math.cos(lon2 - lon1);
    var bearing = ((Math.atan2(y, x) * 180 / Math.PI) + 360) % 360;
    bearing = bearing < 0 ? bearing-360 : bearing;
    return Math.round(bearing);
}
upd.html 1353
<html><head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>


<form action="update.html" method="post"><p>Currently installed: %FULLNAMEID%</p>
<p>
Available master: <span id="masterDiv">(...checking...)</span>

<br>
Available devel: <span id="develDiv">(...checking...)</span>

</p>
<input type="submit" name="master" value="Master-Update"></input><br>
<input type="submit" name="devel" value="Devel-Update"><br>
<p>Note: If suffix is the same, update should work fully. If the number is different, update contains changes in the file system. A full re-flash is required to get all new features, but the update should not break anything. If the letter is different, a full re-flash is mandatory, update will not work</p></form>

<script>
const masterInfo = document.getElementById('masterDiv');
const develInfo = document.getElementById('develDiv');

let request = new XMLHttpRequest();
request.open('GET', 'http://rdzsonde.mooo.com/master/update-info.html');
request.onload = function() {
  masterInfo.innerHTML = request.response.replace(/<[^>]*>/g, '');
}
request.send();
let drequest = new XMLHttpRequest();
drequest.open('GET', 'http://rdzsonde.mooo.com/devel/update-info.html');
drequest.onload = function() {
  develInfo.innerHTML= drequest.response.replace(/<[^>]*>/g, '');;
}
drequest.send();
</script>
</body></html>
index.html 4267
<!DOCTYPE html>
<html>
<head>
  <title>rdzTTGOSonde Server</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta charset="UTF-8">
  <link rel="icon" href="data:,">
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
 <div class="wrapper"><div class="header">
  <h2>rdzTTGOSonde Server</h2>
<div class="topnav" id="myTopnav">
	<a href="#" onclick="selTab(event,'QRG')" class="tablinks" id="defaultTab">QRG</a>
	<a href="#" onclick="selTab(event,'WiFi')" class="tablinks">WiFi</a>
	<a href="#" onclick="selTab(event,'Data')" class="tablinks">Data</a>
	<a href="#" onclick="document.location.href='livemap.html'" class="tablinks">LiveMap</a>
	<a href="#" onclick="selTab(event,'Map')" class="tablinks">Map</a>
	<a href="#" onclick="selTab(event,'Config')" class="tablinks">Config</a>
	<a href="#" onclick="selTab(event,'Control')" class="tablinks">Control</a>
	<a href="#" onclick="selTab(event,'About')" class="tablinks">About</a>
	<a href="javascript:void(0);" class="icon" onclick="myFunction()">
		<span class="hamburger"></span>
	</a>
</div>
</div>

<div id="QRG" class="tabcontent" data-src="qrg.html">
	<iframe class="tci" src="" ></iframe>
</div>

<div id="WiFi" class="tabcontent" data-src="wifi.html">
	<iframe class="tci" src="" ></iframe>
</div>

<div id="Data" class="tabcontent" data-src="status.html">
	<iframe class="tci" src="" ></iframe>
</div>

<div id="Map" class="tabcontent" data-src="map.html">
	<iframe class="tci" src="" ></iframe>
</div>

<div id="Config" class="tabcontent" data-src="config.html">
	<iframe class="tci" src="" ></iframe>
</div>

<div id="Control" class="tabcontent" data-src="control.html">
	<iframe class="tci" src="" ></iframe>
</div>

<div id="About" class="tabcontent">
<div class="tci">
   %VERSION_NAME%<br>
   Copyright &copy; 2019-2021 by Hansi Reiser, DL9RDZ<br>
   (version %VERSION_ID%)<br><br>

   <a href="/upd.html">Check for update (requires TTGO internet connection via WiFi)</a><br><br>

   with contributions by Vigor and Xavier (M20 support), 
   <a href="https://github.com/LukePrior">Luke Prior</a> and <a href="https://github.com/oh3bsg">OH3BSG</a> (SondeHub support),
   <a href="https://www.dl2mf.de/" target="_blank">Meinhard Guenther, DL2MF</a>,
   <a href="https://github.com/bazjo">Johannes</a>, <a href="http://www.p1337.synology.me/dokuwiki/doku.php?id=public:wettersonden">Robert Stefanowicz</a>,
   <a href="https://github.com/puspis">Josema</a>, and probably some more people I forgot to mention here.

<br>
   <br>
   Autodetect info: %AUTODETECT_INFO%<br>
   <br>
    RS92 RINEX eph state: %EPHSTATE%<br>
    <br>
    This program is free software; you can redistribute it and/or
    modify it under the terms of the GNU General Public License as
    published by the Free Software Foundation; either version 2 of
    the License, or (at your option) any later version.<br>
    See <a href="https://www.gnu.org/licenses/gpl-2.0.txt">https://www.gnu.org/licenses/gpl-2.0.txt</a>
    for details.
</div>
</div>

</div>
<script>
function selTab(evt, id) {
	var i, tabcontent, tablinks;
	tabcontent=document.getElementsByClassName("tabcontent");
	for(i=0; i<tabcontent.length; i++) {
		tabcontent[i].style.display = "none";
		var link = tabcontent[i].dataset.src;
		if(link) {
			var iframe = tabcontent[i].getElementsByTagName("iframe")[0];
			iframe.setAttribute("src", "");
		}
	}
	tablinks=document.getElementsByClassName("tablinks");
	for(i=0; i<tablinks.length; i++) {
		tablinks[i].className = tablinks[i].className.replace(" active", "");
	}	
	var act = document.getElementById(id);
	act.style.display = "flex";
	evt.currentTarget.className += " active";
	
	var link = act.dataset.src;
	if(link) {
		var iframe = act.getElementsByTagName("iframe")[0];
		iframe.setAttribute("src", link);
	}
	var x = document.getElementById("myTopnav");
    x.className = "topnav";
}
/* Toggle between adding and removing the "responsive" class to topnav when the user clicks on the icon */
function myFunction() {
  var x = document.getElementById("myTopnav");
  if (x.className === "topnav") {
    x.className += " responsive";
  } else {
    x.className = "topnav";
  }
}
document.getElementById("defaultTab").click();
</script>

</body>
</html>

cfg.js 7754
var cfgs = [
[ "", "General configuration", "https://github.com/dl9rdz/rdz_ttgo_sonde/wiki/General-configuration" ],
[ "wifi", "Wifi mode (0=off, 1=client, 2=AP, 3=client or AP autoselect on startup)" ],
[ "mdnsname", "Network mDNS name"],
[ "ephftp", "FTP server for ephemeris data (RS92 decoder)"],
[ "debug", "Debug mode (0/1)" ],
[ "maxsonde", "Maximum number of QRG entries (must be &leq; 50)" ],
[ "rxlat", "Receiver fixed latitude"],
[ "rxlon", "Receiver fixed longitude"],
[ "rxalt", "Receiver fixed altitude"],
[ "", "OLED/TFT display configuration", "https://github.com/dl9rdz/rdz_ttgo_sonde/wiki/Display-configuration" ],
[ "screenfile", "Screen config (0=automatic; 1-5=predefined; other=custom)" ],
[ "display", "Display screens (scan, default, ...)" ],
[ "norx_timeout", "No-RX-timeout in seconds (-1=disabled)"],
[ "tft_orient", "TFT orientation (0/1/2/3), OLED flip: 3"],
[ "", "Spectrum display configuration", "https://github.com/dl9rdz/rdz_ttgo_sonde/wiki/Spectrum-configuration" ],
[ "spectrum", "Show spectrum on start (-1=no, 0=forever, >0=time [sec])" ],
[ "startfreq", "Start frequency (MHz, default 400)" ],
[ "channelbw", "Bandwidth (kHz)" ],
[ "marker", "Spectrum MHz marker" ],   // maybe remove, assume always ==1?
[ "noisefloor", "Spectrum noisefloor" ],
[ "", "Receiver configuration", "https://github.com/dl9rdz/rdz_ttgo_sonde/wiki/Receiver-configuration" ],
[ "freqofs", "RX frequency offset (Hz)"],
[ "rs41.agcbw", "RS41 AGC bandwidth"],
[ "rs41.rxbw", "RS41 RX bandwidth"],
[ "rs92.rxbw", "RS92 RX (and AGC) bandwidth"],
[ "rs92.alt2d", "RS92 2D fix default altitude"],
[ "dfm.agcbw", "DFM AGC bandwidth"],
[ "dfm.rxbw", "DFM RX bandwidth"],
[ "m10m20.agcbw", "M10/M20 AGC bandwidth"],
[ "m10m20.rxbw", "M10/M20 RX bandwidth"],
[ "mp3h.agcbw", "MP3H AGC bandwidth"],
[ "mp3h.rxbw", "MP3H RX bandwidth"],
[ "", "KISS TNC/AXUDP/AXTCP data feed configuration", "https://github.com/dl9rdz/rdz_ttgo_sonde/wiki/Data-feed-configuration"],
[ "call", "Call"],
[ "passcode", "Passcode"],
[ "kisstnc.active", "KISS TNC (port 14590) (needs reboot)"],
[ "kisstnc.idformat", "KISS TNC ID format"],
[ "axudp.active", "AXUDP active"],
[ "axudp.host", "AXUDP host"],
[ "axudp.port", "AXUDP port"],
[ "axudp.idformat", "DFM ID format"],
[ "axudp.highrate", "Rate limit"],
[ "tcp.active", "APRS TCP active"],
[ "tcp.host", "ARPS TCP host"],
[ "tcp.port", "APRS TCP port"],
[ "tcp.idformat", "DFM ID format"],
[ "tcp.highrate", "Rate limit"],
[ "", "MQTT data feed configuration", "https://github.com/dl9rdz/rdz_ttgo_sonde/wiki/MQTT-configuration"],
[ "mqtt.active", "MQTT active (needs reboot)"],
[ "mqtt.id", "MQTT client ID"],
[ "mqtt.host", "MQTT server hostname"],
[ "mqtt.port", "MQTT port"],
[ "mqtt.username", "MQTT username"],
[ "mqtt.password", "MQTT password"],
[ "mqtt.prefix", "MQTT prefix"],
[ "", "Chasemapper settings", "https://github.com/dl9rdz/rdz_ttgo_sonde/wiki/Chasemapper-configuration"],
[ "cm.active", "Chasemapper active (0=disabled, 1=active)"],
[ "cm.host", "Chasemapper UDP host"],
[ "cm.port", "Chasemapper UDP port"],
[ "", "SondeHub settings", "https://github.com/dl9rdz/rdz_ttgo_sonde/wiki/SondeHub-settings"],
[ "sondehub.active", "SondeHub reporting (0=disabled, 1=active)"],
[ "sondehub.chase", "SondeHub location reporting (0=off, 1=fixed, 2=chase/GPS, 3=auto)"],
[ "sondehub.host", "SondeHub host (DO NOT CHANGE)"],
[ "sondehub.callsign", "Callsign"],
[ "sondehub.antenna", "Antenna (optional, visisble on SondeHub tracker)"],
[ "sondehub.email", "SondeHub email (optional, only used to contact in case of upload errors)"],
[ "", "SondeHub frequency import", "https://github.com/dl9rdz/rdz_ttgo_sonde/wiki/SondeHub-import" ],
[ "sondehub.fiactive", "SondeHub frequency import active (0=disabled, 1=active)" ],
[ "sondehub.fiinterval", "Import frequency (minutes, &geq; 5)" ],
[ "sondehub.fimaxdist", "Import maximum distance (km, &leq; 500)" ],
[ "sondehub.fimaxage", "Import maximum age (hours, &leq; 24)" ],
[ "", "Hardware configuration (requires reboot)", "https://github.com/dl9rdz/rdz_ttgo_sonde/wiki/Hardware-configuration"],
[ "disptype", "Display type (0=OLED/SSD1306, 1=ILI9225, 2=OLED/SH1106, 3=ILI9341, 4=ILI9342)"],
[ "oled_sda", "OLED SDA/TFT SDA"],
[ "oled_scl", "OLED SCL/TFT CLK"],
[ "oled_rst", "OLED RST/TFT RST (needs reboot)"],
[ "tft_rs", "TFT RS"],
[ "tft_cs", "TFT CS"],
[ "tft_spifreq", "TFT SPI speed"],
[ "button_pin", "Button input port"],
[ "button2_pin", "Button 2 input port"],
[ "button2_axp", "Use AXP192 PWR as Button 2"],
[ "touch_thresh", "Touch button threshold<br>(0 for calib mode)"],
[ "power_pout", "Power control port"],
[ "led_pout", "LED output port"],
[ "gps_rxd", "GPS RXD pin (-1 to disable)"],
[ "gps_txd", "GPS TXD pin (not really needed)"],
[ "batt_adc", "Battery measurement pin"],
[ "sx1278_ss", "SX1278 SS"],
[ "sx1278_miso", "SX1278 MISO"],
[ "sx1278_mosi", "SX1278 MOSI"],
[ "sx1278_sck", "SX1278 SCK"],
];

function mkcfg(id, key, label, value) {
 var s = "<tr style=\"visibility: collapse;\" class=\"cfgpanel\"><td>" + label + "</td><td><input name=\"" + key + "\" type=\"text\" value=\"" + value + "\"/></td></tr>\n";
 return s;
}
function mkcfgbtn(id, key, label, value) {
  var touch = "";
  var v = value;
  if(v != -1 && (v&128)) {
    touch = " checked";
    v = v & 127;
  }
  var s = "<tr style=\"visibility:collapse\" class=\"cfgpanel\"><td>" + label + "</td><td><input name=\"" + key + "\" type=\"text\" size=\"3\" value=\"" + v + "\"/>";
  s += "<input type=\"checkbox\" name=\"" + key + "#\" "+touch+"> Touch</td></tr>\n";
  return s;
}

function mksep(id,label,url) {
  return "<tr class=\"cfgheader\"><th class=\"cfg\" align=\"left\" colspan=\"2\">"+label+" <a href=\""+url+"\" target=\”_blank\">[wiki]</a></th></tr>\n";
}
function rowdisp(id,disp) {
  var matches = document.querySelectorAll("tr."+id);
  matches.forEach(function(e) { if(disp) e.hidden=true; else e.removeAttribute('hidden');});
  hid=id; nid="N"+id;
  if(!disp) { hid=nid; nid=id; }
  document.querySelector("span."+hid).hidden=true;
  document.querySelector("span."+nid).removeAttribute('hidden');
}
function configTable() {
  // iterate over cfgs
  var tab = "<table width=\"100%\"><tr><th>Option</th><th>Value</th></tr>\n";
  var id=0;
  for(i=0; i<cfgs.length; i++) { 
    var key = cfgs[i][0];
    var lbl = cfgs[i][1];
    if(key) {
        if(key=="button_pin" || key=="button2_pin") {
	  tab += mkcfgbtn("s"+id, key, lbl, cf.get(key));
	} else if (key=="display") {
          tab += mkcfg("s"+id, key, lbl, cf.get(key));
	  tab += "<tr style=\"visibility:collapse\" class=\"cfgpanel\"><td>"+scr+"</td><td></td></tr>"
	} else {
          tab += mkcfg("s"+id, key, lbl, cf.get(key));
	}
    } else {
        id++;
        tab += mksep("s"+id, lbl, cfgs[i][2]);
    }
  }
  tab += "</table>";
  var cfgdiv = document.getElementById("cfgtab");
  cfgdiv.innerHTML = tab;
  // enable collapse / expand of items below a header
  var acc = document.getElementsByClassName("cfgheader");
  for(i=0; i<acc.length; i++) {
    acc[i].firstChild.innerHTML = "[+] " + acc[i].firstChild.innerHTML;
    acc[i].addEventListener("click", function(e) {
      if(e.target.nodeName=="A") return;
      achar = "[+]";
      if(this.classList.toggle("active")) achar = "[\u2212]";
      this.firstChild.innerHTML = achar + this.firstChild.innerHTML.substring(3);
      var panel = this;
      console.log(panel);
      while( panel = panel.nextElementSibling) {
        console.log(panel);
	if ( panel.className!="cfgpanel") { break; }
        if(panel.style.visibility==="collapse") {
          panel.style.visibility="visible";
        } else {
          console.log("none");
          panel.style.visibility="collapse";
        } 
      }
    });
  }
  acc[0].click();
}
rdz.js 1493
let stypes=new Map();
stypes.set('4', 'RS41');
stypes.set('R', 'RS92');
stypes.set('D', 'DFM');
stypes.set('M', 'M10');
stypes.set('2', 'M20');
stypes.set('3', 'MP3H');

/* (no longer) Used by qrg.html in RX_FSK.ino */
function prep() {
  var stlist=document.querySelectorAll("input.stype");
  for(txt of stlist){
    var val=txt.getAttribute('value'); var nam=txt.getAttribute('name'); 
    var sel=document.createElement('select');
    sel.setAttribute('name',nam);
    for(stype of stypes) { 
      var opt=document.createElement('option');
      opt.value=stype[0];
      opt.innerHTML=stype[1];
      if(stype[0]==val) { opt.setAttribute('selected','selected'); }
      sel.appendChild(opt);
    }
    txt.replaceWith(sel);
  }
} 

function qrgTable() {
  var tab=document.getElementById("divTable");

  var table = "<table><tr><th>ID</th><th>Active</th><th>Freq</th><th>Launchsite</th><th>Mode</th></tr>";
  for(i=0; i<qrgs.length; i++) {
     var ck = "";
     if(qrgs[i][0]) ck="checked";
     table += "<tr><td>" + (i+1) + "</td><td><input name=\"A" + (i+1) + "\" type=\"checkbox\" " + ck + "/></td>";
     table += "<td><input name=\"F" + (i+1) + "\" type=\"text\" width=12 value=\"" + qrgs[i][1] + "\"></td>";
     table += "<td><input name=\"S" + (i+1) + "\" type=\"text\" value=\"" + qrgs[i][2] +"\"></td>";
     table += "<td><input class=\"stype\" name=\"T" + (i+1) + "\" value=\"" + qrgs[i][3] + "\"></td></tr>";
  }
  table += "</table>";
  tab.innerHTML = table;
  prep();
}
style.css 6570
body, html {
	height: 100%;
	margin: 0;
	font-family: Arial;
}

.active, .cfgheader:hover {
  background-color: #ccc;
}
.cfgpanel {
}

th.cfg {
  padding:5pt
}

.hamburger {
  position: relative;
  display: inline-block;
  width: 1.25em;
  height: 0.8em;
  margin-right: 0.3em;
  border-top: 0.2em solid #fff;
  border-bottom: 0.2em solid #fff;
}

.hamburger:before {
  content: "";
  position: absolute;
  top: 0.3em;
  left: 0px;
  width: 100%;
  border-top: 0.2em solid #fff;
}

.wrapper {
  height: 100%;
  display: flex;
  flex-direction: column;
  margin: 0;
}
.tci {
  flex-grow: 1; border: none; margin: 0; padding: 0; 
}
.footer {
}

table, th, td {
	border: 1px solid black;
	border-collapse: collapse;
	background-color: #ddd
}

td#caption {
	text-align: center;
	background-color: #aaa;
	font-weight: bold;
}

td#sfreq {
	background-color: #ccc;
}

.content {
	display: flex;
	flex: 1;
	flex-direction: column;
	overflow: auto;
	height: 100%;
}
.tabcontent {
	display: none;
	flex: 1;
	padding: 6px 12px;
	border: 1px solid #ccc;
	border-top: none;
	flex-direction: column;
	overflow: auto;
}

html {
  font-family: Helvetica;
  display: inline-block;
  margin: 0px auto;
  text-align: center;
}
h1{
  color: #0F3376;
  font-size: 24px
}
p{
  font-size: 1.5rem;
}
.canberemoved_button {
  display: inline-block;
  background-color: #008CBA;
  border: none;
  border-radius: 4px;
  color: white;
  padding: 16px 40px;
  text-decoration: none;
  font-size: 30px;
  margin: 2px;
  cursor: pointer;
}
.button2 {
  background-color: #f44336;
}
.save {
  background-color: #0F3376;
  border: black;
  border-width: 1;
  color: white;
  padding: 8px 30px;
  text-align: center;
  text-decoration: none;
  display: block;
  font-size: 14px;
  margin: 0
}
.ctlbtn {
  background-color: #ccc;
  border: black;
  border-width: 1;
  color: black;
  padding: 4px 30px;
  text-align: center;
  text-decoration: none;
  display: block;
  margin: 2;
  font-size: 4vh;
}
.update {
  margin: 0;
  display: block;
}

#map {
	height: 100%;
}

.leaflet-popup-content table, .leaflet-popup-content table td {
	border:0;
	background-color: white;
}

.leaflet-popup-content table td:nth-child(2),.leaflet-popup-content table td:nth-child(5) {
	text-align: right;
	padding-left: 3px;
}

.leaflet-popup-content table td:nth-child(3),.leaflet-popup-content table td:nth-child(6) {
	text-align: left;
	padding-right: 10px;
}

.leaflet-gps{animation:fading 1s infinite}@keyframes fading{0%{opacity:0.7}50%{opacity:1}100%{opacity:0.7}}

.leaflet-gps::after {
	content: '🔵';
}
.leaflet-gps {
	margin-left: -7px !important;
	margin-top: -9px !important;
}

.leaflet-burst::after {
	content: '💥';
}
.leaflet-burst {
	margin-left: -20px !important;
	margin-top: -22px !important;
	font-weight: bold;
	font-size: 30px;
}

.leaflet-landing::after {
	content: '×';
}

.leaflet-landing {
	margin-left: -13px !important;
	margin-top: -30px !important;
	font-weight: bold;
	font-size: 40px;
}


.leaflet-header {
    text-align: center;
    width: 250px;
    box-shadow: 0 1px 5px rgba(0,0,0,0.65);
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    pointer-events: auto !important;
}

.leaflet-header #settings {
	display: none;
}

.leaflet-header label {
	display: block;
	margin-top: 5px;
}
.leaflet-header input {
	width: 80px;
	margin: 0 auto;
}

.leaflet-header #submit {
	margin: 3px auto;
}

.leaflet-footer {
		display:none;
    text-align: center;
    width: 180px;
    box-shadow: 0 1px 5px rgba(0,0,0,0.65);
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}

.leaflet-center {
    left:0;
    right:0;
    margin: 0 auto;
    padding: 5px;
    background: #fff;
    background: rgba(255, 255, 255, 0.8);
}

.leaflet-header #sonde_detail {
	display:none;
}

@media screen and (max-width: 600px) {
    .leaflet-control-attribution {
        -moz-transform: rotate(-90deg) translateX(100%);
        -ms-transform: rotate(-90deg) translateX(100%);
        -o-transform: rotate(-90deg) translateX(100%);;
        -webkit-transform: rotate(-90deg) translateX(100%);
        transform: rotate(-90deg) translateX(100%);
        -webkit-transform-origin: 100% 100%;
        -moz-transform-origin: 100% 100%;
        -ms-transform-origin: 100% 100%;
        -o-transform-origin: 100% 100%;
        transform-origin: 100% 100%;
    }
}

.ldot {
  height: 15px;
  width: 15px;
	margin-top: 8px;
	margin-left: -1px;
  border-radius: 50%;
  display: inline-block;
}

.ybg {
	background-color: orange;
	background-image: -webkit-gradient(linear, left top, left bottom, from(yellow), to(orange));
	background-image: linear-gradient(top, yellow, orange);
}
.gbg {
	background-color: green;
	background-image: -webkit-gradient(linear, left top, left bottom, from(lime), to(green));
	background-image: linear-gradient(top, lime, green); 
}
.rbg { 
	background-color: red;
	background-image: -webkit-gradient(linear, left top, left bottom, from(orange), to(red));
	background-image: linear-gradient(top, orange, red); 
}

#sonde_statbar .ldot {
	margin-right: 3px;
}

/* Add a black background color to the top navigation */
.topnav {
  background-color: #333;
  overflow: hidden;
}

/* Style the links inside the navigation bar */
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

/* Change the color of links on hover */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}

/* Add an active class to highlight the current page */
.topnav a.active {
  background-color: #04AA6D;
  color: white;
}

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
  display: none;
  padding-bottom: 12px;
  padding-top: 11px;
}

/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 600px) {
  .topnav a:not(.active) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}
livemap.html 720
<!DOCTYPE html>
<html>
<head>
  <title>rdzTTGOSonde Server LiveMap</title>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
  <link rel="stylesheet" type="text/css" href="style.css" />
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
  <script>var mapcenter=[%MAPCENTER%];</script>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
  <script src="https://unpkg.com/leaflet.marker.slideto@0.2.0/Leaflet.Marker.SlideTo.js"></script>
  <script src="livemap.js"></script>
</head>
<body>
  <div id="map"></div>
</body>
</html>