Каскадный режим | Линейный режим

emmetoya · 29.09.2014 16:06:46

Всем привет, подскажите пожалуйста как реализовать следующую задачу: программа генерит набор jpeg (скриншоты областей экрана) и складывает в папку. С определенной периодичностью файлы в папке обновляются. Мне необходимо сделать вывод изображений в табличном виде на страничку и обновлять каждое из них при изменении исходного файла.

Моих знаний (15-летней давности Big Grin

) и поисков хватило на следующую конструкцию разбить на фреймы и поместить в каждый страничку с картинкой:

Код:

<html>

<head>

<title>Main</title>

</head>

<FRAMESET cols = "25%, 25%, 25%, 25%">

<FRAMESET rows = "33%, 33%, 34%">

<FRAME src = "page01.html" scrolling = no >

<FRAME src = "page05.html" scrolling = no >

<FRAME src = "page09.html" scrolling = no >

</FRAMESET>

<FRAMESET rows = "33%, 33%, 34%">

<FRAME src = "page02.html" scrolling = no >

<FRAME src = "page06.html" scrolling = no >

<FRAME src = "page10.html" scrolling = no >

</FRAMESET>

<FRAMESET rows = "33%, 33%, 34%">

<FRAME src = "page03.html" scrolling = no >

<FRAME src = "page07.html" scrolling = no >

<FRAME src = "page11.html" scrolling = no >

</FRAMESET>

<FRAMESET rows = "33%, 33%, 33%">

<FRAME src = "page04.html" scrolling = no >

<FRAME src = "page08.html" scrolling = no >

<FRAME src = "page12.html" scrolling = no >

</FRAMESET>

</FRAMESET>

</FRAMESET>

</html>

И каждая страница в фрейме следующая

Код:

<html>

<head>

<body style="color:White; background-color:Gray">

<div id="img_reload">

<img src="img.jpg" />

</div>

<script>

setInterval(function()

    {

    var img_tag = '<img src="images/image01.jpg?img' +Math.random(0,100)+ '" width="100%" height="100%" />';

    document.getElementById('img_reload').innerHTML = img_tag

    }, 30000);

</script>

</body>

</html>

Минусы - при обновлении страница мигает и перегружается полностью, а нужно чтобы картинка просто менялась в окне. Так же желательно сделать чтобы обновлялись не все разом, а сразу при изменении каждого из файлов по очереди. Работать будет в локальной сети, возможно установить на виртуалку любой веб-сервер. Сейчас работает на простеньком Small HTTP server.

Буду благодарен за любую помощь, т.к. мои знания лежат в другой плоскости Smile

***Admin*** · 29.09.2014 16:18:31

Хотелось бы уточнить пару моментов:
1) Изображения в папке при обновлении имеют те же имена файлов, что и до обновления?
2) Изображения меняются все одновременно или поочередно?
3) Количество изображений (файлов) равно количеству изображений на экране?

emmetoya · 29.09.2014 19:08:50

(29.09.2014 16:18:31)Admin писал(а): Хотелось бы уточнить пару моментов:
1) Изображения в папке при обновлении имеют те же имена файлов, что и до обновления?
2) Изображения меняются все одновременно или поочередно?
3) Количество изображений (файлов) равно количеству изображений на экране?

1. Имена файлов статичны - image01, image02.. image10, файлы генерятся автоматически при помощи другой программы.
2. Алгоритм такой - переключаем программу 01, делаем скриншот, кидаем его в папку /M1/image01.jpeg переключаем на следующую программу, скриншот /M1/image02.jpeg и т.д. Потом циклически возвращаемся к программе 01, перезаписываем файлы. Интервалы между переключениями примерно одинаковы и, в зависимости от алгоритма, занимают от 4 до 8 секунд.
3. На экране отображаются все картинки сразу (скриншот внизу).

[Изображение: tid_300.jpg]

***Admin*** · 29.09.2014 20:51:19

Ок. Позже попробую что-нибудь изобразить.

emmetoya · 29.09.2014 22:19:26

(29.09.2014 20:51:19)Admin писал(а): Ок. Позже попробую что-нибудь изобразить.

Буду очень благодарен))

***Admin*** · 30.09.2014 09:48:38

Итак, вроде что-то получилось.

Без PHP и jQuery конечно не обошлось. Скрипт состоит из двух файлов: первый файл отвечает за показ изображений и отправку запросов на проверку обновлений изображений на jQuery, а второй файл - проводит проверку даты последнего изменения файла на PHP и возвращает новое изображение.

Первый файл:

Код:

<style type="text/css">

    .img_reload { height:100%; }

    .img_reload>div { float:left; width:24%; height:33%; text-align:center; margin:2px; border:1px solid #000000; }

    .img_reload>div>img { max-width:100%; max-height:100%; }

</style>

<div class="img_reload">

 <div id="img_1"><img src=""></div>

 <div id="img_2"><img src=""></div>

 <div id="img_3"><img src=""></div>

 <div id="img_4"><img src=""></div>

 <div id="img_5"><img src=""></div>

 <div id="img_6"><img src=""></div>

 <div id="img_7"><img src=""></div>

 <div id="img_8"><img src=""></div>

 <div id="img_9"><img src=""></div>

 <div id="img_10"><img src=""></div>

 <div></div>

 <div></div>

</div>

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<script type="text/javascript">

var i=0;

var date_img=[0,0,0,0,0,0,0,0,0,0];

function refresh_img(data){

    $('#img_'+i).fadeOut(400, function(){ $(this).html(data).fadeIn(400); });

}

function refresh(data){

    if (data!=date_img[i-1]) {

        date_img[i-1]=data;

        jQuery.post('1.php',{ image:i }, refresh_img);

    }

}

function play() {

    i+=1;

    if (i>10) i=1;

    jQuery.post('1.php',{ image:i,update:0 }, refresh);

}

go=setInterval("play()",500);

</script>

Второй файл называется 1.php, если будете переименовывать, то в первом также не забудьте изменить на него ссылки:

PHP код:

<?php
if ($_POST["image"]>0 and $_POST["image"]<11) {
    $i=$_POST["image"];
    if ($i<10) $name='M1/image0'.$i.'.jpeg';
    else $name='M1/image'.$i.'.jpeg';
    if (isset($_POST["update"])) echo filemtime($name);
    else echo '<img src="'.$name.'?x='.rand(1,100000).'">';
}
?>

Постарался подстроится под указанные Вами имена файлов.

emmetoya · 30.09.2014 10:36:41

Спасибо большое, сегодня попробую!
Можете сказать на каком веб-сервере тестировали? Или какой мне нужно развернуть - Apache, или может быть вообще на MS IIS?

***Admin*** · 30.09.2014 11:22:19

На локалке на стареньком Apache. Blush

Но библиотеку jQuery подгружал с сервера Гугла: <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">, так что без интернета работать не будет (либо надо jQuery библиотеку себе на комп скинуть).

emmetoya · 30.09.2014 20:25:58

Поднял по-быстрому Apache+PHP, запилил странички, работает именно так как было нужно. Спасибо большое, очень помогли!

emmetoya · 12.12.2014 08:39:32

Запустил я на "боевую" свой проект, выяснился следующий косяк - работаем через Хром, страничка с обновляющимися картинками висит в режиме 24/7.
Проблема в том, что по прошествии некоторого времени (порядка 20 часов), картинки перестают меняться. Помогает только перезагрузка компьютера. В других браузерах происходит тоже самое, т.е. как зависли картинки, на ту же страничку захожу другим браузером и ничего не меняется.
Идей собственно нет, т.к. в теме веба я не силен. Помогите, пожалуйста!

Каскадный режим \| Линейный режим Обновление картинки на сайте при изменении исходного файла
Автор	Сообщение