1import {LitElement, html, css} from 'https://cdn.jsdelivr.net/gh/lit/dist@2/core/lit-core.min.js'; 2import {setupSimpleApp} from '../bumble.js'; 3 4 class ScanList extends LitElement { 5 static properties = { 6 listItems: {state: true}, 7 }; 8 9 static styles = css` 10 table, th, td { 11 padding: 2px; 12 white-space: pre; 13 border: 1px solid black; 14 border-collapse: collapse; 15 } 16 `; 17 18 constructor() { 19 super(); 20 this.listItems = []; 21 } 22 23 render() { 24 if (this.listItems.length === 0) { 25 return ''; 26 } 27 return html` 28 <table> 29 <thead> 30 <tr> 31 ${Object.keys(this.listItems[0]).map(i => html`<th>${i}</th>`)} 32 </tr> 33 </thead> 34 <tbody> 35 ${this.listItems.map(i => html` 36 <tr> 37 ${Object.keys(i).map(key => html`<td>${i[key]}</td>`)} 38 </tr> 39 `)} 40 </tbody> 41 </table> 42 `; 43 } 44} 45customElements.define('scan-list', ScanList); 46 47const logOutput = document.querySelector('#log-output'); 48function logToOutput(message) { 49 console.log(message); 50 logOutput.value += message + '\n'; 51} 52 53function onUpdate(scanResults) { 54 const items = scanResults.toJs({create_proxies : false}).map(entry => ( 55 { address: entry.address, address_type: entry.address_type, rssi: entry.rssi, data: entry.data } 56 )); 57 scanResults.destroy(); 58 scanList.listItems = items; 59} 60 61// Setup the UI 62const scanList = document.querySelector('#scan-list'); 63const bumbleControls = document.querySelector('#bumble-controls'); 64 65// Setup the app 66const app = await setupSimpleApp('scanner.py', bumbleControls, logToOutput); 67app.on('update', onUpdate); 68logToOutput('Click the Bluetooth button to start'); 69