mirror of
https://github.com/rstrouse/ESPSomfy-RTS.git
synced 2025-12-13 19:12:10 +01:00
5ef3e01226
All object references not look for cached script file. This eliminates the need to reload the script when simply rendering the page. ESP32 does not need to download this data if the cache already has it. Implemented versioning on the script tags.
340 lines
23 KiB
HTML
340 lines
23 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.2.1" type="text/css" />
|
|
<link rel="stylesheet" href="icons.css?v=1.2.1" type="text/css" />
|
|
<link rel="icon" type="image/png" href="favicon.png" />
|
|
<script type="text/javascript" src="index.js?v=1.2.1"></script>
|
|
</head>
|
|
<body>
|
|
<div id="divContainer" class="container" style="user-select:none;position:relative;">
|
|
<h1 style="text-align: center;"><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 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 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" type="password" length=32 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 Settings</legend>
|
|
<form method="post" action="/scan">
|
|
<div id="divAps" data-lastloaded="0"></div>
|
|
<div class="button-container"><button id="btnScanAPs" type="button" onclick="wifi.loadAPs();">Scan</button></div>
|
|
</form>
|
|
<form method="post" action="/wifi" style="margin-top:8px;">
|
|
<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>
|
|
<div class="button-container">
|
|
<button id="btnConnectWiFi" type="button" onclick="wifi.connectWiFi();">
|
|
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;"></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;">
|
|
<input id="fldShadeAddress" name="shadeAddress" type="number" length=5 placeholder="Address" style="width:100%;">
|
|
<label for="fldShadeAddress">Remote Address</label>
|
|
</div>
|
|
<div id="divSomfyButtons" style="float:right">
|
|
<div style="display:inline-block;padding-right:7px;"><i id="icoShade" class="somfy-shade-icon icss-window-shade" data-shadeid="0" style="--shade-position:0%;vertical-align:middle;font-size:32px;"></i></div>
|
|
<div class="button-outline" onclick="somfy.sendCommand(parseInt(document.getElementById('spanShadeId').innerText, 10), 'up');" style="display:inline-block;padding:7px;cursor:pointer;"><i class="icss-somfy-up"></i></div>
|
|
<div class="button-outline" onclick="somfy.sendCommand(parseInt(document.getElementById('spanShadeId').innerText, 10), 'my');" style="display:inline-block;font-size:2em;padding:10px;cursor:pointer;"><span>my</span></div>
|
|
<div class="button-outline" onclick="somfy.sendCommand(parseInt(document.getElementById('spanShadeId').innerText, 10), 'down');" style="display:inline-block;padding:7px;cursor:pointer;"><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 class="button-container" style="text-align:center;">
|
|
<button id="btnSaveShade" type="button" onclick="somfy.saveShade();" style="display:inline-block;width:47%;">
|
|
Save Shade
|
|
</button>
|
|
<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>
|
|
</div>
|
|
<div class="button-container" style="margin-top:-10px;padding-left:7px;padding-right:7px;">
|
|
<button id="btnChangeRollingCode" type="button" onclick="somfy.openSetRollingCode(parseInt(document.getElementById('spanShadeId').innerText, 10));">Set Rolling Code</button>
|
|
</div>
|
|
<hr />
|
|
<div id="divLinkedRemoteList" style="overflow-y:auto;max-height:77px;"></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;">
|
|
<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>
|
|
</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="btnUpdateApplication" type="button" onclick="general.reload();">
|
|
Refresh Cache
|
|
</button>
|
|
|
|
</div>
|
|
</form>
|
|
</fieldset>
|
|
|
|
</div>
|
|
<div id="divHomePnl" style="position:relative;">
|
|
<hr />
|
|
<div id="divShadeControls" style="min-height:130px;">
|
|
|
|
</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();
|
|
}
|
|
let grp = document.getElementById(tab.getAttribute('data-grpid'));
|
|
if (typeof grp !== 'undefined' && grp) grp.style.display = '';
|
|
}
|
|
|
|
});
|
|
});
|
|
(async () => {
|
|
await initSockets();
|
|
})();
|
|
//initSockets();
|
|
</script>
|
|
</body>
|
|
</html>
|