Шаг №9 — Создание WEB страниц в ESP8266, без знаний HTML

Автор Elena Batratskaya
Шаг №9 — Создание WEB страниц в ESP8266, без знаний HTML

Всем привет.

С вами. Третьяков Сергей мы продолжаем разговор программирование esp8266 Arduino и сегодня мы будем говорить о том как создать страницы веб-страницы без использования h&m коды для того чтобы — это сделать. Вам нужно будет закачать скетч загрузить его в плату также загрузить файловую систему после чего плата загрузится и покажет вам вот такой вот сеть wi-fi либо сразу подключиться к вашему утра зависимости от того остались ли данные в вашем платье если у нас точка доступа wi-fi.

Мы заходим сюда приёмка неприсоединения идём на 192 168 41 попадаем в ад заходим на страницу конфигурации доставим имя пароль к нашему роутер перезагружаем устройство смотрим монитор порта и видим, что вы подключились перейти по адресу из монитора порта.

Можно перейти также по адресу из сетевого окружения. Так мы видим на 1 главным нашей странице ничего нет. И теперь мы будем говорить о том как засада нарисовать кнопку различные тексты так далее ничего не знаю про, что мы. Я обратился к ринату. Ринат сделал эту систему которые мы используем в своих разработках я вам. Её представляю у. Рината на канале. Вы тоже сможете посмотреть. оставили в описании вот у нас есть стране если мы нажмем на канал. НТВ мы увидим вот такой редактор этот редактор говорит, что мы получили запрос два запроса два запроса подготовили данные которыми потом будем пользоваться они описаны здесь и вот начиная со слова контент вот эти вот блоки описывают элементы которые мы видим на странице. Ну например у нас есть элемент с типом Link. Что обозначает простое ссылку вот сюда поставим, и вставим ещё одну такую же нажмем я увидел вторую такую же кнопочку нам не надо. Букашки мы можем сделать следующее. У меня есть описать на гитхабе возможности кое-что mail.ru. Можешь сюда сейчас на кнопочку и поставим. Давайте изменим её заголовок посмотрим изменился он или нет изменился теперь возьму ссылку по которой хотим перейти и добавим её отсюда в Action сделаем View сделаем сохранить и теперь при нажатии на эту кнопку мы будем переходить на описание этих возможно нашей системы. Болид, что мы. Давайте вернемся на место если у нас у вас такое получилось и делайте в 5:00 того, что произошло. Рефлекс Давайте посмотрим, что здесь написано в этой строчке типа, что — это за ремонт мы оставляем title — это подпись Action — это тот ссылка которая нас будет — это и класс определяет. Какой вид будет иметь если бы класс полностью удалить и попытаемся. Посмотри какой элемент мы можем посмотреть обычное ссылка будет если мы класс добавим нажмем сюда то всё у нас вернулась — это описание bootstrap. А класса там определяются этот. Кто знаком с трапом сможет посмотреть как — это работает на. Примерно вот такой класс изменяет нажимаем её не видим, что у нас свет ссылочки изменился сохраним всё — это дело. Ягу понимаете — это очень удобно. Для построения интерфейса заходим возможности page HTML и смотрим ещё может быть у нас могут быть заголовки. Давайте попробуем, что — это такое. Заходим в опять на страницу и дальше. Мы хотим поставить заголовок нам нужно поставить, вставить блок и здесь в конце не должно быть, делаем View и видим, что появился заголовок заголовок может быть H1 H2 H3 H4 H5 H6 — это стандартная заголовки используемые в HTML. Например я и увидим, что заголовок будет иметь вот такой вот вид. Давайте вернемся к таким образом мы можем сделать заголовок, что если мы хотим дальше за этим заголовком вставить обычный текст смотрим сударь. У нас есть текст делаем, вставляем теперь возьмём вот этот вот текст чтобы не набирать на показать как — это работает и вот этот текст замене делаем View видим, что у нас здесь есть, неправильно. Поэтому нам нужно. Ещё разочек нажать на кнопочку и мы видим, что появился текст пытались заставить его таким образом мы можем добавлять чтобы элементы которые у нас описана вот здесь какой элемент мы бы хотели еще добавить можно вставлять картинки графики и так далее. Ну вот например можем поставить картинку как — это сделать возьмём. Вот — это в чём картинка. Может быть как внутренней памяти PSP такое с внешней памяти смотрите ссылочка на картинку на внешнем источнике нажимаем видим вот такую вот музыку. Какие ещё элементы есть. Ну например у нас есть элемент разделяющая линия. Давайте оставим. Теперь её вставляем собираем — это делаем её смотрим. Что появилось разделяющая линия. Сохранение и так первоначальные навыки у нас уже будут скачайте. Эту программку. Попробуйте — это сделать в следующем видео. Я продолжил рассказ о том как же нам деваться данными как устанавливают работу кнопок и так далее. Как строить графики всё — это я вам покажу про HTML теперь всем пока ставьте лайки подписывайтесь на канал донате чтобы поехать развивался ещё сильнее пока.

0 комментариев
0

Читайте также