%&
Визуальный интерфейс выполняет две функции: отображает внутренние данные контроллера на веб-странице и позволяет передавать контроллеру команды и данные (управлять им) при помощи стандартных элементов (кнопок, полей ввода и т. п.), причём делает он это с минимальной задержкой около одной секунды.
Структурно в этой работе участвуют три блока: микроконтроллер, веб-браузер и JavaScript. Взаимодействие происходит следующим образом: Ардуино с сетевой платой постоянно прослушивает сеть (собственно веб-сервер) и как только вы открываете страницу веб-интерфейса, браузер посылает запросы на передачу всех данных (HTML, CSS, графика, скрипты и т. п.) серверу, работающему на Ардуино. Ардуино отдаёт эти данные и вы видите на экране (красивую) веб-страницу.
Далее браузер продолжает выполнение скриптов (JavaScript), полученных от сервера, которые и обеспечивают всю функциональность интерфейса (подкачивают и отображают новые данные и отправляют команды серверу). Таким образом складывается иллюзия работы с десктопным приложением, хотя физически браузер и Ардуино могут находиться на большом расстоянии. Эта технология называется Ajax.
На программном уровне, чтобы это всё работало, должны быть две взаимно соответствующие части — скетч на Ардуино и код JavaScript на стороне браузера. Они должны понимать команды и форматы данных друг друга. Транспортом для такого обмена служит формат XML, где данные обрамляются в теги наподобие стандартного HTML.
Вот, собственно, и весь принцип организации интерфейса микроконтроллера. Как видите, ничего сложного, а практическую реализацию можно посмотреть в коде.