Дизайн сцен 2

Использование системы в различных ситуациях, вопросы программирования сценариев.

Модератор: immortal

Аватара пользователя
nick7zmail
Сообщения: 7556
Зарегистрирован: Пн окт 28, 2013 8:14 am
Откуда: Екатеринбург
Благодарил (а): 121 раз
Поблагодарили: 1998 раз

Re: Дизайн сцен 2

Сообщение nick7zmail » Пт мар 19, 2021 11:17 am

utax писал(а):
Пт мар 19, 2021 9:52 am
Да действительно авесоме у меня локально, думал найду где эти иконки находятся загружу свои изменю название в коде и будет своя, а нет.... В общем я не программист ни разу но вроде пока всё получается, вот создал сцену пылесоса, сделал переход по кнопке с главной сцены которая видео была. Ну и вот а как свою иконку на эту кнопку поставить не знаю. Не подскажите пример?
Повторюсь, иконки - берутся из векторного шрифта...в сам шрифт вы новую иконку не запихнёте, но можете воспользоваться любой из сотен иконок самого шрифта...нужно лишь заменить <i class="fa fa-sun"></i> на нужную вам иконку. Когда щелкните на иконку на сайте шрифта - там вверху написан нужный текст.

Если же вы хотите свою картинку поставить (не из шрифта), замените <i class="fa fa-sun"></i> на <img src="путь к вашей картинке на сервере"/>.
За это сообщение автора nick7zmail поблагодарили (всего 2):
Chainik (Пт мар 19, 2021 11:25 am) • utax (Пт мар 19, 2021 12:42 pm)
Рейтинг: 2.35%
Raspberry Pi3+Broadlink+esp8266 (blynk)+AMS
Если вам помогло какое-либо сообщение - не забывайте пользоваться кнопкой "СПАСИБО".
:arrow: Услуги в профиле коннект
>>>>>Мой новый канал на ютутбе, подписывайтесь!<<<<<
utax
Сообщения: 33
Зарегистрирован: Пт май 31, 2019 8:24 am
Благодарил (а): 12 раз
Поблагодарили: 1 раз

Re: Дизайн сцен 2

Сообщение utax » Пт мар 19, 2021 1:19 pm

nick7zmail писал(а):
Пт мар 19, 2021 11:17 am
Всё получилось, большое спасибо!
pash4uga
Сообщения: 189
Зарегистрирован: Чт окт 04, 2018 12:04 pm
Благодарил (а): 28 раз
Поблагодарили: 40 раз

Re: Дизайн сцен 2

Сообщение pash4uga » Сб июн 19, 2021 6:28 pm

Ели не в ту тему, прошу не пинать, а перенести в нужную.
Имею несколько настенных планшетов, но все с разным разрешением, рисовать под каждый свою сцену, совершенно нет желания. Опция в настройках сцены автоматически менять размер сцены очень спасает. Но вот выглядит это все крайне... ну вы поняли) Решил это дело поправить и добавить прелоадер. Вообще не понимаю, почему его нет по умолчанию в системе.
Вот так это выглядит:
СпойлерПоказать
1AVQqMphpk.gif
1AVQqMphpk.gif (2.06 МБ) 187 просмотров
Итак по порядку.
1. Добавляем в элемент с самым высоким приоритетом на сцене, прелоадер должен отрисоваться раньше всех элементов (у меня это элемент general_CSS (only CSS)):
В HTLM добавляем:
СпойлерПоказать

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

<div id="preloader">
  <div id="loader"></div>
</div>
В CSS:
СпойлерПоказать

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

#preloader {
    background-color: #fff;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1000;
}
#loader {
  display: block;
  position: relative;
  left: 50%;
  top: 50%;
  width: 150px;
  height: 150px;
  margin: -75px 0 0 -75px;
  border-radius: 50%;
  border: 3px solid transparent;
  border-top-color: #9370db;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}
#loader:before {
  content: "";
  position: absolute;
  top: 5px;
  left: 5px;
  right: 5px;
  bottom: 5px;
  border-radius: 50%;
  border: 3px solid transparent;
  border-top-color: #ba55d3;
  -webkit-animation: spin 3s linear infinite;
  animation: spin 3s linear infinite;
}
#loader:after {
  content: "";
  position: absolute;
  top: 15px;
  left: 15px;
  right: 15px;
  bottom: 15px;
  border-radius: 50%;
  border: 3px solid transparent;
  border-top-color: #ff00ff;
  -webkit-animation: spin 1.5s linear infinite;
  animation: spin 1.5s linear infinite;
}
@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
2. Теперь найдем JS функцию зуммирования страницы, и немного модифицируем ее. Находится она в файле scenes.tpl по пути \htdocs\templates\scenes. Но что бы при обновлениях системы он не перезатирался, скопировал его в папку templates_alt с сохранением пути.
Итак, ищем в файле функцию function sceneZoom() и добавляем в ее конец скрытие прелоадера, т.е. после того как страница будет отмасштабирована, наш прелоадер скроется.
СпойлерПоказать

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

var $preloader = $('#preloader');
$loader = $preloader.find('#loader');
$loader.fadeOut();
$preloader.fadeOut(350);
Вот так выглядит функция целиком:
СпойлерПоказать

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

 function sceneZoom() {
                var zoomMode = parseInt('{$SCENE_AUTO_SCALE}');
                var zoomw = $(window).width();
                if(window.innerWidth > 0 && window.innerWidth < zoomw) zoomw = window.innerWidth;
                zoomw = zoomw/$("#slider").width()*100;
                var zoomh = $(window).height();
                if(window.innerHeight > 0 && window.innerHeight < zoomh) zoomh = window.innerHeight;
                zoomh = zoomh/$("#slider").height()*100;
                if (zoomMode == 3) { // height
                    document.body.style.zoom = zoomh+"%"
                }
                if (zoomMode == 2) { // width
                    document.body.style.zoom = zoomw+"%"
                }
                if (zoomMode == 1) { // both
                    if(zoomh < zoomw) {
                        document.body.style.zoom = zoomh+"%"
                    } else {
                        document.body.style.zoom = zoomw+"%"
                    }
                }
				var $preloader = $('#preloader');
				$loader = $preloader.find('#loader');
				$loader.fadeOut();
				$preloader.fadeOut(350);
            }
И так п1 добавляем на каждую страницу, на которой хотим видеть прелоадер. И теперь не сильно важно какого разрешения экран. Переход по страницам выглядит более менее приличным)
За это сообщение автора pash4uga поблагодарил:
Chainik (Сб июн 19, 2021 7:57 pm)
Рейтинг: 1.18%
Аватара пользователя
SmoKE_xDDD
Сообщения: 750
Зарегистрирован: Ср апр 17, 2019 5:00 pm
Откуда: Нижний Новгород
Благодарил (а): 98 раз
Поблагодарили: 788 раз

Re: Дизайн сцен 2

Сообщение SmoKE_xDDD » Сб июн 19, 2021 6:33 pm

Это не настоящий прелоадер =)
pash4uga
Сообщения: 189
Зарегистрирован: Чт окт 04, 2018 12:04 pm
Благодарил (а): 28 раз
Поблагодарили: 40 раз

Re: Дизайн сцен 2

Сообщение pash4uga » Сб июн 19, 2021 6:50 pm

Глаз при масштабировании не дергается, значит задачу свою выполняет и ладно)
Ответить