From 5a00c403c7497b49a63dae7946bd9e8a728540e8 Mon Sep 17 00:00:00 2001 From: John-David Deubl Date: Thu, 12 Nov 2020 19:11:48 +0100 Subject: [PATCH] coord view --- application/app.js | 159 +++++++++++++++++-------- application/assets/css/main.css | 76 ++++-------- application/assets/js/open_external.js | 42 +------ application/index.html | 4 +- application/manifest.webapp | 47 ++++---- 5 files changed, 155 insertions(+), 173 deletions(-) diff --git a/application/app.js b/application/app.js index f8e83a9c..a01f09bc 100644 --- a/application/app.js +++ b/application/app.js @@ -17,7 +17,7 @@ let new_lng = 0; let curPos = 0; let myMarker = ""; let i = 0; -let windowOpen = "map"; +let windowOpen; let message_body = ""; let openweather_api = ""; let tabIndex = 0; @@ -45,8 +45,6 @@ let storage_name; $(document).ready(function() { - - //welcome message $('div#message div').text("Welcome"); setTimeout(function() { @@ -59,7 +57,9 @@ $(document).ready(function() { } ///set default map opentopo_map(); - windowOpen = "map"; + setTimeout(() => { + windowOpen = "map"; + }, 2000); }, 4000); @@ -73,39 +73,6 @@ $(document).ready(function() { L.control.scale({ position: 'topright', metric: true, imperial: false }).addTo(map); - //////////////////// - ////RULER/////////// - /////////////////// - var ruler_activ = ""; - - function ruler() { - - if (ruler_activ == "") { - L.control.ruler().addTo(map); - - } - - if (ruler_activ === true) { - $("div.leaflet-ruler").remove(); - - ruler_activ = false - navigator.spatialNavigationEnabled = false; - L.control.ruler().remove(); - $("div.leaflet-ruler").removeClass("leaflet-ruler-clicked") - - return false; - } else { - L.control.ruler().remove(); - - navigator.spatialNavigationEnabled = true; - - ruler_activ = true - $("div.leaflet-ruler").addClass("leaflet-ruler-clicked") - return false; - } - - - } //////////////////// ////MAPS//////////// /////////////////// @@ -310,8 +277,77 @@ $(document).ready(function() { + //////////////////// + ////RULER/////////// + /////////////////// + var ruler_activ = ""; + + function ruler() { + + if (ruler_activ == "") { + L.control.ruler().addTo(map); + } + if (ruler_activ === true) { + $("div.leaflet-ruler").remove(); + + ruler_activ = false + navigator.spatialNavigationEnabled = false; + L.control.ruler().remove(); + $("div.leaflet-ruler").removeClass("leaflet-ruler-clicked") + + return false; + } else { + L.control.ruler().remove(); + + navigator.spatialNavigationEnabled = true; + + ruler_activ = true + $("div.leaflet-ruler").addClass("leaflet-ruler-clicked") + return false; + } + + + } + + + ///////////////////////// + /////Load GPX/////////// + /////////////////////// + function loadGPX(filename) { + let finder = new Applait.Finder({ type: "sdcard", debugMode: false }); + finder.search(filename); + + + finder.on("fileFound", function(file, fileinfo, storageName) { + //file reader + + let reader = new FileReader(); + + reader.onerror = function(event) { + toaster("can't read file", 3000) + reader.abort(); + }; + + reader.onloadend = function(event) { + + var gpx = event.target.result; // URL to your GPX file or the GPX itself + + new L.GPX(gpx, { async: true }).on('loaded', function(e) { + map.fitBounds(e.target.getBounds()); + }).addTo(map) + + map.setZoom(8); + $('div#finder').css('display', 'none'); + windowOpen = "map"; + }; + + + reader.readAsText(file) + + }) + } @@ -465,13 +501,25 @@ $(document).ready(function() { let elem = document.getElementById("marker-target-cross") let style = getComputedStyle(elem) - if (style.display == "none") { - elem.style.display = "block" + if (style.opacity == "0") { + + $("#marker-target-cross").animate({ + width: "50px", + height: "50px" + }, 2000, function() {}); + + + elem.style.opacity = "1" + + + elem.style.color = 'red'; toaster("
press 5
to add a marker and save it

press 0
to share this position by sms", 5000) return true; } else { - elem.style.display = "none" + elem.style.opacity = "0" + elem.style.width = '0px'; + elem.style.height = '0px'; return true; } @@ -691,15 +739,12 @@ $(document).ready(function() { save_delete_marker("save_marker") } - //let marker_count = -1; let marker_array = []; if (item_value == "marker") { if (param == "add-marker") { //to know it is not the current position marker_latlng = true; - marker_count++ - marker_lng = Number($(document.activeElement).data('lng')); marker_lat = Number($(document.activeElement).data('lat')); @@ -803,25 +848,37 @@ $(document).ready(function() { function coordinations(param) { let update_view; - if (param == "show") { - getLocation("update_marker"); + if ($("div#coordinations").css("display") == "none") { + $("div#finder").css("display", "none"); + $("div#coordinations").css("display", "block"); + //getLocation("update_marker"); update_view = setInterval(() => { if (current_lat != "" && current_lng != "") { $('div#coordinations div#lat').text("Lat " + current_lat.toFixed(5)); $('div#coordinations div#lng').text("Lng " + current_lng.toFixed(5)); - $('div#coordinations div#altitude').text("alt " + current_alt); - $('div#coordinations div#heading').text("heading " + current_heading); + if (current_alt) { + $('div#coordinations div#altitude').text("alt " + current_alt); + } else { + $('div#coordinations div#altitude').text("alt no data"); + } + if (current_heading) { + $('div#coordinations div#heading').text("heading " + current_heading); + + } else { + $('div#coordinations div#heading').text("heading no data"); + + } + } }, 1000); - $("div#finder").css("display", "none"); - $("div#coordinations").css("display", "block"); - windowOpen = "coordinations"; + + return true; } - if (param == "hide") { + if ($("div#coordinations").css("display") == "block") { $("div#coordinations").css("display", "none"); windowOpen = "map"; clearInterval(update_view); diff --git a/application/assets/css/main.css b/application/assets/css/main.css index 375ecc13..a08fe1fe 100644 --- a/application/assets/css/main.css +++ b/application/assets/css/main.css @@ -105,16 +105,28 @@ div#map-container { div#marker-target-cross { border-radius: 50%; - width: 50px; - height: 50px; - background: rgba(0, 255, 0, 0.2); + width: 0px; + height: 0px; border: 7px solid #000; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 900; - display: none; + opacity: 0; + animation: infinite; + animation-duration: 3s; + animation-name: am-color; + animation-direction: alternate; +} + +@keyframes am-color { + from { + background-color: rgba(0, 255, 0, 0.2); + } + to { + background-color: rgba(209, 223, 14, 0.466); + } } @@ -323,7 +335,7 @@ div#coordinations { z-index: 1000; left: 0; top: 0; - background: black; + background: none; color: white; font-size: 14px; padding: 5px 10px 50px 5px; @@ -331,61 +343,15 @@ div#coordinations { overflow: hidden; } -div#coordinations div#button-set { - position: fixed!Important; - bottom: 0px; - height: 30px; - background: black; -} - -div#coordinations div#button-set div div#close { - background: black; - color: white; - font-size: 14px; - padding: 3px; - min-width: 100px; -} - -div#coordinations div#button-set div div#share { - background: black; - color: white; - font-size: 14px; - padding: 3px 10px 3px 3px; - text-align: right; - min-width: 70px; -} - -div#coordinations div#lat { - background: black; - color: white; - font-size: 14px; - padding: 3px; -} - -div#coordinations div#lng { - background: black; - color: white; - font-size: 14px; - padding: 3px; -} - -div#coordinations div#altitude { +div#coordinations div { background: black; color: white; font-size: 14px; padding: 3px; } +div#coordinations div#lat {} -/* KaiOS portrait devices (240x320) */ - -@media only screen and (orientation: portrait) { - /* styles */ -} - - -/* KaiOS landscape devices (320x240) */ +div#coordinations div#lng {} -@media screen and (orientation: landscape) { - /* styles */ -} \ No newline at end of file +div#coordinations div#altitude {} \ No newline at end of file diff --git a/application/assets/js/open_external.js b/application/assets/js/open_external.js index 053d8000..fd0871c6 100644 --- a/application/assets/js/open_external.js +++ b/application/assets/js/open_external.js @@ -10,12 +10,14 @@ navigator.mozSetMessageHandler('activity', function(activityRequest) { const url_split = option.data.url.split("/"); current_lat = url_split[url_split.length - 2]; current_lng = url_split[url_split.length - 1]; + alert(current_lat, current_lng) //remove !numbers current_lat = current_lat.replace(/[A-Za-z?=&]+/gi, ""); current_lng = current_lng.replace(/[A-Za-z?=&]+/gi, ""); current_lat = Number(current_lat); current_lng = Number(current_lng); + myMarker = L.marker([current_lat, current_lng]).addTo(map); map.setView([current_lat, current_lng], 13); zoom_speed(); @@ -23,42 +25,4 @@ navigator.mozSetMessageHandler('activity', function(activityRequest) { toaster(current_lat + " /" + current_lng, 5000) } -}) - - -///////////////////////// -/////Load GPX/////////// -/////////////////////// -function loadGPX(filename) { - let finder = new Applait.Finder({ type: "sdcard", debugMode: false }); - finder.search(filename); - - - finder.on("fileFound", function(file, fileinfo, storageName) { - //file reader - - let reader = new FileReader(); - - reader.onerror = function(event) { - toaster("can't read file", 3000) - reader.abort(); - }; - - reader.onloadend = function(event) { - - var gpx = event.target.result; // URL to your GPX file or the GPX itself - - new L.GPX(gpx, { async: true }).on('loaded', function(e) { - map.fitBounds(e.target.getBounds()); - }).addTo(map) - - map.setZoom(8); - $('div#finder').css('display', 'none'); - windowOpen = "map"; - }; - - - reader.readAsText(file) - - }) -} \ No newline at end of file +}) \ No newline at end of file diff --git a/application/index.html b/application/index.html index 2b8f8a3d..fe4492ae 100644 --- a/application/index.html +++ b/application/index.html @@ -53,7 +53,7 @@ -
+