WEB интерфейс - стили

Dev1 · #1

Может кому и понадобится...

Темный стиль:

СкриныПоказать

КодПоказать

Код: Выделить всё

 body {
 background-color: #595959;
}
 .header 
	{    
	padding: 10px;     
	left: 0px;    
	right: 0px;     
	top: 0px;      
	background: #111111;
	color: rgb(224, 255, 255);
	text-align: center;
	font-weight: 600;
	font-family: 'Times New Roman', Times, serif;
	font-size: 250%; 
	}   
 .menu 
	{
	float:left;    
	padding: 1%;    
	margin: 1%;
	width:16%;    
	background: #B1B0B0;
	border: 1px solid black;
	border-radius: 8px;
	} 
.menuItem 
	{  
	background: #B1B0B0;
	font-weight: 600;
	font-family: 'Times New Roman', Times, serif;
	} 
.content 
	{    
	float:right;    
	width:78%;
	background: #595959;
	color: rgb(255, 228, 181);
	}   
.footer
	{   
	float:left;   
	padding: 1%;    
	width:98%;    
	background: #111111;   
 	margin-top: 1%; 
	color: rgb(224, 255, 255);
 	text-align: center;
	font-weight: 600;
	font-family: 'Times New Roman', Times, serif;
	font-size: 150%;
	}
.buttonFlp 
	{
	width:150px;
	border-radius:20px;
	background:#5D6C5D;
	color: rgb(224, 255, 255);
	font-size:12px;
	cursor:pointer;
	float:left;    
	padding: 1%;    
	 margin: 1%;
	}
.buttonFlp:hover
	{
	background:#495849;
	}
.buttonFlp:focus
	{
	outline:none;
	}

В стиле Arduino IDE:

СкриныПоказать

КодПоказать

Код: Выделить всё

 .header 
	{    
	padding: 10px;     
	left: 0px;    
	right: 0px;     
	top: 0px;      
	background: #227571; 
	text-align: center;
	color:#fff;
	font-weight: 600;
	font-family: 'Times New Roman', Times, serif;
	font-size: 250%; 
	}   
 .menu 
	{
	float:left;    
	padding: 1%;    
	margin: 1%;
	width:16%;    
	background: #20B2AA;
	border: 1px solid black;
	border-radius: 8px;
	} 
.menuItem 
	{  
	background: #20B2AA;
	font-weight: 600;
	font-family: 'Times New Roman', Times, serif;
	} 
.content 
	{    
	float:right;    
	width:78%;
	font-weight: 600;
	}   
.footer
	{   
	float:left;   
	padding: 1%;    
	width:98%;    
	background: #227571;   
 	margin-top: 1%;
	color:#fff;
 	text-align: center;
	font-weight: 600;
	font-family: 'Times New Roman', Times, serif;
	font-size: 150%;
	}
.buttonFlp 
	{
	width:150px;
	border-radius:20px;
	background:#20B2AA;
	color:#fff;
	font-size:12px;
	cursor:pointer;
	float:left;    
	padding: 1%;    
	 margin: 1%;
	}
.buttonFlp:hover
	{
	background:#1A8983;
	}
.buttonFlp:focus
	{
	outline:none;
	}

Вставлять код в общий стиль:

Куда вставлятьПоказать

Что бы вернуть на стандартный стиль нажать внизу кнопочку "По умолчанию".

pipapsix · #2

Опа на. как раз хотел это искать. Пробую.

Отправлено спустя 43 минуты 20 секунд:
У меня чет не получается. выходит вот что 404 - Page not fond
Можно скринов побольше как что делать.
Или ткнуть мордой в обучалку.

Lukum · #3

А как чек бокс сменить на кнопку, чтоб ни галочку ставить а кнопку ?

pipapsix · #4

Кому не жалко, поделитесь проэктом с рабочим веб интерфейсом, я одним глазком посмотрю.

Dev1 · #5

pipapsix писал(а): ↑
06.12.2018{, 18:42}
Кому не жалко, поделитесь проэктом с рабочим веб интерфейсом, я одним глазком посмотрю.

Вставить свои настройки имя сети и пароль.

test_web_no_ssid_pass.flp: (64.15 КБ) 309 скачиваний

Отправлено спустя 3 минуты 9 секунд:

pipapsix писал(а): ↑
06.12.2018{, 17:54}
У меня чет не получается. выходит вот что 404 - Page not fond
Можно скринов побольше как что делать.
Или ткнуть мордой в обучалку.

Все легко, заходите в веб интерфейс, общий стиль, вкладка описание стилей. Удаляете все в этой вкладке и вставляете код стиля с 1 сообщения. Соответственно код должен быть полностью. Та еще скрин есть куда вставлять(в 1 сообщении).

pipapsix · #6

благодарю.работает. теперь буду искать где я накосячил. вроде так же делал

Dev1 · #7

Можно просто сравнить начало и конец кода в спойлере и проекте. Начала у двух стилей разные.

pipapsix · #8

Вот проверил, да все тоже самое делал. А не работать.
странно.
я с горя пива хряпнуть успел. нужно завтра еще раз просмотреть))
Теперь в планах, разобраться.=
забивать в вэб интерфейсе точку к которой нужно подключиться, если например поменял роутер.

Dev1 · #9

Тока что проверил код двух стилей из 1 сообщения, все работает...

Lukum · #10

А чек бокс на кнопку поменять можеш?

Dev1 · #11

Lukum писал(а): ↑
06.12.2018{, 19:45}
А чек бокс на кнопку поменять можеш?

Так не я придумал чек-бокс, это к Сергею нужно, чтоб добавил. Правда это кнопку надо как переключатель, вкл-выкл.

СпойлерПоказать

Lukum · #12

Ну да можно так, а то с телефона не очень удобно, ладно буду капать в иде вставить вручную пробовать

pipapsix · #13

Оказывается все просто.
Другой вопрос.
Одновременно использовать клент и точка доступа не получится. ?
Нужно к примеру, пришел в помещение где новая сеть, я подключаюсь к ЕСП по точке доступа и там ввожу новую сеть и пароль и перезагружаюсь. Все, подключен к новой сети.Вот как это реализовать?? не пойму.

ivanpost · #14

pipapsix, Отключать точку доступа после подключения к главной точке доступа . Через системный параметр - нормально отключается. Но зато включать если нет подключения. Этот же параметр.

Dev1, подскажите, какая строка этого CSS отвечает за шрифт пунктов меню? Как у вас вышел шрифт без засечек?

pipapsix · #15

ivanpost,
чет не вникну. скрин помог бы.
вроде понял.
короче если сеть потеряешь, то точку доступа не в ключить\\?

на стороннем ресурсе по есп есть функция, что если три раза нажать ресет на есп, то она войдет в безопасный режим и станет точкой доступа, есть тут такая возможность это реализовать??

Dev1 · #16

ivanpost писал(а): ↑
08.12.2018{, 16:59}
Dev1, подскажите, какая строка этого CSS отвечает за шрифт пунктов меню? Как у вас вышел шрифт без засечек?

Пункты меню? Какое меню... Если слева то там с засечками, если в центре то там не указан шрифт, ставит браузер(винда) по умолчанию, похож на verdana. В центральном блоке

Код: Выделить всё

.content 
	{    
	float:right;    
	width:78%;
	font-weight: 600;
	}

можете сами добавить шрифт какой хотите. В футере, хедере и менюитем уже прописан шрифт:

Код: Выделить всё

font-family: 'Times New Roman', Times, serif;

Verdana будет выглядеть как то так:

Код: Выделить всё

font-family: Verdana, Geneva, sans-serif;

или просто

Код: Выделить всё

font-family: Verdana;

.

ivanpost · #17

pipapsix, Условие после старта - всегда включается AP, выключается когда клиент подключился.

Отправлено спустя 3 минуты 53 секунды:
Dev1, А как цветом заливаете весь страницу кроме футера и хеадера?

Отправлено спустя 1 минуту 14 секунд:
Сорри! Увидел бакгроунд!

Dev1 · #18

ivanpost писал(а): ↑
08.12.2018{, 19:59}
Dev1, А как цветом заливаете весь страницу кроме футера и хеадера?

Отправлено спустя 1 минуту 14 секунд:
Сорри! Увидел бакгроунд!

background это по модулям, а на странице в целом фон:

Код: Выделить всё

 body {
 background-color: #595959;
}

в первом стиле реализовано.

pipapsix · #19

ivanpost писал(а): ↑
08.12.2018{, 19:59}
pipapsix, Условие после старта - всегда включается AP, выключается когда клиент подключился.

если это вопрос, то да.

#20

pipapsix писал(а): ↑
08.12.2018{, 07:28}
. пришел в помещение где новая сеть, я подключаюсь к ЕСП по точке доступа и там ввожу новую сеть и пароль и перезагружаюсь. Все,

Пользовательский блок Wifimanager это делает.