219 lines
9 KiB
Elixir
219 lines
9 KiB
Elixir
defmodule MicrowavepropWeb.WeatherMapLive do
|
||
@moduledoc false
|
||
use MicrowavepropWeb, :live_view
|
||
|
||
alias Microwaveprop.Weather
|
||
|
||
@initial_bounds %{
|
||
"south" => 29.5,
|
||
"north" => 36.3,
|
||
"west" => -101.5,
|
||
"east" => -92.5
|
||
}
|
||
|
||
@layers [
|
||
# Surface
|
||
%{id: "temperature", label: "Temperature", unit: "°C", group: "Surface",
|
||
desc: "2m air temperature. Warm, humid air increases refractivity and ducting potential at lower frequencies."},
|
||
%{id: "dewpoint_depression", label: "Td Depression", unit: "°C", group: "Surface",
|
||
desc: "Temperature minus dewpoint. Small values (< 5°C) mean moist boundary layer — favorable for ducting at 10 GHz, but increases absorption above 24 GHz."},
|
||
%{id: "surface_rh", label: "Humidity", unit: "%", group: "Surface",
|
||
desc: "Relative humidity from surface T and Td. High RH supports refractivity gradients that bend microwave signals."},
|
||
%{id: "pwat", label: "PWAT", unit: "mm", group: "Surface",
|
||
desc: "Precipitable water — total moisture in the atmospheric column. High values signal rain fade risk for 24 GHz and above."},
|
||
%{id: "surface_refractivity", label: "Refractivity", unit: "N", group: "Surface",
|
||
desc: "Radio refractivity (N-units) at the surface. Typical values 280–380. Higher N means the atmosphere bends signals more toward the ground."},
|
||
%{id: "refractivity_gradient", label: "N-Gradient", unit: "N/km", group: "Surface",
|
||
desc: "Minimum refractivity gradient in the profile. Standard is −40 N/km. Below −157 N/km signals are trapped in a duct. More negative = stronger ducting."},
|
||
%{id: "bl_height", label: "BL Height", unit: "m", group: "Surface",
|
||
desc: "Planetary boundary layer height. Shallow BL (< 500m) concentrates moisture and heat near the surface, favoring temperature inversions and ducting."},
|
||
# Upper Air
|
||
%{id: "temp_850mb", label: "T @ 850mb", unit: "°C", group: "Upper Air",
|
||
desc: "Temperature at 850 mb (~1500m altitude). Warm 850mb air over cool surface air indicates a capping inversion — a classic ducting setup."},
|
||
%{id: "dewpoint_850mb", label: "Td @ 850mb", unit: "°C", group: "Upper Air",
|
||
desc: "Dewpoint at 850 mb. A sharp moisture drop between the surface and 850mb creates an elevated refractivity gradient that can form ducts."},
|
||
%{id: "lapse_rate", label: "Lapse Rate", unit: "°C/km", group: "Upper Air",
|
||
desc: "Temperature decrease per km from surface to 700mb. Low rates (< 5 °C/km) mean stable air that preserves inversions. High rates (> 8) mean convective mixing that destroys them."},
|
||
%{id: "inversion_strength", label: "Inversion", unit: "°C", group: "Upper Air",
|
||
desc: "Strongest temperature increase between adjacent levels. Inversions trap microwave signals. > 3°C is significant, > 5°C is strong."},
|
||
%{id: "inversion_base_m", label: "Inv. Base", unit: "m", group: "Upper Air",
|
||
desc: "Height (m AGL) where the strongest inversion begins. Surface-based inversions (< 200m) create surface ducts. Elevated inversions create elevated ducts."},
|
||
# Ducting
|
||
%{id: "ducting", label: "Ducting", unit: "", group: "Ducting",
|
||
desc: "Whether a trapping layer (modified refractivity decreasing with height) was detected in the profile. Green = duct present, signals can travel far beyond line of sight."},
|
||
%{id: "duct_base_m", label: "Duct Base", unit: "m", group: "Ducting",
|
||
desc: "Height of the lowest duct base. Surface ducts (< 100m) are most effective for ground-based stations. Elevated ducts require antennas near the duct height."},
|
||
%{id: "duct_strength", label: "Duct Strength", unit: "M", group: "Ducting",
|
||
desc: "Duct trapping strength in modified refractivity (M) units. > 10 M is moderate, > 20 M is strong. Stronger ducts trap a wider range of frequencies."}
|
||
]
|
||
|
||
@impl true
|
||
def mount(_params, _session, socket) do
|
||
if connected?(socket) do
|
||
Phoenix.PubSub.subscribe(Microwaveprop.PubSub, "weather:updated")
|
||
end
|
||
|
||
data = Weather.latest_weather_grid(@initial_bounds)
|
||
valid_time = if data != [], do: hd(data).valid_time
|
||
|
||
{:ok,
|
||
assign(socket,
|
||
page_title: "Weather Map",
|
||
layers: @layers,
|
||
selected_layer: "refractivity_gradient",
|
||
initial_data_json: Jason.encode!(data),
|
||
valid_time: valid_time,
|
||
bounds: @initial_bounds
|
||
)}
|
||
end
|
||
|
||
@impl true
|
||
def handle_event("select_layer", %{"layer" => layer_id}, socket) do
|
||
{:noreply, assign(socket, :selected_layer, layer_id)}
|
||
end
|
||
|
||
def handle_event("map_bounds", bounds, socket) do
|
||
data = Weather.latest_weather_grid(bounds)
|
||
|
||
socket =
|
||
socket
|
||
|> assign(:bounds, bounds)
|
||
|> push_event("update_weather", %{data: data})
|
||
|
||
{:noreply, socket}
|
||
end
|
||
|
||
def handle_event("point_detail", %{"lat" => lat, "lon" => lon}, socket) do
|
||
detail =
|
||
if socket.assigns.valid_time do
|
||
Weather.weather_point_detail(lat, lon, socket.assigns.valid_time)
|
||
end
|
||
|
||
payload = detail || %{}
|
||
{:noreply, push_event(socket, "point_detail", payload)}
|
||
end
|
||
|
||
@impl true
|
||
def handle_info({:weather_updated, _valid_time}, socket) do
|
||
data = Weather.latest_weather_grid(socket.assigns.bounds)
|
||
valid_time = if data != [], do: hd(data).valid_time
|
||
|
||
socket =
|
||
socket
|
||
|> assign(:valid_time, valid_time)
|
||
|> push_event("update_weather", %{data: data})
|
||
|
||
{:noreply, socket}
|
||
end
|
||
|
||
@group_order ["Surface", "Upper Air", "Ducting"]
|
||
|
||
defp group_layers(layers) do
|
||
layers
|
||
|> Enum.group_by(& &1.group)
|
||
|> Enum.sort_by(fn {group, _} -> Enum.find_index(@group_order, &(&1 == group)) || 99 end)
|
||
end
|
||
|
||
defp layer_description(layers, selected_id) do
|
||
case Enum.find(layers, &(&1.id == selected_id)) do
|
||
%{desc: desc} -> desc
|
||
_ -> nil
|
||
end
|
||
end
|
||
|
||
@impl true
|
||
def render(assigns) do
|
||
~H"""
|
||
<div class="relative w-screen h-screen overflow-hidden">
|
||
<%!-- Full-page map --%>
|
||
<div
|
||
id="weather-map"
|
||
phx-hook="WeatherMap"
|
||
phx-update="ignore"
|
||
data-weather={@initial_data_json}
|
||
data-layers={Jason.encode!(@layers)}
|
||
data-selected-layer={@selected_layer}
|
||
class="absolute inset-0 z-0"
|
||
>
|
||
</div>
|
||
|
||
<%!-- Top-left control panel --%>
|
||
<div
|
||
id="weather-controls"
|
||
class="absolute top-2 left-12 z-[1000] flex flex-col gap-2 max-w-[calc(100vw-4rem)] md:left-14 md:top-3 md:max-w-none"
|
||
>
|
||
<div class="bg-base-100/90 shadow rounded-box border border-base-300 p-2 md:p-3 flex flex-col gap-2">
|
||
<div class="font-bold text-sm leading-tight px-1 flex items-center justify-between gap-2">
|
||
<div class="min-w-0">
|
||
<span class="hidden md:inline">HRRR Weather Data</span>
|
||
<span class="md:hidden">Weather</span>
|
||
<div class="font-normal text-xs opacity-70">
|
||
<%= if @valid_time do %>
|
||
{Calendar.strftime(@valid_time, "%Y-%m-%d %H:%M UTC")}
|
||
<% else %>
|
||
No data available
|
||
<% end %>
|
||
</div>
|
||
</div>
|
||
<div
|
||
id="weather-utc-clock"
|
||
phx-hook="UtcClock"
|
||
class="font-mono text-xs opacity-70 tabular-nums shrink-0"
|
||
>
|
||
</div>
|
||
</div>
|
||
|
||
<%!-- Layer pill buttons grouped --%>
|
||
<div class="flex flex-col gap-1.5">
|
||
<div :for={{group, layers} <- group_layers(@layers)}>
|
||
<div class="text-[10px] font-semibold opacity-50 uppercase tracking-wider px-1 mb-0.5">
|
||
{group}
|
||
</div>
|
||
<div class="flex flex-wrap gap-1">
|
||
<button
|
||
:for={layer <- layers}
|
||
phx-click="select_layer"
|
||
phx-value-layer={layer.id}
|
||
class={[
|
||
"btn btn-xs rounded-full",
|
||
if(@selected_layer == layer.id, do: "btn-primary", else: "btn-ghost")
|
||
]}
|
||
>
|
||
{layer.label}
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<%!-- Layer description --%>
|
||
<div class="text-xs opacity-70 px-1 leading-snug">
|
||
{layer_description(@layers, @selected_layer)}
|
||
</div>
|
||
|
||
<%!-- Links --%>
|
||
<div class="flex flex-col gap-1 border-t border-base-300 pt-2">
|
||
<.link navigate="/map" class="btn btn-xs btn-ghost justify-start gap-1.5">
|
||
<.icon name="hero-signal" class="size-3.5" /> Propagation Map
|
||
</.link>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<%!-- Point detail panel --%>
|
||
<div
|
||
id="weather-detail-panel"
|
||
phx-update="ignore"
|
||
class={[
|
||
"bg-neutral text-neutral-content shadow-lg border border-base-300 overflow-hidden overflow-y-auto z-[1001]",
|
||
"fixed bottom-0 left-0 right-0 max-h-[50vh] rounded-t-2xl",
|
||
"md:absolute md:top-3 md:bottom-auto md:left-auto md:right-auto md:max-h-[60vh] md:max-w-sm md:rounded-box"
|
||
]}
|
||
style="display:none;"
|
||
>
|
||
</div>
|
||
</div>
|
||
|
||
<Layouts.flash_group flash={@flash} />
|
||
"""
|
||
end
|
||
end
|