Загрузка страницы
Файлы веб-страниц хранятся на microSD карте памяти в виде HTM и сопутствующих им CSS и JS файлов. Когда пользователь открывает страницу сайта AMS, браузер запрашивает эту страницу у сервера и серверный движок собирает её из отдельных файлов в соответствии с инструкциями, внедрёнными в веб-страницы в виде макросов и логики, заложенной в скетч Arduino.
Браузер загружает запрошенную веб-страницу и отображает её на экране пользователя. Здесь возможны два варианта:
- Все дополнительные файлы (CSS, JS) уже внедрены в тело HTM страницы и больше ничего загружать не требуется
- В HTM файле встречаются ссылки для загрузки дополнительных файлов CSS или JS. В этом случае браузер инициирует загрузку этих файлов и посылает новые запросы серверу, в ответ на которые сервер отдаёт дополнительные файлы
В результате, все нужные файлы загружаются и в работу вступают загруженные JS скрипты. Эти скрипты инициируют запросы к серверу нужных данных. Сервер обрабатывает эти запросы и выдаёт на них ответы, содержащие запрашиваемые данные.
Этот обмен происходит постоянно: запросы следуют каждые 1–2 секунды до тех пор, пока в окне браузера у пользователя открыт сайт AMS. Этот сценарий работы относится к т. н. динамическим и интерактивным страницам. Статические страницы просто загружают контент и не инициируют обмен данными с сервером.
После получения данных от контроллера (каждые 1–2 секунды) JS скрипты помещают эти данные на отображаемую в браузере веб-страницу. В результате пользователь может в реальном времени наблюдать изменения параметров и графиков и нажимать на кнопки интерфейса, которые мгновенно изменяют нужные параметры внутри контроллера (благодаря беспрерывному круговому обмену данными).
Работа интерфейса
Весь процесс загрузки страницы и работы интерфейса, разбитый на этапы, выглядит так:
- Браузер запрашивает веб-страницу
- Сервер собирает её из частей и отдаёт
- Если необходимо, браузер запрашивает дополнительные файлы
- Браузер отображает страницу в соответствии с загруженными CSS и JS файлами
- Загруженные JS скрипты инициируют постоянные запросы к серверу
- Приходящие данные динамически помещаются на веб-страницы
- Круговой обмен данными длится до закрытия пользователем страницы в браузере
