mirror of
https://github.com/rstrouse/ESPSomfy-RTS.git
synced 2025-12-13 02:52:11 +01:00
506 lines
36 KiB
HTML
506 lines
36 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.6.1" type="text/css" />
|
|
<link rel="stylesheet" href="icons.css?v=1.6.1" type="text/css" />
|
|
<link rel="icon" type="image/png" href="favicon.png" />
|
|
<script type="text/javascript" src="index.js?v=1.6.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 class="field-group" style="padding:0px;">
|
|
<div class="field-group" style="margin-top:-18px;display:inline-block;width:77px;">
|
|
<select id="selShadeProto" name="proto" style="width:100%;">
|
|
<option value="0">RTS</option>
|
|
<option value="1">RTW</option>
|
|
</select>
|
|
<label for="selShadeBitLength">Protocol</label>
|
|
</div>
|
|
<div class="field-group" style="margin-top:-18px;display:inline-block;width:77px;">
|
|
<select id="selShadeBitLength" name="bitLength" style="width:100%;" onchange="somfy.onShadeBitLengthChanged(this);">
|
|
<option value="56">56-BIT</option>
|
|
<option value="80">80-BIT</option>
|
|
</select>
|
|
<label for="selShadeBitLength">Bit Length</label>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div class="field-group" style="width:127px;display:inline-block;margin-top:-10px;float:left;">
|
|
<div class="field-group">
|
|
<div class="field-group" style="margin-top:-10px;">
|
|
<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" style="margin-top:-15px;">
|
|
<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:10px;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" style="padding:0px;">
|
|
<input id="fldShadeName" name="shadeName" type="text" length=20 placeholder="Name">
|
|
<label for="fldShadeName">Name</label>
|
|
</div>
|
|
<div style="margin-top:-10px;">
|
|
<div class="field-group" style="display:inline-block;max-width:127px;margin-right:17px;margin-top:-10px;">
|
|
<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;margin-top:-10px;">
|
|
<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 id="divStepSettings" style="display:none;">
|
|
<div class="field-group">
|
|
<input id="slidStepSize" name="stepSize" type="range" min="1" max="1000" step="1" style="width:100%;" oninput="somfy.stepSizeChanged(this);" />
|
|
<label for="slidStepSize" style="display:block;font-size:1em;margin-top:0px;margin-left:7px;">
|
|
<span>Step Size (smaller)</span>
|
|
<span style="float:right;display:inline-block;margin-right:7px;">
|
|
<span id="spanStepSize" style="color:black;"></span><span>(larger)</span>
|
|
</span>
|
|
</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="display:inline-block;margin-right:7px;">
|
|
<label for="selRadioProto">Protocol</label>
|
|
<select id="selRadioProto" name="radioType" style="width:77px;">
|
|
<option value="0">RTS</option>
|
|
<option value="1">RTW</option>
|
|
</select>
|
|
</div>
|
|
<div class="field-group" style="display:inline-block;">
|
|
<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>
|