Make Rover Controller Keyboard-Friendly

[CaptainAngle]

Problem or Possibility

It's annoying that the Rover Controller application only has mobile controls - the joystick only. It needs some keyboard friendly controls for classrooms without touchscreens

Also, maybe put controls for the camera servos!

Proposed Solution

Add WASD and Arrow Keys as controls :)

Alternative Solutions

Provide a tutorial on how to do this

Additional Context

[CaptainAngle]

Here's a way i did it
init.py
`from flask import Blueprint, g

from pitop.labs.web.blueprints.controller import ControllerBlueprint
from pitop.labs.web.utils import uses_flask_1

from .helpers import calculate_pan_tilt_angle, calculate_velocity_twist

def drive_handler(drive, data):
velocity_twist = calculate_velocity_twist(data)
linear = velocity_twist.get("linear", 0)
angular = velocity_twist.get("angular", 0)

drive.robot_move(linear, angular)

def pan_tilt_handler(pan_tilt, data):
angle = calculate_pan_tilt_angle(data)

pan_tilt.pan_servo.target_angle = angle.get("z")
pan_tilt.tilt_servo.target_angle = angle.get("y")

def wasd_handler(drive, data):
linear = data.get("linear", 0)
angular = data.get("angular", 0)
drive.robot_move(linear, angular)

class RoverControllerBlueprint(Blueprint):
def init(
self, drive=None, pan_tilt=None, get_frame=None, message_handlers=None, **kwargs
):
message_handlers = {} if message_handlers is None else message_handlers
Blueprint.init(
self, "rover", name, template_folder="templates", **kwargs
)

    passed_left_joystick_handler = message_handlers.get("left_joystick") is not None

    # set show_left_joystick every request for use in base-rover.html
    @self.before_app_request
    def set_show_left_joystick():
        g.show_left_joystick = passed_left_joystick_handler or pan_tilt is not None

    if message_handlers.get("left_joystick") is None:

        def left_joystick(data):
            return pan_tilt_handler(pan_tilt, data)

        message_handlers["left_joystick"] = left_joystick

    if message_handlers.get("right_joystick") is None:

        def right_joystick(data):
            return drive_handler(drive, data)

        message_handlers["right_joystick"] = right_joystick

    if message_handlers.get("wasd_control") is None:

        def wasd_control(data):
            return wasd_handler(drive, data)

        message_handlers["wasd_control"] = wasd_control

    self.controller_blueprint = ControllerBlueprint(
        get_frame=get_frame, message_handlers=message_handlers
    )

def register(self, app, options, *args, **kwargs):
    if uses_flask_1():
        app.register_blueprint(self.controller_blueprint, **options)
        Blueprint.register(self, app, options, *args, **kwargs)
    else:
        Blueprint.register(self, app, options, *args, **kwargs)
        app.register_blueprint(self.controller_blueprint, **options)

def broadcast(self, message):
    self.controller_blueprint.broadcast(message)

`

base-rover.html
`
{% extends "base-controller.html" %}

{% block main %}

{% if g.show_left_joystick %} {% endif %}

<joystick-component
  onmove="publish({ type: 'right_joystick', data })"
  onend="publish({ type: 'right_joystick', data })"
  style="margin-left: auto"
></joystick-component>

<script> const keyMap = { w: { linear: 1, angular: 0 }, a: { linear: 0, angular: 1 }, s: { linear: -1, angular: 0 }, d: { linear: 0, angular: -1 }, }; document.addEventListener("keydown", (event) => { const command = keyMap[event.key.toLowerCase()]; if (command) { publish({ type: "wasd_control", data: command }); } }); document.addEventListener("keyup", (event) => { if (keyMap[event.key.toLowerCase()]) { publish({ type: "wasd_control", data: { linear: 0, angular: 0 } }); } }); </script>

{% endblock %}
`