Foo
This commit is contained in:
Felix Delattre
parent
915dfd8510
commit
a037e6b4fd
12 changed files with 1237 additions and 96 deletions
|
|
@ -70,14 +70,14 @@ data/
|
||||||
|
|
||||||
## Web Viewer
|
## Web Viewer
|
||||||
|
|
||||||
Run a local HTTP server to view the web interface:
|
Run a local HTTP server from the **webapp** directory:
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
cd webapp
|
cd webapp
|
||||||
python3 -m http.server 8000
|
python3 -m http.server 8000
|
||||||
```
|
```
|
||||||
|
|
||||||
Then open `http://localhost:8000/webapp` in your browser to visualize NDVI time series and compare S2, S3, and fusion outputs.
|
Then open `http://localhost:8000/` in your browser. Data is served via the `webapp/data` symlink.
|
||||||
|
|
||||||
## License
|
## License
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -55,8 +55,9 @@ if [ -f satellite-fusion-web.service ]; then
|
||||||
systemctl daemon-reload
|
systemctl daemon-reload
|
||||||
fi
|
fi
|
||||||
|
|
||||||
# Create data directory
|
# Create data directory and webapp/data symlink
|
||||||
mkdir -p $DATA_DIR
|
mkdir -p $DATA_DIR
|
||||||
|
ln -sf ../data $APP_DIR/webapp/data
|
||||||
ENDSSH
|
ENDSSH
|
||||||
echo "Setup complete!"
|
echo "Setup complete!"
|
||||||
;;
|
;;
|
||||||
|
|
|
||||||
|
|
@ -76,7 +76,7 @@ def _create_timeseries_for_dir(input_dir, output_dir, site_position, source_name
|
||||||
continue
|
continue
|
||||||
|
|
||||||
filename = input_file.name
|
filename = input_file.name
|
||||||
parts = filename.replace(".geotiff", "").split("_")
|
parts = filename.replace(".geotiff", "").replace(".tif", "").split("_")
|
||||||
date_str = None
|
date_str = None
|
||||||
|
|
||||||
for part in parts:
|
for part in parts:
|
||||||
|
|
@ -316,7 +316,7 @@ def _create_gcc_timeseries_for_dir(input_dir, output_dir, site_position, source_
|
||||||
continue
|
continue
|
||||||
|
|
||||||
filename = input_file.name
|
filename = input_file.name
|
||||||
parts = filename.replace(".geotiff", "").split("_")
|
parts = filename.replace(".geotiff", "").replace(".tif", "").split("_")
|
||||||
date_str = None
|
date_str = None
|
||||||
|
|
||||||
for part in parts:
|
for part in parts:
|
||||||
|
|
@ -440,12 +440,15 @@ def _get_bands_from_original(input_file, site_position):
|
||||||
return None
|
return None
|
||||||
|
|
||||||
|
|
||||||
def _create_s2_bands_timeseries_for_dir(input_dir, output_dir, site_position):
|
def _create_bands_timeseries_for_dir(input_dir, output_dir, site_position, source_name, pattern="*.geotiff"):
|
||||||
print(f"[S2-BANDS] Creating timeseries.json...")
|
print(f"[BANDS-{source_name}] Creating timeseries.json...")
|
||||||
timeseries = []
|
timeseries = []
|
||||||
for f in sorted(input_dir.glob("*.geotiff")):
|
for f in sorted(input_dir.glob(pattern)):
|
||||||
date_str = f.stem.split("_")[0]
|
if "DIST_CLOUD" in f.name:
|
||||||
if len(date_str) != 8 or not date_str.isdigit():
|
continue
|
||||||
|
parts = f.name.replace(".geotiff", "").replace(".tif", "").split("_")
|
||||||
|
date_str = next((p for p in parts if len(p) == 8 and p.isdigit()), None)
|
||||||
|
if not date_str:
|
||||||
continue
|
continue
|
||||||
date = datetime.strptime(date_str, "%Y%m%d").isoformat()
|
date = datetime.strptime(date_str, "%Y%m%d").isoformat()
|
||||||
bands = _get_bands_from_original(f, site_position)
|
bands = _get_bands_from_original(f, site_position)
|
||||||
|
|
@ -453,14 +456,33 @@ def _create_s2_bands_timeseries_for_dir(input_dir, output_dir, site_position):
|
||||||
timeseries.sort(key=lambda x: x["date"])
|
timeseries.sort(key=lambda x: x["date"])
|
||||||
output_dir.mkdir(parents=True, exist_ok=True)
|
output_dir.mkdir(parents=True, exist_ok=True)
|
||||||
(output_dir / "timeseries.json").write_text(json.dumps(timeseries, indent=2))
|
(output_dir / "timeseries.json").write_text(json.dumps(timeseries, indent=2))
|
||||||
print(f"[S2-BANDS] Saved: {output_dir / 'timeseries.json'} ({len(timeseries)} entries)")
|
print(f"[BANDS-{source_name}] Saved: {output_dir / 'timeseries.json'} ({len(timeseries)} entries)")
|
||||||
|
|
||||||
|
|
||||||
def create_s2_bands_timeseries_post_process(season, site_position, site_name):
|
def create_prepared_fusion_timeseries(season, site_position, site_name):
|
||||||
|
"""Generate NDVI, GCC, and band timeseries for prepared S2/S3 and fusion outputs."""
|
||||||
|
for strategy in ["aggressive", "nonaggressive"]:
|
||||||
|
base = Path(f"data/{site_name}/{season}/prepared_{strategy}")
|
||||||
|
for source in ["s2", "s3"]:
|
||||||
|
inp = base / source
|
||||||
|
if inp.exists():
|
||||||
|
_create_timeseries_for_dir(inp, base / "ndvi" / source, site_position, f"PREPARED-{source.upper()}-{strategy}", "*.tif")
|
||||||
|
_create_gcc_timeseries_for_dir(inp, base / "gcc" / source, site_position, f"PREPARED-{source.upper()}-{strategy}", "*.tif")
|
||||||
|
_create_bands_timeseries_for_dir(inp, base / "bands" / source, site_position, f"PREPARED-{source.upper()}-{strategy}", "*.tif")
|
||||||
|
for sig, fusion_sub in [(None, "fusion"), (30, "fusion_sigma30")]:
|
||||||
|
inp = base / fusion_sub
|
||||||
|
if inp.exists():
|
||||||
|
_create_timeseries_for_dir(inp, base / "ndvi" / fusion_sub, site_position, f"FUSION-{strategy}-σ{sig or 20}", "*.tif")
|
||||||
|
_create_gcc_timeseries_for_dir(inp, base / "gcc" / fusion_sub, site_position, f"FUSION-{strategy}-σ{sig or 20}", "*.tif")
|
||||||
|
_create_bands_timeseries_for_dir(inp, base / "bands" / fusion_sub, site_position, f"FUSION-{strategy}-σ{sig or 20}", "*.tif")
|
||||||
|
|
||||||
|
|
||||||
|
def create_bands_timeseries_post_process(season, site_position, site_name):
|
||||||
for strategy in ["aggressive", "nonaggressive"]:
|
for strategy in ["aggressive", "nonaggressive"]:
|
||||||
for sigma in [20, 30]:
|
for sigma in [20, 30]:
|
||||||
processed_dir = f"processed_{strategy}_sigma{sigma}"
|
processed_dir = f"processed_{strategy}_sigma{sigma}"
|
||||||
input_dir = Path(f"data/{site_name}/{season}/{processed_dir}/s2/")
|
base = Path(f"data/{site_name}/{season}/{processed_dir}")
|
||||||
output_dir = Path(f"data/{site_name}/{season}/{processed_dir}/s2_bands/")
|
for source in ["s2", "s3", "fusion"]:
|
||||||
if input_dir.exists():
|
inp, out = base / source, base / "bands" / source
|
||||||
_create_s2_bands_timeseries_for_dir(input_dir, output_dir, site_position)
|
if inp.exists():
|
||||||
|
_create_bands_timeseries_for_dir(inp, out, site_position, f"POST-{source.upper()}-{strategy}-σ{sigma}", "*.geotiff")
|
||||||
|
|
|
||||||
|
|
@ -246,7 +246,7 @@ def calculate_scenario_metrics(season, site_name, strategy, sigma, site_position
|
||||||
|
|
||||||
# Load timeseries
|
# Load timeseries
|
||||||
fusion_ts_path = base / processed_dir / "gcc" / "fusion" / "timeseries.json"
|
fusion_ts_path = base / processed_dir / "gcc" / "fusion" / "timeseries.json"
|
||||||
phenocam_ts_path = base / "raw" / "phenocam" / "timeseries.json"
|
phenocam_ts_path = base / "raw" / "phenocam" / "phenocam_gcc.json"
|
||||||
|
|
||||||
fusion_ts = load_timeseries(fusion_ts_path)
|
fusion_ts = load_timeseries(fusion_ts_path)
|
||||||
phenocam_ts = load_timeseries(phenocam_ts_path)
|
phenocam_ts = load_timeseries(phenocam_ts_path)
|
||||||
|
|
@ -270,7 +270,7 @@ def calculate_all_metrics(season, site_name, site_position):
|
||||||
base = Path(f"data/{site_name}/{season}")
|
base = Path(f"data/{site_name}/{season}")
|
||||||
|
|
||||||
# Load phenocam timeseries once (same for all scenarios)
|
# Load phenocam timeseries once (same for all scenarios)
|
||||||
phenocam_ts_path = base / "raw" / "phenocam" / "timeseries.json"
|
phenocam_ts_path = base / "raw" / "phenocam" / "phenocam_gcc.json"
|
||||||
phenocam_ts = load_timeseries(phenocam_ts_path)
|
phenocam_ts = load_timeseries(phenocam_ts_path)
|
||||||
|
|
||||||
if not phenocam_ts:
|
if not phenocam_ts:
|
||||||
|
|
|
||||||
|
|
@ -96,13 +96,20 @@ def process_cropped(season, site_position, site_name, cleaning_strategy="aggress
|
||||||
print("[PROCESS] Completed")
|
print("[PROCESS] Completed")
|
||||||
|
|
||||||
|
|
||||||
def process_all_scenarios(season, site_position, site_name):
|
def post_process_all_scenarios(season, site_position, site_name):
|
||||||
"""Process all 4 EFAST scenarios."""
|
"""Crop fusion/S2/S3 to valid pixels for all 4 scenarios."""
|
||||||
for strategy in ["aggressive", "nonaggressive"]:
|
for strategy in ["aggressive", "nonaggressive"]:
|
||||||
for sigma in [None, 30]:
|
for sigma in [None, 30]:
|
||||||
process_cropped(season, site_position, site_name, cleaning_strategy=strategy, sigma=sigma)
|
process_cropped(season, site_position, site_name, cleaning_strategy=strategy, sigma=sigma)
|
||||||
|
|
||||||
|
|
||||||
# Aliases
|
def post_process_timeseries(season, site_position, site_name):
|
||||||
postprocess = process_cropped
|
"""Generate NDVI, GCC, and S2 bands timeseries for all 4 scenarios."""
|
||||||
postprocess_all_scenarios = process_all_scenarios
|
from metrics_indices import (
|
||||||
|
create_ndvi_timeseries_post_process,
|
||||||
|
create_gcc_timeseries_post_process,
|
||||||
|
create_bands_timeseries_post_process,
|
||||||
|
)
|
||||||
|
create_ndvi_timeseries_post_process(season, site_position, site_name)
|
||||||
|
create_gcc_timeseries_post_process(season, site_position, site_name)
|
||||||
|
create_bands_timeseries_post_process(season, site_position, site_name)
|
||||||
|
|
|
||||||
|
|
@ -71,6 +71,25 @@ def _reproject_raster_to_target(
|
||||||
rio_shutil.copy(vrt, dst_path, **profile)
|
rio_shutil.copy(vrt, dst_path, **profile)
|
||||||
|
|
||||||
|
|
||||||
|
def _rescale_dist_cloud_for_small_roi(s2_output_dir):
|
||||||
|
"""Rescale DIST_CLOUD when max distance ≤1 so EFAST fusion gets valid weights.
|
||||||
|
|
||||||
|
EFAST uses wo_i = (distance - 1) / D; values ≤1 yield zero/NaN weights. In small
|
||||||
|
ROIs (e.g. PhenoCam sites, 7×4 LR grid), distance_transform_edt never exceeds 1.
|
||||||
|
Scale non-zero values to ≥2 so fusion can produce non-NaN output.
|
||||||
|
"""
|
||||||
|
for dc_path in s2_output_dir.glob("*DIST_CLOUD.tif"):
|
||||||
|
with rasterio.open(dc_path, "r") as src:
|
||||||
|
d = src.read(1)
|
||||||
|
d_max = float(np.nanmax(d))
|
||||||
|
if d_max <= 1:
|
||||||
|
# Map (0, 1] -> (0, 2] so (d-1)/15 gives positive weight
|
||||||
|
d_scaled = np.where(d > 0, 2.0, d).astype(np.float32)
|
||||||
|
with rasterio.open(dc_path, "r+") as dst:
|
||||||
|
dst.write(d_scaled, 1)
|
||||||
|
print(f"[S2-PREP] Rescaled DIST_CLOUD for {dc_path.name} (max was {d_max})")
|
||||||
|
|
||||||
|
|
||||||
def prepare_s2(season, site_position, site_name, cleaning_strategy="aggressive", date_range=None):
|
def prepare_s2(season, site_position, site_name, cleaning_strategy="aggressive", date_range=None):
|
||||||
lat, lon = site_position
|
lat, lon = site_position
|
||||||
s2_dir = Path(f"data/{site_name}/{season}/raw/s2/")
|
s2_dir = Path(f"data/{site_name}/{season}/raw/s2/")
|
||||||
|
|
@ -120,6 +139,7 @@ def prepare_s2(season, site_position, site_name, cleaning_strategy="aggressive",
|
||||||
print(f"[S2-PREP] Computing distance-to-clouds...")
|
print(f"[S2-PREP] Computing distance-to-clouds...")
|
||||||
distance_to_clouds = _import_distance_to_clouds()
|
distance_to_clouds = _import_distance_to_clouds()
|
||||||
distance_to_clouds(s2_output_dir, ratio=RESOLUTION_RATIO)
|
distance_to_clouds(s2_output_dir, ratio=RESOLUTION_RATIO)
|
||||||
|
_rescale_dist_cloud_for_small_roi(s2_output_dir)
|
||||||
print("[S2-PREP] Completed")
|
print("[S2-PREP] Completed")
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
53
run.py
53
run.py
|
|
@ -1,16 +1,12 @@
|
||||||
from fusion import run_all_efast_scenarios
|
from fusion import run_all_efast_scenarios
|
||||||
# from postprocessing import process_all_scenarios
|
from postprocessing import post_process_all_scenarios, post_process_timeseries
|
||||||
# from metrics_indices import (
|
|
||||||
# create_ndvi_timeseries_post_process,
|
|
||||||
# create_gcc_timeseries_post_process,
|
|
||||||
# create_s2_bands_timeseries_post_process,
|
|
||||||
# )
|
|
||||||
from acquisition_s2 import download_s2
|
from acquisition_s2 import download_s2
|
||||||
from acquisition_s3 import download_s3
|
from acquisition_s3 import download_s3
|
||||||
from acquisition_phenocam import download_phenocam
|
from acquisition_phenocam import download_phenocam
|
||||||
from preselection import create_timeseries
|
from preselection import create_timeseries
|
||||||
from preparation import prepare_s2, prepare_s3
|
from preparation import prepare_s2, prepare_s3
|
||||||
# from metrics_stats import calculate_all_metrics
|
from metrics_indices import create_prepared_fusion_timeseries
|
||||||
|
from metrics_stats import calculate_all_metrics
|
||||||
|
|
||||||
|
|
||||||
def run_pipeline(season, site_position, site_name):
|
def run_pipeline(season, site_position, site_name):
|
||||||
|
|
@ -21,27 +17,26 @@ def run_pipeline(season, site_position, site_name):
|
||||||
#download_s3(season, site_position, site_name)
|
#download_s3(season, site_position, site_name)
|
||||||
#download_phenocam(season, site_position, site_name)
|
#download_phenocam(season, site_position, site_name)
|
||||||
|
|
||||||
#print(f"Creating preselection timeseries: {site_name}, {season}")
|
print(f"Creating preselection timeseries: {site_name}, {season}")
|
||||||
#create_timeseries(season, site_position, site_name)
|
create_timeseries(season, site_position, site_name)
|
||||||
|
|
||||||
#print(f"Preparing S2 and S3 for fusion: {site_name}, {season}")
|
print(f"Preparing S2 and S3 for fusion: {site_name}, {season}")
|
||||||
#for strategy in ["aggressive", "nonaggressive"]:
|
for strategy in ["aggressive", "nonaggressive"]:
|
||||||
# prepare_s2(season, site_position, site_name, cleaning_strategy=strategy)
|
prepare_s2(season, site_position, site_name, cleaning_strategy=strategy)
|
||||||
# prepare_s3(season, site_position, site_name, cleaning_strategy=strategy)
|
prepare_s3(season, site_position, site_name, cleaning_strategy=strategy)
|
||||||
|
|
||||||
print(f"Running EFAST fusion for all scenarios: {site_name}, {season}")
|
print(f"Running EFAST fusion for all scenarios: {site_name}, {season}")
|
||||||
run_all_efast_scenarios(season, site_position, site_name)
|
run_all_efast_scenarios(season, site_position, site_name)
|
||||||
|
|
||||||
# print(f"Post-processing data: {site_name}, {season}")
|
print(f"Creating prepared/fusion timeseries: {site_name}, {season}")
|
||||||
# process_all_scenarios(season, site_position, site_name)
|
create_prepared_fusion_timeseries(season, site_position, site_name)
|
||||||
# print(f"Generating NDVI for final outputs: {site_name}, {season}")
|
|
||||||
# create_ndvi_timeseries_post_process(season, site_position, site_name)
|
print(f"Post-processing: {site_name}, {season}")
|
||||||
# print(f"Generating GCC for final outputs: {site_name}, {season}")
|
post_process_all_scenarios(season, site_position, site_name)
|
||||||
# create_gcc_timeseries_post_process(season, site_position, site_name)
|
post_process_timeseries(season, site_position, site_name)
|
||||||
# print(f"Generating S2 band timeseries: {site_name}, {season}")
|
|
||||||
# create_s2_bands_timeseries_post_process(season, site_position, site_name)
|
print(f"Calculating metrics: {site_name}, {season}")
|
||||||
# print(f"Calculating metrics: {site_name}, {season}")
|
calculate_all_metrics(season, site_name, site_position)
|
||||||
# calculate_all_metrics(season, site_name, site_position)
|
|
||||||
|
|
||||||
except Exception as e:
|
except Exception as e:
|
||||||
print(f"Error: {e}")
|
print(f"Error: {e}")
|
||||||
|
|
@ -50,10 +45,10 @@ def run_pipeline(season, site_position, site_name):
|
||||||
|
|
||||||
if __name__ == "__main__":
|
if __name__ == "__main__":
|
||||||
run_pipeline(2024, (47.116171, 11.320308), "innsbruck")
|
run_pipeline(2024, (47.116171, 11.320308), "innsbruck")
|
||||||
# run_pipeline(2024, (35.3045, 25.0743), "forthgr")
|
run_pipeline(2024, (35.3045, 25.0743), "forthgr")
|
||||||
# run_pipeline(2020, (47.116171, 11.320308), "innsbruck")
|
run_pipeline(2020, (47.116171, 11.320308), "innsbruck")
|
||||||
# run_pipeline(2024, (58.5633, 24.3688), "pitsalu")
|
run_pipeline(2024, (58.5633, 24.3688), "pitsalu")
|
||||||
# run_pipeline(2023, (64.2437, 19.7673), "vindeln2")
|
run_pipeline(2023, (64.2437, 19.7673), "vindeln2")
|
||||||
# run_pipeline(2024, (36.7455, -6.0033), "sunflowerjerez1")
|
run_pipeline(2024, (36.7455, -6.0033), "sunflowerjerez1")
|
||||||
# run_pipeline(2024, (42.6558, 26.9837), "institutekarnobat")
|
run_pipeline(2024, (42.6558, 26.9837), "institutekarnobat")
|
||||||
|
|
||||||
|
|
|
||||||
361
webapp/fusion.html
Normal file
361
webapp/fusion.html
Normal file
|
|
@ -0,0 +1,361 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title>Fusion Viewer</title>
|
||||||
|
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
|
||||||
|
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/geotiff@2.0.7/dist-browser/geotiff.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/proj4@2.9.0/dist/proj4.js"></script>
|
||||||
|
<style>
|
||||||
|
body { margin: 0; font-family: sans-serif; }
|
||||||
|
.nav { margin-bottom: 15px; font-size: 14px; }
|
||||||
|
.nav a { margin-right: 12px; color: #0066cc; text-decoration: none; }
|
||||||
|
.nav a:hover { text-decoration: underline; }
|
||||||
|
.nav a.active { font-weight: bold; }
|
||||||
|
.container { max-width: 900px; margin: 0 auto; padding: 20px; }
|
||||||
|
.selectors { margin-bottom: 20px; }
|
||||||
|
.selectors select { padding: 5px 10px; font-size: 14px; margin-right: 15px; }
|
||||||
|
h1 { margin: 0 0 5px 0; font-size: 22px; }
|
||||||
|
.season-row { padding-bottom: 15px; }
|
||||||
|
h2 { margin: 0; font-size: 16px; color: #666; display: inline; }
|
||||||
|
#dateSlider { width: 100%; margin: 15px 0; }
|
||||||
|
#dateDisplay { text-align: center; font-size: 14px; color: #666; }
|
||||||
|
.map-label { font-size: 12px; margin-bottom: 3px; color: #666; }
|
||||||
|
.map-date { font-size: 11px; margin-top: 3px; color: #999; }
|
||||||
|
.plot-label { font-size: 12px; margin-bottom: 3px; color: #666; }
|
||||||
|
.plot { width: 100%; height: 100px; border: 1px solid #ccc; margin-bottom: 15px; }
|
||||||
|
#fusionMap { height: 500px; border: 1px solid #ccc; margin-top: 10px; }
|
||||||
|
.leaflet-image-layer { image-rendering: pixelated; }
|
||||||
|
.leaflet-control-attribution { display: none; }
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="container">
|
||||||
|
<div class="nav">
|
||||||
|
<a href="index.html">Full</a>
|
||||||
|
<a href="preselection.html">Pre-selection</a>
|
||||||
|
<a href="prepared.html">Prepared</a>
|
||||||
|
<a href="fusion.html" class="active">Fusion</a>
|
||||||
|
<a href="postprocessed.html">Postprocessed</a>
|
||||||
|
</div>
|
||||||
|
<h1 id="siteName">Innsbruck</h1>
|
||||||
|
<div class="season-row"><h2 id="season">2024</h2></div>
|
||||||
|
<div class="selectors">
|
||||||
|
<label>Site:</label>
|
||||||
|
<select id="siteSelect"></select>
|
||||||
|
<label>Season:</label>
|
||||||
|
<select id="seasonSelect"></select>
|
||||||
|
<label>Strategy:</label>
|
||||||
|
<select id="strategySelect">
|
||||||
|
<option value="aggressive">Aggressive</option>
|
||||||
|
<option value="nonaggressive">Non-aggressive</option>
|
||||||
|
</select>
|
||||||
|
<label>Sigma:</label>
|
||||||
|
<select id="sigmaSelect">
|
||||||
|
<option value="20">σ=20</option>
|
||||||
|
<option value="30">σ=30</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<input type="range" id="dateSlider" min="0" max="365" value="0">
|
||||||
|
<div id="dateDisplay">2024-01-01</div>
|
||||||
|
<div class="map-label">Fusion RGB (closest available)</div>
|
||||||
|
<div id="mapDate" class="map-date"></div>
|
||||||
|
<div id="fusionMap"></div>
|
||||||
|
<div id="plots">
|
||||||
|
<div class="plot-label">NDVI</div><canvas id="plot_ndvi" class="plot"></canvas>
|
||||||
|
<div class="plot-label">GCC</div><canvas id="plot_gcc" class="plot"></canvas>
|
||||||
|
<div class="plot-label">B02 (Blue)</div><canvas id="plot_b02" class="plot"></canvas>
|
||||||
|
<div class="plot-label">B03 (Green)</div><canvas id="plot_b03" class="plot"></canvas>
|
||||||
|
<div class="plot-label">B04 (Red)</div><canvas id="plot_b04" class="plot"></canvas>
|
||||||
|
<div class="plot-label">B8A (NIR)</div><canvas id="plot_b8a" class="plot"></canvas>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<script>
|
||||||
|
proj4.defs("EPSG:32632", "+proj=utm +zone=32 +datum=WGS84 +units=m +no_defs");
|
||||||
|
proj4.defs("EPSG:4326", "+proj=longlat +datum=WGS84 +no_defs");
|
||||||
|
|
||||||
|
let siteName = "innsbruck", season = "2024";
|
||||||
|
let strategy = "aggressive", sigma = "20";
|
||||||
|
let sitePosition = [47.116171, 11.320308];
|
||||||
|
let start = new Date(2024, 0, 1);
|
||||||
|
let availableSiteSeasons = {};
|
||||||
|
let fusionMap = null, overlay = null, marker = null;
|
||||||
|
let ndviTs = [], gccTs = [], bandsTs = [];
|
||||||
|
const BANDS = [{key:"b02",color:"#0066ff"},{key:"b03",color:"#00aa00"},{key:"b04",color:"#cc0000"},{key:"b8a",color:"#9900cc"}];
|
||||||
|
const urlParams = new URLSearchParams(location.search);
|
||||||
|
const osmUrl = "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png";
|
||||||
|
|
||||||
|
const fmtDate = (d) => `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}-${String(d.getDate()).padStart(2, "0")}`;
|
||||||
|
const dateFromDays = (days) => fmtDate(new Date(start.getTime() + days * 86400000));
|
||||||
|
const daysFromDate = (dateStr) => {
|
||||||
|
const [y, m, d] = dateStr.split("-").map(Number);
|
||||||
|
return Math.floor((new Date(y, m - 1, d) - start) / 86400000);
|
||||||
|
};
|
||||||
|
|
||||||
|
function getFusionDir() {
|
||||||
|
return sigma === "30"
|
||||||
|
? `data/${siteName}/${season}/prepared_${strategy}/fusion_sigma30`
|
||||||
|
: `data/${siteName}/${season}/prepared_${strategy}/fusion`;
|
||||||
|
}
|
||||||
|
|
||||||
|
function getFusionTimeseriesDir() {
|
||||||
|
return sigma === "30" ? "fusion_sigma30" : "fusion";
|
||||||
|
}
|
||||||
|
|
||||||
|
async function loadTimeseries() {
|
||||||
|
const sub = getFusionTimeseriesDir();
|
||||||
|
try {
|
||||||
|
const base = `data/${siteName}/${season}/prepared_${strategy}`;
|
||||||
|
const [n, g, b] = await Promise.all([
|
||||||
|
fetch(`${base}/ndvi/${sub}/timeseries.json`).then(r => r.ok ? r.json() : []),
|
||||||
|
fetch(`${base}/gcc/${sub}/timeseries.json`).then(r => r.ok ? r.json() : []),
|
||||||
|
fetch(`${base}/bands/${sub}/timeseries.json`).then(r => r.ok ? r.json() : [])
|
||||||
|
]);
|
||||||
|
ndviTs = n; gccTs = g; bandsTs = b;
|
||||||
|
} catch { ndviTs = []; gccTs = []; bandsTs = []; }
|
||||||
|
drawPlots();
|
||||||
|
}
|
||||||
|
|
||||||
|
function drawPlot(canvasId, data, key, color) {
|
||||||
|
const canvas = document.getElementById(canvasId);
|
||||||
|
if (!canvas) return;
|
||||||
|
const ctx = canvas.getContext("2d");
|
||||||
|
canvas.width = canvas.offsetWidth;
|
||||||
|
canvas.height = 100;
|
||||||
|
const w = canvas.width, h = canvas.height, pad = 30;
|
||||||
|
const plotW = w - pad * 2, plotH = h - pad * 2;
|
||||||
|
const pts = data.filter(t => t[key] != null);
|
||||||
|
if (!pts.length) { ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.fillStyle = "#999"; ctx.font = "12px sans-serif"; ctx.fillText("No data", pad, pad + plotH / 2); return; }
|
||||||
|
const dates = pts.map(t => new Date(t.date));
|
||||||
|
const vals = pts.map(t => t[key]);
|
||||||
|
const minD = new Date(Math.min(...dates)), maxD = new Date(Math.max(...dates));
|
||||||
|
const minV = Math.min(...vals), maxV = Math.max(...vals);
|
||||||
|
const dRange = maxD - minD || 1, vRange = maxV - minV || 1;
|
||||||
|
const x = d => pad + ((new Date(d) - minD) / dRange) * plotW;
|
||||||
|
const y = v => pad + plotH - ((v - minV) / vRange) * plotH;
|
||||||
|
ctx.clearRect(0, 0, w, h);
|
||||||
|
ctx.strokeStyle = "#ccc";
|
||||||
|
ctx.beginPath(); ctx.moveTo(pad, pad); ctx.lineTo(pad, pad + plotH); ctx.lineTo(pad + plotW, pad + plotH); ctx.stroke();
|
||||||
|
ctx.fillStyle = "#000";
|
||||||
|
ctx.font = "9px sans-serif";
|
||||||
|
ctx.fillText(minV.toFixed(3), 2, pad + plotH + 10);
|
||||||
|
ctx.fillText(maxV.toFixed(3), 2, pad + 3);
|
||||||
|
ctx.strokeStyle = color;
|
||||||
|
ctx.beginPath();
|
||||||
|
pts.forEach((t, i) => { const px = x(t.date), py = y(t[key]); i ? ctx.lineTo(px, py) : ctx.moveTo(px, py); });
|
||||||
|
ctx.stroke();
|
||||||
|
const curDate = dateFromDays(parseInt(document.getElementById("dateSlider").value));
|
||||||
|
const xPos = x(curDate);
|
||||||
|
ctx.strokeStyle = "#f00";
|
||||||
|
ctx.lineWidth = 2;
|
||||||
|
ctx.beginPath(); ctx.moveTo(xPos, pad); ctx.lineTo(xPos, pad + plotH); ctx.stroke();
|
||||||
|
const closest = pts.reduce((c, t) => Math.abs(new Date(t.date) - new Date(curDate)) < Math.abs(new Date(c.date) - new Date(curDate)) ? t : c);
|
||||||
|
if (closest) { ctx.fillStyle = "#f00"; ctx.font = "bold 10px sans-serif"; ctx.fillText(closest[key].toFixed(3), xPos + 5, y(closest[key]) - 5); }
|
||||||
|
}
|
||||||
|
|
||||||
|
function drawPlots() {
|
||||||
|
drawPlot("plot_ndvi", ndviTs, "ndvi", "#2d7a3e");
|
||||||
|
drawPlot("plot_gcc", gccTs, "greenness_index", "#00aa00");
|
||||||
|
BANDS.forEach(b => drawPlot(`plot_${b.key}`, bandsTs, b.key, b.color));
|
||||||
|
}
|
||||||
|
|
||||||
|
async function findFusionFile(dateStr) {
|
||||||
|
const target = new Date(dateStr);
|
||||||
|
const yearEnd = new Date(parseInt(season), 11, 31);
|
||||||
|
const seasonStart = start.getTime();
|
||||||
|
const seasonEnd = yearEnd.getTime();
|
||||||
|
for (let offset = 0; offset <= 365; offset++) {
|
||||||
|
for (const dir of offset === 0 ? [0] : [-1, 1]) {
|
||||||
|
const d = new Date(target.getTime() + dir * offset * 86400000);
|
||||||
|
if (d.getTime() < seasonStart || d.getTime() > seasonEnd) continue;
|
||||||
|
const ds = d.toISOString().split("T")[0].replace(/-/g, "");
|
||||||
|
const filename = `REFL_${ds}.tif`;
|
||||||
|
try {
|
||||||
|
const res = await fetch(`${getFusionDir()}/${filename}`, { method: "HEAD" });
|
||||||
|
if (res.ok) return filename;
|
||||||
|
} catch {}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
function transformBounds(bbox, fromCRS) {
|
||||||
|
const sw = proj4(fromCRS, "EPSG:4326", [bbox[0], bbox[1]]);
|
||||||
|
const ne = proj4(fromCRS, "EPSG:4326", [bbox[2], bbox[3]]);
|
||||||
|
return [[sw[1], sw[0]], [ne[1], ne[0]]];
|
||||||
|
}
|
||||||
|
|
||||||
|
async function loadGeotiff(filename) {
|
||||||
|
const path = `${getFusionDir()}/${filename}`;
|
||||||
|
const tiff = await GeoTIFF.fromArrayBuffer(await (await fetch(path)).arrayBuffer());
|
||||||
|
const image = await tiff.getImage();
|
||||||
|
const rasters = await image.readRasters();
|
||||||
|
const width = image.getWidth(), height = image.getHeight();
|
||||||
|
const bbox = image.getBoundingBox();
|
||||||
|
const geoKeys = image.getGeoKeys();
|
||||||
|
const crsCode = geoKeys.ProjectedCSTypeGeoKey ? `EPSG:${geoKeys.ProjectedCSTypeGeoKey}` :
|
||||||
|
(geoKeys.GeographicTypeGeoKey !== 4326 ? `EPSG:${geoKeys.GeographicTypeGeoKey}` : "EPSG:4326");
|
||||||
|
const [blue, green, red] = [0, 1, 2].map(i => Array.from(rasters[i]));
|
||||||
|
const normalize = (arr) => {
|
||||||
|
let min = Infinity, max = -Infinity;
|
||||||
|
for (const v of arr) if (!isNaN(v) && v > 0) { min = Math.min(min, v); max = Math.max(max, v); }
|
||||||
|
return arr.map(v => Math.max(0, Math.min(255, ((v - min) / (max - min || 1)) * 255)));
|
||||||
|
};
|
||||||
|
const [rN, gN, bN] = [red, green, blue].map(normalize);
|
||||||
|
const canvas = Object.assign(document.createElement("canvas"), { width, height });
|
||||||
|
const ctx = canvas.getContext("2d");
|
||||||
|
ctx.imageSmoothingEnabled = false;
|
||||||
|
const imgData = ctx.createImageData(width, height);
|
||||||
|
for (let i = 0; i < rN.length; i++) {
|
||||||
|
const idx = i * 4;
|
||||||
|
if (rN[i] === 0 && gN[i] === 0 && bN[i] === 0) imgData.data[idx + 3] = 0;
|
||||||
|
else { imgData.data[idx] = rN[i]; imgData.data[idx + 1] = gN[i]; imgData.data[idx + 2] = bN[i]; imgData.data[idx + 3] = 255; }
|
||||||
|
}
|
||||||
|
ctx.putImageData(imgData, 0, 0);
|
||||||
|
const bounds = crsCode === "EPSG:4326" ? [[bbox[1], bbox[0]], [bbox[3], bbox[2]]] : transformBounds(bbox, crsCode);
|
||||||
|
const dateStr = filename.replace("REFL_", "").replace(".tif", "");
|
||||||
|
return { dataUrl: canvas.toDataURL(), bounds, dateStr };
|
||||||
|
}
|
||||||
|
|
||||||
|
async function updateMap() {
|
||||||
|
const dateStr = dateFromDays(parseInt(document.getElementById("dateSlider").value));
|
||||||
|
const filename = await findFusionFile(dateStr);
|
||||||
|
if (!filename || !fusionMap) {
|
||||||
|
if (overlay) { fusionMap.removeLayer(overlay); overlay = null; }
|
||||||
|
document.getElementById("mapDate").textContent = "";
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
try {
|
||||||
|
const { dataUrl, bounds, dateStr: ds } = await loadGeotiff(filename);
|
||||||
|
if (overlay) fusionMap.removeLayer(overlay);
|
||||||
|
overlay = L.imageOverlay(dataUrl, bounds, { opacity: 0.95 }).addTo(fusionMap);
|
||||||
|
fusionMap.fitBounds(bounds);
|
||||||
|
document.getElementById("mapDate").textContent = `${ds.slice(0,4)}-${ds.slice(4,6)}-${ds.slice(6,8)}`;
|
||||||
|
} catch (e) {
|
||||||
|
if (overlay) { fusionMap.removeLayer(overlay); overlay = null; }
|
||||||
|
document.getElementById("mapDate").textContent = "";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function probeDataExists(sitename, s) {
|
||||||
|
try {
|
||||||
|
const res = await fetch(`data/${sitename}/${s}/raw/preselection/s2_preselection.json`, { method: "HEAD" });
|
||||||
|
return res.ok;
|
||||||
|
} catch { return false; }
|
||||||
|
}
|
||||||
|
|
||||||
|
function getSiteBySitename(sn) {
|
||||||
|
return window.sitesData?.features?.find(f => f.properties?.sitename === sn);
|
||||||
|
}
|
||||||
|
|
||||||
|
async function setSiteSeason(newSite, newSeason) {
|
||||||
|
siteName = newSite;
|
||||||
|
season = newSeason;
|
||||||
|
start = new Date(parseInt(season), 0, 1);
|
||||||
|
const site = getSiteBySitename(newSite);
|
||||||
|
if (site?.geometry?.coordinates) {
|
||||||
|
const [lon, lat] = site.geometry.coordinates;
|
||||||
|
sitePosition = [lat, lon];
|
||||||
|
}
|
||||||
|
if (fusionMap) { fusionMap.setView(sitePosition, 12); if (marker) marker.setLatLng(sitePosition); }
|
||||||
|
document.getElementById("siteName").textContent = (site?.properties?.description || newSite);
|
||||||
|
document.getElementById("season").textContent = season;
|
||||||
|
const yearEnd = new Date(parseInt(season), 11, 31);
|
||||||
|
document.getElementById("dateSlider").max = Math.ceil((yearEnd - start) / 86400000);
|
||||||
|
const params = new URLSearchParams(location.search);
|
||||||
|
params.set("site", siteName);
|
||||||
|
params.set("season", season);
|
||||||
|
history.replaceState({}, "", `?${params}`);
|
||||||
|
const urlDate = params.get("date");
|
||||||
|
if (urlDate) document.getElementById("dateSlider").value = daysFromDate(urlDate);
|
||||||
|
document.getElementById("dateDisplay").textContent = dateFromDays(parseInt(document.getElementById("dateSlider").value));
|
||||||
|
await loadTimeseries();
|
||||||
|
await updateMap();
|
||||||
|
}
|
||||||
|
|
||||||
|
async function init() {
|
||||||
|
try {
|
||||||
|
const res = await fetch("data/sites.geojson");
|
||||||
|
window.sitesData = res.ok ? await res.json() : { features: [] };
|
||||||
|
} catch { window.sitesData = { features: [] }; }
|
||||||
|
const features = window.sitesData.features || [];
|
||||||
|
for (const f of features) {
|
||||||
|
const sn = f.properties?.sitename;
|
||||||
|
if (!sn) continue;
|
||||||
|
const seasonsFromGeo = f.properties?.seasons ? Object.keys(f.properties.seasons).sort() : [];
|
||||||
|
const withData = [];
|
||||||
|
for (const s of seasonsFromGeo) {
|
||||||
|
if (await probeDataExists(sn, s)) withData.push(s);
|
||||||
|
}
|
||||||
|
if (withData.length) availableSiteSeasons[sn] = withData;
|
||||||
|
}
|
||||||
|
const availableSites = Object.keys(availableSiteSeasons);
|
||||||
|
const siteSelect = document.getElementById("siteSelect");
|
||||||
|
siteSelect.innerHTML = "";
|
||||||
|
(availableSites.length ? availableSites.sort() : ["innsbruck"]).forEach(sn => {
|
||||||
|
const opt = document.createElement("option");
|
||||||
|
opt.value = sn;
|
||||||
|
opt.textContent = sn;
|
||||||
|
siteSelect.appendChild(opt);
|
||||||
|
if (!availableSiteSeasons[sn]) availableSiteSeasons[sn] = ["2024"];
|
||||||
|
});
|
||||||
|
|
||||||
|
const urlSite = urlParams.get("site");
|
||||||
|
const urlSeason = urlParams.get("season");
|
||||||
|
const initialSite = (urlSite && availableSiteSeasons[urlSite]) ? urlSite : (availableSites[0] || "innsbruck");
|
||||||
|
const initialSeason = (urlSeason && (availableSiteSeasons[initialSite] || []).includes(urlSeason)) ? urlSeason : ((availableSiteSeasons[initialSite] || [])[0] || "2024");
|
||||||
|
|
||||||
|
siteSelect.value = initialSite;
|
||||||
|
document.getElementById("seasonSelect").innerHTML = (availableSiteSeasons[initialSite] || []).map(s =>
|
||||||
|
`<option value="${s}">${s}</option>`
|
||||||
|
).join("");
|
||||||
|
document.getElementById("seasonSelect").value = initialSeason;
|
||||||
|
strategy = urlParams.get("strategy") || "aggressive";
|
||||||
|
sigma = urlParams.get("sigma") || "20";
|
||||||
|
document.getElementById("strategySelect").value = strategy;
|
||||||
|
document.getElementById("sigmaSelect").value = sigma;
|
||||||
|
|
||||||
|
const initSite = getSiteBySitename(initialSite);
|
||||||
|
if (initSite?.geometry?.coordinates) {
|
||||||
|
const [lon, lat] = initSite.geometry.coordinates;
|
||||||
|
sitePosition = [lat, lon];
|
||||||
|
}
|
||||||
|
fusionMap = L.map("fusionMap", { zoomControl: false }).setView(sitePosition, 12)
|
||||||
|
.addLayer(L.tileLayer(osmUrl, { attribution: "OpenStreetMap", opacity: 0.4 }));
|
||||||
|
marker = L.marker(sitePosition, { icon: L.divIcon({ className: "site-marker", html: "<div style='width:8px;height:8px;background:red;border:2px solid white;border-radius:50%;box-shadow:0 0 2px rgba(0,0,0,0.5);'></div>", iconSize: [8, 8] }) }).addTo(fusionMap);
|
||||||
|
|
||||||
|
siteSelect.addEventListener("change", function() {
|
||||||
|
const sn = this.value;
|
||||||
|
const seas = availableSiteSeasons[sn] || [];
|
||||||
|
document.getElementById("seasonSelect").innerHTML = seas.map(s => `<option value="${s}">${s}</option>`).join("");
|
||||||
|
document.getElementById("seasonSelect").value = seas[0] || "2024";
|
||||||
|
setSiteSeason(sn, document.getElementById("seasonSelect").value);
|
||||||
|
});
|
||||||
|
document.getElementById("seasonSelect").addEventListener("change", function() {
|
||||||
|
setSiteSeason(siteSelect.value, this.value);
|
||||||
|
});
|
||||||
|
document.getElementById("strategySelect").addEventListener("change", function() {
|
||||||
|
strategy = this.value;
|
||||||
|
urlParams.set("strategy", strategy);
|
||||||
|
history.replaceState({}, "", `?${urlParams}`);
|
||||||
|
loadTimeseries(); updateMap();
|
||||||
|
});
|
||||||
|
document.getElementById("sigmaSelect").addEventListener("change", function() {
|
||||||
|
sigma = this.value;
|
||||||
|
urlParams.set("sigma", sigma);
|
||||||
|
history.replaceState({}, "", `?${urlParams}`);
|
||||||
|
loadTimeseries(); updateMap();
|
||||||
|
});
|
||||||
|
|
||||||
|
await setSiteSeason(initialSite, initialSeason);
|
||||||
|
}
|
||||||
|
|
||||||
|
document.getElementById("dateSlider").addEventListener("input", function() {
|
||||||
|
document.getElementById("dateDisplay").textContent = dateFromDays(parseInt(this.value));
|
||||||
|
drawPlots(); updateMap();
|
||||||
|
});
|
||||||
|
|
||||||
|
init();
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -1,13 +1,17 @@
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<title>NDVI Viewer</title>
|
<title>Full</title>
|
||||||
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
|
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
|
||||||
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
|
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
|
||||||
<script src="https://cdn.jsdelivr.net/npm/geotiff@2.0.7/dist-browser/geotiff.js"></script>
|
<script src="https://cdn.jsdelivr.net/npm/geotiff@2.0.7/dist-browser/geotiff.js"></script>
|
||||||
<script src="https://cdn.jsdelivr.net/npm/proj4@2.9.0/dist/proj4.js"></script>
|
<script src="https://cdn.jsdelivr.net/npm/proj4@2.9.0/dist/proj4.js"></script>
|
||||||
<style>
|
<style>
|
||||||
body { margin: 0; font-family: sans-serif; }
|
body { margin: 0; font-family: sans-serif; }
|
||||||
|
.nav { margin-bottom: 10px; font-size: 14px; }
|
||||||
|
.nav a { margin-right: 12px; color: #0066cc; text-decoration: none; }
|
||||||
|
.nav a:hover { text-decoration: underline; }
|
||||||
|
.nav a.active { font-weight: bold; }
|
||||||
.slider-container { position: sticky; top: 0; background: white; padding: 20px; z-index: 1000; border-bottom: 1px solid #ccc; }
|
.slider-container { position: sticky; top: 0; background: white; padding: 20px; z-index: 1000; border-bottom: 1px solid #ccc; }
|
||||||
.scenario-selector { margin-bottom: 10px; }
|
.scenario-selector { margin-bottom: 10px; }
|
||||||
.scenario-selector select { padding: 5px 10px; font-size: 14px; }
|
.scenario-selector select { padding: 5px 10px; font-size: 14px; }
|
||||||
|
|
@ -43,6 +47,13 @@
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div class="container">
|
<div class="container">
|
||||||
|
<div class="nav">
|
||||||
|
<a href="index.html" class="active">Full</a>
|
||||||
|
<a href="preselection.html">Pre-selection</a>
|
||||||
|
<a href="prepared.html">Prepared</a>
|
||||||
|
<a href="fusion.html">Fusion</a>
|
||||||
|
<a href="postprocessed.html">Postprocessed</a>
|
||||||
|
</div>
|
||||||
<div class="slider-container">
|
<div class="slider-container">
|
||||||
<input type="range" id="dateSlider" min="0" max="365" value="0">
|
<input type="range" id="dateSlider" min="0" max="365" value="0">
|
||||||
<div id="dateDisplay">2024-01-01</div>
|
<div id="dateDisplay">2024-01-01</div>
|
||||||
|
|
@ -186,13 +197,13 @@
|
||||||
metricsData = null;
|
metricsData = null;
|
||||||
const fusionPath = getFusionPath();
|
const fusionPath = getFusionPath();
|
||||||
const [s2, fusion, s3, s2gcc, fusiongcc, s3gcc, phenocam] = await Promise.all([
|
const [s2, fusion, s3, s2gcc, fusiongcc, s3gcc, phenocam] = await Promise.all([
|
||||||
fetch(`../data/${siteName}/${season}/processed_${strategy}_sigma${sigma}/ndvi/s2/timeseries.json`).then(r => r.json()).catch(() => []),
|
fetch(`data/${siteName}/${season}/processed_${strategy}_sigma${sigma}/ndvi/s2/timeseries.json`).then(r => r.json()).catch(() => []),
|
||||||
fetch(`../data/${siteName}/${season}/${fusionPath}/ndvi/fusion/timeseries.json`).then(r => r.json()).catch(() => []),
|
fetch(`data/${siteName}/${season}/${fusionPath}/ndvi/fusion/timeseries.json`).then(r => r.json()).catch(() => []),
|
||||||
fetch(`../data/${siteName}/${season}/processed_${strategy}_sigma${sigma}/ndvi/s3/timeseries.json`).then(r => r.json()).catch(() => []),
|
fetch(`data/${siteName}/${season}/processed_${strategy}_sigma${sigma}/ndvi/s3/timeseries.json`).then(r => r.json()).catch(() => []),
|
||||||
fetch(`../data/${siteName}/${season}/processed_${strategy}_sigma${sigma}/gcc/s2/timeseries.json`).then(r => r.json()).catch(() => []),
|
fetch(`data/${siteName}/${season}/processed_${strategy}_sigma${sigma}/gcc/s2/timeseries.json`).then(r => r.json()).catch(() => []),
|
||||||
fetch(`../data/${siteName}/${season}/${fusionPath}/gcc/fusion/timeseries.json`).then(r => r.json()).catch(() => []),
|
fetch(`data/${siteName}/${season}/${fusionPath}/gcc/fusion/timeseries.json`).then(r => r.json()).catch(() => []),
|
||||||
fetch(`../data/${siteName}/${season}/processed_${strategy}_sigma${sigma}/gcc/s3/timeseries.json`).then(r => r.json()).catch(() => []),
|
fetch(`data/${siteName}/${season}/processed_${strategy}_sigma${sigma}/gcc/s3/timeseries.json`).then(r => r.json()).catch(() => []),
|
||||||
fetch(`../data/${siteName}/${season}/raw/phenocam/timeseries.json`).then(r => r.json()).catch(() => [])
|
fetch(`data/${siteName}/${season}/raw/phenocam/phenocam_gcc.json`).then(r => r.json()).catch(() => [])
|
||||||
]);
|
]);
|
||||||
timeseries = { s2, fusion, s3 };
|
timeseries = { s2, fusion, s3 };
|
||||||
greennessTimeseries = { s2: s2gcc, fusion: fusiongcc, s3: s3gcc };
|
greennessTimeseries = { s2: s2gcc, fusion: fusiongcc, s3: s3gcc };
|
||||||
|
|
@ -206,14 +217,14 @@
|
||||||
{ name: "Non-aggressive σ30", path: "processed_nonaggressive_sigma30" }
|
{ name: "Non-aggressive σ30", path: "processed_nonaggressive_sigma30" }
|
||||||
];
|
];
|
||||||
const scenarioPromises = scenarios.map(s =>
|
const scenarioPromises = scenarios.map(s =>
|
||||||
fetch(`../data/${siteName}/${season}/${s.path}/gcc/fusion/timeseries.json`).then(r => r.json()).catch(() => [])
|
fetch(`data/${siteName}/${season}/${s.path}/gcc/fusion/timeseries.json`).then(r => r.json()).catch(() => [])
|
||||||
);
|
);
|
||||||
const scenarioData = await Promise.all(scenarioPromises);
|
const scenarioData = await Promise.all(scenarioPromises);
|
||||||
scenarios.forEach((s, i) => { allScenariosGCC[s.name] = scenarioData[i]; });
|
scenarios.forEach((s, i) => { allScenariosGCC[s.name] = scenarioData[i]; });
|
||||||
|
|
||||||
// Load metrics
|
// Load metrics
|
||||||
try {
|
try {
|
||||||
const metricsRes = await fetch(`../data/${siteName}/${season}/metrics.json`);
|
const metricsRes = await fetch(`data/${siteName}/${season}/metrics.json`);
|
||||||
if (metricsRes.ok) metricsData = await metricsRes.json();
|
if (metricsRes.ok) metricsData = await metricsRes.json();
|
||||||
} catch {}
|
} catch {}
|
||||||
|
|
||||||
|
|
@ -685,32 +696,23 @@
|
||||||
async function findFile(dateStr, source) {
|
async function findFile(dateStr, source) {
|
||||||
const target = new Date(dateStr);
|
const target = new Date(dateStr);
|
||||||
const basePath = source === "fusion" ? getFusionPath() : `processed_${strategy}_sigma${sigma}`;
|
const basePath = source === "fusion" ? getFusionPath() : `processed_${strategy}_sigma${sigma}`;
|
||||||
// Search outward from target date (0, ±1, ±2, ±3, ...) until we find the closest file
|
const yearEnd = new Date(parseInt(season), 11, 31);
|
||||||
// Check dates in order: exact, then -1, +1, then -2, +2, etc.
|
const seasonStart = start.getTime();
|
||||||
// Limit to ±365 days to avoid infinite search
|
const seasonEnd = yearEnd.getTime();
|
||||||
for (let offset = 0; offset <= 365; offset++) {
|
for (let offset = 0; offset <= 365; offset++) {
|
||||||
// Check exact date first (offset=0)
|
const datesToTry = offset === 0
|
||||||
if (offset === 0) {
|
? [target]
|
||||||
const date = target.toISOString().split("T")[0].replace(/-/g, "");
|
: [new Date(target.getTime() - offset * 86400000), new Date(target.getTime() + offset * 86400000)];
|
||||||
const filename = `${date}_0.geotiff`;
|
for (const d of datesToTry) {
|
||||||
try {
|
if (d.getTime() < seasonStart || d.getTime() > seasonEnd) continue;
|
||||||
const res = await fetch(`../data/${siteName}/${season}/${basePath}/${source}/${filename}`, { method: 'HEAD' });
|
|
||||||
if (res.ok) return filename;
|
|
||||||
} catch {}
|
|
||||||
} else {
|
|
||||||
// Check -offset and +offset days
|
|
||||||
for (const dir of [-1, 1]) {
|
|
||||||
const d = new Date(target);
|
|
||||||
d.setDate(d.getDate() + offset * dir);
|
|
||||||
const date = d.toISOString().split("T")[0].replace(/-/g, "");
|
const date = d.toISOString().split("T")[0].replace(/-/g, "");
|
||||||
const filename = `${date}_0.geotiff`;
|
const filename = `${date}_0.geotiff`;
|
||||||
try {
|
try {
|
||||||
const res = await fetch(`../data/${siteName}/${season}/${basePath}/${source}/${filename}`, { method: 'HEAD' });
|
const res = await fetch(`data/${siteName}/${season}/${basePath}/${source}/${filename}`, { method: 'HEAD' });
|
||||||
if (res.ok) return filename;
|
if (res.ok) return filename;
|
||||||
} catch {}
|
} catch {}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
return null;
|
return null;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -721,7 +723,7 @@
|
||||||
|
|
||||||
async function loadGeotiff(source, filename) {
|
async function loadGeotiff(source, filename) {
|
||||||
const basePath = source === "fusion" ? getFusionPath() : `processed_${strategy}_sigma${sigma}`;
|
const basePath = source === "fusion" ? getFusionPath() : `processed_${strategy}_sigma${sigma}`;
|
||||||
const path = `../data/${siteName}/${season}/${basePath}/${source}/${filename}`;
|
const path = `data/${siteName}/${season}/${basePath}/${source}/${filename}`;
|
||||||
const tiff = await GeoTIFF.fromArrayBuffer(await (await fetch(path)).arrayBuffer());
|
const tiff = await GeoTIFF.fromArrayBuffer(await (await fetch(path)).arrayBuffer());
|
||||||
const image = await tiff.getImage();
|
const image = await tiff.getImage();
|
||||||
const rasters = await image.readRasters();
|
const rasters = await image.readRasters();
|
||||||
|
|
@ -786,7 +788,7 @@
|
||||||
const d = new Date(target);
|
const d = new Date(target);
|
||||||
d.setDate(d.getDate() + offset * dir);
|
d.setDate(d.getDate() + offset * dir);
|
||||||
const date = d.toISOString().split("T")[0].replace(/-/g, "");
|
const date = d.toISOString().split("T")[0].replace(/-/g, "");
|
||||||
const url = `../data/${siteName}/${season}/raw/phenocam/${date}.jpg`;
|
const url = `data/${siteName}/${season}/raw/phenocam/${date}.jpg`;
|
||||||
try {
|
try {
|
||||||
const res = await fetch(url, { method: 'HEAD' });
|
const res = await fetch(url, { method: 'HEAD' });
|
||||||
if (res.ok) {
|
if (res.ok) {
|
||||||
|
|
@ -862,7 +864,7 @@
|
||||||
|
|
||||||
async function probeDataExists(sitename, season) {
|
async function probeDataExists(sitename, season) {
|
||||||
try {
|
try {
|
||||||
const res = await fetch(`../data/${sitename}/${season}/metrics.json`, { method: "HEAD" });
|
const res = await fetch(`data/${sitename}/${season}/metrics.json`, { method: "HEAD" });
|
||||||
return res.ok;
|
return res.ok;
|
||||||
} catch { return false; }
|
} catch { return false; }
|
||||||
}
|
}
|
||||||
|
|
@ -905,7 +907,7 @@
|
||||||
|
|
||||||
async function init() {
|
async function init() {
|
||||||
try {
|
try {
|
||||||
const res = await fetch("../data/sites.geojson");
|
const res = await fetch("data/sites.geojson");
|
||||||
if (!res.ok) throw new Error("Could not load sites");
|
if (!res.ok) throw new Error("Could not load sites");
|
||||||
sitesData = await res.json();
|
sitesData = await res.json();
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
|
|
@ -922,7 +924,7 @@
|
||||||
for (const s of seasonsFromGeo) {
|
for (const s of seasonsFromGeo) {
|
||||||
if (await probeDataExists(sn, s)) withData.push(s);
|
if (await probeDataExists(sn, s)) withData.push(s);
|
||||||
}
|
}
|
||||||
if (withData.length) availableSiteSeasons[sn] = withData;
|
availableSiteSeasons[sn] = withData.length ? withData : seasonsFromGeo;
|
||||||
}
|
}
|
||||||
const availableSites = Object.keys(availableSiteSeasons);
|
const availableSites = Object.keys(availableSiteSeasons);
|
||||||
siteSelect.innerHTML = "";
|
siteSelect.innerHTML = "";
|
||||||
|
|
|
||||||
367
webapp/postprocessed.html
Normal file
367
webapp/postprocessed.html
Normal file
|
|
@ -0,0 +1,367 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title>Postprocessed Viewer</title>
|
||||||
|
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
|
||||||
|
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/geotiff@2.0.7/dist-browser/geotiff.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/proj4@2.9.0/dist/proj4.js"></script>
|
||||||
|
<style>
|
||||||
|
body { margin: 0; font-family: sans-serif; }
|
||||||
|
.nav { margin-bottom: 15px; font-size: 14px; }
|
||||||
|
.nav a { margin-right: 12px; color: #0066cc; text-decoration: none; }
|
||||||
|
.nav a:hover { text-decoration: underline; }
|
||||||
|
.nav a.active { font-weight: bold; }
|
||||||
|
.container { max-width: 900px; margin: 0 auto; padding: 20px; }
|
||||||
|
.selectors { margin-bottom: 20px; }
|
||||||
|
.selectors select { padding: 5px 10px; font-size: 14px; margin-right: 15px; }
|
||||||
|
h1 { margin: 0 0 5px 0; font-size: 22px; }
|
||||||
|
.season-row { padding-bottom: 15px; }
|
||||||
|
h2 { margin: 0; font-size: 16px; color: #666; display: inline; }
|
||||||
|
#dateSlider { width: 100%; margin: 15px 0; }
|
||||||
|
#dateDisplay { text-align: center; font-size: 14px; color: #666; }
|
||||||
|
.map-label { font-size: 12px; margin-bottom: 3px; color: #666; }
|
||||||
|
.map-date { font-size: 11px; margin-top: 3px; color: #999; }
|
||||||
|
.plot-label { font-size: 12px; margin-bottom: 3px; color: #666; }
|
||||||
|
.plot { width: 100%; height: 100px; border: 1px solid #ccc; margin-bottom: 15px; }
|
||||||
|
#postprocessedMap { height: 500px; border: 1px solid #ccc; margin-top: 10px; }
|
||||||
|
.leaflet-image-layer { image-rendering: pixelated; }
|
||||||
|
.leaflet-control-attribution { display: none; }
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="container">
|
||||||
|
<div class="nav">
|
||||||
|
<a href="index.html">Full</a>
|
||||||
|
<a href="preselection.html">Pre-selection</a>
|
||||||
|
<a href="prepared.html">Prepared</a>
|
||||||
|
<a href="fusion.html">Fusion</a>
|
||||||
|
<a href="postprocessed.html" class="active">Postprocessed</a>
|
||||||
|
</div>
|
||||||
|
<h1 id="siteName">Innsbruck</h1>
|
||||||
|
<div class="season-row"><h2 id="season">2024</h2></div>
|
||||||
|
<div class="selectors">
|
||||||
|
<label>Site:</label>
|
||||||
|
<select id="siteSelect"></select>
|
||||||
|
<label>Season:</label>
|
||||||
|
<select id="seasonSelect"></select>
|
||||||
|
<label>Strategy:</label>
|
||||||
|
<select id="strategySelect">
|
||||||
|
<option value="aggressive">Aggressive</option>
|
||||||
|
<option value="nonaggressive">Non-aggressive</option>
|
||||||
|
</select>
|
||||||
|
<label>Sigma:</label>
|
||||||
|
<select id="sigmaSelect">
|
||||||
|
<option value="20">σ=20</option>
|
||||||
|
<option value="30">σ=30</option>
|
||||||
|
</select>
|
||||||
|
<label>Source:</label>
|
||||||
|
<select id="sourceSelect">
|
||||||
|
<option value="s2">S2</option>
|
||||||
|
<option value="fusion">Fusion</option>
|
||||||
|
<option value="s3">S3</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<input type="range" id="dateSlider" min="0" max="365" value="0">
|
||||||
|
<div id="dateDisplay">2024-01-01</div>
|
||||||
|
<div class="map-label">Postprocessed RGB (closest available)</div>
|
||||||
|
<div id="mapDate" class="map-date"></div>
|
||||||
|
<div id="postprocessedMap"></div>
|
||||||
|
<div id="plots">
|
||||||
|
<div class="plot-label">NDVI</div><canvas id="plot_ndvi" class="plot"></canvas>
|
||||||
|
<div class="plot-label">GCC</div><canvas id="plot_gcc" class="plot"></canvas>
|
||||||
|
<div class="plot-label">B02 (Blue)</div><canvas id="plot_b02" class="plot"></canvas>
|
||||||
|
<div class="plot-label">B03 (Green)</div><canvas id="plot_b03" class="plot"></canvas>
|
||||||
|
<div class="plot-label">B04 (Red)</div><canvas id="plot_b04" class="plot"></canvas>
|
||||||
|
<div class="plot-label">B8A (NIR)</div><canvas id="plot_b8a" class="plot"></canvas>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<script>
|
||||||
|
proj4.defs("EPSG:32632", "+proj=utm +zone=32 +datum=WGS84 +units=m +no_defs");
|
||||||
|
proj4.defs("EPSG:4326", "+proj=longlat +datum=WGS84 +no_defs");
|
||||||
|
|
||||||
|
let siteName = "innsbruck", season = "2024";
|
||||||
|
let strategy = "aggressive", sigma = "20", source = "s2";
|
||||||
|
let sitePosition = [47.116171, 11.320308];
|
||||||
|
let start = new Date(2024, 0, 1);
|
||||||
|
let availableSiteSeasons = {};
|
||||||
|
let postprocessedMap = null, overlay = null, marker = null;
|
||||||
|
let ndviTs = [], gccTs = [], bandsTs = [];
|
||||||
|
const BANDS = [{key:"b02",color:"#0066ff"},{key:"b03",color:"#00aa00"},{key:"b04",color:"#cc0000"},{key:"b8a",color:"#9900cc"}];
|
||||||
|
const urlParams = new URLSearchParams(location.search);
|
||||||
|
const osmUrl = "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png";
|
||||||
|
|
||||||
|
const fmtDate = (d) => `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}-${String(d.getDate()).padStart(2, "0")}`;
|
||||||
|
const dateFromDays = (days) => fmtDate(new Date(start.getTime() + days * 86400000));
|
||||||
|
const daysFromDate = (dateStr) => {
|
||||||
|
const [y, m, d] = dateStr.split("-").map(Number);
|
||||||
|
return Math.floor((new Date(y, m - 1, d) - start) / 86400000);
|
||||||
|
};
|
||||||
|
|
||||||
|
function getProcessedPath() {
|
||||||
|
return `data/${siteName}/${season}/processed_${strategy}_sigma${sigma}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
async function loadTimeseries() {
|
||||||
|
try {
|
||||||
|
const [n, g, b] = await Promise.all([
|
||||||
|
fetch(`${getProcessedPath()}/ndvi/${source}/timeseries.json`).then(r => r.ok ? r.json() : []),
|
||||||
|
fetch(`${getProcessedPath()}/gcc/${source}/timeseries.json`).then(r => r.ok ? r.json() : []),
|
||||||
|
fetch(`${getProcessedPath()}/bands/${source}/timeseries.json`).then(r => r.ok ? r.json() : [])
|
||||||
|
]);
|
||||||
|
ndviTs = n; gccTs = g; bandsTs = b;
|
||||||
|
} catch { ndviTs = []; gccTs = []; bandsTs = []; }
|
||||||
|
drawPlots();
|
||||||
|
}
|
||||||
|
|
||||||
|
function drawPlot(canvasId, data, key, color) {
|
||||||
|
const canvas = document.getElementById(canvasId);
|
||||||
|
if (!canvas) return;
|
||||||
|
const ctx = canvas.getContext("2d");
|
||||||
|
canvas.width = canvas.offsetWidth;
|
||||||
|
canvas.height = 100;
|
||||||
|
const w = canvas.width, h = canvas.height, pad = 30;
|
||||||
|
const plotW = w - pad * 2, plotH = h - pad * 2;
|
||||||
|
const pts = data.filter(t => t[key] != null);
|
||||||
|
if (!pts.length) { ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.fillStyle = "#999"; ctx.font = "12px sans-serif"; ctx.fillText("No data", pad, pad + plotH / 2); return; }
|
||||||
|
const dates = pts.map(t => new Date(t.date));
|
||||||
|
const vals = pts.map(t => t[key]);
|
||||||
|
const minD = new Date(Math.min(...dates)), maxD = new Date(Math.max(...dates));
|
||||||
|
const minV = Math.min(...vals), maxV = Math.max(...vals);
|
||||||
|
const dRange = maxD - minD || 1, vRange = maxV - minV || 1;
|
||||||
|
const x = d => pad + ((new Date(d) - minD) / dRange) * plotW;
|
||||||
|
const y = v => pad + plotH - ((v - minV) / vRange) * plotH;
|
||||||
|
ctx.clearRect(0, 0, w, h);
|
||||||
|
ctx.strokeStyle = "#ccc";
|
||||||
|
ctx.beginPath(); ctx.moveTo(pad, pad); ctx.lineTo(pad, pad + plotH); ctx.lineTo(pad + plotW, pad + plotH); ctx.stroke();
|
||||||
|
ctx.fillStyle = "#000";
|
||||||
|
ctx.font = "9px sans-serif";
|
||||||
|
ctx.fillText(minV.toFixed(3), 2, pad + plotH + 10);
|
||||||
|
ctx.fillText(maxV.toFixed(3), 2, pad + 3);
|
||||||
|
ctx.strokeStyle = color;
|
||||||
|
ctx.beginPath();
|
||||||
|
pts.forEach((t, i) => { const px = x(t.date), py = y(t[key]); i ? ctx.lineTo(px, py) : ctx.moveTo(px, py); });
|
||||||
|
ctx.stroke();
|
||||||
|
const curDate = dateFromDays(parseInt(document.getElementById("dateSlider").value));
|
||||||
|
const xPos = x(curDate);
|
||||||
|
ctx.strokeStyle = "#f00";
|
||||||
|
ctx.lineWidth = 2;
|
||||||
|
ctx.beginPath(); ctx.moveTo(xPos, pad); ctx.lineTo(xPos, pad + plotH); ctx.stroke();
|
||||||
|
const closest = pts.reduce((c, t) => Math.abs(new Date(t.date) - new Date(curDate)) < Math.abs(new Date(c.date) - new Date(curDate)) ? t : c);
|
||||||
|
if (closest) { ctx.fillStyle = "#f00"; ctx.font = "bold 10px sans-serif"; ctx.fillText(closest[key].toFixed(3), xPos + 5, y(closest[key]) - 5); }
|
||||||
|
}
|
||||||
|
|
||||||
|
function drawPlots() {
|
||||||
|
drawPlot("plot_ndvi", ndviTs, "ndvi", "#2d7a3e");
|
||||||
|
drawPlot("plot_gcc", gccTs, "greenness_index", "#00aa00");
|
||||||
|
BANDS.forEach(b => drawPlot(`plot_${b.key}`, bandsTs, b.key, b.color));
|
||||||
|
}
|
||||||
|
|
||||||
|
async function findProcessedFile(dateStr) {
|
||||||
|
const target = new Date(dateStr);
|
||||||
|
const yearEnd = new Date(parseInt(season), 11, 31);
|
||||||
|
const seasonStart = start.getTime();
|
||||||
|
const seasonEnd = yearEnd.getTime();
|
||||||
|
for (let offset = 0; offset <= 365; offset++) {
|
||||||
|
for (const dir of offset === 0 ? [0] : [-1, 1]) {
|
||||||
|
const d = new Date(target.getTime() + dir * offset * 86400000);
|
||||||
|
if (d.getTime() < seasonStart || d.getTime() > seasonEnd) continue;
|
||||||
|
const ds = d.toISOString().split("T")[0].replace(/-/g, "");
|
||||||
|
const filename = `${ds}_0.geotiff`;
|
||||||
|
try {
|
||||||
|
const res = await fetch(`${getProcessedPath()}/${source}/${filename}`, { method: "HEAD" });
|
||||||
|
if (res.ok) return filename;
|
||||||
|
} catch {}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
function transformBounds(bbox, fromCRS) {
|
||||||
|
const sw = proj4(fromCRS, "EPSG:4326", [bbox[0], bbox[1]]);
|
||||||
|
const ne = proj4(fromCRS, "EPSG:4326", [bbox[2], bbox[3]]);
|
||||||
|
return [[sw[1], sw[0]], [ne[1], ne[0]]];
|
||||||
|
}
|
||||||
|
|
||||||
|
async function loadGeotiff(filename) {
|
||||||
|
const path = `${getProcessedPath()}/${source}/${filename}`;
|
||||||
|
const tiff = await GeoTIFF.fromArrayBuffer(await (await fetch(path)).arrayBuffer());
|
||||||
|
const image = await tiff.getImage();
|
||||||
|
const rasters = await image.readRasters();
|
||||||
|
const width = image.getWidth(), height = image.getHeight();
|
||||||
|
const bbox = image.getBoundingBox();
|
||||||
|
const geoKeys = image.getGeoKeys();
|
||||||
|
const crsCode = geoKeys.ProjectedCSTypeGeoKey ? `EPSG:${geoKeys.ProjectedCSTypeGeoKey}` :
|
||||||
|
(geoKeys.GeographicTypeGeoKey !== 4326 ? `EPSG:${geoKeys.GeographicTypeGeoKey}` : "EPSG:4326");
|
||||||
|
const [blue, green, red] = [0, 1, 2].map(i => Array.from(rasters[i]));
|
||||||
|
const normalize = (arr) => {
|
||||||
|
let min = Infinity, max = -Infinity;
|
||||||
|
for (const v of arr) if (!isNaN(v) && v > 0) { min = Math.min(min, v); max = Math.max(max, v); }
|
||||||
|
return arr.map(v => Math.max(0, Math.min(255, ((v - min) / (max - min || 1)) * 255)));
|
||||||
|
};
|
||||||
|
const [rN, gN, bN] = [red, green, blue].map(normalize);
|
||||||
|
const canvas = Object.assign(document.createElement("canvas"), { width, height });
|
||||||
|
const ctx = canvas.getContext("2d");
|
||||||
|
ctx.imageSmoothingEnabled = false;
|
||||||
|
const imgData = ctx.createImageData(width, height);
|
||||||
|
for (let i = 0; i < rN.length; i++) {
|
||||||
|
const idx = i * 4;
|
||||||
|
if (rN[i] === 0 && gN[i] === 0 && bN[i] === 0) imgData.data[idx + 3] = 0;
|
||||||
|
else { imgData.data[idx] = rN[i]; imgData.data[idx + 1] = gN[i]; imgData.data[idx + 2] = bN[i]; imgData.data[idx + 3] = 255; }
|
||||||
|
}
|
||||||
|
ctx.putImageData(imgData, 0, 0);
|
||||||
|
const bounds = crsCode === "EPSG:4326" ? [[bbox[1], bbox[0]], [bbox[3], bbox[2]]] : transformBounds(bbox, crsCode);
|
||||||
|
const dateStr = filename.replace("_0.geotiff", "");
|
||||||
|
return { dataUrl: canvas.toDataURL(), bounds, dateStr };
|
||||||
|
}
|
||||||
|
|
||||||
|
async function updateMap() {
|
||||||
|
const dateStr = dateFromDays(parseInt(document.getElementById("dateSlider").value));
|
||||||
|
const filename = await findProcessedFile(dateStr);
|
||||||
|
if (!filename || !postprocessedMap) {
|
||||||
|
if (overlay) { postprocessedMap.removeLayer(overlay); overlay = null; }
|
||||||
|
document.getElementById("mapDate").textContent = "";
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
try {
|
||||||
|
const { dataUrl, bounds, dateStr: ds } = await loadGeotiff(filename);
|
||||||
|
if (overlay) postprocessedMap.removeLayer(overlay);
|
||||||
|
overlay = L.imageOverlay(dataUrl, bounds, { opacity: 0.95 }).addTo(postprocessedMap);
|
||||||
|
postprocessedMap.fitBounds(bounds);
|
||||||
|
document.getElementById("mapDate").textContent = `${ds.slice(0,4)}-${ds.slice(4,6)}-${ds.slice(6,8)}`;
|
||||||
|
} catch (e) {
|
||||||
|
if (overlay) { postprocessedMap.removeLayer(overlay); overlay = null; }
|
||||||
|
document.getElementById("mapDate").textContent = "";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function probeDataExists(sitename, s) {
|
||||||
|
try {
|
||||||
|
const res = await fetch(`data/${sitename}/${s}/metrics.json`, { method: "HEAD" });
|
||||||
|
return res.ok;
|
||||||
|
} catch { return false; }
|
||||||
|
}
|
||||||
|
|
||||||
|
function getSiteBySitename(sn) {
|
||||||
|
return window.sitesData?.features?.find(f => f.properties?.sitename === sn);
|
||||||
|
}
|
||||||
|
|
||||||
|
async function setSiteSeason(newSite, newSeason) {
|
||||||
|
siteName = newSite;
|
||||||
|
season = newSeason;
|
||||||
|
start = new Date(parseInt(season), 0, 1);
|
||||||
|
const site = getSiteBySitename(newSite);
|
||||||
|
if (site?.geometry?.coordinates) {
|
||||||
|
const [lon, lat] = site.geometry.coordinates;
|
||||||
|
sitePosition = [lat, lon];
|
||||||
|
}
|
||||||
|
if (postprocessedMap) { postprocessedMap.setView(sitePosition, 12); if (marker) marker.setLatLng(sitePosition); }
|
||||||
|
document.getElementById("siteName").textContent = (site?.properties?.description || newSite);
|
||||||
|
document.getElementById("season").textContent = season;
|
||||||
|
const yearEnd = new Date(parseInt(season), 11, 31);
|
||||||
|
document.getElementById("dateSlider").max = Math.ceil((yearEnd - start) / 86400000);
|
||||||
|
const params = new URLSearchParams(location.search);
|
||||||
|
params.set("site", siteName);
|
||||||
|
params.set("season", season);
|
||||||
|
history.replaceState({}, "", `?${params}`);
|
||||||
|
const urlDate = params.get("date");
|
||||||
|
if (urlDate) document.getElementById("dateSlider").value = daysFromDate(urlDate);
|
||||||
|
document.getElementById("dateDisplay").textContent = dateFromDays(parseInt(document.getElementById("dateSlider").value));
|
||||||
|
await loadTimeseries();
|
||||||
|
await updateMap();
|
||||||
|
}
|
||||||
|
|
||||||
|
async function init() {
|
||||||
|
try {
|
||||||
|
const res = await fetch("data/sites.geojson");
|
||||||
|
window.sitesData = res.ok ? await res.json() : { features: [] };
|
||||||
|
} catch { window.sitesData = { features: [] }; }
|
||||||
|
const features = window.sitesData.features || [];
|
||||||
|
for (const f of features) {
|
||||||
|
const sn = f.properties?.sitename;
|
||||||
|
if (!sn) continue;
|
||||||
|
const seasonsFromGeo = f.properties?.seasons ? Object.keys(f.properties.seasons).sort() : [];
|
||||||
|
const withData = [];
|
||||||
|
for (const s of seasonsFromGeo) {
|
||||||
|
if (await probeDataExists(sn, s)) withData.push(s);
|
||||||
|
}
|
||||||
|
if (withData.length) availableSiteSeasons[sn] = withData;
|
||||||
|
}
|
||||||
|
const availableSites = Object.keys(availableSiteSeasons);
|
||||||
|
const siteSelect = document.getElementById("siteSelect");
|
||||||
|
siteSelect.innerHTML = "";
|
||||||
|
(availableSites.length ? availableSites.sort() : ["innsbruck"]).forEach(sn => {
|
||||||
|
const opt = document.createElement("option");
|
||||||
|
opt.value = sn;
|
||||||
|
opt.textContent = sn;
|
||||||
|
siteSelect.appendChild(opt);
|
||||||
|
if (!availableSiteSeasons[sn]) availableSiteSeasons[sn] = ["2024"];
|
||||||
|
});
|
||||||
|
|
||||||
|
const urlSite = urlParams.get("site");
|
||||||
|
const urlSeason = urlParams.get("season");
|
||||||
|
const initialSite = (urlSite && availableSiteSeasons[urlSite]) ? urlSite : (availableSites[0] || "innsbruck");
|
||||||
|
const initialSeason = (urlSeason && (availableSiteSeasons[initialSite] || []).includes(urlSeason)) ? urlSeason : ((availableSiteSeasons[initialSite] || [])[0] || "2024");
|
||||||
|
|
||||||
|
siteSelect.value = initialSite;
|
||||||
|
document.getElementById("seasonSelect").innerHTML = (availableSiteSeasons[initialSite] || []).map(s =>
|
||||||
|
`<option value="${s}">${s}</option>`
|
||||||
|
).join("");
|
||||||
|
document.getElementById("seasonSelect").value = initialSeason;
|
||||||
|
strategy = urlParams.get("strategy") || "aggressive";
|
||||||
|
sigma = urlParams.get("sigma") || "20";
|
||||||
|
source = urlParams.get("source") || "s2";
|
||||||
|
document.getElementById("strategySelect").value = strategy;
|
||||||
|
document.getElementById("sigmaSelect").value = sigma;
|
||||||
|
document.getElementById("sourceSelect").value = source;
|
||||||
|
|
||||||
|
const initSite = getSiteBySitename(initialSite);
|
||||||
|
if (initSite?.geometry?.coordinates) {
|
||||||
|
const [lon, lat] = initSite.geometry.coordinates;
|
||||||
|
sitePosition = [lat, lon];
|
||||||
|
}
|
||||||
|
postprocessedMap = L.map("postprocessedMap", { zoomControl: false }).setView(sitePosition, 12)
|
||||||
|
.addLayer(L.tileLayer(osmUrl, { attribution: "OpenStreetMap", opacity: 0.4 }));
|
||||||
|
marker = L.marker(sitePosition, { icon: L.divIcon({ className: "site-marker", html: "<div style='width:8px;height:8px;background:red;border:2px solid white;border-radius:50%;box-shadow:0 0 2px rgba(0,0,0,0.5);'></div>", iconSize: [8, 8] }) }).addTo(postprocessedMap);
|
||||||
|
|
||||||
|
siteSelect.addEventListener("change", function() {
|
||||||
|
const sn = this.value;
|
||||||
|
const seas = availableSiteSeasons[sn] || [];
|
||||||
|
document.getElementById("seasonSelect").innerHTML = seas.map(s => `<option value="${s}">${s}</option>`).join("");
|
||||||
|
document.getElementById("seasonSelect").value = seas[0] || "2024";
|
||||||
|
setSiteSeason(sn, document.getElementById("seasonSelect").value);
|
||||||
|
});
|
||||||
|
document.getElementById("seasonSelect").addEventListener("change", function() {
|
||||||
|
setSiteSeason(siteSelect.value, this.value);
|
||||||
|
});
|
||||||
|
document.getElementById("strategySelect").addEventListener("change", function() {
|
||||||
|
strategy = this.value;
|
||||||
|
urlParams.set("strategy", strategy);
|
||||||
|
history.replaceState({}, "", `?${urlParams}`);
|
||||||
|
loadTimeseries(); updateMap();
|
||||||
|
});
|
||||||
|
document.getElementById("sigmaSelect").addEventListener("change", function() {
|
||||||
|
sigma = this.value;
|
||||||
|
urlParams.set("sigma", sigma);
|
||||||
|
history.replaceState({}, "", `?${urlParams}`);
|
||||||
|
loadTimeseries(); updateMap();
|
||||||
|
});
|
||||||
|
document.getElementById("sourceSelect").addEventListener("change", function() {
|
||||||
|
source = this.value;
|
||||||
|
urlParams.set("source", source);
|
||||||
|
history.replaceState({}, "", `?${urlParams}`);
|
||||||
|
loadTimeseries(); updateMap();
|
||||||
|
});
|
||||||
|
|
||||||
|
await setSiteSeason(initialSite, initialSeason);
|
||||||
|
}
|
||||||
|
|
||||||
|
document.getElementById("dateSlider").addEventListener("input", function() {
|
||||||
|
document.getElementById("dateDisplay").textContent = dateFromDays(parseInt(this.value));
|
||||||
|
drawPlots(); updateMap();
|
||||||
|
});
|
||||||
|
|
||||||
|
init();
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
352
webapp/prepared.html
Normal file
352
webapp/prepared.html
Normal file
|
|
@ -0,0 +1,352 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title>Prepared S2/S3 Viewer</title>
|
||||||
|
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
|
||||||
|
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/geotiff@2.0.7/dist-browser/geotiff.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/proj4@2.9.0/dist/proj4.js"></script>
|
||||||
|
<style>
|
||||||
|
body { margin: 0; font-family: sans-serif; }
|
||||||
|
.nav { margin-bottom: 15px; font-size: 14px; }
|
||||||
|
.nav a { margin-right: 12px; color: #0066cc; text-decoration: none; }
|
||||||
|
.nav a:hover { text-decoration: underline; }
|
||||||
|
.nav a.active { font-weight: bold; }
|
||||||
|
.container { max-width: 900px; margin: 0 auto; padding: 20px; }
|
||||||
|
.selectors { margin-bottom: 20px; }
|
||||||
|
.selectors select { padding: 5px 10px; font-size: 14px; margin-right: 15px; }
|
||||||
|
h1 { margin: 0 0 5px 0; font-size: 22px; }
|
||||||
|
.season-row { padding-bottom: 15px; }
|
||||||
|
h2 { margin: 0; font-size: 16px; color: #666; display: inline; }
|
||||||
|
#dateSlider { width: 100%; margin: 15px 0; }
|
||||||
|
#dateDisplay { text-align: center; font-size: 14px; color: #666; }
|
||||||
|
.map-label { font-size: 12px; margin-bottom: 3px; color: #666; }
|
||||||
|
.map-date { font-size: 11px; margin-top: 3px; color: #999; }
|
||||||
|
.plot-label { font-size: 12px; margin-bottom: 3px; color: #666; }
|
||||||
|
.plot { width: 100%; height: 100px; border: 1px solid #ccc; margin-bottom: 15px; }
|
||||||
|
#preparedMap { height: 500px; border: 1px solid #ccc; margin-top: 10px; }
|
||||||
|
.leaflet-image-layer { image-rendering: pixelated; }
|
||||||
|
.leaflet-control-attribution { display: none; }
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="container">
|
||||||
|
<div class="nav">
|
||||||
|
<a href="index.html">Full</a>
|
||||||
|
<a href="preselection.html">Pre-selection</a>
|
||||||
|
<a href="prepared.html" class="active">Prepared</a>
|
||||||
|
<a href="fusion.html">Fusion</a>
|
||||||
|
<a href="postprocessed.html">Postprocessed</a>
|
||||||
|
</div>
|
||||||
|
<h1 id="siteName">Innsbruck</h1>
|
||||||
|
<div class="season-row"><h2 id="season">2024</h2></div>
|
||||||
|
<div class="selectors">
|
||||||
|
<label>Site:</label>
|
||||||
|
<select id="siteSelect"></select>
|
||||||
|
<label>Season:</label>
|
||||||
|
<select id="seasonSelect"></select>
|
||||||
|
<label>Strategy:</label>
|
||||||
|
<select id="strategySelect">
|
||||||
|
<option value="aggressive">Aggressive</option>
|
||||||
|
<option value="nonaggressive">Non-aggressive</option>
|
||||||
|
</select>
|
||||||
|
<label>Source:</label>
|
||||||
|
<select id="sourceSelect">
|
||||||
|
<option value="s2">S2 REFL</option>
|
||||||
|
<option value="s3">S3 Composite</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<input type="range" id="dateSlider" min="0" max="365" value="0">
|
||||||
|
<div id="dateDisplay">2024-01-01</div>
|
||||||
|
<div class="map-label" id="mapLabel">Prepared RGB (closest available)</div>
|
||||||
|
<div id="mapDate" class="map-date"></div>
|
||||||
|
<div id="preparedMap"></div>
|
||||||
|
<div id="plots">
|
||||||
|
<div class="plot-label">NDVI</div><canvas id="plot_ndvi" class="plot"></canvas>
|
||||||
|
<div class="plot-label">GCC</div><canvas id="plot_gcc" class="plot"></canvas>
|
||||||
|
<div class="plot-label">B02 (Blue)</div><canvas id="plot_b02" class="plot"></canvas>
|
||||||
|
<div class="plot-label">B03 (Green)</div><canvas id="plot_b03" class="plot"></canvas>
|
||||||
|
<div class="plot-label">B04 (Red)</div><canvas id="plot_b04" class="plot"></canvas>
|
||||||
|
<div class="plot-label">B8A (NIR)</div><canvas id="plot_b8a" class="plot"></canvas>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<script>
|
||||||
|
proj4.defs("EPSG:32632", "+proj=utm +zone=32 +datum=WGS84 +units=m +no_defs");
|
||||||
|
proj4.defs("EPSG:4326", "+proj=longlat +datum=WGS84 +no_defs");
|
||||||
|
|
||||||
|
let siteName = "innsbruck", season = "2024";
|
||||||
|
let strategy = "aggressive", source = "s2";
|
||||||
|
let sitePosition = [47.116171, 11.320308];
|
||||||
|
let start = new Date(2024, 0, 1);
|
||||||
|
let availableSiteSeasons = {};
|
||||||
|
let preparedMap = null, overlay = null, marker = null;
|
||||||
|
let ndviTs = [], gccTs = [], bandsTs = [];
|
||||||
|
const BANDS = [{key:"b02",color:"#0066ff"},{key:"b03",color:"#00aa00"},{key:"b04",color:"#cc0000"},{key:"b8a",color:"#9900cc"}];
|
||||||
|
const urlParams = new URLSearchParams(location.search);
|
||||||
|
const osmUrl = "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png";
|
||||||
|
|
||||||
|
const fmtDate = (d) => `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}-${String(d.getDate()).padStart(2, "0")}`;
|
||||||
|
const dateFromDays = (days) => fmtDate(new Date(start.getTime() + days * 86400000));
|
||||||
|
const daysFromDate = (dateStr) => {
|
||||||
|
const [y, m, d] = dateStr.split("-").map(Number);
|
||||||
|
return Math.floor((new Date(y, m - 1, d) - start) / 86400000);
|
||||||
|
};
|
||||||
|
|
||||||
|
function getPreparedPath() {
|
||||||
|
return `data/${siteName}/${season}/prepared_${strategy}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
async function loadTimeseries() {
|
||||||
|
try {
|
||||||
|
const [n, g, b] = await Promise.all([
|
||||||
|
fetch(`${getPreparedPath()}/ndvi/${source}/timeseries.json`).then(r => r.ok ? r.json() : []),
|
||||||
|
fetch(`${getPreparedPath()}/gcc/${source}/timeseries.json`).then(r => r.ok ? r.json() : []),
|
||||||
|
fetch(`${getPreparedPath()}/bands/${source}/timeseries.json`).then(r => r.ok ? r.json() : [])
|
||||||
|
]);
|
||||||
|
ndviTs = n; gccTs = g; bandsTs = b;
|
||||||
|
} catch { ndviTs = []; gccTs = []; bandsTs = []; }
|
||||||
|
drawPlots();
|
||||||
|
}
|
||||||
|
|
||||||
|
function drawPlot(canvasId, data, key, color) {
|
||||||
|
const canvas = document.getElementById(canvasId);
|
||||||
|
if (!canvas) return;
|
||||||
|
const ctx = canvas.getContext("2d");
|
||||||
|
canvas.width = canvas.offsetWidth;
|
||||||
|
canvas.height = 100;
|
||||||
|
const w = canvas.width, h = canvas.height, pad = 30;
|
||||||
|
const plotW = w - pad * 2, plotH = h - pad * 2;
|
||||||
|
const pts = data.filter(t => t[key] != null);
|
||||||
|
if (!pts.length) { ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.fillStyle = "#999"; ctx.font = "12px sans-serif"; ctx.fillText("No data", pad, pad + plotH / 2); return; }
|
||||||
|
const dates = pts.map(t => new Date(t.date));
|
||||||
|
const vals = pts.map(t => t[key]);
|
||||||
|
const minD = new Date(Math.min(...dates)), maxD = new Date(Math.max(...dates));
|
||||||
|
const minV = Math.min(...vals), maxV = Math.max(...vals);
|
||||||
|
const dRange = maxD - minD || 1, vRange = maxV - minV || 1;
|
||||||
|
const x = d => pad + ((new Date(d) - minD) / dRange) * plotW;
|
||||||
|
const y = v => pad + plotH - ((v - minV) / vRange) * plotH;
|
||||||
|
ctx.clearRect(0, 0, w, h);
|
||||||
|
ctx.strokeStyle = "#ccc";
|
||||||
|
ctx.beginPath(); ctx.moveTo(pad, pad); ctx.lineTo(pad, pad + plotH); ctx.lineTo(pad + plotW, pad + plotH); ctx.stroke();
|
||||||
|
ctx.fillStyle = "#000";
|
||||||
|
ctx.font = "9px sans-serif";
|
||||||
|
ctx.fillText(minV.toFixed(3), 2, pad + plotH + 10);
|
||||||
|
ctx.fillText(maxV.toFixed(3), 2, pad + 3);
|
||||||
|
ctx.strokeStyle = color;
|
||||||
|
ctx.beginPath();
|
||||||
|
pts.forEach((t, i) => { const px = x(t.date), py = y(t[key]); i ? ctx.lineTo(px, py) : ctx.moveTo(px, py); });
|
||||||
|
ctx.stroke();
|
||||||
|
const curDate = dateFromDays(parseInt(document.getElementById("dateSlider").value));
|
||||||
|
const xPos = x(curDate);
|
||||||
|
ctx.strokeStyle = "#f00";
|
||||||
|
ctx.lineWidth = 2;
|
||||||
|
ctx.beginPath(); ctx.moveTo(xPos, pad); ctx.lineTo(xPos, pad + plotH); ctx.stroke();
|
||||||
|
const closest = pts.reduce((c, t) => Math.abs(new Date(t.date) - new Date(curDate)) < Math.abs(new Date(c.date) - new Date(curDate)) ? t : c);
|
||||||
|
if (closest) { ctx.fillStyle = "#f00"; ctx.font = "bold 10px sans-serif"; ctx.fillText(closest[key].toFixed(3), xPos + 5, y(closest[key]) - 5); }
|
||||||
|
}
|
||||||
|
|
||||||
|
function drawPlots() {
|
||||||
|
drawPlot("plot_ndvi", ndviTs, "ndvi", "#2d7a3e");
|
||||||
|
drawPlot("plot_gcc", gccTs, "greenness_index", "#00aa00");
|
||||||
|
BANDS.forEach(b => drawPlot(`plot_${b.key}`, bandsTs, b.key, b.color));
|
||||||
|
}
|
||||||
|
|
||||||
|
async function findPreparedFile(dateStr) {
|
||||||
|
const target = new Date(dateStr);
|
||||||
|
const yearEnd = new Date(parseInt(season), 11, 31);
|
||||||
|
const seasonStart = start.getTime();
|
||||||
|
const seasonEnd = yearEnd.getTime();
|
||||||
|
for (let offset = 0; offset <= 365; offset++) {
|
||||||
|
for (const dir of offset === 0 ? [0] : [-1, 1]) {
|
||||||
|
const d = new Date(target.getTime() + dir * offset * 86400000);
|
||||||
|
if (d.getTime() < seasonStart || d.getTime() > seasonEnd) continue;
|
||||||
|
const ds = d.toISOString().split("T")[0].replace(/-/g, "");
|
||||||
|
const filename = source === "s2" ? `S2A_MSIL2A_${ds}_REFL.tif` : `composite_${ds}.tif`;
|
||||||
|
try {
|
||||||
|
const res = await fetch(`${getPreparedPath()}/${source}/${filename}`, { method: "HEAD" });
|
||||||
|
if (res.ok) return filename;
|
||||||
|
} catch {}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
function transformBounds(bbox, fromCRS) {
|
||||||
|
const sw = proj4(fromCRS, "EPSG:4326", [bbox[0], bbox[1]]);
|
||||||
|
const ne = proj4(fromCRS, "EPSG:4326", [bbox[2], bbox[3]]);
|
||||||
|
return [[sw[1], sw[0]], [ne[1], ne[0]]];
|
||||||
|
}
|
||||||
|
|
||||||
|
async function loadGeotiff(filename) {
|
||||||
|
const path = `${getPreparedPath()}/${source}/${filename}`;
|
||||||
|
const tiff = await GeoTIFF.fromArrayBuffer(await (await fetch(path)).arrayBuffer());
|
||||||
|
const image = await tiff.getImage();
|
||||||
|
const rasters = await image.readRasters();
|
||||||
|
const width = image.getWidth(), height = image.getHeight();
|
||||||
|
const bbox = image.getBoundingBox();
|
||||||
|
const geoKeys = image.getGeoKeys();
|
||||||
|
const crsCode = geoKeys.ProjectedCSTypeGeoKey ? `EPSG:${geoKeys.ProjectedCSTypeGeoKey}` :
|
||||||
|
(geoKeys.GeographicTypeGeoKey !== 4326 ? `EPSG:${geoKeys.GeographicTypeGeoKey}` : "EPSG:4326");
|
||||||
|
const [blue, green, red] = [0, 1, 2].map(i => Array.from(rasters[i]));
|
||||||
|
const normalize = (arr) => {
|
||||||
|
let min = Infinity, max = -Infinity;
|
||||||
|
for (const v of arr) if (!isNaN(v) && v > 0) { min = Math.min(min, v); max = Math.max(max, v); }
|
||||||
|
return arr.map(v => Math.max(0, Math.min(255, ((v - min) / (max - min || 1)) * 255)));
|
||||||
|
};
|
||||||
|
const [rN, gN, bN] = [red, green, blue].map(normalize);
|
||||||
|
const canvas = Object.assign(document.createElement("canvas"), { width, height });
|
||||||
|
const ctx = canvas.getContext("2d");
|
||||||
|
ctx.imageSmoothingEnabled = false;
|
||||||
|
const imgData = ctx.createImageData(width, height);
|
||||||
|
for (let i = 0; i < rN.length; i++) {
|
||||||
|
const idx = i * 4;
|
||||||
|
if (rN[i] === 0 && gN[i] === 0 && bN[i] === 0) imgData.data[idx + 3] = 0;
|
||||||
|
else { imgData.data[idx] = rN[i]; imgData.data[idx + 1] = gN[i]; imgData.data[idx + 2] = bN[i]; imgData.data[idx + 3] = 255; }
|
||||||
|
}
|
||||||
|
ctx.putImageData(imgData, 0, 0);
|
||||||
|
const bounds = crsCode === "EPSG:4326" ? [[bbox[1], bbox[0]], [bbox[3], bbox[2]]] : transformBounds(bbox, crsCode);
|
||||||
|
return { dataUrl: canvas.toDataURL(), bounds, dateStr: filename.includes("composite") ? filename.replace("composite_", "").replace(".tif", "") : filename.replace("S2A_MSIL2A_", "").replace("_REFL.tif", "") };
|
||||||
|
}
|
||||||
|
|
||||||
|
async function updateMap() {
|
||||||
|
const dateStr = dateFromDays(parseInt(document.getElementById("dateSlider").value));
|
||||||
|
const filename = await findPreparedFile(dateStr);
|
||||||
|
if (!filename || !preparedMap) {
|
||||||
|
if (overlay) { preparedMap.removeLayer(overlay); overlay = null; }
|
||||||
|
document.getElementById("mapDate").textContent = "";
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
try {
|
||||||
|
const { dataUrl, bounds, dateStr: ds } = await loadGeotiff(filename);
|
||||||
|
if (overlay) preparedMap.removeLayer(overlay);
|
||||||
|
overlay = L.imageOverlay(dataUrl, bounds, { opacity: 0.95 }).addTo(preparedMap);
|
||||||
|
preparedMap.fitBounds(bounds);
|
||||||
|
document.getElementById("mapDate").textContent = `${ds.slice(0,4)}-${ds.slice(4,6)}-${ds.slice(6,8)}`;
|
||||||
|
} catch (e) {
|
||||||
|
if (overlay) { preparedMap.removeLayer(overlay); overlay = null; }
|
||||||
|
document.getElementById("mapDate").textContent = "";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function probeDataExists(sitename, s) {
|
||||||
|
try {
|
||||||
|
const res = await fetch(`data/${sitename}/${s}/raw/preselection/s2_preselection.json`, { method: "HEAD" });
|
||||||
|
return res.ok;
|
||||||
|
} catch { return false; }
|
||||||
|
}
|
||||||
|
|
||||||
|
function getSiteBySitename(sn) {
|
||||||
|
return window.sitesData?.features?.find(f => f.properties?.sitename === sn);
|
||||||
|
}
|
||||||
|
|
||||||
|
async function setSiteSeason(newSite, newSeason) {
|
||||||
|
siteName = newSite;
|
||||||
|
season = newSeason;
|
||||||
|
start = new Date(parseInt(season), 0, 1);
|
||||||
|
const site = getSiteBySitename(newSite);
|
||||||
|
if (site?.geometry?.coordinates) {
|
||||||
|
const [lon, lat] = site.geometry.coordinates;
|
||||||
|
sitePosition = [lat, lon];
|
||||||
|
}
|
||||||
|
if (preparedMap) { preparedMap.setView(sitePosition, 12); if (marker) marker.setLatLng(sitePosition); }
|
||||||
|
document.getElementById("siteName").textContent = (site?.properties?.description || newSite);
|
||||||
|
document.getElementById("season").textContent = season;
|
||||||
|
const yearEnd = new Date(parseInt(season), 11, 31);
|
||||||
|
document.getElementById("dateSlider").max = Math.ceil((yearEnd - start) / 86400000);
|
||||||
|
const params = new URLSearchParams(location.search);
|
||||||
|
params.set("site", siteName);
|
||||||
|
params.set("season", season);
|
||||||
|
history.replaceState({}, "", `?${params}`);
|
||||||
|
const urlDate = params.get("date");
|
||||||
|
if (urlDate) document.getElementById("dateSlider").value = daysFromDate(urlDate);
|
||||||
|
document.getElementById("dateDisplay").textContent = dateFromDays(parseInt(document.getElementById("dateSlider").value));
|
||||||
|
await loadTimeseries();
|
||||||
|
await updateMap();
|
||||||
|
}
|
||||||
|
|
||||||
|
async function init() {
|
||||||
|
try {
|
||||||
|
const res = await fetch("data/sites.geojson");
|
||||||
|
window.sitesData = res.ok ? await res.json() : { features: [] };
|
||||||
|
} catch { window.sitesData = { features: [] }; }
|
||||||
|
const features = window.sitesData.features || [];
|
||||||
|
for (const f of features) {
|
||||||
|
const sn = f.properties?.sitename;
|
||||||
|
if (!sn) continue;
|
||||||
|
const seasonsFromGeo = f.properties?.seasons ? Object.keys(f.properties.seasons).sort() : [];
|
||||||
|
const withData = [];
|
||||||
|
for (const s of seasonsFromGeo) {
|
||||||
|
if (await probeDataExists(sn, s)) withData.push(s);
|
||||||
|
}
|
||||||
|
if (withData.length) availableSiteSeasons[sn] = withData;
|
||||||
|
}
|
||||||
|
const availableSites = Object.keys(availableSiteSeasons);
|
||||||
|
const siteSelect = document.getElementById("siteSelect");
|
||||||
|
siteSelect.innerHTML = "";
|
||||||
|
(availableSites.length ? availableSites.sort() : ["innsbruck"]).forEach(sn => {
|
||||||
|
const opt = document.createElement("option");
|
||||||
|
opt.value = sn;
|
||||||
|
opt.textContent = sn;
|
||||||
|
siteSelect.appendChild(opt);
|
||||||
|
if (!availableSiteSeasons[sn]) availableSiteSeasons[sn] = ["2024"];
|
||||||
|
});
|
||||||
|
|
||||||
|
const urlSite = urlParams.get("site");
|
||||||
|
const urlSeason = urlParams.get("season");
|
||||||
|
const initialSite = (urlSite && availableSiteSeasons[urlSite]) ? urlSite : (availableSites[0] || "innsbruck");
|
||||||
|
const initialSeason = (urlSeason && (availableSiteSeasons[initialSite] || []).includes(urlSeason)) ? urlSeason : ((availableSiteSeasons[initialSite] || [])[0] || "2024");
|
||||||
|
|
||||||
|
siteSelect.value = initialSite;
|
||||||
|
document.getElementById("seasonSelect").innerHTML = (availableSiteSeasons[initialSite] || []).map(s =>
|
||||||
|
`<option value="${s}">${s}</option>`
|
||||||
|
).join("");
|
||||||
|
document.getElementById("seasonSelect").value = initialSeason;
|
||||||
|
strategy = urlParams.get("strategy") || "aggressive";
|
||||||
|
source = urlParams.get("source") || "s2";
|
||||||
|
document.getElementById("strategySelect").value = strategy;
|
||||||
|
document.getElementById("sourceSelect").value = source;
|
||||||
|
|
||||||
|
const initSite = getSiteBySitename(initialSite);
|
||||||
|
if (initSite?.geometry?.coordinates) {
|
||||||
|
const [lon, lat] = initSite.geometry.coordinates;
|
||||||
|
sitePosition = [lat, lon];
|
||||||
|
}
|
||||||
|
preparedMap = L.map("preparedMap", { zoomControl: false }).setView(sitePosition, 12)
|
||||||
|
.addLayer(L.tileLayer(osmUrl, { attribution: "OpenStreetMap", opacity: 0.4 }));
|
||||||
|
marker = L.marker(sitePosition, { icon: L.divIcon({ className: "site-marker", html: "<div style='width:8px;height:8px;background:red;border:2px solid white;border-radius:50%;box-shadow:0 0 2px rgba(0,0,0,0.5);'></div>", iconSize: [8, 8] }) }).addTo(preparedMap);
|
||||||
|
|
||||||
|
siteSelect.addEventListener("change", function() {
|
||||||
|
const sn = this.value;
|
||||||
|
const seas = availableSiteSeasons[sn] || [];
|
||||||
|
document.getElementById("seasonSelect").innerHTML = seas.map(s => `<option value="${s}">${s}</option>`).join("");
|
||||||
|
document.getElementById("seasonSelect").value = seas[0] || "2024";
|
||||||
|
setSiteSeason(sn, document.getElementById("seasonSelect").value);
|
||||||
|
});
|
||||||
|
document.getElementById("seasonSelect").addEventListener("change", function() {
|
||||||
|
setSiteSeason(siteSelect.value, this.value);
|
||||||
|
});
|
||||||
|
document.getElementById("strategySelect").addEventListener("change", function() {
|
||||||
|
strategy = this.value;
|
||||||
|
urlParams.set("strategy", strategy);
|
||||||
|
history.replaceState({}, "", `?${urlParams}`);
|
||||||
|
loadTimeseries(); updateMap();
|
||||||
|
});
|
||||||
|
document.getElementById("sourceSelect").addEventListener("change", function() {
|
||||||
|
source = this.value;
|
||||||
|
urlParams.set("source", source);
|
||||||
|
history.replaceState({}, "", `?${urlParams}`);
|
||||||
|
loadTimeseries(); updateMap();
|
||||||
|
});
|
||||||
|
|
||||||
|
await setSiteSeason(initialSite, initialSeason);
|
||||||
|
}
|
||||||
|
|
||||||
|
document.getElementById("dateSlider").addEventListener("input", function() {
|
||||||
|
document.getElementById("dateDisplay").textContent = dateFromDays(parseInt(this.value));
|
||||||
|
drawPlots(); updateMap();
|
||||||
|
});
|
||||||
|
|
||||||
|
init();
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -8,7 +8,12 @@
|
||||||
<script src="https://cdn.jsdelivr.net/npm/proj4@2.9.0/dist/proj4.js"></script>
|
<script src="https://cdn.jsdelivr.net/npm/proj4@2.9.0/dist/proj4.js"></script>
|
||||||
<style>
|
<style>
|
||||||
body { margin: 0; font-family: sans-serif; }
|
body { margin: 0; font-family: sans-serif; }
|
||||||
.container { max-width: 900px; margin: 0 auto; padding: 20px; }
|
.nav { margin-bottom: 15px; font-size: 14px; }
|
||||||
|
.nav a { margin-right: 12px; color: #0066cc; text-decoration: none; }
|
||||||
|
.nav a:hover { text-decoration: underline; }
|
||||||
|
.nav a.active { font-weight: bold; }
|
||||||
|
.container { max-width: 1400px; margin: 0 auto; padding: 20px; }
|
||||||
|
.header-sticky { position: sticky; top: 0; background: white; z-index: 1000; border-bottom: 1px solid #ccc; padding-bottom: 20px; margin-bottom: 20px; }
|
||||||
.selectors { margin-bottom: 20px; }
|
.selectors { margin-bottom: 20px; }
|
||||||
.selectors select { padding: 5px 10px; font-size: 14px; margin-right: 15px; }
|
.selectors select { padding: 5px 10px; font-size: 14px; margin-right: 15px; }
|
||||||
h1 { margin: 0 0 5px 0; font-size: 22px; }
|
h1 { margin: 0 0 5px 0; font-size: 22px; }
|
||||||
|
|
@ -30,6 +35,14 @@
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div class="container">
|
<div class="container">
|
||||||
|
<div class="header-sticky">
|
||||||
|
<div class="nav">
|
||||||
|
<a href="index.html">Full</a>
|
||||||
|
<a href="preselection.html" class="active">Pre-selection</a>
|
||||||
|
<a href="prepared.html">Prepared</a>
|
||||||
|
<a href="fusion.html">Fusion</a>
|
||||||
|
<a href="postprocessed.html">Postprocessed</a>
|
||||||
|
</div>
|
||||||
<h1 id="siteName">Innsbruck</h1>
|
<h1 id="siteName">Innsbruck</h1>
|
||||||
<div class="season-row"><h2 id="season">2024</h2><span class="download-links" id="downloadLinks"></span></div>
|
<div class="season-row"><h2 id="season">2024</h2><span class="download-links" id="downloadLinks"></span></div>
|
||||||
<div class="selectors">
|
<div class="selectors">
|
||||||
|
|
@ -51,6 +64,7 @@
|
||||||
</div>
|
</div>
|
||||||
<input type="range" id="dateSlider" min="0" max="365" value="0">
|
<input type="range" id="dateSlider" min="0" max="365" value="0">
|
||||||
<div id="dateDisplay">2024-01-01</div>
|
<div id="dateDisplay">2024-01-01</div>
|
||||||
|
</div>
|
||||||
<div class="map-label" id="mapLabel">S2 RGB (closest available)</div>
|
<div class="map-label" id="mapLabel">S2 RGB (closest available)</div>
|
||||||
<div id="s2rgbdate" class="map-date"></div>
|
<div id="s2rgbdate" class="map-date"></div>
|
||||||
<div id="s2map"></div>
|
<div id="s2map"></div>
|
||||||
|
|
@ -300,7 +314,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
async function loadTimeseries() {
|
async function loadTimeseries() {
|
||||||
const rawBase = `../data/${siteName}/${season}/raw`;
|
const rawBase = `data/${siteName}/${season}/raw`;
|
||||||
const src = document.getElementById("sourceSelect")?.value || "s2";
|
const src = document.getElementById("sourceSelect")?.value || "s2";
|
||||||
source = src;
|
source = src;
|
||||||
try {
|
try {
|
||||||
|
|
@ -334,7 +348,7 @@
|
||||||
|
|
||||||
async function probeDataExists(sitename, s) {
|
async function probeDataExists(sitename, s) {
|
||||||
try {
|
try {
|
||||||
const res = await fetch(`../data/${sitename}/${s}/raw/preselection/s2_preselection.json`, { method: "HEAD" });
|
const res = await fetch(`data/${sitename}/${s}/raw/preselection/s2_preselection.json`, { method: "HEAD" });
|
||||||
return res.ok;
|
return res.ok;
|
||||||
} catch { return false; }
|
} catch { return false; }
|
||||||
}
|
}
|
||||||
|
|
@ -366,7 +380,7 @@
|
||||||
|
|
||||||
async function init() {
|
async function init() {
|
||||||
try {
|
try {
|
||||||
const res = await fetch("../data/sites.geojson");
|
const res = await fetch("data/sites.geojson");
|
||||||
window.sitesData = res.ok ? await res.json() : { features: [] };
|
window.sitesData = res.ok ? await res.json() : { features: [] };
|
||||||
} catch {
|
} catch {
|
||||||
window.sitesData = { features: [] };
|
window.sitesData = { features: [] };
|
||||||
|
|
@ -467,7 +481,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
async function loadS2Geotiff(filename) {
|
async function loadS2Geotiff(filename) {
|
||||||
const path = `../data/${siteName}/${season}/raw/${source}/${filename}`;
|
const path = `data/${siteName}/${season}/raw/${source}/${filename}`;
|
||||||
const tiff = await GeoTIFF.fromArrayBuffer(await (await fetch(path)).arrayBuffer());
|
const tiff = await GeoTIFF.fromArrayBuffer(await (await fetch(path)).arrayBuffer());
|
||||||
const image = await tiff.getImage();
|
const image = await tiff.getImage();
|
||||||
const rasters = await image.readRasters();
|
const rasters = await image.readRasters();
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue