From f6d3536200551d0c7cdd3818ca8a918e41db7254 Mon Sep 17 00:00:00 2001 From: Thomas Kolb Date: Mon, 13 Nov 2023 22:58:46 +0100 Subject: [PATCH] Complete basic web implementation --- static/map.js | 30 ++++++++++++++++++++++++++++++ views/index.tpl | 28 ++++++++++++++++++++++++++++ web.py | 15 +++++++++++++-- 3 files changed, 71 insertions(+), 2 deletions(-) create mode 100644 static/map.js create mode 100644 views/index.tpl diff --git a/static/map.js b/static/map.js new file mode 100644 index 0000000..5c9a5a8 --- /dev/null +++ b/static/map.js @@ -0,0 +1,30 @@ +function update_map() +{ + var request = new XMLHttpRequest(); + request.open("GET","/render/45/11.svg"); + + request.addEventListener('load', function(event) { + if (request.status >= 200 && request.status < 300) { + var svgblob = new Blob([request.responseText], { type: "image/svg+xml" }); + + document.getElementById("svgcontainer").innerHTML = request.responseText; + + link_container = document.getElementById("downloadlink"); + link_container.innerHTML = ''; + + var blobUrl = URL.createObjectURL(svgblob); + + var link = document.createElement("a"); // Or maybe get it from the current document + link.href = blobUrl; + link.download = "map.svg"; + link.innerHTML = "Download this map."; + link_container.appendChild(link); // Or append it whereever you want + + URL.revokeObjectURL(blobUrl); + } else { + console.warn(request.statusText, request.responseText); + } + }); + + request.send(); +} diff --git a/views/index.tpl b/views/index.tpl new file mode 100644 index 0000000..f93c5ae --- /dev/null +++ b/views/index.tpl @@ -0,0 +1,28 @@ + + + + + + + + QSOMap: Azimuthal-equidistant SVG map generator + + + + + +

QSOMap: Azimuthal-equidistant SVG map generator

+

Here you can generate a map in azimuthal-equidistant projections for any point on Earth. You get a map where the specified coordinate is in the center, and all other locations are projected such that locations with the same physical distance from the given coordinate are also the same distance from the center on the map.

+

The generated output is a Scalable Vector Graphics (SVG) image that can be edited as needed. I recommend Inkscape as an SVG editor.

+

Please note: It may take a few seconds to generate the map. Please give it some time. The map will appear below the form.

+
+ +
+ +
+ +
+ +
+ + diff --git a/web.py b/web.py index 8aade86..d714163 100755 --- a/web.py +++ b/web.py @@ -1,14 +1,25 @@ #!/usr/bin/env python3 -from bottle import response, route, run, template +from bottle import response, route, run, template, static_file from io import StringIO import qsomap -@route('/render//') +@route('/render//.svg') def render(lat, lon): svg_stream = StringIO() qsomap.render(float(lat), float(lon), svg_stream, None) response.content_type = 'image/svg+xml' return svg_stream.getvalue() + +@route('/') +@route('/index.html') +def index(): + return template('index') + + +@route('/static/') +def send_static(filename): + return static_file(filename, root='./static') + run(host='localhost', port=8080)