Фото-шоу в виде презентации с комментариями и анимацией
Проблема демонстрации любых картинок или фотографий на экране компьютеров давно решена многими способами. Но программы можно изобретать бесконечно и всегда хочется иметь универсальную программу, которая работает всюду и всегда. Самыми универсальными являются программы, написанные для браузеров на языке javascript, потому что они работают в интернете, и значит на всех приборах. Но приборы все же различаются и браузеры на разных приборах тоже работают по разному с целью максимально учесть специфику прибора. Это снова создает проблемы с универсальностью программ. В данной статье я описываю новую версию программы показа фотографий с комментариями и кнопками для управления показом. Возможно программа будет развиваться в будущем и соответственно будет меняться описание. По этой причине в подписи под статьей я указываю дату написания статьи, которая одновременно является номером версии программы. Описание программы (назовем ее ФШПTКA -- Фото-Шоу в виде Презентации с Таблицей, Комментариями и Анимацией ) состоит из двух частей. Первая часть описывает как пользоваться готовой программой, вторая часть -- как сделать самому копию программы на показ конкретного альбома фотографий. При желании можно обе части объединить в одном файле, если кому так удобнее.
Как пользоваться готовой программой.
Прежде всего, сама программа дает небольшую подсказку как ей пользоваться. Эту подсказку можно всегда вызвать по кнопке [H]. Там написано самое необходимое. Программа сначала показывает титульную картинку, которая появляется только один раз в самом начале и не входит в саму презентацию. Нужно кликнуть на картинке, после чего она исчезает на весь сеанс работы с сайтом. Она может снова появиться только при перезапуске сайта. Затем программа показывает первую квадратную таблицу с фиксированным числом иконок фотографий по стороне квадрата. Это число является параметром и задается первоначально в программе, но его можно менять в процессе показа. Если фотографий больше, то нажимая кнопку [T] снова и снова можно посмотреть остальные куски общего каталога. Последний кусок может содержать меньше иконок, если число фотографий не делится нацело на число иконок в таблице. После последней таблицы (возможно неполной) снова показывается начальная таблица и так далее. В самом начале можно кликнуть кнопку [P], которая покажет параметры браузера и презентации. Там первые 5 параметров показывают ширину (sw) и высоту (sh) математического экрана в пикселах как их использует браузер, ширину (brw) и высоту (brh) окна браузера в пикселах и число пикселей дисплея прибора на один пиксель математического экрана (dsr).
Если dsr не равно единице -- то могут быть проблемы с оптимизацией, хотя в последних версиях программы уже почти всегда все хорошо. В браузерах Виндовс можно поменять масштаб и эти числа изменяться. Выбором масштаба параметр dsr можно сделать равным единице. После изменения масштаба сайт надо перезапускать. Если при размере окна браузера во всю ширину экрана sw не равно brw, то программа не гарантирует правильную работу в таком браузере, хотя все возможно. Если проблемы все же есть, то разумно поменять браузер. Со временем я все же сделаю вариант, который будет работать адекватно во всех браузерах. Браузеры в системе Андроид -- это отдельная головная боль. Но даже если браузер работает неправильно, все равно все будет видно, только возможно придется поменять параметры. Если параметры менять не надо, то либо нажимаем клавишу [T], либо два раза [M] и текст с параметрами исчезнет.
Начать просмотр можно кликом на любой выбранной иконке или нажимая клавишу [C]. Переход к следующему кадру -- либо по кнопке [F], либо по клавише клавиатуры с такой же буквой, если она есть, либо по клавише стрелки вправо, либо кликом на фотографии. Последний способ самый удобный. Переход к предыдущему кадру -- либо по кнопке или клавише [B], либо по клавише стрелки влево. Комментарий к каждой фотографии можно посмотреть, нажимая кнопку или клавишу [M]. Он ставится поверх фотографии. Повторное нажатие этой же кнопки убирает комментарий. В любой момент можно поменять параметры показа. Для этого надо перейти в режим таблицы, то есть нажать клавишу [T] если на экране нет таблицы, и нажать кнопку [P], откроется текст с указанием значений параметров, затем можно поменять значения параметров (числа), не меняя всей остальной структуры записи. Менять можно все числа, кроме первых 6-ти. Сразу после этого надо нажать кнопку [E].
Программа показывает параметры по одному в каждой строке, а именно, (1) ( sw) ширину экрана в пикселах (px) ; (2) (sh) высоту экрана в px ; (3) (brw) ширину окна браузера в px ; (4) (brh) высоту окна браузера в px ; (5) (dsr) число пикселей прибора на один пиксель модели экрана ; (6) (n) полное число картинок ; (7) (ar) отношение размеров ширины к высоте картинок ; (8) (nt) число колонок в таблице, при этом полное число иконок в таблице равно квадрату этого числа ; (9) (mh) относительная высота области комментария, то есть отношение к высоте картинки ; (10) (tt) размер текста комментария в px при работе в полноэкранном режиме, масштабируется вместе с размером окна браузера ; (14) (bw) ширина кнопки в px при работе в полноэкранном режиме, масштабируется вместе с размером окна браузера ; (15) (cs) коэффициент масштабирования высоты окна браузера ; (16) (pa) время паузы анимации в десятых долях секунды. Параметры 1-6 менять нельзя, это только для информации. Остальные значения можно менять, но изменения пропадают при перезапуске сайта. В скобках указаны имена параметров, смысл которых будет описан в следующем разделе.
В большинстве случаев будет достаточно просматривать фотографии подряд или вызывать таблицу иконок. Тем не менее, программа дает средства для настройки показа, что может понадобиться на некоторых приборах, на которых браузеры не соблюдают правила и сами меняют размеры. Это касается, например, размеров текста и кнопок. Для быстрого изменения размера текста в комментариях специально введены две кнопки [<] и [>]. Первая при каждом нажатии увеличивает размер текста на 10%, а вторая, наоборот, уменьшает. Наконец, есть еще режим анимации, который начинается при нажатии кнопки или клавиши [S]. В этом случае фотографии меняются автоматически через определенное время, которое задается параметром (pa). Одновременно, для большего эффекта, на сайте возникает проигрыватель музыки и музыка автоматически включается. Повторное нажатие той же кнопки отменяет режим анимации.
Все, что я делаю, оптимизируется для браузеров Гугл Хром или Яндекс. Сам я пользуюсь только этими браузерами и они очень похожи. Соответственно проигрываются музыкальные файлы в формате mp3. Проигрыватель музыки используется тот, который ставит сам браузер. Со временем они могут меняться. В момент написания статьи иконка проигрывателя браузера была довольно большой располагалась под картинкой, то есть в полноэкранном режиме ее на экране не видно, надо двигать окно наверх. Там очень странно регулируется громкость звука. Надо навести курсор мыши на динамик, появляется дополнительная линейка и в ней надо поставить бегунок. Стоит убрать курсор и этой линейки не видно, она уходит под другую линейку, которая показывает время проигрывания файла.
И есть еще кнопка или клавиша [D], которая убирает с экрана все кнопки. Это может быть разумным на приборах с клавиатурой, потому что те же операции можно заказывать нажимая клавиши клавиатуры с теми же символами. Кнопки необходимы для просмотра на смартфоне или планшете, где клавиатуры нет. Если там кнопки убираются, то заново они показываются только при перезапуске сайта. А если клавиатура есть, то вернуть кнопки можно нажимая клавишу [D] на клавиатуре. В данной версии используется простая анимация, то есть кадры меняются мгновенно, без переходов. Важно, что поскольку все фотографии скачиваются заранее, то анимация работает чисто, без сбоев, какие бывают в том случае, когда фотографии скачиваются перед показом.
Как сделать самому копию программы на конкретный альбом.
Можно самому сделать копию программы на презентацию нового альбома простым редактированием двух файлов. Программы для браузеров на языке javascript записываются текстом. При этом можно выделить части с кодом и входными данными. Код можно не смотреть, важно просто поменять входные данные показа. Я сначала опишу как это сделать для запуска презентации на компьютере без интернета. Презентация описывается двумя файлами и еще она использует некоторое число служебных файлов, которые менять не нужно. Для удобства я закачал образец в виде архива файлов на Яндекс диск и все файлы можно скачать по ссылке [1]. По ссылке [2] можно посмотреть образец в интернете. Первый файл презентации в образце имеет имя fshpca.htm, второй -- fshpca. js. Имена файлов нужно поменять на любое другое, какое вам удобно для вашей презентации . Каждая презентация нового альбома должна иметь свое имя. Служебные файлы просто копируются в каждую презентацию. Они находятся в папке [b] и имеют небольшой размер.
Нужно открыть первый файл в любом редакторе текстов без форматирования (Notepad, Notepad2, vkNotepad [3] и так далее). В коде этого файла в 14 строке есть ссылка на второй файл. В этой ссылке надо изменить имя файла на то, которое у вас будет. Важно знать, что после имени файла можно записывать комментарии, которые некоторые сайты используют. Комментарий начинается с вопросительного знака. Сам вопросительный знак и весь текст за ним не имеет отношения к адресу страницы в интернете. Но иногда это полезно писать по той причине, что браузеры один раз закачав файл в свой кэш больше его не скачивают, даже если файл изменился без изменения имени. Меняя номер после вопросительного знака можно обмануть браузер в том плане, что у файла новое имя и браузер будет его скачивать.
Кроме того, в 1-й строке нужно изменить текст "Образец слайд-шоу (Виктор Кон)" на любой другой, какой вам необходимо. Этот текст показывается браузером в ссылке на окно и в сетях интернета при ссылке на сайт. И третье. В 13 строке в кавычках указано интернетное имя mp3 файла музыки. Это имя можно заменить на имя вашего файла. Если файл будет в той же папке, то достаточно просто имени. Если папка другая, то надо поставить путь к файлу. Как это делать можно почитать в другом месте. Я скажу кратко. Если папка имеет имя "abc" внутри данной папки, то перед именем надо написать "abc/". Если папка находится рядом с данной папкой на более высоком уровне, то надо писать "../abc/". И так далее. Образец как писать полный адрес в интернете уже есть. А на компьютере полный адрес пишется так "file:///c:/a/b/c/abc/". И все. Если у вас нет музыки и вы не хотите ее искать, то оставляете все как есть. Проигрыватель позволяет выключить музыку, если она вам мешает.
Перейдем ко второму файлу с расширением js. Это и есть файл входных данных. В этом файле изменений больше, но они тоже вполне понятные. Так во второй строке указаны начальные значения параметров. Их можно оставить как есть, а можно поменять, если вам захочется. Смысл параметров описан в предыдущем разделе. Эти начальные значения можно потом поменять в процессе показа, но лучше сразу задать правильно, чтобы потом было легче. Параметры arb и art задают отношение сторон по формуле art/arb.
Стоит помнить, что размеры кнопок (bw) и текста (tt) комментария задаются для полноэкранного режима. Если ширина браузера меньше размера экрана, то эти размеры пропорционально масштабируются. Параметр (cs) имеет смысл только для новых планшетов. Дело в том, что для планшетов нет перехода в полноэкранный режим, а любой сайт сразу масштабируется на ширину окна экрана. При этом автоматически высота получается равной высоте экрана и определенной операцией можно вытолкнуть строки закладок и адреса за пределы экрана. Но на современных планшетах нет никаких кнопок на корпусе и часть экрана в виде полосок сверху и снизу используется для кнопок. Соответственно окно браузера уменьшено по высоте. И как раз это и учитывает параметр (cs).
Пока я сделал так, что программа запрашивает высоту окна браузера, и если высота экрана больше, чем высота браузера, то ставится последняя. Но высота браузера определяется с учетом того, что на экране есть строки закладок и адреса. Их можно убрать с экрана планшета выталкиванием. Поэтому нас интересует высота без этих строк, она больше, но ее не определить автоматически. Как раз поэтому я умножаю высоту окна браузера на коэффициент, который зависит от прибора. Этот коэффициент и есть параметр (cs). На ноутбуках он не играет никакой роли, потому что высота браузера всегда выше или равна высоте экрана с учетом масштабирования. А на планшете он позволяет сделать так, чтобы картинка показывалась на весь экран по высоте, доступной браузеру. Эта высота меньше высоты экрана.
В строках с 4-й по 11-ю указаны имена файлов картинок в двойных кавычках, какие используются в презентации. Их 36 штук. Вы можете поменять имена, а также их число на любое другое. В 12-й строке в одинарных кавычках записаны комментарии к каждой фотографии в виде одного пробела. Вы можете их поменять на какие хотите, первый комментарий должен быть к первой картинке и так далее. Комментарии могут быть сколь угодно большие. Как раз поэтому удобно выделять этот файл как отдельный. Наконец, в 13 строке написан код, который в каждый комментарий добавляет номер картинки и имя файла картинки. А в самом конце строки к имени файлов добавляется переменная att, которая определена в первой строке как "http://kohnvict.narod.ru/a/6/". Это адрес папки в интернете, где находятся картинки. Но вы можете поместить их в ту же папку, где записали htm и js файлы. Тогда этот текст надо заменить на пустой типа "". А если вы поместите фотографии в другую папку на компьютере, то можно либо указать полный путь к папке типа "file:///C:/папка/папка/", либо относительный путь относительно папки, где записали htm и js файлы. В 3-й строке указан путь к файлу img01.png, ее менять не надо.
И последнее. Титульная картинка должна быть записана в файл с названием tit.jpg, и этот файл должен находиться в той же папке, что и файлы остальных картинок. Важно, что к этому имени тоже добавляется переменная att. Если она содержит общую часть всех имен картинок, то эту общую часть надо прибавить к имени tit.jpg слева. Например, если файлы картинок имеют имена ss001.jpg, ss002.jpg и так далее, то в переменную att в конце можно приписать ss0, а в именах файлов указывать только 01.jpg, 02.jpg и так далее, если их меньше 100. Но тогда файл титульной картинки должен иметь имя ss0tit.jpg, иначе программа будет работать неправильно. Титульную картинку каждый делает сам по своему усмотрению. Можно указать название альбома, автора, портрет автора, и так далее. Но важно, что если презентация ставится в интернет, то нужно указать на кнопку [H], где записаны правила работы с программой.
Вот и все. А если вы хотите показать картинки из интернета и все они находятся в одной папке, то просто меняете интернетный адрес папки и все. А если они в разных папках, то вместо имен файлов картинок указываете полный путь, а папку обнуляете. В любом случае все редактирование сводится только к указанию имен файлов или полных путей к файлам картинок и числовым значениям параметров. Сам javascript код вам знать не обязательно и менять его не нужно. Ну а кто умеет это делать, тому и карты в руки.
Если у кого есть вопросы, то пишите мне в почту, адрес указан в подписи.
Ссылки на интернет
[1] 
sstma.zip -- архив всех файлов образца презентации
[2] fshpca -- образец презентации, демонстрация в интернете
[3] vkNotepad -- программа редактирования текстов
Виктор Кон, 04-02-2023 ( 2-я версия, для 1-й версии дата 06-12-2019), kohnvict@yandex.ru