MajorDoMo

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

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

Сцена Tablet Clock

описаниеПоказать

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

скриныПоказать

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

: TabletClock.jpg (128.9 КБ) 29304 просмотра

файлыПоказать

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

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

Сцена Droid

описаниеПоказать

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

скриныПоказать

: menu_droid.jpg (51.11 КБ) 29283 просмотра

: radio_droid.jpg (33.01 КБ) 29283 просмотра

файлыПоказать

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

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

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

описаниеПоказать

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

скриныПоказать

Главная.

Погода.

Маршруты (GPS)

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

Диаграммы.

Управление.

файлыПоказать

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

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

Ещё сцены

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

описаниеПоказать

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

скриныПоказать

файлыПоказать

архив

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

Для приложенийПоказать

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

Для погоды.Показать

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

Для менюПоказать

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

Сцена nick7zmail

описание и файлыПоказать

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

скриныПоказать

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

описание и файлыПоказать

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

скриныПоказать

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

описание и файлыПоказать

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

скриныПоказать

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

описание и файлыПоказать

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

скриныПоказать

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

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

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

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

Индикаторы xor

Описание и файлыПоказать

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

скриныПоказать

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

Индикаторы nick7zmail

Описание и файлыПоказать

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

скриныПоказать

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

описание и файлыПоказать

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

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

в сцене или куда надо вставить индикатор создаем 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 (34.01 КБ) 24546 просмотров

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

Описание и файлыПоказать

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

СкриныПоказать

Сцена погоды

описание и файлыПоказать

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

СкриныПоказать

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

описание и файлыПоказать

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

скриныПоказать

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

описание и ссылкиПоказать

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

скриныПоказать

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

описание, видео, файлыПоказать

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

скриныПоказать

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

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

файлы, описаниеПоказать

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

скринПоказать

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

файлы, описаниеПоказать

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

скринПоказать

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

описание, файлыПоказать

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

скринПоказать

virtuino mqtt dashboard

скриныПоказать

видео, описание, файлыПоказать

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

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

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

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

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

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

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

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

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

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

Добавлено: **Вт апр 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 КБ) 28820 просмотров

Архив распаковать в /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 КБ) 28359 просмотров

: 2.jpg (153.47 КБ) 28359 просмотров

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

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

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

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

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

<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 КБ) 28359 просмотров

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

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

<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: Сцены и оформление