Используем CSS код, для написания красивой кнопки в среде программирования Visual Studio Code.
В данном уроке мы сделаем не большой дизайн нашим кнопкам, а так же напишем не большой скрипт для передачи данных о состоянии кнопки. В дальнейшем мы применим данный код для микроконтроллера ESP8266.
Программный код:
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
max-width: 800px;
margin:0px auto;
}
.switch {
position:relative;
display:inline-block;
width:120px;
height:68px
}
.switch input {display:none}
.slider {
position:absolute;
top:0px;
left:0px;
right:0px;
bottom:0px;
background-color:rgb(190, 8, 8);
border-radius:34px
}
.slider:before {
position:absolute;
content:"";
height:52px;
width:52px;
left:8px;
bottom:8px;
background-color:rgb(19, 17, 17);
transition:.4s;
border-radius:68px
}
input:checked+.slider{ background-color:#37e714 }
input:checked+.slider:before {
transform:translateX(52px)
}
</style>
<script>
function toggleCheckbox(element) {
var xhr = new XMLHttpRequest();
if (element.checked) { xhr.open("GET", "/?led=on", true); }
else { xhr.open("GET", "/?led=off", true); }
xhr.send();
}
</script>
</head>
<body>
<h1>ESP Web Server</h1>
<label class="switch">
<input type="checkbox" onchange="toggleCheckbox(this)"> <!-- %s> -->
<span class="slider"></span>
</label>
</body>
</html>
Разберем наш программный код:
Тэгом <&style> <&/style>
мы создаем стиль элемента с помощью правил CSS.
max-width — Ширина элемента
margin — определяет внешний отступ на всех четырёх сторонах элемента. Если использую два параметра, как у нас, выравнивание идет по вертикали и горизонтали.
position — позиционирование элемента в документе, relative элемент позиционируется в соответствии с размером макета страницы, смещение не влияет на положение любых других элементов.
display — определяет тип отображения элемента, inline-block означает элемент, который продолжает находиться в блоке. None — элемент не видимый.
Строкой .switch input {display:none}, мы делаем не видемым элемент на экране, хотя его свойства будем использовать.
.slider — элемент слайдер.
указывает, что элемент абсолютно позиционирован, положение элемента задается свойствами left, top, right и bottom.
XMLHttpRequest – который даёт возможность делать HTTP-запросы к серверу без перезагрузки страницы.XMLHttpRequest.open() инициализирует новый запрос или повторно инициализирует уже созданный:
&XMLHttpRequest.open(method, url[, async[, user[, password]]])
где:
method —для HTTP-запроса используются такие методы как «GET», «POST», «PUT», «DELETE», и т. д. Игнорируется для URL, отличных от HTTP(S)-запросов.
url — представляет URL для отправки запроса.
async Необязательный логический параметр со значением по умолчанию true, указывающим, выполнять ли операцию асинхронно или нет. Если это значение равно false, метод send() не возвращается, пока не будет получен ответ. Если true, уведомление о получении ответа осуществляется с помощью обработчика события.
password- пароль, использующийся для аутентификации; по умолчанию имеет значение null.
xhr.send([body]) — метод устанавливает соединение и отсылает запрос к серверу. Необязательный параметр body содержит тело запроса.
В функции мы проверяем есть чек или нету, если есть отправляем с помощью команды GET данные на сервер в виде строчки «/?led=on» , если чек нету — отправляем
При изменении чек бокса(нажали на него), у нас вызывается функция
Проснувшись однажды утром после беспокойного сна, Грегор Замза обнаружил, что он у себя в постели превратился в страшное насекомое.
Разберем, что же мы с Вами написали:
*******
Теперь перенесем HTML страничку в наш микроконтроллер ESP8266 используя microPython:
Проснувшись однажды утром после беспокойного сна, Грегор Замза обнаружил, что он у себя в постели превратился в страшное насекомое.
