mirror of
https://github.com/rstrouse/ESPSomfy-RTS.git
synced 2025-12-13 11:02:12 +01:00
v1.4.1
Add the ability to view receiver data.
This commit is contained in:
Robert Strouse
parent
7bd23e6bbe
commit
3f662b7bd0
11 changed files with 363 additions and 34 deletions
|
|
@ -664,3 +664,29 @@ i.icss-file {
|
|||
transform: rotate(-45deg);
|
||||
top: .02em;
|
||||
}
|
||||
|
||||
i.icss-x {
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
background-color: transparent;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
i.icss-x:before,
|
||||
i.icss-x:after {
|
||||
width: 1em;
|
||||
height: .18em;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
border-radius: .06em;
|
||||
background-color: currentColor;
|
||||
}
|
||||
|
||||
i.icss-x:before {
|
||||
transform: translate(-50%, -50%) rotate(-225deg)
|
||||
}
|
||||
|
||||
i.icss-x:after {
|
||||
transform: translate(-50%, -50%) rotate(225deg)
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -4,9 +4,9 @@
|
|||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta charset="UTF-8">
|
||||
<link rel="stylesheet" href="main.css?v=1.4.1" type="text/css" />
|
||||
<link rel="stylesheet" href="icons.css?v=1.4.0" type="text/css" />
|
||||
<link rel="stylesheet" href="icons.css?v=1.4.1" type="text/css" />
|
||||
<link rel="icon" type="image/png" href="favicon.png" />
|
||||
<script type="text/javascript" src="index.js?v=1.4.0"></script>
|
||||
<script type="text/javascript" src="index.js?v=1.4.1"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="divContainer" class="container" style="user-select:none;position:relative;border-radius:27px;">
|
||||
|
|
@ -200,7 +200,7 @@
|
|||
<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;"></div>
|
||||
<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
|
||||
|
|
@ -245,11 +245,11 @@
|
|||
</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;"/>
|
||||
<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;"/>
|
||||
<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>
|
||||
|
|
@ -291,7 +291,7 @@
|
|||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div id="somfyTransceiver" style="display:none;">
|
||||
<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="">
|
||||
|
|
@ -359,6 +359,7 @@
|
|||
<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>
|
||||
|
|
@ -414,6 +415,17 @@
|
|||
|
||||
</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></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'));
|
||||
|
|
|
|||
|
|
@ -279,6 +279,9 @@ async function initSockets() {
|
|||
case 'wifiStrength':
|
||||
wifi.procWifiStrength(msg);
|
||||
break;
|
||||
case 'packetPulses':
|
||||
console.log(msg);
|
||||
break;
|
||||
|
||||
}
|
||||
} catch (err) {
|
||||
|
|
@ -369,12 +372,13 @@ async function reopenSocket() {
|
|||
await initSockets();
|
||||
}
|
||||
class General {
|
||||
appVersion = 'v1.4.0';
|
||||
appVersion = 'v1.4.1';
|
||||
reloadApp = false;
|
||||
async init() {
|
||||
this.setAppVersion();
|
||||
this.setTimeZones();
|
||||
this.loadGeneral();
|
||||
if (sockIsOpen && this.isConfigOpen()) socket.send('join:0');
|
||||
};
|
||||
reload() {
|
||||
let addMetaTag = (name, content) => {
|
||||
|
|
@ -573,6 +577,10 @@ class General {
|
|||
clearErrors();
|
||||
});
|
||||
};
|
||||
isConfigOpen() {
|
||||
let divCfg = document.getElementById('divConfigPnl');
|
||||
return (window.getComputedStyle(divCfg).display !== 'none');
|
||||
};
|
||||
toggleConfig() {
|
||||
let divCfg = document.getElementById('divConfigPnl');
|
||||
let divHome = document.getElementById('divHomePnl');
|
||||
|
|
@ -580,15 +588,16 @@ class General {
|
|||
divHome.style.display = 'none';
|
||||
divCfg.style.display = '';
|
||||
document.getElementById('icoConfig').className = 'icss-home';
|
||||
if (sockIsOpen) socket.send('join:0');
|
||||
}
|
||||
else {
|
||||
divHome.style.display = '';
|
||||
divCfg.style.display = 'none';
|
||||
document.getElementById('icoConfig').className = 'icss-gear';
|
||||
}
|
||||
if (sockIsOpen) socket.send('leave:0');
|
||||
}
|
||||
somfy.closeEditShade();
|
||||
somfy.closeConfigTransceiver();
|
||||
|
||||
};
|
||||
};
|
||||
var general = new General();
|
||||
|
|
@ -881,6 +890,7 @@ class Wifi {
|
|||
};
|
||||
var wifi = new Wifi();
|
||||
class Somfy {
|
||||
frames = [];
|
||||
async init() {
|
||||
this.loadPins('inout', document.getElementById('selTransSCKPin'));
|
||||
this.loadPins('inout', document.getElementById('selTransCSNPin'));
|
||||
|
|
@ -1287,7 +1297,54 @@ class Somfy {
|
|||
this.setLinkedRemotesList(shade);
|
||||
});
|
||||
}
|
||||
let frames = document.getElementById('divFrames');
|
||||
let row = document.createElement('div');
|
||||
row.classList.add('frame-row');
|
||||
let html = `<span>${frame.encKey}</span><span>${frame.address}</span><span>${frame.command}</span><span>${frame.rcode}</span><span>${frame.rssi}dBm</span><div class="frame-pulses">`;
|
||||
for (let i = 0; i < frame.pulses.length; i++) {
|
||||
if (i !== 0) html += ',';
|
||||
html += `${frame.pulses[i]}`;
|
||||
}
|
||||
row.innerHTML = html;
|
||||
frames.prepend(row);
|
||||
this.frames.push(frame);
|
||||
};
|
||||
JSONPretty(obj, indent = 2) {
|
||||
if (Array.isArray(obj)) {
|
||||
let output = '[';
|
||||
for (let i = 0; i < obj.length; i++) {
|
||||
if (i != 0) output += ',\n';
|
||||
output += this.JSONPretty(obj[i], indent);
|
||||
}
|
||||
output += ']'
|
||||
return output;
|
||||
}
|
||||
else {
|
||||
let output = JSON.stringify(obj, function (k, v) {
|
||||
if (Array.isArray(v)) return JSON.stringify(v);
|
||||
return v;
|
||||
}, indent).replace(/\\/g, '')
|
||||
.replace(/\"\[/g, '[')
|
||||
.replace(/\]\"/g, ']')
|
||||
.replace(/\"\{/g, '{')
|
||||
.replace(/\}\"/g, '}')
|
||||
.replace(/\{\n\s+/g, '{');
|
||||
return output;
|
||||
}
|
||||
}
|
||||
framesToClipboard() {
|
||||
if (typeof navigator.clipboard !== 'undefined')
|
||||
navigator.clipboard.writeText(this.JSONPretty(this.frames, 2));
|
||||
else {
|
||||
let dummy = document.createElement('textarea');
|
||||
document.body.appendChild(dummy);
|
||||
dummy.value = this.JSONPretty(this.frames, 2);
|
||||
dummy.focus();
|
||||
dummy.select();
|
||||
document.execCommand('copy');
|
||||
document.body.removeChild(dummy);
|
||||
}
|
||||
}
|
||||
openConfigTransceiver() {
|
||||
document.getElementById('somfyMain').style.display = 'none';
|
||||
document.getElementById('somfyTransceiver').style.display = '';
|
||||
|
|
|
|||
|
|
@ -663,5 +663,83 @@ div.eth-setting-line label {
|
|||
width: 90px;
|
||||
text-align:right;
|
||||
color:mediumspringgreen;
|
||||
|
||||
}
|
||||
}
|
||||
div.frame-log {
|
||||
position:absolute;
|
||||
top:0px;
|
||||
left:0px;
|
||||
width:100%;
|
||||
height:100%;
|
||||
border-radius:27px;
|
||||
border:solid 2px gray;
|
||||
background:gainsboro;
|
||||
}
|
||||
div.frame-list {
|
||||
position:relative;
|
||||
width: calc(100% - 14px);
|
||||
height: calc(100% - 147px);
|
||||
left: 7px;
|
||||
background:white;
|
||||
overflow-y:auto;
|
||||
border:solid 1px silver;
|
||||
}
|
||||
div.frame-header {
|
||||
position: relative;
|
||||
font-size: 12px;
|
||||
background: #00bcd4;
|
||||
width: calc(100% - 14px);
|
||||
left: 7px;
|
||||
color:white;
|
||||
padding-top:4px;
|
||||
}
|
||||
div.frame-row > span,
|
||||
div.frame-header > span {
|
||||
overflow:hidden;
|
||||
display:inline-block;
|
||||
padding-left: 4px;
|
||||
padding-right: 4px;
|
||||
}
|
||||
div.frame-header > span {
|
||||
text-align:center;
|
||||
}
|
||||
div.frame-row > span {
|
||||
text-align:right;
|
||||
}
|
||||
div.frame-row > span:nth-child(1),
|
||||
div.frame-header > span:nth-child(1) {
|
||||
width:30px;
|
||||
}
|
||||
div.frame-row > span:nth-child(2),
|
||||
div.frame-header > span:nth-child(2) {
|
||||
width: 67px;
|
||||
}
|
||||
div.frame-row > span:nth-child(3),
|
||||
div.frame-header > span:nth-child(3) {
|
||||
width: 77px;
|
||||
text-align:center;
|
||||
}
|
||||
div.frame-row > span:nth-child(4),
|
||||
div.frame-header > span:nth-child(4) {
|
||||
width: 50px;
|
||||
}
|
||||
div.frame-row > span:nth-child(5),
|
||||
div.frame-header > span:nth-child(5) {
|
||||
width: 57px;
|
||||
}
|
||||
div.frame-list > div:nth-child(2n+1) {
|
||||
background: beige;
|
||||
}
|
||||
div.frame-row {
|
||||
font-size:12px;
|
||||
width:100%;
|
||||
background:white;
|
||||
}
|
||||
div.frame-pulses {
|
||||
width:100%;
|
||||
padding-left:7px;
|
||||
padding-right:7px;
|
||||
overflow:hidden;
|
||||
white-space:nowrap;
|
||||
text-overflow:ellipsis;
|
||||
display:none;
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue