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

Создание интерактивного веб-интерфейса. Планирование. Шаг № 60

Обновлено 22.01.17. Всем привет. В прошлой статье мы с Вами остановились на том, что научились выводить данные устройства в интернет, а именно на сайт, используя модуль WI-FI и GET-запрос. Т.е. немного разобрались с основами технологии интернет вещей. Что бы идти далее нам необходимо немного разобраться с некоторыми веб-технологиями.

А именно разработать не сложный интерактивный веб-интерфейс, познакомится с технологиями, методами и другими нюансами данного направления. Что значит интерфейс – это граница между двумя различными системами, которая обеспечивает обмен информации и управления в реальном времени. Это как бы внешний вид системы. Веб-интерфейс – это взаимодействие пользователя с системой, прибором и т.д. через веб-сайт, приложение и т.п. с помощью браузера. Интерактивный веб-интерфейс подразумевает под собой смену состояния отдельных частей интерфейса без перезагрузки страницы. Да друзья все это необходимо понять и главное попрактиковаться.

Накидаем план действий на будущее, чем мы с Вами займемся.

1. (Статья №61) Для начала мы создадим карту изображения устройства для которого будем проектировать интерактивный веб-интерфейс. Для визуальной навигации по блогу, как говорится в какой статье мы создавали тот или иной узел прибора. Можно просмотреть по ссылке http://ap-impulse.ru/Kontroler.php . Для чего используем язык гипертекстовой разметки HTML и скриптовый язык javascript, а также библиотеки jQuery. Сам рисунок схемы прибора мы нарисуем, используя программу Fritzing, которая создана для визуализации законченного продукта (прибора, схемы). Создана в помощь дизайнерам и художникам. Данный немецкий продукт с открытым кодом. Как Вы увидите его библиотеки разработаны под Arduino, но так же без проблем  можно создать и другое устройство.

2. (Статья №62) Следующим шагом выведем GET-параметр с адресной строки на рисунок. Здесь, используя программу Fritzin, данное изображение сохраним как формат SVG. Где с помощью данной технологии и прототипно-ориентированного языка JavaScript а также библиотеки jQuery мы можем проектировать интерактивный веб-интерфейс. Можно просмотреть по ссылке http://ap-impulse.ru/interface.php

 

 

Кнопка в SVG.

3. (Статья №65). Добавим интерактивность веб — интерфейсу, кликабельностью кнопок. Получим доступ к объектам на рисунке и используем события onmousedown и onmouseup. Используем функции javascript для их обработки.

 

 

SMIL в SVG4. (Статья №66). Использование технологии SMIL, а также расширений SVG для анимации элементов рисунка. В данном случае на примере семисегментного индикатора происходит имитация его работы. А именно индикация HELL, SET, BUTT.

 

 

База данных и файл txt

5. (Статья №67). Рассмотрение способов сохранения данных на сайте. В текстовый файл и базу данных. Создание базы и разметка таблицы используя запросы и php. Сохранение GET-параметров.

 

 

 

Google Charts

6. (Статья №68) Построение графиков и диаграмм используя библиотеки Google Charts. Рассмотрение документации и описание кода. Интегрирование скрипта в свой проект. Использование статических данных.

 

 

Построение графика по данным из базы. AJAX, JSON7. (Статья №69). Построение графика, на технологии Google Charts, по данным из базы данных. Использование ajax-запроса и преобразование данных в json-формат. Рассмотрение возможных ошибок.

 

 

8. (Статья №70). Вывод времени в SVG файл, на рисунок семи сегментного индикатора. Используя объект Date в javascript, а также обработчик в кнопках для переключения анимации и времению.

 

С течением времени будем обновлять проект, добавлять функционал, и самое главное рассматривать их по отдельности.

На этом на сегодня все. Смотрите следующую статью-навигацию, а именно интерактивная карта контроллера сбора данных. Всем пока.

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

Я на 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