Wemos D1: AJAX tutorial

Статья посвящается всем пользователям ардуиноподобного микроконтроллера Wemos D1. Описывать подробно сие чудо не стану, в сети достаточно информации на эту тему. Остановлюсь на главном — разъяснении примера кода.

Эту штучку я планирую использовать как систему управления каким-либо роботом. Она способна самостоятельно подключаться к Wi-Fi или же работать в качестве точки доступа. Но для управления нужны какие-то элементы управления (простите за повторение 🙂 ). В принципе, контроллер в состоянии обрабатывать сырые HTTP-запросы и, по большому счёту, это всё, что от него требуется. Но писать команды в адресной строке браузера не очень-то удобно. В этом случае приложение под андроид решило бы все проблемы, однако у нас же мир веба!

Необходимо было построить веб-интерфейс на простом HTML и умудриться прошить этим как-то контроллер. Но как подключить к скетчу arduino файлы стилей? Как подключить библиотеки JQuery? Секрет очень прост: всё необходимо писать в самом скетче. Создаём специальную переменную, скажем, html, и пихаем в неё все необходимые нам данные! И выводим это как plain text. Да-да, вы не ослышались, выглядеть это будет подобным образом:


String html = "

<!DOCTYPE html>
<html>
  <head>

    <style>
    Поместите сюда все стили, которые вам нужны
    </style>
     <script>
        Поместите сюда всь код, который вам нужен. 
        Используйте XmlHttpRequest вместо JQuery
     </script>
  </head>

<body>
  
<div class = \"some_data_to_show\">
"

html += temperature;

html += "
  </div>

</body>

</html>

Обратите внимание, все двойные кавычки экранируются. Для удобства работы написан небольшой шаблонизатор на Javascript, который проделает всю работу за вас. Код я прикреплю в конце статьи.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

*

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.