1/* 2 * Copyright (C) 2022 Huawei Device Co., Ltd. 3 * Licensed under the Apache License, Version 2.0 (the "License"); 4 * you may not use this file except in compliance with the License. 5 * You may obtain a copy of the License at 6 * 7 * http://www.apache.org/licenses/LICENSE-2.0 8 * 9 * Unless required by applicable law or agreed to in writing, software 10 * distributed under the License is distributed on an "AS IS" BASIS, 11 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 12 * See the License for the specific language governing permissions and 13 * limitations under the License. 14 */ 15 16import { BaseElement, element } from '../../../base-ui/BaseElement'; 17import '../../../base-ui/select/LitSelectV'; 18import '../../../base-ui/select/LitSelect'; 19 20import '../../../base-ui/switch/lit-switch'; 21import LitSwitch, { LitSwitchChangeEvent } from '../../../base-ui/switch/lit-switch'; 22import { LitSelectV } from '../../../base-ui/select/LitSelectV'; 23import { LitAllocationSelect } from '../../../base-ui/select/LitAllocationSelect'; 24import { SpSdkConfigHtml } from './SpSdkConfig.html'; 25 26@element('sp-sdk-config') 27export class SpSdkConfig extends BaseElement { 28 private worker: Worker | undefined; 29 private sdkConfigList: any; 30 private customConfig: HTMLDivElement | undefined | null; 31 private selectConfig: LitAllocationSelect | undefined | null; 32 private list: Array<HTMLElement> | undefined; 33 private pluginName: string = ''; 34 private sampleInterval: number = 5000; 35 36 static get observedAttributes(): string[] { 37 return ['configName', 'value', 'type']; 38 } 39 40 get show(): boolean { 41 return this.hasAttribute('show'); 42 } 43 44 set show(sdkConfigShow: boolean) { 45 if (sdkConfigShow) { 46 this.setAttribute('show', ''); 47 } else { 48 this.removeAttribute('show'); 49 } 50 } 51 52 set startSamp(sdkConfigStart: boolean) { 53 if (sdkConfigStart) { 54 this.setAttribute('startSamp', ''); 55 } else { 56 this.removeAttribute('startSamp'); 57 } 58 } 59 60 get startSamp(): boolean { 61 return this.hasAttribute('startSamp'); 62 } 63 64 set configName(configName: string) { 65 if (configName !== '') { 66 this.setAttribute('configName', configName); 67 } else { 68 this.removeAttribute('configName'); 69 } 70 } 71 72 get configName(): string { 73 return this.getAttribute('configName') || ''; 74 } 75 76 get type(): string { 77 return this.getAttribute('type') || ''; 78 } 79 80 set type(type: string) { 81 if (type !== '') { 82 this.setAttribute('type', type); 83 } else { 84 this.removeAttribute('type'); 85 } 86 } 87 88 private wasmMap: Map<string, any> = new Map<string, any>(); 89 private wasmList: Array<string> = []; 90 91 private changGpu(gpuName: string): void { 92 let config = this.wasmMap.get(gpuName); 93 this.pluginName = config?.pluginName; 94 this.sampleInterval = config?.sampleInterval; 95 let pam = { 96 action: 'open', 97 componentId: config.componentId, 98 wasmJsName: config.wasmJsName, 99 WasmName: config.wasmName, 100 }; 101 this.worker!.postMessage(pam); 102 this.worker!.onmessage = (event: MessageEvent): void => { 103 let results = event.data.results; 104 this.sdkConfigList = results.settingConfig; 105 this.initConfig(); 106 }; 107 } 108 109 getPlugName(): string { 110 return this.pluginName; 111 } 112 113 getSampleInterval(): number { 114 return this.sampleInterval; 115 } 116 117 getGpuConfig(): {} { 118 let configVal = this.shadowRoot?.querySelectorAll<HTMLElement>('.config'); 119 let gpuConfig = {}; 120 for (let i = 0; i < configVal!.length; i++) { 121 let configName = configVal![i].getAttribute('configName'); 122 let type = configVal![i].getAttribute('type'); 123 if (type == 'enum') { 124 let enumValue = configVal![i].getAttribute('value'); 125 if (enumValue != undefined && enumValue != 'undefined') { 126 // @ts-ignore 127 gpuConfig[configName!] = enumValue; 128 } 129 } else if (type == 'number' || type == 'integer' || type == 'num') { 130 // @ts-ignore 131 gpuConfig[configName!] = Number(configVal![i].value); 132 } else if (type == 'boolean') { 133 let attribute = configVal![i].getAttribute('value'); 134 // @ts-ignore 135 gpuConfig[configName!] = attribute == 'true'; 136 } else { 137 // @ts-ignore 138 gpuConfig[configName!] = configVal![i].value; 139 } 140 } 141 return gpuConfig; 142 } 143 144 private initSdkWasm(): void { 145 try { 146 let spApplication = document.querySelector<HTMLElement>('sp-application'); 147 let wasmJsonUrl = `https://${window.location.host.split(':')[0]}:${window.location.port}/application/wasm.json`; 148 if (spApplication!.hasAttribute('vs')) { 149 wasmJsonUrl = `http://${window.location.host.split(':')[0]}:${window.location.port}/wasm.json`; 150 } 151 fetch(wasmJsonUrl) 152 .then((res) => { 153 if (res.ok) { 154 res.text().then((text) => { 155 this.wasmMap = new Map(); 156 this.wasmList = []; 157 let wasmJson = JSON.parse(text); 158 let wasmFiles = wasmJson.WasmFiles; 159 wasmFiles.forEach((wasmFile: any) => { 160 this.wasmMap.set(wasmFile.disPlayName, wasmFile); 161 this.wasmList.push(wasmFile.disPlayName); 162 }); 163 }); 164 } 165 }) 166 ['catch'](() => {}); 167 if (this.worker === null) { 168 // @ts-ignore 169 if (window.useWb) { 170 return; 171 } 172 this.worker = new Worker(new URL('../../database/ConfigWorker', import.meta.url)); 173 } 174 } catch (e) {} 175 } 176 177 initElements(): void { 178 this.initSdkWasm(); 179 this.customConfig = this.shadowRoot?.querySelector<HTMLDivElement>('.configList'); 180 let switchButton = this.shadowRoot?.querySelector('.config_switch') as LitSwitch; 181 switchButton.addEventListener('change', (event: CustomEventInit<LitSwitchChangeEvent>) => { 182 let detail = event.detail; 183 if (detail!.checked) { 184 this.startSamp = true; 185 this.isAbleShowConfig(false); 186 } else { 187 this.startSamp = false; 188 this.isAbleShowConfig(true); 189 } 190 }); 191 this.selectConfig = this.shadowRoot?.querySelector<LitAllocationSelect>('lit-allocation-select'); 192 let inputDiv = this.selectConfig?.shadowRoot?.querySelector('.multipleSelect') as HTMLDivElement; 193 let input = this.selectConfig?.shadowRoot?.querySelector<HTMLInputElement>('#singleInput'); 194 if (input) { 195 inputDiv.addEventListener('inputClick', () => { 196 this.selectConfig!.processData = this.wasmList; 197 this.selectConfig!.initData(); 198 }); 199 inputDiv.addEventListener('valuable', () => { 200 this.changGpu(input!.value); 201 }); 202 } 203 this.list = []; 204 this.list.push(this.selectConfig!); 205 this.isAbleShowConfig(true); 206 } 207 208 209 private sdkConfigByBooleanType(key: string, sdkConfigSwitch: LitSwitch, sdkConfigHeadDiv: HTMLDivElement): void { 210 sdkConfigSwitch.className = 'switch1 config'; 211 sdkConfigSwitch.setAttribute('configName', key); 212 sdkConfigSwitch.setAttribute('type', this.sdkConfigList.configuration[key].type); 213 if (this.sdkConfigList.configuration[key]['default'] == 'true') { 214 sdkConfigSwitch.setAttribute('checked', ''); 215 sdkConfigSwitch.setAttribute('value', 'true'); 216 } else { 217 sdkConfigSwitch.removeAttribute('checked'); 218 sdkConfigSwitch.setAttribute('value', 'false'); 219 } 220 sdkConfigHeadDiv.appendChild(sdkConfigSwitch); 221 this.list!.push(sdkConfigSwitch); 222 } 223 224 private sdkConfigByIntegerType(key: string, sdkConfigDiv: HTMLDivElement, sdkConfigTitle: HTMLSpanElement): void { 225 let input = document.createElement('input'); 226 input.className = 'sdk-config-input config'; 227 if (this.sdkConfigList.configuration[key]['default']) { 228 input.value = this.sdkConfigList.configuration[key]['default']; 229 } 230 input.setAttribute('configName', key); 231 input.setAttribute('type', this.sdkConfigList.configuration[key].type); 232 input.oninput = (): void => { 233 input.value = this.checkIntegerInput(input.value); 234 sdkConfigTitle.setAttribute('value', input.value); 235 }; 236 sdkConfigDiv.appendChild(input); 237 this.list!.push(input); 238 } 239 240 private sdkConfigByNumberType(key: string, sdkConfigDiv: HTMLDivElement): void { 241 let numberInput = document.createElement('input'); 242 numberInput.className = 'sdk-config-input config'; 243 if (this.sdkConfigList.configuration[key]['default']) { 244 numberInput.value = this.sdkConfigList.configuration[key]['default']; 245 } 246 numberInput.setAttribute('configName', key); 247 numberInput.setAttribute('type', 'num'); 248 numberInput.oninput = (): void => { 249 numberInput.value = this.checkFloatInput(numberInput.value); 250 }; 251 sdkConfigDiv.appendChild(numberInput); 252 this.list!.push(numberInput); 253 } 254 255 private sdkConfigByStringType(key: string, sdkConfigDiv: HTMLDivElement): void { 256 let html = ''; 257 if (this.sdkConfigList.configuration[key]['enum']) { 258 let placeholder = ''; 259 if (this.sdkConfigList.configuration[key]['default']) { 260 placeholder = this.sdkConfigList.configuration[key]['default']; 261 } 262 html += `<lit-select-v id="${key}" type="${this.sdkConfigList.configuration[key].type}" 263default-value="" rounded="" class="sdk-config-select config" mode="multiple" canInsert="" 264rounded placement = "bottom" configName ="${key}" placeholder="${placeholder}"></lit-select-v>`; 265 sdkConfigDiv.innerHTML = sdkConfigDiv.innerHTML + html; 266 } else { 267 let inputElement = document.createElement('input'); 268 inputElement.className = 'sdk-config-input config'; 269 if (this.sdkConfigList.configuration[key]['default']) { 270 inputElement.value = this.sdkConfigList.configuration[key]['default']; 271 } 272 inputElement.setAttribute('configName', key); 273 inputElement.setAttribute('type', this.sdkConfigList.configuration[key].type); 274 sdkConfigDiv.appendChild(inputElement); 275 this.list!.push(inputElement); 276 } 277 } 278 279 initConfig(): void { 280 this.customConfig!.innerHTML = ''; 281 this.list = []; 282 this.list.push(this.selectConfig!); 283 let sdkConfigSwitch = document.createElement('lit-switch') as LitSwitch; 284 for (let key in this.sdkConfigList.configuration) { 285 let sdkConfigDiv = document.createElement('div'); 286 sdkConfigDiv.className = 'sdk-config-div'; 287 let sdkConfigHeadDiv = document.createElement('div'); 288 sdkConfigDiv.appendChild(sdkConfigHeadDiv); 289 let sdkConfigTitle = document.createElement('span'); 290 sdkConfigTitle.className = 'sdk-config-title'; 291 sdkConfigTitle.textContent = key; 292 sdkConfigHeadDiv.appendChild(sdkConfigTitle); 293 let sdkConfigDes = document.createElement('span'); 294 sdkConfigDes.textContent = this.sdkConfigList.configuration[key].description; 295 sdkConfigDes.className = 'sdk-config-des'; 296 sdkConfigHeadDiv.appendChild(sdkConfigDes); 297 switch (this.sdkConfigList.configuration[key].type) { 298 case 'string': 299 this.sdkConfigByStringType(key, sdkConfigDiv); 300 break; 301 case 'number': 302 this.sdkConfigByNumberType(key, sdkConfigDiv); 303 break; 304 case 'integer': 305 this.sdkConfigByIntegerType(key, sdkConfigDiv, sdkConfigTitle); 306 break; 307 case 'boolean': 308 this.sdkConfigByBooleanType(key, sdkConfigSwitch, sdkConfigHeadDiv); 309 break; 310 } 311 this.customConfig!.appendChild(sdkConfigDiv); 312 if (this.sdkConfigList.configuration[key]['enum']) { 313 let select = this.shadowRoot!.querySelector<LitSelectV>(`#${key}`); 314 select!.setAttribute('type', 'enum'); 315 select!.setAttribute('value', this.sdkConfigList.configuration[key]['default']); 316 select!.dataSource(this.sdkConfigList.configuration[key]['enum'], ''); 317 this.list.push(select!); 318 select!.addEventListener('click', () => { 319 select!.setAttribute('value', select!.value); 320 }); 321 } 322 } 323 sdkConfigSwitch.addEventListener('change', () => { 324 sdkConfigSwitch.setAttribute('value', `${sdkConfigSwitch.hasAttribute('checked')}`); 325 }); 326 } 327 328 checkIntegerInput(value: string): string { 329 let inputValue = value 330 .replace(/[^\-\d]|\-{2,}/g, '') 331 .replace(/(\d)\-|-(0+)|^0+(\d)/g, '$1') 332 .replace(/(-?\d{15})\d*/, '$1'); 333 return inputValue; 334 } 335 336 checkFloatInput(value: string): string { 337 let inputValue = value 338 .replace(/[^\d.]/g, '') 339 .replace(/^\.|^0+(\d)/g, '') 340 .replace(/(\.\d+)\.|(-)\.|(\d+|\.)-/g, '$1') 341 .replace(/(-?\d{9})\d*/, '$1'); 342 return inputValue.replace(/\.{2,}|-(0){2,}|(-)0+(\d+)/g, '.'); 343 } 344 345 isAbleShowConfig(isAbleShow: boolean): void { 346 if (this.list!) { 347 if (isAbleShow) { 348 this.list!.forEach((item) => { 349 item.setAttribute('disabled', ''); 350 }); 351 } else { 352 this.list!.forEach((item) => { 353 item.removeAttribute('disabled'); 354 }); 355 } 356 } 357 } 358 359 initHtml(): string { 360 return SpSdkConfigHtml; 361 } 362} 363