Где найти красивый пример JS Web Interface аппаратуры?
Добрый день,
не из праздного любопытства интересуюсь примерами, на Ваш взгляд, удачных веб интерфейсов аппаратов. То есть когда есть железка (осциллограф, ЧПУ станок, электронное пианино или еще что-то) и к нему сделан веб интерфейс на JS и юзер использует свой мобильник или свой компьютер для управления через веб этой аппаратурой.
Гуглил, но находится мало примеров, вернее не нашел ничего, на мой взгляд удобного и красивого. У самого есть только опыт работы с видеокамерой микроскопа, но, ИМХО, очень глючно и мне не понравилось.
Вдруг кто знает какие-то красивые и удобные примеры, которыми бы можно было бы в демо режиме по вебу поиграться, был бы премного благодарен.
Спасибо!
Где найти красивый пример JS Web Interface аппаратуры?
Если сами не смогли найти, значит вряд ли кто другой что-то знает лучше вас, значит попробуйте сами сделать, мне что-то лень примеры такие делать, может быть бы сделал бы. Я видел только красивый пример наблюдать, а не управлять - Rapid SCADA. Есть ещё красивый пример, но я не смоуг его показать, у меня принтер может через веб браузер сканировать, факс отправлять, и даже печатать (технология ePrint). Ну и ещё есть пример наоборот, когда аппаратура обращается к веб сервису, и я её тоже не смогу показать. Допустим мой 3D принтер может подключаться к специальному веб сайту, и оттуда скачивать готовые 3D модели для печати.
То есть когда есть железка (осциллограф, ЧПУ станок, электронное пианино или еще что-то) и к нему сделан веб интерфейс на JS и юзер использует свой мобильник или свой компьютер для управления через веб этой аппаратурой.
ЧПУ станок
ЧПУ станком нельзя управлять через интернет, ему посылаешь G-коды, он пошёл вырезать или высверливать детали/болванки. Это только если есть KUKA, то да можно
электронное пианино
Ну оно очень дорогое, где-то 40 тыщ € стоит. Мой синтезатор подключается к компу и становится MIDI синтезатором (XG), но его надо доставать, мне не охота его доставать, оно весит 10 килограмм. А нажатые клавиши как от компьютера так если сам нажимаешь можно видеть только на маленьком дисплее. Читайте про Web MIDI.
Дневник тяжелобольного инвалидаСпасибо за ответ.
Хорошо, расширим поиски - хочется найти примеров веб-интерфейс на JS программ, которые бы выполняли какую-то работу по включению чего-либо. Пусть даже сервер умного дома, хотя конечно было бы лучше какие-то научные аппараты, которые потом какие-нибудь графики строят. Некоторые варианты по умному дому находятся, хочется чего-то красивого. То есть чтобы Вы с первого взгляда могли сказать - Вау!
А станком ЧПУ тоже по веб-интерфейсу можно управлять, если загрузить G-коды и по веб интерфейсу смотреть как происходит выполение.
То есть чтобы Вы с первого взгляда могли сказать - Вау
Ну если вам нужно только для себя, то поставьте Notebook Jupyter. Я поставил Notebook Jupyter..., играюсь в Numpy и в Biopython. Там очень красивые вещи получаются, прям ВАУ! См:
Это график блеска звезды бетельгейзе, график отображается прям в браузере https://i.ibb.co/zmQqDPD/jupyter-betelgeuse-min.jpg
А это 3D модель протеина, который можно увеличивать и вращать https://i.ibb.co/0q6HqtJ/jupyter-biopython-min.jpg
Дневник тяжелобольного инвалидаА зачем это делать через веб морду?
хотя бы для того, чтобы интерфейсы на любой пользовательской платформе были бы одинаковы.
Тем более что выполнение происходит в "песочнице"
Скажите, пожалуйста, а что Вы имели ввиду, я просто не понял...
Вот попытаюсь примеры привести,
Пусть, например, у вас есть электронная собачка, как в Бостон-Динамиксе, она бегает у вас по участку, собирает информацию, какие цветы уже раскрылись, что полить, какие соседи приходили. Вы в любой момент с любого Вашего домашнего устройства можете зайти в "мозг" собачки и посмотреть что она узнала.
Или еще пример, теперь индустриальный.
У вас есть хроматограф с автосемплером (это такая хрень для анализа веществ) , Вы туда загрузили тучу пробирок для анализа и пошли по другим делам, и, в какой-то момент времени решили посмотреть как оно функционирует, не нужно и какие-то расходники поменять, или еще чего.
Если все это делать на клиентских программах, то это будет тянуть очень много ресурсов для программирования всего этого на всех современных платформах. Причем, например, под виндой - это дотнет, под линуксом, это QT, на эпле, мобильниках и планшетах, тоже свое придется делать, а так - одна морда на все, а работа по сути - на внутренних мощностях самого устройства.
Ну если вам нужно только для себя, то поставьте Notebook Jupyter. Я поставил Notebook Jupyter..., играюсь в Numpy и в Biopython. Там очень красивые вещи получаются, прям ВАУ!
Спасибо, обязательно попробую, правда пока он пишет, что де
Too many users running https://github.com/ipython/iphyton-in-depth! Try again soon.
То бишь вы хотите иметь кроссплатформенный клиент доступа к серверу только для чтения? Тогда что именно находится на стороне сервера особой роли не играет.
Имелось в виду то, что исполнение приложений в браузере приводит к ограничениям в использовании ресурсов компьютера.
То бишь вы хотите иметь кроссплатформенный клиент доступа к серверу только для чтения? Тогда что именно находится на стороне сервера особой роли не играет.
в большей части, конечно для чтения, но запуск команд - это же управление, то есть запись. Иметь сессию с паролем - вроде в вебе не сильно сложно, не так ли? В некоторых случаях людям и пароль не нужен, если девайс находится в закрытой подсетке. Все, кто к нему по веб протоколу ходят, все и могут управлять.
Имелось в виду то, что исполнение приложений в браузере приводит к ограничениям в использовании ресурсов компьютера.
Совсем не обязательно броузерскому приложению напрямую лезть в ресурсы. За него это сделает сервер. Который предоставит в пользование API. Которое и будет использовать любой клиент, в том числе и из под броузера
На чём делать вопрос как бы вторичный, главное как?
https://timeweb.com/ru/community/articles/kak-sdelat-sayt-...
но запуск команд - это же управление
А что будет если два пользователя захотят одновременно нажать кнопку старт?
Иметь сессию с паролем - вроде в вебе не сильно сложно
С технической стороны особых проблем нет, а вот когда начинаешь думать о безопасности.
Спасибо всем участвовавшим за советы и ссылки!
Либо само устройство работает как сервер.
Да, я именно это имел ввиду, ведь сейчас поднять сервер можно на ембеддед плате даже за 10 бакс.
А что будет если два пользователя захотят одновременно нажать кнопку старт?
...
С технической стороны особых проблем нет, а вот когда начинаешь думать о безопасности.
да, проблемы очень понятны и не надуманные, но, оставим их на совести самого прибора, ведь в нем это как-то разруливается.
Мне хотелось бы посмотреть УСПЕШНЫЕ решения, например, есть неуспешное, от Rhode&Schwartz, там веб морда осциллографа просто полностью повторяет обычный интерфейс с кнопками и ручками, который имеется на приборной панели, и, одно дело - крутить хорошую американскую ручку, а другое дело, крутить мышью виртуальную ручку... тьфу,
идиоты, что такое придумал.
То есть еще раз: есть устройство, в нем есть сервер, с сервера юзер грузит себе JS гуй и начинает пользовать. Если надо расшарить права доступа, то логинится, если нет, то работает как есть.
Вот есть ли такие успешные и красивые примеры, существенно сложнее веб морды принтера или сканера, и, если да, покажите, мне их, пожалуйста!
PS: вопрос не стоит как и в чем рисовать, вопрос стоит именно в том, чтоб полюбоваться успешным решением и сравнить с тем, что есть у меня, чтобы свое решение улучшить.
То бишь, хотелось бы увидеть примеры успешного веб дизайна для аппаратуры.
Тут у каждого будут свои предпочтения
https://dribbble.com/choephix/collections/2345299-Sleek?pa...
Даже палитру найти подходящую проблема, а дизайнер её просто "чувствует".
меня больше сторона UX интересует, грубо говоря, как принято красиво и удобно обыгрывать какие-то действия и функционал.
Интересно, а для индустриальных и научных аппаратов, кроме осциллографов и роутеров есть ли какой-то хороший web interface, который бы можно было бы посмотреть?
меня больше сторона UX интересует
Ну там тоже не всё так просто
https://fireseo.ru/blog/ux-dizajn-podrobnoe-rukovodstvo/
https://livetyping.com/ru/blog/printsipi-i-osnovy-ux-dizaj...
https://habr.com/ru/post/313718/
хороший web interface, который бы можно было бы посмотреть?
Это уже как словить хорошую рыбку
То есть чтобы Вы с первого взгляда могли сказать - Вау!
Так пойдёт? Я уже несколько раз сказал Вау! Если что я автор всего этого (3d модели и 2d стрелку сам рисовал, небульшую библиотеку на javascript сам писал).
Прикреплённые файлы Дневник тяжелобольного инвалида
НП. Чтобы переместить просто пишите move(id, coord, value), где id - это id XML-элемента, coord - на какую ось перемещать x, y, z, а value это значение (шаг). Тоже самое с rotate - rotate(id, coord, value), только в coord ещё есть a, a - угол. Допустим ищите в файле 3d_boston_dyn_spot.html DEF='spot_TRANSFORM' , потом добавляете туда аттрибуту id='spot', внизу добавляете допустим кнопку, добавляете событие onclick, и пишите такой код допустим: onclick="move('spot', 'x', 5);"
Дневник тяжелобольного инвалида
Сорри, конечно, но на "Вау" совсем не катит.Хотя бы так
Да научился я анимировать, только Blender может сохранить анимацию только в видео (mp4/mkv), или нужно специальный плагин, которого у меня нет, вот только-что специально для вас сделал простенькую анимацию - https://cloud.mail.ru/public/d3ih/t7ZutN8Aw, и тут ещё примеры, можете глянуть: 1, 2, 3, просто Blender не экспортирует анимацию в X3D, там делается всё по другому. Ниже опишу...
Во-первых нужен специальный плагин BS Exporter, этот плагин наверное и сохранит возможно анимацию, просто так этот плагин не дадут, нужно какое-то там эл. письмо писать, что-то запрашивать.
Во-вторых если этого ничего нет, то анимацию X3Dom-е делают вот-так https://translate.google.com/translate?sl=en&tl=ru&u=https... ну или спомощью JavaScript... от-того эта библиотека и называется X3Dom, можно спомощью JavaScript обращаться к XML элементам, и их атрибутам.
Ну и в-третьих, вы подтверждаете слова моего врача, что я не могу работать 
. Я код подправил, на JavaScript можно теперь перемещать, нажав на кнопки, если всё это сделать ещё через сокеты, WebRTC или AJAX, то можно наблюдать в реальном времени, для Вас это не Вау!, а для меня Вау-Вау-Вау!.
P.S.:Раньше когда не было canvas и стоял на компах только ослик, я пользовался вот этой библиотекой http://www.walterzorn.de/jsgraphics/jsgraphics.htm, и ещё классный фреймворк видел у Uber, что-то типа vis gl называется.
Дневник тяжелобольного инвалида
Хотя бы такЧтобы сделать хорошу анимацию, чтобы робот ходил, нужно специальный mocap костюм покупать, а он стоит от 40 тыщ евро и выше. Тогда можно сделать хорошую анимацию ног. И то нужно ещё месяц учиться ходить как робот spot
Дневник тяжелобольного инвалида
Так тема не о анимации каких-то сложный 3D моделей, а взаимодействие с оборудованием и визуализация/анимация состояния оборудования в веб браузере в 3D. Нужно только написать прослойку между программой которая визуализирует в 3D и оборудованием. Т.е. допустим программа считывает состояние какого-нибудь ЧПУ станка, и посылает это куда-то на веб сервер, а пользователь видит всё в своём веб-браузер. Я вообще не понимаю что хочет ТС, я думал что ТС нужно вот типа такого https://rapidscada.org/product/screenshots/
Дневник тяжелобольного инвалидаВы центр объекта для вращения с центром тяжести объекта совместите, а то, когда ваш объект, мышкой крутишь, очень не реалистично получается.
А так, да, если только вращать, это еще 25 лет назад можно было на OpenGL делать, тогда это на Вау тянуло.
Я про что-то клевое, чего еще нет ни у кого, и от чего сейчас реально Вау сказать можно.
Я про что-то клевое
Не думаю что что то найдется целевым поиском, чисто случайно только.
Вот например, регулировка усиления сигнала. Ползунок или "кружок" - а вот и непонятно, когда так, а когда и иначе.
НП, вот пример веб интерфейса взаимодействие с оборудованием см.:
https://i.ibb.co/N6Zt6Vt/hp00-min.jpg
https://i.ibb.co/wyT2sRj/hp01-min.jpg
https://i.ibb.co/n6S6sKq/hp02-min.jpg
Вот пример взаимодействие Mackie контроллера с веб браузером
https://www.youtube.com/watch?v=i6iwAFoPL8w
Дневник тяжелобольного инвалида
Приведенные примеры меня как то не впечатлили, хотя даже и это не сильно впечатляет
Кстати это на вид на 3D сканированую модель смахивает, у меня у самого есть 3D сканер, могу сосканировать, но он очень капризный, ему нужно хорошее освещение, иногда путается.
Дневник тяжелобольного инвалида
Тут еще возникает другой вопрос - тачпад или мышь? Делаем универсальное или затачиваем под конкретику?
Что вы пургу несете - очередная рекламная компания? Где там морды софта?
конкретно по вышеуказанной ссылке я не нашел, но видел много (больше 3) вариантов вебинтерфейса умного дома. Там часто ставят что-то типа малинки с бекендом во внутреннюю подсетку и ты ходишь на эту малинку через веб интерфейс. Правда от вебинтерфейса принтера обычно не отличается, там реально нечем отличаться, включил-выключил лампочку, закрыл-открыл ставни и т.д.
Вот софт для контоля CNC и 3D-принтеров: Printrun.
По собственному опыту - пользоватся крайне не удоно, но кажется то, что вы искали - управление чем-то через Web-приложение.
Сервер - на плате контроллера (без или с операционной системой, как я понял).
Тут оч. видно то, о чем упоминал @AlexNek - предпочтения индивидуальны и лучше, что-бы дизайном занимался дизайнер.
Вам, соответственно следует обратить внимаие на продукцию фирм, которые в состоянии оплатить дизайн. Советую глянуть софт (не только web) от производителей дорогого измерительного оборудования.
Вот софт для контоля CNC и 3D-принтеров: Printrun.
Спасибо!
По собственному опыту - пользоватся крайне не удоно,
посмотрел, мне тоже не сильно понравилось
Советую глянуть софт (не только web) от производителей дорогого измерительного оборудования.
Спасибо за совет. Знаю много таких софтов, в некоторых случаях игрался на специализированных выставках, в некоторых случаях был непродолжительное время активным пользователем, и несколько раз принимал активное участие в разработке частей бекенда.
Но я знаю целевую аудиторию. И я знаю, что при покупке не веб интерфейсов тратится в среднем человекомесяц на установку и обкатку. Я хочу избавить от этого пользователя, чтобы он перед покупкой смог поиграться на удаленке на моей аппаратуре, а, если ему понравится, то купить и после покупки не потратить времени на
инсталляцию. Как бывший пользователь мне именно так и хотелось бы. Меня, например, сильно раздражает при покупке даже знакомого мне софта (квартуса и большинства кадов например) что я трачу время на его инсталляцию. В год в среднем у меня тратится по 50 часов, а в нескольких фирмах, в которых я работал или подрабатывал, на инсталляцию софтвера тратилось около 10% всего рабочего времени персонала (я не спорю, что это делали обычно сисадмины, но ведь их время тоже кто-то оплачивает).
Знаю одно возражение, что де веб - обычно имеет существенно более медленную графику, чем не веб. Согласен с этой позицией. С использованием WebGL или в тех, приложениях, когда скорость отрисовки не самая критическая часть приложения, это возражение можно игнорировать.
посмотрел, мне тоже не сильно понравилось
Это - к мысли о том, что не следует программисту (а может даже вообще нижинеру) проектировать UI и высказиватся на тему UX. Отличная штука - "темы" и "скины" всякие, сделанные людьми обладающими вкусом. Еще лучше - готовые компоненты, вообще привосходно - целосный дизайн (да еще и подходящий под корпоративную "отделку" предприятия, ох! аж слюнки потекли). Пример из личного опыта John Deere. У них весь софт задизайнен оч. узнаваемо и оч. удобно.
в некоторых случаях игрался на специализированных выставках
Ага, отличная возможность для сравнения. Embedded World или Agritechnica, это - да. Сразу видно разницу, где есть внимание к деталям и мысль о пользователе.
несколько раз принимал активное участие в разработке частей бекенда.
Зачет-зачет!
Но я знаю целевую аудиторию.
Целевую аудиторию чего? Разве речь о конкретном продукте?
В год в среднем у меня тратится по 50 часов, а в нескольких фирмах, в которых я работал или подрабатывал, на инсталляцию софтвера тратилось около 10% всего рабочего времени персонала (я не спорю, что это делали обычно сисадмины, но ведь их время тоже кто-то оплачивает).
Если говорить о бизнес-модели, не претендуя на авторитетность замечу что время людей на зарплатае мало-кто скурполезно учитывает (тем-более руководствуется этим критерием при покупке софта). Зато, если с помощю вашего решения кто-то в свою очередь зарабатывает деньги и выставляет "почасовые" счета, тогда эффективнось имеет смысл.
Это - к мысли о том, что не следует программисту (а может даже вообще нижинеру) проектировать UI и высказиватся на тему UX.
Если речь идет о UI/UX магазина или умного дома, согласен, если речь идет о научном оборудовании, то UI/UX должен заниматься тот, кто работал на схожих приборах и планирует этот инструмент - то есть инженер фактически. У меня как раз такой опыт есть.
Заметил интересную тенденцию, веб десигнеры увидев мой веб интерфейс начинают почему-то сразу говорить о том, что де я не пользую фреймворки и это не кошерно (хотя явно почти никто не называет как улучшить), а вот несколько университетских профессоров, с хиршем за 50, сказали в разных вариациях, примерно следующее:
The more I read and played with the interface the more impressed I got. You have put a huge amount of foresight into the interface. It already has features that other approaches still do not have after 50 years. This sounds like a DREAM instrument with HUGE potential.
То есть сарказм по поводу того, что разраб прибора не может писать UI/UX разбивается об реальные отзывы потенциальных пользователей.
Если говорить о бизнес-модели, не претендуя на авторитетность замечу что время людей на зарплатае мало-кто скурполезно учитывает (тем-более руководствуется этим критерием при покупке софта).
Почему-то сейчас считать время даже на маузклики - это тренд на американском континенте, ну а тут, да, не важно, особенно если сисадминов набрали как аусхильфе из арбайтсамта и их зарплата оплачивается тем же арбайтсамтом.
Собственно тема была посмотреть, что есть, и тема - давняя. Я вроде посмотрел, и какие-то выводы сделал, и участникам этого топика очень благодарен за полезные ссылки и обсуждения, надеюсь, мои заказчики в скором времени мою позицию одобрят.