Spaces:

dlouapre
/

coding_lab

Running

File size: 14,183 Bytes

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Reachy Mini Coding Lab</title>
    <link rel="stylesheet" href="/static/style.css">
    <script type="importmap">
    {
        "imports": {
            "@codemirror/state": "https://esm.sh/@codemirror/state@6.4.1",
            "@codemirror/view": "https://esm.sh/@codemirror/view@6.26.3?external=@codemirror/state",
            "@codemirror/language": "https://esm.sh/@codemirror/language@6.10.1?external=@codemirror/state,@codemirror/view,@lezer/common,@lezer/highlight",
            "@codemirror/commands": "https://esm.sh/@codemirror/commands@6.5.0?external=@codemirror/state,@codemirror/view,@codemirror/language",
            "@codemirror/autocomplete": "https://esm.sh/@codemirror/autocomplete@6.16.0?external=@codemirror/state,@codemirror/view,@codemirror/language,@codemirror/commands,@lezer/common",
            "@codemirror/search": "https://esm.sh/@codemirror/search@6.5.6?external=@codemirror/state,@codemirror/view",
            "@codemirror/lint": "https://esm.sh/@codemirror/lint@6.8.0?external=@codemirror/state,@codemirror/view",
            "@lezer/highlight": "https://esm.sh/@lezer/highlight@1.2.0?external=@lezer/common",
            "@lezer/common": "https://esm.sh/@lezer/common@1.2.1",
            "codemirror": "https://esm.sh/codemirror@6.0.1?external=@codemirror/state,@codemirror/view,@codemirror/language,@codemirror/commands,@codemirror/autocomplete,@codemirror/search,@codemirror/lint",
            "crelt": "https://esm.sh/crelt@1.0.6",
            "style-mod": "https://esm.sh/style-mod@4.1.2",
            "w3c-keyname": "https://esm.sh/w3c-keyname@2.2.8"
        }
    }
    </script>
</head>
<body>
    <!-- Hidden file input for loading scripts -->
    <input type="file" id="fileInput" accept=".rmscript,.txt" style="display: none;" onchange="handleFileSelect(event)">

    <!-- Page Header -->
    <header class="page-header">
        <img src="/static/reachy-hacker.png" alt="Reachy Mini" class="header-icon">
        <h1>Reachy Mini Coding Lab</h1>
    </header>

    <div class="container">
        <!-- Left Panel: Editor -->
        <div class="panel editor-panel">
            <div class="editor-toolbar">
                <div class="toolbar-left">
                    <button class="btn-save small" onclick="saveScript()">Save</button>
                    <button class="btn-load small" onclick="loadScript()">Load</button>
                    <button class="btn-clear small" onclick="clearEditor()">Clear</button>
                    <select id="examplesDropdown" class="examples-dropdown" onchange="handleExampleSelect(this)">
                        <option value="" disabled selected>Examples...</option>
                        <option value="look_around">Look around</option>
                        <option value="nod">Nod</option>
                        <option value="dance">Dance</option>
                        <option value="antenna_wave">Antenna wave</option>
                        <option value="all_at_once">All at once</option>
                    </select>
                </div>
                <div class="toolbar-right">
                    <button class="btn-help small" onclick="showCheatSheet()"> 📖Learn how to code </button>
                </div>
            </div>

            <div id="editor" class="editor"></div>

            <div id="compileStatus" class="compile-status idle">
                <span class="status-dot"></span>
                <span class="status-message">Ready</span>
            </div>

            <div class="section-title">Console</div>
            <div id="console" class="console">
                <div class="console-line info">Ready. Write a script and click Run!</div>
            </div>
        </div>

        <!-- Right Panel: Robot Control -->
        <div class="panel">
            <div class="run-button-group">
                <button id="executeBtn" class="btn-run" onclick="executeScript()">
                    <span class="btn-run-icon">🤖</span>
                    <span class="btn-run-text">Run on robot</span>
                </button>
                <button id="abortBtn" class="btn-abort" onclick="abortExecution()" style="display: none;">Abort</button>
            </div>

            <div id="irDisplay" class="ir-display">
                <div style="color: #999; text-align: center; padding: 20px;">
                    No actions yet. Write a script and click Run!
                </div>
            </div>

        </div>
    </div>

    <!-- Help Guide Modal -->
    <div id="cheatSheetModal" class="modal" style="display: none;">
        <div class="modal-content help-guide-modal">
            <div class="modal-header">
                <h3>RoboScript Help</h3>
                <button class="modal-close" onclick="hideCheatSheet()">&times;</button>
            </div>
            <div class="modal-body help-guide-body">
                <p class="guide-intro">
                    RoboScript lets you tell the robot what to do, step by step. It's designed to be easy to read—almost like writing instructions in plain English!
                </p>
                <p class="guide-intro">
                    Each line of code is one instruction. The robot executes them in order, from top to bottom. Blank lines are ignored, so feel free to add them to keep your code tidy.
                </p>
                <p class="guide-intro">
                    Don't worry about uppercase or lowercase: <code>look left</code>, <code>Look Left</code>, and <code>LOOK LEFT</code> all do the same thing.
                </p>

                <div class="guide-section">
                    <h4>Basic Movements</h4>
                    <p><strong><code>look</code></strong> rotates the head to look in a direction:</p>
                    <pre>look left
look right
look up
look down</pre>

                    <p><strong><code>turn</code></strong> rotates the whole body (the head follows along):</p>
                    <pre>turn left
turn right</pre>

                    <p><strong><code>tilt</code></strong> tilts the head sideways, like when you're curious:</p>
                    <pre>tilt left
tilt right</pre>

                    <p><strong><code>head</code></strong> moves the head in space without rotating it:</p>
                    <pre>head up
head down
head left
head right
head forward
head backward</pre>

                    <p>Each of these commands can be reset to the neutral position:</p>
                    <pre>look center
turn center
tilt center</pre>
                    <p class="guide-note">You can also use <code>straight</code> or <code>neutral</code> instead of <code>center</code>.</p>
                </div>

                <div class="guide-section">
                    <h4>Controlling Intensity and Duration</h4>
                    <p>Every movement has a default size and speed, so you can just write <code>look left</code> and it works. But if you want more control, you can specify exactly how much or how fast.</p>

                    <p><strong>Intensity</strong> is how far the robot moves. For rotations, it's in degrees. For translations, it's in millimeters:</p>
                    <pre>look left 45
head up 25</pre>

                    <p><strong>Duration</strong> is how long the movement takes, in seconds. Add an <code>s</code> after the number:</p>
                    <pre>look left 45 3.5s</pre>

                    <p>You can also specify just the duration (a default intensity will be used):</p>
                    <pre>look up 2s</pre>
                </div>

                <div class="guide-section">
                    <h4>Using Words Instead of Numbers</h4>
                    <p>If you prefer not to use numbers, you can use descriptive words instead.</p>

                    <p><strong>For intensity</strong> (how far to move):</p>
                    <p><code>tiny</code> <code>small</code> <code>alittle</code> <code>medium</code> <code>big</code> <code>alot</code> <code>maximum</code></p>

                    <p><strong>For speed</strong> (how fast to move):</p>
                    <p><code>superslow</code> <code>slow</code> <code>fast</code> <code>superfast</code> <code>veryfast</code></p>

                    <p>You can use one, both, or neither:</p>
                    <pre>turn left superfast
turn right maximum 1.5s
look up big and slow</pre>
                </div>

                <div class="guide-section">
                    <h4>Combining Movements</h4>
                    <p>Use <code>and</code> to combine directions within the same command:</p>
                    <pre>look up and left
look down maximum and left alittle</pre>

                    <p>You can also combine <em>different</em> commands to make them happen at the same time:</p>
                    <pre>head up and look right
head up and look right and tilt left</pre>
                    <p class="guide-note">This creates smooth, expressive movements where everything happens together.</p>
                </div>

                <div class="guide-section">
                    <h4>Antennas</h4>
                    <p>The robot has two antennas you can move. You can control them together or separately.</p>

                    <p><strong>Both antennas together:</strong></p>
                    <pre>antenna both up
antenna both down</pre>

                    <p><strong>Each antenna independently:</strong></p>
                    <pre>antenna left up
antenna right down</pre>

                    <p><strong>Combining antenna movements:</strong></p>
                    <pre>antenna left up and antenna right down</pre>

                    <p>For direction, you can use <code>up</code>, <code>down</code>, <code>left</code>, or <code>right</code>:</p>
                    <pre>antenna left left
antenna right right</pre>

                    <p>You can also use clock positions for precise control. Think of a clock face: 12 is straight up, 3 is to the side, 6 is down:</p>
                    <pre>antenna left 2 and antenna right 10</pre>
                </div>

                <div class="guide-section">
                    <h4>Pausing and Repeating</h4>
                    <p><strong><code>wait</code></strong> pauses the robot for a moment. Don't forget the <code>s</code>!</p>
                    <pre>wait 1s
wait 0.5s</pre>

                    <p><strong><code>repeat</code></strong> runs a sequence multiple times. The number after <code>repeat</code> is how many times to repeat. The commands to repeat must be <strong>indented</strong> (start with spaces):</p>
                    <pre>repeat 3
    tilt left maximum fast
    tilt right maximum fast
tilt center</pre>
                    <p class="guide-note">The last line (<code>tilt center</code>) is not indented, so it runs only once, after all the repetitions are done.</p>

                    <p>You can nest repeats inside each other:</p>
                    <pre>repeat 2
    antenna up
    repeat 3
        look left
        look right
    antenna down</pre>
                </div>

                <div class="guide-section">
                    <h4>Comments</h4>
                    <p>Lines starting with <code>#</code> are comments—they're ignored by the robot. Use them to leave notes:</p>
                    <pre># Wave hello
antenna both up
wait 0.5s
antenna both down</pre>
                </div>

                <div class="guide-section">
                    <h4>Giving Your Script a Name</h4>
                    <p>You can optionally add a description at the very beginning of your script, in quotes:</p>
                    <pre>"My happy dance"
look left
look right
antenna both up</pre>
                    <p class="guide-note">This is just for you to remember what the script does—it doesn't change how the robot behaves.</p>
                </div>

                <div class="guide-section guide-warning">
                    <h4>Watch Out!</h4>
                    <p>A few common mistakes to avoid:</p>

                    <p><strong>Don't forget the <code>s</code> after durations:</strong></p>
                    <pre>wait 2s      ✓
wait 2       ✗ (won't work!)</pre>

                    <p><strong>Always indent after <code>repeat</code>:</strong></p>
                    <pre>repeat 3
    look left    ✓ (indented)

repeat 3
look left        ✗ (not indented—error!)</pre>

                    <p><strong>You can't combine <code>wait</code> with movements using <code>and</code>:</strong></p>
                    <pre>look left and wait 1s    ✗ (doesn't work)

look left                ✓ (use separate lines)
wait 1s</pre>
                </div>

                <div class="guide-section">
                    <h4>Quick Reference</h4>
                    <table class="guide-table">
                        <tr><th>Command</th><th>What it does</th><th>Example</th></tr>
                        <tr><td><code>look</code></td><td>Rotate head to look somewhere</td><td><code>look left 45</code></td></tr>
                        <tr><td><code>turn</code></td><td>Rotate whole body</td><td><code>turn right</code></td></tr>
                        <tr><td><code>tilt</code></td><td>Tilt head sideways</td><td><code>tilt left</code></td></tr>
                        <tr><td><code>head</code></td><td>Move head in space</td><td><code>head forward 10</code></td></tr>
                        <tr><td><code>antenna</code></td><td>Move antennas</td><td><code>antenna both up</code></td></tr>
                        <tr><td><code>wait</code></td><td>Pause</td><td><code>wait 1.5s</code></td></tr>
                        <tr><td><code>repeat</code></td><td>Repeat a sequence</td><td><code>repeat 3</code></td></tr>
                        <tr><td><code>#</code></td><td>Comment (ignored)</td><td><code># This is a note</code></td></tr>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <script type="module" src="/static/app.js"></script>
</body>
</html>