2020-03-08 15:05:20 +13:00
|
|
|
defmodule AugieWeb.GPSSensorLive do
|
|
|
|
use Phoenix.LiveView
|
|
|
|
alias Augie.Sensor.GPS
|
|
|
|
|
|
|
|
@moduledoc """
|
|
|
|
A LiveView with displaus the data from the GPS.
|
|
|
|
"""
|
|
|
|
|
|
|
|
@sample_count 60
|
|
|
|
|
|
|
|
def render(assigns) do
|
|
|
|
~L"""
|
|
|
|
<div class="card">
|
|
|
|
<div class="card-divider">
|
|
|
|
<h4>GPS</h4>
|
|
|
|
</div>
|
|
|
|
<%= if @data_ready do %>
|
|
|
|
<div class="card-section">
|
|
|
|
<div class="grid-x">
|
|
|
|
<div class="cell auto"><strong>Status</strong></div>
|
|
|
|
<div class="cell auto text-right"><%= @status %></div>
|
|
|
|
</div>
|
|
|
|
<div class="grid-x">
|
|
|
|
<div class="cell auto"><strong>Latitude</strong></div>
|
|
|
|
<div class="cell auto text-right"><%= Float.round(CircularBuffer.newest(@latitude), 4) %>º</div>
|
|
|
|
</div>
|
|
|
|
<div class="grid-x">
|
|
|
|
<div class="cell"><%= live_component(@socket, AugieWeb.SparklineComponent, data: @latitude, sample_count: 60, fill: false, min: -90, max: 90) %></div>
|
|
|
|
</div>
|
|
|
|
<div class="grid-x">
|
|
|
|
<div class="cell auto"><strong>Longitude</strong></div>
|
|
|
|
<div class="cell auto text-right"><%= Float.round(CircularBuffer.newest(@longitude), 4) %>º</div>
|
|
|
|
</div>
|
|
|
|
<div class="grid-x">
|
|
|
|
<div class="cell"><%= live_component(@socket, AugieWeb.SparklineComponent, data: @longitude, sample_count: 60, fill: false, min: 0, max: 180) %></div>
|
|
|
|
</div>
|
|
|
|
<div class="grid-x">
|
|
|
|
<div class="cell auto"><strong>Altitude</strong></div>
|
|
|
|
<div class="cell auto text-right"><%= Float.round(CircularBuffer.newest(@altitude), 4) %>m</div>
|
|
|
|
</div>
|
|
|
|
<div class="grid-x">
|
|
|
|
<div class="cell"><%= live_component(@socket, AugieWeb.SparklineComponent, data: @altitude, sample_count: 60, fill: false, min: 0) %></div>
|
|
|
|
</div>
|
|
|
|
<div class="grid-x">
|
|
|
|
<div class="cell auto"><strong>Heading</strong></div>
|
|
|
|
<div class="cell auto text-right"><%= Float.round(CircularBuffer.newest(@heading), 4) %>º</div>
|
|
|
|
</div>
|
|
|
|
<div class="grid-x">
|
|
|
|
<div class="cell"><%= live_component(@socket, AugieWeb.SparklineComponent, data: @heading, sample_count: 60, fill: false, min: 0, max: 360) %></div>
|
|
|
|
</div>
|
|
|
|
<div class="grid-x">
|
|
|
|
<div class="cell auto"><strong>Speed</strong></div>
|
|
|
|
<div class="cell auto text-right"><%= Float.round(CircularBuffer.newest(@speed), 4) %>m/s</div>
|
|
|
|
</div>
|
|
|
|
<div class="grid-x">
|
|
|
|
<div class="cell"><%= live_component(@socket, AugieWeb.SparklineComponent, data: @speed, sample_count: 60, fill: false, min: 0) %></div>
|
|
|
|
</div>
|
|
|
|
<div class="grid-x">
|
|
|
|
<div class="cell auto"><strong>Satellites</strong></div>
|
|
|
|
<div class="cell auto text-right"><%= CircularBuffer.newest(@satellites) %></div>
|
|
|
|
</div>
|
|
|
|
<div class="grid-x">
|
|
|
|
<div class="cell"><%= live_component(@socket, AugieWeb.SparklineComponent, data: @satellites, sample_count: 60, fill: false, min: 0) %></div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<% else %>
|
|
|
|
<div class="card-section">
|
|
|
|
No data available.
|
|
|
|
</div>
|
|
|
|
<% end %>
|
|
|
|
</div>
|
|
|
|
"""
|
|
|
|
end
|
|
|
|
|
|
|
|
def mount(_params, _context, socket) do
|
2020-04-11 17:24:59 +12:00
|
|
|
if connected?(socket),
|
|
|
|
do: CommunityTheatre.subscribe(GPS, 1)
|
2020-03-08 15:05:20 +13:00
|
|
|
|
|
|
|
socket =
|
|
|
|
socket
|
|
|
|
|> assign(
|
|
|
|
data_ready: false,
|
|
|
|
latitude: CircularBuffer.new(@sample_count),
|
|
|
|
longitude: CircularBuffer.new(@sample_count),
|
|
|
|
altitude: CircularBuffer.new(@sample_count),
|
|
|
|
heading: CircularBuffer.new(@sample_count),
|
|
|
|
speed: CircularBuffer.new(@sample_count),
|
|
|
|
satellites: CircularBuffer.new(@sample_count),
|
|
|
|
status: :none
|
|
|
|
)
|
|
|
|
|
|
|
|
{:ok, socket}
|
|
|
|
end
|
|
|
|
|
|
|
|
def handle_info(
|
2020-04-11 17:24:59 +12:00
|
|
|
{CommunityTheatre, %{topic: GPS, payload: sample}},
|
2020-03-08 15:05:20 +13:00
|
|
|
%{
|
|
|
|
assigns: %{
|
|
|
|
latitude: latitude,
|
|
|
|
longitude: longitude,
|
|
|
|
altitude: altitude,
|
|
|
|
heading: heading,
|
|
|
|
speed: speed,
|
2020-04-03 17:33:50 +13:00
|
|
|
satellites: satellites
|
2020-03-08 15:05:20 +13:00
|
|
|
}
|
|
|
|
} = socket
|
|
|
|
) do
|
|
|
|
socket =
|
|
|
|
socket
|
|
|
|
|> assign(
|
|
|
|
data_ready: true,
|
|
|
|
latitude: CircularBuffer.insert(latitude, sample.latitude),
|
|
|
|
longitude: CircularBuffer.insert(longitude, sample.longitude),
|
2020-04-03 17:33:50 +13:00
|
|
|
altitude: CircularBuffer.insert(altitude, sample.altitude),
|
|
|
|
heading: CircularBuffer.insert(heading, sample.heading),
|
|
|
|
speed: CircularBuffer.insert(speed, sample.speed),
|
|
|
|
satellites: CircularBuffer.insert(satellites, sample.satellites),
|
2020-03-08 15:05:20 +13:00
|
|
|
status: sample.status
|
|
|
|
)
|
|
|
|
|
|
|
|
{:noreply, socket}
|
|
|
|
end
|
|
|
|
end
|