augie/webapp/lib/augie_web/live/imu_sensor_live.ex

defmodule AugieWeb.IMUSensorLive do
  use Phoenix.LiveView
  alias Augie.DataFlow
  alias Augie.Sensor.IMU

  @moduledoc """
  A Liveview which displays the data from the IMU.
  """

  @sample_count 60

  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>&nbsp;</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>&nbsp;</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>&nbsp;</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>&nbsp;</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>&nbsp;</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>&nbsp;</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>&nbsp;</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>&nbsp;</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>&nbsp;</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>&nbsp;</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>&nbsp;</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>&nbsp;</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>&nbsp;</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>&nbsp;</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>&nbsp;</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>&nbsp;</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>&nbsp;</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>&nbsp;</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>&nbsp;</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>&nbsp;</div>
            <div class="cell auto"><%= live_component(@socket, AugieWeb.SparklineComponent, data: @temperature, height: 20, sample_count: @sample_count, min: 0, max: 100) %></div>
          </div>
        </div>
      <% else %>
        <div class="card-section">
          No data available.
        </div>
      <% end %>
    </div>
    """
  end

  def mount(_params, _context, socket) do
    if connected?(socket), do: DataFlow.subscribe(IMU)

    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(
        {DataFlow, IMU, sample},
        %{
          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