Страница 43 из 121

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

Добавлено: Чт мар 02, 2017 7:52 pm
Vovix
темка убежала...
а полезная ведь!

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

Добавлено: Пт мар 03, 2017 7:14 am
platon70
Простите за невежество, но я ни как не пойму как запустить обсуждаемую сцену на планшете. Majordomo установлен на ноутбуке. Сцену я настроил. Пока не полностью, а только главную страницу и погоду. Еще добавил страницу с GPS, но пока не разобрался с выводом карты (я так понял, что карту должен подгружать планшет за счет встроенного GPS). Поправьте, если что не так. На планшете установил Majordroid. Настроил локальную сеть. Как-бы связь с сервером есть. Как вывести на планшете сцены во весь экран? Пересмотрел кучу видео на youtube, но там только инфа, как настроить саму сцену, а вот работа с планшетом ни где не описана.

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

Добавлено: Пт мар 03, 2017 8:37 am
Vovix
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 вашей сцены.

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

Добавлено: Пт мар 03, 2017 9:32 am
platon70
Vovix писал(а): Ну и в браузере запускаете страницу вашей сцены вида: xxx.xxx.xxx.xxx/popup/scenes/YY.html
где xxx.xxx.xxx.xxx - ip в локальной сети вашей
YY.html - YY это ID вашей сцены.
Вот это дело. Теперь все понятно!

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

Добавлено: Пт мар 03, 2017 11:59 am
adzam
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 минут в произвольном порядке из папки с картинками?

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

Добавлено: Пт мар 03, 2017 12:59 pm
Dark_Veter
первое что в голову пришло) Создаем сценарий, который найдет все картинки в указанной директории, записывыем путь случайной картинки в свойство, запускаем этот сценарий каждые 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))]);

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

Добавлено: Пт мар 03, 2017 9:10 pm
adzam
Большое спасибо , все заработало, это как раз что я и хотел.
Но эти меняющиеся картинки я хочу применить как фон на заглавной странице.


Но картинки на этой странице не хотят обновляться сами, только если обновляешь всю страницу вручную.
Может подскажите как заставить обновляться?
Файл default.html прилагаю.
SPOILERSPOILER_SHOW
<!--#
@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>

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

Добавлено: Сб мар 11, 2017 10:45 pm
adzam
Нужна помощь.
У меня есть три html сцены :
info-1
info-2
info-3

Как можно запустить их, чтоб они переключались по кольцу каждые 5 минут.
В настройках ничего не нашел.
Может скриптом каким-либо.
В меню есть Задержка при ротации:, а в сценах ничего не нашел.
Помогите пож.

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

Добавлено: Вс мар 12, 2017 12:55 am
adzam
Еще вопрос вот в элементах сцен есть такой пункт как Анимация появления,
Допустим если поставить в анимацию появления значение слева на право, то Сцена красиво заезжает с левой стороны.
А можно ли сделать , чтоб при смене сцен она так-же красиво уехала в право (допустим) уступая место новой сцене.
Иначе говоря как можно сделать анимацию исчезновения сцены.

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

Добавлено: Вс апр 16, 2017 4:51 pm
banderos
Подскажите пожалуйста как создать историю для ow_fact.temperature? :cry: нашел на фуруме и добавил