kopia lustrzana https://github.com/dl9rdz/rdz_ttgo_sonde
livemap: internet connection check + nicer dots (#134)
* Check internet connection * livemap: nicer dots - removed old emoji dotspull/148/head^2
rodzic
b69a726df7
commit
4656d2e641
|
@ -1,3 +1,11 @@
|
|||
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 });
|
||||
|
@ -34,15 +42,15 @@ $(document).ready(function(){
|
|||
|
||||
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 reddot = '<span class="ldot rbg"></span>';
|
||||
var yellowdot = '<span class="ldot ybg"></span>';
|
||||
var greendot = '<span class="ldot gbg"></span>';
|
||||
|
||||
$('#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</div>';
|
||||
header += '<div id="sonde_status"><small><span id="sonde_statbar"></span></small></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 />';
|
||||
|
@ -61,7 +69,6 @@ $('.leaflet-footer').append(footer);
|
|||
|
||||
var statbar = '';
|
||||
headtxt = function(data,stat) {
|
||||
//var staticon = (stat == '1')?'🟢':'🟡';
|
||||
var staticon = (stat == '1')?greendot:yellowdot;
|
||||
statbar = staticon + statbar;
|
||||
if ((statbar.length) > 10*greendot.length) { statbar = statbar.substring(0,10*greendot.length); }
|
||||
|
@ -87,7 +94,7 @@ headtxt = function(data,stat) {
|
|||
|
||||
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', id: "status", text: '', href: 'javascript:get_data();' } ]));
|
||||
|
||||
map.addControl(new L.Control.Button([
|
||||
{ position:'topright', text: '🎈', href: 'javascript:show(marker,\'marker\');' },
|
||||
|
@ -171,18 +178,15 @@ headtxt = function(data,stat) {
|
|||
dots.push(location);
|
||||
line.setLatLngs(dots);
|
||||
storage_write(data);
|
||||
//$('#status').html('🟢');
|
||||
$('#status').html(greendot);
|
||||
stat = 1;
|
||||
} else {
|
||||
//$('#status').html('🟡');
|
||||
$('#status').html(yellowdot);
|
||||
stat = 0;
|
||||
}
|
||||
headtxt(data,stat);
|
||||
last_data = data;
|
||||
} else {
|
||||
//$('#status').html('🟡');
|
||||
$('#status').html(yellowdot);
|
||||
headtxt(data,0);
|
||||
}
|
||||
|
@ -225,14 +229,12 @@ headtxt = function(data,stat) {
|
|||
};
|
||||
|
||||
get_data = function() {
|
||||
//$('#status').html('🔴');
|
||||
$('#status').html(reddot);
|
||||
$.ajax({url: 'live.json', success: (function( data ) {
|
||||
if (typeof data != "object") { data = $.parseJSON(data); }
|
||||
if (data.sonde) {
|
||||
draw(data.sonde);
|
||||
} else {
|
||||
//setTimeout(function() {$('#status').html('🟡');},100);
|
||||
setTimeout(function() {$('#status').html(yellowdot);},100);
|
||||
}
|
||||
if (data.gps) {
|
||||
|
|
|
@ -244,13 +244,31 @@ p{
|
|||
}
|
||||
|
||||
.ldot {
|
||||
height: 1em;
|
||||
width: 1em;
|
||||
height: 15px;
|
||||
width: 15px;
|
||||
margin-top: 8px;
|
||||
margin-left: -1px;
|
||||
border-radius: 50%;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.ybg { background-color: #E0E000; }
|
||||
.gbg { background-color: green; }
|
||||
.rbg { background-color: red; }
|
||||
.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;
|
||||
}
|
||||
|
||||
|
|
Ładowanie…
Reference in New Issue