Опрос

Что для Вас Умный Дом?


Результаты


Реклама

Web-интерфейс своими руками для управления диммером X10

01/03/2011 21:13:38

"Всем выйти из сумрака!"

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

В качестве драйвера, интерфейса к X10 в Linux я оставил у себя программу с забавным и почти матерным названием heyu.
Напомню, что в отсутствии поддержки в моем модуле команд типа Preset Dim, управление диммером происходит с помощью запуска команды:

Уменьшаем яркость на 50%
heyu dim a2 10
Увеличиваем яркость на 15%
heyu bright a2 3

В приведенном примере a2 адрес модуля в сети.
Для начала я попробовал установить domus.Link - frontend к программе heyu.

Domus.Link - Web-интерфейс к X10
Рубильничек как в светильниках 70-х годов порадовал...

Интерфейс простой, понятный, но без каких-либо изысков. Степеней диммирования, как хорошо видно на скриншоте только пять. Уверен, что в подавляющем большинстве случаев в жизни этого более чем достаточно, но не спортивно. Конечно, картинки можно поменять, но хотелось все же вписать управление в собственный Web-интерфейс. К слову, русские альясы к устройствам domus.Link не поддерживает. И причина здесь даже не в самом domus.Link, а в heyu, который такие альясы не принимает.

Напомню, мой Web-интерфейс Умного Дома строится по модульному принципу. За основу взят набор CSS и JS от Grid 960. Информация в блоках (дивах) обновляется с разной периодичность с помощью jQuery. Впрочем, монстроидальность конструкции определенно уже прослеживается и в планах разгрузить интерфейс, а точнее сделать его зависимым от пользователя. Для меня пусть остается таким какой есть, для детей жены попроще, с минимальным набором информации, но и повеселее или даже помоднее. Кому-то, кажется, нравится розовый, а кому-то хочется побольше черного.

Но вернемся к описанию диммера в базе данных. Я решил, что все исполнительные устройства будут у меня в единой таблице БД. К уже существующим полям: Адрес устройства (key_addr), Наименование (key_title), Метка/Альяс (key_label) я добавил два новых поля: Тип (key_type), которое может принимать значения (auto, key или dimmer) и Уровень (key_level) для сохранения текущего состояния диммера.

Теперь мне нужен был какой-нибудь простой и стандартный "ползунок", с помощью которого можно было бы изменять уровень яркости. Для этих целей я применил готовый модуль FC-TrackBar, который удачно вписывается в jQuery.

TrackBar. Ползунок на JS
Вот этот компонент подойдет для управления диммером

Дело за малым - вписать все это хозяйство в существующий интерфейс.
Вот несложный PHP-код для вывода состояния ключей и управления ими (если их тип не авто, что означает, что они управляются программами автоматически).

<script type="text/javascript">

$(document).ready(
function()
{
    $('.key').click(function () {
        var label = $(this).attr("label");
        var action = $(this).attr("action");
        var key = $(this);

        key.text("подождите");

        $.get("key.php?key_label=" +label + "&key_pio=" + action, function(data){
            $.get("mod_keys.php", function(data){$("#mod_keys").html(data);});
        });
     });

    $('.dim').click(function () {
        var label = $(this).attr("label");
        var level = $('#dim_' + label).attr("value");
        $.get("key.php?key_label=" +label + "&key_level=" + level, function(data){
        });
     });

})
</script>                                                               

<?

echo "<table border="1">";

echo "<tr><th>Устройство</th><th>Сост.</th><th>Посл. включ.</th></tr>";
$sql="SELECT key_title, tmpID, key_pio, key_label, key_addr, key_type, key_level FROM tmp_7";
if(!($result=mysql_query($sql,$conn)))
echo "Error";
else
{
    while(($data=mysql_fetch_row($result)))
    {
        echo "<tr>";
            echo "<td>$data[0]</td>";

            echo "<td>";
                if ( $data[2] == 1 )
                echo "<b>Вкл</b>";
                else
                echo "Выкл";

                if ( $data[5] != "auto" )
                {
                    if ( $data[2] == 0 )
                    echo " / <a href="javascript:void(0)" class="key" label="$data[3]" action="1">Вкл</a>";
                    else
                    echo " / <a href="javascript:void(0)" class="key" label="$data[3]" action="0">Выкл</a>";
                }

                if ( preg_match("/^x10./", $data[4]) )
                {
                    if ( $data[5] == "dimmer" && $data[2] == 1 )
                    {
                        #echo "<br>";
                        echo "<input type="hidden" name="level" id="dim_$data[3]" value="$data[6]" size="2"> ";
                        ?>

                        <scripT>
                        $(document).ready(function()
                        {
                            $('#dim_<? echo $data[1]; ?>').trackbar(
                            {
                                onMove : function() { $('#dim_<? echo $data[3]; ?>').attr("value", this.leftValue); },
                                dual : false,
                                width : 50,
                                leftLimit : 1,
                                leftValue : <? echo $data[6]; ?>,
                                rightLimit : 20,
                                rightValue : 1
                            });
                        });
                        </script>

                        <?
                        echo "<div id="dim_$data[1]"></div>";
                        echo "<a href="javascript:void(0)" class="dim" label="$data[3]" action="0">изменить</a>";
                    }
                }
            echo "</td>";
        echo "</tr>";
    }
}
echo "</table>";
?>

Здесь видно, что все управление передается скрипту key.php, который непосредственно и выполняет команды. Вот часть этого скрипта (с сокращениями по части работы с БД), которая отвечает за работу с X10 диммером.

$key_level_old = // Считываем из БД значение свойства key_level;

if ( $key_level > $key_level_old )
{
     $bright_value = $key_level - $key_level_old;
     exec("heyu bright $key_addr $bright_value");
}
elseif ( $key_level < $key_level_old )
{
     $dim_value = $key_level_old - $key_level;
     exec("heyu dim $key_addr $dim_value");
}

// Обязателно записываем новое состояние в поле key_level

В результате получаем вот такую штуку.

Далеко до совершенства, зато в одном списке может быть неограниченное количество таких блоков, степеней регулировки 20, отправка команд X10 модулю происходит с помощью технологии Ajax без перезагрузки страницы. Вместо или вместе с наименованием можно вывести картинку или план этажа с пометкой включаемой комнаты. Последний столбец - дата последнего включения. Но главное, что это свой интерфейс, а значит делать в нем можно все, что угодно. И совсем не сложно. ;)

Автор: Andrey_B
Любое использование материалов сайта возможно только с разрешения автора и с обязательным указанием источника.


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