Сцены и оформление (сборка)

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

Модератор: immortal

Logrus
Сообщения: 1941
Зарегистрирован: Пт апр 07, 2017 12:20 pm
Благодарил (а): 305 раз
Поблагодарили: 418 раз

Re: Сцены и оформление

Сообщение Logrus » Пн окт 16, 2017 4:55 pm

Буду ждать, я со сценами вообще не разбирался, эта мне показалась лучшей для освоения.
Telegram | Блог
Raspberry Pi3, с образа от Сергея 3.31, PHP 7, флешка 16 Гб работает с 10.09.2017
Почти всё время уходит на исправление ошибок, оставшееся - на их повторение. (с) ))) Спасибо
Аватара пользователя
nick7zmail
Сообщения: 7573
Зарегистрирован: Пн окт 28, 2013 8:14 am
Откуда: Екатеринбург
Благодарил (а): 121 раз
Поблагодарили: 2008 раз

Re: Сцены и оформление

Сообщение nick7zmail » Пн окт 16, 2017 7:19 pm

Logrus писал(а):Буду ждать, я со сценами вообще не разбирался, эта мне показалась лучшей для освоения.
Зря ты так))
Лучшая для освоения скорее сценка из темы Дизайн сцен 2. Кстати есть ещё тема просто Дизайн сцен...там есть как простенькие, так и более навороченные сценки....
Моя скорее для опытных ребят, которым захотелось чего-то необычного, и они увидели это на скринах)) для новичков подойдет только прямоугольник в центре, который импортируется в принципе приемлимо)))

Итак...
1) Картинки статусов
status.rar
(33.01 КБ) 293 скачивания
Лежали в папке \templates_alt\img\icons\status
Там есть что-то лишнее)))типа роутер и hdd вроде)) ну вдруг понадобятся))

2) Шестеренки реально куда-то делись...возможно их отдельно качал...можно скачать и закинуть в S:\cms\scenes\styles\button
settings.png
settings.png (1.18 КБ) 6843 просмотра
3) Иконки как стандартные, так и мои прописаны примерно таким кодом

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

<img src="/templates_alt/img/icons/status/lock_32_%Security.stateColor%.png" align="absmiddle"> %Security.stateDetails%
<img src="/templates_alt/img/icons/status/system_32_%System.stateColor%.png" align="absmiddle"> %System.stateDetails%
<img src="/templates_alt/img/icons/status/network_32_%Communication.stateColor%.png" align="absmiddle"> %Communication.stateDetails% 
Так что как закините в нужный путь - появятся....

4) Для того чтобы появилась "панелька" справа от кнопок - надо создать объект scene_test. Остальные рекомендации (касательно установки java библиотек, чтобы в этой панельке появился кубик с погодой и тп) - смотри в том посте.
За это сообщение автора nick7zmail поблагодарил:
Logrus (Пн окт 16, 2017 7:40 pm)
Рейтинг: 1.18%
Raspberry Pi3+Broadlink+esp8266 (blynk)+AMS
Если вам помогло какое-либо сообщение - не забывайте пользоваться кнопкой "СПАСИБО".
:arrow: Услуги в профиле коннект
>>>>>Мой новый канал на ютутбе, подписывайтесь!<<<<<
Logrus
Сообщения: 1941
Зарегистрирован: Пт апр 07, 2017 12:20 pm
Благодарил (а): 305 раз
Поблагодарили: 418 раз

Re: Сцены и оформление

Сообщение Logrus » Пн окт 16, 2017 7:40 pm

СпойлерПоказать
Снимок.PNG
Снимок.PNG (548.04 КБ) 6832 просмотра
Снимок.PNG
Снимок.PNG (557.01 КБ) 6822 просмотра
Спасибо, буду разбираться, часы подключал, сейчас нет, вместо куба буду придумывать что-нибудь
Последний раз редактировалось Logrus Пн окт 16, 2017 7:53 pm, всего редактировалось 1 раз.
Telegram | Блог
Raspberry Pi3, с образа от Сергея 3.31, PHP 7, флешка 16 Гб работает с 10.09.2017
Почти всё время уходит на исправление ошибок, оставшееся - на их повторение. (с) ))) Спасибо
Аватара пользователя
nick7zmail
Сообщения: 7573
Зарегистрирован: Пн окт 28, 2013 8:14 am
Откуда: Екатеринбург
Благодарил (а): 121 раз
Поблагодарили: 2008 раз

Re: Сцены и оформление

Сообщение nick7zmail » Пн окт 16, 2017 7:48 pm

Выключатель света кстати привязан к какому-то классу, и там был включен автоповтор. То есть сколько объектов было в классе, столько он и показывал выключателей.
Часы подключаются до ближайшего обновления. Либо измененные страницы надо помещать в templates_alt. Для того чтобы куб заработал надо three.min.js скачать например отсюда https://threejs.org/ и закинуть по указанному пути. А картинки выкачивать скриптом с яндекса. Скрипт тоже в изначальном посте есть.
Raspberry Pi3+Broadlink+esp8266 (blynk)+AMS
Если вам помогло какое-либо сообщение - не забывайте пользоваться кнопкой "СПАСИБО".
:arrow: Услуги в профиле коннект
>>>>>Мой новый канал на ютутбе, подписывайтесь!<<<<<
Аватара пользователя
nick7zmail
Сообщения: 7573
Зарегистрирован: Пн окт 28, 2013 8:14 am
Откуда: Екатеринбург
Благодарил (а): 121 раз
Поблагодарили: 2008 раз

Re: Сцены и оформление (сборка)

Сообщение nick7zmail » Пт дек 01, 2017 5:03 pm

Дело было вечером делать было...дофигачего)) но я устал это всё делать, и сел "порисовать" элементы...решил оживить немного свою сцену с планом квартиры...а то она у меня как-то совсем не приживается =(...больше по душе интерфейсы панелей (без планов квартир)...не суть...
Короче скидал я индикаторы...вроде получилось неплохо...может кому понадобится...выглядят так
111.jpg
111.jpg (58.57 КБ) 6494 просмотра
Для них нужна библиотека...название не помню - лень искать, если честно, но в гугле находится без проблем, но на всякий случай приложу. Надо закинуть в папку js.
gaugeMeter.rar
(2.06 КБ) 391 скачивание
Создать HTML элемент на сцене, в дополнительный код css закинуть
код cssПоказать

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

.GaugeMeter {
  position: Relative;
  text-align: Center;
  overflow: Hidden;
  cursor: Default;
  display: inline-block;
}

.GaugeMeter SPAN, .GaugeMeter B {
  width: 54%;
  position: Absolute;
  text-align: Center;
  display: Inline-Block;
  color: RGBa(0,0,0,.8);
  font-weight: 100;
  font-family: "Open Sans", Arial;
  overflow: Hidden;
  white-space: NoWrap;
  text-overflow: Ellipsis;
  margin: 0 23%;
}

.GaugeMeter[data-style="Semi"] B {
  width: 80%;
  margin: 0 10%;
}

.GaugeMeter S, .GaugeMeter U {
  text-decoration: None;
  font-size: .60em;
  font-weight: 200;
  opacity: .6;
}

.GaugeMeter B {
  color: #000;
  font-weight: 200;
  opacity: .8;
}
.GCont {
background-color: #000;
opacity: .8;
border-radius: 30px;
border:1px solid #777;
}
а в состояние
код элементаПоказать

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

<script src="/js/gaugeMeter.js"></script>
<script>$(".GaugeMeter").gaugeMeter();</script>
<div class="GCont">
<div class="GaugeMeter" id="test" data-total="40" data-used="%Sensor_temp03.value%"
     data-text="<font style='color:White;size:13px'>%Sensor_temp03.value%</font>"
     data-append="<font style='color:white'>°C</font>" data-prepend="<font style='color:white'>%Sensor_temp03.dynamic% </font>"
     data-size="140" data-theme="White" data-back="RGBa(255,255,255,.2)" data-width="15" data-label="Температура"
     data-label_color="#FFF" data-stripe="3"></div>
</div>
Параметры:
data-width="15" - высота деления
data-stripe="3" - ширина деления
data-size="140" - диаметр круга
data-label="Температура" - подпись под значением
data-style="Full" - Full, Semi or Arch (полный круг, полукруг или арка)
Все параметры тут
по мануалу только положительные числа, однако и отрицательные использовать можно, в таком случае data-total и data-used должны быть отрицательными

Мож кому интересно будет =).
Теперь правда выключатели света неказисто смотрятся рядом с такими "Мощными" информерами =D. Надо будет тоже что нить городить...либо перейти на что нить менее громоздкое...
За это сообщение автора nick7zmail поблагодарили (всего 3):
Albert (Вс дек 03, 2017 8:37 pm) • antpino (Вт дек 12, 2017 8:29 am) • Hold (Пт мар 16, 2018 4:17 pm)
Рейтинг: 3.53%
Raspberry Pi3+Broadlink+esp8266 (blynk)+AMS
Если вам помогло какое-либо сообщение - не забывайте пользоваться кнопкой "СПАСИБО".
:arrow: Услуги в профиле коннект
>>>>>Мой новый канал на ютутбе, подписывайтесь!<<<<<
Аватара пользователя
igorewa
Сообщения: 515
Зарегистрирован: Ср дек 21, 2016 11:54 pm
Откуда: Киев
Благодарил (а): 12 раз
Поблагодарили: 43 раза

Re: Сцены и оформление (сборка)

Сообщение igorewa » Пт дек 01, 2017 5:36 pm

Очень красиво смотрятся, обязательно буду их использовать, но сразу вопрос, ожно ли их уменьшить, а то занимают пол сцены ) А еще после точки нет десятых, или точку убрать или десятые вывести.
Вложения
Снимок экрана 2017-12-01 в 16.34.50.png
Снимок экрана 2017-12-01 в 16.34.50.png (623.91 КБ) 6488 просмотров
ASUS H110T, I5 7500, DDR4-16Gb, SSD256 . WIN10 64 (LTSB)
Аватара пользователя
nick7zmail
Сообщения: 7573
Зарегистрирован: Пн окт 28, 2013 8:14 am
Откуда: Екатеринбург
Благодарил (а): 121 раз
Поблагодарили: 2008 раз

Re: Сцены и оформление (сборка)

Сообщение nick7zmail » Пт дек 01, 2017 5:47 pm

У меня, видимо, сцена в оч большом разрешении =D...уменьшить можно...
data-size="140" как раз размер....а ещё, вам скорее всего понадобится data-width="15" - это длина этих "палочек" графика...
Десятые по-моему не вывести...хотя, если шрифт уменьшить data-text="<font style='color:White;size:13px'>%Sensor_temp03.value%</font>" то может что и выйдет.
Ещё хз, как надпись ("Температура") отреагирует на уменьшение...

Сам хочу что-нить сделать интересное...но не могу найти адекватных примеров...
https://codepen.io/emad_elsaid/pen/wryLg вот такие находил...но что-то сильно простенько...те, что выложил - пока больше всего понравились =)
Raspberry Pi3+Broadlink+esp8266 (blynk)+AMS
Если вам помогло какое-либо сообщение - не забывайте пользоваться кнопкой "СПАСИБО".
:arrow: Услуги в профиле коннект
>>>>>Мой новый канал на ютутбе, подписывайтесь!<<<<<
Аватара пользователя
igorewa
Сообщения: 515
Зарегистрирован: Ср дек 21, 2016 11:54 pm
Откуда: Киев
Благодарил (а): 12 раз
Поблагодарили: 43 раза

Re: Сцены и оформление (сборка)

Сообщение igorewa » Пт дек 01, 2017 6:01 pm

Уменьшается вместе со словом температура, но становиться плохо читаемым и теряется вся красота ( Нужно начинать рисовать новую сцену, красивую и современную ))
СпойлерПоказать
Снимок экрана 2017-12-01 в 16.58.56.png
Снимок экрана 2017-12-01 в 16.58.56.png (659.69 КБ) 6479 просмотров
ASUS H110T, I5 7500, DDR4-16Gb, SSD256 . WIN10 64 (LTSB)
Аватара пользователя
nick7zmail
Сообщения: 7573
Зарегистрирован: Пн окт 28, 2013 8:14 am
Откуда: Екатеринбург
Благодарил (а): 121 раз
Поблагодарили: 2008 раз

Re: Сцены и оформление (сборка)

Сообщение nick7zmail » Пт дек 01, 2017 7:06 pm

Адаптировал под меньший размер сцены...убрал нафиг надпись, поставил значек на фон...вроде адекватно смотрится...и размером с выключатель -75х75. Ещё бы текст ну совсем чуууть чуть побольше...но это уже, скорее всего, в библиотеку лезть надо.
11.jpg
11.jpg (28.04 КБ) 6468 просмотров
cssПоказать

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

.GaugeMeter {
  position: Relative;
  text-align: Center;
  overflow: Hidden;
  cursor: Default;
  display: inline-block;
}

.GaugeMeter SPAN, .GaugeMeter B {
  width: 54%;
  position: Absolute;
  text-align: Center;
  display: Inline-Block;
  color: RGBa(0,0,0,.8);
  font-weight: 100;
  font-family: "Open Sans", Arial;
  overflow: Hidden;
  white-space: NoWrap;
  text-overflow: Ellipsis;
  margin: 0 23%;
}

.GaugeMeter[data-style="Semi"] B {
  width: 80%;
  margin: 0 10%;
}

.GaugeMeter S, .GaugeMeter U {
  text-decoration: None;
  font-size: .60em;
  font-weight: 200;
  opacity: .6;
}

.GaugeMeter B {
  color: #000;
  font-weight: 200;
  opacity: .8;
}
.GCont {
background-color: #000;
opacity: .8;
border-radius: 18px;
border:1px solid #777;
}
.fa {
    font-size: 65px;
    padding-top: 5px;
   color: #ffffff3d;
position: absolute;
margin-left: 21px;
} 
элементПоказать

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

<link rel="stylesheet" href="/css/font-awesome/css/font-awesome.min.css">
<script src="/js/gaugeMeter.js"></script>
<script>$(".GaugeMeter").gaugeMeter();</script>
<div class="GCont">
<span class="fa fa-thermometer-full"; aria-hidden="true"></span>
<div class="GaugeMeter" id="test" data-total="40" data-used="%Sensor_temp03.value%"
     data-text="<font style='color:White;size:18px'>%Sensor_temp03.value%</font>"
     data-append="<font style='color:white'>°C</font>" data-prepend="<font style='color:white'>Sensor_temp03.dynamic </font>"
     data-size="75" data-theme="White" data-back="RGBa(255,255,255,.2)" data-width="9" data-label=""
     data-label_color="#FFF" data-stripe="2"></div>
</div>
Raspberry Pi3+Broadlink+esp8266 (blynk)+AMS
Если вам помогло какое-либо сообщение - не забывайте пользоваться кнопкой "СПАСИБО".
:arrow: Услуги в профиле коннект
>>>>>Мой новый канал на ютутбе, подписывайтесь!<<<<<
Аватара пользователя
nick7zmail
Сообщения: 7573
Зарегистрирован: Пн окт 28, 2013 8:14 am
Откуда: Екатеринбург
Благодарил (а): 121 раз
Поблагодарили: 2008 раз

Re: Сцены и оформление (сборка)

Сообщение nick7zmail » Пт дек 01, 2017 7:19 pm

Не...чет сколько не издеваюсь - он не такой классный, как большой =(
11.jpg
11.jpg (7.73 КБ) 6464 просмотра
Есть на примете какие-нить компактные информеры? Чтобы минимум места, максимум информативности, чтоб вместилась стрелочка направления, единицы измерения, и выглядело всё опрятно?
Raspberry Pi3+Broadlink+esp8266 (blynk)+AMS
Если вам помогло какое-либо сообщение - не забывайте пользоваться кнопкой "СПАСИБО".
:arrow: Услуги в профиле коннект
>>>>>Мой новый канал на ютутбе, подписывайтесь!<<<<<
Ответить