userbogd/WebguiappTemplate
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

new dark grey yellow web ui design

Browse Source
This commit is contained in:
Bogdan Pilyugin 2023-04-03 16:16:00 +02:00
parent dbde75ef32
commit a9f39ea54a
14 changed files with 93 additions and 1675 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
HTML/adapters.html
View File

@ -92,7 +92,9 @@
<option value="apsta"~wfmode(3)~>Точка+Клиент (AP+STA)</option>
</select></td>
</tr>
<script>PrintTextInput('Имя WiFi сети(AP):','wfiap','~ssidap~',3,31);
<script>
PrintInt('Max power, dBm','wifipwr','~wifipwr~',2,21);
PrintTextInput('Имя WiFi сети(AP):','wfiap','~ssidap~',3,31);
PrintTextInput('Ключ WiFi сети(AP):','wfpap','~wkeyap~',8,31);
PrintIPInput('IP адрес(AP):','ipaap','~ipap~');
PrintTextInput('Имя WiFi сети(CLN):','wfi','~ssid~',3,31);

7
HTML/api/stat.json
View File

@ -1,4 +1,9 @@
{
{"time":"~time~",
"uptime":"~uptime~",
"wlev":"~wlev~",
"vlsys":"~vlsys~",
"vlin":"~vlin~",
"vlbat":"~vlbat~",
"ethstat":"~ethstat~",
"wfstat":"~wfstat~",
"gsmstat":"~gsmstat~",

27
HTML/res/appstyles.css
View File

@ -1,17 +1,14 @@
:root {
/*========== Colors ==========*/
--first-color: #152128;
--first-color-light: #152128;
--title-color: #9FA3A6;
--header-color: #185273;
--text-color: #9FA3A6;
--text-color-light: #9FA3A6;
--body-color: #0E1A21;
--container-color: #0E1A21;
--navy-color: #185273;
--bgr-color: #1D2327;
--panel-bgr-color: #2c3338;
--menu-bgr-color: #3c434a;
--header-bgr-color: #646970;
--accent-color: #dba617;
--text-color:#F0F0F1;
/*========== Font and typography ==========*/
--body-font: 'Consolas', monospace;
--body-font: 'Consolas','Roboto', monospace;
--large-font-size: 1.2rem;
--normal-font-size: 0.9rem;
--small-font-size: .9rem;
@ -117,7 +114,7 @@ input:checked + span{background-color: var(--navy-color);}
left: 0;
right: 0;
bottom: 0;
background-color: var(--text-color);
background-color: #666;
-webkit-transition: .4s;
transition: .4s;
}
@ -129,17 +126,17 @@ input:checked + span{background-color: var(--navy-color);}
width: 18px;
left: 3px;
bottom: 3px;
background-color: #CCC;
background-color: var(--text-color);
-webkit-transition: .4s;
transition: .4s;
}
input:checked + .slider {
background-color: var(--navy-color);
background-color: var(--accent-color);
}
input:focus + .slider {
box-shadow: 0 0 1px var(--navy-color);
box-shadow: 0 0 1px var(--accent-color);
}
input:checked + .slider:before {

22
HTML/res/res.js
View File

@ -2,7 +2,7 @@ var hedmen = `
<header class="header">
<div class="header__container">
<img src="res/logo.png" alt="LOGO" class="header__img"/>
<a href="index.html" class="header__logo">This device brand name</a>
<a href="index.html" class="header__logo">~name~ ~serial~</a>
<div class="header__toggle">
<i class='icon-menu' id="header-toggle"></i>
</div>
@ -18,20 +18,6 @@ var hedmen = `
<div class="nav__list">
<div class="nav__items">
<h3 class="nav__subtitle">APPLICATION</h3>
<div class="nav__dropdown">
<a href="#" class="nav__link">
<i class='icon-chart-bar nav__icon'></i>
<span class="nav__name">CONTROL</span>
<i class='icon-down-open nav__icon nav__dropdown-icon'></i>
</a>
<div class="nav__dropdown-collapse">
<div class="nav__dropdown-content">
<a href="#" class="nav__dropdown-item">AppControl1</a>
<a href="#" class="nav__dropdown-item">AppControl2</a>
</div>
</div>
</div>
<div class="nav__dropdown">
<a href="#" class="nav__link">
<i class='icon-wrench nav__icon'></i>
@ -41,8 +27,8 @@ var hedmen = `
<div class="nav__dropdown-collapse">
<div class="nav__dropdown-content">
<a href="#" class="nav__dropdown-item">AppSettings1</a>
<a href="#" class="nav__dropdown-item">AppSettings2</a>
<a href="#" class="nav__dropdown-item">Application settings</a>
</div>
</div>
</div>
@ -86,11 +72,13 @@ function PageSurround()
function PrintIPInput(title,name,value){document.write("<tr><td class='rl'>"+title+"</td><td><input type='text' required size='20' name='"+name+"' value='"+value+"' title='IP адрес xxx.xxx.xxx.xxx' pattern='^\\d{1,3}\.\\d{1,3}\.\\d{1,3}\.\\d{1,3}$' /></td></tr>");}
function PrintMACInput(title,name,value){document.write("<tr><td class='rl'>"+title+"</td><td><input type='text' required size='20' name='"+name+"' value='"+value+"' title='MAC адрес xx-xx-xx-xx-xx-xx' pattern='^([0-9a-fA-F]{2}([-]|$)){6}$|([0-9a-fA-F]{4}([.]|$)){3}$' /></td></tr>");}
function PrintTextInput(title,name,value,min,max){document.write("<tr><td class='rl'>"+title+"</td><td><input type='text' required size='20' name='"+name+"' value="+value+" title='"+min+"-"+max+" символов' pattern='^*{"+min+","+max+"}$' /></td></tr>");}
function PrintTextInputID(title,id,value,min,max){document.write("<tr><td class='rl'>"+title+"</td><td><input type='text' required size='20' id='"+id+"' value="+value+" title='"+min+"-"+max+" символов' pattern='^*{"+min+","+max+"}$' /></td></tr>");}
function PrintHexInput(title,name,value,min,max){document.write("<tr><td class='rl'>"+title+"</td><td><input type='text' required size='20' name='"+name+"' value="+value+" title='"+min+"-"+max+" символов A-Fa-f0-9' pattern='^[0-9a-fA-F]{"+min+","+max+"}$' /></td></tr>");}
function PrintTextInputNoReg(title,name,value,min,max){document.write("<tr><td class='rl'>"+title+"</td><td><input type='text' required size='20' name='"+name+"' value="+value+" title='"+min+"-"+max+" символов'/></td></tr>");}
function PrintLabel(title,value){document.write("<tr><td class='rl lab'>"+title+"</td><td align='left' class='lab'>"+value+"</td></tr>");}
function PrintSpanLabel(title,idx){document.write("<tr><td class='rl'>"+title+"</td><td align='left'><span id='"+idx+"'>?</span></td></tr>");}
function PrintCheckBox(title,name,checked,action){document.write("<tr><td class='rl'>"+title+"</td><td><input type='checkbox' name='"+name+"' value='1' onclick="+action+" "+checked+" /></td></tr>");}
function PrintSwitch(title,name,checked,action){document.write("<tr><td class='rl'>"+title+"</td><td><label class='switch'><input type='checkbox' name='"+name+"' value='1' onclick="+action+" "+checked+" ><span class='slider round'></span></label></td></tr>");}
function PrintInt(title,name,value,min,max){document.write("<tr><td class='rl'>"+title+"</td><td><input type='number' required min='"+min+"' max='"+max+"' name='"+name+"' value ='"+value+"'/></td></tr>");}
function PrintIntId(title,id,value,min,max){document.write("<tr><td class='rl'>"+title+"</td><td><input type='number' required min='"+min+"' max='"+max+"' id='"+id+"' value ='"+value+"'/></td></tr>");}
function PrintSep(){document.write("<tr><td height='20px'></td></tr>");}

54
HTML/res/styles.css
View File

@ -25,7 +25,7 @@ body {
padding: 0 0 0;
font-family: var(--body-font);
font-size: var(--normal-font-size);
background-color: var(--body-color);
background-color: var(--bgr-color);
color: var(--text-color);
}
@ -48,8 +48,7 @@ img {
top: 0;
left: 0;
width: 100%;
background-color: var(--header-color);
box-shadow: 0 1px 0 rgba(22, 8, 43, 0.1);
background-color: var(--header-bgr-color);
padding: 0 1rem;
z-index: var(--z-fixed);
}
@ -68,7 +67,7 @@ img {
}
.header__logo {
color: var(--title-color);
color: var(--text-color);
font-weight: var(--font-medium);
font-size: var(--large-font-size);
@ -82,7 +81,7 @@ img {
}
.header__toggle {
color: var(--title-color);
color: var(--text-color);
cursor: pointer;
}
@ -93,7 +92,7 @@ img {
left: -100%;
height: 100vh;
padding: 1rem 1rem 0;
background-color: var(--first-color);
background-color: var(--menu-bgr-color);
box-shadow: 1px 0 0 rgba(22, 8, 43, 0.1);
z-index: var(--z-fixed);
transition: .4s;
@ -136,7 +135,7 @@ img {
font-size: var(--normal-font-size);
text-transform: uppercase;
letter-spacing: .1rem;
color: var(--text-color-light);
color: var(--text-color);
}
.nav__link {
@ -146,7 +145,7 @@ img {
}
.nav__link:hover {
color: var(--navy-color);
color: var(--accent-color);
}
.nav__icon {
@ -172,7 +171,7 @@ img {
}
.nav__dropdown-collapse {
background-color: var(--first-color-light);
background-color: var(--menu-bgr-color);
border-radius: .5rem;
margin-top: 1rem;
}
@ -191,7 +190,7 @@ img {
}
.nav__dropdown-item:hover {
color: var(--navy-color);
color: var(--accent-color);
}
.nav__dropdown-icon {
@ -216,7 +215,7 @@ img {
/*===== Active link =====*/
.active {
color: var(--navy-color);
color: var(--text-color-active);
}
/* ========== MEDIA QUERIES ==========*/
@ -229,10 +228,10 @@ img {
@media screen and (min-width: 768px) {
body {
padding: 0 0 0 4rem;
padding: 0 0 0 var(--nav-width);
}
.header {
padding: 0 3rem 0 4rem;
padding: 0 3rem 0 var(--nav-width);
}
.header__container {
height: var(--header-height);
@ -275,26 +274,24 @@ img {
/* Navbar expanded */
.nav:hover {
.nav {
width: var(--nav-width);
}
/* Visible elements */
.nav:hover .nav__logo-name {
.nav__logo-name {
opacity: 1;
}
.nav:hover .nav__subtitle {
.nav__subtitle {
opacity: 1;
}
.nav:hover .nav__name {
.nav .nav__name {
opacity: 1;
}
.nav:hover .nav__dropdown-icon {
.nav .nav__dropdown-icon {
opacity: 1;
}
}
.rl{text-align:right;}
@ -310,9 +307,16 @@ input, select, .btn, .lab, textarea {
margin: 15px 3px;
vertical-align: middle;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.btn{min-width:100px; color:var(--text-color);}
.btn:active{background-color: var(--navy-color);}
.btn:hover {border:1px solid rgba(255, 255, 255, 0.4);}
.btn:active{background-color: var(--accent-color); border:none;}
.btn:hover {border:1px solid rgba(255, 255, 255, 0.6);}
.lab {border: none;}
@ -320,7 +324,7 @@ textarea {
height: 4.0rem;
margin:auto;
vertical-align: top;
min-width: 350px;
min-width: 300px;
}
.stg td{width:auto;padding:1px;margin:0}
@ -341,7 +345,7 @@ input[type="radio"] { margin-top: -1px; vertical-align: middle;}
.mlhdr {
font:16px consolas,monospace;
font-weight:bold;
color: var(--title-color);
color: var(--accent-color);
margin: auto;
}
@ -351,7 +355,7 @@ input[type="radio"] { margin-top: -1px; vertical-align: middle;}
.mlpc {
margin: 0 0 10px 10px;
padding: 10px;
background-color:var(--first-color);
background-color:var(--panel-bgr-color);
}
.ml {

13
HTML/services.html
View File

@ -8,6 +8,10 @@
<script src="res/main.js"></script>
<script src="res/res.js"></script>
<title>~name~</title>
<script>
function sendtest(n)
{PostData("mqtttest"+n+"=prs", "services.html", false , false, false);}
</script>
</head>
<body>
<script>PageSurround();</script>
@ -54,7 +58,8 @@
PrintTextInput('Password','mqpass1','~mqpass1~',3,31);
</script></table>
<script>PrintSaveFail('~status_fail~');
PrintSaveBtn('mqtt1'); PrintApplyBtn('mqtt1')</script>
PrintSaveBtn('mqtt1'); PrintApplyBtn('mqtt1')</script>
<button type="button" class ='btn' id='testbt1' onclick="sendtest(1)">Send MQTT test</button>
</form>
</div>
</div>
@ -72,10 +77,12 @@
PrintTextInput('Group name','mqgrp2','~mqgrp2~',3,31);
PrintTextInput('Device ID prefix','mqid2','~mqid2~',3,31);
PrintTextInput('Login','mqname2','~mqname2~',3,31);
PrintTextInput('Password','mqpass2','~mqpass2~',3,31);</script>
PrintTextInput('Password','mqpass2','~mqpass2~',3,31);
</script>
</table>
<script>PrintSaveFail('~status_fail~');
PrintSaveBtn('mqtt2'); PrintApplyBtn('mqtt2')</script>
PrintSaveBtn('mqtt2'); PrintApplyBtn('mqtt2')</script>
<button type="button" class ='btn' id='testbt2' onclick="sendtest(2)">Send MQTT test</button>
</form>
</div>
</div>

21
HTML/system.html
View File

@ -46,7 +46,8 @@
PrintInt('Auto update check period','otaint','~otaint~',1,65534);
</script></table>
<table class='cntr'><tr><td align="center">Update firmware URL:</td></tr></table>
<table class='cntr'><tr><td><textarea type="text" raws="5" name='otaurl' title="128 символа" ">~otaurl~</textarea></td></tr>
<table class='cntr'><tr><td><textarea type="text" raws="5" name='otaurl' title="128 символов" ">~otaurl~</textarea></td></tr>
</table><table class='cntr'>
<tr><td class='rl lab'>Current firmware version:</td><td><span id='fvr'>?</span></td></tr>
<tr><td class='rl lab'>Available firmware version:</td><td><span id='afvr'>?</span></td></tr>
@ -62,6 +63,12 @@
<div class="mlpc">
<form name="stat" method="post">
<div class="mlhdr">STAT</div>
<div class='cntr' style='text-align:center;margin-top:20px'>
<span id='localtime'>?</span><br/>
Uptime:<span id='uptime'>?</span><br/><br/>
Signal WiFi:<span id='wlev' style="color:#0099ff;font-weight:bold">?</span><br/>
<br/>
</div>
<table class='cntr'>
<tr><td class='rl lab'>Ethernet:</td><td><span id='eth'>?</span></td></tr>
<tr><td class='rl lab'>WiFi:</td><td><span id='wfi'>?</span></td></tr>
@ -92,10 +99,22 @@
</script>
</body>
<script>
function secondsToHms(d) {
d = Number(d);
var dd = Math.floor(d/86400);
var h = Math.floor(d%86400/3600);
var m = Math.floor(d%3600/60);
var s = Math.floor(d%3600%60);
return (' '+dd+'d '+(h<10?"0":"")+h+":"+(m<10?"0":"")+m+":"+(s<10?"0":"")+s); }
function updateStatus(data) {
var dat = JSON.parse(data);
try
{
theDate = new Date(dat.time * 1000);
sec = dat.uptime;
document.getElementById('localtime').innerHTML=(theDate.toString()).slice(0,34);
document.getElementById('uptime').innerHTML= secondsToHms(sec);
document.getElementById('wlev').innerHTML= dat.wlev;
document.getElementById('eth').innerHTML= dat.ethstat;
document.getElementById('wfi').innerHTML= dat.wfstat;
document.getElementById('gpr').innerHTML= dat.gsmstat;

2
components/webguiapp

@ -1 +1 @@
Subproject commit ebf050673c3133dec5db7eab209a2acbdd5aa99f
Subproject commit 94081ea62d29028ec90a3dadd3fe77e5d6e374fc

8
dependencies.lock
View File

@ -1,15 +1,9 @@
dependencies:
espressif/esp_modem:
component_hash: b11de8ecab6860719ab236cf353967c4f31d7f8e5e82dc6c224efeabbde00fcd
source:
service_url: https://api.components.espressif.com/
type: service
version: 0.1.19
idf:
component_hash: null
source:
type: idf
version: 4.4.4
manifest_hash: a5ee8c8f8a6f79ac6d05aa7263c49cb7cbe81352a85c16ac46f5c93bc701fd53
manifest_hash: eb33eed6204aeebc93ef87ce0ee4c46aa4a936fb925253457119240e0cfb2135
target: esp32
version: 1.0.0

14
main/Kconfig.projbuild
View File

@ -1,14 +0,0 @@
# put here your custom config value
menu "Example Configuration"
config ESP_WIFI_SSID
string "WiFi SSID"
default "myssid"
help
SSID (network name) for the example to connect to.
config ESP_WIFI_PASSWORD
string "WiFi Password"
default "mypassword"
help
WiFi password (WPA or WPA2) for the example to use.
endmenu

17
main/idf_component.yml
View File

@ -1,17 +0,0 @@
## IDF Component Manager Manifest File
dependencies:
espressif/esp_modem: "==0.1.19"
## Required IDF version
idf:
version: ">=4.1.0"
# # Put list of dependencies here
# # For components maintained by Espressif:
# component: "~1.0.0"
# # For 3rd party components:
# username/component: ">=1.0.0,<2.0.0"
# username2/component2:
# version: "~1.0.0"
# # For transient dependencies `public` flag can be set.
# # `public` flag doesn't have an effect dependencies of the `main` component.
# # All dependencies of `main` are public by default.
# public: true

13
sdkconfig
View File

@ -32,7 +32,7 @@ CONFIG_APP_COMPILE_TIME_DATE=y
# CONFIG_APP_EXCLUDE_PROJECT_VER_VAR is not set
# CONFIG_APP_EXCLUDE_PROJECT_NAME_VAR is not set
CONFIG_APP_PROJECT_VER_FROM_CONFIG=y
CONFIG_APP_PROJECT_VER="1"
CONFIG_APP_PROJECT_VER="0.0.0.0000"
CONFIG_APP_RETRIEVE_LEN_ELF_SHA=16
# end of Application manager
@ -134,13 +134,6 @@ CONFIG_PARTITION_TABLE_OFFSET=0x8000
CONFIG_PARTITION_TABLE_MD5=y
# end of Partition Table
#
# Example Configuration
#
CONFIG_ESP_WIFI_SSID="myssid"
CONFIG_ESP_WIFI_PASSWORD="mypassword"
# end of Example Configuration
#
# Compiler options
#
@ -1361,9 +1354,9 @@ CONFIG_WEBGUIAPP_WIFI_GATEWAY_STA="192.168.150.1"
#
CONFIG_WEBGUIAPP_MQTT_ENABLE=y
CONFIG_WEBGUIAPP_MQTT_CLIENTS_NUM=2
CONFIG_WEBGUIAPP_MQTT_ON=y
# CONFIG_WEBGUIAPP_MQTT_ON is not set
CONFIG_WEBGUIAPP_MQTT_MAX_TOPIC_LENGTH=128
CONFIG_WEBGUIAPP_MQTT_SERVER_URL="myfirstmqttserver.com"
CONFIG_WEBGUIAPP_MQTT_SERVER_URL="mqttbroker.com"
CONFIG_WEBGUIAPP_MQTT_SERVER_PORT=1883
CONFIG_WEBGUIAPP_MQTT_CLIENT_ID_1="DEV1"
CONFIG_WEBGUIAPP_MQTT_CLIENT_ID_2="DEV2"

4
sdkconfig.defaults
View File

@ -3,9 +3,11 @@ CONFIG_ESPTOOLPY_FLASHFREQ_80M=y
CONFIG_ESPTOOLPY_FLASHSIZE_4MB=y
CONFIG_APP_PROJECT_VER_FROM_CONFIG=y
CONFIG_APP_PROJECT_VER="0.0.0.0000"
CONFIG_PARTITION_TABLE_CUSTOM=y
CONFIG_PARTITION_TABLE_CUSTOM_FILENAME="partitions_user_ota.csv"
CONFIG_PARTITION_TABLE_FILENAME="partitions_user_ota.csv"
CONFIG_HTTPD_MAX_REQ_HDR_LEN=1024
CONFIG_HTTPD_MAX_REQ_HDR_LEN=1024

1562
sdkconfig.old
View File

File diff suppressed because it is too large Load Diff