ФОРУМ КУПИТЬ

Последние статьи

ВСЕ СТАТЬИ

Рисуем план дома для управления освещением

07/06/2015 16:21:25

Когда значительная часть освещения была автоматизирована с помощью устройств MegaD-328 Kit, появилась небольшая проблема. Дело в том, что в моем Web-интерфейсе управление освещением было реализовано через длинную табличку, в которой были прописаны все лампочки. Выглядело это примерно так...

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

Как обычно, я решил все сделать просто, используя доступный инструментарий и уже работающий код, только слегка модифицировав его. Очевидно, что удобнее всего управлять светом, имея план помещения. В самом деле, достаточно нарисовать план дома, расставить на нем лампочки и сделать их нажимаемым (кликабельными). Вопрос - как? Ничего сложного. Для отрисовки плана не нужно ни знаний, ни какого-либо специального ПО. В Интернете существую десятки он-лайн сервисов для рисования 2D планов и даже визуализации их в 3D (ну, нам это пока не надо). Я ткнул в первую же ссылку, которую дал мне Google и попал вот на такой сервис.

Это сервис называется Room Sketcher, но уверяю вас, это далеко не единственный сайт для рисования планировок. Можно использовать абсолютно любой. Главное, чтобы имелась возможность сохранить нарисованное для дальнейшего использования. Room Sketcher позволяет бесплатно хранить до 5 проектов. В каждом проекте может быть несколько уровней. Более, чем достаточно. Я быстренько набросал план первого этажа.

Мебель расставлять не стал, хотя библиотека содержит богатый выбор элементов, так как показалось, что нагромождение предметов на плане будет затруднять управление группами освещения. Подобные он-лайн рисовалки обычно не позволяют экспортировать картинку. Ну и не надо! Всегда есть заветная кнопочка Print-Screen. И вот у нас есть JPEG.

А теперь самое интересное. Необходимо с помощью средств CSS и Javascript наложить на план изображение лампочки и заставить все это работать. Вы думаете это сложно? Нисколько! Вот пример того, как это делается.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title></title>

<style>
.cnv{height: 900px;width: 900px; position: relative;background:url(/plans/plan-1.jpg) no-repeat 0 0;}
.lamp{position: absolute;height: 50px;width: 50px;border-radius: 50%;}
.on{border: 2px solid #cb2424; background-color: #ffd900;box-shadow: 0px 0px 100px 100px rgba(255, 191, 0, 0.3)}
.off{border: 2px solid #cb2424}
</style>

<scripT type="text/javascript" src="js2/jquery-1.11.2.min.js"></script>

<scripT type="text/javascript">

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

        if ( lamp.hasClass("off") )
        {
            action = 1;
            lamp.removeClass("off").addClass("on");
        }
        else
        {
            action = 0;
            lamp.removeClass("on").addClass("off");
        }

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

})
</script>                                                               

</head>
<body>

<div class="cnv">
<div class="lamp off" label="light_holl" style="top:210px;left:550px"></div>
<div class="lamp on" label="light_mainstairs" style="top:210px;left:200px"></div>
</div>


</body>
</html>

Мы "кладем" картинку на бэкграунд, а сверху рисуем лампы, где класс "off" означает выключенное состояние, а "on" - включенное. Для состояния "on" описываем свойство полупрозрачной тени, которая как бы эмитирует освещение лампой близлежащей территории. Смотрится по-моему неплохо.

Более того, этот код еще и работает - то есть включает и выключает свет. За это отвечает Java-script, который использует AJAX для вызова key.php, отправляющий команды MegaD-328 на переключение портов. Согласитесь, совсем несложно! И эффектно. Разумеется, форму и цвет ламп можно сделать любыми. Можно нарисовать настоящую люстру или светильник. А можно делать разные планы помещения для ночи и дня. И ночью лампы могли бы реально освещать зоны на плане. Форму тени можно также менять как угодно. Она не обязательно должна быть круглой. Например, для светодиодных лент тень можно вытянуть. Вообще CSS - мощная штука!
Но я на текущем этапе решил сделать как можно проще и понятнее. Источник освещения я обозначил крупным красным контрастным кругом, в который легко попасть на маленьком дисплее телефона.
Осталось только все это хозяйство завести в систему управления. Вы, наверное, обратили внимание, что координаты лампочки задаются в пикселах от верхнего левого края изображения. Этого вполне достаточно. Я только добавил еще одно поле в своей системе управления.

В поле через точку с запятой записываются три значения: этаж, отступ сверху, отступ слева. Все. Теперь необходимо только немного откорректировать ab-pages.php и ab-data.php. Исходники всех скриптов и системы управления можно взять на этой странице.

    $keys_p = $ab->doc_read($ab->get_id("keys"));

    $result = $ab->select("SELECT key_title, tmpID, key_pio, key_label, key_addr, key_type, key_level, key_place FROM tmp_".$keys_p['ListID']." WHERE key_place LIKE '1;%' AND ContID=".$keys_p['ContID']);
    for ( $i = 0; $i < count($result); $i++ )
    {
        if ( $result[$i]['key_pio'] == 0 )
        $key_class = "off";
        else
        $key_class = "on";

        $key_place = explode(";", $result[$i]['key_place']);

        echo "<div class="lamp $key_class" label="".$result[$i]['key_label']."" style="top:".$key_place[1]."px;left:".$key_place[2]."px"></div>";
    }

И в итоге вместо неудобной таблички мы получаем что-то вроде этого.

На рисование плана этажа ушло минут 40, так как RoomSketcher не является профессиональным инструментом и эркеры дались довольно тяжело, зато все остальное было сделано за считанные минуты. Современные Web-технологии, основанные на HTML5, CSS, JS-фреймворках и PHP позволяют быстро и качественно решать самые разнообразные задачи в области построения интерфейсов для систем Умного Дома.

Управлять светом, используя план помещения, стало намного проще и удобнее!

 

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



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

(необязательно, не отображается на сайте)


Сортировка комментариев: Последние сверху | Первые сверху

2017-04-16 14:22:59 | nihil777
Не смог победить :) В общем, температуру показываем внутри тела страницы внутри тега div с указанием стиль="top:270px;left:150px"


2017-04-16 14:14:52 | nihil777
Внутри тега style: .temp{background: fc0; padding: 5px; border: solid 1px black; float: left; position: absolute;}
Внутри тела: t=22.0°C


2017-04-16 14:12:21 | nihil777
Теги съелись. Еще раз
/
/.temp{background: fc0; padding: 5px; border: solid 1px black; float: left; position: absolute;}
/
/
/t=22.0°C
/


2017-04-16 14:10:40 | nihil777
Пользуясь случаем, скажу: "Спасибо, Андрей!". Не сайт, а кладезь мудрости!
Сам спросил, сам отвечу:

.temp{background: fc0; padding: 5px; border: solid 1px black; float: left; position: absolute;}


t=22.0°C


2017-04-16 13:29:11 | nihil777
Друзья, привет. А как используя код статьи вывести несколько показаний температуры в местах установки на плане этажа?


2016-12-15 13:21:57 | igor
На смартфоне не видно план этажа. Лампочки включаются


2015-11-09 13:30:45 | Andrey
А какой смысл в " function(data){}" в строке:
$.get("key.php?key_label=" +label + "&key_pio=" + action, function(data){});


2015-06-13 20:22:26 | Andrey_B
Anton, а это интересная мысль. Нужно подумать как это лучше реализовать.


2015-06-13 20:21:31 | Andrey_B
Alex, спасибо, согласен.


2015-06-13 17:02:29 | Anton
Андрей, а где же значения термо датчиков? Для наглядности сразу уж и температуру хотелось бы видеть.


2015-06-11 18:24:51 | Alex
Я знаю что вы не разработчик, и я не придираюсь, просто поправил ваш javascript, может будет полезно


$(document).ready(
$('.lamp').click(function () {
var lamp = $(this); / лучше сохранить указатель в переменную, потому что каждый раз вызывая $(this) вы каждый раз делаете поиск по странице
var label = lamp.attr("label");
var action = 0; /значение по умолчанию, var надо писать только 1 раз в функции

if (lamp.hasClass("off")) {
action = 1;
lamp.removeClass("off").addClass("on");/в jQuery можно выполнять подобные действия цепочно
} else {
lamp.removeClass("on").addClass("off");
}

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


2015-06-07 18:27:25 | Haus
Только сегодня утром задумался, почему Андрей неделает графической визуализации дома и тут раз статья. Самому больше нравитца трехмерное изоброжение плана этожа. Спосибо что вы есть.