2020-03-08 15:05:20 +13:00
|
|
|
defmodule AugieWeb.IMUSensorLive do
|
|
|
|
use Phoenix.LiveView
|
|
|
|
alias Augie.Sensor.IMU
|
|
|
|
|
|
|
|
@moduledoc """
|
2020-04-03 17:33:50 +13:00
|
|
|
A Liveview which displays the data from the IMU.
|
2020-03-08 15:05:20 +13:00
|
|
|
"""
|
|
|
|
|
2020-04-03 17:33:50 +13:00
|
|
|
@sample_count 60
|
2020-03-08 15:05:20 +13:00
|
|
|
|
|
|
|
def render(assigns) do
|
|
|
|
~L"""
|
|
|
|
<div class="card">
|
|
|
|
<div class="card-divider">
|
|
|
|
<h4>IMU</h4>
|
|
|
|
</div>
|
|
|
|
<%= if @data_ready do %>
|
|
|
|
|
|
|
|
<div class="card-section">
|
|
|
|
<h5>Orientation</h5>
|
|
|
|
<div class="grid-x">
|
|
|
|
<div class="cell auto shrink"><strong>X</strong> </div>
|
|
|
|
<div class="cell auto"><%= live_component(@socket, AugieWeb.SparklineComponent, data: @orientation_x, min: -1, max: 1, fill: false, height: 20, sample_count: @sample_count) %></div>
|
|
|
|
</div>
|
|
|
|
<div class="grid-x">
|
|
|
|
<div class="cell auto shrink"><strong>Y</strong> </div>
|
|
|
|
<div class="cell auto"><%= live_component(@socket, AugieWeb.SparklineComponent, data: @orientation_y, min: -1, max: 1, fill: false, height: 20, sample_count: @sample_count) %></div>
|
|
|
|
</div>
|
|
|
|
<div class="grid-x">
|
|
|
|
<div class="cell auto shrink"><strong>Z</strong> </div>
|
|
|
|
<div class="cell auto"><%= live_component(@socket, AugieWeb.SparklineComponent, data: @orientation_z, min: -1, max: 1, fill: false, height: 20, sample_count: @sample_count) %></div>
|
|
|
|
</div>
|
|
|
|
<div class="grid-x">
|
|
|
|
<div class="cell auto shrink"><strong>W</strong> </div>
|
|
|
|
<div class="cell auto"><%= live_component(@socket, AugieWeb.SparklineComponent, data: @orientation_w, min: -1, max: 1, fill: false, height: 20, sample_count: @sample_count) %></div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div class="card-section">
|
|
|
|
<h5>Accelerometer</h5>
|
|
|
|
<div class="grid-x">
|
|
|
|
<div class="cell auto shrink"><strong>X</strong> </div>
|
|
|
|
<div class="cell auto"><%= live_component(@socket, AugieWeb.SparklineComponent, data: @accelerometer_x, fill: false, height: 20, sample_count: @sample_count) %></div>
|
|
|
|
</div>
|
|
|
|
<div class="grid-x">
|
|
|
|
<div class="cell auto shrink"><strong>Y</strong> </div>
|
|
|
|
<div class="cell auto"><%= live_component(@socket, AugieWeb.SparklineComponent, data: @accelerometer_y, fill: false, height: 20, sample_count: @sample_count) %></div>
|
|
|
|
</div>
|
|
|
|
<div class="grid-x">
|
|
|
|
<div class="cell auto shrink"><strong>Z</strong> </div>
|
|
|
|
<div class="cell auto"><%= live_component(@socket, AugieWeb.SparklineComponent, data: @accelerometer_z, fill: false, height: 20, sample_count: @sample_count) %></div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div class="card-section">
|
|
|
|
<h5>Magnetometer</h5>
|
|
|
|
<div class="grid-x">
|
|
|
|
<div class="cell auto shrink"><strong>X</strong> </div>
|
|
|
|
<div class="cell auto"><%= live_component(@socket, AugieWeb.SparklineComponent, data: @magnetometer_x, fill: false, height: 20, sample_count: @sample_count) %></div>
|
|
|
|
</div>
|
|
|
|
<div class="grid-x">
|
|
|
|
<div class="cell auto shrink"><strong>Y</strong> </div>
|
|
|
|
<div class="cell auto"><%= live_component(@socket, AugieWeb.SparklineComponent, data: @magnetometer_y, fill: false, height: 20, sample_count: @sample_count) %></div>
|
|
|
|
</div>
|
|
|
|
<div class="grid-x">
|
|
|
|
<div class="cell auto shrink"><strong>Z</strong> </div>
|
|
|
|
<div class="cell auto"><%= live_component(@socket, AugieWeb.SparklineComponent, data: @magnetometer_z, fill: false, height: 20, sample_count: @sample_count) %></div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div class="card-section">
|
|
|
|
<h5>Gyroscope</h5>
|
|
|
|
<div class="grid-x">
|
|
|
|
<div class="cell auto shrink"><strong>X</strong> </div>
|
|
|
|
<div class="cell auto"><%= live_component(@socket, AugieWeb.SparklineComponent, data: @gyroscope_x, fill: false, height: 20, sample_count: @sample_count) %></div>
|
|
|
|
</div>
|
|
|
|
<div class="grid-x">
|
|
|
|
<div class="cell auto shrink"><strong>Y</strong> </div>
|
|
|
|
<div class="cell auto"><%= live_component(@socket, AugieWeb.SparklineComponent, data: @gyroscope_y, fill: false, height: 20, sample_count: @sample_count) %></div>
|
|
|
|
</div>
|
|
|
|
<div class="grid-x">
|
|
|
|
<div class="cell auto shrink"><strong>Z</strong> </div>
|
|
|
|
<div class="cell auto"><%= live_component(@socket, AugieWeb.SparklineComponent, data: @gyroscope_z, fill: false, height: 20, sample_count: @sample_count) %></div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div class="card-section">
|
|
|
|
<h5>Gravity</h5>
|
|
|
|
<div class="grid-x">
|
|
|
|
<div class="cell auto shrink"><strong>X</strong> </div>
|
|
|
|
<div class="cell auto"><%= live_component(@socket, AugieWeb.SparklineComponent, data: @gravity_x, fill: false, height: 20, sample_count: @sample_count, min: -10, max: 10) %></div>
|
|
|
|
</div>
|
|
|
|
<div class="grid-x">
|
|
|
|
<div class="cell auto shrink"><strong>Y</strong> </div>
|
|
|
|
<div class="cell auto"><%= live_component(@socket, AugieWeb.SparklineComponent, data: @gravity_y, fill: false, height: 20, sample_count: @sample_count, min: -10, max: 10) %></div>
|
|
|
|
</div>
|
|
|
|
<div class="grid-x">
|
|
|
|
<div class="cell auto shrink"><strong>Z</strong> </div>
|
|
|
|
<div class="cell auto"><%= live_component(@socket, AugieWeb.SparklineComponent, data: @gravity_z, fill: false, height: 20, sample_count: @sample_count, min: -10, max: 10) %></div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<div class="card-section">
|
|
|
|
<h5>Linear Acceleration</h5>
|
|
|
|
<div class="grid-x">
|
|
|
|
<div class="cell auto shrink"><strong>X</strong> </div>
|
|
|
|
<div class="cell auto"><%= live_component(@socket, AugieWeb.SparklineComponent, data: @linear_acceleration_x, fill: false, height: 20, sample_count: @sample_count) %></div>
|
|
|
|
</div>
|
|
|
|
<div class="grid-x">
|
|
|
|
<div class="cell auto shrink"><strong>Y</strong> </div>
|
|
|
|
<div class="cell auto"><%= live_component(@socket, AugieWeb.SparklineComponent, data: @linear_acceleration_y, fill: false, height: 20, sample_count: @sample_count) %></div>
|
|
|
|
</div>
|
|
|
|
<div class="grid-x">
|
|
|
|
<div class="cell auto shrink"><strong>Z</strong> </div>
|
|
|
|
<div class="cell auto"><%= live_component(@socket, AugieWeb.SparklineComponent, data: @linear_acceleration_z, fill: false, height: 20, sample_count: @sample_count) %></div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div class="card-section">
|
|
|
|
<h5>Temperature</h5>
|
|
|
|
<div class="grid-x">
|
|
|
|
<div class="cell auto shrink"><strong><%= CircularBuffer.newest(@temperature) %>ºC</strong> </div>
|
|
|
|
<div class="cell auto"><%= live_component(@socket, AugieWeb.SparklineComponent, data: @temperature, height: 20, sample_count: @sample_count, min: 0, max: 100) %></div>
|
2020-04-11 17:24:59 +12:00
|
|
|
</div>
|
2020-03-08 15:05:20 +13:00
|
|
|
</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(IMU, 2)
|
2020-03-08 15:05:20 +13:00
|
|
|
|
|
|
|
socket =
|
|
|
|
socket
|
|
|
|
|> assign(
|
|
|
|
data_ready: false,
|
|
|
|
sample_count: @sample_count,
|
|
|
|
orientation_x: CircularBuffer.new(@sample_count),
|
|
|
|
orientation_y: CircularBuffer.new(@sample_count),
|
|
|
|
orientation_z: CircularBuffer.new(@sample_count),
|
|
|
|
orientation_w: CircularBuffer.new(@sample_count),
|
|
|
|
accelerometer_x: CircularBuffer.new(@sample_count),
|
|
|
|
accelerometer_y: CircularBuffer.new(@sample_count),
|
|
|
|
accelerometer_z: CircularBuffer.new(@sample_count),
|
|
|
|
magnetometer_x: CircularBuffer.new(@sample_count),
|
|
|
|
magnetometer_y: CircularBuffer.new(@sample_count),
|
|
|
|
magnetometer_z: CircularBuffer.new(@sample_count),
|
|
|
|
gyroscope_x: CircularBuffer.new(@sample_count),
|
|
|
|
gyroscope_y: CircularBuffer.new(@sample_count),
|
|
|
|
gyroscope_z: CircularBuffer.new(@sample_count),
|
|
|
|
gravity_x: CircularBuffer.new(@sample_count),
|
|
|
|
gravity_y: CircularBuffer.new(@sample_count),
|
|
|
|
gravity_z: CircularBuffer.new(@sample_count),
|
|
|
|
linear_acceleration_x: CircularBuffer.new(@sample_count),
|
|
|
|
linear_acceleration_y: CircularBuffer.new(@sample_count),
|
|
|
|
linear_acceleration_z: CircularBuffer.new(@sample_count),
|
|
|
|
temperature: CircularBuffer.new(@sample_count)
|
|
|
|
)
|
|
|
|
|
|
|
|
{:ok, socket}
|
|
|
|
end
|
|
|
|
|
|
|
|
def handle_info(
|
2020-04-11 17:24:59 +12:00
|
|
|
{CommunityTheatre, %{topic: IMU, payload: sample}},
|
2020-03-08 15:05:20 +13:00
|
|
|
%{
|
|
|
|
assigns: %{
|
|
|
|
orientation_x: orientation_x,
|
|
|
|
orientation_y: orientation_y,
|
|
|
|
orientation_z: orientation_z,
|
|
|
|
orientation_w: orientation_w,
|
|
|
|
accelerometer_x: accelerometer_x,
|
|
|
|
accelerometer_y: accelerometer_y,
|
|
|
|
accelerometer_z: accelerometer_z,
|
|
|
|
magnetometer_x: magnetometer_x,
|
|
|
|
magnetometer_y: magnetometer_y,
|
|
|
|
magnetometer_z: magnetometer_z,
|
|
|
|
gyroscope_x: gyroscope_x,
|
|
|
|
gyroscope_y: gyroscope_y,
|
|
|
|
gyroscope_z: gyroscope_z,
|
|
|
|
gravity_x: gravity_x,
|
|
|
|
gravity_y: gravity_y,
|
|
|
|
gravity_z: gravity_z,
|
|
|
|
linear_acceleration_x: linear_acceleration_x,
|
|
|
|
linear_acceleration_y: linear_acceleration_y,
|
|
|
|
linear_acceleration_z: linear_acceleration_z,
|
|
|
|
temperature: temperature
|
|
|
|
}
|
|
|
|
} = socket
|
|
|
|
) do
|
|
|
|
orientation_x = orientation_x |> CircularBuffer.insert(sample.orientation.x)
|
|
|
|
orientation_y = orientation_y |> CircularBuffer.insert(sample.orientation.y)
|
|
|
|
orientation_z = orientation_z |> CircularBuffer.insert(sample.orientation.z)
|
|
|
|
orientation_w = orientation_w |> CircularBuffer.insert(sample.orientation.w)
|
|
|
|
|
|
|
|
accelerometer_x = accelerometer_x |> CircularBuffer.insert(sample.accelerometer.x)
|
|
|
|
accelerometer_y = accelerometer_y |> CircularBuffer.insert(sample.accelerometer.y)
|
|
|
|
accelerometer_z = accelerometer_z |> CircularBuffer.insert(sample.accelerometer.z)
|
|
|
|
|
|
|
|
magnetometer_x = magnetometer_x |> CircularBuffer.insert(sample.magnetometer.x)
|
|
|
|
magnetometer_y = magnetometer_y |> CircularBuffer.insert(sample.magnetometer.y)
|
|
|
|
magnetometer_z = magnetometer_z |> CircularBuffer.insert(sample.magnetometer.z)
|
|
|
|
|
|
|
|
gyroscope_x = gyroscope_x |> CircularBuffer.insert(sample.gyroscope.x)
|
|
|
|
gyroscope_y = gyroscope_y |> CircularBuffer.insert(sample.gyroscope.y)
|
|
|
|
gyroscope_z = gyroscope_z |> CircularBuffer.insert(sample.gyroscope.z)
|
|
|
|
|
|
|
|
gravity_x = gravity_x |> CircularBuffer.insert(sample.gravity.x)
|
|
|
|
gravity_y = gravity_y |> CircularBuffer.insert(sample.gravity.y)
|
|
|
|
gravity_z = gravity_z |> CircularBuffer.insert(sample.gravity.z)
|
|
|
|
|
|
|
|
linear_acceleration_x =
|
|
|
|
linear_acceleration_x |> CircularBuffer.insert(sample.linear_acceleration.x)
|
|
|
|
|
|
|
|
linear_acceleration_y =
|
|
|
|
linear_acceleration_y |> CircularBuffer.insert(sample.linear_acceleration.y)
|
|
|
|
|
|
|
|
linear_acceleration_z =
|
|
|
|
linear_acceleration_z |> CircularBuffer.insert(sample.linear_acceleration.z)
|
|
|
|
|
|
|
|
temperature = temperature |> CircularBuffer.insert(sample.temperature)
|
|
|
|
|
|
|
|
socket =
|
|
|
|
socket
|
|
|
|
|> assign(
|
|
|
|
data_ready: true,
|
|
|
|
orientation_x: orientation_x,
|
|
|
|
orientation_y: orientation_y,
|
|
|
|
orientation_z: orientation_z,
|
|
|
|
orientation_w: orientation_w,
|
|
|
|
accelerometer_x: accelerometer_x,
|
|
|
|
accelerometer_y: accelerometer_y,
|
|
|
|
accelerometer_z: accelerometer_z,
|
|
|
|
magnetometer_x: magnetometer_x,
|
|
|
|
magnetometer_y: magnetometer_y,
|
|
|
|
magnetometer_z: magnetometer_z,
|
|
|
|
gyroscope_x: gyroscope_x,
|
|
|
|
gyroscope_y: gyroscope_y,
|
|
|
|
gyroscope_z: gyroscope_z,
|
|
|
|
gravity_x: gravity_x,
|
|
|
|
gravity_y: gravity_y,
|
|
|
|
gravity_z: gravity_z,
|
|
|
|
linear_acceleration_x: linear_acceleration_x,
|
|
|
|
linear_acceleration_y: linear_acceleration_y,
|
|
|
|
linear_acceleration_z: linear_acceleration_z,
|
|
|
|
temperature: temperature
|
|
|
|
)
|
|
|
|
|
|
|
|
{:noreply, socket}
|
|
|
|
end
|
|
|
|
end
|