MojorDoMo и Processing

[Alex]

Возник очередной вопрос. Где-то читал, что программу на Processing-е (там кажется Ява) можно интегрировать прямо на веб-страничку. Было бы здорово осуществить это на практике. Только как? Тестовую программку на Processing-е могу предоставить.

[sergejey]

немного погуглил и нашел http://processingjs.org/ -- это для запуска программ в браузере.
но вообще скинь код, посмотрим что можно сделать

[Alex]

Вот примеры как это выглядит на веб-страничках:

http://glebsite.net/assets/3dclock/index.html
http://www.openprocessing.org/sketch/59627

[ser009]

Monitor program for Arduino интересная программа
http://n.mtng.org/ele/arduino/arduinomon.html

[Alex]

Если кто не знает — Processing это гениальный язык программирования и визуализации. На нём можно делать совершенно потрясающие вещи. У меня давно была идея интегрировать его в М для продвинутой визуализации данных и процессов. Оказалось, что это не так сложно и теперь в М можно просто творить чудеса.

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

Для примера я взял готовый 3D “живой” гиперкуб и переделал под свои нужды. Каждый кубик это сенсор. Гиперкуб в реальном времени получает данные из системы и отображает цветом состояние сенсоров.

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

Подобные объекты можно использовать для визуализации больших массивов информации (например, сотни датчиков) или сложных процессов (например, части системы могут иметь своё здоровье, которое наглядно отображается в 3D виде.)

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

Ещё вопрос. Это работает на отдельной страничке, но не хочет работать в стандартных вкладках М. Как бы это исправить?

[sergejey]

Alex, интересная наработка. а как происходит в данном случае подключение?

[Alex]

В архиве есть готовый работающий пример. А в общем случае действуем так:

Берём в Интернете готовый файл pde или пишем сами программу на Процессинге.

Далее берём файл processing-1.4.1.js и помещаем в папку js.

В php файле подключаем js библиотеки, как в примере.

Дальше хитрость: чтобы получить значение из JS в pde файле используем переменную (но не объявляем её!), которую объявляем в php файле.

Вот и всё. А дальше дело техники — в php файле присваиваем ей значение, которое автоматически становится доступным внутри pde программы.

Всё работает на ура, никаких проблем замечено не было.

------------------
Теперь сняты все ограничения на графику внутри М. Можно сделать не только любой индикатор, но запрограммировать любой 2D или 3D мир прямо на страничке. Кто не особо понял о чём это я — посмотрите демо на Процессинге — глаза вылезут на лоб, а вопросы отпадут.

Любому объекту из этих демо можно сопоставить значение, событие, функцию, сервис, аларм, здоровье, состояние, пространство выбора, пространство возможностей из реальной системы (в данном случае М). Мало того, все эти объекты интерактивны и их можно наделить характером, возможностями, реакциями и т. д.

Можно отображать внутреннюю сущность частей системы, а можно управлять сложной системой через визуальные 3D объекты. Мы взаимодействуем с сущностями, а сущности меняют состояние системы.

Сказать, что это фантастика — это ничего не сказать. Это вообще вынос мозга.
------------------

Теперь о задачах.

1. Заставить это работать внутри вкладок М, а не на отдельной страничке.

2. Написать промежуточный (объект на JS?) слой Ajax на для лёгкого сопряжения значений переменных в М и переменных в Процессинге.

Задачи ерундовые. Для нормального программиста 1 часа хватит.

[sergejey]

Да, очень круто. Надо "пощупать"

[Alex]

Промежуточный слой middle-connector и пример живого (реакция 1-2 сек.) 3D вольтметра.


Промежуточный слой
------------------------------

1. Запрашивает и обновляет значения свойств объектов М в программах на Процессинге.
2. Транслирует изменения значений в программах на Процессинге обратно в М.
3. Запускает скрипты М по запросу программ на П.

Является посредником между П и М в обе стороны.


Живой 3D вольтметр
----------------------------

Пример 3D объекта, который в реальном времени получает напряжение в сети и отображает его в 3D виде. Он медленно поворачивается и его можно вращать мышкой и нажимать на кнопки Set- и Set+, которые меняют свойства объекта voltHome в М.


НЕРЕШЁННЫЕ ЗАДАЧИ
------------------------------
Осталось решить только одну проблему. Как заставить это работать в стандартных вкладках М. Help!


Как запускать
------------------

Папки из архива поместить в дирректорию

htdocs

Запускать строкой

http:// ... ip ... /processing/electro_volt.php

Поменять названия объектов в файле

electro_volt.php

на свои.

[lavstudia]

Processing - штука хорошая. Но есть одно серьезная проблема - это не web стандарт, а очерезная "java поделка". В очередной раз необходимы ухищрения с прослойками и др. проблемами.

Рекомендую обратить внимание на WebGL - web стандарт. Код пишется непосредственно в javascript, а все современные браузеры используют WebGL по умолчанию и ненужно больше всяких плагинов и дополнений.
Для WebGL существует множество framework-ов. Приведу пример особо значимых и достигших большого развития:
threejs: http://threejs.org/
babylonjs: http://www.babylonjs.com/
goo: http://www.gootechnologies.com/