1<?-- 2 Copyright (C) 2019 The Android Open Source Project 3 4 Licensed under the Apache License, Version 2.0 (the "License"); 5 you may not use this file except in compliance with the License. 6 You may obtain a copy of the License at 7 8 http://www.apache.org/licenses/LICENSE-2.0 9 10 Unless required by applicable law or agreed to in writing, software 11 distributed under the License is distributed on an "AS IS" BASIS, 12 WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 See the License for the specific language governing permissions and 14 limitations under the License. 15 --> 16 17<html> 18 <head> 19 <link rel="stylesheet" type="text/css" href="style.css" > 20 <link rel="stylesheet" type="text/css" href="controls.css" > 21 <link rel="stylesheet" type="text/css" href="custom.css" > 22 <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons+Outlined"> 23 <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> 24 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> 25 </head> 26 <body> 27 <div id="loader"></div> 28 <div id="error-message-div"> 29 <h3 id="error-message" class="hidden"> 30 <span class="material-icons close-btn">close</span> 31 </h3> 32 </div> 33 <section id="device-connection"> 34 <audio id="device-audio"></audio> 35 <div id='controls-and-displays'> 36 <div id='control-panel-default-buttons' class='control-panel-column'> 37 <button id='power_btn' title='Power' disabled='true' class='material-icons'>power_settings_new</button> 38 <button id='bluetooth-modal-button' title='Bluetooth console' class='material-icons'> 39 settings_bluetooth 40 </button> 41 <button id='back_btn' title='Back' disabled='true' class='material-icons'>arrow_back</button> 42 <button id='home_btn' title='Home' disabled='true' class='material-icons'>home</button> 43 <button id='menu_btn' title='Menu' disabled='true' class='material-icons'>menu</button> 44 <button id='touchpad-modal-button' title='Touchpads' class='material-icons'>touch_app</button> 45 <button id='rotate_left_btn' title='Rotate left' disabled='true' class='material-icons' data-adb="true">rotate_90_degrees_ccw</button> 46 <button id='rotate_right_btn' title='Rotate right' disabled='true' class='material-icons' data-adb="true">rotate_90_degrees_cw</button> 47 <button id='volume_up_btn' title='Volume up' disabled='true' class='material-icons'>volume_up</button> 48 <button id='volume_down_btn' title='Volume down' disabled='true' class='material-icons'>volume_down</button> 49 <button id='volume_off_btn' title='Volume off' class='material-icons'>volume_off</button> 50 <button id='camera_off_btn' title='Capture camera' class='material-icons'>videocam_off</button> 51 <button id='record_video_btn' title='Record screen' class='material-icons'>movie_creation</button> 52 <button id='mic_btn' title='Microphone' disabled='true' class='material-icons'>mic</button> 53 <button id='location-modal-button' title='location console' class='material-icons'>location_on</button> 54 <button id='device-details-button' title='Device Details' class='material-icons'>info</button> 55 <button id='rotation-modal-button' title='Rotation sensors' class='material-icons'>more_vert</button> 56 </div> 57 <div id='control-panel-custom-buttons' class='control-panel-column'></div> 58 <div id="device-display-column"> 59 <!-- tabindex="-1" allows this element to capture keyboard events --> 60 <div id='device-displays' tabindex="-1"> 61 </div> 62 </div> 63 </div> 64 </section> 65 <div id='device-details-modal' class='modal'> 66 <div id='device-details-modal-header' class='modal-header'> 67 <h2>Device Details</h2> 68 <button id='device-details-close' title='Close' class='material-icons modal-close'>close</button> 69 </div> 70 <hr> 71 <h3>Hardware Configuration</h3> 72 <span id='device-details-hardware'>unknown</span> 73 </div> 74 <div id='bluetooth-modal' class='modal-wrapper'> 75 <div id='bluetooth-prompt' class='modal'> 76 <div id='bluetooth-prompt-header' class='modal-header'> 77 <h2>Bluetooth</h2> 78 <button id='bluetooth-prompt-close' title='Close' class='material-icons modal-close'>close</button> 79 </div> 80 <div> 81 <div id='bluetooth-prompt-text' class='bluetooth-text'> 82 We have enabled a BT Wizard to simplify adding a<br>bluetooth device.<br> 83 Alternatively, you can enter the BT Console if you<br>want to exercise full control.</div><br> 84 <div class='bluetooth-button'> 85 <button id='bluetooth-prompt-wizard' title='Start Wizard' class='modal-button-highlight'>Start Wizard</button> 86 <button id='bluetooth-prompt-list' title='Device List' class='modal-button'>Device List</button> 87 <button id='bluetooth-prompt-console' title='BT Console' class='modal-button'>BT Console</button> 88 </div> 89 </div> 90 </div> 91 <div id='bluetooth-wizard' class='modal'> 92 <div id='bluetooth-wizard-modal-header' class='modal-header'> 93 <h2>BT Wizard</h2> 94 <button id='bluetooth-wizard-close' title='Close' class='material-icons modal-close'>close</button> 95 </div> 96 <div> 97 <div class='bluetooth-text-field'><input type="text" id='bluetooth-wizard-name' placeholder="Device Name"></input></div> 98 <div class='bluetooth-drop-down'> 99 <select id='bluetooth-wizard-type' validate-mac="true" required> 100 <option value="beacon">Beacon</option> 101 <option value="beacon_swarm">Beacon Swarm</option> 102 <!-- Disabled because they were "started but never finished" (according to mylesgw@) 103 <option value="car_kit">Car Kit</option> 104 <option value="classic">Classic</option> --> 105 <option value="keyboard">Keyboard</option> 106 <option value="remote_loopback">Remote Loopback</option> 107 <option value="scripted_beacon">Scripted Beacon</option> 108 <!-- Disabled because it will never show up in the UI 109 <option value="sniffer">Sniffer</option> --> 110 </select> 111 </div> 112 <div class='bluetooth-text-field'><input type="text" id='bluetooth-wizard-mac' placeholder="Device MAC" validate-mac="true" required></input><span></span></div> 113 <div class='bluetooth-button'> 114 <button id='bluetooth-wizard-device' title='Add Device' class='modal-button-highlight' disabled>Add Device</button> 115 <button id='bluetooth-wizard-cancel' title='Cancel' class='modal-button'>Cancel</button> 116 </div> 117 </div> 118 </div> 119 <div id='bluetooth-wizard-confirm' class='modal'> 120 <div id='bluetooth-wizard-confirm-header' class='modal-header'> 121 <h2>BT Wizard</h2> 122 <button id='bluetooth-wizard-confirm-close' title='Close' class='material-icons modal-close'>close</button> 123 </div> 124 <div id='bluetooth-wizard-text' class='bluetooth-text'>Device added. See device details below.</div><br> 125 <div class='bluetooth-text'> 126 <p>Name: <b>GKeyboard</b></p> 127 <p>Type: <b>Keyboard</b></p> 128 <p>MAC Addr: <b>be:ac:01:55:00:03</b></p> 129 </div> 130 <div class='bluetooth-button'><button id='bluetooth-wizard-another' title='Add Another' class='modal-button-highlight'>Add Another</button></div> 131 </div> 132 <div id='bluetooth-list' class='modal'> 133 <div id='bluetooth-list-header' class='modal-header'> 134 <h2>Device List</h2> 135 <button id='bluetooth-list-close' title='Close' class='material-icons modal-close'>close</button> 136 </div> 137 <div class='bluetooth-text'> 138 <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> 139 <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> 140 </div> 141 </div> 142 <div id='bluetooth-console' class='modal'> 143 <div id='bluetooth-console-modal-header' class='modal-header'> 144 <h2>BT Console</h2> 145 <button id='bluetooth-console-close' title='Close' class='material-icons modal-close'>close</button> 146 </div> 147 <div> 148 <div colspan='2'><textarea id='bluetooth-console-view' readonly rows='10' cols='60'></textarea></div> 149 <div width='1'><p id='bluetooth-console-cmd-label'>Command:</p></div> 150 <div width='100'><input id='bluetooth-console-input' type='text'></input></div> 151 </div> 152 </div> 153 </div> 154 <div id='location-modal' class='modal-wrapper'> 155 156 <!-- location-prompt-modal modal --> 157 <div id='location-prompt-modal' class='modal'> 158 <div id='location-prompt-modal-header' class='modal-header'> 159 <h2>Location</h2> 160 <button id='location-prompt-modal-close' title='Close' class='material-icons modal-close'>close</button> 161 </div> 162 <div> 163 <div id='location-prompt-text' class='location-text'> 164 <div class='location-button'> 165 <button id='location-set-wizard' title='Set location' class='modal-button-highlight'>Set Location</button> 166 <button id='locations-import-wizard' title='Import locations' class='modal-button'>Import Locations</button> 167 </div> 168 </div> 169 </div> 170 </div> 171 </div> 172 <!-- location-set modal --> 173 <div id='location-set-modal' class='modal'> 174 <div id='location-set-modal-header' class='modal-header'> 175 <h2>Set Location</h2> 176 <button id='location-set-modal-close' title='Close' class='material-icons modal-close'>close</button> 177 </div> 178 <div> 179 <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> 180 <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> 181 <div class='location-text-field'><input type=number step=0.01 value=0.0 id='location-set-altitude' placeholder="Elevation"required></input> 182 </div> 183 <div class='location-button'> 184 <button id='location-set-confirm' title='Confirm Location' class='modal-button-highlight'>Update Location</button> 185 <button id='location-set-cancel' title='Cancel' class='modal-button'>Cancel</button> 186 </div> 187 </div> 188 </div> 189 <!-- locations-import modal --> 190 <div id='locations-import-modal' class='modal'> 191 <div id='locations-import-modal-header' class='modal-header'> 192 <h2>Import Locations</h2> 193 <button id='locations-import-modal-close' title='Close' class='material-icons modal-close'>close</button> 194 </div> 195 196 <div class='location-text'> 197 <input type='file' id='locations_select_file' accept=".gpx, .kml"> 198 <button id='locations-send-btn' title='Send Locations' class='modal-button-highlight'>Send Locations</button> 199 200 </div> 201 202 </div> 203 <div id='rotation-modal' class='modal'> 204 <div id='rotation-modal-header' class='modal-header'> 205 <h2>Rotation sensors</h2> 206 <button id='rotation-modal-close' title='Close' class='material-icons modal-close'>close</button> 207 </div> 208 <hr> 209 <h3>Rotate the device</h3> 210 <span id='rotation-bar'> 211 <div class='roation-slider'> 212 X 213 <input class='rotation-slider-range' type='range' value='0' min='-180' max='180' step='0.1'> 214 <span class='rotation-slider-value'>0</span> 215 </div> 216 <br> 217 <div class='rotation-slider'> 218 Y 219 <input class='rotation-slider-range' type='range' value='0' min='-180' max='180' step='0.1'> 220 <span class='rotation-slider-value'>0</span> 221 </div> 222 <br> 223 <div class='rotation-slider'> 224 Z 225 <input class='rotation-slider-range' type='range' value='0' min='-180' max='180' step='0.1'> 226 <span class='rotation-slider-value'>0</span> 227 </div> 228 <br> 229 </span> 230 <div class='fixed-orientation'> 231 <button id='left-position-button' title='left' class='material-icons'>crop_landscape</button> 232 <button id='upright-position-button' title='upright' class='material-icons'>crop_portrait</button> 233 <button id='right-position-button' title='right' class='material-icons'>crop_landscape</button> 234 <button id='upside-position-button' title='upside down' class='material-icons'>crop_portrait</button> 235 </div> 236 <div class='sensors'> 237 <div id='accelerometer'> 238 Accelerometer: 239 <span id='accelerometer-value'>0.00 9.81 0.00</span> 240 </div> 241 <div id='magnetometer'>Magnetometer: 242 <span id='magnetometer-value'>0 5.9 -48.4</span> 243 </div> 244 <div id='gyroscope'>Gyroscope: 245 <span id='gyroscope-value'>0.00 0.00 0.00</span> 246 </div> 247 </div> 248 </div> 249 <div id='touchpad-modal' class='modal'> 250 <div id='touchpad-modal-header' class='modal-header'> 251 <button id='touchpad-modal-close' title='Close' class='material-icons modal-close'>close</button> 252 </div> 253 <span id='touchpad-list'> 254 <div class='selectors'></div> 255 <div class='touchpads'></div> 256 </span> 257 </div> 258 <script src="js/adb.js"></script> 259 <script src="js/location.js"></script> 260 <script src="js/rootcanal.js"></script> 261 <script src="js/cf_webrtc.js" type="module"></script> 262 <script src="js/controls.js"></script> 263 <script src="js/touch.js"></script> 264 <script src="js/app.js"></script> 265 <template id="display-template"> 266 <div class="device-display"> 267 <div class="device-display-info"></div> 268 <div class="device-video-container"> 269 <video autoplay muted class="device-display-video"></video> 270 </div> 271 </div> 272 </template> 273 </body> 274</html> 275