Подписаться на получение новых статей на почту:

Web-интерфейс, SVG and GET-запрос. Шаг №91

Всем привет. «Сегодня» мы c Вами достанем из «долгого ящика» проект интерактивного WEB— интерфейса, подключим к нему микро контроллер AVR по измерению температуры и влажности. Передачу данных осуществим через ESP8266 GET запросом (статья 59). Далее полученные данные с веб-ресурса передадим Android-приложению SmartHouse, предварительно дополнив его выводом переменных на векторную графику и обращением к web.

Все по порядку. Для начала подготовим станицу http://www.ap-impulse.ru/interface.php к приему и обработке данных. А также рассмотрим возникшие при этом проблемы и варианты их решения. В выше приведенных записях мы уже проделали некоторые шаги, осталось теперь все собрать до кучи, немного довести до ума и запустить данную систему. Первоначальный вид интерфейса смотрите в статье №62.

Для начала добавим вывод второй температуры. Весь код я не буду приводить, т.к. мы уже его разбирали, а только изменённую часть. Добавляем вывод второго параметра:
svg.children («#label2»).text («Home T1 = „+result['t']+“; Home T2 = „+result['t1']);
SVG text

На рисунке выше результат. Параметры разделяются символом «&». Только помните это пока ручной ввод в адресной строке. Теперь подготовим место для вывода влажности. Немного изменим файл svg, а именно добавим фигуру и текстовое поле:
<rect id=“middle2» xmlns="http://www.w3.org/2000/svg" width="100" x="360" y="5" fill="#00FF5F" height="25"/>
<text id="label3" xmlns="http://www.w3.org/2000/svg" x="365" y="20" fill="#303030" font-family="OCRA" text-anchor="start" stroke="none" font-size="10">Home H = </text>
и добавим в адресную строку еще один параметр и соответственно также в поиске элемента массива:
svg.children («#label3»).text («Home H = „+result['h']+“%.»);
Рис. ниже. Все друзья. на этом мы пока закончили правку дизайна веб-интерфейса.

SVG, GET

На рисунке ниже web-интерфейс целиком.

WEB-interface

“Лезим” в середину страницы и ковыряем ее. Для начала необходимо понять, что мы используем два разных языка php and javascript, которые и работают в разных средах, первый на стороне сервера, второй – клиента. Что должна уметь наша система: на стороне сервера отлавливать GET – параметры, а на стороне клиента – обрабатывать их. Непосредственно у нас на данный момент, это записать значения в элементы графики. И вот возникает проблема. Как передать значения параметров в javascript? Ведь при запросе страницы у нас все переменные инициализируются заново и естественно все будут равны 0. Какой есть выход из данной ситуации. Их несколько:
— подгрузить через AJAX с сервера, например, сформировав JSON-ответ;
 — сохранять значение в cookies;
 — сохранять значение в сессии;
 — сохранять в БД;
 — менять текст в графическом элементе непосредственно с php;
 — встроить значение переменных в DOM-документа.

    Здесь мы и передадим переменные через DOM, положим их в data-атрибут, какого-то скрытого div-документа. Ниже код:
<div
    class='hidden'
        data-t='<?= $t ?>'
        data-t1='<?= $t1 ?>'
        data-h='<?= $h ?>'
></div>

B java script принимаем их: var myt = $('div.hidden').data ('t'); и т.д.

В начале поста мы «говорили», что у нас ручной ввод get- параметров, где адресную строку мы разбирали с помощью функции function getUrlVar (). Теперь просто заменим выводимые параметры в svg:
svg.children («#label2»).text ("Home T1 = «+myt+»; Home T2 = "+myt1);
Для ручного ввода я оставил тестовую страницу, которая использует растровую графику и не имеет данных недостатков. http://ap-impulse.ru/termometer.php.

Вроде бы все, но проблема осталась. Отловить параметр оказалась по крайне мере у меня не возможно. Поэтому в качестве буфера я взял текстовый файл, в статье №67 мы с Вами научились уже работать с текстовым файлом и базой данных. Вот этим и воспользуемся. Немного дополнив код, а именно чтением из файла, сортировкой строки по «-» «.» и цифрам, которые разделять будем пробелом. Ниже код (php):
$str = preg_replace («/[^- .0-9]/», '', $somecontents); //выборка
$str1 = spliti (" ", $str, 5); // разбиваем строку
if ($str1[0]){ // Здесь тонкость, наши значения, если положительные , то первый символ в файле пустой, поэтому здесь я сделал своеобразный сдвиг.
     $t = $str1[0];
     $t1 = $str1[1];
     $h = $str1[2];
} else{
     $t = $str1[1];
     $t1 = $str1[2];
     $h = $str1[3];    } //Далее через div in javascript

При загрузке страницы мы получим параметр из файла. Здесь пока одна температура. Настройку контроллера и подправку программы мы перенесем в следующую статью, дабы не смешивать две большие и технически разные темы.

Web, get, svg

AVR-web

В следующей статье мы с Вами рассмотрим работу двух микроконтроллеров, один из которых работает с модулем wi-fi и непосредственно передает данные на страницу интерактивного web интерфейса. Другой производит измерение, преобразование температур и влажности, отображение данных на дисплей и передачу данных по интерфейсу i2c (twi). На этом и остановимся. Всем пока

Просмотрено 114 раз.

Я на Google+

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

Ваш e-mail не будет опубликован.

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Subscribe without commenting