mirror of
https://github.com/arendst/Tasmota.git
synced 2025-07-23 02:36:35 +00:00
Add CSS tab colors and unify LwDecode GUI
This commit is contained in:
Theo Arends
parent
4b74c71f19
commit
063ea6af3e
@ -140,10 +140,6 @@ lwdecode = lwdecode_cls()
|
||||
|
||||
import webserver
|
||||
class webPageLoRaWAN : Driver
|
||||
def sendNodeButton(node)
|
||||
webserver.content_send(f"<td><button onclick='selNode({node})' id='n{node}' class='button inactive' style='width:41px'>{node}</button></td>")
|
||||
end
|
||||
|
||||
def web_add_config_button()
|
||||
webserver.content_send("<p><form id=ac action='lrw' style='display: block;' method='get'><button>LoRaWAN</button></form></p>")
|
||||
end
|
||||
@ -168,18 +164,21 @@ class webPageLoRaWAN : Driver
|
||||
webserver.content_start("LoRaWAN") #- title of the web page -#
|
||||
webserver.content_send_style() #- send standard Tasmota styles -#
|
||||
webserver.content_send(
|
||||
# "<style>.inactive{background:#10537c;}.active{background:#1fa3ec;}</style>"
|
||||
"<style>.inactive{background:var(--c_btnoff);}.active{background:var(--c_btn);}</style>"
|
||||
# "<h2>LoRaWAN End Devices</h2>"
|
||||
"<style>"
|
||||
".tl{float:left;border-radius:0;border:1px solid var(--c_frm);padding:1px;width:12.5%;}"
|
||||
".tl:hover{background:var(--c_frm);}"
|
||||
".inactive{background:var(--c_tab);color:var(--c_tabtxt);font-weight:normal;}"
|
||||
".active{background:var(--c_frm);color:var(--c_txt);font-weight:bold;}"
|
||||
"</style>"
|
||||
"<script>"
|
||||
"function selNode(n){"
|
||||
"var i;var d=4;"
|
||||
"var i;"
|
||||
"var e=document.getElementById('n'+n);"
|
||||
"var o=document.getElementsByClassName('button active');"
|
||||
"var o=document.getElementsByClassName('tl active');"
|
||||
"if(o.length){"
|
||||
"for(i=0;i<o.length;i++){"
|
||||
"o[i].classList.add('inactive');"
|
||||
"o[i].classList.remove('active');"
|
||||
"o[i].classList.add('inactive');"
|
||||
"o[i].classList.remove('active');"
|
||||
"}"
|
||||
"}"
|
||||
"e.classList.add('active');"
|
||||
@ -194,15 +193,16 @@ class webPageLoRaWAN : Driver
|
||||
var hintAK='32 character Application Key'
|
||||
var hintDecoder='Decoder file, ending in .be'
|
||||
var hintAN='Device name for MQTT messages'
|
||||
webserver.content_send("<table><tr>")
|
||||
for node:1..8
|
||||
self.sendNodeButton(node)
|
||||
|
||||
webserver.content_send(
|
||||
f"<fieldset>"
|
||||
"<legend><b> LoRaWan End Device </b></legend>"
|
||||
"<br><div>") #- Add space and indent to align form tabs -#
|
||||
for node:1..16
|
||||
webserver.content_send(f"<button type='button' onclick='selNode({node})' id='n{node}' class='tl inactive'>{node}</button>")
|
||||
end
|
||||
webserver.content_send("</tr><tr>")
|
||||
for node:9..16
|
||||
self.sendNodeButton(node)
|
||||
end
|
||||
webserver.content_send("</tr></table>")
|
||||
webserver.content_send(
|
||||
f"</div><br><br><br><br>") #- Terminate indent and add space -#
|
||||
for node:1..16
|
||||
arg='LoRaWanAppKey' + str(node)
|
||||
appKey=tasmota.cmd(arg,true).find(arg)
|
||||
@ -212,27 +212,26 @@ class webPageLoRaWAN : Driver
|
||||
decoder=tasmota.cmd(arg,true).find(arg)
|
||||
webserver.content_send(
|
||||
f"<div id='nd{node}' style='display:none'>"
|
||||
"<fieldset>"
|
||||
"<legend><b> LoRaWan End Device {node} </b></legend>"
|
||||
"<form action='' method='post'>"
|
||||
"<p><b>Application Key</b>"
|
||||
"<input title='{hintAK}' pattern='[A-Fa-f0-9]{{32}}' id='ak' minlength='32' maxlength='32' required='' placeholder='{hintAK}' value='{appKey}' name='ak' style='font-size:smaller'>"
|
||||
"</p>"
|
||||
"<p></p>"
|
||||
"<p><b>Device Name</b>"
|
||||
"<input id='an' placeholder='{hintAN}' value='{name}' name='an'>"
|
||||
"</p>"
|
||||
"<p></p>"
|
||||
"<p><b>Decoder File</b>"
|
||||
"<input title='{hintDecoder}' id='dc' placeholder='{hintDecoder}' value='{decoder}' name='dc'>"
|
||||
"</p>"
|
||||
"<br>"
|
||||
"<button name='save' class='button bgrn'>Save</button>"
|
||||
"<input type='hidden' name='node' value='{node}'>"
|
||||
"<p><b>Application Key</b>"
|
||||
"<input title='{hintAK}' pattern='[A-Fa-f0-9]{{32}}' id='ak' minlength='32' maxlength='32' required='' placeholder='{hintAK}' value='{appKey}' name='ak' style='font-size:smaller'>"
|
||||
"</p>"
|
||||
"<p></p>"
|
||||
"<p><b>Device Name</b>"
|
||||
"<input id='an' placeholder='{hintAN}' value='{name}' name='an'>"
|
||||
"</p>"
|
||||
"<p></p>"
|
||||
"<p><b>Decoder File</b>"
|
||||
"<input title='{hintDecoder}' id='dc' placeholder='{hintDecoder}' value='{decoder}' name='dc'>"
|
||||
"</p>"
|
||||
"<br>"
|
||||
"<button name='save' class='button bgrn'>Save</button>"
|
||||
"<input type='hidden' name='node' value='{node}'>"
|
||||
"</form>"
|
||||
"</fieldset>"
|
||||
"</div>")
|
||||
end
|
||||
webserver.content_send(
|
||||
f"</fieldset>")
|
||||
|
||||
webserver.content_button(webserver.BUTTON_CONFIGURATION) #- button back to conf page -#
|
||||
webserver.content_stop() #- end of web page -#
|
||||
|
||||
@ -1,14 +1,14 @@
|
||||
/////////////////////////////////////////////////////////////////////
|
||||
// compressed by tools/unishox/compress-html-uncompressed.py
|
||||
// input sha256: cd65d01fd316081cf03d42c44f88d0127a7c62cd20c5ae8115ae3c4b0e0dd7eb
|
||||
// input sha256: 1f042dbb6cfa6491dcc939f00b6fe46ec08b5186baacb85be6a2f2e24aa0e7b5
|
||||
/////////////////////////////////////////////////////////////////////
|
||||
|
||||
const size_t HTTP_HEAD_STYLE_ROOT_COLOR_SIZE = 308; // compressed size 109 bytes
|
||||
const size_t HTTP_HEAD_STYLE_ROOT_COLOR_SIZE = 339; // compressed size 116 bytes
|
||||
const char HTTP_HEAD_STYLE_ROOT_COLOR_COMPRESSED[] PROGMEM = "\x3D\x3D\x46\x41\x33\xF0\xF3\xFE\x65\x1E\xD3\xAC\xEB\x0C\xFD\x8E\x1E\x3C\xCF\x23"
|
||||
"\xE8\xE3\xE2\x36\x1E\x0E\xB3\xAC\x33\xF6\x63\xE3\x41\x1A\x55\x50\x40\x8F\x28\xD9"
|
||||
"\x40\x93\x28\x7F\xFC\x09\x33\x7C\x18\x60\x8D\x34\x75\x02\x3D\xB1\xD5\xD8\x60\xC0"
|
||||
"\x24\xCD\x04\x9C\xB8\x75\x70\xA3\x3F\x82\x4C\xDF\xF8\x12\xAF\x7F\xD4\x09\x98\x0F"
|
||||
"\x8C\xC1\x2E\x60\x24\xDF\xD0\x47\xD9\x34\x12\xB5\x20\xFC\x08\xFC\x20\x07\xE0\x81"
|
||||
"\x16\xD9\xEE\x3D\x0E\xC0\x41\xE2\x24";
|
||||
"\x2B\x84\x3B\x1C\x09\x32\x81\x16\xD9\xEE\x3D\x0E\xC0\x41\xE2\xA0";
|
||||
|
||||
#define HTTP_HEAD_STYLE_ROOT_COLOR Decompress(HTTP_HEAD_STYLE_ROOT_COLOR_COMPRESSED,HTTP_HEAD_STYLE_ROOT_COLOR_SIZE).c_str()
|
||||
@ -19,5 +19,7 @@ const char HTTP_HEAD_STYLE_ROOT_COLOR[] PROGMEM =
|
||||
"--c_intxt:#%06x;"
|
||||
"--c_csl:#%06x;"
|
||||
"--c_csltxt:#%06x;"
|
||||
"--c_tab:#%06x;"
|
||||
"--c_tabtxt:#%06x;"
|
||||
"}"
|
||||
"</style>";
|
||||
|
||||
@ -995,24 +995,26 @@ void WSContentSendStyle_P(const char* formatP, ...) {
|
||||
|
||||
// Output style root colors by names
|
||||
WSContentSend_P(HTTP_HEAD_STYLE_ROOT_COLOR,
|
||||
WebColor(COL_BACKGROUND), // --c_bg
|
||||
WebColor(COL_FORM), // --c_frm
|
||||
WebColor(COL_TITLE), // --c_ttl
|
||||
WebColor(COL_TEXT), // --c_txt
|
||||
WebColor(COL_TEXT_WARNING), // --c_txtwrn
|
||||
WebColor(COL_TEXT_SUCCESS), // --c_txtscc
|
||||
WebColor(COL_BUTTON), // --c_btn
|
||||
WebColor(COL_BUTTON_OFF), // --c_btnoff
|
||||
WebColor(COL_BUTTON_TEXT), // --c_btntxt
|
||||
WebColor(COL_BUTTON_HOVER), // --c_btnhvr
|
||||
WebColor(COL_BUTTON_RESET), // --c_btnrst
|
||||
WebColor(COL_BUTTON_RESET_HOVER), // --c_btnrsthvr
|
||||
WebColor(COL_BUTTON_SAVE), // --c_btnsv
|
||||
WebColor(COL_BUTTON_SAVE_HOVER), // --c_btnsvhvr
|
||||
WebColor(COL_INPUT), // --c_in
|
||||
WebColor(COL_INPUT_TEXT), // --c_intxt
|
||||
WebColor(COL_CONSOLE), // --c_csl
|
||||
WebColor(COL_CONSOLE_TEXT) // --c_csltxt
|
||||
WebColor(COL_BACKGROUND), // --c_bg
|
||||
WebColor(COL_FORM), // --c_frm
|
||||
WebColor(COL_TITLE), // --c_ttl
|
||||
WebColor(COL_TEXT), // --c_txt
|
||||
WebColor(COL_TEXT_WARNING), // --c_txtwrn
|
||||
WebColor(COL_TEXT_SUCCESS), // --c_txtscc
|
||||
WebColor(COL_BUTTON), // --c_btn
|
||||
WebColor(COL_BUTTON_OFF), // --c_btnoff
|
||||
WebColor(COL_BUTTON_TEXT), // --c_btntxt
|
||||
WebColor(COL_BUTTON_HOVER), // --c_btnhvr
|
||||
WebColor(COL_BUTTON_RESET), // --c_btnrst
|
||||
WebColor(COL_BUTTON_RESET_HOVER), // --c_btnrsthvr
|
||||
WebColor(COL_BUTTON_SAVE), // --c_btnsv
|
||||
WebColor(COL_BUTTON_SAVE_HOVER), // --c_btnsvhvr
|
||||
WebColor(COL_INPUT), // --c_in
|
||||
WebColor(COL_INPUT_TEXT), // --c_intxt
|
||||
WebColor(COL_CONSOLE), // --c_csl
|
||||
WebColor(COL_CONSOLE_TEXT), // --c_csltxt
|
||||
WebColor(COL_TIMER_TAB_BACKGROUND), // --c_tab
|
||||
WebColor(COL_TIMER_TAB_TEXT) // --c_tabtxt
|
||||
);
|
||||
|
||||
WSContentSendRaw_P(HTTP_HEAD_STYLE1);
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user