Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Reachy Mini Motion Coding Lab</title> | |
| <link rel="stylesheet" href="/static/style.css"> | |
| <script type="importmap"> | |
| { | |
| "imports": { | |
| "@codemirror/state": "https://esm.sh/@codemirror/[email protected]", | |
| "@codemirror/view": "https://esm.sh/@codemirror/[email protected]?external=@codemirror/state", | |
| "@codemirror/language": "https://esm.sh/@codemirror/[email protected]?external=@codemirror/state,@codemirror/view,@lezer/common,@lezer/highlight", | |
| "@codemirror/commands": "https://esm.sh/@codemirror/[email protected]?external=@codemirror/state,@codemirror/view,@codemirror/language", | |
| "@codemirror/autocomplete": "https://esm.sh/@codemirror/[email protected]?external=@codemirror/state,@codemirror/view,@codemirror/language,@codemirror/commands,@lezer/common", | |
| "@codemirror/search": "https://esm.sh/@codemirror/[email protected]?external=@codemirror/state,@codemirror/view", | |
| "@codemirror/lint": "https://esm.sh/@codemirror/[email protected]?external=@codemirror/state,@codemirror/view", | |
| "@lezer/highlight": "https://esm.sh/@lezer/[email protected]?external=@lezer/common", | |
| "@lezer/common": "https://esm.sh/@lezer/[email protected]", | |
| "codemirror": "https://esm.sh/[email protected]?external=@codemirror/state,@codemirror/view,@codemirror/language,@codemirror/commands,@codemirror/autocomplete,@codemirror/search,@codemirror/lint", | |
| "crelt": "https://esm.sh/[email protected]", | |
| "style-mod": "https://esm.sh/[email protected]", | |
| "w3c-keyname": "https://esm.sh/[email protected]" | |
| } | |
| } | |
| </script> | |
| </head> | |
| <body> | |
| <!-- Page Header --> | |
| <header class="page-header"> | |
| <img src="/static/reachy-hacker.png" alt="Reachy Mini" class="header-icon"> | |
| <h1>Reachy Mini Motion 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="showLoadDialog()">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()">? Help</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> | |
| <!-- Load Script Modal --> | |
| <div id="loadModal" class="modal" style="display: none;"> | |
| <div class="modal-content"> | |
| <div class="modal-header"> | |
| <h3>Load Saved Script</h3> | |
| <button class="modal-close" onclick="hideLoadDialog()">×</button> | |
| </div> | |
| <div class="modal-body"> | |
| <div id="savedScriptsList"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Cheat Sheet Modal --> | |
| <div id="cheatSheetModal" class="modal" style="display: none;"> | |
| <div class="modal-content cheat-sheet-modal"> | |
| <div class="modal-header"> | |
| <h3>RMScript Commands</h3> | |
| <button class="modal-close" onclick="hideCheatSheet()">×</button> | |
| </div> | |
| <div class="modal-body cheat-sheet-body"> | |
| <div class="cheat-section"> | |
| <h4>Head Rotations</h4> | |
| <code>look left</code> <code>look right</code> <code>look up</code> <code>look down</code> <code>look center</code> | |
| <p class="cheat-note">Add angle: <code>look left 45</code> or use words: <code>look left maximum</code></p> | |
| </div> | |
| <div class="cheat-section"> | |
| <h4>Body Rotation</h4> | |
| <code>turn left</code> <code>turn right</code> <code>turn center</code> | |
| </div> | |
| <div class="cheat-section"> | |
| <h4>Head movement</h4> | |
| <code>head left</code> <code>head right</code> <code>head up</code> <code>head forward</code> | |
| <p class="cheat-note">Add distance in mm: <code>head up 20</code> or use words: <code>head backward maximum</code></p> | |
| </div> | |
| <div class="cheat-section"> | |
| <h4>Antennas</h4> | |
| <code>antenna both up</code> <code>antenna left down</code> <code>antenna right up</code> | |
| <p class="cheat-note">Directions: up, down, left, right</p> | |
| </div> | |
| <div class="cheat-section"> | |
| <h4>Timing</h4> | |
| <code>wait 1s</code> <code>wait 0.5s</code> | |
| <p class="cheat-note">Duration after commands: <code>look left fast</code> <code>look left slow</code></p> | |
| </div> | |
| <div class="cheat-section"> | |
| <h4>Repeat</h4> | |
| <pre>repeat 3 | |
| look left | |
| wait 0.5s | |
| look right</pre> | |
| <p class="cheat-note">Indent commands inside repeat blocks</p> | |
| </div> | |
| <div class="cheat-section"> | |
| <h4>Combine with "and"</h4> | |
| <code>look left and antenna both up</code> | |
| <p class="cheat-note">Movements happen simultaneously</p> | |
| </div> | |
| <div class="cheat-section"> | |
| <h4>Strength Words</h4> | |
| <code>tiny</code> <code>small</code> <code>medium</code> <code>large</code> <code>maximum</code> | |
| </div> | |
| <div class="cheat-section"> | |
| <h4>Speed Words</h4> | |
| <code>superfast</code> <code>fast</code> <code>slow</code> <code>superslow</code> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script type="module" src="/static/app.js"></script> | |
| </body> | |
| </html> | |