312 lines
12 KiB
JavaScript
312 lines
12 KiB
JavaScript
|
import{__decorate as i}from"../node_modules/tslib/tslib.es6.js";import{css as e,LitElement as t,html 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/lit@v2.5.0-jYRq0AKQogjUdUh7SCAE/mode=imports/optimized/lit/decorators.js";import{styleMap as l,live as d}from"https://cdn.jsdelivr.net/gh/lit/dist@2/all/lit-all.min.js";import{simulationState as n}from"./device-observer.js";import{State as c}from"./model.js";var r;let h=r=class extends t{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}connectedCallback(){super.connectedCallback(),n.registerObserver(this)}disconnectedCallback(){n.removeObserver(this),super.disconnectedCallback()}onNotify(i){if(i.selectedId&&!1===this.editMode)for(const e of i.devices)if(e.name===i.selectedId){this.selectedDevice=e,this.holdRange||(this.yaw=e.orientation.yaw,this.pitch=e.orientation.pitch,this.roll=e.orientation.roll),this.posX=Math.floor(100*e.position.x),this.posY=Math.floor(100*e.position.y),this.posZ=Math.floor(100*e.position.z);break}}changeRange(i){var e;this.holdRange=!0,console.assert(null!==this.selectedDevice);const t=i.target,s=new CustomEvent("orientationEvent",{detail:{name:null===(e=this.selectedDevice)||void 0===e?void 0:e.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(i){return i>10?10:i<0?0:i}static checkOrientationBound(i){return i>90?90:i<-90?-90:i}handleSave(){if(console.assert(void 0!==this.selectedDevice),void 0===this.selectedDevice)return;const i=this.renderRoot.querySelectorAll('[id^="edit"]'),e={name:this.selectedDevice.name,position:this.selectedDevice.position,orientation:this.selectedDevice.orientation};i.forEach((i=>{const t=i;"editName"===t.id?e.name=t.value:t.id.startsWith("editPos")?Number.isNaN(Number(t.value))||(e.position[t.id.slice(7).toLowerCase()]=r.checkPositionBound(Number(t.value)/100)):t.id.startsWith("editOri")&&(Number.isNaN(Number(t.value))||(e.orientation[t.id.slice(7).toLowerCase()]=r.checkOrientationBound(Number(t.value))))})),this.selectedDevice.name=e.name,this.selectedDevice.position=e.position,this.selectedDevice.orientation=e.orientation,this.handleEditForm(),n.patchDevice({device:e})}handleGetChips(){const i=s`
|
||
|
|
<input type="checkbox" disabled />
|
||
|
|
<span
|
||
|
|
class="slider round"
|
||
|
|
style=${l({opacity:"0.7"})}
|
||
|
|
></span>
|
||
|
|
`;let e=i,t=i,o=i,a=i;if(this.selectedDevice&&"chips"in this.selectedDevice&&this.selectedDevice.chips)for(const i of this.selectedDevice.chips)"bt"in i&&i.bt&&("lowEnergy"in i.bt&&i.bt.lowEnergy&&"state"in i.bt.lowEnergy&&(e=s`
|
||
|
|
<input
|
||
|
|
id="lowEnergy"
|
||
|
|
type="checkbox"
|
||
|
|
.checked=${d(i.bt.lowEnergy.state===c.ON)}
|
||
|
|
@click=${()=>{var e;null===(e=this.selectedDevice)||void 0===e||e.toggleChipState(i,"lowEnergy"),this.patchRadio()}}
|
||
|
|
/>
|
||
|
|
<span class="slider round"></span>
|
||
|
|
`),"classic"in i.bt&&i.bt.classic&&"state"in i.bt.classic&&(t=s`
|
||
|
|
<input
|
||
|
|
id="classic"
|
||
|
|
type="checkbox"
|
||
|
|
.checked=${d(i.bt.classic.state===c.ON)}
|
||
|
|
@click=${()=>{var e;null===(e=this.selectedDevice)||void 0===e||e.toggleChipState(i,"classic"),this.patchRadio()}}
|
||
|
|
/>
|
||
|
|
<span class="slider round"></span>
|
||
|
|
`)),"wifi"in i&&i.wifi&&(o=s`
|
||
|
|
<input
|
||
|
|
id="wifi"
|
||
|
|
type="checkbox"
|
||
|
|
.checked=${d(i.wifi.state===c.ON)}
|
||
|
|
@click=${()=>{var e;null===(e=this.selectedDevice)||void 0===e||e.toggleChipState(i),this.patchRadio()}}
|
||
|
|
/>
|
||
|
|
<span class="slider round"></span>
|
||
|
|
`),"uwb"in i&&i.uwb&&(a=s`
|
||
|
|
<input
|
||
|
|
id="uwb"
|
||
|
|
type="checkbox"
|
||
|
|
.checked=${d(i.uwb.state===c.ON)}
|
||
|
|
@click=${()=>{var e;null===(e=this.selectedDevice)||void 0===e||e.toggleChipState(i),this.patchRadio()}}
|
||
|
|
/>
|
||
|
|
<span class="slider round"></span>
|
||
|
|
`);return s`
|
||
|
|
<div class="label">BLE</div>
|
||
|
|
<div class="info">
|
||
|
|
<label class="switch">
|
||
|
|
${e}
|
||
|
|
</label>
|
||
|
|
</div>
|
||
|
|
<div class="label">Classic</div>
|
||
|
|
<div class="info">
|
||
|
|
<label class="switch">
|
||
|
|
${t}
|
||
|
|
</label>
|
||
|
|
</div>
|
||
|
|
<div class="label">WIFI</div>
|
||
|
|
<div class="info">
|
||
|
|
<label class="switch">
|
||
|
|
${o}
|
||
|
|
</label>
|
||
|
|
</div>
|
||
|
|
<div class="label">UWB</div>
|
||
|
|
<div class="info">
|
||
|
|
<label class="switch">
|
||
|
|
${a}
|
||
|
|
</label>
|
||
|
|
</div>
|
||
|
|
`}render(){return s`${this.selectedDevice?s`
|
||
|
|
<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=${l({color:"red"})}>
|
||
|
|
${this.editMode?s`<input
|
||
|
|
type="text"
|
||
|
|
id="editPosX"
|
||
|
|
.value=${this.posX.toString()}
|
||
|
|
/>`:s`${this.posX}`}
|
||
|
|
</div>
|
||
|
|
<div class="label">Y</div>
|
||
|
|
<div class="info" style=${l({color:"green"})}>
|
||
|
|
${this.editMode?s`<input
|
||
|
|
type="text"
|
||
|
|
id="editPosY"
|
||
|
|
.value=${this.posY.toString()}
|
||
|
|
/>`:s`${this.posY}`}
|
||
|
|
</div>
|
||
|
|
<div class="label">Z</div>
|
||
|
|
<div class="info" style=${l({color:"blue"})}>
|
||
|
|
${this.editMode?s`<input
|
||
|
|
type="text"
|
||
|
|
id="editPosZ"
|
||
|
|
.value=${this.posZ.toString()}
|
||
|
|
/>`:s`${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?s`<input
|
||
|
|
type="text"
|
||
|
|
id="editOriYaw"
|
||
|
|
class="orientation"
|
||
|
|
.value=${this.yaw.toString()}
|
||
|
|
/>`:s`<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?s`<input
|
||
|
|
type="text"
|
||
|
|
id="editOriPitch"
|
||
|
|
class="orientation"
|
||
|
|
.value=${this.pitch.toString()}
|
||
|
|
/>`:s`<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?s`<input
|
||
|
|
type="text"
|
||
|
|
id="editOriRoll"
|
||
|
|
class="orientation"
|
||
|
|
.value=${this.roll.toString()}
|
||
|
|
/>`:s`<div class="text">(${this.roll})</div>`}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="setting">
|
||
|
|
${this.editMode?s`
|
||
|
|
<input type="button" value="Save" @click=${this.handleSave} />
|
||
|
|
<input
|
||
|
|
type="button"
|
||
|
|
value="Cancel"
|
||
|
|
@click=${this.handleEditForm}
|
||
|
|
/>
|
||
|
|
`:s`<input
|
||
|
|
type="button"
|
||
|
|
value="Edit"
|
||
|
|
@click=${this.handleEditForm}
|
||
|
|
/>`}
|
||
|
|
</div>
|
||
|
|
<div class="setting">
|
||
|
|
<div class="name">Radio States</div>
|
||
|
|
${this.handleGetChips()}
|
||
|
|
</div>
|
||
|
|
`:s`<div class="title">Device Info</div>`}`}};h.styles=e`
|
||
|
|
: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;
|
||
|
|
}
|
||
|
|
`,i([o()],h.prototype,"selectedDevice",void 0),i([o({type:Number})],h.prototype,"yaw",void 0),i([o({type:Number})],h.prototype,"pitch",void 0),i([o({type:Number})],h.prototype,"roll",void 0),i([o({type:Boolean})],h.prototype,"editMode",void 0),i([o({type:Number})],h.prototype,"posX",void 0),i([o({type:Number})],h.prototype,"posY",void 0),i([o({type:Number})],h.prototype,"posZ",void 0),h=r=i([a("ns-device-info")],h);export{h as DeviceInformation};
|