<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> {% extends "../templates/base.html" %} {% block content %} <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <nav class="navbar navbar-expand-sm"> <div class="container-fluid"> <a class="navbar-brand" href="/"><img src="/static/image/logo.png" alt=""></a> <div class="collapse navbar-collapse" id="navbarNavDropdown"> <ul class="navbar-nav mr-auto"> <a class="navbar-brand" href="/">ARAV Web Controller</a> </ul> <ul class="navbar-nav"> <button onClick="setTimeout(() => window.location.reload());" type="button" class="btn btn-warning">Exit</button> </ul> </div> </div> </nav> <div id="wrapper"> </div> <div class="container" align="center"> <div class="row" align="center"> <div class="col-sm-2"> <div class="d-none d-lg-block" id="remote-videos-2"></div> <div class="d-none d-lg-block" id="remote-videos-3"></div> <div class="d-none d-lg-block" id="remote-videos-4"></div> <div class="d-none d-lg-block" id="remote-videos-5"></div> <hr class="d-none d-lg-block"> <div class="row"> <div class="col"> <p style="display:inline;">[Video]</p> </div> </div> <div class="row"> <div class="col"> <button id="start-video" type="button" class="btn btn-sm btn-primary m-1">Play</button> <button id="replace-video-1" onClick="deleteCanvas()" type="button" class="btn btn-sm btn-primary my-1">1</button> <button id="replace-video-2" onClick="deleteCanvas()" type="button" class="btn btn-sm btn-primary my-1">2</button> <button id="replace-video-3" onClick="deleteCanvas()" type="button" class="btn btn-sm btn-primary my-1">3</button> <button id="replace-video-4" onClick="deleteCanvas()" type="button" class="btn btn-sm btn-primary my-1">4</button> <button id="replace-video-5" onClick="deleteCanvas()" type="button" class="btn btn-sm btn-primary my-1">5</button> <button id="on-canvas" onClick="createCanvas()" type="button" class="btn btn-sm btn-primary my-1"></button> </div> </div> </div> <div class="col-sm-8"　id="main-disp"> <div class="d-none d-lg-block" id="map_canvas"></div> <div id="remote-videos-1"></div> </div> <div class="col-sm-2"> <div class="row"> <div class="col"> <p style="display:inline;">[Interface]</p> </div> </div> <div class="row"> <div class="col"> <div class="btn-group display:inline;" data-toggle="buttons"> <label class="btn btn-sm btn-outline-primary"> <input type="radio" name="toggle0" autocomplete="off" value="touch"> Touch </label> <label class="btn btn-sm btn-outline-primary active"> <input type="radio" name="toggle0" autocomplete="off" value="usb" checked=""> USB </label> </div> </div> </div> <div class="row"> <div class="col"> <div class="d-none d-lg-block btn-group display:inline;" data-toggle="buttons"> <label class="btn btn-sm btn-outline-primary"> <input type="radio" name="toggle2" autocomplete="off" value="tate_senkai"> TS </label> <label class="btn btn-sm btn-outline-primary active"> <input type="radio" name="toggle2" autocomplete="off" value="yoko_senkai" checked=""> YS </label> </div> </div> </div> <div class="row" id="btn-moving-mode"> <div class="col" > <div class="btn-group display:inline;" data-toggle="buttons"> <label class="btn btn-sm btn-outline-primary active"> <input type="radio" name="toggle1" autocomplete="off" value="upper" checked=""> Upper </label> <label class="btn btn-sm btn-outline-primary"> <input type="radio" name="toggle1" autocomplete="off" value="lower"> Lower </label> </div> </div> </div> <div class="row"> <div class="col"> <button id="option-button-1" type="button" class="btn btn-sm btn-primary m-1">OptionA</button> </div> </div> <div class="row"> <div class="col"> <button id="option-button-2" type="button" class="btn btn-sm btn-primary m-1">OptionB</button> </div> </div> <div class="row"> <div class="col"> <button id="option-button-3" type="button" class="btn btn-sm btn-primary m-1">OptionC</button> </div> </div> <div class="row"> <div class="col"> <button id="option-button-4" type="button" class="btn btn-sm btn-primary m-1">OptionD</button> </div> </div> <hr class="d-none d-lg-block"> <div class="row"> <div class="col"> <p style="display:inline;">[Actuator]</p> </div> </div> <div class="row"> <div class="col"> <button id="calibration" type="button" class="btn btn-sm btn-primary m-1">Calibration</button> </div> </div> <hr> <div class="row"> <div class="col-sm-3"> </div> <div class="col ml-7"> <p style="display:inline;" align="center">[Ratio]</p> </div> <div class="col-sm-2"> <p style="display:inline;" align="center">reverse</p> </div> </div> <div class="row"> <div class="col-sm-3"> <p style="display:inline;">Arm: </p> </div> <div class="col-sm-7"> <input type="range" class="custom-range-1" value="70" min="0" max="100" id="power-ratio-1" style="display:inline;" list="tickmarks-01"> <datalist id="tickmarks-01"> <option value="0"> <option value="25"> <option value="50"> <option value="75"> <option value="100"> </datalist> </div> <div class="col-sm-2"> <input type="checkbox" id="checkbox-1" name="check-1" value="-1"> </div> </div> <div class="row"> <div class="col-sm-3"> <p style="display:inline;">Rotate: </p> </div> <div class="col-sm-7"> <input type="range" class="custom-range-2" value="70" min="0" max="100" id="power-ratio-2" style="display:inline;" list="tickmarks-02"> <datalist id="tickmarks-02"> <option value="0"> <option value="25"> <option value="50"> <option value="75"> <option value="100"> </datalist> </div> <div class="col-sm-2"> <input type="checkbox" id="checkbox-2" name="check-2" value="-1"> </div> </div> <div class="row"> <div class="col-sm-3"> <p style="display:inline;">LCrower: </p> </div> <div class="col-sm-7"> <input type="range" class="custom-range-3" value="70" min="0" max="100" id="power-ratio-3" style="display:inline;" list="tickmarks-03"> <datalist id="tickmarks-03"> <option value="0"> <option value="25"> <option value="50"> <option value="75"> <option value="100"> </datalist> </div> <div class="col-sm-2"> <input type="checkbox" id="checkbox-3" name="check-3" value="-1"> </div> </div> <div class="row"> <div class="col-sm-3"> <p style="display:inline;">RCrower: </p> </div> <div class="col-sm-7"> <input type="range" class="custom-range-4" value="70" min="0" max="100" id="power-ratio-4" style="display:inline;" list="tickmarks-04"> <datalist id="tickmarks-04"> <option value="0"> <option value="25"> <option value="50"> <option value="75"> <option value="100"> </datalist> </div> <div class="col-sm-2"> <input type="checkbox" id="checkbox-4" name="check-4" value="-1"> </div> </div> <div class="row"> <div class="col-sm-3"> <p style="display:inline;">Boom: </p> </div> <div class="col-sm-7"> <input type="range" class="custom-range-5" value="70" min="0" max="100" id="power-ratio-5" style="display:inline;" list="tickmarks-05"> <datalist id="tickmarks-05"> <option value="0"> <option value="25"> <option value="50"> <option value="75"> <option value="100"> </datalist> </div> <div class="col-sm-2"> <input type="checkbox" id="checkbox-5" name="check-5" value="-1"> </div> </div> <div class="row"> <div class="col-sm-3"> <p style="display:inline;">Backet: </p> </div> <div class="col-sm-7"> <input type="range" class="custom-range-6" value="70" min="0" max="100" id="power-ratio-6" style="display:inline;" list="tickmarks-06"> <datalist id="tickmarks-06"> <option value="0"> <option value="25"> <option value="50"> <option value="75"> <option value="100"> </datalist> </div> <div class="col-sm-2"> <input type="checkbox" id="checkbox-6" name="check-6" value="-1"> </div> </div> <div class="row"> <div class="col"> <button id="create-power-setting" type="button" class="btn btn-sm btn-primary m-1">Save</button> <input type="file" id="read-power-setting-file"> </div> </div> <hr> <div class="row"> <div class="col"> <p style="display:inline;">[Status]</p> </div> </div> <div class="row"> <div class="col"> <p style="display:inline;">Socket: </p> <p style="display:inline;" id="websocket-status"></p> </div> </div> <div class="row"> <div class="col"> <p style="display:inline;">Delay 0: </p> <p style="display:inline;" id="delay-sec-0"></p> </div> </div> <div class="row"> <div class="col"> <p style="display:inline;">Delay 1: </p> <p style="display:inline;" id="delay-sec-1"></p> </div> </div> <div class="row"> <div class="col"> <p style="display:inline;">Delay 2: </p> <p style="display:inline;" id="delay-sec-2"></p> </div> </div> <div class="row"> <div class="col"> <p style="display:inline;">Delay 3: </p> <p style="display:inline;" id="delay-sec-3"></p> </div> </div> <div class="row"> <div class="col"> <p style="display:inline;">Delay 4: </p> <p style="display:inline;" id="delay-sec-4"></p> </div> </div> <div class="row"> <div class="col"> <p style="display:inline;">Delay 5: </p> <p style="display:inline;" id="delay-sec-5"></p> </div> </div> </div> </div> <div class="row align-items-center align-bottom"> <div class="col-sm-3" > </div> <div class="col-sm-6"> <div class="video-footer"> <p>© 2021 ARAV Inc.</p> </div> </div> <div class="col-sm-3"> </div> </div> <div class="video-sidebar-left align-bottom" align="center"> <div id="joystick-container-left"></div> </div> <div class="video-sidebar-right align-bottom" align="center"> <div id="joystick-container-right"></div> </div> </div> <!-- END Container --> <script type="module"> var sc1 = document.createElement('script'); sc1.src = '/static/main.js?v=' + versioningNum; document.body.appendChild(sc1); </script> {% end %}

.container { max-width: 1380px; } #joystick_container_left { padding-top: 55px; height: 100px; left: 10%; width: 1px; text-align: center; color: #3A3F44; } #joystick_container_right { padding-top: 55px; height: 100px; left: 10%; width: 1px; text-align: center; color: #3A3F44; } #footer_container { text-align: center; border-color: #bce8f1; } .noselect { -webkit-touch-callout: none; /* iOS Safari */ -webkit-user-select: none; /* Safari */ -khtml-user-select: none; /* Konqueror HTML */ -moz-user-select: none; /* Firefox */ -ms-user-select: none; /* Internet Explorer/Edge */ user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */ } .top-ui { position: absolute; top: 20%; left: 3%; width: 97%; } .video-sidebar-left { position: absolute; top: 75%; left: 0%; width: 30%; height: 0%; } .video-sidebar-right { position: absolute; top: 75%; left: 70%; width: 30%; height: 0%; } .video-footer { position: absolute; left: 0%; width: 100%; height: 0%; font-size: 70%; text-align: center; } #map_canvas { border: 5px solid #060606; width: 100%; height: 15%; }