Я только за. Нужно только грамотно выбрать наиболее перспективный инструмент, чтобы не терять время на освоение очередной проходной технологии.
У меня вообще сложилось впечатление, что мы стоим на пороге «графического» веба.
Ну и конечно нужен какой то пример для старта. Например аналог вольтметра с получением значений из М и изменением значений в М.
MojorDoMo и Processing
Модератор: immortal
-
lavstudia
- Сообщения: 31
- Зарегистрирован: Вт фев 04, 2014 9:29 am
- Благодарил (а): 0
- Поблагодарили: 4 раза
Re: MojorDoMo и Processing
Согласен! Сам по себе WebGL не может быть проходной технологией - это стандарт (как например стандарт протокола HTTP и др или SVG).
Так что можно писать код (javascript) с использованием только "чистого" WebGL. А вот фреймворки это выбор индивидуальный (как jQuery или MooTools).
Но лично я считаю, что фаворитом по давности разработки и большому сообщиству является three.js (http://threejs.org/), также много примеров и готовых реализаций (это лишь мое мнение). Разрабатывал на three.js - выявлен лишь один минус с производительностью костной анимацией (но для умного дома это не минус)
Также хочу отметить, что 3D датчики - это не придел, в перспективе хотелось бы получить 3D сцены помещения квартиры или дома с удобными средствами навигации. В целом для этого все уже есть, как пример online конструктор помещений на WebGL (в частности на framework three.js):
http://www.wanaplan.com/en/
Графики:
http://threegraphs.com/
Так что можно писать код (javascript) с использованием только "чистого" WebGL. А вот фреймворки это выбор индивидуальный (как jQuery или MooTools).
Но лично я считаю, что фаворитом по давности разработки и большому сообщиству является three.js (http://threejs.org/), также много примеров и готовых реализаций (это лишь мое мнение). Разрабатывал на three.js - выявлен лишь один минус с производительностью костной анимацией (но для умного дома это не минус)
Также хочу отметить, что 3D датчики - это не придел, в перспективе хотелось бы получить 3D сцены помещения квартиры или дома с удобными средствами навигации. В целом для этого все уже есть, как пример online конструктор помещений на WebGL (в частности на framework three.js):
http://www.wanaplan.com/en/
Графики:
http://threegraphs.com/
-
Alex
- Сообщения: 2357
- Зарегистрирован: Пт апр 20, 2012 12:53 pm
- Благодарил (а): 42 раза
- Поблагодарили: 262 раза
Re: MojorDoMo и Processing
Ну супер. Ждём какого-нибудь примера и простой инструкции что куда подключать и как запустить пример в MajorDoMo.
А тем временем мне удалось подключить вольтметр к вкладкам М.
Описание процедуры
-----------------------------
Для того, чтобы подключить объекты на процессинге на вкладки М нужно добавить в файл
\htdocs\templates\application.html
строки (рядом с подключением других JS)
<script type="text/javascript" src="/js/processing-1.4.1.js"></script>
<script language="javascript" type="text/javascript" src="/middle/middle_object.js"></script>
<script language="javascript" type="text/javascript" src="/middle/middle_connector.js"></script>
затем скопировать содержимое файла
electro_volt.php
(между тегами <body> … </body>) на вкладку М и заменить
<canvas id="sketch" data-processing-sources="electro_volt.pde" style="border: 1px solid white;"></canvas><br>
на
<canvas id="sketch" data-processing-sources="/processing/electro_volt.pde" style="border: 1px solid white;"></canvas><br>
-------------------
Вопрос к знатокам. Можно ли использовать этот живой canvas в качестве фона для других элементов странички и как?
-------------------
А тем временем мне удалось подключить вольтметр к вкладкам М.
Описание процедуры
-----------------------------
Для того, чтобы подключить объекты на процессинге на вкладки М нужно добавить в файл
\htdocs\templates\application.html
строки (рядом с подключением других JS)
<script type="text/javascript" src="/js/processing-1.4.1.js"></script>
<script language="javascript" type="text/javascript" src="/middle/middle_object.js"></script>
<script language="javascript" type="text/javascript" src="/middle/middle_connector.js"></script>
затем скопировать содержимое файла
electro_volt.php
(между тегами <body> … </body>) на вкладку М и заменить
<canvas id="sketch" data-processing-sources="electro_volt.pde" style="border: 1px solid white;"></canvas><br>
на
<canvas id="sketch" data-processing-sources="/processing/electro_volt.pde" style="border: 1px solid white;"></canvas><br>
-------------------
Вопрос к знатокам. Можно ли использовать этот живой canvas в качестве фона для других элементов странички и как?
-------------------
- Вложения
-
- bingo.png (38.43 КБ) 9075 просмотров
-
- bingo2.png (59.68 КБ) 9075 просмотров
-
Alex
- Сообщения: 2357
- Зарегистрирован: Пт апр 20, 2012 12:53 pm
- Благодарил (а): 42 раза
- Поблагодарили: 262 раза
Re: MojorDoMo и Processing
Попробовал three.js. Никаких проблем, всё понятно и нормально работает. Можно создавать любую графику.
Тот же вольтметр на three.js. Работает через middle-connector.
Тот же вольтметр на three.js. Работает через middle-connector.
- Вложения
-
- threejs.png (16.48 КБ) 9037 просмотров
-
lavstudia
- Сообщения: 31
- Зарегистрирован: Вт фев 04, 2014 9:29 am
- Благодарил (а): 0
- Поблагодарили: 4 раза
Re: MojorDoMo и Processing
Alex, отлично!
Я вчера как раз начал реализацию 3D сцены, для квартиры.
Схема следующая:
1) В программе Sweet Home 3D - создаем 3D сцену (своей квартиры)
2) Экспортируем в OBJ формат
3) На этом этапе мы уже можем видеть и собственно если нет необходимости в детализации и дополнения - использовать полученный obj в three.js (как пример импортировать в редактор three.js: http://threejs.org/editor/ (редактор имеет открытый исходный код - на github, как и three.js))
4) Если необходимо качество и детализация объектов, а также добавление 3D объектов сцены (как пример всевозможные датчики) необходима программа Blender 3D (популярный 3D редактор с открытым исходным кодом)
5) В Blender 3D импортируется полученный obj - по необходимости модернизируется
6) Из Blender 3D модернизированная 3D сцена экспортируется в формат three.js - https://github.com/mrdoob/three.js/tree ... rs/blender
7) Далее необходимо реализовать навигатор на three.js по 3D сцене (можно взять за основу http://threejs.org/editor/)
8) Реализовать взаимодействие с MajorDoMo на уровне JavaScript (это легко - но тредует определенной архитектурной проработки)
Как-то так..
Как будут готовые результаты - опубликую.
PS: Задача не трудная, очень жаль что так мало свободного времени....
Я вчера как раз начал реализацию 3D сцены, для квартиры.
Схема следующая:
1) В программе Sweet Home 3D - создаем 3D сцену (своей квартиры)
2) Экспортируем в OBJ формат
3) На этом этапе мы уже можем видеть и собственно если нет необходимости в детализации и дополнения - использовать полученный obj в three.js (как пример импортировать в редактор three.js: http://threejs.org/editor/ (редактор имеет открытый исходный код - на github, как и three.js))
4) Если необходимо качество и детализация объектов, а также добавление 3D объектов сцены (как пример всевозможные датчики) необходима программа Blender 3D (популярный 3D редактор с открытым исходным кодом)
5) В Blender 3D импортируется полученный obj - по необходимости модернизируется
6) Из Blender 3D модернизированная 3D сцена экспортируется в формат three.js - https://github.com/mrdoob/three.js/tree ... rs/blender
7) Далее необходимо реализовать навигатор на three.js по 3D сцене (можно взять за основу http://threejs.org/editor/)
8) Реализовать взаимодействие с MajorDoMo на уровне JavaScript (это легко - но тредует определенной архитектурной проработки)
Как-то так..
Как будут готовые результаты - опубликую.
PS: Задача не трудная, очень жаль что так мало свободного времени....
-
lavstudia
- Сообщения: 31
- Зарегистрирован: Вт фев 04, 2014 9:29 am
- Благодарил (а): 0
- Поблагодарили: 4 раза
Re: MojorDoMo и Processing
Alex - кстати, раз вы уже преревели вольтметр на three.js.
Был вопрос "Можно ли использовать этот живой canvas в качестве фона для других элементов странички и как?"
Если я правильно понял, элементы верстки должны быть внутри canvas, если это так, вот пример:
http://stemkoski.github.io/Three.js/CSS3D.html
Данный пример, может послужить отличной возможностью для размещения отдельных частей управления MojorDoMo на 3D сцене!!
Был вопрос "Можно ли использовать этот живой canvas в качестве фона для других элементов странички и как?"
Если я правильно понял, элементы верстки должны быть внутри canvas, если это так, вот пример:
http://stemkoski.github.io/Three.js/CSS3D.html
Данный пример, может послужить отличной возможностью для размещения отдельных частей управления MojorDoMo на 3D сцене!!
-
Alex
- Сообщения: 2357
- Зарегистрирован: Пт апр 20, 2012 12:53 pm
- Благодарил (а): 42 раза
- Поблагодарили: 262 раза
Re: MojorDoMo и Processing
Спасибо за ссылку. Пошёл изучать. (с) 
А вопрос был несколько иным. Есть блок div и есть фоновый цвет. Как можно вместо цвета поместить canvas с 3D графикой?
А вопрос был несколько иным. Есть блок div и есть фоновый цвет. Как можно вместо цвета поместить canvas с 3D графикой?
-
lavstudia
- Сообщения: 31
- Зарегистрирован: Вт фев 04, 2014 9:29 am
- Благодарил (а): 0
- Поблагодарили: 4 раза
Re: MojorDoMo и Processing
Фоновый цвет html тега это стиль. Canvas - html тег. Архитектурно ни как - стилями теги друг в друга не вставить!!
Если необходимо над canvas расположить другие теги (<div>) - их необходимо в коде разместить выше тега canvas и прописать соответствующие стили для позиционирования.
Скажите какой цели хотите добиться, возможно я смогу предложить решение...
Если необходимо над canvas расположить другие теги (<div>) - их необходимо в коде разместить выше тега canvas и прописать соответствующие стили для позиционирования.
Скажите какой цели хотите добиться, возможно я смогу предложить решение...
-
Alex
- Сообщения: 2357
- Зарегистрирован: Пт апр 20, 2012 12:53 pm
- Благодарил (а): 42 раза
- Поблагодарили: 262 раза
Re: MojorDoMo и Processing
Ну например блок «Температура» чуть выше на картинке. У этого блока белый фон. Идея была воткнуть вольтметр в качестве фона или хотя бы справа, где побольше свободного места. В общем засунуть в фон или точно спозиционировать.
И можно ли сделать 2 canvas-а и одним частично перекрыть другой?
На процессинге есть классные анимации, которые здорово было бы использовать как живые обои для информационных блоков на страничке.
И можно ли сделать 2 canvas-а и одним частично перекрыть другой?
На процессинге есть классные анимации, которые здорово было бы использовать как живые обои для информационных блоков на страничке.
-
lavstudia
- Сообщения: 31
- Зарегистрирован: Вт фев 04, 2014 9:29 am
- Благодарил (а): 0
- Поблагодарили: 4 раза
Re: MojorDoMo и Processing
К сожалению, у объектах, которые рисуются в Canvas, нет свойства z-index.
Их также нельзя группировать в слои.
Каждый новый объект рисуется поверх всех остальных.
Однако, вашу проблему можно решить использованием нескольких Canvas-ов в документе.
Просто разместите их поверх друг друга и задайте нужный z-index.
Рисуйте в каждом канвасе, как будто это и есть отдельный слой.
код
<div style="position: relative;">
<canvas id="layer1" width="100" height="100"
style="position: absolute; left: 0; top: 0; z-index: 0;"></canvas>
<canvas id="layer2" width="100" height="100"
style="position: absolute; left: 0; top: 0; z-index: 1;"></canvas>
</div>
пример на котором можно поиграть с позиционированием http://jsfiddle.net/bnwpS/17/
Повторюсь опять WebGL обеспечивает современный уроветь 2D и 3D - в нем все есть для этих целей, и главное архитектурно и производительно!
Их также нельзя группировать в слои.
Каждый новый объект рисуется поверх всех остальных.
Однако, вашу проблему можно решить использованием нескольких Canvas-ов в документе.
Просто разместите их поверх друг друга и задайте нужный z-index.
Рисуйте в каждом канвасе, как будто это и есть отдельный слой.
код
<div style="position: relative;">
<canvas id="layer1" width="100" height="100"
style="position: absolute; left: 0; top: 0; z-index: 0;"></canvas>
<canvas id="layer2" width="100" height="100"
style="position: absolute; left: 0; top: 0; z-index: 1;"></canvas>
</div>
пример на котором можно поиграть с позиционированием http://jsfiddle.net/bnwpS/17/
Повторюсь опять WebGL обеспечивает современный уроветь 2D и 3D - в нем все есть для этих целей, и главное архитектурно и производительно!