MajorDoMo

devoff писал(а): Чт мар 14, 2019 6:48 pm Вот чутка доделал, но еще поковыряю, но это просто бомба, наконец то можно просто рисовать, без всяких хтмл php, просто красота.
Круг с температурой - это так же реле света
Весь план добавил на сцену, только отдельно добавил чат.

чайнику подскажите как план добавить на сцену: тип элемента какой выбрать?

mab писал(а): Чт мар 14, 2019 7:10 pm

devoff писал(а): Чт мар 14, 2019 6:48 pm Вот чутка доделал, но еще поковыряю, но это просто бомба, наконец то можно просто рисовать, без всяких хтмл php, просто красота.
Круг с температурой - это так же реле света
Весь план добавил на сцену, только отдельно добавил чат.

чайнику подскажите как план добавить на сцену: тип элемента какой выбрать?

Чуть выше писал - HTML элемент
Туда вставить КОД который появляется в разделе Планы - Просмотр - Код встраивания:

devoff писал(а): Чт мар 14, 2019 6:48 pm Вот чутка доделал, но еще поковыряю, но это просто бомба, наконец то можно просто рисовать, без всяких хтмл php, просто красота.
Круг с температурой - это так же реле света
Весь план добавил на сцену, только отдельно добавил чат.

SVG плана - https://yadi.sk/i/13vLkKuCXnG6tg, если кто то хочет поковырять, иконки брал с https://thenounproject.com/

Как ты такую прикольную подложку под меню сделал?

VAndrey писал(а): Чт мар 14, 2019 11:44 pm

devoff писал(а): Чт мар 14, 2019 6:48 pm Вот чутка доделал, но еще поковыряю, но это просто бомба, наконец то можно просто рисовать, без всяких хтмл php, просто красота.
Круг с температурой - это так же реле света
Весь план добавил на сцену, только отдельно добавил чат.

SVG плана - https://yadi.sk/i/13vLkKuCXnG6tg, если кто то хочет поковырять, иконки брал с https://thenounproject.com/

Как ты такую прикольную подложку под меню сделал?

Эт в svg скорее всего нарисовано. или в html который поверх svg. Это не меню, как таковое.

VAndrey писал(а): Чт мар 14, 2019 11:44 pm Как ты такую прикольную подложку под меню сделал?

Это все сделано в SVG (я скинул же исходник) все данные свойств подставлены и отображаются, кайф в том что я могу в Кореле или инскейп менять цвет, размер, расположение, шрифт да все что угодно, хоть тень сделать, или плавная анимация включения, открытие двери - любой графический каприз и просто сохранить, не нужно ковырять CSS подгонять отступы, цвета, размеры, нет всяких пересечений со встроенным CSS в систему, были моменты когда все разъезжалось просто потому что где то пересекалось с шаблоном из другой сцены.


В данном скрине это сцена в которой всего 2 элемента, ХТМЛ со вставкой ПЛАНА и история сообщений (чуть поправить CSS для цвета шрифта)
Пока один только не приятный косяк - раньше при наведение на кнопку менялся курсор мышки и видно что можно нажать, теперь это просто картинка, но на планшете это не существенно )

devoff писал(а): Пт мар 15, 2019 10:30 am ... да все что угодно, хоть тень сделать, или плавная анимация включения, открытие двери - любой графический каприз и просто сохранить...

А можно пример анимации двери/окна/штор по типу такого:
viewtopic.php?f=7&t=6178&start=21
Ну хотя бы в 2D, если в 3D невозможно.
Заранее спасибо!

Chainik писал(а): Пт мар 15, 2019 11:36 am

devoff писал(а): Пт мар 15, 2019 10:30 am ... да все что угодно, хоть тень сделать, или плавная анимация включения, открытие двери - любой графический каприз и просто сохранить...

А можно пример анимации двери/окна/штор по типу такого:
viewtopic.php?f=7&t=6178&start=21
Ну хотя бы в 2D, если в 3D невозможно.
Заранее спасибо!

Создаешь 2 картинки, одна открытая, другая закрытая, в СОСТОЯНИЕ ставишь ПОКАЗАТЬ, в иначе - СПРЯТАТЬ, во второй картинке обратное - спрятать\показать.
Картинку просто вырежи квадратом именно где окно, что бы на другие элементы не влияло

Если ты хочешь плавное открытие окно, то нужен сам элемент окна, а дальше вот инструкция - https://webdesign.tutsplus.com/ru/tutor ... -cms-22296
но я сам еще полноценно не пробовал, но плавное смещение сделать можно.

Вот пример как сделали ребята из системы home-assistant.io - обрати внимания на двери.

На самом деле можно даже 1 картинкой и фоном обойтись.
На фоне рисуешь закрытое, поверх накладываешь открытое (со шторами та же фигня). И показываешь/прячешь только открытое.
С анимацией чуть сложнее...либо css как то прикручивать (как по ссылке выше), либо гифку записывать)) но это уже прошлый век как то...

nick7zmail писал(а): Пт мар 15, 2019 12:52 pm На самом деле можно даже 1 картинкой и фоном обойтись.
На фоне рисуешь закрытое, поверх накладываешь открытое (со шторами та же фигня). И показываешь/прячешь только открытое.
С анимацией чуть сложнее...либо css как то прикручивать (как по ссылке выше), либо гифку записывать)) но это уже прошлый век как то...

Можно одной - да, как удобнее.
Анимация прописывается в SVG через animateTransform
Гифкой конечно удобно, но она топорней будет, по ссылке есть примеры как плавно работает SVG и как GIF

animateTranform работет только для svg объектов. C картинками, боюсь, будет что то уродливое =D
на примере двери как раз прямоугольником svg нарисованы. А пользователь выше хочет анимацию 3-д шного окна на плане сделать.