ESPSomfy-RTS/data/index.html
Robert Strouse 39c6e08ca5 v1.5.1 Bug Fixes
* Fixed issue where prog command was being filtered out #27
* Added tilt wheel commands for tilt positioning with integrated tilt motors #17
* Added tilt position visibility for Edit Shade screen
2023-04-21 14:12:28 -07:00

478 lines
34 KiB
HTML

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="UTF-8">
<link rel="stylesheet" href="main.css?v=1.5.1" type="text/css" />
<link rel="stylesheet" href="icons.css?v=1.5.1" type="text/css" />
<link rel="icon" type="image/png" href="favicon.png" />
<script type="text/javascript" src="index.js?v=1.5.1"></script>
</head>
<body>
<div id="divContainer" class="container" style="user-select:none;position:relative;border-radius:27px;">
<div id="divRadioError" style="text-align:center;background:gainsboro;color:gray;margin-bottom:7px;text-transform:uppercase;font-weight:bold;padding:4px;border-radius:5px;">Radio Not Initialized</div>
<h1 style="text-align: center;"><img src="icon.png" style="width:50px;float:left;margin-left:1px;margin-top:-10px;" /><span>ESPSomfy RTS</span><span class="button-outline" onclick="general.toggleConfig();" style="float:right;font-size:1.25rem;display:inline-block;vertical-align:middle;width:38px;height:38px;position:relative;padding-top:4px;"><span style="vertical-align:middle;clear:both;text-align:center;display:inline-block;"><i id="icoConfig" class="icss-gear" style=""></i></span></span></h1>
<div id="divConfigPnl" style="display:none;">
<div id="divWiFiStrength" style="margin-top:-10px;text-align:center;font-size:12px;">
<div style="display:inline-block;vertical-align:middle;">
<div><span style="text-align:right;display:inline-block;width:57px;color:#00bcd4">Network:</span><span id="spanNetworkSSID" style="padding-left:4px;display:inline-block;text-align:left;width:120px;">-------------</span></div>
<div><span style="text-align:right;display:inline-block;width:57px;color:#00bcd4">Channel:</span><span id="spanNetworkChannel" style="padding-left:4px;display:inline-block;text-align:left;width:120px;">--</span></div>
</div>
<div id="divNetworkStrength" class="wifiSignal" style="display:inline-block;vertical-align:middle;">
</div>
<div style="position:absolute;display:inline-block;">
<div style="position:relative;border:solid 1px silver;background-color:cornsilk;padding:2px;font-size:12px;box-shadow: 0 3px 5px rgba(0,0,0,0.19), 0 2px 2px rgba(0,0,0,0.23);float:right;border-radius:4px;margin-left:-4px;"><span id="spanNetworkStrength">---</span><span>dBm</span></div>
</div>
</div>
<div id="divEthernetStatus" style="margin-top:-10px;text-align:center;font-size:12px;display:none;">
<div style="display:inline-block;vertical-align:middle;">
<div><span style="text-align:right;display:inline-block;width:57px;color:#00bcd4">Status:</span><span id="spanEthernetStatus" style="padding-left:4px;display:inline-block;text-align:left;width:120px;">-------------</span></div>
<div><span style="text-align:right;display:inline-block;width:57px;color:#00bcd4">Speed:</span><span id="spanEthernetSpeed" style="padding-left:4px;display:inline-block;text-align:left;width:120px;">--</span></div>
</div>
</div>
<div class="tab-container"><span class="selected" data-grpid="fsGeneralSettings">General</span><span data-grpid="fsWiFiSettings">WiFi</span><span data-grpid="fsMQTTSettings">MQTT</span><span data-grpid="fsSomfySettings">Somfy</span><span data-grpid="fsUpdates">Updates</span></div>
<fieldset id="fsGeneralSettings">
<legend>General Settings</legend>
<form method="post" action="/general" style="margin-top:8px;">
<div class="field-group">
<input id="fldHostname" name="hostname" type="text" length=32 placeholder="Host Name">
<label for="fldHostname">Host Name</label>
</div>
<div class="field-group">
<select id="selTimeZone" name="timeZone" placeholder="Time Zone" style="width:100%;"></select>
<label for="selTimeZone">Time Zone</label>
</div>
<div class="field-group">
<input id="fldNtptimesever" name="ntptimeserver" type="text" length=32 placeholder="Time Server">
<label for="fldNtptimeserver">NTP Time Server</label>
</div>
<div class="field-group" style="vertical-align:middle;">
<input id="cbSsdpBroadcast" name="ssdpBroadcast" type="checkbox" style="display:inline-block;" />
<label for="cbSsdpBroadcast" style="display:inline-block;cursor:pointer;">Broadcast uPnP over SSDP</label>
</div>
<div class="button-container">
<button id="btnSaveGeneral" type="button" onclick="general.setGeneral();">
Save
</button>
</div>
<div class="button-container">
<button id="btnReboot" type="button" onclick="general.rebootDevice();">
Reboot
</button>
</div>
</form>
</fieldset>
<fieldset id="fsWiFiSettings" style="display:none;">
<legend>WiFi/LAN Settings</legend>
<div class="field-group" style="vertical-align:middle;color:#00bcd4;margin-top:-30px;margin-bottom:18px;">
<input id="cbHardwired" name="hardwired" type="checkbox" style="display:inline-block;" onclick="wifi.useEthernetClicked();" />
<label for="cbHardwired" style="display:inline-block;cursor:pointer;">Use Ethernet</label>
<div id="divFallbackWireless" style="display:inline-block;padding-left:7px;">
<input id="cbFallbackWireless" name="fallbackwireless" type="checkbox" style="display:inline-block;" />
<label for="cbFallbackWireless" style="display:inline-block;cursor:pointer;">Fallback to Wireless</label>
</div>
</div>
<div id="divWiFiMode">
<form method="post" action="/scan">
<div id="divAps" data-lastloaded="0" style="border-radius:5px;border:solid 1px #00bcd4;margin-bottom:-10px;"></div>
<div class="button-container"><button id="btnScanAPs" type="button" onclick="wifi.loadAPs();">Scan</button></div>
<div class="field-group">
<input id="fldSsid" name="ssid" type="text" length=32 placeholder="SSID">
<label for="fldSsid">Network SSID</label>
</div>
<div class="field-group">
<input id="fldPassphrase" name="passphrase" type="password" length=32 placeholder="Passphrase">
<label for="fldPassphrase">Passphrase</label>
</div>
</form>
</div>
<div id="divEthernetMode" style="display:none;">
<form method="post" action="/ethernet">
<div class="field-group">
<select id="selETHBoardType" name="ethBoardType" placeholder="Board Type" style="width:100%;" onchange="wifi.onETHBoardTypeChanged(this);"></select>
<label for="selETHBoardType">Board Type</label>
</div>
<div id="divETHSettings">
<div class="field-group" style="width:30%;margin-right:7px;display:inline-block;">
<select id="selETHPhyType" name="ethphytype" placeholder="PHY Type" style="width:100%;"></select>
<label for="selETHPhyType">PHY Chip Type</label>
</div>
<div class="field-group" style="width:20%;display:inline-block;margin-right:7px;">
<select id="selETHAddress" name="address" placeholder="Address" style="width:100%;"></select>
<label for="selETHAddress">Address</label>
</div>
<div class="field-group" style="width:30%;display:inline-block;margin-right:7px;">
<select id="selETHClkMode" name="clkmode" placeholder="Clock Mode" style="width:100%;"></select>
<label for="selETHClkMode">Clock Mode</label>
</div>
<div class="field-group" style="width:20%;display:inline-block;margin-right:7px;">
<select id="selETHPWRPin" name="pwr" placeholder="Power Pin" style="width:100%;"></select>
<label for="selETHPWRPin">Power Pin</label>
</div>
<div class="field-group" style="width:20%;display:inline-block;margin-right:7px;">
<select id="selETHMDCPin" name="mdc" placeholder="MDC Pin" style="width:100%;"></select>
<label for="selETHPMDCPin">MDC Pin</label>
</div>
<div class="field-group" style="width:20%;display:inline-block;margin-right:7px;">
<select id="selETHMDIOPin" name="mdc" placeholder="MDIO Pin" style="width:100%;"></select>
<label for="selETHMDIOPin">MDIO Pin</label>
</div>
<hr />
</div>
<div class="field-group">
<input id="cbUseDHCP" name="dhcp" type="checkbox" style="display:inline-block;" onclick="wifi.onDHCPClicked(this);" checked="checked" />
<label for="cbUseDHCP" style="display:inline-block;cursor:pointer;">Acquire IP Address automatically (DHCP)</label>
</div>
<div id="divStaticIP" style="display:none;">
<div class="field-group">
<input id="fldIPAddress" name="staticIP" type="text" length=32 placeholder="0.0.0.0">
<label for="fldIPAddress">Static IP Address</label>
</div>
<div class="field-group">
<input id="fldSubnetMask" name="subnet" type="text" length=32 placeholder="0.0.0.0">
<label for="fldSubnetMask">Subnet Mask</label>
</div>
<div class="field-group">
<input id="fldGateway" name="gateway" type="text" length=32 placeholder="0.0.0.0">
<label for="fldGateway">Gateway</label>
</div>
<div class="field-group">
<input id="fldDNS1" name="dns1" type="text" length=32 placeholder="0.0.0.0">
<label for="fldDNS1">Domain Name Server 1</label>
</div>
<div class="field-group">
<input id="fldDNS2" name="dns2" type="text" length=32 placeholder="0.0.0.0">
<label for="fldDNS2">Domain Name Server 2</label>
</div>
</div>
</form>
</div>
<form method="post" action="/wifi" style="margin-top:8px;">
<div class="button-container">
<button id="btnSaveNetwork" type="button" onclick="wifi.saveNetwork();">
Save
</button>
</div>
</form>
</fieldset>
<fieldset id="fsMQTTSettings" style="display:none;">
<legend>MQTT Settings</legend>
<form method="post" action="/mqtt">
<div class="field-group" style="vertical-align:middle;">
<input id="cbMqttEnabled" name="mqtt-enabled" type="checkbox" style="display:inline-block;" />
<label for="cbMqttEnabled" style="display:inline-block;cursor:pointer;">Enable MQTT client</label>
</div>
<div class="field-group1" style="white-space:nowrap;">
<select name="mqtt-protocol" style="width:54px;">
<option>MQTT</option>
<option>MQTTS</option>
</select>
<span style="">://</span>
<input name="mqtt-host" type="text" length=32 placeholder="Host" style="width:calc(100% - 137px);">
<span>:</span>
<input name="mqtt-port" type="text" length=5 placeholder="Port" style="width:50px;">
</div>
<div class="field-group">
<input id="fldMqttUsername" name="mqtt-username" type="text" length=32 placeholder="Username">
<label for="fldMqttUsername">Username</label>
</div>
<div class="field-group">
<input id="fldMqttPassword" name="mqtt-password" type="text" length=64 placeholder="Password">
<label for="fldMqttPassword">Password</label>
</div>
<div class="field-group">
<input id="fldMqttTopic" name="mqtt-topic" type="text" length=64 placeholder="Root Topic">
<label for="fldMqttTopic">Root Topic</label>
</div>
<div class="button-container">
<button id="btnConnectMQTT" type="button" onclick="mqtt.connectMQTT();">Save</button>
</div>
</form>
</fieldset>
<fieldset id="fsSomfySettings" style="display:none;">
<legend>Somfy Settings</legend>
<div id="somfyMain">
<form method="post" action="/radioSettings">
<hr />
<div id="divShadeSection">
<div id="divShadeList" style="overflow-y: auto; max-height: 400px; padding-top: 2px; padding-bottom: 2px;min-height:127px;"></div>
<div class="button-container">
<button id="btnAddShade" type="button" onclick="somfy.openEditShade();">
Add Shade
</button>
<button id="btnConfigTransceiver" type="button" onclick="somfy.openConfigTransceiver();">
Configure Transceiver
</button>
</div>
</div>
</form>
</div>
<div id="somfyShade" style="width:100%;display:none;">
<form method="post" action="/shadesettings">
<div style="display:inline-block;float:right;position:relative;margin-top:-14px;"><span id="spanShadeId">*</span>/<span id="spanMaxShades">5</span></div>
<div>
<div class="field-group" style="width:127px;display:inline-block;margin-top:-20px;float:left;">
<div class="field-group">
<div class="field-group">
<select id="selShadeBitLength" name="bitLength" style="width:100%;">
<option value="56">56-BIT</option>
<option value="80">80-BIT</option>
</select>
<label for="selShadeBitLength">Bit Length</label>
</div>
<div class="field-group">
<select id="selShadeType" name="shadeType" style="width:100%;" onchange="somfy.onShadeTypeChanged(this);">
<option value="0">Roller Shade</option>
<option value="1">Blind</option>
<option value="2">Drapery</option>
</select>
<label for="selShadeType">Type</label>
</div>
<div class="field-group">
<input id="fldShadeAddress" name="shadeAddress" type="number" length=5 placeholder="Address" style="width:100%;text-align:right;">
<label for="fldShadeAddress">Remote Address</label>
</div>
</div>
</div>
<div id="divSomfyButtons" style="float:right;margin-top:27px;position:relative">
<div style="display:inline-block;margin-right:7px;position:relative;font-size:48px;"><i id="icoShade" class="somfy-shade-icon icss-window-shade" data-shadeid="0" style="--shade-position:0%;vertical-align:middle;"></i><i class="icss-window-tilt" data-tiltposition="0" style="display:none;"></i></div>
<div class="button-outline" onclick="somfy.sendCommand(parseInt(document.getElementById('spanShadeId').innerText, 10), 'up');"><i class="icss-somfy-up"></i></div>
<div class="button-outline" onclick="somfy.sendCommand(parseInt(document.getElementById('spanShadeId').innerText, 10), 'my');" style="font-size: 2em; padding: 10px;"><span>my</span></div>
<div class="button-outline" onclick="somfy.sendCommand(parseInt(document.getElementById('spanShadeId').innerText, 10), 'down');"><i class="icss-somfy-down" style="margin-top:-4px;"></i></div>
</div>
</div>
<div class="field-group">
<input id="fldShadeName" name="shadeName" type="text" length=20 placeholder="Name">
<label for="fldShadeName">Name</label>
</div>
<div>
<div class="field-group" style="display:inline-block;max-width:127px;margin-right:17px;">
<input id="fldShadeUpTime" name="shadeUpTime" type="number" length=5 placeholder="milliseconds" style="width:100%;text-align:right;" />
<label for="fldShadeUpTime">Up Time (ms)</label>
</div>
<div class="field-group" style="display:inline-block;max-width:127px;">
<input id="fldShadeDownTime" name="shadeDownTime" type="number" length=5 placeholder="milliseconds" style="width:100%;text-align:right;" />
<label for="fldShadeDownTime">Down Time (ms)</label>
</div>
</div>
<div id="divTiltSettings" style="display:none;">
<div class="field-group" style="display:inline-block; margin-right:17px;width:127px;vertical-align:middle;">
<select id="selTiltType" name="tiltType" style="width:100%;" onchange="somfy.onShadeTypeChanged(this);">
<option value="0">None</option>
<option value="1">Tilt Motor</option>
<option value="2">Integrated</option>
</select>
<label for="selTiltType" style="cursor:pointer;">Tilt Type</label>
</div>
<div class="field-group" style="display:inline-block;width:127px;vertical-align:middle;">
<input id="fldTiltTime" name="shadeTiltTime" type="number" length=5 placeholder="milliseconds" style="width:100%;text-align:right;" />
<label for="fldTiltTime">Tilt Time (ms)</label>
</div>
</div>
<div class="button-container" style="text-align:center;">
<button id="btnPairShade" type="button" onclick="somfy.pairShade(parseInt(document.getElementById('spanShadeId').innerText, 10));" style="display:inline-block;width:47%;">
Pair Shade
</button>
<button id="btnUnpairShade" type="button" onclick="somfy.unpairShade(parseInt(document.getElementById('spanShadeId').innerText, 10));" style="display:inline-block;width:47%;">
Unpair Shade
</button>
<button id="btnSetRollingCode" type="button" onclick="somfy.openSetRollingCode(parseInt(document.getElementById('spanShadeId').innerText, 10));" style="display:inline-block;width:47%;">
Set Rolling Code
</button>
</div>
<div class="button-container" style="margin-top:-10px;padding-left:7px;padding-right:7px;">
<button id="btnSaveShade" type="button" onclick="somfy.saveShade();">
Save Shade
</button>
</div>
<hr />
<div id="divLinkedRemoteList" style="overflow-y:auto;max-height:177px;padding-top:2px;padding-bottom:2px;"></div>
<div class="button-container">
<button id="btnLinkRemote" type="button" onclick="somfy.linkRemote(parseInt(document.getElementById('spanShadeId').innerText, 10));">
Link Remote
</button>
<button id="btnBtnShadeGoBack" type="button" onclick="somfy.closeEditShade();">
Done
</button>
</div>
</form>
</div>
<div id="somfyTransceiver" style="display:none;position:relative;">
<form>
<div id="divRadioSettings" name="divRadioSettings" class="field-group1" style="display:block;position:relative">
<div class="field-group" style="">
<label for="selRadioType">Radio</label>
<select id="selRadioType" name="radioType" style="width:77px;">
<option value="none" selected>None</option>
<option value="56">56-BIT</option>
<option value="80">80-BIT</option>
</select>
</div>
<div class="field-group" style="vertical-align:middle;margin-left:7px;float:right;">
<input id="cbEnableRadio" name="enableRadio" type="checkbox" style="display:inline-block;" />
<label for="cbEnableRadio" style="display:inline-block;cursor:pointer;">Enable Radio</label>
</div>
<div class="field-group1" style="margin-top:-20px;white-space:nowrap">
<div class="field-group radioPins">
<select id="selTransSCKPin" name="transSCK"></select>
<label for="selTransSCKPin">SCLK</label>
</div>
<div class="field-group radioPins">
<select id="selTransCSNPin" name="transCSN"></select>
<label for="selTransCSNPin">CSN</label>
</div>
<div class="field-group radioPins">
<select id="selTransMOSIPin" name="transMOSI"></select>
<label for="selTransMOSIPin">MOSI</label>
</div>
<div class="field-group radioPins">
<select id="selTransMISOPin" name="transMISO"></select>
<label for="selTransMISOPin">MISO</label>
</div>
</div>
<div class="field-group1" style="margin-top:-20px;">
<div class="field-group radioPins">
<select id="selTransTXPin" name="transTX"></select>
<label for="selTransTXPin">TX</label>
</div>
<div class="field-group radioPins">
<select id="selTransRXPin" name="transRX"></select>
<label for="selTransRXPin">RX</label>
</div>
</div>
<div class="field-group" style="display:inline-block;width:auto;min-width:247px;margin-top:-20px;vertical-align:top;">
<div class="field-group">
<input id="slidRxBandwidth" name="rxBandwidth" type="range" min="5803" max="81250" step="1" style="width:100%;" oninput="somfy.rxBandwidthChanged(this);" />
<label for="slidRxBandwidth" style="display:block;font-size:1em;margin-top:0px;margin-left:7px;">
<span>RX Bandwidth </span>
<span style="float:right;display:inline-block;margin-right:7px;">
<span id="spanRxBandwidth" style="color:black;"></span><span>kHz</span>
</span>
</label>
</div>
<div class="field-group" style="margin-top:-10px;">
<input id="slidDeviation" name="deviation" type="range" min="158" max="38085" step="1" style="width:100%;" oninput="somfy.deviationChanged(this);" />
<label for="slidDeviation" style="display:block;font-size:1em;margin-top:0px;margin-left:7px;"><span>Frequency Deviation </span><span style="float: right; display: inline-block; margin-right: 7px;"><span id="spanDeviation" style="color:black;"></span><span>kHz</span></span></label>
</div>
<div class="field-group" style="margin-top:-10px;">
<input id="slidTxPower" name="txPower" type="range" min="0" max="10" step="1" style="width:100%;" oninput="somfy.txPowerChanged(this);" />
<label for="slidTxPower" style="display:block;font-size:1em;margin-top:0px;margin-left:7px;"><span>TX Power </span><span style="float: right; display: inline-block; margin-right: 7px;"><span id="spanTxPower" style="color:black;"></span><span>dBm</span></span></label>
</div>
</div>
<div style="display:inline-block;vertical-align:top;padding-left:14px;">
<div class="field-group" style="">
<label style="display:block;width:100%;text-align:center;">RSSI: <span id="spanFrameCount" style="color:silver;">0</span></label>
<span id="spanRssi" name="rssi" style="display:block;font-size:32px;width:100%;text-align:center;">---</span>
<span style="display: block; color: #00bcd4;width:100%;text-align:center;">dBm</span>
<button id="btnReceiveLog" type="button" onclick="document.getElementById('divFrameLog').style.display = '';" style="padding-left:7px;padding-right:7px;">Logs</button>
</div>
</div>
</div>
<div class="button-container">
<button id="btnSaveRadio" type="button" onclick="somfy.saveRadio();">
Save Radio
</button>
<button id="btnTransceiverGoBack" type="button" onclick="somfy.closeConfigTransceiver();">
Done
</button>
</div>
</form>
</div>
</fieldset>
<fieldset id="fsUpdates" style="display:none">
<legend>Software/Firmware Updates</legend>
<form method="post" action="/general" style="margin-top:8px;">
<div style="font-size:17px;">
<span style="text-align:right;display:inline-block;color:#00bcd4;width:127px;margin-top:-27px;">Firmware:</span>
<span id="spanFwVersion" style="padding-left:4px;display:inline-block;text-align:left;width:120px;">v-.--</span>
</div>
<div style="font-size:17px;">
<span style="text-align:right;display:inline-block;color:#00bcd4;width:127px;">Application:</span>
<span id="spanAppVersion" style="padding-left:4px;display:inline-block;text-align:left;width:120px;">v-.--</span>
</div>
<div class="button-container">
<button id="btnUpdateFirmware" type="button" onclick="firmware.updateFirmware();">
Update Firmware
</button>
<button id="btnUpdateApplication" type="button" onclick="firmware.updateApplication();">
Update Application
</button>
<button id="btnReloadApplication" type="button" onclick="general.reload();">
Refresh Cache
</button>
<div class="button-container" style="text-align:center;">
<button id="btnBackup" style="width:47%;display:inline-block;" type="button" onclick="firmware.backup();">
Backup
</button>
<button id="btnRestore" style="width:47%;display:inline-block;" type="button" onclick="firmware.restore();">
Restore
</button>
</div>
</div>
</form>
</fieldset>
</div>
<div id="divHomePnl" style="position:relative;">
<hr />
<div id="divShadeControls" style="min-height:130px;">
</div>
</div>
<div id="divFrameLog" class="frame-log" style="display:none;">
<h1 style="text-align: center;padding:10px;"><span>Frame Logs</span><span class="button-outline" onclick="document.getElementById('divFrameLog').style.display = 'none';" style="float:right;font-size:1.25rem;display:inline-block;vertical-align:middle;width:38px;height:38px;position:relative;padding-top:4px;"><span style="vertical-align:middle;clear:both;text-align:center;display:inline-block;"><i id="icoConfig" class="icss-x" style=""></i></span></span></h1>
<hr style="margin:0px;" />
<div class="frame-header"><span>Key</span><span>Address</span><span>Command</span><span>Code</span><span>RSSI</span><span>Bits</span><span style="text-align:center;width:77px;">Time</span></div>
<div id="divFrames" class="frame-list"></div>
<div class="button-container" style="text-align:center">
<button type="button" class="btnCopyFrame" style="display:inline-block;width:44%;" onclick="somfy.framesToClipboard();">Copy</button>
<button type="button" class="btnClearFrames" style="display:inline-block;width:44%;" onclick="document.getElementById('divFrames').innerHTML = ''; somfy.frames = [];">Clear</button>
</div>
</div>
</div>
<script type="text/javascript">
waitMessage(document.getElementById('divShadeControls'));
let tabs = document.querySelectorAll('div.tab-container > span');
tabs.forEach((tab) => {
tab.addEventListener('click', (evt) => {
console.log(evt);
if (evt.srcElement.classList.contains('selected'))
return;
else {
tabs.forEach((tsel) => {
tsel.classList.remove('selected');
if (tsel != tab) {
let grpsel = document.getElementById(tsel.getAttribute('data-grpid'));
if (typeof grpsel !== 'undefined' && grpsel) grpsel.style.display = 'none';
}
});
tab.classList.add('selected');
if (tab.getAttribute('data-grpid') === 'fsWiFiSettings') {
// Only load the networks if we need them.
//if(new Date().getTime() - parseInt(document.getElementById('divAps').getAttribute('data-lastloaded'), 10) > 60000)
// wifi.loadAPs();
wifi.loadNetwork();
}
let grp = document.getElementById(tab.getAttribute('data-grpid'));
if (typeof grp !== 'undefined' && grp) grp.style.display = '';
}
});
});
(async () => {
await initSockets();
})();
//initSockets();
</script>
</body>
</html>