Делаем систему «Умный дом» на Arduino часть 1.

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

Основной идеей послужило идея обеднения и общий контроль устройств на радио сигнале 315 и 433 Мгц. К счастью на сегодняшний день таких устройств превеликое множество. Это и различные пульты, датчики движения и дыма. Контроллеры жалюзи, протечек воды. Я постараюсь показать как сделать систему автоматизации за очень небольшие деньги. Ведь тот де датчик китайский движения стоит около 300 руб.

Read more »

Подборка бесплатных java библиотек.

Twitter Bootstrap

Сайт: http://twitter.github.com/bootstrap/

свободный набор инструментов для создания сайтов и веб-приложений. Включает в себя HTML и CSS шаблоны оформления для типографики,  веб-форм, кнопок, меток, блоков навигации и прочих компонентов веб-интерфейсов, включая JavaScript расширения.

Основные инструменты Bootstrap:

Сетки — заранее заданные размеры колонок, которые можно сразу же использовать, например ширина колонки 140px относится к классу .span2, который мы можем использовать в CSS описании документа.

Шаблоны — Фиксированный или резиновый шаблон документа.

Типографика — Описания шрифтов, определение некоторых классов для шрифтов таких как код, цитаты и т. п.

Медиа — Представляет некоторое управление изображениями и Видео.

Таблицы — Средства оформления таблиц, вплоть до добавления функциональности сортировки.

Формы — Классы для оформления не только форм, но и некоторых событий происходящих с ними.

Навигация — Классы оформления для Табов, Вкладок, Страничности, Меню и Тулбара.

Алерты — Оформление диалоговых окон, Подсказок и Всплывающих окон.

Лицензия: Apache License v2.0

HTML KickStart

Сайт: http://www.99lime.com/

KickStart представляет собой набор JS и CSS-файлов, которые помогут вам создать макет  страницы.

Dojo

Сайт: http://dojotoolkit.org

свободная модульная библиотека JavaScript. Разработана с целью упростить ускоренную разработку основанных на JavaScript или AJAX приложений и сайтов. Разработка библиотеки была начата Алексом Русселом в 2004 году. Библиотека находится под двойной лицензией: BSD License и Academic Free License. Dojo Foundation — некоммерческая организация, созданная для продвижения Dojo. Dojo используется в Zend Framework, начиная с версии 1.6.0.

Элементы интерфейса

меню, закладок, всплывающих подсказок;

селекторов даты, времени; часов;

сортируемых таблиц, динамических диаграмм, векторной 2D графики;

элементов интерфейса «дерево», с возможностями drag-and-drop (nested sets, вложенные множества);

Rich Text Editor;

различных HTML-форм с возможностью проверки ввода пользователя;

анимированных эффектов, и возможностей построения своих собственных эффектов.

Лицензия: BSD/AFL v2.1

Ext Core JS

Сайт: http://www.extjs.com/products/extcore

Библиотека JavaScript для разработки веб-приложений и пользовательских интерфейсов, изначально задуманная как расширенная версия Yahoo! UI Library, однако преобразовавшаяся затем в отдельный фреймворк. До версии 4.0 использовала адаптеры для доступа к библиотекам Yahoo! UI Library, jQuery или Prototype/script.aculo.us, начиная с 4-ой версии адаптеры отсутствуют. Поддерживает технологию AJAX, анимацию, работу с DOM, реализацию таблиц, вкладок, обработку событий и все остальные новшества Web 2.0.

Лицензия: MIT

Highlight

Сайт: http://softwaremaniacs.org/soft/highlight/

Автоматическая подсветка синтаксиса на веб-страницах с использованием JavaScript.

Лицензия: BSD

json2

Сайт: http://www.json.org/js.html

Текстовый формат обмена данными, основанный на JavaScript и обычно используемый именно с этим языком. Как и многие другие текстовые форматы, JSON легко читается людьми.

Несмотря на происхождение от JavaScript (точнее, от подмножества языка стандарта ECMA-262 1999 года), формат считается языконезависимым и может использоваться практически с любым языком программирования. Для многих языков существует готовый код для создания и обработки данных в формате JSON.

Лицензия: Public Domain

jQuery

Сайт: http://jquery.com

Библиотека JavaScript, фокусирующаяся на взаимодействии JavaScript и HTML. Библиотека jQuery помогает легко получать доступ к любому элементу DOM, обращаться к атрибутам и содержимому элементов DOM, манипулировать ими. Также библиотека jQuery предоставляет удобный API по работе с AJAX.

Лицензия: MIT/GPL

jQuery UI

Сайт: http://jqueryui.com

Библиотека JavaScript с открытым исходным кодом для создания насыщенного пользовательского интерфейса в веб-приложениях, часть проекта jQuery. Построена поверх главной библиотеки jQuery и предоставляет разработчику упрощенный доступ к её функциям взаимодействия, анимации и эффектов, а также набор виджетов.
Лицензия: MIT/GPL

MochiKit

Сайт: http://mochikit.com

Это легкая библиотека Javascript которую написал и поддерживает Bob Ippolito. Эта библиотека полезна в разработке интерактивных веб-страниц, которые поддерживают диалог с веб-сервером, так называемые Ajax приложения.MochiKit формирует основу клиентской функциональности части веб-приложения Python TurboGears.
Лицензия: MIT/AFL v2.1

Modernizr

Сайт: http://www.modernizr.com/

Это JavaScript-библиотека, которая узнаёт, что из HTML5 и CSS3 умеет браузер пользователя. Определяя возможности браузера, разработчик может сделать откат некоторых функций для старых версий браузеров. Создатели Modernizr называют такую проверку feature detection, и это гораздо эффективнее, чем просто определить браузер, его версию и ОС.
Лицензия: MIT/BSD

MooTools

Сайт: http://mootools.net

Это свободный JavaScript-фреймворк для разработки кроссбраузерных веб-приложений и веб-сервисов.

MooTools является модульным, объектно-ориентированным фреймворком, созданным для помощи разработчикам JavaScript.
Лицензия: MIT

Prototype

Сайт: http://prototypejs.org

JavaScript фреймворк, упрощающий работу с Ajax и некоторыми другими функциями. Несмотря на его доступность в виде отдельной библиотеки, он обычно используется программистами вместе с Ruby on Rails,Tapestry, script.aculo.us и Rico.

Лицензия: MIT

Pure

Сайт: http://beebole.com/pure

Библиотека для простой и ультра-быстрой  генерации HTML из JSON данных.
Лицензия: MIT

Raphaёl

Сайт: http://raphaeljs.com

Библиотека на JavaScript — Raphaël. Данная библиотека использует для работы SVG и VML и служит для облегчения работы с векторная графикой в вебе.
Лицензия: MIT

RightJS

Сайт: http://rightjs.org/

Представляет собой JavaScript для разработки кросс-браузерного веб-приложения. RightJS работает на основе расширяемой модульной архитектуры.  Он имеет небольшой размер  (15k сжатый) включает в себя многие функции, такие как DOM-манипуляции, анимация, формы, хлебные крошки, обработчик событий (в том числе нестандартных событий). RightJS является прямым потомком библиотеки Prototype .
Лицензия: MIT

script.aculo.us

Сайт: http://script.aculo.us

JavaScript-библиотека для разработки пользовательского интерфейса веб-приложений, построенная на фреймворке Prototype.Обычно используется программистами вместе с Ruby on Rails, однако также доступен в виде отдельной библиотеки, и присутствует в составе некоторых других каркасов для разработки сайта.Был создан Томасом Фукс в процессе работы над веб-интерфейсом инструмента цифрового управления активами Fluxiom компании Wollzelle^[1], впервые был опубликован в июне 2005 года.
Лицензия: MIT

Yahoo! User Interface Library (YUI)

Сайт: http://developer.yahoo.com/yui

Библиотека JavaScript для создания богатых интерактивными возможностями приложений или/и пользовательского интерфейса. Использует AJAX, анимацию, надстройки над XMLHttpRequest и DOM, «drag-and-drop», слайдеры, слайды, календари, деревья, табы и другие новинки, составляющие понятие «Web 2.0». Собственное API для работы с JavaScript. Подробная документация с примерами.
Лицензия: BSD

Read more »

Передвижные кнопки на Jquery-UI

Сегодня представляю вам урок в котором покажу подвижные кнопки, хотя это могут быть и не кнопки а любые объекты. Но все по порядку.

Демо Скачать

1. Первое что мы сделаем это подключим библиотеки и стили.

1 2 3 4 5 6 7 8 9 10 11 12 13

<link rel="stylesheet" href="css/bootstrap.min.css" />        <link rel="stylesheet" href="css/style.css" />            <script src="jquery-1.8.3.js"></script>        <script src="jquery-ui.js"></script>        <script src="bootstrap.min.js"></script>        <script type="text/javascript" src="bootstrapx-clickover.js"></script>        <script type="text/javascript">              $(function() {                  $('[rel="clickover"]').clickover();              })        </script>

Здесь подключаются библиотеки jquery, jquery-ui и bootstrap а также надстройка над bootstrap библиотеку clickover при помощи котророй мы сделаем всплывающие окошки с редактированием параметров.

2. Зададим файл стиля style.css, пропишем размеры контейнера где могут передвигаться кнопки, а также картинку заднего фона и отступы.

1 2 3

.main_content{background-image: url("bg_content.jpg"); padding:64px 30px 30px; border-left:1px solid transparent;margin-left:240px;width: 800px;} .draggable { width: 40px; height: 40px; cursor: move;} #containment-wrapper { width: 100%; height:1000px;  }

3. Пишем функцию inbtn, при помощи этой функции мы заполняем содержимое окна clickover. Библиотеку jquery нужно подключить заново так как clickover создает изолированный объект. Функция savem

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59

<?php function inbtn($nms) { ?>     <script src='js/jquery.min.js'></script> <form id='mmenu'> <table>           <?php $db = new PDO('sqlite:./database/main.sqlite'); $st = $db->query('SELECT * FROM mmenu WHERE id = "'.$nms.'"'); $results = $st->fetchAll();  foreach ($results as $row) {     echo '<tbody>';     echo '<tr><td>Номер:  <input style=\'font-family: tahoma; text-align: center; font-size: 12px;\' size=\'10\' type=\'text\' value=\''.$row['id'].'\' id=\'id\'></td></th>';     echo '<tr><td>Название: <input style=\'font-family: tahoma; text-align: center; font-size: 12px;\' size=\'30\' type=\'text\' value=\''.$row['name'].'\' id=\'name\'></td></tr>';     echo '<tr><td>Иконка:  <input style=\'font-family: tahoma; text-align: center; font-size: 12px;\' size=\'20\' type=\'text\' value=\''.$row['img'].'\' id=\'img\'></td></tr>';     echo '<tr><td align=\'left\'><input class=\'btn \' type=\'button\' onclick=\'savem()\' value=\'Сохранить\'></td>';     echo '<td align=\'left\'><input class=\'btn btn-danger\' type=\'button\' onclick=\'remm()\' value=\'Удалить\'></td></tr>'; } echo ('</tbody></table>'); ?> </form>   <script type='text/javascript'> function savem() { window.location.reload(); $.ajax({ type: 'POST',url: 'upmmenu.php', data:{     'id'    : $('#id').val(),     'name'  : $('#name').val(),     'img'   : $('#img').val(),  },   });return true; }   function remm() { window.location.reload(); $.ajax({ type: 'POST',url: 'delmmenu.php', data:{     'id'    : $('#id').val()  },   });return true; } </script>    <?php } ?>

4. Собственно сам код передвижных кнопок а также сохранение их положения и добавление новых.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61

<?php if(isset($_POST['submitaddbtn'])) { $db = new PDO('sqlite:./database/main.sqlite'); $st = $db->query('SELECT id FROM  mmenu'); $db->exec('INSERT INTO mmenu (name) VALUES ("New")'); }   if(isset($_POST['submit'])) {   $db = new PDO('sqlite:./database/main.sqlite'); $st = $db->query('SELECT id FROM  mmenu'); $results = $st->fetchAll(); foreach ($results as $row) { $i = $row['id'];  $db->exec('UPDATE  mmenu SET top="'.$_POST['top'.$i.''].'" WHERE id="'.$i.'"'); $db->exec('UPDATE  mmenu SET left="'.$_POST['left'.$i.''].'" WHERE id="'.$i.'"'); }   }   ?>       <?php   $db = new PDO('sqlite:./database/main.sqlite'); $st = $db->query('SELECT * FROM mmenu');$results = $st->fetchAll(); foreach ($results as $row) { ?>     <div id="dragl<?php echo $row['id']; ?>" style = 'top:<?php echo $row['top']; ?>px; left:<?php echo $row['left']; ?>px; ' class="draggable">   <button data-toggle='modal' href='#advanced' class="btn btn-<?php echo $row['slide']; ?> "><i class=" <?php echo $row['img']; ?>"></i> <?php echo $row['name']; ?></button>           <input TYPE=HIDDEN value='<?php echo $row['top']; ?>'  size='1' name='top<?php echo $row['id']; ?>' id='top<?php echo $row['id']; ?>'/>     <input TYPE=HIDDEN value='<?php echo $row['left']; ?>'  size='1' name='left<?php echo $row['id']; ?>' id='left<?php echo $row['id']; ?>'/>           <span style=" font-size: 22px; color:#000;" class="icon-move"></span>     <a rel="clickover" data-placement="<?php if ($row['left'] > 400){echo 'left';} else {echo 'right';} ?>" data-html="true" data-content="<?php  inbtn($row['id']); ?>" data-original-title="Редактирование" style=" font-size: 18px; color:#000;" href='#' class=" icon-cog"></a>   </div>        <script>   $(function() {     $( "#dragl<?php echo $row['id']; ?>" ).draggable({           containment: "#containment-wrapper",     scroll: false,          drag: function(event, ui) {       document.getElementById('top<?php echo $row['id']; ?>').value =   ui.position.top  ;      document.getElementById('left<?php echo $row['id']; ?>').value =   ui.position.left  ;     }       });   }     );   </script>   <?php   } ?>

Read more »