MajorDoMo

Добавлено: **Чт мар 30, 2017 1:47 pm**

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

Сцена Tablet Clock

описаниеSPOILER_SHOW

Сцена для планшетов на основе приложения Tablet Clock, делалась для планшета с нерабочим тачем, используется шрифт по этому в приложении Majordroid не работает, шрифт tts по этому в iOS не работает, есть конвертеры шрифта и при желании можно сделать чтобы работало в iOS, на планшет устанавливаем Firefox и плагин Full Screen Mobile, запускаем страницу с сценой и разворачиваем на весь экран. Данная схема под 8' планшет irbis tz85 но можно адаптировать и для других планшетов.

скриныSPOILER_SHOW

: Выделение_131.png (50.33 КБ) 30297 просмотров

: TabletClock.jpg (128.9 КБ) 30269 просмотров

файлыSPOILER_SHOW

Tablet_Clock.elements.zip: (2.41 КБ) 590 скачиваний

templates_alt.zip: (332.67 КБ) 574 скачивания

Сцена Droid

описаниеSPOILER_SHOW

Сцены для использования в MajorDroid на мобильном телефоне с разрешением экрана FULLHD.
используется локальная css font-awesome версии 4.7, файл font-awesome.min.css надо положить по пути /templates_alt/css/awesome/
папку fonts распаковать по пути /templates_alt/css/

скриныSPOILER_SHOW

: menu_droid.jpg (51.11 КБ) 30248 просмотров

: radio_droid.jpg (33.01 КБ) 30248 просмотров

файлыSPOILER_SHOW

droid.zip: (66.45 КБ) 654 скачивания

fonts.zip: (589.81 КБ) 615 скачиваний

Сцена Дизайн сцен 2

описаниеSPOILER_SHOW

Обсуждение темы: тут
Установка сцены: https://youtu.be/ZRWDUY4UZfY

скриныSPOILER_SHOW

Главная.

Погода.

Маршруты (GPS)

Видеонаблюдение

Диаграммы.

Управление.

файлыSPOILER_SHOW

Главная
Погода архив 1
Погода архив 2 (перед объединением уберите последнее расширение .zip)
Маршруты (GPS)
Видеонаблюдение
Управление

Выключатели, кнопки, индикаторы стилизованные под "Дизайн сцен2"

Ещё сцены

Элемент сцен "Выключатель-лампочка"

описаниеSPOILER_SHOW

выключатели на сцену в виде ламочек накаливания с индикацией состояния. В архиве элемент сцены, картинки лампочек в состоянии вкл и выкл и исходник в GIMP

скриныSPOILER_SHOW

файлыSPOILER_SHOW

архив

Иконки Oxygen для приложений, погоды и меню

Для приложенийSPOILER_SHOW

Архив и описание для приложений

Для погоды.SPOILER_SHOW

Арихив и описание

Для менюSPOILER_SHOW

Архив и описание

Сцена nick7zmail

описание и файлыSPOILER_SHOW

Сцена пользователя nick7zmail, описание и файлы

скриныSPOILER_SHOW

Сцена Погода (вертикальная) от Sandr

описание и файлыSPOILER_SHOW

Описание и файлы ,а так же обсуждение темы тут.

скриныSPOILER_SHOW

Сцена Погода горизонтальная от adzam

описание и файлыSPOILER_SHOW

Описание и файлы ,а так же обсуждение темы тут.

скриныSPOILER_SHOW

Сцена дизайн для планшета от webms

описание и файлыSPOILER_SHOW

Описание и файлы ,а так же обсуждение темы тут.

скриныSPOILER_SHOW

: Выделение_055.png (803.92 КБ) 25856 просмотров

: Выделение_056.png (415.96 КБ) 25856 просмотров

: Выделение_057.png (211.81 КБ) 25855 просмотров

: Выделение_058.png (335.34 КБ) 25855 просмотров

Индикаторы xor

Описание и файлыSPOILER_SHOW

Файлы, код и описание

скриныSPOILER_SHOW

: Выделение_072.png (154.89 КБ) 25512 просмотров

Индикаторы nick7zmail

Описание и файлыSPOILER_SHOW

Файлы, код и описание

скриныSPOILER_SHOW

Индикаторы gauge.min.js

описание и файлыSPOILER_SHOW

скачиваем файл и распаковываем в папку js

gauge.min.js.zip: (12.88 КБ) 611 скачиваний

в сцене или куда надо вставить индикатор создаем 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>

все параметры тут

скриныSPOILER_SHOW

: Выделение_074.png (34.01 КБ) 25511 просмотров

Интерфейс управления котлом

Описание и файлыSPOILER_SHOW

Описание и файлы

СкриныSPOILER_SHOW

Сцена погоды

описание и файлыSPOILER_SHOW

описание и файлы

СкриныSPOILER_SHOW

Кнопки в панели полупрозрачные

описание и файлыSPOILER_SHOW

описание и файлы

скриныSPOILER_SHOW

Сцена город (есть в маркете дополнений)

описание и ссылкиSPOILER_SHOW

описание и ссылки

скриныSPOILER_SHOW

Графические статусы.

описание, видео, файлыSPOILER_SHOW

описание, видео, файлы

скриныSPOILER_SHOW

: 00002.png (42.7 КБ) 9391 просмотр

Кнопки аниммированные под "Дизайн сцен"

файлы, описаниеSPOILER_SHOW

файлы, описание

скринSPOILER_SHOW

кнопки плеера с иконками шрифта от бустрапа

файлы, описаниеSPOILER_SHOW

файлы, описание

скринSPOILER_SHOW

Пак выключателей для сцен

описание, файлыSPOILER_SHOW

описание, файлы

скринSPOILER_SHOW

virtuino mqtt dashboard

скриныSPOILER_SHOW

видео, описание, файлыSPOILER_SHOW

видео, описание, файлы

Полезные ссылки

возвращает на гл. сцену при бездействии через 60 сек, отслеживает нажатия и движения мыши.

Добавлено: **Чт мар 30, 2017 5:44 pm**

Добавил сцену Droid в шапку

Добавлено: **Вт апр 04, 2017 10:27 pm**

Элементы схемы Выключатель-лампочка: выключатели в виде лампочек накаливания.

: Выделение_138.png (199.84 КБ) 30077 просмотров

В архиве элемент схемы и файлы картинки состояния ламп

lamp.zip: (59.98 КБ) 845 скачиваний

Добавлено: **Вт апр 04, 2017 10:34 pm**

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

Добавлено: **Чт апр 06, 2017 2:55 pm**

Коллеги простите за наглость, не поделится ли кто нибудь сценой которая расположена в шапке. Скрин прилогаю.

2017-04-06_21-52-21.png

Добавлено: **Чт апр 06, 2017 9:53 pm**

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

ЗЫ вроде тут она выложена viewtopic.php?f=18&t=2105&hilit=eco%2A

Добавлено: **Чт апр 13, 2017 9:45 pm**

Не совсем в тему, но всё же)) Ну нравится мне прикручивать иконки Oxygen к МД.
На этот раз под раздачу попали приложения (страничка apps.html)

: sc.jpg (45.67 КБ) 29785 просмотров

Архив распаковать в /htdocs/img/

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

Вдруг кому понадобятся...

Добавлено: **Пт апр 14, 2017 11:02 am**

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

Спасибо, добавил в шапку, название темы отредактировал ,по этому в тему.

Выкладываем свои наработки или даем ссылки на наработки в форуме, добавлю в шапку

Добавлено: **Вс апр 30, 2017 9:41 pm**

Привет всем))
Немного прибираюсь в МД, нашел свою старую сценку...
Я то ей уже не пользуюсь, но трудов в своё время было вложено много)) Даже удалять жалко)) И есть интересные наработки, которые могут заинтересовать как новичков, так и опытных пользователей.
Собственно вот сама сцена:

: 1.jpg (148.2 КБ) 29324 просмотра

: 2.jpg (153.47 КБ) 29324 просмотра

Изначально был только прямоугольник в центре для "минималистичного" контроля...

: 163_image_1444713857.jpg (93.99 КБ) 29324 просмотра

Потом МД обрастал различными функциями, и соответствующими элементами на сцене...под конец не скажу что выглядела опрятно, но, как уже озвучил - появилось много интересных наработок. Так же принял решение, что с компа использую только сцены, с телефона только меню...

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

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

<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 (7.22 КБ) 29324 просмотра

Добавляется кодом

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

<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

Добавлено в шапку

Добавлено: **Вт июн 27, 2017 11:19 am**

Добавьте к "дизайн сцен 2" viewtopic.php?t=2588&p=31207#p31207
Полезная ссылочка. Еле нашел её...

MajorDoMo

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

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

Re: Сцены

Re: Сцены

Re: Сцены

Re: Сцены

Re: Сцены

Re: Сцены

Re: Сцены

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

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