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

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

Модератор: immortal

immortal
Сообщения: 1138
Зарегистрирован: Вт янв 29, 2013 9:16 am
Откуда: Белозерск
Благодарил (а): 16 раз
Поблагодарили: 400 раз
Контактная информация:

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

Сообщение immortal » Чт мар 30, 2017 1:47 pm

Решил собрать все сцены пользователей в одном месте и начал с выкладывания своей Сцены

Сцена Tablet Clock
описаниеПоказать
Сцена для планшетов на основе приложения Tablet Clock, делалась для планшета с нерабочим тачем, используется шрифт по этому в приложении Majordroid не работает, шрифт tts по этому в iOS не работает, есть конвертеры шрифта и при желании можно сделать чтобы работало в iOS, на планшет устанавливаем Firefox и плагин Full Screen Mobile, запускаем страницу с сценой и разворачиваем на весь экран. Данная схема под 8' планшет irbis tz85 но можно адаптировать и для других планшетов.
скриныПоказать
Выделение_131.png
Выделение_131.png (50.33 КБ) 26276 просмотров
TabletClock.jpg
TabletClock.jpg (128.9 КБ) 26248 просмотров
файлыПоказать
Tablet_Clock.elements.zip
(2.41 КБ) 438 скачиваний
templates_alt.zip
(332.67 КБ) 425 скачиваний
Сцена Droid
описаниеПоказать
Сцены для использования в MajorDroid на мобильном телефоне с разрешением экрана FULLHD.
используется локальная css font-awesome версии 4.7, файл font-awesome.min.css надо положить по пути /templates_alt/css/awesome/
папку fonts распаковать по пути /templates_alt/css/
скриныПоказать
menu_droid.jpg
menu_droid.jpg (51.11 КБ) 26227 просмотров
radio_droid.jpg
radio_droid.jpg (33.01 КБ) 26227 просмотров
файлыПоказать
droid.zip
(66.45 КБ) 502 скачивания
fonts.zip
(589.81 КБ) 406 скачиваний

Сцена Дизайн сцен 2
описаниеПоказать
Обсуждение темы: тут
Установка сцены: https://youtu.be/ZRWDUY4UZfY
скриныПоказать
Изображение
Главная.
Изображение
Погода.
Изображение
Маршруты (GPS)
Изображение
Видеонаблюдение
Изображение
Диаграммы.
Изображение
Управление.
Изображение
Ещё сцены

Элемент сцен "Выключатель-лампочка"
описаниеПоказать
выключатели на сцену в виде ламочек накаливания с индикацией состояния. В архиве элемент сцены, картинки лампочек в состоянии вкл и выкл и исходник в GIMP
скриныПоказать
Изображение
файлыПоказать
Иконки Oxygen для приложений, погоды и меню
Для приложенийПоказать
Для погоды.Показать
Для менюПоказать
Сцена nick7zmail
описание и файлыПоказать
Сцена пользователя nick7zmail, описание и файлы
скриныПоказать
Изображение
Изображение
Изображение

Сцена Погода (вертикальная) от Sandr
скриныПоказать
Изображение
Изображение
Изображение
Сцена Погода горизонтальная от adzam
скриныПоказать
Изображение
Сцена дизайн для планшета от webms
скриныПоказать
Выделение_055.png
Выделение_055.png (803.92 КБ) 21835 просмотров
Выделение_056.png
Выделение_056.png (415.96 КБ) 21835 просмотров
Выделение_057.png
Выделение_057.png (211.81 КБ) 21834 просмотра
Выделение_058.png
Выделение_058.png (335.34 КБ) 21834 просмотра
Индикаторы xor
Описание и файлыПоказать
скриныПоказать
Выделение_072.png
Выделение_072.png (154.89 КБ) 21491 просмотр
Индикаторы nick7zmail
Описание и файлыПоказать
скриныПоказать
Изображение
Индикаторы gauge.min.js
описание и файлыПоказать
скачиваем файл и распаковываем в папку js
gauge.min.js.zip
(12.88 КБ) 329 скачиваний
в сцене или куда надо вставить индикатор создаем html элемент со следующим кодом

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

<script async src="/js/gauge.min.js"></script>

<canvas data-type="linear-gauge"
        data-width="100"
        data-height="400"
        data-border-radius="20"
        data-borders="0"
        data-bar-stroke-width="20"
        data-minor-ticks="10"
        data-major-ticks="0,10,20,30,40,50,60,70,80,90,100"
        data-value="22.3"
        data-units="°C"
        data-color-value-box-shadow="false"
></canvas>

<canvas data-type="radial-gauge"
        data-width="200"
        data-height="200"
        data-units="Km/h"
        data-title="false"
        data-value="0"
        data-min-value="0"
        data-max-value="220"
        data-major-ticks="0,20,40,60,80,100,120,140,160,180,200,220"
        data-minor-ticks="2"
        data-stroke-ticks="false"
        data-highlights='[
            { "from": 0, "to": 50, "color": "rgba(0,255,0,.15)" },
            { "from": 50, "to": 100, "color": "rgba(255,255,0,.15)" },
            { "from": 100, "to": 150, "color": "rgba(255,30,0,.25)" },
            { "from": 150, "to": 200, "color": "rgba(255,0,225,.25)" },
            { "from": 200, "to": 220, "color": "rgba(0,0,255,.25)" }
        ]'
        data-color-plate="#222"
        data-color-major-ticks="#f5f5f5"
        data-color-minor-ticks="#ddd"
        data-color-title="#fff"
        data-color-units="#ccc"
        data-color-numbers="#eee"
        data-color-needle-start="rgba(240, 128, 128, 1)"
        data-color-needle-end="rgba(255, 160, 122, .9)"
        data-value-box="true"
        data-animation-rule="bounce"
        data-animation-duration="500"
        data-font-value="Led"
        data-animated-value="true"
></canvas>
все параметры тут
скриныПоказать
Выделение_074.png
Выделение_074.png (34.01 КБ) 21490 просмотров
Интерфейс управления котлом
Описание и файлыПоказать
СкриныПоказать
Изображение
Сцена погоды
описание и файлыПоказать
СкриныПоказать
Изображение
Кнопки в панели полупрозрачные
описание и файлыПоказать
скриныПоказать
Изображение
Сцена город (есть в маркете дополнений)
описание и ссылкиПоказать
скриныПоказать
Изображение
Графические статусы.
описание, видео, файлыПоказать
скриныПоказать
00002.png
00002.png (42.7 КБ) 5370 просмотров
Кнопки аниммированные под "Дизайн сцен"
файлы, описаниеПоказать
скринПоказать
Изображение
кнопки плеера с иконками шрифта от бустрапа
файлы, описаниеПоказать
скринПоказать
Изображение
Пак выключателей для сцен
описание, файлыПоказать
скринПоказать
Изображение
Изображение
virtuino mqtt dashboard
скриныПоказать
Изображение
Изображение
Изображение
видео, описание, файлыПоказать
Полезные ссылки

возвращает на гл. сцену при бездействии через 60 сек, отслеживает нажатия и движения мыши.
За это сообщение автора immortal поблагодарили (всего 14):
alx69 (Чт мар 30, 2017 2:17 pm) • skysilver (Чт мар 30, 2017 2:25 pm) • Denis_k (Чт мар 30, 2017 3:07 pm) • kurs (Чт мар 30, 2017 4:54 pm) • lanket (Чт мар 30, 2017 8:20 pm) • C_3AXAPOB (Вт апр 04, 2017 11:28 pm) • kawkay (Чт апр 13, 2017 10:47 am) • rial2001 (Ср янв 10, 2018 3:02 pm) • Ander (Чт июл 19, 2018 1:08 pm) • Amarok (Ср авг 29, 2018 3:13 pm) и ещё 4
Рейтинг: 16.28%
Lubuntu на cubieboard2 + ds9490R
DietPi на Orange Pi PC + 1wire на esp8266 с прошивкой Homes-smart.ru
immortal
Сообщения: 1138
Зарегистрирован: Вт янв 29, 2013 9:16 am
Откуда: Белозерск
Благодарил (а): 16 раз
Поблагодарили: 400 раз
Контактная информация:

Re: Сцены

Сообщение immortal » Чт мар 30, 2017 5:44 pm

Добавил сцену Droid в шапку
ИзображениеИзображение
За это сообщение автора immortal поблагодарили (всего 2):
lanket (Чт мар 30, 2017 8:20 pm) • Denisss (Вс май 13, 2018 2:26 pm)
Рейтинг: 2.33%
Lubuntu на cubieboard2 + ds9490R
DietPi на Orange Pi PC + 1wire на esp8266 с прошивкой Homes-smart.ru
immortal
Сообщения: 1138
Зарегистрирован: Вт янв 29, 2013 9:16 am
Откуда: Белозерск
Благодарил (а): 16 раз
Поблагодарили: 400 раз
Контактная информация:

Re: Сцены

Сообщение immortal » Вт апр 04, 2017 10:27 pm

Элементы схемы Выключатель-лампочка: выключатели в виде лампочек накаливания.
Выделение_138.png
Выделение_138.png (199.84 КБ) 26056 просмотров
В архиве элемент схемы и файлы картинки состояния ламп
lamp.zip
(59.98 КБ) 632 скачивания
Lubuntu на cubieboard2 + ds9490R
DietPi на Orange Pi PC + 1wire на esp8266 с прошивкой Homes-smart.ru
immortal
Сообщения: 1138
Зарегистрирован: Вт янв 29, 2013 9:16 am
Откуда: Белозерск
Благодарил (а): 16 раз
Поблагодарили: 400 раз
Контактная информация:

Re: Сцены

Сообщение immortal » Вт апр 04, 2017 10:34 pm

Делимся своими сценами, если раньше выкладывали, то дайте ссылку я добавлю в шапку.
Lubuntu на cubieboard2 + ds9490R
DietPi на Orange Pi PC + 1wire на esp8266 с прошивкой Homes-smart.ru
alekszander
Сообщения: 178
Зарегистрирован: Вс янв 05, 2014 5:37 am
Благодарил (а): 10 раз
Поблагодарили: 17 раз

Re: Сцены

Сообщение alekszander » Чт апр 06, 2017 2:55 pm

Коллеги простите за наглость, не поделится ли кто нибудь сценой которая расположена в шапке. Скрин прилогаю.
2017-04-06_21-52-21.png
C_3AXAPOB
Сообщения: 510
Зарегистрирован: Ср июн 08, 2016 4:17 pm
Благодарил (а): 124 раза
Поблагодарили: 101 раз

Re: Сцены

Сообщение C_3AXAPOB » Чт апр 06, 2017 9:53 pm

Вроде это пользователя Vit. Попросите у него.

ЗЫ вроде тут она выложена viewtopic.php?f=18&t=2105&hilit=eco%2A
Orange pi pc plus, megaD-2561, Xiaomi
--------------------------------------------------
http://connect.smartliving.ru/profile/908
Аватара пользователя
nick7zmail
Сообщения: 7573
Зарегистрирован: Пн окт 28, 2013 8:14 am
Откуда: Екатеринбург
Благодарил (а): 121 раз
Поблагодарили: 2010 раз

Re: Сцены

Сообщение nick7zmail » Чт апр 13, 2017 9:45 pm

Не совсем в тему, но всё же)) Ну нравится мне прикручивать иконки Oxygen к МД.
На этот раз под раздачу попали приложения (страничка apps.html)
sc.jpg
sc.jpg (45.67 КБ) 25764 просмотра
Архив распаковать в /htdocs/img/

Вот ещё пачка оксигеноских иконок для погоды viewtopic.php?t=2211&p=34258#p34258
И для меню viewtopic.php?f=4&t=671&p=24515

Вдруг кому понадобятся...
Вложения
modules.rar
(61.68 КБ) 384 скачивания
За это сообщение автора nick7zmail поблагодарил:
shswork (Ср окт 27, 2021 12:08 pm)
Рейтинг: 1.16%
Raspberry Pi3+Broadlink+esp8266 (blynk)+AMS
Если вам помогло какое-либо сообщение - не забывайте пользоваться кнопкой "СПАСИБО".
:arrow: Услуги в профиле коннект
>>>>>Мой новый канал на ютутбе, подписывайтесь!<<<<<
immortal
Сообщения: 1138
Зарегистрирован: Вт янв 29, 2013 9:16 am
Откуда: Белозерск
Благодарил (а): 16 раз
Поблагодарили: 400 раз
Контактная информация:

Re: Сцены

Сообщение immortal » Пт апр 14, 2017 11:02 am

nick7zmail писал(а):Не совсем в тему, но всё же)) Ну нравится мне прикручивать иконки Oxygen к МД.
Спасибо, добавил в шапку, название темы отредактировал ,по этому в тему.

Выкладываем свои наработки или даем ссылки на наработки в форуме, добавлю в шапку
Lubuntu на cubieboard2 + ds9490R
DietPi на Orange Pi PC + 1wire на esp8266 с прошивкой Homes-smart.ru
Аватара пользователя
nick7zmail
Сообщения: 7573
Зарегистрирован: Пн окт 28, 2013 8:14 am
Откуда: Екатеринбург
Благодарил (а): 121 раз
Поблагодарили: 2010 раз

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

Сообщение nick7zmail » Вс апр 30, 2017 9:41 pm

Привет всем))
Немного прибираюсь в МД, нашел свою старую сценку...
Я то ей уже не пользуюсь, но трудов в своё время было вложено много)) Даже удалять жалко)) И есть интересные наработки, которые могут заинтересовать как новичков, так и опытных пользователей.
Собственно вот сама сцена:
1.jpg
1.jpg (148.2 КБ) 25303 просмотра
2.jpg
2.jpg (153.47 КБ) 25303 просмотра
Изначально был только прямоугольник в центре для "минималистичного" контроля...
163_image_1444713857.jpg
163_image_1444713857.jpg (93.99 КБ) 25303 просмотра
Потом МД обрастал различными функциями, и соответствующими элементами на сцене...под конец не скажу что выглядела опрятно, но, как уже озвучил - появилось много интересных наработок. Так же принял решение, что с компа использую только сцены, с телефона только меню...

Вот и первое из решений (на скринах оно не представлено, но работает, как говорится)) Чтобы скрыть боковое меню "по умолчанию" (чтобы при открытии домашней страницы отображалась только панель вкладок, и собственно сцены) - добавляем код

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

<script language="javascript">
 function leftPanelToggle() {
  $('#leftPanel').toggle();
  if ( $("#leftPanel").is(":visible") ) {
   $("#leftPanelToggleIcon").attr("src","<#ROOTHTML#>images/icon_left.png");
  } else { 
   $("#leftPanelToggleIcon").attr("src","<#ROOTHTML#>images/icon_right.png");
  }
  return false;
 }
</script>
на страничку templates_alt/default.html (предварительно скопировав её из templates) куда-нибудь после открывающего тега <table>.

Вторая из интересных наработок, как вы наверное заметили - стрелочные часы. Сделаны на библиотеке processing.js.
Чтобы они заработали - нужно подключить эту библиотеку в scenes.html и applications.html (находятся так же в templates, в теге <head> подключаем скачанную библиотеку)

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

<script type="text/javascript" src="/js/processing.js"></script>
Часы (в архиве с элементами) кладем по пути /js/processing/clock.pde

Третье интересное решение (не по виду, но по функционалу) - это боковая панель с кнопками. Она работает по типу вкладок. Активна может быть только одна из кнопок, нажатие на другую кнопку - выключает другие нажатые кнопки...достигается это за счет свойств объектов. Нажатие на включенную кнопку - отключает её. Разные кнопки активируют разные <iframe>-ы или контейнеры, в которых, в каждом - своя мини панель управления...

Ну и четвертое довольно забавное решение - 3d кубик с погодой...кубик крутится, погоду может отображать сразу в 4 населенных пунктах)))
Да, это реальное 3d сделанное на three.js. Вставлено так же iframe-ом достаточно положить файлик из архива по пути /three/webgl_geometry_cube.html, и туда же распаковать библиотеку three.js (чтобы путь к ней выглядил как /three/js/three.js, так же создать в three папку img. Туда будут закачиваться картинки с яндекс информерами...закачиваются они скриптом

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

$url = 'http://info.weather.yandex.net/yekaterinburg/4.ru.png';
$path = './three/img/yk.png';
file_put_contents($path, file_get_contents($url));
sleep(1);
$url = 'http://info.weather.yandex.net/nizhniy-tagil/4.ru.png';
$path = './three/img/nt.png';
file_put_contents($path, file_get_contents($url));
На этом вроде основные интересные моменты расписал)))
Ещё один в дагонку)) Вот такой кубик у меня заменил кнопку домой
3.jpg
3.jpg (7.22 КБ) 25303 просмотра
Добавляется кодом

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

<a href="<#ROOTHTML#>"><canvas id="sketch" data-processing-sources="/js/processing/RGB_Cube2.pde" ></canvas></a> 
на ту же default.html. Так же должна быть подключена библиотека processing.js (как это сделать - написано выше)

RGB-cube, часы, страница с threejs кубиком, фон, и общий экспорт элементов сцены - во вложенном архиве...
Библиотеки processing.js и three.js легко ищутся на просторах интернета на официальных сайтах.

Думаю всё...со спокойной душой удаляю сцену...надеюсь мои труды кого нить заинтересуют...
Возникнут вопросы - пишите, дополню пост.

Дополнительная информация по настройке: viewtopic.php?p=61944#p61944

Добавлено в шапку
Вложения
robot_scene.rar
(42.98 КБ) 470 скачиваний
Последний раз редактировалось nick7zmail Пн окт 16, 2017 7:20 pm, всего редактировалось 1 раз.
За это сообщение автора nick7zmail поблагодарили (всего 2):
lanket (Вт май 02, 2017 11:32 am) • vitt76 (Пт сен 15, 2017 1:49 pm)
Рейтинг: 2.33%
Raspberry Pi3+Broadlink+esp8266 (blynk)+AMS
Если вам помогло какое-либо сообщение - не забывайте пользоваться кнопкой "СПАСИБО".
:arrow: Услуги в профиле коннект
>>>>>Мой новый канал на ютутбе, подписывайтесь!<<<<<
Аватара пользователя
nick7zmail
Сообщения: 7573
Зарегистрирован: Пн окт 28, 2013 8:14 am
Откуда: Екатеринбург
Благодарил (а): 121 раз
Поблагодарили: 2010 раз

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

Сообщение nick7zmail » Вт июн 27, 2017 11:19 am

Добавьте к "дизайн сцен 2" viewtopic.php?t=2588&p=31207#p31207
Полезная ссылочка. Еле нашел её...
Raspberry Pi3+Broadlink+esp8266 (blynk)+AMS
Если вам помогло какое-либо сообщение - не забывайте пользоваться кнопкой "СПАСИБО".
:arrow: Услуги в профиле коннект
>>>>>Мой новый канал на ютутбе, подписывайтесь!<<<<<
Ответить