diff options
| author |  Jonas Gunz <himself@jonasgunz.de>
| 2023-09-28 15:26:15 +0200 |
|---|---|---|
| committer | Jonas Gunz <himself@jonasgunz.de>
| 2023-09-28 15:26:15 +0200 |
| commit | b373d91f8c8056904c6779c7fcfb47ff5d8ee242 (patch) | |
| tree | 52f3cc4a065f6c8fa93e4e1c96fcbcdc691496ae | |
| parent | 49a950d117016e3887c5b5a2571a77d9867ca45e (diff) | |
| download | meteo_toolbox-b373d91f8c8056904c6779c7fcfb47ff5d8ee242.tar.gz | |
webinterface wip
| -rw-r--r-- | web/index.html | 14 | ||||
| -rw-r--r-- | web/index.js | 90 | ||||
| -rw-r--r-- | web/style.css | 13 |
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); +} |