Электронное волшебное зеркало (Magic Mirror) своими руками

В интернете можно увидеть, как производители электроники представляют множество интересных устройств для умного дома. Одним из таких устройств есть электронное умное «волшебное зеркало» (Magic Mirror) на котором отображается необходимая информация, а также фотографии, видео и другое. Но будущее может уже сегодня постучаться и в Ваш дом и такое волшебное зеркало Вы сможете сделать своими руками.

Дилан Пирс за короткое время собрал своё «волшебное зеркало» которое помимо его лица показывает время, дату, анимированный прогноз погоды, новостную ленту. А так же для людей которые хотят получить положительные эмоции и энергетическую подпитку внизу волшебного зеркала выводятся случайным образом комплименты, например, как «Ты выглядишь особенно потрясающе сегодня».

Для того чтобы сделать «волшебное зеркало» (Magic Mirror) своими руками нам понадобится:

• Полупрозрачное зеркало;
• Тонкий монитор;
• Одноплатный мини-компьютер Raspberry Pi — https://alii.pub/6pn32c;
• Деревянные доски;
• Краска.

Как сделать электронное «волшебное зеркало», пошаговая инструкция:

Шаг 1: Зеркало.

Обычное зеркало здесь не подойдёт, оно должно быть полупрозрачным, если сказать поточнее: оно должно вести себя как зеркало, когда экран монитора находящийся позади зеркала — чёрный, и должно вести себя почти как обычное стекло, когда информация отображается на экране.

Это такой же эффект как у того зеркала, которое ставят в комнаты для допросов в полиции. Когда одна из двух комнат более светлая то стекло ведёт себя как зеркало, когда в двух комнатах светло то это зеркало становится прозрачным.

Поэтому прежде всего нужно достать такое полупрозрачное зеркало, подобные зеркала можно при желании найти в интернете или же возможно есть они и в Вашем городе.

Шаг 2: Монитор.

Прежде всего я задался вопросом какой монитор может подойти для создания проекта «волшебное зеркало». Должен ли это быть монитор б/у или же новый, какой диагонали он должен быть, насколько тонким он может быть, возможно ли перенести у него кнопки управления в другое место, при этом монитор должен быть достаточно яркий.

После некоторых размышлений и измерений, путём наклеивания клейкой ленты на стену, я установил, что мне нужен монитор диагональю 24 дюйма, при том, что большинство дисплеев с данной диагональю имеют разрешение 1080P, именно такое разрешение я и хотел использовать для данного проекта.

С этим я и пошёл по местным магазинам и большинство из найденных мониторов были забракованы мной так как имели панель управления с разъёмами на задней стороне, а мне нужно чтобы она была с одного из его боков.

В конце концов я обнаружил мониторы фирмы iiyama, они подходили для «волшебного зеркала» как нельзя лучше. Они относительно дёшевы, имеют узкие рамки в лицевой части, простые сенсорные кнопки и расположение разъёмов с правой стороны монитора. В итоге был выбран и заказан монитор 24″ iiyama E2481HS-B1.

Разобрав монитор я обнаружил что контроллер дисплея (электроника в металлической коробке) занимает немного пространства и остаётся достаточно места вокруг него для остальной электроники, которая необходима чтобы «оживить» волшебное зеркало, оставляя монитор таким же тонким как он есть.

Фактическая толщина панели дисплея составляет всего 9 мм, и имеет крошечный ободок 10 мм. Вместе с контроллером дисплея размеры составили: 556 мм х 323 мм х 46 мм (+ 6 мм зеркало). Эти размеры будут служить основой для нового деревянного корпуса.

Шаг 3: Создание корпуса.

После измерения размеров, необходимых для нового корпуса, начинается самое интересное. Использование такого материала как сосна позволит создать крепкую и устойчивую раму. Для лицевой панели, которое будет держать зеркало и монитор в месте я использовал деревянные плинтуса для пола. Причина этого заключается в том, что они имеют идеальный размер (ширина 30 мм), и имеют закругленный ободок. Нарезаем доски необходимой для корпуса длины, стягиваем между собой в углах шурупами или саморезами смазав стыкуемые поверхности клеем для прочности.

Так как монитор выделяет определённое количество тепла то надо сделать в боковых стенках корпуса вентиляционные отверстия.
Небольшой спойлер: Вес конечного продукта получился 6.5 кг.

Кроме того, в нижней части корпуса я создал небольшую щель, через который будет выводиться шнур питания.

Теперь нужно замазать щели, всё зашлифовать и покрыть краской, я покрасил в 2 слоя, получилось гладко и красиво. Всё, корпус для «волшебного зеркала» готов!

Для закрепления к раме монитора и зеркала я из рейки изготовил 4 крепёжных блока:

Всё, со столярной работой над «волшебным зеркалом» мы закончили, теперь перейдём к установке аппаратного обеспечения.

Шаг 4: Установка оборудования.

«Волшебное зеркало» начало приобретать свой вид. Я заказал зеркало, нашел нужный монитор и закончил гладкий белый корпус. Пришло время, чтобы начать установку аппаратного обеспечения.

До этого момента у меня уже были такие части:

• Монитор;
• Raspberry Pi;
• HDMI кабель (для подключения Raspberry Pi к монитору);
• Кабель переходник из USB в микро-USB (для питания Raspberry Pi);
• Шнур питания для питания монитора.

Во время поиска монитора я полностью забыл проверить, если ли у данного монитора порт USB чтобы запитать через него микрокомпьютер Raspberry Pi. Я предположил, что все современные мониторы оснащены USB портом по умолчанию. Но я был неправ. У этого монитора нет USB входа. Но я не хочу плодить множество проводов, я хочу, чтобы «волшебное зеркало» было запитано только одним шнуром питания.

Для этого я внутри корпуса установил двойную розетку, к которой будут подключаться стандартный кабель для питания монитора и более тонкий кабель питания (от магнитофона) который подключается к адаптеру питания взятый от iPad и от него уже USB кабелем питание +5 В идёт на Raspberry Pi. Теперь пришло время для установки программного обеспечения.

Шаг 5: Установка программного обеспечения для Raspberry Pi.

Итак, теперь, когда все оборудование установлено, пришло время, чтобы установить операционную систему на наш Raspberry Pi. Для того, чтобы удовлетворить все потребности для установки системы необходимы следующие функции:

• Подключение к Wi-Fi;
• Повернуть экран на 90 градусов, чтобы соответствовать портретной ориентации экрана;
• Локальный веб-сервер для размещения интерфейса;
• Браузер должен работать в полноэкранном режиме для отображения информации.

По этой (http://michaelteeuw.nl/post/142629029062/magicmirror2-a-huge-announcement) ссылке доступна для скачивания последняя версия интерфейса, а также инсталлятор и встроенный веб-сервер.

Выбор операционной системы для Raspberry Pi пал на Raspbian, так как она с открытым исходным кодом и большой поддержкой сообщества. После загрузки образа пришло время записи его на SD карту, вставляем в нашу малину и начинаем установку.

Так как копирование образа занимает много времени то у нас есть 3 варианта:

• Вы можете использовать метод RDISK, который описан в Raspberry документации;
• Вы можете схватить чашку кофе, сидеть сложа руки, и наслаждаться потреблением кофеина во время ожидания;
• Оба выше.

Я выбираю 3 пункт. Как только это было сделано, я загрузил малину, вошел в систему и начал настройку Wizzard введя sudo raspi-config в командной строке. В этой конфигурации, есть несколько важных пунктов, которые нужно сконфигурировать:
— Убедитесь, что система загружает рабочий стол (вместо командной строки);

— Настройте часовой пояс, чтобы «Волшебное зеркало» показывало правильное время;

— В разделе «Дополнительные параметры», убедитесь, что видео память разделена на 128 МБ.

Попробуйте повозиться с другими параметрами но помните, если вы всё испортите то запаситесь ещё одной чашкой кофе и переустановите операционную систему.

Подключение к Wi-Fi.

Так как я не хочу каких-либо дополнительных кабелей к Волшебному зеркалу, я использую WiFi для подключения его к Интернету. Настройка WiFi зависит он самого подключаемого в Raspberry Pi Wi-Fi USB донгла и зависит от её марки и типа. Поэтому описывать эту установку здесь бесполезно. Используйте гугл поиск введя в строке поиска: raspberry pi wifi настройка. Честно говоря эта часть занимает большую часть времени во время установки. Но настроив её единожды она безупречно работает и дальше.

Поворот экрана.

Волшебное зеркало разработано для использования в портретном режиме. Поэтому нужно повернуть экран на 90 градусов по часовой стрелке.

Настройки «БИОСа» хранятся в загрузочном разделе системы «/boot». Этот раздел содержит файл config.txt со всеми настройками. Чтобы повернуть все отображаемые данные на мониторе, добавьте следующую строку в этом файле:

display_rotate=1

Для более надежного подключения к монитору, у меня раскомментирована линия, что разрешает HDMI способ подключения:

hdmi_force_hotplug=1

Затем нужно сохранить файл конфигурации и перезагрузить Raspberry и затем вы увидите, что всё работает как надо!

Веб-сервер.

Для размещения интерфейса (который является просто обыкновенной веб-страницей), я нуждался в веб-сервере Apache который надо было запустить на Raspberry Pi. Так как такое использование является одним из наиболее распространенных методов в Rasberry то установка Apache очень упрощена.

Во-первых, нужно было убедиться, что я была установлена последняя версия программного обеспечения системы, выполнив следующую команду:

sudo apt-get update && apt-get upgrade –y

Ну теперь настало время на самом деле установить Apache:

sudo apt-get install apache2 apache2-doc apache2-utils

Готово! Но, чтобы убедиться, что я могу использовать некоторые PHP-скрипты на веб-сервере (подробнее об этом позже) я добил поддержку PHP:

sudo apt-get install libapache2-mod-php5 php5 php-pear php5-xcache

Готово! Перезагрузитесь, и теперь веб-сервер запущен и работает! Я бросил файл index.php в папку /var/www и указал своему браузеру Raspberry IP адрес. И всё заработало!

Kiosk Mode.

Теперь убедимся, что Raspberry Pi на самом деле показывает веб-страницу, я буду использовать для этого браузер Chromium в режиме kioskmode.

Опять же, устанавливается он довольно легко:

sudo apt-get install chromium x11-xserver-utils unclutter

Теперь нужно произвести некоторые дополнительные настройки, для этого отключаем заставку и autoboot в kioskmode. Для этого я отредактировал /etc/xdg/lxsession/LXDE/autostart (для новой версии Raspian используйте следующий файл: /etc/xdg/lxsession/LXDE-pi/autostart) и добавил # перед:

@xscreensaver -no-splash

Кроме того, я добавил следующие строки:

@xset s off

@xset -dpms

@xset s noblank

@chromium —kiosk —incognito http://localhost

Это поможет полностью отключить все функции начальной заставки, и гарантирует, что хром стартует сразу при загрузке ОС и загрузит страницу с веб-сервера в полноэкранном режиме.
Сохраняем файл и перезагружаем наш Raspberry Pi, чтобы проверить, работает ли всё как надо. Raspberry Pi не самый быстрый компьютер и понадобилось какое-то время для загрузки, но в конце концов на экране появился тестовый сайт с ориентированным на 90 градусов изображением, всё работает!

Шаг 6: Разработка интерфейса.

Итак, я нашел правильный тип зеркала, купил монитор, построил новый корпус, установил оборудование и настроил Raspberry Pi. Теперь пришло время для финальной части проекта: разработка интерфейса.

Когда я начал проект, я решил для себя, что интерфейс не должен поддерживать прямое взаимодействие с помощью зеркала. Так как это приведет к разводам и пятнам на моём блестящем и чистом зеркале, кроме того есть куда лучшие устройства для взаимодействия с пользователем. Я хотел, чтобы «волшебное зеркало» (Magic Mirror) было чисто пассивным источником информации.

Ещё более важным является тот факт, что волшебное зеркало должно в первую очередь быть обычным зеркалом, и таким образом, оно не должно быть полностью заполнено (бесполезной) информацией, под неё отводятся только края зеркала. Оставляя достаточно пространства, чтобы любоваться самим собой.

Я обдумал и составил список всего того, что должно выводится на экране:

— Комплимент. Что может быть лучше того, чтобы начать свой день с хорошего комплимента?

— Погода. Нужно перед выходом заранее знать, что происходит на улице, чтобы одеться по погоде.

— Часы и календарь. Чтобы любуясь на себя в зеркале не опоздать на важную встречу или на работу.

— Новостная лента. Чтобы всегда быть в курсе важных событий мира.

Конечно, есть много других возможностей чтобы наполнить содержанием волшебное зеркало. Но сейчас этого списка будет достаточно.

Основные настройки.

Как упоминалось ранее, интерфейс не является приложением под ОС, а всего лишь страничка в браузере открытая на весь экран. Но для её форматирования мне всего лишь нужно использовать HTML, CSS и Javascript. И в качестве дополнительного бонуса, это позволяет мне разрабатывать и тестировать интерфейс на моем Маке, а затем отправлять её в волшебное зеркало.

В дополнении к написанному собственноручно коду, я использую несколько библиотек с открытым исходным кодом, чтобы ускорить процесс:

Jquery

Как практически любой сайт, Magic Mirror использует Jquery, чтобы облегчить манипуляции с DOM. Идеально подходит для ленивых людей, как я.

Moment.js

Это помогает мне легко манипулировать с разметкой времени. Сильно экономит время при работе с датой и временем.

FeedToJson

Удобный способ конвертировать RSS-каналы в javascript в формате JSON.

iCal Parser

Преобразует данные из iCal в JSON. К сожалению, эта библиотека не очень отполирована, так что над ней требуется дополнительная работа.

Эти библиотеки в сочетании с моим собственным кодом HTML и Javascript достаточно, чтобы сделать зеркало действительно магическим.

Дизайн.

Конечно, мое волшебное зеркало нуждается в блестящем дизайне. Как добиться этого? Гладкая и красивая типографика с помощью шрифта Helvetica Neue, и соответствующая иконография для получения информации о погоде.

Так как зеркало будет функционировать только как зеркало, когда нет света позади него то важно использовать черный фон. А для лучшего контраста с фоном информативное наполнение должно быть белого цвета с некоторыми оттенками серого.

API

Для того, чтобы получать необходимые данные, которые я хочу, чтобы отображались на зеркале, я использую каналы некоторых открытых API и новостных лент. Для тех из вас, кто не знает, что такое API зайдите в Википедию там есть отличное описание.

Openweathermap.org

Openweathermap это бесплатный ресурс с отличным API для получения погодных условий и прогнозных данных. Здесь я беру данные о текущей погоде и прогнозу погоды на последующие дни.

iCal Calendar

ICloud позволяет Вам делиться своим календарём, используя формат iCal, как известно javascript не позволяет отправлять запросы напрямую. Мне нужно открыть эти данные с помощью PHP прокси, используя всего 3 строки кода:

<?php

$url = ‘https://p01-calendarws.icloud.com/ca/subscribe/1/mysupersecreticloudhash’;

echo file_get_contents($url);

Это позволит сделать календарь на том же сервере, что и интерфейс, с помощью только requestingcalendar.php.

Ранее упомянутый парсер iCal помогает мне преобразовывать данные в полезную информацию. К сожалению, ICloud использует некоторые стандартные теги не имеющие аналогов в своих рассылках, поэтому я добавил несколько дополнительных строк преобразования в моём файле JavaScript.

Лента новостей NOS

Лента новостей это просто RSS лента общественного вещания Голландии. К сожалению, они не поддерживают формат JSON, поэтому я использую плагин FeedToJson для преобразования RSS данных в формат JSON.

Все другие материалы, такие как текущая дата и время, и комплименты это всё мной написанные простые скрипты на JavaScript.

Автоматическое обновление

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

<?php

echo json_encode(array(‘gitHash’=>trim(`git rev-parse HEAD`)));

Сравнение производится в основном файле JavaScript. Но это возможно, только если файл HTML имеет хэш одинаковый с текущей версией:

<script type=»text/javascript»>

var gitHash = ‘<?php echo trim(`git rev-parse HEAD`) ?>’;

</script>

Теперь, сравнение хеша, которое обновляется каждые 3 секунды:

(function checkVersion()

{

$.getJSON(‘githash.php’, {}, function(json, textStatus) {

if (json) {

if (json.gitHash != gitHash) {

window.location.reload();

window.location.href=window.location.href;

}

}

});

setTimeout(function() {

checkVersion();

}, 3000);

})();

Все это волшебство позволяет мне просто обновлять интерфейс «волшебного зеркала» (Magic Mirror), войдя в Raspberry Pi с помощью SSH, вносить изменения в соответствующую папку, и выполнять запросы git pull.

Для всех интересующихся я весь этот код выложил на GitHub и он доступен по этой ссылке https://github.com/MichMich/MagicMirror.

Конечно, волшебное зеркало способно на многое другое, поэтому я буду и дальше заниматься обновлением этого проекта, Вы можете также повторить мой проект и собрать своё электронное «волшебное зеркало» своими руками.