Add device orientation control web component and example

Author: angusjfw

examples/labs/orientation_controller/index.html

@@ -0,0 +1,26 @@
+{% extends "base-controller.html" %}
+
+{% block main %}
+  <img src="video.mjpg" class="background-video"></img>
+
+  <div style="box-sizing: border-box; padding: 40px; display: flex;">
+    {% if g.show_left_joystick %}
+      <joystick-component
+        onmove="publish({ type: 'left_joystick', data })"
+        onend="publish({ type: 'left_joystick', data })"
+      > </joystick-component>
+    {% endif %}
+
+    <joystick-component
+      onmove="publish({ type: 'right_joystick', data })"
+      onend="publish({ type: 'right_joystick', data })"
+      style="margin-left: auto"
+    ></joystick-component>
+  </div>
+
+  <div style="box-sizing: border-box; padding: 40px; display: flex;">
+    <orientation-component
+      onchange="publish({ type: 'device_orientation', data })"
+    ></orientation-component>
+  </div>
+{% endblock %}

examples/labs/orientation_controller/main.py

@@ -0,0 +1,44 @@
+import os
+
+from pitop import Camera, DriveController, Pitop
+from pitop.labs import RoverWebController
+
+# to access device orientation sensors, the webpage must be accessed over ssl,
+# so ensure that an ssl cert exists for this
+if not os.path.exists("cert.pem") or not os.path.exists("key.pem"):
+    print("Generating self-signed ssl cert")
+    os.system(
+        'openssl req -x509 -newkey rsa:4096 -keyout key.pem -out cert.pem -sha256 -nodes -subj "/O=pi-top"'
+    )
+
+rover = Pitop()
+rover.add_component(DriveController())
+rover.add_component(Camera())
+
+
+def device_orientation(data):
+    print(data)
+    x = data.get("x", 0)
+    y = data.get("y", 0)
+
+    if abs(x) < 5:
+        x = 0
+    x = x * -0.1
+
+    if abs(y) < 5:
+        y = 0
+    y = y * 0.1
+
+    print(x, y)
+    rover.drive.robot_move(y, x)
+
+
+rover_controller = RoverWebController(
+    get_frame=rover.camera.get_frame,
+    drive=rover.drive,
+    message_handlers={"device_orientation": device_orientation},
+    cert="cert.pem",
+    key="key.pem",
+)
+
+rover_controller.serve_forever()

pitop/labs/web/blueprints/webcomponents/templates/setup-webcomponents.html

@@ -1,2 +1,3 @@
 <script type="text/javascript" src="/webcomponents/vendor/nipplejs.min.js"></script>
 <script type="text/javascript" src="/webcomponents/joystick-component.js"></script>
+<script type="text/javascript" src="/webcomponents/orientation-component.js"></script>

pitop/labs/web/blueprints/webcomponents/webcomponents/orientation-component.js

@@ -0,0 +1,138 @@
+class DeviceOrientation extends HTMLElement {
+  constructor() {
+    super();
+  }
+
+  connectedCallback() {
+    if (!this.connected) {
+      this.connected = true;
+      this.setup();
+    }
+  }
+
+  disconnectedCallback() {
+    this.disable();
+    this.connected = false;
+  }
+
+  setup = async () => {
+    this.attachShadow({mode: 'open'});
+    this.wrapper = document.createElement('div');
+    this.shadowRoot.append(this.wrapper);
+
+    this.header = document.createElement('h3');
+    this.header.textContent = 'Device Orientation Control';
+    this.wrapper.appendChild(this.header);
+
+    if (typeof DeviceOrientationEvent === 'undefined') {
+      this.header.textContent = 'Device Orientation Not Supported On This Device!';
+      return;
+    }
+
+    if (typeof DeviceOrientationEvent.requestPermission === 'function') {
+      this.permissionButton = document.createElement('input');
+      this.permissionButton.setAttribute('type','button');
+      this.permissionButton.textContent('Allow sensor access');
+      this.permissionButton.addEventListener('click', this.requestPermission);
+      this.wrapper.appendChild(this.permissionButton);
+      return;
+    }
+
+    this.showEnable();
+  }
+
+  requestPermission = async () => {
+    const permissionState = await DeviceOrientationEvent.requestPermission()
+    return permissionState === 'granted' ? this.permissionGranted() : this.permissionDenied();
+  }
+
+  permissionGranted = () => {
+    this.permissionButton.remove();
+    this.showEnable();
+  }
+
+  permissionDenied = () => {
+    this.header.textContent = 'Device Orientation Permission Denied!';
+  }
+
+  showEnable = () => {
+    this.enabled = document.createElement('input');
+    this.enabled.setAttribute('type','checkbox');
+    this.enabled.setAttribute('id','enabled');
+    this.wrapper.appendChild(this.enabled);
+
+    this.enabledLabel = document.createElement('label');
+    this.enabledLabel.setAttribute('for','enabled');
+    this.enabledLabel.innerText = 'Disabled';
+    this.wrapper.appendChild(this.enabledLabel);
+
+    this.enabled.addEventListener('change', (event) => {
+      if (event.currentTarget.checked) {
+        this.enable();
+      } else {
+        this.disable();
+      }
+    })
+  }
+
+  enable = () => {
+    window.addEventListener('deviceorientation', this.handleOrientationEvent);
+    // deviceorientation events don't fire when window blurs, so reset controls
+    window.addEventListener('blur', this.orientationReset);
+
+    this.showOrientationDisplay();
+    this.enabledLabel.innerText = 'Enabled';
+  }
+
+  disable = () => {
+    this.orientationReset();
+
+    window.removeEventListener('deviceorientation', this.handleOrientationEvent);
+    window.removeEventListener('blur', this.orientationReset);
+
+    this.hideOrientationDisplay();
+    this.enabledLabel.innerText = 'Disabled';
+  }
+
+  orientationReset = () => {
+    this.handleOrientationEvent({ alpha: 0, beta: 0, gamma: 0 });
+  };
+
+  handleOrientationEvent = (event) => {
+    const x = event.beta; // landscape left right
+    const y = event.gamma; // landscape forward back
+    const z = event.alpha; // landscape rotation
+
+    this.updateOrientationDisplay(x, y, z);
+
+    eval(`
+     const data = ${JSON.stringify({ x, y, z })};
+     ${this.getAttribute('onchange')}
+    `);
+  }
+
+  showOrientationDisplay = () => {
+    this.x = document.createElement('p');
+    this.y = document.createElement('p');
+    this.z = document.createElement('p');
+    this.wrapper.appendChild(this.x);
+    this.wrapper.appendChild(this.y);
+    this.wrapper.appendChild(this.z);
+
+    this.updateOrientationDisplay(0, 0, 0)
+  }
+
+  hideOrientationDisplay = () => {
+    this.x.remove();
+    this.y.remove();
+    this.z.remove();
+  }
+
+  updateOrientationDisplay = (x, y, z) => {
+    this.x.textContent = 'x: ' + x;
+    this.y.textContent = 'y: ' + y;
+    this.z.textContent = 'z: ' + z;
+  }
+}
+
+window.customElements.define('orientation-component', DeviceOrientation);