Планы

[Chainik]

Друзья, дико извиняюсь за возможный оффтоп, но опять же вопрос на понимание. Мы можем как-нибудь в MDM сделать красиво прорисованный план с отдельными элементами, завязанными на свойства?
Поясню, что имею ввиду:

СпойлерПоказать

Animation.gif (398.99 КБ) 7062 просмотра

В общем, речь идет о качественно прорисованном интерьере и чтобы элементы (окна, двери, шторы, светильники и пр.) были завязаны на их свойства в MDM (открыто/закрыто, включено/выключено и т.п.).
Подчеркиваю, что вопрос именно о возможности применения высококачественной (реалистичной) графики элементов.

[odinvolk]

Рецепт: управление светом через затемнение области

1. Создаём план помещения и вставляем его в наше изображение


2. Для удобства создаём новый слой над нашим фоном

...и, чтоб фон не мешал, блокируем фоновый слой от изменений


3. Выбираем инструмент рисования линий


4. Создаём фигуру, покрывающую площадь комнаты


5. Заливае фигуру чёрным цветом и ставим "непрозрачность" в 30%


6. Делаем для нашей фигуры понятное имя:


7. Сохраняем изображение и загружаем его в План

8. Создаём состояние для управления светом


Общий смысл в следующем -- если свет включен, то показываем наш фон комнаты с прозрачностью 10% (светло), иначе с прозрачностью 50% (темно). И, соответствено, по нажатию на фон меняем состояние освещения. Кстати, совсем прятать фон нельзя, т.к. в таком случае он перестанет отрабатывать событие нажатия.

9. Небольшой тюнинг.
Вышеописанное работает, но по клику фон плавно меняется с чёрного, до нужной нам степени прозрачности, что не очень красиво. Сделаем, чтобы оно менялось от 10% до 50% и обратно. Переходим в закладку "Дополнительный код CSS" и вставляем следующий код:

Код: Выделить всё

@keyframes fade50to10 {
    from { opacity:0.5; }
    to { opacity:0.1; }
}
@keyframes fade10to50 {
    from { opacity:0.1; }
    to { opacity:0.5; }
}

.fade10to50 {
    display:block;
    opacity:0.1;
    animation:fade10to50 ease-in 1;
    animation-fill-mode:forwards;
    animation-duration:0.6s;
}

.fade50to10 {
    display:block;
    opacity:0.5;
    animation:fade50to10 ease-in 1;
    animation-fill-mode:forwards;
    animation-duration:0.6s;
}

Переходим в наше состояние и меняем классы на следующие (они берутся из нашего CSS-кода):


Всё, теперь наш фон красиво и плавно меняется с 10 до 50 и обратно:

[dengi.76]

Здравствуйте. Попробовал воспроизвести у себя План с вентилятором - всё Отлично получилось, но вот при добавлении на сцену возникла проблема...,но по порядку. На сцене я создаю элемент HTML, создаю состояние Default и вбиваю туда код вентилятора. При попытке зайти на вкладку ПРОСМОТР/РЕДАКТИРОВАНИЕ получаю ошибку :Error

Спасибо за детали, исправлено.

[dengi.76]

Здравствуйте. Попробовал воспроизвести у себя План с вентилятором - всё Отлично получилось, но вот при добавлении на сцену возникла проблема...,но по порядку. На сцене я создаю элемент HTML, создаю состояние Default и вбиваю туда код вентилятора. При попытке зайти на вкладку ПРОСМОТР/РЕДАКТИРОВАНИЕ получаю ошибку :Error

Спасибо за детали, исправлено.

Спасибо за оперативность, Сергей ! Всё ОТЛИЧНО заработало !!!

[dengi.76]

Сергей, прошу прощения и возможно я что то не до конца понял о модуле "Планы". но проблема в следующем : Я создал два плана - Вытяжка в кухне и Вытяжка в ванной, вывел их на сцену но управлять раздельно у меня не получилось. Конкретно в моём случае управление Вытяжкой в ванне перехватывает управление Вытяжкой в кухне ( даже значок вентилятора в кухне становится не активным и статичным ). Я пробовал создать другой значок вентилятора в SVG , переименовывать его, но ничего не помогло. Помогите разобраться пожалуйста.

[Vit]

Сереж спасибо за примеры...очень нужны и помогают принцип понять...

можно ли пример еще вот такой реализации?

[Chainik]

Еще вот такие динамические элементы реализовать возможно?

СпойлерПоказать

Animation.gif (398.99 КБ) 6961 просмотр

[nick7zmail]

Сереж спасибо за примеры...очень нужны и помогают принцип понять...

можно ли пример еще вот такой реализации?

Создаёте в svg области светящиеся, и надписи формата %Объект.свойство% (см. изначальную инструкцию в базе знаний https://kb.mjdm.ru/plans_help/) прямо в svg редакторе. И будет именно такой пример.

А ещё прикольно то, что можно отдельными слоями на 1 плане показать к примеру управление (выключатели расставить), климат (как на картинке выше, скрыть слой с управлением, показать с климатом), ещё что нить, и между сценами бегать не надо будет. Правда какое месево при этом в редакторе будет - не представляю =D.

Еще вот такие динамические элементы реализовать возможно?

СпойлерПоказать

Animation.gif

Тут уже вряд ли, ибо фон вставлен картинкой. Есть вариант просто создать 2 png с открытым окном и с закрытым, и их уже скрывать отображать. Ну собственно фишки тут никакой, так и на сценах можно сделать.

[Vit]

Я имел ввиду заливать комнаты градиентом в зависимости от температуры в помещении.

[Chainik]

Ув.Bagir в свое время "разжевывал" нам про svg (viewtopic.php?f=4&t=2110&p=19184#p19184).