Разработка домашнего сайта

24/11/2008 17:11:17

Гюльчатай, открой личико

В предыдущей статье "Сервер для Умного Дома" я рассказывал, что в качестве сервера выбрал Debian Linux, а в качестве интерфейса общения с пользователем, то есть со мной, HTTP-технологию или попросту Web. Преимущества очевидны. Такой интерфейс доступен с любого компьютера домашней сети, а также из Интернета. Нет необходимости что-то устанавливать на клиентском компьютере. Бесплатные, достаточно мощные средства разработки серверного ПО, такие как язык программирования PHP, СУБД MySQL, мощный сервер Apache.

В рамках данного материала не хотелось делать лекцию для новичков в PHP. Вся документация доступна на сайте www.php.net
Здесь я расскажу о наиболее общих подходах к разработке.

Прежде всего, нужно сказать, что Web-сервер домашней автоматизации - это всего лишь интерфейс, а не основное ядро системы. Ядром системы в моем случае является комплекс скриптов, работающих постоянно или запускаемых по расписанию, через cron, которые записывают результаты своей работы в базу данных. Например, каждые 5 минут запускается PHP-скрипт, который опрашивает все датчики температуры и записывает полученные данные в соответствующие таблицы БД. Программы, которые запущенны постоянно - это, например, скрипт-сервер дискретных датчиков 1-wire, скрипт управления отоплением, скрипт управления аэрацией, программа для видеонаблюдения, сервер 1-wire сети owfs, сервер синтеза речи и т.д. Скрипты, написанные для Web нужны для отображения состояния систем, модулей и управления "ядерными" программами и процессами.

В своей вводной статье я написал, что постараюсь максимально использовать накопленный опыт и результаты работы других людей, поэтому когда речь идет о разработке Web-сайта, коим является наш Web-интерфейс, удобно использовать какую-нибудь готовую систему управления информацией, иначе CMS, иначе "движок". Таких систем в Интернете масса, как открытых, так и коммерческих. Я взял одну из них, которая позволяет легко управлять разделами и документами сайта, имеет встроенный DHTML-редактор (похожий на Word), гибкую систему управления табличными данными. Последнее мне было особенно важно, так как система автоматизации дома генерирует, обрабатывает, учитывает множество параметров и эти данные нужно хранить в БД. Можно создавать таблицы руками (посредством phpMyAdmin), но для этого нужно иметь некоторые базовые знания реляционных СУБД и это достаточно неудобно. Выбранная мною система позволяет в человеко-ориентированном виде создавать любые таблицы, связывать их с разделами и документами, легко редактировать и направлять данные из генерирующих скриптов в эти таблицы.

 

Скриншот CMS - редактирование табличных данных. Показания приборов Скриншот системы управления содержанием

 

Таким образом у меня появилась возможность отображать любые данные на своем Web-сайте. Однако работа с Web-интерфейсом в обычных обстоятельствах отличается от работы с Desktop-приложением. При нажатии какой-либо кнопки или ссылки Web-страница как правило перезагружается. Перезагрузка страницы происходит не мгновенно, особенно если на странице присутствует много информации и графики. Это неудобно. Также неудобно обновлять всю страницу целиком, когда нам нужно обновить значение одной единственной цифры... Но выход есть и заключается он в использовании при программировании Web-сайта Java-script или библиотек, построенных на этом языке, а также технологии, получившей название AJAX. Первая библиотека, которая попалась под горячую руку называлась jQuery. Из описания на сайте мне показалось удобным ее использование и я стал применять ее для разработки своего интерфейса.

Использовать jQuery достаточно просто. Нужно скачать с сайта jquery.com саму библиотеку и положить ее в папку, где расположены файлы веб-сайта. Далее простой пример того, как я отображаю значение температурного датчика.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">

$(document).ready(
function()
{
    $.get("data.php?ow_read=temp_in", function(data){$("#temp_in").html(data);});
})
</script>                                                              
</head>
<body>
Температура в доме: <span id="temp_in" style="font-size:24pt;font-weight:600;color: #b11111"></span>
</body>
</html>

В данном примере видно, что данные предоставляются скриптом data.php, который обращается к БД и отображает последнее значение температуры, записанное в таблицу. Параметр ow_read скрипта определяет датчик, значение которого нужно вывести.
С помощью такого кода на страницу подгружаются данные из скрипта data.php при загрузке страницы. Но данные не статичны, а значит их нужно менять. Для этого я добавил следующий код

var timer = window.setInterval(
function()
{ $.get("data.php?ow_read=temp_in&"+Math.random(), function(data){$("#temp_in").html(data);}); }, 35000);

Math.random() в параметрах скрипта нужен для того, чтобы значения не кешировались.

А как же внешний вид?

Любой интерфейс состоит не только из функционального программного кода, но и из некоторого графического представления, внешнего вида, дизайна. Интерфейс должен быть понятным, удобным в работе, а в моем случае еще и легко изменяемым, расширяемым, ну и конечно более-менее красивым. Для системы автоматизации "Умный дом" на мой взгляд наиболее отвечает этим требованиям блочно-колоночная организация Web-интерфейса. Например, один блок или группу блоков можно задействовать для отображения информации с камер наблюдения, другой блок для отображения работы системы отопления, третий для индикации состояния устройств или энергопотребления. Кроме того, такой интерфейс лучше сделать "резиновым", то есть подстраиваемым под разные разрешения экрана от 1024х768 и выше.

Покопавшись в Интернете можно найти множество готовых шаблонов для решения этой задачи. Я выбрал фреймворк, который называется Fluid 960 Grid System. Весьма простой и удобный инструмент идеально подходящий для создания требуемого интерфейса.

Компоновка блоков может быть любой. Например, так.

HTML-код для такого фреймворка предельно примитивный:

<div class="grid_6">
    <div class="box">
        <h2>Камера 1</h2>
        <div class="block">
            <div id="camera1"><img id="camera1-img" src="/page.php?s=6&Photo_Name=/snap/camera1.jpg&Photo_Width=340&Photo_Quality=95"></div>
            <a href="/zm/index.php?view=watch&mid=1" target=_blank>Камера 1</a> | <a href="/archive.php">Архив</a>
        </div>
    </div>
</div>

<div class="grid_10">
    <div class="box">
        <h2>Информационное табло</h2>
        <div class="block">
            <div id="info" style="height:275px;"></div>

        </div>
    </div>
</div>

Если мы берем за основу 16-колоночную организацию, то в указанном примере grid_6 займет 6 колонок из 16, а grid_10, соответственно, 10 из 16. Таким образом можно размещать в ряд любое количество колонок от 1 до 16.  Fluid 960 Grid System обрабатывает также заголовки блоков, поддерживает организацию меню, сворачивание/разворачивание окон, различные эффекты типа аккордеона. Также прописано оформление таблиц (показано на скриншоте).

В примере DIV'ы camera1 и info обновляются с помощью jQuery.

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



2009-11-06 12:36:17 | Andrey_B
Александр, я выбрал CMS, созданную в одной из местных контор по разработке сайтов. Эта CMS хороша тем, что в ней реализован очень удобный механизм визуального создания и редактирования пользовательских таблиц, а также набор готовых PHP-функций для записи в эти сгенерированные таблицы данных. Таким образом я создал множество таблиц: для учета электроэнергии, газа, воды, температурных показателей, состояния электронных ключей. В этих же таблицах ведется журнал всех операций с 1-wire сетью, лог ошибок. Настройки системы отопления тоже тут же. Контуров несколько и у каждого контура свои параметры. Каждый контур представлен в отдельной записи. В общем, все модули системы хранят информацию в базе данных, созданной с помощью этой CMS. Готовое решение я не предлагаю, так как в принципе такими функциями обладают и другие CMS и каждый может адаптировать свое решение.


2009-11-06 09:12:08 | Александр
Скажите пожалуйста, а какую CMS вы в конечном итоге выбрали?