Timot05.github.io/motionpilot.html at master · Timot05/Timot05.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Motionpilot - SARK</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    fontFamily: {
                        'sans': ['Inter', 'system-ui', 'sans-serif']
                    }
                }
            }
        }
    </script>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700&display=swap" rel="stylesheet">
</head>
<body class="bg-gray-50 font-sans">
    <!-- Header -->
    <header class="bg-white shadow-sm">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex justify-between items-center py-6">
                <a href="index.html" class="hover:opacity-80 transition-opacity"><img src="logo.svg" alt="SARK" class="h-12"></a>

            </div>
        </div>
    </header>

    <!-- Content -->
    <main class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
        <div class="bg-white rounded-lg shadow-md p-8">
            <h1 class="text-4xl md:text-5xl font-light text-gray-900 mb-8">Motionpilot</h1>
            <div class="prose prose-lg max-w-none">
                <img src="static/images/Motionpilot/motionpilot_cover.jpeg" alt="Motionpilot Controller" class="w-full rounded-lg mb-8">
                <p class="text-lg text-gray-700 mb-8">
                    Our goal with this project was to improve the flight experience of First Person View (FPV) drones that are piloted with cumbersome conventional controllers. This was achieved by introducing motion control and a user interface specifically tailored for FPV.
                </p>
                <img src="static/images/Motionpilot/motionpilot_remote.jpg" alt="Picture of MotionPilot Controller" class="w-full rounded-lg mb-8">
                <p class="text-lg text-gray-700 mb-8">
                    This project has been challenging and incredibly rewarding. It involved designing multiple prototypes, firmware revisions, electronic printed circuit boards and mechanical systems. We manufactured and assembled more than hundreds of prototypes that are still being used by our beta-testers to this day.
                </p>
                <img src="static/images/Motionpilot/controller_hand_V3.jpeg" alt="Picture of MotionPilot Controller" class="w-full rounded-lg mb-8">
                <p class="text-lg text-gray-700 mb-8">
                    The hand motion is tracked using gyroscopes, accelerometers and compasses. The 9 axis are fused together to produce the controller's attitude quaternion that is then being used to define the control outputs. the trigger controls the throttle.
                </p>
                <img src="static/images/Motionpilot/controller_top.jpeg" alt="Picture of MotionPilot controller" class="w-full rounded-lg mb-8">
                <p class="text-lg text-gray-700 mb-8">
                    The main button is used to arm/disarm the drone as well as setting the controller neutral position. The secondary button is used to select one of the three flight modes.
                </p>
                <img src="static/images/Motionpilot/controller_top_trim.jpeg" alt="Picture of MotionPilot controller" class="w-full rounded-lg mb-8">
                <p class="text-lg text-gray-700 mb-8">
                    A USB port allows to charge the battery and change the control configuration. A secondary jack connector allows to daisy chain two controllers together to teach someone how to pilot.
                </p>
                <img src="static/images/Motionpilot/controller_bottom_trim.jpeg" alt="Picture of MotionPilot Controller" class="w-full rounded-lg mb-8">
            </div>
        </div>
    </main>

    <!-- Footer -->
    <footer class="bg-gray-800 text-white py-8 mt-16">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
            <p>&copy; 2025 SARK. All rights reserved.</p>
        </div>
    </footer>
</body>
</html>