Hacky a-frame usage from the bar last night :D

.tool-versions

@@ -0,0 +1 @@
+nodejs 14.12.0

assets/js/app.js

@@ -26,6 +26,7 @@ import { LiveSocket } from "phoenix_live_view"
 import topbar from "../vendor/topbar"
 import { mountMap, updateMap } from "./map"
 import { mountView, updateView } from "./view"
+import { mountVR, updateVR} from "./vr"
 
 function extractLocation(element) {
   return {
@@ -34,23 +35,27 @@ function extractLocation(element) {
     alt: element.getAttribute("data-alt"),
     bearing: element.getAttribute("data-bearing"),
     pitch: element.getAttribute("data-pitch"),
+    roll: element.getAttribute("data-roll")
   }
 }
 
 const mapState = {}
 const viewState = {}
+const vrState = {}
 
 let Hooks = {}
 Hooks.Map = {
   mounted() {
     const location = extractLocation(this.el)
     mountMap(mapState, location)
     mountView(viewState, location)
+    mountVR(vrState, location)
   },
   updated() {
     const location = extractLocation(this.el)
     updateMap(mapState, location)
     updateView(viewState, location)
+    updateVR(vrState, location)
   },
 }
 

assets/js/vr.js

@@ -0,0 +1,36 @@
+export function mountVR(state, location) {
+  let pos = {
+    lat: parseFloat(location.lat),
+    lng: parseFloat(location.lng),
+    alt: parseFloat(location.alt),
+    pitch: parseFloat(location.pitch),
+    yaw: parseFloat(location.bearing),
+    roll: parseFloat(location.roll)};
+
+  state.camera = {
+    rigElement: document.getElementById('vr-rig'),
+    cameraElement: document.getElementById('vr-camera'),
+    pos: pos
+  }
+}
+
+export function updateVR(state, location) {
+  let cam = state.camera.cameraElement;
+  let rig = state.camera.rigElement;
+  let pos = { lat:  parseFloat(location.lat),
+              lng: parseFloat(location.lng),
+              alt: parseFloat(location.alt),
+              pitch: parseFloat(location.pitch),
+              roll: parseFloat(location.roll),
+              yaw: parseFloat(location.bearing)}
+  state.pos = pos;
+  rig.setAttribute('position', {x: pos.lat , y: pos.alt , z: pos.lng});
+  cam.setAttribute('rotation', {
+    x: pos.pitch,
+    y: -pos.yaw,
+    z: -pos.roll
+  });
+
+  console.log( pos);
+
+}

config/dev.exs

@@ -9,7 +9,13 @@ import Config
 config :flight_simulator, FlightSimulatorWeb.Endpoint,
   # Binding to loopback ipv4 address prevents access from other machines.
   # Change to `ip: {0, 0, 0, 0}` to allow access from other machines.
-  http: [ip: {127, 0, 0, 1}, port: 4000],
+  http: [ip: {0, 0, 0, 0}, port: 4000],
+  https: [
+    port: 4001,
+    cipher_suite: :strong,
+    keyfile: "priv/cert/selfsigned_key.pem",
+    certfile: "priv/cert/selfsigned.pem"
+  ],
   check_origin: false,
   code_reloader: true,
   debug_errors: true,

lib/flight_simulator.ex

@@ -13,20 +13,20 @@ defmodule FlightSimulator do
   """
 
   @pitch_delta 1.0
-  @max_pitch_angle 20.0
-  @min_pitch_angle -20.0
+  @max_pitch_angle 89.0
+  @min_pitch_angle -89.0
 
   @roll_delta 1.0
-  @max_roll_angle 50.0
-  @min_roll_angle -50.0
+  @max_roll_angle 90.0
+  @min_roll_angle -90.0
 
   @yaw_delta 1.0
 
-  @speed_delta 5.0
-  @min_speed 5.0
+  @speed_delta 0.2
+  @min_speed 2.0
   @max_speed 120.0
 
-  @min_altitude 10.0
+  @min_altitude 0.0
 
   @reset_factor 1.1
 
@@ -237,10 +237,15 @@ defmodule FlightSimulator do
   http://www.movable-type.co.uk/scripts/latlong.html#dest-point
   """
   def update_location(%{lat: lat, lng: lng}, bearing, distance) do
-    {:ok, [lat_new, lng_new]} =
-      destination_point({lat, lng}, degrees_to_radians(bearing), distance)
-
-    %{lat: lat_new, lng: lng_new}
+    #{:ok, [lat_new, lng_new]} =
+      #destination_point({lat, lng}, degrees_to_radians(bearing), distance)
+
+    #%{lat: lat_new, lng: lng_new}
+    theta = degrees_to_radians(bearing)
+    %{
+      lat: lat - :math.sin(theta) * distance,
+      lng: lng - :math.cos(theta) * distance
+    }
   end
 
   defp sin(a), do: :math.sin(degrees_to_radians(a))

lib/flight_simulator_web/flight_simulator/flight_simulator_live.ex

@@ -4,8 +4,8 @@ defmodule FlightSimulatorWeb.FlightSimulatorLive do
   alias FlightSimulatorWeb.Instrument
 
   @initial_state %FlightSimulator{
-    location: %{lat: -33.964592291602244, lng: 151.18069727924058},
-    bearing: 347.0
+    location: %{lat: 0, lng: 10},
+    bearing: 0.0
   }
 
   @tick 30

lib/flight_simulator_web/flight_simulator/flight_simulator_live.html.heex

@@ -5,6 +5,7 @@
   data-lng={@simulator.location.lng}
   data-alt={@simulator.altitude}
   data-bearing={@simulator.bearing}
+  data-roll={@simulator.roll_angle}
   data-pitch={@simulator.pitch_angle} />
 
 <Instrument.panel>
@@ -15,12 +16,31 @@
       altitude={@simulator.altitude}
       speed={@simulator.speed} />
   </Instrument.instrument>
-  <Instrument.instrument>
-    <Instrument.compass bearing={@simulator.bearing} />
-  </Instrument.instrument>
+
   <Instrument.instrument phx-update="ignore">
-    <Instrument.map />
+  <div style="z-index: -1000;">
+    <a-scene>
+      <a-assets>
+        <img id="rose" src="/images/compass.svg">
+      </a-assets>
+      <a-entity id="vr-rig" position="0 0 0"}>
+        <a-entity rotation="0 0 0">
+          <a-entity id="vr-camera" camera rotation="0 0 0"></a-entity>
+        </a-entity>
+      </a-entity>
+      <a-box position="-1 0.5 3" rotation="0 45 0" color="#4CC3D9"></a-box>
+      <a-sphere position="0 1.25 5" radius="1.25" color="#EF2D5E"></a-sphere>
+      <a-cylinder position="1 0.75 3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
+      <a-plane position="0 0 0" rotation="-90 0 0" width="333" height="333" color="#7BC8A4"></a-plane>
+      <a-sky color="skyblue"></a-sky>
+      <a-grid position="0 0.1 0" rotation="-90 0 0" width="333" height="333" color="999"></a-grid>
+    </a-scene>
+  </div>
   </Instrument.instrument>
   <Instrument.instrument id="view" phx-update="ignore">
   </Instrument.instrument>
+ <Instrument.instrument>
+    <Instrument.compass bearing={@simulator.bearing} />
+  </Instrument.instrument>
+
 </Instrument.panel>

lib/flight_simulator_web/flight_simulator/instrument.ex

@@ -6,7 +6,7 @@ defmodule FlightSimulatorWeb.Instrument do
   """
   def panel(assigns) do
     ~H"""
-    <ul phx-window-keydown="control_input" class="grid grid-cols-2 gap-6">
+    <ul phx-window-keydown="control_input" class="grid grid-cols-1 gap-6">
       <%= render_slot(@inner_block) %>
     </ul>
     """

lib/flight_simulator_web/templates/layout/root.html.heex

@@ -8,6 +8,8 @@
     <%= live_title_tag assigns[:page_title] || "FlightSimulator", suffix: " · Phoenix Framework" %>
     <link phx-track-static rel="stylesheet" href={Routes.static_path(@conn, "/assets/app.css")}/>
     <script defer phx-track-static type="text/javascript" src={Routes.static_path(@conn, "/assets/app.js")}></script>
+
+    <script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
   </head>
   <body>
     <header>

priv/cert/selfsigned.pem

@@ -0,0 +1,22 @@
+-----BEGIN CERTIFICATE-----
+MIIDfTCCAmWgAwIBAgIJAJ6SvJzV00PLMA0GCSqGSIb3DQEBCwUAMEMxGjAYBgNV
+BAoMEVBob2VuaXggRnJhbWV3b3JrMSUwIwYDVQQDDBxTZWxmLXNpZ25lZCB0ZXN0
+IGNlcnRpZmljYXRlMB4XDTIyMDkwMzAwMDAwMFoXDTIzMDkwMzAwMDAwMFowQzEa
+MBgGA1UECgwRUGhvZW5peCBGcmFtZXdvcmsxJTAjBgNVBAMMHFNlbGYtc2lnbmVk
+IHRlc3QgY2VydGlmaWNhdGUwggEiMA0GCSqGSIb3DQEBAQUAA4IBDwAwggEKAoIB
+AQDbbkQYjH/9ig9XXvX+NvaYsrTHGJobZj+7YJ9xIxBGydRyRVm+ed/kiYFEoKAG
+xes6qnCKk+3hEN4OqD1sOKwkPKHjc0pohjFZXU4NwZz8oCNBcDJ20f8SOhsRmhOo
+bALTUOF6UvxUnAI5MLnmrCcgC2xKwmdMp2qRx3vIoMelOn7fRm/bSxgjJ0ykLW2c
+N/FgkrCatVvsDHPw2h6zkuNEyG067zYrM+fCIVCpqxFhoq1QrjLIfb2xqzTQu8d8
+fwF+KM+THV7hhheEoiXE8EBMUjPn9gehfPnZG+zZNEboLpp7doB1x1rm+aSs0oC0
+IBCYkg0fbS5PZx3ArUSEezpnAgMBAAGjdDByMAwGA1UdEwEB/wQCMAAwDgYDVR0P
+AQH/BAQDAgWgMB0GA1UdJQQWMBQGCCsGAQUFBwMBBggrBgEFBQcDAjAdBgNVHQ4E
+FgQUud0m9RC8expL6QsTGFh9Z8J/fBQwFAYDVR0RBA0wC4IJbG9jYWxob3N0MA0G
+CSqGSIb3DQEBCwUAA4IBAQDIxHc2aSYkucFSkLMRXU5DW2SIyqG3XcQdA0PZNZ7O
+i0d0yU+B4s2CXh+0jq5EpGq9b1NP2Kszz2LUulJu8Igbz34H3eVqX4jTIgnfePF+
+9nW8QH8OiaMP0i9hv8ubzxhKXm3YLZ0mtQ5wbCz9z4DS2C1cw7LM5AuK0JBHCKax
+zbR56jIgof3gh/dOMYN9qq38u+FQ5sUcUu61VxBaScahKsqXW1/p6Oqwpf0DrZ5K
+JYKcvooVfeqOxZSC35Nc9FwAI07ORg8NZQU/jbGrmR5U4csOtGDiWLHIOL+wNhJW
+zH0KWRDOzvV72kI3++ygEwxiR+a0gPGTRVWLMfqfJ0b8
+-----END CERTIFICATE-----
+

priv/cert/selfsigned_key.pem

@@ -0,0 +1,28 @@
+-----BEGIN RSA PRIVATE KEY-----
+MIIEpAIBAAKCAQEA225EGIx//YoPV171/jb2mLK0xxiaG2Y/u2CfcSMQRsnUckVZ
+vnnf5ImBRKCgBsXrOqpwipPt4RDeDqg9bDisJDyh43NKaIYxWV1ODcGc/KAjQXAy
+dtH/EjobEZoTqGwC01DhelL8VJwCOTC55qwnIAtsSsJnTKdqkcd7yKDHpTp+30Zv
+20sYIydMpC1tnDfxYJKwmrVb7Axz8Noes5LjRMhtOu82KzPnwiFQqasRYaKtUK4y
+yH29sas00LvHfH8BfijPkx1e4YYXhKIlxPBATFIz5/YHoXz52Rvs2TRG6C6ae3aA
+dcda5vmkrNKAtCAQmJINH20uT2cdwK1EhHs6ZwIDAQABAoIBAQCLsmCB7HjTdiCc
+NCWR6XYG8saqdhwuU2NBrJr1UShcmMO62DHxVO/YND5q7YPTrA88syOg5dqszatB
+U5R/IHlfPIaoIk79ymkChqdZlKiYIG8xivdls/2aogl3pErdj54g4D4cPVbNmuDD
+fiTsGS9zdDJGSguvvmnXU1OX/9v6cNuXbwX6w4MlIOCNe8WCrnl35jktjux3hXHD
+EIQI1hS4as1VK2713IFRgZJyZGRSV4EQaG3owyodM0zjNMEuC//6TSCbdAH9F48N
+rT1OJutqqVntNLrnIFhhWswMV5zJUgzw5SQ7vTJefdhhYUZq6alhl3Q7S8pCsH2W
+84nHWNNJAoGBAP8wTMSfoH65JYuOChd7iNVvlZtW8e2LTGtRdsiLjMXzbe8gfb2F
+KUWl/1a2myeG2pqBPHv2f+wWtBiuLB+x1yTDEQkjuVRB3w7fpPSSsEeNv65RQRZD
+3tZUXKIF0bc5xNxB9VIQx28a0ztKoXItcN0qcCcFA1Qo13IRD7KcHxDtAoGBANwg
+3Mkb74dBLgNWbQtw67RWc1RzlzFM5tP4EM+K/4vAU6ce4w39Zhpswz9c53AhSCdg
+tDeTrUOMnH9NpGK3kpPLOqg83ZlwDF7Dh+CrPQwtw9fYv1xP2QH5+yZV+SlNJQ1g
+JADuAE6VjzKwQiCkySDqz5oKVnpy+H3GpFuSEFIjAoGAWxp+PbATV0p4GfNyrOGA
+f1pf2d5XbovNk3643m3bqwv2EmnSGigBDQlvOCDnEVx2jLRYyJS/JKUSVMFRpVsT
+SN+PJGkpj+gYXzH+rQX1gwYbCXuetfkzA+eITpuvPC+WlV/C2jJ9ULAN+1vweVe5
+tGujMHr8rj4KdIGczhIokR0CgYBWg3/idl08XiyUWTpAHeA1Hyjyjv9j++JYeo04
+1Fs89Jir/OKl0+p2BjryQzQeiKYP+9y4XwzgmHnFOqGZvqYX+e6SwmEhdb0W3Wgg
+r4wtpirrQR9sS2FxemrvlSh4x/4A9MERsHhkajk+ZbGHnNwDWOXAl8GHHHp3DEP6
+TTym2wKBgQDULQnQPzvEtWg9rK3LuOM3WZYZzGHmzU0iY4pKQbq5RDVQ06HAITkB
+8Bjjsc4moqHW+P9B7KYcIL16Rz4cq3369ZjFfb0kjLBzKzKuGWdvN/nBljgbiYCQ
+LMWGr9hjT2LworI1fLI4L4gpt2B8oOlMxrYEmgkuScakhSCRQwEw8w==
+-----END RSA PRIVATE KEY-----
+