| <?-- |
| Copyright (C) 2019 The Android Open Source Project |
| |
| Licensed under the Apache License, Version 2.0 (the "License"); |
| you may not use this file except in compliance with the License. |
| You may obtain a copy of the License at |
| |
| http://www.apache.org/licenses/LICENSE-2.0 |
| |
| Unless required by applicable law or agreed to in writing, software |
| distributed under the License is distributed on an "AS IS" BASIS, |
| WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
| See the License for the specific language governing permissions and |
| limitations under the License. |
| --> |
| |
| <html> |
| <head> |
| <link rel="stylesheet" type="text/css" href="style.css" > |
| <link rel="stylesheet" type="text/css" href="controls.css" > |
| <link rel="stylesheet" type="text/css" href="custom.css" > |
| <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons+Outlined"> |
| <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> |
| <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> |
| </head> |
| |
| <body> |
| <div id="loader"></div> |
| <div id="error-message-div"> |
| <h3 id="error-message" class="hidden"> |
| <span class="material-icons close-btn">close</span> |
| </h3> |
| </div> |
| <section id="device-connection"> |
| <audio id="device-audio"></audio> |
| <div id='controls-and-displays'> |
| <div id='control-panel-default-buttons' class='control-panel-column'> |
| <button id='power_btn' title='Power' disabled='true' class='material-icons'>power_settings_new</button> |
| <button id='bluetooth-modal-button' title='Bluetooth console' class='material-icons'> |
| settings_bluetooth |
| </button> |
| <button id='back_btn' title='Back' disabled='true' class='material-icons'>arrow_back</button> |
| <button id='home_btn' title='Home' disabled='true' class='material-icons'>home</button> |
| <button id='menu_btn' title='Menu' disabled='true' class='material-icons'>menu</button> |
| <button id='rotate_left_btn' title='Rotate left' disabled='true' class='material-icons' data-adb="true">rotate_90_degrees_ccw</button> |
| <button id='rotate_right_btn' title='Rotate right' disabled='true' class='material-icons' data-adb="true">rotate_90_degrees_cw</button> |
| <button id='volume_up_btn' title='Volume up' disabled='true' class='material-icons'>volume_up</button> |
| <button id='volume_down_btn' title='Volume down' disabled='true' class='material-icons'>volume_down</button> |
| <button id='volume_off_btn' title='Volume off' class='material-icons'>volume_off</button> |
| <button id='camera_off_btn' title='Capture camera' class='material-icons'>videocam_off</button> |
| <button id='record_video_btn' title='Record screen' class='material-icons'>movie_creation</button> |
| <button id='mic_btn' title='Microphone' disabled='true' class='material-icons'>mic</button> |
| <button id='location-modal-button' title='location console' class='material-icons'>location_on</button> |
| <button id='device-details-button' title='Device Details' class='material-icons'>info</button> |
| <button id='rotation-modal-button' title='Rotation sensors' class='material-icons'>more_vert</button> |
| </div> |
| <div id='control-panel-custom-buttons' class='control-panel-column'></div> |
| <!-- tabindex="-1" allows this element to capture keyboard events --> |
| <div id='device-displays' tabindex="-1"> |
| </div> |
| </div> |
| </section> |
| <div id='device-details-modal' class='modal'> |
| <div id='device-details-modal-header' class='modal-header'> |
| <h2>Device Details</h2> |
| <button id='device-details-close' title='Close' class='material-icons modal-close'>close</button> |
| </div> |
| <hr> |
| <h3>Hardware Configuration</h3> |
| <span id='device-details-hardware'>unknown</span> |
| </div> |
| |
| <div id='bluetooth-modal' class='modal-wrapper'> |
| <div id='bluetooth-prompt' class='modal'> |
| <div id='bluetooth-prompt-header' class='modal-header'> |
| <h2>Bluetooth</h2> |
| <button id='bluetooth-prompt-close' title='Close' class='material-icons modal-close'>close</button> |
| </div> |
| <div> |
| <div id='bluetooth-prompt-text' class='bluetooth-text'> |
| We have enabled a BT Wizard to simplify adding a<br>bluetooth device.<br> |
| Alternatively, you can enter the BT Console if you<br>want to exercise full control.</div><br> |
| <div class='bluetooth-button'> |
| <button id='bluetooth-prompt-wizard' title='Start Wizard' class='modal-button-highlight'>Start Wizard</button> |
| <button id='bluetooth-prompt-list' title='Device List' class='modal-button'>Device List</button> |
| <button id='bluetooth-prompt-console' title='BT Console' class='modal-button'>BT Console</button> |
| </div> |
| </div> |
| </div> |
| <div id='bluetooth-wizard' class='modal'> |
| <div id='bluetooth-wizard-modal-header' class='modal-header'> |
| <h2>BT Wizard</h2> |
| <button id='bluetooth-wizard-close' title='Close' class='material-icons modal-close'>close</button> |
| </div> |
| <div> |
| <div class='bluetooth-text-field'><input type="text" id='bluetooth-wizard-name' placeholder="Device Name"></input></div> |
| <div class='bluetooth-drop-down'> |
| <select id='bluetooth-wizard-type' validate-mac="true" required> |
| <option value="beacon">Beacon</option> |
| <option value="beacon_swarm">Beacon Swarm</option> |
| <!-- Disabled because they were "started but never finished" (according to mylesgw@) |
| <option value="car_kit">Car Kit</option> |
| <option value="classic">Classic</option> --> |
| <option value="keyboard">Keyboard</option> |
| <option value="remote_loopback">Remote Loopback</option> |
| <option value="scripted_beacon">Scripted Beacon</option> |
| <!-- Disabled because it will never show up in the UI |
| <option value="sniffer">Sniffer</option> --> |
| </select> |
| </div> |
| <div class='bluetooth-text-field'><input type="text" id='bluetooth-wizard-mac' placeholder="Device MAC" validate-mac="true" required></input><span></span></div> |
| <div class='bluetooth-button'> |
| <button id='bluetooth-wizard-device' title='Add Device' class='modal-button-highlight' disabled>Add Device</button> |
| <button id='bluetooth-wizard-cancel' title='Cancel' class='modal-button'>Cancel</button> |
| </div> |
| </div> |
| </div> |
| <div id='bluetooth-wizard-confirm' class='modal'> |
| <div id='bluetooth-wizard-confirm-header' class='modal-header'> |
| <h2>BT Wizard</h2> |
| <button id='bluetooth-wizard-confirm-close' title='Close' class='material-icons modal-close'>close</button> |
| </div> |
| <div id='bluetooth-wizard-text' class='bluetooth-text'>Device added. See device details below.</div><br> |
| <div class='bluetooth-text'> |
| <p>Name: <b>GKeyboard</b></p> |
| <p>Type: <b>Keyboard</b></p> |
| <p>MAC Addr: <b>be:ac:01:55:00:03</b></p> |
| </div> |
| <div class='bluetooth-button'><button id='bluetooth-wizard-another' title='Add Another' class='modal-button-highlight'>Add Another</button></div> |
| </div> |
| <div id='bluetooth-list' class='modal'> |
| <div id='bluetooth-list-header' class='modal-header'> |
| <h2>Device List</h2> |
| <button id='bluetooth-list-close' title='Close' class='material-icons modal-close'>close</button> |
| </div> |
| <div class='bluetooth-text'> |
| <div><button title="Delete" data-device-id="delete" class="bluetooth-list-trash material-icons">delete</button>GKeyboard | Keyboard | be:ac:01:55:00:03</div> |
| <div><button title="Delete" data-device-id="delete" class="bluetooth-list-trash material-icons">delete</button>GHeadphones | Audio | dc:fa:32:00:55:02</div> |
| </div> |
| </div> |
| <div id='bluetooth-console' class='modal'> |
| <div id='bluetooth-console-modal-header' class='modal-header'> |
| <h2>BT Console</h2> |
| <button id='bluetooth-console-close' title='Close' class='material-icons modal-close'>close</button> |
| </div> |
| <div> |
| <div colspan='2'><textarea id='bluetooth-console-view' readonly rows='10' cols='60'></textarea></div> |
| <div width='1'><p id='bluetooth-console-cmd-label'>Command:</p></div> |
| <div width='100'><input id='bluetooth-console-input' type='text'></input></div> |
| </div> |
| </div> |
| </div> |
| |
| <div id='location-modal' class='modal-wrapper'> |
| |
| <!-- location-prompt-modal modal --> |
| <div id='location-prompt-modal' class='modal'> |
| <div id='location-prompt-modal-header' class='modal-header'> |
| <h2>Location</h2> |
| <button id='location-prompt-modal-close' title='Close' class='material-icons modal-close'>close</button> |
| </div> |
| <div> |
| <div id='location-prompt-text' class='location-text'> |
| <div class='location-button'> |
| <button id='location-set-wizard' title='Set location' class='modal-button-highlight'>Set Location</button> |
| <button id='locations-import-wizard' title='Import locations' class='modal-button'>Import Locations</button> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| <!-- location-set modal --> |
| <div id='location-set-modal' class='modal'> |
| <div id='location-set-modal-header' class='modal-header'> |
| <h2>Set Location</h2> |
| <button id='location-set-modal-close' title='Close' class='material-icons modal-close'>close</button> |
| </div> |
| <div> |
| <div class='location-text-field'><input type=number step=0.01 min="-180" max="180" value=-122.083 id='location-set-longitude' placeholder="Longitude" required></input></div> |
| <div class='location-text-field'><input type=number step=0.01 min="-90" max="90" value=37.415 id='location-set-latitude' placeholder="Latitude" required></input></div> |
| <div class='location-text-field'><input type=number step=0.01 value=0.0 id='location-set-altitude' placeholder="Elevation"required></input> |
| </div> |
| <div class='location-button'> |
| <button id='location-set-confirm' title='Confirm Location' class='modal-button-highlight'>Update Location</button> |
| <button id='location-set-cancel' title='Cancel' class='modal-button'>Cancel</button> |
| </div> |
| </div> |
| </div> |
| |
| <!-- locations-import modal --> |
| <div id='locations-import-modal' class='modal'> |
| <div id='locations-import-modal-header' class='modal-header'> |
| <h2>Import Locations</h2> |
| <button id='locations-import-modal-close' title='Close' class='material-icons modal-close'>close</button> |
| </div> |
| |
| <div class='location-text'> |
| <input type='file' id='locations_select_file' accept=".gpx, .kml"> |
| <button id='locations-send-btn' title='Send Locations' class='modal-button-highlight'>Send Locations</button> |
| |
| </div> |
| |
| </div> |
| <div id='rotation-modal' class='modal'> |
| <div id='rotation-modal-header' class='modal-header'> |
| <h2>Rotation sensors</h2> |
| <button id='rotation-modal-close' title='Close' class='material-icons modal-close'>close</button> |
| </div> |
| <hr> |
| <h3>Rotate the device</h3> |
| <span id='rotation-bar'> |
| <div class='roation-slider'> |
| X |
| <input class='rotation-slider-range' type='range' value='0' min='-180' max='180' step='0.1'> |
| <span class='rotation-slider-value'>0</span> |
| </div> |
| <br> |
| <div class='rotation-slider'> |
| Y |
| <input class='rotation-slider-range' type='range' value='0' min='-180' max='180' step='0.1'> |
| <span class='rotation-slider-value'>0</span> |
| </div> |
| <br> |
| <div class='rotation-slider'> |
| Z |
| <input class='rotation-slider-range' type='range' value='0' min='-180' max='180' step='0.1'> |
| <span class='rotation-slider-value'>0</span> |
| </div> |
| <br> |
| </span> |
| <div class='fixed-orientation'> |
| <button id='left-position-button' title='left' class='material-icons'>crop_landscape</button> |
| <button id='upright-position-button' title='upright' class='material-icons'>crop_portrait</button> |
| <button id='right-position-button' title='right' class='material-icons'>crop_landscape</button> |
| <button id='upside-position-button' title='upside down' class='material-icons'>crop_portrait</button> |
| </div> |
| <div class='sensors'> |
| <div id='accelerometer'> |
| Accelerometer: |
| <span id='accelerometer-value'>0.00 9.81 0.00</span> |
| </div> |
| <div id='magnetometer'>Magnetometer: |
| <span id='magnetometer-value'>0 5.9 -48.4</span> |
| </div> |
| <div id='gyroscope'>Gyroscope: |
| <span id='gyroscope-value'>0.00 0.00 0.00</span> |
| </div> |
| </div> |
| </div> |
| <script src="js/adb.js"></script> |
| <script src="js/location.js"></script> |
| <script src="js/rootcanal.js"></script> |
| <script src="js/cf_webrtc.js" type="module"></script> |
| <script src="js/controls.js"></script> |
| <script src="js/touch.js"></script> |
| <script src="js/app.js"></script> |
| <template id="display-template"> |
| <div class="device-display"> |
| <div class="device-display-info"></div> |
| <div class="device-video-container"> |
| <video autoplay muted class="device-display-video"></video> |
| </div> |
| </div> |
| </template> |
| </body> |
| </html> |
