221 lines
12 KiB
HTML
221 lines
12 KiB
HTML
|
<?--
|
||
|
|
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" 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='device-details-button' title='Device Details' class='material-icons'>
|
||
|
|
settings
|
||
|
|
</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>
|
||
|
|
</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>
|
||
|
|
|
||
|
|
<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/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>
|