чайнику подскажите как план добавить на сцену: тип элемента какой выбрать?
Планы
Модератор: immortal
-
- Сообщения: 109
- Зарегистрирован: Ср окт 11, 2017 1:09 pm
- Откуда: Краснодар
- Благодарил (а): 94 раза
- Поблагодарили: 1 раз
Re: Планы
Как ты такую прикольную подложку под меню сделал?devoff писал(а): ↑Чт мар 14, 2019 6:48 pmВот чутка доделал, но еще поковыряю, но это просто бомба, наконец то можно просто рисовать, без всяких хтмл php, просто красота.
Круг с температурой - это так же реле света
Весь план добавил на сцену, только отдельно добавил чат.
SVG плана - https://yadi.sk/i/13vLkKuCXnG6tg, если кто то хочет поковырять, иконки брал с https://thenounproject.com/
Сервер на Orange Pi РС (Armbian 5.60 stable Debian GNU/Linux 9 4.14.84-sunxi)
- nick7zmail
- Сообщения: 7573
- Зарегистрирован: Пн окт 28, 2013 8:14 am
- Откуда: Екатеринбург
- Благодарил (а): 121 раз
- Поблагодарили: 2010 раз
Re: Планы
Эт в svg скорее всего нарисовано. или в html который поверх svg. Это не меню, как таковое.VAndrey писал(а): ↑Чт мар 14, 2019 11:44 pmКак ты такую прикольную подложку под меню сделал?devoff писал(а): ↑Чт мар 14, 2019 6:48 pmВот чутка доделал, но еще поковыряю, но это просто бомба, наконец то можно просто рисовать, без всяких хтмл php, просто красота.
Круг с температурой - это так же реле света
Весь план добавил на сцену, только отдельно добавил чат.
SVG плана - https://yadi.sk/i/13vLkKuCXnG6tg, если кто то хочет поковырять, иконки брал с https://thenounproject.com/
Raspberry Pi3+Broadlink+esp8266 (blynk)+AMS
Если вам помогло какое-либо сообщение - не забывайте пользоваться кнопкой "СПАСИБО".
Услуги в профиле коннект
>>>>>Мой новый канал на ютутбе, подписывайтесь!<<<<<
Если вам помогло какое-либо сообщение - не забывайте пользоваться кнопкой "СПАСИБО".
Услуги в профиле коннект
>>>>>Мой новый канал на ютутбе, подписывайтесь!<<<<<
-
- Сообщения: 181
- Зарегистрирован: Пт апр 04, 2014 10:17 pm
- Благодарил (а): 37 раз
- Поблагодарили: 54 раза
Re: Планы
Это все сделано в SVG (я скинул же исходник) все данные свойств подставлены и отображаются, кайф в том что я могу в Кореле или инскейп менять цвет, размер, расположение, шрифт да все что угодно, хоть тень сделать, или плавная анимация включения, открытие двери - любой графический каприз и просто сохранить, не нужно ковырять CSS подгонять отступы, цвета, размеры, нет всяких пересечений со встроенным CSS в систему, были моменты когда все разъезжалось просто потому что где то пересекалось с шаблоном из другой сцены.
В данном скрине это сцена в которой всего 2 элемента, ХТМЛ со вставкой ПЛАНА и история сообщений (чуть поправить CSS для цвета шрифта)
Пока один только не приятный косяк - раньше при наведение на кнопку менялся курсор мышки и видно что можно нажать, теперь это просто картинка, но на планшете это не существенно )
-
- Сообщения: 181
- Зарегистрирован: Пт апр 04, 2014 10:17 pm
- Благодарил (а): 37 раз
- Поблагодарили: 54 раза
Re: Планы
Создаешь 2 картинки, одна открытая, другая закрытая, в СОСТОЯНИЕ ставишь ПОКАЗАТЬ, в иначе - СПРЯТАТЬ, во второй картинке обратное - спрятать\показать.Chainik писал(а): ↑Пт мар 15, 2019 11:36 amА можно пример анимации двери/окна/штор по типу такого:
viewtopic.php?f=7&t=6178&start=21
Ну хотя бы в 2D, если в 3D невозможно.
Заранее спасибо!
Картинку просто вырежи квадратом именно где окно, что бы на другие элементы не влияло
Если ты хочешь плавное открытие окно, то нужен сам элемент окна, а дальше вот инструкция - https://webdesign.tutsplus.com/ru/tutor ... -cms-22296
но я сам еще полноценно не пробовал, но плавное смещение сделать можно.
Вот пример как сделали ребята из системы home-assistant.io - обрати внимания на двери.
- Вложения
-
- ecaad9a580e5310bf4869aa1f579b9575a82bd0d.gif (2.28 МБ) 3604 просмотра
- Рейтинг: 1.16%
- nick7zmail
- Сообщения: 7573
- Зарегистрирован: Пн окт 28, 2013 8:14 am
- Откуда: Екатеринбург
- Благодарил (а): 121 раз
- Поблагодарили: 2010 раз
Re: Планы
На самом деле можно даже 1 картинкой и фоном обойтись.
На фоне рисуешь закрытое, поверх накладываешь открытое (со шторами та же фигня). И показываешь/прячешь только открытое.
С анимацией чуть сложнее...либо css как то прикручивать (как по ссылке выше), либо гифку записывать)) но это уже прошлый век как то...
На фоне рисуешь закрытое, поверх накладываешь открытое (со шторами та же фигня). И показываешь/прячешь только открытое.
С анимацией чуть сложнее...либо css как то прикручивать (как по ссылке выше), либо гифку записывать)) но это уже прошлый век как то...
Последний раз редактировалось nick7zmail Пт мар 15, 2019 12:56 pm, всего редактировалось 2 раза.
Raspberry Pi3+Broadlink+esp8266 (blynk)+AMS
Если вам помогло какое-либо сообщение - не забывайте пользоваться кнопкой "СПАСИБО".
Услуги в профиле коннект
>>>>>Мой новый канал на ютутбе, подписывайтесь!<<<<<
Если вам помогло какое-либо сообщение - не забывайте пользоваться кнопкой "СПАСИБО".
Услуги в профиле коннект
>>>>>Мой новый канал на ютутбе, подписывайтесь!<<<<<
-
- Сообщения: 181
- Зарегистрирован: Пт апр 04, 2014 10:17 pm
- Благодарил (а): 37 раз
- Поблагодарили: 54 раза
Re: Планы
Можно одной - да, как удобнее.nick7zmail писал(а): ↑Пт мар 15, 2019 12:52 pmНа самом деле можно даже 1 картинкой и фоном обойтись.
На фоне рисуешь закрытое, поверх накладываешь открытое (со шторами та же фигня). И показываешь/прячешь только открытое.
С анимацией чуть сложнее...либо css как то прикручивать (как по ссылке выше), либо гифку записывать)) но это уже прошлый век как то...
Анимация прописывается в SVG через animateTransform
Гифкой конечно удобно, но она топорней будет, по ссылке есть примеры как плавно работает SVG и как GIF
- nick7zmail
- Сообщения: 7573
- Зарегистрирован: Пн окт 28, 2013 8:14 am
- Откуда: Екатеринбург
- Благодарил (а): 121 раз
- Поблагодарили: 2010 раз
Re: Планы
animateTranform работет только для svg объектов. C картинками, боюсь, будет что то уродливое =D
на примере двери как раз прямоугольником svg нарисованы. А пользователь выше хочет анимацию 3-д шного окна на плане сделать.
на примере двери как раз прямоугольником svg нарисованы. А пользователь выше хочет анимацию 3-д шного окна на плане сделать.
Raspberry Pi3+Broadlink+esp8266 (blynk)+AMS
Если вам помогло какое-либо сообщение - не забывайте пользоваться кнопкой "СПАСИБО".
Услуги в профиле коннект
>>>>>Мой новый канал на ютутбе, подписывайтесь!<<<<<
Если вам помогло какое-либо сообщение - не забывайте пользоваться кнопкой "СПАСИБО".
Услуги в профиле коннект
>>>>>Мой новый канал на ютутбе, подписывайтесь!<<<<<