Дизайн сцен 2

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

Модератор: immortal

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

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.33%
Raspberry Pi3+Broadlink+esp8266 (blynk)+AMS
Если вам помогло какое-либо сообщение - не забывайте пользоваться кнопкой "СПАСИБО".
:arrow: Услуги в профиле коннект
>>>>>Мой новый канал на ютутбе, подписывайтесь!<<<<<
utax
Сообщения: 118
Зарегистрирован: Пт май 31, 2019 8:24 am
Благодарил (а): 28 раз
Поблагодарили: 3 раза

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

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

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

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

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

Ели не в ту тему, прошу не пинать, а перенести в нужную.
Имею несколько настенных планшетов, но все с разным разрешением, рисовать под каждый свою сцену, совершенно нет желания. Опция в настройках сцены автоматически менять размер сцены очень спасает. Но вот выглядит это все крайне... ну вы поняли) Решил это дело поправить и добавить прелоадер. Вообще не понимаю, почему его нет по умолчанию в системе.
Вот так это выглядит:
СпойлерПоказать
1AVQqMphpk.gif
1AVQqMphpk.gif (2.06 МБ) 2699 просмотров
Итак по порядку.
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 поблагодарили (всего 3):
Chainik (Сб июн 19, 2021 7:57 pm) • astotskiy (Сб окт 23, 2021 10:50 pm) • tolyan2809 (Ср фев 09, 2022 2:27 pm)
Рейтинг: 3.49%
Аватара пользователя
SmoKE_xDDD
Сообщения: 816
Зарегистрирован: Ср апр 17, 2019 5:00 pm
Откуда: Нижний Новгород
Благодарил (а): 110 раз
Поблагодарили: 898 раз

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

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

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

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

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

Глаз при масштабировании не дергается, значит задачу свою выполняет и ладно)
IamGrey
Сообщения: 3
Зарегистрирован: Вт окт 08, 2019 8:32 pm
Благодарил (а): 3 раза
Поблагодарили: 1 раз

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

Сообщение IamGrey » Ср окт 20, 2021 11:37 pm

Доброго времени
если не сложно перезалейте Пожалуйста две части - Погода_Elements18-39-20.zip
архив не собирается (((

плохо быть тупым (((
разобрался.
PaulBort
Сообщения: 1
Зарегистрирован: Пт ноя 19, 2021 2:57 pm
Благодарил (а): 0
Поблагодарили: 0

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

Сообщение PaulBort » Сб дек 04, 2021 1:24 am

ВЫЛОЖИТЕ АРХИВ ОДНИМ ФАЙЛОМ НА ЯНДЕКС-ДИСК.
ВСЕ АРХИВЫ, ЧТО В ЭТОЙ ТЕМЕ ЛИБО БИТЫЕ, ЛИБО НЕ ИМПОРТИРУЮТСЯ!!!!!
DiminatorDK
Сообщения: 104
Зарегистрирован: Сб фев 20, 2016 12:19 pm
Благодарил (а): 7 раз
Поблагодарили: 2 раза

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

Сообщение DiminatorDK » Вт дек 28, 2021 8:59 pm

где можно взять содержимое /img/icons/status/ ? Отсутствуют elektro_32_0.png и light_32_0.png
karsotrade
Сообщения: 113
Зарегистрирован: Пт июн 09, 2017 11:18 pm
Благодарил (а): 17 раз
Поблагодарили: 13 раз

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

Сообщение karsotrade » Пт мар 11, 2022 9:39 pm

Добрый вечер. Подскажите пожалуйста что не так делаю. Установил ToDo на пустую сцену как сдесь говорилось: https://mjdm.ru/forum/viewtopic.php?f=33&t=2613 И в результате получаю такой вид:
Вложения
12.png
12.png (488.94 КБ) 1249 просмотров
Аватара пользователя
andrey040670
Сообщения: 458
Зарегистрирован: Пн июл 31, 2017 10:00 pm
Благодарил (а): 161 раз
Поблагодарили: 85 раз

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

Сообщение andrey040670 » Пт мар 11, 2022 10:04 pm

karsotrade писал(а):
Пт мар 11, 2022 9:39 pm
Добрый вечер. Подскажите пожалуйста что не так делаю. Установил ToDo на пустую сцену как сдесь говорилось: https://mjdm.ru/forum/viewtopic.php?f=33&t=2613 И в результате получаю такой вид:
А что не так?
Если вы прочитали инструкцию, то должно быть так
На обёртку не обращайте внимание, каждый встраивает как ему нравится.
Вложения
220228.png
220228.png (836.18 КБ) 1246 просмотров
MJD alfa: Khadas VIM1 Ubuntu 18.04.2 LTS bionic Linux 4.9.40 #2 SMP PREEMPT Tue Oct 30 15:47:54 CST 2018 aarch64 GNU/Linux
MJD alfa: Rpi 3B Debian 11 (bullseye) Linux raspberrypi 6.1.21-v8+ #1642 SMP PREEMPT Mon Apr 3 17:24:16 BST 2023 aarch64 GNU/Linux
Ответить