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

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

Модераторы: Bagir, Ivan, immortal, Vit, PAV

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

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

Сообщение 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 КБ) 14570 просмотров
TabletClock.jpg
TabletClock.jpg (128.9 КБ) 14542 просмотра
файлыПоказать
Tablet_Clock.elements.zip
(2.41 КБ) 153 скачивания
templates_alt.zip
(332.67 КБ) 151 скачивание
Сцена 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 КБ) 14521 просмотр
radio_droid.jpg
radio_droid.jpg (33.01 КБ) 14521 просмотр
файлыПоказать
droid.zip
(66.45 КБ) 219 скачиваний
fonts.zip
(589.81 КБ) 137 скачиваний

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

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

Сцена Погода (вертикальная) от Sandr
скриныПоказать
Изображение
Изображение
Изображение
Сцена Погода горизонтальная от adzam
скриныПоказать
Изображение
Сцена дизайн для планшета от webms
скриныПоказать
Выделение_055.png
Выделение_055.png (803.92 КБ) 10129 просмотров
Выделение_056.png
Выделение_056.png (415.96 КБ) 10129 просмотров
Выделение_057.png
Выделение_057.png (211.81 КБ) 10128 просмотров
Выделение_058.png
Выделение_058.png (335.34 КБ) 10128 просмотров
Индикаторы xor
Описание и файлыПоказать
скриныПоказать
Выделение_072.png
Выделение_072.png (154.89 КБ) 9785 просмотров
Индикаторы nick7zmail
Описание и файлыПоказать
скриныПоказать
Изображение
Индикаторы gauge.min.js
описание и файлыПоказать
скачиваем файл и распаковываем в папку js
gauge.min.js.zip
(12.88 КБ) 85 скачиваний
в сцене или куда надо вставить индикатор создаем 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 КБ) 9784 просмотра
За это сообщение автора immortal поблагодарили (всего 11):
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) и ещё один
Рейтинг: 15.07%
Lubuntu на cubieboard2 + ds9490R
DietPi на Orange Pi PC + 1wire на esp8266 с прошивкой Homes-smart.ru
immortal
Сообщения: 1069
Зарегистрирован: Вт янв 29, 2013 9:16 am
Откуда: Белозерск
Благодарил (а): 15 раз
Поблагодарили: 365 раз
Контактная информация:

Re: Сцены

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

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

Re: Сцены

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

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

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 раз
Поблагодарили: 15 раз

Re: Сцены

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

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

Re: Сцены

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

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

ЗЫ вроде тут она выложена viewtopic.php?f=18&t=2105&hilit=eco%2A
Аватара пользователя
nick7zmail
Сообщения: 5922
Зарегистрирован: Пн окт 28, 2013 8:14 am
Откуда: Екатеринбург
Благодарил (а): 115 раз
Поблагодарили: 1471 раз

Re: Сцены

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

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

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

Вдруг кому понадобятся...
Вложения
modules.rar
(61.68 КБ) 157 скачиваний
Raspberry Pi3+Broadlink+esp8266 (blynk)+AMS
Если вам помогло какое-либо сообщение - не забывайте пользоваться кнопкой "СПАСИБО".
:arrow: Услуги в профиле коннект
>>>>>Мой новый канал на ютутбе, подписывайтесь!<<<<<
immortal
Сообщения: 1069
Зарегистрирован: Вт янв 29, 2013 9:16 am
Откуда: Белозерск
Благодарил (а): 15 раз
Поблагодарили: 365 раз
Контактная информация:

Re: Сцены

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

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

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

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

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

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

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

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

<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 КБ) 13597 просмотров
Добавляется кодом

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

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

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

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

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