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

[immortal]

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

Сцена Tablet Clock

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

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

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

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

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

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

Tablet_Clock.elements.zip

(2.41 КБ) 509 скачиваний

templates_alt.zip

(332.67 КБ) 498 скачиваний

Сцена 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 КБ) 28712 просмотров

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

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

droid.zip

(66.45 КБ) 577 скачиваний

fonts.zip

(589.81 КБ) 534 скачивания

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

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

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

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

Главная.

Погода.

Маршруты (GPS)

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

Диаграммы.

Управление.

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

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

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

Ещё сцены

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

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

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

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

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

архив

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

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

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

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

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

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

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

Сцена nick7zmail

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Индикаторы xor

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

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

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

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

Индикаторы nick7zmail

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

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

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

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

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

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

gauge.min.js.zip

(12.88 КБ) 513 скачиваний

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

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

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

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

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

Сцена погоды

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

virtuino mqtt dashboard

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

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

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

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

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

[immortal]

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

[immortal]

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

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

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

lamp.zip

(59.98 КБ) 734 скачивания

[immortal]

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

[alekszander]

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

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

[C_3AXAPOB]

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

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

[nick7zmail]

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

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

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

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

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

[immortal]

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

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

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

[nick7zmail]

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

1.jpg (148.2 КБ) 27788 просмотров

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

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

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

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

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

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

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

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

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

<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

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

[nick7zmail]

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