Страница 120 из 121
Re: Дизайн сцен 2
Добавлено: Пт мар 19, 2021 11:17 am
nick7zmail
utax писал(а): ↑Пт мар 19, 2021 9:52 am
Да действительно авесоме у меня локально, думал найду где эти иконки находятся загружу свои изменю название в коде и будет своя, а нет.... В общем я не программист ни разу но вроде пока всё получается, вот создал сцену пылесоса, сделал переход по кнопке с главной сцены которая видео была. Ну и вот а как свою иконку на эту кнопку поставить не знаю. Не подскажите пример?
Повторюсь, иконки - берутся из векторного шрифта...в сам шрифт вы новую иконку не запихнёте, но можете воспользоваться любой из сотен иконок самого шрифта...нужно лишь заменить <i class="fa fa-sun"></i> на нужную вам иконку. Когда щелкните на иконку на сайте шрифта - там вверху написан нужный текст.
Если же вы хотите свою картинку поставить (не из шрифта), замените <i class="fa fa-sun"></i> на <img src="путь к вашей картинке на сервере"/>.
Re: Дизайн сцен 2
Добавлено: Пт мар 19, 2021 1:19 pm
utax
nick7zmail писал(а): ↑Пт мар 19, 2021 11:17 am
Всё получилось, большое спасибо!
Re: Дизайн сцен 2
Добавлено: Сб июн 19, 2021 6:28 pm
pash4uga
Ели не в ту тему, прошу не пинать, а перенести в нужную.
Имею несколько настенных планшетов, но все с разным разрешением, рисовать под каждый свою сцену, совершенно нет желания. Опция в настройках сцены автоматически менять размер сцены очень спасает. Но вот выглядит это все крайне... ну вы поняли) Решил это дело поправить и добавить прелоадер. Вообще не понимаю, почему его нет по умолчанию в системе.
Вот так это выглядит:
- 1AVQqMphpk.gif (2.06 МБ) 2989 просмотров
Итак по порядку.
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 добавляем на каждую страницу, на которой хотим видеть прелоадер. И теперь не сильно важно какого разрешения экран. Переход по страницам выглядит более менее приличным)
Re: Дизайн сцен 2
Добавлено: Сб июн 19, 2021 6:33 pm
SmoKE_xDDD
Это не настоящий прелоадер =)
Re: Дизайн сцен 2
Добавлено: Сб июн 19, 2021 6:50 pm
pash4uga
Глаз при масштабировании не дергается, значит задачу свою выполняет и ладно)
Re: Дизайн сцен 2
Добавлено: Ср окт 20, 2021 11:37 pm
IamGrey
Доброго времени
если не сложно перезалейте Пожалуйста две части - Погода_Elements18-39-20.zip
архив не собирается (((
плохо быть тупым (((
разобрался.
Re: Дизайн сцен 2
Добавлено: Сб дек 04, 2021 1:24 am
PaulBort
ВЫЛОЖИТЕ АРХИВ ОДНИМ ФАЙЛОМ НА ЯНДЕКС-ДИСК.
ВСЕ АРХИВЫ, ЧТО В ЭТОЙ ТЕМЕ ЛИБО БИТЫЕ, ЛИБО НЕ ИМПОРТИРУЮТСЯ!!!!!
Re: Дизайн сцен 2
Добавлено: Вт дек 28, 2021 8:59 pm
DiminatorDK
где можно взять содержимое /img/icons/status/ ? Отсутствуют elektro_32_0.png и light_32_0.png
Re: Дизайн сцен 2
Добавлено: Пт мар 11, 2022 9:39 pm
karsotrade
Добрый вечер. Подскажите пожалуйста что не так делаю. Установил ToDo на пустую сцену как сдесь говорилось:
https://mjdm.ru/forum/viewtopic.php?f=33&t=2613 И в результате получаю такой вид:
Re: Дизайн сцен 2
Добавлено: Пт мар 11, 2022 10:04 pm
andrey040670
А что не так?
Если вы прочитали инструкцию, то должно быть так
На обёртку не обращайте внимание, каждый встраивает как ему нравится.