xref: /aosp_15_r20/tools/netsim/ui/dist/js/device-info.js (revision cf78ab8cffb8fc9207af348f23af247fb04370a6)

import{__decorate as e}from"../node_modules/tslib/tslib.es6.js";import{html as i,css as t,LitElement as s}from"https://cdn.jsdelivr.net/gh/lit/dist@2/core/lit-core.min.js";import{property as o,customElement as a}from"https://cdn.skypack.dev/pin/[email protected]/mode=imports/optimized/lit/decorators.js";import{styleMap as d,live as l}from"https://cdn.jsdelivr.net/gh/lit/dist@2/all/lit-all.min.js";import{simulationState as n}from"./device-observer.js";var c,r;!function(e){e.UNSPECIFIED="UNSPECIFIED",e.BLUETOOTH="BLUETOOTH",e.WIFI="WIFI",e.UWB="UWB",e.BLUETOOTH_BEACON="BLUETOOTH_BEACON",e.UNRECOGNIZED="UNRECOGNIZED"}(r||(r={})),i`
  <input type="checkbox" disabled />
  <span
    class="slider round"
    style=${d({opacity:"0.7"})}
  ></span>
`;let v=c=class extends s{constructor(){super(...arguments),this.yaw=0,this.pitch=0,this.roll=0,this.editMode=!1,this.posX=0,this.posY=0,this.posZ=0,this.holdRange=!1,this.getRadioCheckbox=(e,t)=>i`<label class="switch">
      <input
        id=${t}
        type="checkbox"
        .checked=${l(e.state)}
        @click=${()=>{var i;null===(i=this.selectedDevice)||void 0===i||i.toggleChipState(e),this.patchRadio()}}
      />
      <span class="slider round"></span>
    </label> `}connectedCallback(){super.connectedCallback(),n.registerObserver(this)}disconnectedCallback(){n.removeObserver(this),super.disconnectedCallback()}onNotify(e){if(e.selectedId&&!1===this.editMode)for(const i of e.devices)if(i.name===e.selectedId){this.selectedDevice=i,this.holdRange||(this.yaw=i.orientation.yaw,this.pitch=i.orientation.pitch,this.roll=i.orientation.roll),this.posX=Math.floor(100*i.position.x),this.posY=Math.floor(100*i.position.y),this.posZ=Math.floor(100*i.position.z);break}}changeRange(e){var i;this.holdRange=!0,console.assert(null!==this.selectedDevice);const t=e.target,s=new CustomEvent("orientationEvent",{detail:{name:null===(i=this.selectedDevice)||void 0===i?void 0:i.name,type:t.id,value:t.value}});window.dispatchEvent(s),"yaw"===t.id?this.yaw=Number(t.value):"pitch"===t.id?this.pitch=Number(t.value):this.roll=Number(t.value)}patchOrientation(){this.holdRange=!1,console.assert(void 0!==this.selectedDevice),void 0!==this.selectedDevice&&(this.selectedDevice.orientation={yaw:this.yaw,pitch:this.pitch,roll:this.roll},n.patchDevice({device:{name:this.selectedDevice.name,orientation:this.selectedDevice.orientation}}))}patchRadio(){console.assert(void 0!==this.selectedDevice),void 0!==this.selectedDevice&&n.patchDevice({device:{name:this.selectedDevice.name,chips:this.selectedDevice.chips}})}handleEditForm(){this.editMode?(n.invokeGetDevice(),this.editMode=!1):this.editMode=!0}static checkPositionBound(e){return e>10?10:e<0?0:e}static checkOrientationBound(e){return e>90?90:e<-90?-90:e}handleSave(){if(console.assert(void 0!==this.selectedDevice),void 0===this.selectedDevice)return;const e=this.renderRoot.querySelectorAll('[id^="edit"]'),i={name:this.selectedDevice.name,position:this.selectedDevice.position,orientation:this.selectedDevice.orientation};e.forEach((e=>{const t=e;"editName"===t.id?i.name=t.value:t.id.startsWith("editPos")?Number.isNaN(Number(t.value))||(i.position[t.id.slice(7).toLowerCase()]=c.checkPositionBound(Number(t.value)/100)):t.id.startsWith("editOri")&&(Number.isNaN(Number(t.value))||(i.orientation[t.id.slice(7).toLowerCase()]=c.checkOrientationBound(Number(t.value))))})),this.selectedDevice.name=i.name,this.selectedDevice.position=i.position,this.selectedDevice.orientation=i.orientation,this.handleEditForm(),n.patchDevice({device:i})}handleGetBleBeacon(e){return i`${e.settings?i`<div class="setting">
        <div class="name">Settings</div>

        ${e.settings.advertiseMode?i`<div class="label">Advertise Mode:</div>
              <div class="info">
                ${null===(t=e.settings.advertiseMode)||void 0===t?void 0:t.replace("-"," ")}
              </div>`:i`<div class="label">Advertise Interval:</div>
              <div class="info">
                ${null===(s=e.settings.milliseconds)||void 0===s?void 0:s.toString().concat(" ms")}
              </div>`}
        ${e.settings.txPowerLevel?i`<div class="label">Transmit Power Level:</div>
              <div class="info">
                ${null===(o=e.settings.txPowerLevel)||void 0===o?void 0:o.replace("-"," ")}
              </div>`:i`<div class="label">Transmit Power:</div>
              <div class="info">
                ${null===(a=e.settings.dbm)||void 0===a?void 0:a.toString().concat(" dBm")}
              </div>`}

        <div class="label">Scannable:</div>
        <div class="info">${e.settings.scannable}</div>

        <div class="label">Timeout:</div>
        <div class="info">
          ${null===(d=e.settings.timeout)||void 0===d?void 0:d.toString().concat(" ms")}
        </div>
      </div>`:i``} ${e.advData?i`<div class="setting">
        <div class="name">Advertise Data</div>

        <div class="label">Include Device Name:</div>
        <div class="info">${e.advData.includeDeviceName}</div>

        <div class="label">Include Transmit Power:</div>
        <div class="info">${e.advData.includeTxPowerLevel}</div>

        ${e.advData.manufacturerData.length?i` <div class="label">Manufacturer Data Length:</div>
              <div class="info">
                ${e.advData.manufacturerData.length}
              </div>`:i``}
        ${e.advData.services.length?i` <div class="label">Number of Supported Services:</div>
              <div class="info">${e.advData.services.length}</div>`:i``}
      </div>`:i``}`;var t,s,o,a,d}getBluetoothRadioCheckboxes(e){let i,t;return"lowEnergy"in e&&e.lowEnergy&&(i=this.getRadioCheckbox(e.lowEnergy,"lowEnergy")),"classic"in e&&e.classic&&(t=this.getRadioCheckbox(e.classic,"classic")),[i,t]}handleGetChip(e,t){if(e.bleBeacon){let s={};return e.bleBeacon.bt&&([s["Bluetooth LE"],s["Bluetooth Classic"]]=this.getBluetoothRadioCheckboxes(e.bleBeacon.bt)),i`<div class="title">
          Chip ${t+1}: ${e.kind.replace("_"," ")}
        </div>
        <div class="setting">
          <div class="name">Name</div>
          <div class="info">${e.name}</div>
        </div>
        <div class="setting">
          ${Object.entries(s).length?i`<div class="name">Radios</div>`:i``}
          ${Object.entries(s).map((([e,t])=>i`<div class="label">${e}</div>
              <div class="info">${t}</div>`))}
        </div>
        ${this.handleGetBleBeacon(e.bleBeacon)}`}return""}handleGetChips(){if(!this.selectedDevice||!this.selectedDevice.chips)return i``;if(this.selectedDevice.chips.some((e=>(e=>e.kind===r.BLUETOOTH_BEACON&&e.bleBeacon)(e))))return i`${this.selectedDevice.chips.map(((e,i)=>this.handleGetChip(e,i)))}`;let e={};for(const i of this.selectedDevice.chips)i&&(i.bt&&([e["Bluetooth LE"],e["Bluetooth Classic"]]=this.getBluetoothRadioCheckboxes(i.bt)),i.wifi&&(e.WIFI=this.getRadioCheckbox(i.wifi,"wifi")),i.uwb&&(e.UWB=this.getRadioCheckbox(i.uwb,"uwb")));return Object.keys(e).length?i`<div class="setting">
        <div class="name">Radios</div>
        ${Object.entries(e).map((([e,t])=>i`<div class="label">${e}</div>
            <div class="info">${t}</div>`))}
      </div>`:i``}render(){return i`${this.selectedDevice?i`
          <div class="title">Device Info</div>
          <div class="setting">
            <div class="name">Name</div>
            <div class="info">${this.selectedDevice.name}</div>
          </div>
          <div class="setting">
            <div class="name">Position</div>
            <div class="label">X</div>
            <div
              class="info"
              style=${d({color:"red"})}
            >
              ${this.editMode?i`<input
                    type="text"
                    id="editPosX"
                    .value=${this.posX.toString()}
                  />`:i`${this.posX}`}
            </div>
            <div class="label">Y</div>
            <div
              class="info"
              style=${d({color:"green"})}
            >
              ${this.editMode?i`<input
                    type="text"
                    id="editPosY"
                    .value=${this.posY.toString()}
                  />`:i`${this.posY}`}
            </div>
            <div class="label">Z</div>
            <div
              class="info"
              style=${d({color:"blue"})}
            >
              ${this.editMode?i`<input
                    type="text"
                    id="editPosZ"
                    .value=${this.posZ.toString()}
                  />`:i`${this.posZ}`}
            </div>
          </div>
          <div class="setting">
            <div class="name">Orientation</div>
            <div class="label">Yaw</div>
            <div class="info">
              <input
                id="yaw"
                type="range"
                min="-90"
                max="90"
                .value=${this.yaw.toString()}
                .disabled=${this.editMode}
                @input=${this.changeRange}
                @change=${this.patchOrientation}
              />
              ${this.editMode?i`<input
                    type="text"
                    id="editOriYaw"
                    class="orientation"
                    .value=${this.yaw.toString()}
                  />`:i`<div class="text">(${this.yaw})</div>`}
            </div>
            <div class="label">Pitch</div>
            <div class="info">
              <input
                id="pitch"
                type="range"
                min="-90"
                max="90"
                .value=${this.pitch.toString()}
                .disabled=${this.editMode}
                @input=${this.changeRange}
                @change=${this.patchOrientation}
              />
              ${this.editMode?i`<input
                    type="text"
                    id="editOriPitch"
                    class="orientation"
                    .value=${this.pitch.toString()}
                  />`:i`<div class="text">(${this.pitch})</div>`}
            </div>
            <div class="label">Roll</div>
            <div class="info">
              <input
                id="roll"
                type="range"
                min="-90"
                max="90"
                .value=${this.roll.toString()}
                .disabled=${this.editMode}
                @input=${this.changeRange}
                @change=${this.patchOrientation}
              />
              ${this.editMode?i`<input
                    type="text"
                    id="editOriRoll"
                    class="orientation"
                    .value=${this.roll.toString()}
                  />`:i`<div class="text">(${this.roll})</div>`}
            </div>
          </div>
          <div class="setting">
            ${this.editMode?i`
                  <input type="button" value="Save" @click=${this.handleSave} />
                  <input
                    type="button"
                    value="Cancel"
                    @click=${this.handleEditForm}
                  />
                `:i`<input
                  type="button"
                  value="Edit"
                  @click=${this.handleEditForm}
                />`}
          </div>

          ${this.handleGetChips()}
        `:i`<div class="title">Device Info</div>`}`}};v.styles=t`
    :host {
      cursor: pointer;
      display: grid;
      place-content: center;
      color: white;
      font-size: 25px;
      font-family: 'Lato', sans-serif;
      border: 5px solid black;
      border-radius: 12px;
      padding: 10px;
      background-color: #9199a5;
      max-width: 600px;
    }

    .title {
      font-weight: bold;
      text-transform: uppercase;
      text-align: center;
      margin-bottom: 10px;
    }

    .setting {
      display: grid;
      grid-template-columns: auto auto;
      margin-top: 0px;
      margin-bottom: 30px;
      //border: 3px solid black;
      padding: 10px;
    }

    .setting .name {
      grid-column: 1 / span 2;
      text-transform: uppercase;
      text-align: left;
      margin-bottom: 10px;
      font-weight: bold;
    }

    .label {
      grid-column: 1;
      text-align: left;
    }

    .info {
      grid-column: 2;
      text-align: right;
      margin-bottom: 10px;
    }

    .switch {
      position: relative;
      float: right;
      width: 60px;
      height: 34px;
    }

    .switch input {
      opacity: 0;
      width: 0;
      height: 0;
    }

    .slider {
      position: absolute;
      cursor: pointer;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: #ccc;
      -webkit-transition: 0.4s;
      transition: 0.4s;
    }

    .slider:before {
      position: absolute;
      content: '';
      height: 26px;
      width: 26px;
      left: 4px;
      bottom: 4px;
      background-color: white;
      -webkit-transition: 0.4s;
      transition: 0.4s;
    }

    input:checked + .slider {
      background-color: #2196f3;
    }

    input:focus + .slider {
      box-shadow: 0 0 1px #2196f3;
    }

    input:checked + .slider:before {
      -webkit-transform: translateX(26px);
      -ms-transform: translateX(26px);
      transform: translateX(26px);
    }

    /* Rounded sliders */
    .slider.round {
      border-radius: 34px;
    }

    .slider.round:before {
      border-radius: 50%;
    }

    .text {
      display: inline-block;
      position: relative;
      width: 50px;
    }

    input[type='range'] {
      width: 400px;
    }

    input[type='text'] {
      width: 50%;
      font-size: inherit;
      text-align: right;
      max-height: 25px;
    }

    input[type='text'].orientation {
      max-width: 50px;
    }

    input[type='button'] {
      display: inline;
      font-size: inherit;
      max-width: 200px;
    }
  `,e([o()],v.prototype,"selectedDevice",void 0),e([o({type:Number})],v.prototype,"yaw",void 0),e([o({type:Number})],v.prototype,"pitch",void 0),e([o({type:Number})],v.prototype,"roll",void 0),e([o({type:Boolean})],v.prototype,"editMode",void 0),e([o({type:Number})],v.prototype,"posX",void 0),e([o({type:Number})],v.prototype,"posY",void 0),e([o({type:Number})],v.prototype,"posZ",void 0),v=c=e([a("ns-device-info")],v);export{v as DeviceInformation};