mirror of
https://github.com/rstrouse/ESPSomfy-RTS.git
synced 2025-12-13 19:12:10 +01:00
Initial commit
This commit is contained in:
Robert Strouse
commit
ee367e7111
28 changed files with 53359 additions and 0 deletions
396
data/configRadio.html
Normal file
396
data/configRadio.html
Normal file
|
|
@ -0,0 +1,396 @@
|
|||
<!DOCTYPE html>
|
||||
|
||||
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta charset="UTF-8">
|
||||
<title>Configure CC1101</title>
|
||||
<link rel="stylesheet" href="main.css" type="text/css" />
|
||||
<link rel="stylesheet" href="icons.css" type="text/css" />
|
||||
<style type="text/css">
|
||||
body {
|
||||
margin-top: 0px;
|
||||
}
|
||||
|
||||
input[data-type="int8_t"],
|
||||
input[data-type="uint8_t"] {
|
||||
width: 47px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
input[data-type="uint16_t"] {
|
||||
width: 77px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
input[data-type="float"] {
|
||||
width: 77px;
|
||||
text-align: right;
|
||||
}
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
let baseUrl = ''; //'http://192.168.1.204'; This is the current server.
|
||||
|
||||
Number.prototype.round = function (dec) { return Number(Math.round(this + 'e' + dec) + 'e-' + dec); };
|
||||
Number.prototype.fmt = function (format, empty) {
|
||||
if (isNaN(this)) return empty || '';
|
||||
if (typeof format === 'undefined') return this.toString();
|
||||
let isNegative = this < 0;
|
||||
let tok = ['#', '0'];
|
||||
let pfx = '', sfx = '', fmt = format.replace(/[^#\.0\,]/g, '');
|
||||
let dec = fmt.lastIndexOf('.') > 0 ? fmt.length - (fmt.lastIndexOf('.') + 1) : 0,
|
||||
fw = '', fd = '', vw = '', vd = '', rw = '', rd = '';
|
||||
let val = String(Math.abs(this).round(dec));
|
||||
let ret = '', commaChar = ',', decChar = '.';
|
||||
for (var i = 0; i < format.length; i++) {
|
||||
let c = format.charAt(i);
|
||||
if (c === '#' || c === '0' || c === '.' || c === ',')
|
||||
break;
|
||||
pfx += c;
|
||||
}
|
||||
for (let i = format.length - 1; i >= 0; i--) {
|
||||
let c = format.charAt(i);
|
||||
if (c === '#' || c === '0' || c === '.' || c === ',')
|
||||
break;
|
||||
sfx = c + sfx;
|
||||
}
|
||||
if (dec > 0) {
|
||||
let dp = val.lastIndexOf('.');
|
||||
if (dp === -1) {
|
||||
val += '.'; dp = 0;
|
||||
}
|
||||
else
|
||||
dp = val.length - (dp + 1);
|
||||
while (dp < dec) {
|
||||
val += '0';
|
||||
dp++;
|
||||
}
|
||||
fw = fmt.substring(0, fmt.lastIndexOf('.'));
|
||||
fd = fmt.substring(fmt.lastIndexOf('.') + 1);
|
||||
vw = val.substring(0, val.lastIndexOf('.'));
|
||||
vd = val.substring(val.lastIndexOf('.') + 1);
|
||||
let ds = val.substring(val.lastIndexOf('.'), val.length);
|
||||
for (let i = 0; i < fd.length; i++) {
|
||||
if (fd.charAt(i) === '#' && vd.charAt(i) !== '0') {
|
||||
rd += vd.charAt(i);
|
||||
continue;
|
||||
} else if (fd.charAt(i) === '#' && vd.charAt(i) === '0') {
|
||||
var np = vd.substring(i);
|
||||
if (np.match('[1-9]')) {
|
||||
rd += vd.charAt(i);
|
||||
continue;
|
||||
}
|
||||
else
|
||||
break;
|
||||
}
|
||||
else if (fd.charAt(i) === '0' || fd.charAt(i) === '#')
|
||||
rd += vd.charAt(i);
|
||||
}
|
||||
if (rd.length > 0) rd = decChar + rd;
|
||||
}
|
||||
else {
|
||||
fw = fmt;
|
||||
vw = val;
|
||||
}
|
||||
var cg = fw.lastIndexOf(',') >= 0 ? fw.length - fw.lastIndexOf(',') - 1 : 0;
|
||||
var nw = Math.abs(Math.floor(this.round(dec)));
|
||||
if (!(nw === 0 && fw.substr(fw.length - 1) === '#') || fw.substr(fw.length - 1) === '0') {
|
||||
var gc = 0;
|
||||
for (let i = vw.length - 1; i >= 0; i--) {
|
||||
rw = vw.charAt(i) + rw;
|
||||
gc++;
|
||||
if (gc === cg && i !== 0) {
|
||||
rw = commaChar + rw;
|
||||
gc = 0;
|
||||
}
|
||||
}
|
||||
if (fw.length > rw.length) {
|
||||
var pstart = fw.indexOf('0');
|
||||
if (pstart > 0) {
|
||||
var plen = fw.length - pstart;
|
||||
var pos = fw.length - rw.length - 1;
|
||||
while (rw.length < plen) {
|
||||
let pc = fw.charAt(pos);
|
||||
if (pc === ',') pc = commaChar;
|
||||
rw = pc + rw;
|
||||
pos--;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
if (isNegative) rw = '-' + rw;
|
||||
if (rd.length === 0 && rw.length === 0) return '';
|
||||
//console.log(pfx + rw + rd + sfx);
|
||||
return pfx + rw + rd + sfx;
|
||||
};
|
||||
let fields = [
|
||||
{ t: 'bool', i: 'printBuffer', d: 'Print the bytes received to the serial console', def: false },
|
||||
{ t: 'bool', i: 'internalCCMode', d: 'Use internal transmission mode FIFO buffers.', def:true },
|
||||
{ t: 'uint8_t', i: 'modulationMode', d: 'Modulation mode', o: [{ v: 0, n: '2-FSK' }, { v: 1, n: 'GFSK' }, { v: 2, n: 'ASK/OOK' }, { v: 3, n: '4-FSK' }, { v: 4, n: 'MSK' }] },
|
||||
{ t: 'float', i: 'frequency', d: 'Basic frequency', def:433.24 },
|
||||
{ t: 'float', i: 'deviation', d: 'Set the Frequency deviation in kHz. Value from 1.58 to 380.85. Default is 47.60 kHz.', def:47.6 },
|
||||
{ t: 'uint8_t', i: 'channel', d: 'The channel number from 0 to 255', def:0 },
|
||||
{ t: 'float', i: 'channelSpacing', d: 'Channel spacing in multiplied by the channel number and added to the base frequency in kHz. 25.39 to 405.45. Default 199.95', def:199.95 },
|
||||
{ t: 'float', i: 'rxBandwidth', d: 'Receive bandwidth in kHz. Value from 58.03 to 812.50. Default is 812.50kHz', def:812.5 },
|
||||
{ t: 'float', i: 'dataRate', d: 'The data rate in kBaud. 0.02 to 1621.83 Default is 99.97.', def:99.97 },
|
||||
{ t: 'int8_t', i: 'txPower', d: 'Transmission power {-30, -20, -15, -10, -6, 0, 5, 7, 10, 11, 12}. Default is 12.', def:12 },
|
||||
{
|
||||
t: 'uint8_t', i: 'syncMode', d: 'Sync Mode', def:0, o: [
|
||||
{ v: 0, n: 'No preamble/sync' },
|
||||
{ v: 1, n: '16 sync word bits detected' },
|
||||
{ v: 2, n: '16/16 sync words bits detected.' },
|
||||
{ v: 3, n: '30/32 sync word bits detected,' },
|
||||
{ v: 4, n: 'No preamble/sync carrier above threshold' },
|
||||
{ v: 5, n: '15/16 + carrier above threshold.' },
|
||||
{ v: 6, n: '16/16 + carrier-sense above threshold' },
|
||||
{ v: 7, n: '0/32 + carrier-sense above threshold' }]
|
||||
},
|
||||
{ t: 'uint16_t', i: 'syncWordHigh', d: 'The High sync word used for the sync mode.', def:211 },
|
||||
{ t: 'uint16_t', i: 'syncWordLow', d: 'The Low sync word used for the sync mode.', def:145 },
|
||||
{
|
||||
t: 'uint8_t', i: 'addrCheckMode', d: 'Address filter check mode', def:0, o: [
|
||||
{ v: 0, n: 'No address filtration' },
|
||||
{ v: 1, n: 'Check address without broadcast.' },
|
||||
{ v: 2, n: 'Address check with 0 as broadcast.' },
|
||||
{ v: 3, n: 'Address check with 0 or 255 as broadcast.' }]
|
||||
},
|
||||
{ t: 'uint8_t', i: 'checkAddr', d: 'Packet filter address depending on addrCheck settings.', def:0 },
|
||||
{ t: 'bool', i: 'dataWhitening', d: 'Indicates whether data whitening should be applied.', def:false },
|
||||
{
|
||||
t: 'uint8_t', i: 'pktFormat', d: 'Packet formatting', def:0, o: [
|
||||
{ v: 0, n: 'Use FIFO buffers for RX and TX' },
|
||||
{ v: 1, n: 'Synchronous serial mode. RX on GDO0 and TX on either GDOx pins.' },
|
||||
{ v: 2, n: 'Random TX mode. Send data using PN9 generator.' },
|
||||
{ v: 3, n: 'Asynchronous serial mode. RX on GDO0 and TX on either GDOx pins.' }]
|
||||
},
|
||||
{
|
||||
t: 'uint8_t', i: 'pktLengthMode', d: 'Type of packets', def:1, o: [
|
||||
{ v: 0, n: 'Fixed packet length' },
|
||||
{ v: 1, n: 'Variable packet length' },
|
||||
{ v: 2, n: 'Infinite packet length' },
|
||||
{ v: 3, n: 'Reserved' }]
|
||||
},
|
||||
{ t: 'uint8_t', i: 'pktLength', d: 'Packet length', def:0 },
|
||||
{ t: 'bool', i: 'useCRC', d: 'Indicates whether CRC is to be used.', def:true },
|
||||
{ t: 'bool', i: 'autoFlushCRC', d: 'Automatically flush RX FIFO when CRC fails. If more than one packet is in the buffer it too will be flushed.', def:false },
|
||||
{ t: 'bool', i: 'disableDCFilter', d: 'Digital blocking filter for demodulator. Only for data rates <= 250k.', def:false },
|
||||
{ t: 'bool', i: 'enableManchester', d: 'Enable/disable Manchester encoding.', def:false },
|
||||
{ t: 'bool', i: 'enableFEC', d: 'Enable/disable forward error correction.', def:false },
|
||||
{
|
||||
t: 'uint8_t', i: 'minPreambleBytes', d: 'The minimum number of preamble bytes to be transmitted.', def:0, o: [
|
||||
{ v: 0, n: '2bytes' },
|
||||
{ v: 1, n: '3bytes' },
|
||||
{ v: 2, n: '4bytes' },
|
||||
{ v: 3, n: '6bytes' },
|
||||
{ v: 4, n: '8bytes' },
|
||||
{ v: 5, n: '12bytes' },
|
||||
{ v: 6, n: '16bytes' },
|
||||
{ v: 7, n: '24bytes' }]
|
||||
},
|
||||
{ t: 'uint8_t', i: 'pqtThreshold', d: 'Preamble quality estimator threshold.', def:0 },
|
||||
{ t: 'bool', i: 'appendStatus', d: 'Appends the RSSI and LQI values to the TX packed as well as the CRC.', def: false }
|
||||
];
|
||||
function resetDefaults() {
|
||||
for (let i = 0; i < fields.length; i++) {
|
||||
let f = fields[i];
|
||||
if (typeof f.def === 'undefined') continue;
|
||||
let el = document.getElementById(`id_${f.i}`);
|
||||
switch (f.t) {
|
||||
case 'bool':
|
||||
el.checked = f.def;
|
||||
break;
|
||||
default:
|
||||
el.value = f.def;
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
function loadConfig() {
|
||||
let overlay = waitMessage(document.getElementById('divFields'));
|
||||
getJSON('/getRadio', (err, radio) => {
|
||||
overlay.remove();
|
||||
if (err) {
|
||||
console.log(err);
|
||||
serviceError(document.getElementById('divFields'), err);
|
||||
}
|
||||
else {
|
||||
console.log(radio);
|
||||
let cfg = radio.config;
|
||||
// Bind up all the fields.
|
||||
let elems = document.querySelectorAll('[data-bind]');
|
||||
for (let i = 0; i < elems.length; i++) {
|
||||
let el = elems[i];
|
||||
switch (el.dataset.type) {
|
||||
case 'bool':
|
||||
el.checked = cfg[el.dataset.bind];
|
||||
break;
|
||||
case 'float':
|
||||
el.value = cfg[el.dataset.bind].fmt("#.##");
|
||||
break;
|
||||
default:
|
||||
el.value = cfg[el.dataset.bind];
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
function createCheckbox(f) { return `<input type="checkbox" id="id_${f.i}" name="${f.i}" data-type="${f.t}" data-bind="${f.bind || f.i}"></input><label for="${f.i}>${f.l || f.i}</label>`; }
|
||||
function createNumberField(f) { return `<input type="number" id="id_${f.i}" name="${f.i}" data-type="${f.t}" data-bind="${f.bind || f.i}"></input > <label for="${f.i}>${f.l || f.i}</label>`; }
|
||||
function createDropdown(f) {
|
||||
let dd = `<select id="id_${f.i}" name="${f.i}" data-type="${f.t}"" data-bind="${f.bind || f.i}">`;
|
||||
for (let i = 0; i < f.o.length; i++) {
|
||||
let o = f.o[i];
|
||||
dd += `<option value="${o.v}">${o.n}</option>`
|
||||
}
|
||||
dd += '</select>';
|
||||
dd += `<label for="${f.i}>${f.l || f.i}</label>`;
|
||||
return dd;
|
||||
}
|
||||
function createFields() {
|
||||
let shtml = '<div id="divAttrs">';
|
||||
for (let i = 0; i < fields.length; i++) {
|
||||
let f = fields[i];
|
||||
shtml += '<div class="cfg-attr"><div class="cfg-attr-field">'
|
||||
switch (f.t) {
|
||||
case 'bool':
|
||||
shtml += createCheckbox(f);
|
||||
break;
|
||||
case 'uint8_t':
|
||||
case 'int8_t':
|
||||
case 'uint16_t':
|
||||
case 'float':
|
||||
case 'int8_t':
|
||||
shtml += typeof f.o === 'undefined' ? createNumberField(f) : createDropdown(f);
|
||||
break;
|
||||
}
|
||||
shtml += `</div><div class="cfg-attr-desc">${f.d}</div>`
|
||||
shtml += '</div>';
|
||||
}
|
||||
shtml += '</div>';
|
||||
document.getElementById('divFields').innerHTML = shtml;
|
||||
}
|
||||
function serviceError(el, err) {
|
||||
let msg = '';
|
||||
if (typeof err === 'string' && err.startsWith('{')) {
|
||||
let e = JSON.parse(err);
|
||||
if (typeof e !== 'undefined' && typeof e.desc === 'string') msg = e.desc;
|
||||
else msg = err;
|
||||
}
|
||||
else if (typeof err === 'string') {
|
||||
msg = err;
|
||||
}
|
||||
else if (typeof err === 'number') {
|
||||
switch (err) {
|
||||
case 404:
|
||||
msg = `404: Service not found`;
|
||||
break;
|
||||
default:
|
||||
msg = `${err}: Network HTTP Error`;
|
||||
break;
|
||||
}
|
||||
}
|
||||
else if (typeof err !== 'undefined') {
|
||||
console.log(err);
|
||||
if (typeof err.desc === 'string') msg = typeof err.desc !== 'undefined' ? err.desc : err.message;
|
||||
}
|
||||
return errorMessage(el, msg);
|
||||
}
|
||||
function errorMessage(el, msg) {
|
||||
let div = document.createElement('div');
|
||||
div.innerHTML = '<div class="innerError">' + msg + '</div><button type="button" onclick="clearErrors();">Close</button></div>';
|
||||
div.classList.add('errorMessage');
|
||||
el.appendChild(div);
|
||||
return div;
|
||||
}
|
||||
function getJSON(url, cb) {
|
||||
let xhr = new XMLHttpRequest();
|
||||
xhr.open('GET', baseUrl + url, true);
|
||||
xhr.responseType = 'json';
|
||||
xhr.onload = () => {
|
||||
let status = xhr.status;
|
||||
cb(status === 200 ? null : status, xhr.response);
|
||||
}
|
||||
xhr.onerror = (evt) => {
|
||||
cb(xhr.status || 500, xhr.statusText);
|
||||
}
|
||||
xhr.send();
|
||||
}
|
||||
function putJSON(url, data, cb) {
|
||||
let xhr = new XMLHttpRequest();
|
||||
console.log({ put: baseUrl + url, data: data });
|
||||
xhr.open('PUT', baseUrl + url, true);
|
||||
xhr.responseType = 'json';
|
||||
xhr.setRequestHeader('Content-Type', 'application/json; charset=utf-8');
|
||||
xhr.setRequestHeader('Accept', 'application/json');
|
||||
xhr.onload = () => {
|
||||
let status = xhr.status;
|
||||
cb(status === 200 ? null : status, xhr.response);
|
||||
}
|
||||
xhr.onerror = (evt) => {
|
||||
cb(xhr.status || 500, xhr.statusText);
|
||||
}
|
||||
xhr.send(JSON.stringify(data));
|
||||
}
|
||||
|
||||
function waitMessage(el) {
|
||||
let div = document.createElement('div');
|
||||
div.innerHTML = '<div class="lds-roller"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div></div>';
|
||||
div.classList.add('waitoverlay');
|
||||
el.appendChild(div);
|
||||
return div;
|
||||
}
|
||||
function clearErrors() {
|
||||
let errors = document.querySelectorAll('div.errorMessage');
|
||||
if (errors && errors.length > 0) errors.forEach((el) => { el.remove(); });
|
||||
}
|
||||
function saveSettings() {
|
||||
let elems = document.querySelectorAll('[data-bind]');
|
||||
let obj = {};
|
||||
for (let i = 0; i < elems.length; i++) {
|
||||
let el = elems[i];
|
||||
switch (el.dataset.type) {
|
||||
case 'bool':
|
||||
obj[el.dataset.bind] = el.checked;
|
||||
break;
|
||||
case 'float':
|
||||
obj[el.dataset.bind] = parseFloat(el.value);
|
||||
break;
|
||||
default:
|
||||
obj[el.dataset.bind] = parseInt(el.value, 10);
|
||||
break;
|
||||
}
|
||||
}
|
||||
let overlay = waitMessage(document.getElementById('divFields'));
|
||||
putJSON('/setRadioConfig', { config: obj }, (err, radio) => {
|
||||
overlay.remove();
|
||||
if (err) {
|
||||
console.log(err);
|
||||
serviceError(document.getElementById('divFields'), err);
|
||||
}
|
||||
else {
|
||||
console.log(radio);
|
||||
}
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="divFields"></div>
|
||||
<div class="button-container">
|
||||
<button id="btnSaveSetting" type="button" style="display:inline-block;width:44%" onclick="resetDefaults();">
|
||||
Reset Defaults
|
||||
</button>
|
||||
<button id="btnSaveSetting" type="button" style="display:inline-block;width:44%" onclick="saveSettings();">
|
||||
Save Radio Settings
|
||||
</button>
|
||||
|
||||
</div>
|
||||
<script type="text/javascript">
|
||||
createFields();
|
||||
loadConfig();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
620
data/icons.css
Normal file
620
data/icons.css
Normal file
|
|
@ -0,0 +1,620 @@
|
|||
i[class*="icss-"] {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
font-style: normal;
|
||||
background-color: currentColor;
|
||||
box-sizing: border-box;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
i[class*="icss-"]:before,
|
||||
i[class*="icss-"]:after {
|
||||
content: "";
|
||||
border-width: 0;
|
||||
position: absolute;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* Size */
|
||||
[class*="icss-"].xxsmall {
|
||||
font-size: .45em;
|
||||
}
|
||||
|
||||
[class*="icss-"].xsmall {
|
||||
font-size: .5em;
|
||||
}
|
||||
|
||||
[class*="icss-"].small {
|
||||
font-size: .65em;
|
||||
}
|
||||
|
||||
[class*="icss-"].x1_5 {
|
||||
font-size: 1.5em;
|
||||
}
|
||||
|
||||
[class*="icss-"].x2 {
|
||||
font-size: 2em;
|
||||
}
|
||||
|
||||
[class*="icss-"].x2_5 {
|
||||
font-size: 2.5em;
|
||||
}
|
||||
|
||||
[class*="icss-"].x3 {
|
||||
font-size: 3em;
|
||||
}
|
||||
|
||||
[class*="icss-"].x4 {
|
||||
font-size: 4em;
|
||||
}
|
||||
|
||||
[class*="icss-"].x5 {
|
||||
font-size: 5em;
|
||||
}
|
||||
|
||||
/* Align text-bottom */
|
||||
i[class*="icss-"].bottom {
|
||||
vertical-align: text-bottom;
|
||||
}
|
||||
|
||||
/* flip */
|
||||
.flip {
|
||||
transform: scaleX(-1);
|
||||
}
|
||||
|
||||
/* rotate */
|
||||
i[class*="icss-"].rot10 {
|
||||
transform: rotate(10deg);
|
||||
}
|
||||
|
||||
i[class*="icss-"].rot-10 {
|
||||
transform: rotate(-10deg);
|
||||
}
|
||||
|
||||
i[class*="icss-"].rot20 {
|
||||
transform: rotate(20deg);
|
||||
}
|
||||
|
||||
i[class*="icss-"].rot-20 {
|
||||
transform: rotate(-20deg);
|
||||
}
|
||||
|
||||
i[class*="icss-"].rot45 {
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
i[class*="icss-"].rot-45 {
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
|
||||
i[class*="icss-"].rot90 {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
i[class*="icss-"].rot-90 {
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
|
||||
i[class*="icss-"].rot180 {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
i[class*="icss-"].rot-180 {
|
||||
transform: rotate(-180deg);
|
||||
}
|
||||
|
||||
/* force animation */
|
||||
i.icss-anim,
|
||||
i.icss-anim:before,
|
||||
i.icss-anim:after {
|
||||
transition: all 1s;
|
||||
}
|
||||
|
||||
/* Spin */
|
||||
.icss-spin {
|
||||
animation: spin 2s infinite linear;
|
||||
}
|
||||
|
||||
.icss-pulse {
|
||||
animation: spin 1s infinite steps(8);
|
||||
}
|
||||
|
||||
.icss-spin-hover:hover {
|
||||
animation: spin 2s infinite linear;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: rotate(359deg);
|
||||
}
|
||||
}
|
||||
|
||||
/* BELL */
|
||||
@keyframes ring {
|
||||
0% {
|
||||
transform: rotate(-15deg)
|
||||
}
|
||||
|
||||
2% {
|
||||
transform: rotate(15deg)
|
||||
}
|
||||
|
||||
4% {
|
||||
transform: rotate(-18deg)
|
||||
}
|
||||
|
||||
6% {
|
||||
transform: rotate(18deg)
|
||||
}
|
||||
|
||||
8% {
|
||||
transform: rotate(-22deg)
|
||||
}
|
||||
|
||||
10% {
|
||||
transform: rotate(22deg)
|
||||
}
|
||||
|
||||
12% {
|
||||
transform: rotate(-18deg)
|
||||
}
|
||||
|
||||
14% {
|
||||
transform: rotate(18deg)
|
||||
}
|
||||
|
||||
16% {
|
||||
transform: rotate(-12deg)
|
||||
}
|
||||
|
||||
18% {
|
||||
transform: rotate(12deg)
|
||||
}
|
||||
|
||||
20%,100% {
|
||||
transform: rotate(0deg)
|
||||
}
|
||||
}
|
||||
|
||||
.icss-ring {
|
||||
animation: ring 2s infinite ease;
|
||||
}
|
||||
|
||||
.icss-ring-hover:hover {
|
||||
animation: ring 2s infinite ease;
|
||||
}
|
||||
|
||||
/* VERTICAL */
|
||||
@keyframes vertical {
|
||||
0% {
|
||||
transform: translate(0,-3px)
|
||||
}
|
||||
|
||||
4% {
|
||||
transform: translate(0,3px)
|
||||
}
|
||||
|
||||
8% {
|
||||
transform: translate(0,-3px)
|
||||
}
|
||||
|
||||
12% {
|
||||
transform: translate(0,3px)
|
||||
}
|
||||
|
||||
16% {
|
||||
transform: translate(0,-3px)
|
||||
}
|
||||
|
||||
20% {
|
||||
transform: translate(0,3px)
|
||||
}
|
||||
|
||||
22%,100% {
|
||||
transform: translate(0,0)
|
||||
}
|
||||
}
|
||||
|
||||
.icss-vibes,
|
||||
.icss-vibes-hover:hover {
|
||||
animation: vertical 2s ease infinite;
|
||||
}
|
||||
|
||||
/* HORIZONTAL */
|
||||
@keyframes horizontal {
|
||||
0% {
|
||||
transform: translate(0,0)
|
||||
}
|
||||
|
||||
6% {
|
||||
transform: translate(5px,0)
|
||||
}
|
||||
|
||||
12% {
|
||||
transform: translate(0,0)
|
||||
}
|
||||
|
||||
18% {
|
||||
transform: translate(5px,0)
|
||||
}
|
||||
|
||||
24% {
|
||||
transform: translate(0,0)
|
||||
}
|
||||
|
||||
30% {
|
||||
transform: translate(5px,0)
|
||||
}
|
||||
|
||||
36%,100% {
|
||||
transform: translate(0,0)
|
||||
}
|
||||
}
|
||||
|
||||
.icss-shake,
|
||||
.icss-shake-hover:hover {
|
||||
animation: horizontal 2s ease infinite;
|
||||
}
|
||||
|
||||
/* TADA */
|
||||
@keyframes tada {
|
||||
0% {
|
||||
transform: scale(1)
|
||||
}
|
||||
|
||||
10%,20% {
|
||||
transform: scale(.9) rotate(-8deg);
|
||||
}
|
||||
|
||||
30%,50%,70% {
|
||||
transform: scale(1.3) rotate(8deg)
|
||||
}
|
||||
|
||||
40%,60% {
|
||||
transform: scale(1.3) rotate(-8deg)
|
||||
}
|
||||
|
||||
80%,100% {
|
||||
transform: scale(1) rotate(0)
|
||||
}
|
||||
}
|
||||
|
||||
.icss-tada,
|
||||
.icss-tada-hover:hover {
|
||||
animation: tada 2s linear infinite;
|
||||
}
|
||||
|
||||
/* Reverse animation */
|
||||
.icss-reverse {
|
||||
animation-direction: reverse;
|
||||
}
|
||||
|
||||
[class*="-hover"].icss-reverse:hover {
|
||||
animation-direction: reverse;
|
||||
}
|
||||
|
||||
/* Stack icons */
|
||||
.icss-stack {
|
||||
position: relative;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.icss-stack i[class*="icss-"] {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-.5em, -.5em);
|
||||
}
|
||||
|
||||
.icss-stack i[class*="icss-"].bottom {
|
||||
bottom: 0;
|
||||
top: auto;
|
||||
}
|
||||
|
||||
/* shadow icon */
|
||||
.icss-shadow {
|
||||
position: relative;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.icss-shadow i[class*="icss-"] {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-.5em, -.5em);
|
||||
}
|
||||
|
||||
.icss-shadow i[class*="icss-"]:first-child {
|
||||
top: 54%;
|
||||
left: 54%;
|
||||
}
|
||||
i.icss-edit {
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
background-color: transparent;
|
||||
border-radius: 50% 45% 50% 35%;
|
||||
overflow: hidden;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
i.icss-edit:before {
|
||||
width: .3em;
|
||||
height: .8em;
|
||||
border: .15em solid transparent;
|
||||
border-top: .24em solid currentColor;
|
||||
transform: rotate(45deg) translate(-50%);
|
||||
transform-origin: 0 0;
|
||||
box-shadow: 0 -.05em, .24em -.8em, -.24em -.8em, 0 -1.5em;
|
||||
clip: rect(-.9em .3em 1em 0);
|
||||
left: .25em;
|
||||
top: .75em;
|
||||
}
|
||||
|
||||
i.icss-edit:after {
|
||||
width: .1em;
|
||||
height: 0;
|
||||
background-color: transparent;
|
||||
transform: translate(-50%, -50%);
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
}
|
||||
|
||||
i.icss-trash {
|
||||
width: .68em;
|
||||
height: .9em;
|
||||
background-color: transparent;
|
||||
border-width: .1em .1em;
|
||||
border-style: solid;
|
||||
border-radius: .05em;
|
||||
margin: .1em .15em 0;
|
||||
}
|
||||
|
||||
i.icss-trash:before {
|
||||
border-style: solid;
|
||||
border-width: .1em;
|
||||
top: -.23em;
|
||||
left: 50%;
|
||||
border-radius: .1em;
|
||||
width: .275em;
|
||||
height: 1.03em;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
i.icss-trash:after {
|
||||
border-width: .1em .43em;
|
||||
border-style: solid;
|
||||
left: 50%;
|
||||
top: -.05em;
|
||||
border-radius: .07em;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
i.icss-gear {
|
||||
width: .5em;
|
||||
height: .5em;
|
||||
position: relative;
|
||||
border-radius: 100%;
|
||||
background-color: transparent;
|
||||
border-width: .07em;
|
||||
border-style: solid;
|
||||
border-color: transparent;
|
||||
margin: .25em;
|
||||
box-shadow: 0 0 0 .1em, inset 0 0 0 .3em;
|
||||
}
|
||||
|
||||
i.icss-gear:before {
|
||||
width: .18em;
|
||||
height: .18em;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
box-shadow: .41em 0, -.41em 0, 0 .41em, 0 -.41em;
|
||||
}
|
||||
|
||||
i.icss-gear:after {
|
||||
width: .18em;
|
||||
height: .18em;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%) rotate(45deg);
|
||||
box-shadow: .42em 0, -.42em 0, 0 .42em, 0 -.42em;
|
||||
}
|
||||
i.icss-gears {
|
||||
width: .5em;
|
||||
height: .5em;
|
||||
position: relative;
|
||||
border-radius: 100%;
|
||||
border-width: .063em;
|
||||
border-style: solid;
|
||||
border-color: transparent;
|
||||
margin: .36em .532em .08em .1em;
|
||||
box-shadow: .51em -.32em 0 -.06em;
|
||||
}
|
||||
|
||||
i.icss-gears:before {
|
||||
width: .7em;
|
||||
height: .7em;
|
||||
border-radius: 100%;
|
||||
background: linear-gradient(0deg,transparent 39%,currentcolor 39%,currentcolor 61%, transparent 61%), linear-gradient(60deg,transparent 42%, currentcolor 42%,currentcolor 58%, transparent 58%), linear-gradient(120deg,transparent 42%, currentcolor 42%,currentcolor 58%, transparent 58%);
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
i.icss-gears:after {
|
||||
width: .55em;
|
||||
height: .55em;
|
||||
border-radius: 100%;
|
||||
background: linear-gradient(0deg,transparent 37%,currentcolor 37%,currentcolor 63%, transparent 63%), linear-gradient(60deg,transparent 40%, currentcolor 40%,currentcolor 60%, transparent 60%), linear-gradient(120deg,transparent 40%, currentcolor 40%,currentcolor 60%, transparent 60%);
|
||||
top: -.135em;
|
||||
left: .695em;
|
||||
transform: translate(-50%, -50%) rotate(25deg);
|
||||
}
|
||||
i.icss-somfy-down {
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
border-radius: .07em;
|
||||
background-color: transparent;
|
||||
margin: 0;
|
||||
}
|
||||
i.icss-somfy-down:before {
|
||||
height: .6em;
|
||||
width: .6em;
|
||||
border: .15em solid currentColor;
|
||||
border-color: currentColor currentColor transparent transparent;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%,-70%) rotate(135deg);
|
||||
}
|
||||
i.icss-somfy-up {
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
border-radius: .07em;
|
||||
background-color: transparent;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
i.icss-somfy-up:before {
|
||||
height: .6em;
|
||||
width: .6em;
|
||||
border: .15em solid currentColor;
|
||||
border-color: currentColor currentColor transparent transparent;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%,-30%) rotate(-45deg);
|
||||
}
|
||||
i.icss-home {
|
||||
width: .8em;
|
||||
height: .45em;
|
||||
background-color: transparent;
|
||||
border-width: 0;
|
||||
border-style: solid;
|
||||
border-radius: 0 0 .02em .02em;
|
||||
box-shadow: inset .285em .1em, inset -.285em .1em;
|
||||
margin: .55em .1em 0;
|
||||
}
|
||||
|
||||
i.icss-home:before {
|
||||
border-width: 0 .4em .4em;
|
||||
border-style: solid;
|
||||
border-color: currentColor transparent;
|
||||
transform: translateX(-50%);
|
||||
box-shadow: 0 .1em;
|
||||
top: -.4em;
|
||||
left: 50%;
|
||||
}
|
||||
|
||||
i.icss-home:after {
|
||||
width: .76em;
|
||||
height: .76em;
|
||||
border-width: 0.065em 0 0 0.065em;
|
||||
border-style: solid;
|
||||
transform: translateX(-50%) rotate(45deg);
|
||||
top: -0.4em;
|
||||
left: 50%;
|
||||
}
|
||||
i.icss-window {
|
||||
width: 1.1em;
|
||||
height: .75em;
|
||||
background-color: transparent;
|
||||
border: .05em solid transparent;
|
||||
border-width: 0 .1em;
|
||||
box-shadow: inset 0 0 0 .07em, inset 0 .19em 0 .07em, 0 .07em 0;
|
||||
margin: .2em 0 .07em;
|
||||
}
|
||||
|
||||
i.icss-window:before {
|
||||
width: 1.1em;
|
||||
height: .26em;
|
||||
border-bottom: .1em solid transparent;
|
||||
box-shadow: inset 0 1em, 0 .48em 0 -.1em;
|
||||
top: -.2em;
|
||||
left: -.1em;
|
||||
}
|
||||
|
||||
i.icss-window:after {
|
||||
width: 0.06em;
|
||||
height: .7em;
|
||||
background-color: currentColor;
|
||||
left: .43em;
|
||||
}
|
||||
i.icss-window-shade {
|
||||
width: 1.1em;
|
||||
height: .75em;
|
||||
background-color: transparent;
|
||||
border: .05em solid transparent;
|
||||
border-width: 0 .1em;
|
||||
box-shadow: inset 0 0 0 .01em, inset 0 .01em 0 .07em, 0 .07em 0;
|
||||
margin: .2em 0 .07em;
|
||||
}
|
||||
|
||||
i.icss-window-shade:before {
|
||||
width: 1.1em;
|
||||
height: .2em;
|
||||
border-bottom: .1em solid transparent;
|
||||
box-shadow: inset 0 1em, 0 0em 0 -.1em;
|
||||
top: -.15em;
|
||||
left: -.1em;
|
||||
}
|
||||
|
||||
i.icss-window-shade:after {
|
||||
width: calc(100% - .05em);
|
||||
height: var(--shade-position, 0%);
|
||||
|
||||
left: 0.025em;
|
||||
top: 0.025em;
|
||||
border-bottom: solid 0.025em gray;
|
||||
background-image: repeating-conic-gradient(var(--shade-color, currentColor) 0% 25%, rgba(71, 212, 255, 0) 0% 50%);
|
||||
background-position: 0 0, 100% 100%;
|
||||
background-size: 0.05em 0.05em;
|
||||
background-color: rgba(71, 212, 255, 0);
|
||||
}
|
||||
i.icss-upload {
|
||||
width: 1em;
|
||||
height: .6em;
|
||||
background-color: transparent;
|
||||
border-width: 0 .2em .3em;
|
||||
border-style: solid;
|
||||
border-radius: .03em;
|
||||
margin: .4em 0 0;
|
||||
}
|
||||
i.icss-upload:before {
|
||||
height: .5em;
|
||||
border-style: solid;
|
||||
border-width: 0 .25em .25em;
|
||||
border-color: transparent;
|
||||
border-bottom-color: currentColor;
|
||||
background-color: transparent;
|
||||
box-shadow: 0em .35em 0 -.13em;
|
||||
top: -.6em;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
i.icss-upload:after {
|
||||
}
|
||||
i.icss-file {
|
||||
width: .8em;
|
||||
height: 1em;
|
||||
background-color: transparent;
|
||||
border-width: .065em;
|
||||
border-style: solid;
|
||||
border-radius: .05em .34em .05em .05em;
|
||||
}
|
||||
|
||||
i.icss-file:before {
|
||||
border-style: solid;
|
||||
border-width: .2em;
|
||||
left: .275em;
|
||||
border-radius: .1em;
|
||||
border-color: transparent;
|
||||
border-right-color: currentColor;
|
||||
transform: rotate(-45deg);
|
||||
top: .02em;
|
||||
}
|
||||
1361
data/index.html
Normal file
1361
data/index.html
Normal file
File diff suppressed because it is too large
Load diff
514
data/main.css
Normal file
514
data/main.css
Normal file
|
|
@ -0,0 +1,514 @@
|
|||
:root {
|
||||
--shade-color: #00bcd4;
|
||||
}
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
input[type="range"] {
|
||||
accent-color: #00bcd4;
|
||||
outline:none;
|
||||
}
|
||||
input[type="range"]:active {
|
||||
outline: dotted 1px silver;
|
||||
}
|
||||
body {
|
||||
color: #434343;
|
||||
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
|
||||
font-size: 14px;
|
||||
background-color: #eeeeee;
|
||||
margin-top: 77px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.container {
|
||||
margin: 0 auto;
|
||||
max-width: 450px;
|
||||
padding: 20px;
|
||||
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
h1 {
|
||||
text-align: center;
|
||||
margin-bottom: 10px;
|
||||
margin-top: 0px;
|
||||
color: #939393;
|
||||
font-size: 28px;
|
||||
}
|
||||
form {
|
||||
margin-top:-18px;
|
||||
}
|
||||
|
||||
form .field-group {
|
||||
box-sizing: border-box;
|
||||
clear: both;
|
||||
padding: 4px 0;
|
||||
position: relative;
|
||||
margin: 1px 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
form .field-group1 {
|
||||
box-sizing: border-box;
|
||||
clear: both;
|
||||
padding: 4px 0;
|
||||
position: relative;
|
||||
margin: 1px 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
form .field-group1 > span {
|
||||
color: #757575;
|
||||
display: inline-block;
|
||||
margin: 0 0 5px 0;
|
||||
padding: 5px 0 0;
|
||||
position: relative;
|
||||
word-wrap: break-word;
|
||||
font-size: 15px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
form .field-group > label {
|
||||
display: block;
|
||||
margin: 0px;
|
||||
padding: 3px 0 0;
|
||||
position: relative;
|
||||
word-wrap: break-word;
|
||||
line-height:4px;
|
||||
font-size:14px;
|
||||
margin-bottom:10px;
|
||||
margin-top:-10px;
|
||||
color:#00bcd4;
|
||||
}
|
||||
form .field-group1 > div.field-group {
|
||||
display:inline-block;
|
||||
width:auto;
|
||||
}
|
||||
::placeholder {
|
||||
opacity: .5;
|
||||
}
|
||||
|
||||
input[type=password],
|
||||
input[type=number],
|
||||
input[type=text] {
|
||||
font-size: 15px;
|
||||
margin-bottom: 14px;
|
||||
-webkit-appearance: none;
|
||||
background: #fafafa;
|
||||
color: #636363;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
border-top: none;
|
||||
border-left: none;
|
||||
border-right: none;
|
||||
border-bottom: 1px solid #00bcd4;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
select {
|
||||
font-size: 15px;
|
||||
-webkit-appearance: none;
|
||||
background: #fafafa;
|
||||
color: #636363;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
border-top: none;
|
||||
border-left: none;
|
||||
border-right: none;
|
||||
border-bottom: 1px solid #00bcd4;
|
||||
background-color: transparent;
|
||||
margin-bottom:14px;
|
||||
}
|
||||
|
||||
form .field-group input[type=password],
|
||||
form .field-group input[type=number],
|
||||
form .field-group input[type=text] {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
select:focus,
|
||||
input[type=password]:focus,
|
||||
input[type=number]:focus,
|
||||
input[type=text]:focus {
|
||||
border-color: #4C669F;
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
.button-container {
|
||||
box-sizing: border-box;
|
||||
clear: both;
|
||||
margin: 1px 0 0;
|
||||
padding: 4px 0;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
button[type=button],
|
||||
button[type=submit] {
|
||||
background: #00bcd4;
|
||||
border: none;
|
||||
border-radius: 30px;
|
||||
color: #ffffff;
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
font-weight: bold;
|
||||
font-size: 14px;
|
||||
padding: 10px 0;
|
||||
margin-top: 10px;
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
width: 100%;
|
||||
-webkit-transition: background 250ms ease;
|
||||
-moz-transition: background 250ms ease;
|
||||
-o-transition: background 250ms ease;
|
||||
transition: background 250ms ease;
|
||||
}
|
||||
|
||||
button:active {
|
||||
opacity: .7;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: #00bcd4;
|
||||
position: fixed;
|
||||
right: 12px;
|
||||
font-size: 18px;
|
||||
bottom: 7px;
|
||||
border-bottom: 1px solid #00bcd4;
|
||||
}
|
||||
div.errorMessage {
|
||||
position:absolute;
|
||||
left:0px;
|
||||
top:0px;
|
||||
width:100%;
|
||||
height:100%;
|
||||
color:white;
|
||||
display:flex;
|
||||
flex-wrap:wrap;
|
||||
background:gray;
|
||||
opacity:.9;
|
||||
padding:10px;
|
||||
align-items:center;
|
||||
align-content:center;
|
||||
font-size:32px;
|
||||
border-radius:5px;
|
||||
}
|
||||
div.errorMessage > div {
|
||||
padding:10px;
|
||||
}
|
||||
div.instructions {
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
top: 0px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
color: white;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
background: gray;
|
||||
opacity: .9;
|
||||
padding: 10px;
|
||||
align-items: center;
|
||||
align-content: center;
|
||||
font-size: 20px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
div.instructions > div {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.tab-container {
|
||||
font-size:20px;
|
||||
text-align:center;
|
||||
}
|
||||
.tab-container > span {
|
||||
margin-left: 5px;
|
||||
margin-right: 5px;
|
||||
padding-bottom: 3px;
|
||||
display: inline-block;
|
||||
border-bottom: 1px solid #00bcd4;
|
||||
color: #00bcd4;
|
||||
cursor:pointer;
|
||||
}
|
||||
.tab-container > span.selected {
|
||||
border-bottom-width: 3px;
|
||||
font-weight: bold;
|
||||
}
|
||||
fieldset {
|
||||
display: block;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
padding: 25px;
|
||||
margin-top: 20px;
|
||||
position: relative;
|
||||
}
|
||||
input[type=checkbox] {
|
||||
width:20px;
|
||||
height:20px;
|
||||
vertical-align:middle;
|
||||
}
|
||||
div.field-group1.inputPin {
|
||||
margin-top:-10px;
|
||||
}
|
||||
legend {
|
||||
border: 1px solid #ccc;
|
||||
border-bottom: 0;
|
||||
border-radius: 5px 5px 0 0;
|
||||
padding: 8px 18px 0;
|
||||
position: relative;
|
||||
top: -14px;
|
||||
}
|
||||
|
||||
div.wifiSignal {
|
||||
white-space: nowrap;
|
||||
height: 37px;
|
||||
cursor: pointer;
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
}
|
||||
|
||||
div.wifiSignal:hover {
|
||||
background: #00bcd4;
|
||||
color: white;
|
||||
}
|
||||
|
||||
div.wifiSignal > span {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
span.ssid {
|
||||
width: calc(100% - 50px);
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
#divAps {
|
||||
max-height: 200px;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
height: 150px;
|
||||
padding-right: 7px;
|
||||
}
|
||||
|
||||
div.signal {
|
||||
margin: 0px;
|
||||
color: lawngreen;
|
||||
height: 32px;
|
||||
width: 32px;
|
||||
float: right;
|
||||
}
|
||||
|
||||
span.strength {
|
||||
position: relative;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.wave {
|
||||
display: inline-block;
|
||||
border: 4px solid transparent;
|
||||
border-top-color: currentColor;
|
||||
border-radius: 50%;
|
||||
border-style: solid;
|
||||
margin: 2px;
|
||||
}
|
||||
|
||||
.waveStrength-4 .wv4.wave,
|
||||
.waveStrength-3 .wv4.wave,
|
||||
.waveStrength-3 .wv3.wave,
|
||||
.waveStrength-2 .wv4.wave,
|
||||
.waveStrength-2 .wv3.wave,
|
||||
.waveStrength-2 .wv2.wave,
|
||||
.waveStrength-1 .wv4.wave,
|
||||
.waveStrength-1 .wv3.wave,
|
||||
.waveStrength-1 .wv2.wave,
|
||||
.waveStrength-1 .wv1.wave,
|
||||
.waveStrength-0 .wv4.wave,
|
||||
.waveStrength-0 .wv3.wave,
|
||||
.waveStrength-0 .wv2.wave,
|
||||
.waveStrength-0 .wv1.wave,
|
||||
.waveStrength-0 .wv0.wave {
|
||||
border-top-color: #eee;
|
||||
}
|
||||
button.disabled {
|
||||
opacity:.3;
|
||||
}
|
||||
div.waitoverlay {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
top:0px;
|
||||
left:0px;
|
||||
background:rgba(227, 226, 230, 0.46);
|
||||
cursor:no-drop;
|
||||
z-index:20000;
|
||||
}
|
||||
div.waitoverlay > .lds-roller {
|
||||
z-index:1000;
|
||||
opacity:1;
|
||||
}
|
||||
.lds-roller {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
}
|
||||
.lds-roller div {
|
||||
animation: lds-roller 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
|
||||
transform-origin: 40px 40px;
|
||||
}
|
||||
.lds-roller div:after {
|
||||
content: " ";
|
||||
display: block;
|
||||
position: absolute;
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
border-radius: 50%;
|
||||
background: gray;
|
||||
margin: -4px 0 0 -4px;
|
||||
}
|
||||
.lds-roller div:nth-child(1) {
|
||||
animation-delay: -0.036s;
|
||||
}
|
||||
.lds-roller div:nth-child(1):after {
|
||||
top: 63px;
|
||||
left: 63px;
|
||||
}
|
||||
|
||||
.lds-roller div:nth-child(2) {
|
||||
animation-delay: -0.072s;
|
||||
}
|
||||
.lds-roller div:nth-child(2):after {
|
||||
top: 68px;
|
||||
left: 56px;
|
||||
}
|
||||
|
||||
.lds-roller div:nth-child(3) {
|
||||
animation-delay: -0.108s;
|
||||
}
|
||||
.lds-roller div:nth-child(3):after {
|
||||
top: 71px;
|
||||
left: 48px;
|
||||
}
|
||||
|
||||
.lds-roller div:nth-child(4) {
|
||||
animation-delay: -0.144s;
|
||||
}
|
||||
.lds-roller div:nth-child(4):after {
|
||||
top: 72px;
|
||||
left: 40px;
|
||||
}
|
||||
|
||||
.lds-roller div:nth-child(5) {
|
||||
animation-delay: -0.18s;
|
||||
}
|
||||
.lds-roller div:nth-child(5):after {
|
||||
top: 71px;
|
||||
left: 32px;
|
||||
}
|
||||
|
||||
.lds-roller div:nth-child(6) {
|
||||
animation-delay: -0.216s;
|
||||
}
|
||||
.lds-roller div:nth-child(6):after {
|
||||
top: 68px;
|
||||
left: 24px;
|
||||
}
|
||||
|
||||
.lds-roller div:nth-child(7) {
|
||||
animation-delay: -0.252s;
|
||||
}
|
||||
.lds-roller div:nth-child(7):after {
|
||||
top: 63px;
|
||||
left: 17px;
|
||||
}
|
||||
.lds-roller div:nth-child(8) {
|
||||
animation-delay: -0.288s;
|
||||
}
|
||||
|
||||
.lds-roller div:nth-child(8):after {
|
||||
top: 56px;
|
||||
left: 12px;
|
||||
}
|
||||
@keyframes lds-roller {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
.radioPins > select {
|
||||
width: 70px;
|
||||
text-align:center;
|
||||
}
|
||||
.radioPins > label {
|
||||
text-align:center;
|
||||
}
|
||||
.somfyShade {
|
||||
text-align:center;
|
||||
}
|
||||
.button-outline {
|
||||
background-color: #00bcd4;
|
||||
border-radius:50%;
|
||||
padding:3px 5px 5px 5px;
|
||||
margin-left:2px;
|
||||
margin-right:2px;
|
||||
display:inline-block;
|
||||
font-size:1.5em;
|
||||
color:white;
|
||||
}
|
||||
.shade-name {
|
||||
text-align:left;
|
||||
width: 124px;
|
||||
padding-left: 2px;
|
||||
padding-right: 2px;
|
||||
display: inline-block;
|
||||
text-overflow: ellipsis;
|
||||
overflow:hidden;
|
||||
}
|
||||
.shade-address {
|
||||
width:77px;
|
||||
padding-left:2px;
|
||||
padding-right:2px;
|
||||
text-overflow:ellipsis;
|
||||
overflow:hidden;
|
||||
display:inline-block;
|
||||
}
|
||||
.progress-bar {
|
||||
display:block;
|
||||
width:100%;
|
||||
background:white;
|
||||
border-radius:calc(1em / 2);
|
||||
height:1em;
|
||||
overflow:hidden;
|
||||
position:relative;
|
||||
}
|
||||
.progress-bar::after {
|
||||
content: attr(data-progress);
|
||||
display: block;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
background: none;
|
||||
font-size: .7em;
|
||||
vertical-align: middle;
|
||||
margin-top: .15em;
|
||||
color: darkslategray;
|
||||
top:0px;
|
||||
left:0px;
|
||||
}
|
||||
.progress-bar::before {
|
||||
content: "";
|
||||
width: var(--progress);
|
||||
text-align: right;
|
||||
background-color: #00bcd4;
|
||||
border-radius: .5em;
|
||||
height: 1em;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue