aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorGravatar Jonas Gunz <himself@jonasgunz.de> 2023-09-28 15:26:15 +0200
committerGravatar Jonas Gunz <himself@jonasgunz.de> 2023-09-28 15:26:15 +0200
commitb373d91f8c8056904c6779c7fcfb47ff5d8ee242 (patch)
tree52f3cc4a065f6c8fa93e4e1c96fcbcdc691496ae
parent49a950d117016e3887c5b5a2571a77d9867ca45e (diff)
downloadmeteo_toolbox-b373d91f8c8056904c6779c7fcfb47ff5d8ee242.tar.gz
webinterface wip
-rw-r--r--web/index.html14
-rw-r--r--web/index.js90
-rw-r--r--web/style.css13
3 files changed, 117 insertions, 0 deletions
diff --git a/web/index.html b/web/index.html
new file mode 100644
index 0000000..1cb9948
--- /dev/null
+++ b/web/index.html
@@ -0,0 +1,14 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
+
+<html>
+ <head>
+ <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+ <meta name="viewport" content="initial-scale=1, minimum-scale=1, width=device-width">
+ <title>Weather</title>
+
+ <link rel="stylesheet" type="text/css" href="style.css">
+ </head>
+ <body>
+ <script src="index.js"></script>
+ </body>
+</html>
diff --git a/web/index.js b/web/index.js
new file mode 100644
index 0000000..085215f
--- /dev/null
+++ b/web/index.js
@@ -0,0 +1,90 @@
+// python3 -m http.server
+
+const data_dir = 'data';
+const index_file = "pmsl_t850.index.json";
+
+var index = null;
+var mapframe = null;
+
+function httpGetAsync(url, callback)
+{
+ var xmlHttp = new XMLHttpRequest();
+ xmlHttp.onreadystatechange = function() {
+ if (xmlHttp.readyState == 4 && xmlHttp.status == 200)
+ callback(xmlHttp.responseText);
+ }
+ xmlHttp.open("GET", url, true);
+ xmlHttp.send(null);
+}
+
+function loadIndexFromJson(raw_text) {
+ index = JSON.parse(raw_text);
+ //TODO pass index here. that would be cleaner than public vars.
+ build_interface();
+}
+
+function build_indexlist() {
+ if (index==null) {
+ return;
+ }
+
+ div = document.createElement('div');
+ div.classList.add('index');
+
+ list = document.createElement('ul');
+
+ for (const i in index) {
+ var map = index[i];
+
+ a = document.createElement('a');
+ a.classList.add('link');
+ a.setAttribute('href', '');// data_dir + '/' + map.file);
+ a.setAttribute('mapfile', map.file);
+ a.onclick = indexlink_click;
+ a.innerText = map.valid_offset;
+ a.id = map.file;
+
+ li = document.createElement('li');
+ li.appendChild(a);
+ list.appendChild(li);
+
+ }
+
+ div.appendChild(list);
+ return div;
+}
+
+function indexlink_click(e) {
+ console.log(this.id);
+
+ mapframe.src = data_dir + '/' + this.getAttribute('mapfile');
+ return false;
+}
+
+function build_mapframe() {
+ div = document.createElement('div');
+ div.classList.add('mapframe');
+ frame = document.createElement('img');
+ //frame.classList.add('mapframe');
+ mapframe = frame;
+ div.appendChild(frame);
+
+ return div;
+}
+
+function build_interface() {
+ index = build_indexlist();
+ mapframe = build_mapframe();
+
+ document.body.appendChild(index);
+ document.body.appendChild(mapframe);
+}
+
+function clear_interface() {
+ index.remove();
+ mapframe.remove();
+}
+
+window.onload = function() {
+ httpGetAsync(data_dir + '/' + index_file, loadIndexFromJson);
+}
diff --git a/web/style.css b/web/style.css
new file mode 100644
index 0000000..f478501
--- /dev/null
+++ b/web/style.css
@@ -0,0 +1,13 @@
+:root {
+ --dummy: white;
+ --indexwidth: 50px;
+}
+
+div.index {
+ width: var(--indexwidth);
+ position: fixed;
+}
+
+div.mapframe {
+ margin-left: var(--indexwidth);
+}