Дизайн сцен 2

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

Модератор: immortal

Аватара пользователя
Vovix
Сообщения: 1155
Зарегистрирован: Пн янв 27, 2014 1:43 am
Откуда: г.Ижевск
Благодарил (а): 60 раз
Поблагодарили: 531 раз
Контактная информация:

Re: Дизайн сцен 2

Сообщение Vovix » Чт мар 02, 2017 7:52 pm

темка убежала...
а полезная ведь!
Мой -CONNECT-
Windows 7(PHP 7.2) + Raspberry Pi(освещение на 1-Wire) + MP751(управление) + ESP8266(сенсоры) + LAN(сенсоры)
-=: Если вам помогло моё сообщение, нажмите кнопку "Поблагодарить за сообщение автора: Vovix" (кнопка Спасибо) справа! :=-
platon70
Сообщения: 4
Зарегистрирован: Сб сен 10, 2016 3:55 pm
Откуда: Россия, Стерлитамак
Благодарил (а): 1 раз
Поблагодарили: 0

Re: Дизайн сцен 2

Сообщение platon70 » Пт мар 03, 2017 7:14 am

Простите за невежество, но я ни как не пойму как запустить обсуждаемую сцену на планшете. Majordomo установлен на ноутбуке. Сцену я настроил. Пока не полностью, а только главную страницу и погоду. Еще добавил страницу с GPS, но пока не разобрался с выводом карты (я так понял, что карту должен подгружать планшет за счет встроенного GPS). Поправьте, если что не так. На планшете установил Majordroid. Настроил локальную сеть. Как-бы связь с сервером есть. Как вывести на планшете сцены во весь экран? Пересмотрел кучу видео на youtube, но там только инфа, как настроить саму сцену, а вот работа с планшетом ни где не описана.
windows 7 x64, MajorDomo
Аватара пользователя
Vovix
Сообщения: 1155
Зарегистрирован: Пн янв 27, 2014 1:43 am
Откуда: г.Ижевск
Благодарил (а): 60 раз
Поблагодарили: 531 раз
Контактная информация:

Re: Дизайн сцен 2

Сообщение Vovix » Пт мар 03, 2017 8:37 am

platon70 писал(а):Простите за невежество, но я ни как не пойму как запустить обсуждаемую сцену на планшете.......
В общем-то если вы посмотрели видео на youtube по адаптации темы - https://www.youtube.com/watch?v=ZRWDUY4UZfY&t=1106s , то там все есть,
но тем не менее:
Majordroid вам по сути не нужен (хотя можно и с ним),
на вашем планшете нужен браузер, а чтобы на экране не было ни чего лишнего кроме отображения сцены, браузер нужен в так называемом "режиме киоска" (рекомендую погуглить для своего браузера).
Ну и в браузере запускаете страницу вашей сцены вида: xxx.xxx.xxx.xxx/popup/scenes/YY.html
где xxx.xxx.xxx.xxx - ip в локальной сети вашей
YY.html - YY это ID вашей сцены.
За это сообщение автора Vovix поблагодарили (всего 2):
platon70 (Пт мар 03, 2017 9:33 am) • wozowik (Чт фев 15, 2018 11:17 am)
Рейтинг: 2.33%
Мой -CONNECT-
Windows 7(PHP 7.2) + Raspberry Pi(освещение на 1-Wire) + MP751(управление) + ESP8266(сенсоры) + LAN(сенсоры)
-=: Если вам помогло моё сообщение, нажмите кнопку "Поблагодарить за сообщение автора: Vovix" (кнопка Спасибо) справа! :=-
platon70
Сообщения: 4
Зарегистрирован: Сб сен 10, 2016 3:55 pm
Откуда: Россия, Стерлитамак
Благодарил (а): 1 раз
Поблагодарили: 0

Re: Дизайн сцен 2

Сообщение platon70 » Пт мар 03, 2017 9:32 am

Vovix писал(а): Ну и в браузере запускаете страницу вашей сцены вида: xxx.xxx.xxx.xxx/popup/scenes/YY.html
где xxx.xxx.xxx.xxx - ip в локальной сети вашей
YY.html - YY это ID вашей сцены.
Вот это дело. Теперь все понятно!
windows 7 x64, MajorDomo
Аватара пользователя
adzam
Сообщения: 602
Зарегистрирован: Сб дек 08, 2012 10:28 pm
Откуда: Кишинев
Благодарил (а): 20 раз
Поблагодарили: 138 раз

Re: Дизайн сцен 2

Сообщение adzam » Пт мар 03, 2017 11:59 am

Dark_Veter писал(а):
Aleks130699 писал(а):Мне интересно как сделать изменяющийся фон))Просто я в программировании еще не сильно разобрался))
Я следующим образом сделал:
1. Положил нужные картинки в cms/scenes/backgrounds/
2. Создал сценарий getSceneImage со следующим кодом (картинки в массивах надо будет поменять на нужные).

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

if($params['scene'] == "weather") {
     $winter = array("cms/scenes/backgrounds/winter_1067x640.jpg");
      $spring = array("cms/scenes/backgrounds/spring_1067x640.jpg");
      $summer = array("cms/scenes/backgrounds/summer_1067x640.jpg");
      $autumn = array("cms/scenes/backgrounds/autumn_1067x640.jpg",
                    "cms/scenes/backgrounds/weather_1067x640.jpg");
 
        $seasons = array(0 => $winter,
                     1 => $spring,
                     2 => $summer,
                     3 => $autumn);
 
    $season = $seasons[floor(date('n') / 3) % 4];
 
    $img = $season[rand(0, count($season) - 1)];
    if (file_exists($img)) {
           header("Content-type: image/jpg");
           readfile($img);
    } 
} else {
    $images = array("cms/scenes/backgrounds/weather_1067x640.jpg",
                   "cms/scenes/backgrounds/city_1067x640.jpg",
                   "cms/scenes/backgrounds/plants_1067x640.jpg");
    $img = $images[rand(0, 2)];
        if (file_exists($img)) {
               header("Content-type: image/jpg");
               readfile($img);
        }
}
3. Создал сцену и в строке фоновое изображение указал созданный выше сценарий:

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

/objects/?script=getSceneImage&scene=weather
В принципе код можно еще оптимизировать и уменьшить, но я пока этим не заморачивался.
А как сделать чтоб картирка менялась каждые 5 минут в произвольном порядке из папки с картинками?
Мои проекты здесь...https://connect.smartliving.ru/profile/41/blog213.htm
Если вам помогло какое-либо мое сообщение - не ленитесь пользоваться кнопкой СПАСИБО.
Dark_Veter
Сообщения: 295
Зарегистрирован: Вт апр 23, 2013 5:16 pm
Откуда: Брянск
Благодарил (а): 18 раз
Поблагодарили: 94 раза

Re: Дизайн сцен 2

Сообщение Dark_Veter » Пт мар 03, 2017 12:59 pm

первое что в голову пришло) Создаем сценарий, который найдет все картинки в указанной директории, записывыем путь случайной картинки в свойство, запускаем этот сценарий каждые 5 минут из onNewMinute или модуль cron или таймаутом в этом же сценарии (SetTimeOut("ChangeSceneImage","runScript('ChangeSceneImage');", 300);). Картинку соответственно берем из свойства.
Пример, сценарий с именем ChangeSceneImage:

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

$directory = "./images";    // Папка с изображениями
$allowed_types = array("jpg", "png", "gif");  //разрешенные типы изображений
$file_parts = array();
$ext = "";
$i = 0;
$img_array = array();
//пробуем открыть папку
$dir_handle = @opendir($directory) or die("Ошибка при открытии папки !!!");
while ($file = readdir($dir_handle)) {    //поиск по файлам
    if ($file == "." || $file == "..")
        continue;  //пропустить ссылки на другие папки
    $file_parts = explode(".", $file);          //разделить имя файла и поместить его в массив
    $ext = strtolower(array_pop($file_parts));   //последний элемент - это расширение


    if (in_array($ext, $allowed_types)) {
        $img_array[] = $directory . '/' . $file;
        $i++;
    }
}
closedir($dir_handle);  //закрыть папку

sg('ThisComputer.ImageForScene', $img_array[rand(0, count($img_array))]);
За это сообщение автора Dark_Veter поблагодарили (всего 2):
adzam (Пт мар 03, 2017 8:51 pm) • wozowik (Чт фев 15, 2018 11:25 am)
Рейтинг: 2.33%
Debian GNU/Linux 7.9 (wheezy), версия 0.9.0b, Connect
Аватара пользователя
adzam
Сообщения: 602
Зарегистрирован: Сб дек 08, 2012 10:28 pm
Откуда: Кишинев
Благодарил (а): 20 раз
Поблагодарили: 138 раз

Re: Дизайн сцен 2

Сообщение adzam » Пт мар 03, 2017 9:10 pm

Большое спасибо , все заработало, это как раз что я и хотел.
Но эти меняющиеся картинки я хочу применить как фон на заглавной странице.


Но картинки на этой странице не хотят обновляться сами, только если обновляешь всю страницу вручную.
Может подскажите как заставить обновляться?
Файл default.html прилагаю.
СпойлерПоказать
<!--#
@version 0.2 (auto-set)
#-->
<script src="/templates_alt/jsgraphics/jsgraphics.js"></script>
<script src="/templates_alt/jsgraphics/state1.js"></script>

<style>
.ui-widget-content {
border: 1px solid transparent; /* рамка домашних страниц */
background: transparent; /* фон домашних страниц */
color: #333333;
}
::-webkit-scrollbar { /* убираем скроллы, общий справа*/
height:0px;
width: 0px;
scrolling:no;
}
.ui-tabs .ui-tabs-panel { /* увеличил рамку правого окна*/
padding:0em 0em;

}



</style>

<body scroll="no">

<script type="text/javascript" src="<#ROOTHTML#>js/ui.tabs.paging.js"></script>

<!-- Таблица -->

<table width="100%" border="0" style="background-image: url(%ThisComputer.ImageForScene%);position: fixed; overflow: hidden;">
<tr>
<td valign="top" colspan="4" width="100%">
<!-- шапка #1e5799 4%, #1e5799 14%,#B9D5EB 18%,-->
<div style="text-align: center; height:30; width:100%; overflow:hidden;background-repeat: no-repeat; background-image: url(/templates_alt/icon/lenta1275-31.png);position:relative; left: 0px; top:0px;">
<span style="cursor: default;position:relative; height:0; width:275;overflow:hidden;left:0px; top:6px;font-family: Arial, Helvetica, sans-serif; font-size:16px; text-align:center;color:#F9FC43;text-shadow: 1px 1px 2px black, 0 0 2em green">%Mainsity.metcast|300%</span>
</div>
</td>
</tr>

<tr>
<!-- вторая строка -->
<td width="8%" valign="center" >
<script language="javascript">
function leftPanelToggle() {
$('#leftPanel').toggle();
if ( $("#leftPanel").is(":visible") ) {
$("#leftPanelToggleIcon").attr("src","/templates_alt/icon/icon_left.png");
} else {
$("#leftPanelToggleIcon").attr("src","/templates_alt/icon/icon_right.png");
}
return false;
}
</script>
<a href="/"><img src="/templates_alt/icon/logo120-3a.gif" style=" position:relative; left:8px; top:0px"></a>
<a href="#" onClick="return leftPanelToggle();">
<img id="leftPanelToggleIcon" border="0" src="/templates_alt/icon/icon_left.png" border="0" style=" position: relative;left: 22px; top: -2px;"></a>
</td>
<!-- второй столбик -->
<td width="86%" colspan="2" valign="center" >
<style>

::-webkit-scrollbar { /* убираем скроллы, общий справа*/
height:0px;
width: 0px;
scrolling:no;
}



</style>
<div width="100%" height="100%" border="0" bgcolor="green" style="border-radius: 0.4em 0.4em 0.4em 0.4em;background:transparent">
<iframe src="/popup/scenes/3.html" width="100%" scrolling="no" height="100%" style="border-color: rgba(0, 0, 255, 0);height: 79px;margin: 10px;"></iframe>
</div>
</td>
<!-- третий столбик -->
<td width="18%" valign="center" >
<div style="background-repeat: no-repeat;background-image: url(/templates_alt/icon/bg31.png); position:relative; left: 10px; top:0px; height: 110;">
<div align="left" id="txt" style=' position:relative; left:0px; top:0px;cursor: default;text-align:center; text-shadow: 1px 1px 2px black, 0 0 1em green;font-size:5em;color:#F9FC43'>
</div>
<br>
<div id="txt1" style="font-family: Arial, Helvetica, sans-serif;text-shadow: 1px 1px 2px black, 0 0 2em green;position:relative; left:10px; top: -8px;cursor: default; text-align:center;color:#56d590;font-size:1.3em">
</div>


<div class="clock" style="position:relative; left: 9px; top:0px">
<ul class="cl">
<li class="ck" id="hours"></li>
<li class="ck" id="point">:</li>
<li class="ck" id="min"></li>
</ul>
<div id="Date"></div>
</div>
</div>
<style>
.container {width: 210px; margin: 0 auto; overflow: hidden;}

.clock {width:200px; padding:0px; border:0px solid #333; color:#F9FC43;text-shadow: 2px 2px 2px black }

#Date { font-family: Arial, Helvetica, sans-serif; font-size:15px; text-align:center;color:#56d590;;text-shadow: 2px 2px 2px black}

.cl { width:200px; margin:0 auto; padding:0px; list-style:none; text-align:center; }
.ck { display:inline; font-size:4.5em; text-align:center; font-family:Arial, Helvetica, sans-serif;text-shadow: 2px 2px 2px black }

#point { position:relative; -moz-animation:mymove 1s ease infinite; -webkit-animation:mymove 1s ease infinite; padding-left:10px; top:-5px; padding-right:10px; }

@-webkit-keyframes mymove
{
0% {opacity:1.0; border:0px solid #000;}
59% {opacity:0; text-shadow:none; }
100% {opacity:1.0; border:0px solid #000; }
}

@-moz-keyframes mymove
{
0% {opacity:1.0; border:1px solid #000;}
59% {opacity:0; text-shadow:none; }
100% {opacity:1.0; border:1px solid #000; }
}
</style>
<script type="text/javascript">

$(document).ready(function() {
// Создаем две переенные с названиями месяцев и дней недели в массиве
var monthNames = [ "января", "Февраля", "марта", "апреля", "мая", "июня", "июля", "августа", "Cентября", "октября", "ноября", "декабря" ];
var dayNames= ["Воскресенье","Понедельник","Вторник","Среда","Четверг","Пятница","Суббота"]

// Создаем объект newDate()
var newDate = new Date();
// Извлекаем текущую дату из объекта Date
newDate.setDate(newDate.getDate());
// Навыходе день, дата, месяц и год
$('#Date').html(dayNames[newDate.getDay()] + "&nbsp" + newDate.getDate() + '&nbsp' + monthNames[newDate.getMonth()]);

setInterval( function() {
// Создаем объект newDate() и извлекаем секунды текущего времени
var seconds = new Date().getSeconds();
// Добавляем начальный ноль к значению секунд
$("#sec").html(( seconds < 10 ? "0" : "" ) + seconds);
},1000);

setInterval( function() {
// Создаем объект newDate() и извлекаем минуты текущего времени
var minutes = new Date().getMinutes();
// Добавляем начальный ноль к значению минут
$("#min").html(( minutes < 10 ? "0" : "" ) + minutes);
},1000);

setInterval( function() {
// Создаем объект newDate() и извлекаем часы из текущего времени
var hours = new Date().getHours();
// Добавляем начальный ноль к значению часов
$("#hours").html(( hours < 10 ? "0" : "" ) + hours);
}, 1000);

});
</script>
</div>
</td>
</tr>
<!-- третья строка-->
<tr>
<td width="8%" >
<div width="100%" style="text-align: center; height:30;overflow:hidden; background: url(/templates_alt/icon/lenta120x35.png) no-repeat;position:relative; left: 0px; top:0px;">
</div>
</td>
<td width="8%">
<div style="text-align: center; height:30; width:100%; overflow:hidden;background-size: 100%; background-image: url(/templates_alt/icon/lenta120x35.png);position:relative; left: 0px; top:0px;">
</div>
</td>
<td width="64%">
<div style="text-align: center; height:30; width:100%; overflow:hidden; background-image: url(/templates_alt/icon/lenta820x35.png);position:relative; left: 0px; top:0px;">
</div>
</td>
<td width="16%">
<div style="text-align: center; height:30; width:100%; overflow:hidden; background-image: url(/templates_alt/icon/lenta230x35.png);position:relative; left: 0px; top:0px;">
</div>
</td>
</tr>
<!-- четвертая строка первый столбик -->
<tr>
<td valign="top" colspan="2" width="235" id="leftPanel">
<iframe src="<#ROOTHTML#>menu.html" width="235" height="459" id="navFrame" style="background: transparent" border="0" frameborder=0 framespacing=0></iframe>
</td>
<!-- четвертая строка второй столбик -->
<td valign="top" colspan="2" width="100%">

<Style> <!--# убираем меню с домашних страниц #-->
.ui-tabs .ui-tabs-nav {
display: none;
}
.ui-tabs .ui-tabs-panel {
padding: 0em 0em;
top: 7px;
position: relative;
}
</Style>

<div id="tabs">
<ul>
[#begin LAYOUTS#]
<li>
<a href="#tabs-[#ID#]"[#if ICON!=""#] style="padding:1px 1em 2px 0.5em"[#endif#]>[#if ICON!=""#]<img src="<#ROOTHTML#>cms/layouts/[#ICON#]" align="absmiddle" height="28">&nbsp;&nbsp;[#endif#][#TITLE#]</a></li>
[#end LAYOUTS#]
<li>
<a href="#tabs-last"><span id='tablast_title'>***</span></a></li>
</ul>

[#begin LAYOUTS#]
<div id="tabs-[#ID#]">...</div>
[#end LAYOUTS#]

<div id="tabs-last">
...
</div>

</div>

</td>
</tr>
</table>

<script language="javascript">

var iFrameHeight=590;

$(document).ready(function() {
// Handler for .ready() called.
iFrameHeight=$(document).height()-110;
//alert($(document).height());
$('#navFrame').height(iFrameHeight+57);
[#begin LAYOUTS#]
$('#htmlTab[#NUM#]').height(iFrameHeight);
[#end LAYOUTS#]
//alert($('#defaultFrame').height());
});

[#begin LAYOUTS#]
var layoutTimer[#ID#];
[#end LAYOUTS#]


$("#tabs").tabs({
show: function(event, ui) {
iFrameHeight=$(document).height()-110;
var selected = $( "#tabs" ).tabs( "option", "selected" );
//alert(selected);
[#begin LAYOUTS#]
if (selected == [#NUM#]) {
clearTimeout(layoutTimer[#ID#]);
[#if TYPE="app"#]
if ($('#tabs-[#ID#]').html()=='...') {
$('#tabs-[#ID#]').html('<iframe src="<#ROOTHTML#>popup/[#APP#].html" width=100% height="'+iFrameHeight+'" border="0" frameborder="0"></iframe>');
}
[#endif TYPE#]
[#if TYPE="url"#]
if ($('#tabs-[#ID#]').html()=='...') {
$('#tabs-[#ID#]').html('<iframe src="[#URL#]" width=100% height="'+iFrameHeight+'" border="0" frameborder="0"></iframe>');
}
[#endif TYPE#]
[#if TYPE="html"#]
if ($('#tabs-[#ID#]').html()=='...') {
$('#tabs-[#ID#]').html('<iframe src="<#ROOTHTML#>page/[#ID#].html" width=100% height="'+iFrameHeight+'" border="0" frameborder="0"></iframe>');
}
[#endif TYPE#]
} else {
if ($('#tabs-[#ID#]').html()!='...') {
clearTimeout(layoutTimer[#ID#]);
layoutTimer[#ID#]=setTimeout("$('#tabs-[#ID#]').html('...');", 59*1000);
}
}
[#end LAYOUTS#]
}});
$('#tabs').tabs('paging', {cycle:false, follow:false});




</script>
</body>
Последний раз редактировалось adzam Вс мар 12, 2017 9:08 am, всего редактировалось 3 раза.
Мои проекты здесь...https://connect.smartliving.ru/profile/41/blog213.htm
Если вам помогло какое-либо мое сообщение - не ленитесь пользоваться кнопкой СПАСИБО.
Аватара пользователя
adzam
Сообщения: 602
Зарегистрирован: Сб дек 08, 2012 10:28 pm
Откуда: Кишинев
Благодарил (а): 20 раз
Поблагодарили: 138 раз

Re: Дизайн сцен 2

Сообщение adzam » Сб мар 11, 2017 10:45 pm

Нужна помощь.
У меня есть три html сцены :
info-1
info-2
info-3

Как можно запустить их, чтоб они переключались по кольцу каждые 5 минут.
В настройках ничего не нашел.
Может скриптом каким-либо.
В меню есть Задержка при ротации:, а в сценах ничего не нашел.
Помогите пож.
Мои проекты здесь...https://connect.smartliving.ru/profile/41/blog213.htm
Если вам помогло какое-либо мое сообщение - не ленитесь пользоваться кнопкой СПАСИБО.
Аватара пользователя
adzam
Сообщения: 602
Зарегистрирован: Сб дек 08, 2012 10:28 pm
Откуда: Кишинев
Благодарил (а): 20 раз
Поблагодарили: 138 раз

Re: Дизайн сцен 2

Сообщение adzam » Вс мар 12, 2017 12:55 am

Еще вопрос вот в элементах сцен есть такой пункт как Анимация появления,
Допустим если поставить в анимацию появления значение слева на право, то Сцена красиво заезжает с левой стороны.
А можно ли сделать , чтоб при смене сцен она так-же красиво уехала в право (допустим) уступая место новой сцене.
Иначе говоря как можно сделать анимацию исчезновения сцены.
Мои проекты здесь...https://connect.smartliving.ru/profile/41/blog213.htm
Если вам помогло какое-либо мое сообщение - не ленитесь пользоваться кнопкой СПАСИБО.
banderos
Сообщения: 13
Зарегистрирован: Ср ноя 02, 2016 11:05 am
Откуда: Украина Днепр. обл
Благодарил (а): 17 раз
Поблагодарили: 1 раз

Re: Дизайн сцен 2

Сообщение banderos » Вс апр 16, 2017 4:51 pm

Подскажите пожалуйста как создать историю для ow_fact.temperature? :cry: нашел на фуруме и добавил
Вложения
Безымянный.png
Безымянный.png (190.69 КБ) 10208 просмотров
Безымянный.png
Безымянный.png (257.55 КБ) 10208 просмотров
Ответить