Программа презентации с комментариями без кнопок

Проблема показа картинок или фотографий на экране компьютера давно решена многими способами. Но программы можно изобретать бесконечно в разных стилях и фасонах и разными техниками. Часто хочется иметь универсальную программу, которая работает всюду и всегда. В современном мире самыми универсальными являются программы, написанные для браузеров на языке javascript, потому что они работают в интернете, и значит на всех приборах. Но приборы все же различаются и браузеры на разных приборах тоже работают по разному с целью максимально учесть специфику прибора. Это снова создает проблемы с универсальностью программы. В данной статье я представляю вторую попытку создания программы показа фотографий с комментариями. На этот раз без кнопок для управления показом. Первая попытка была описана в статье с таким же названием и адресом, но в папке (slsh). А для этой статьи и продуктов новой программы создана папка (slsh2). В подписи под статьей я указываю дату написания статьи, которая одновременно является номером версии программы. Описание программы (назовем ее ФШПTК -- Фото-Шоу в виде Презентации с Таблицей и Комментариями) состоит из двух частей. Первая часть описывает как пользоваться готовой программой, вторая часть -- как сделать самому копию программы на показ конкретного альбома фотографий.

Как пользоваться готовой программой.

Современная версия программы сначала показывает титульную картинку, которая появляется только один раз и вернуться к ней уже нельзя, только если перезапустить сайт. Эта картинка дает название презентации, но основное ее назначение -- показать правила работы с программой, так как больше никаких подсказок нет, кроме данной статьи. Раньше я давал ссылку и в том же письме писал про правила. Но если выйти на сайт через поисковик, то это не получится. Прочитав правила пользователь будет знать что делать и проблем не возникнет. Картинки показываются в полном размере окна браузера. Но с учетом аспекта экрана. Если аспектное отношение на экране 16/9, а у картинки 4/3, то она может не заполнять всю ширину окна. Но выбором нужной ширины окна можно добиться того, что она будет показывать всю высоту экрана за вычетом служебных областей. Можно также нажимать клавишу [H] чтобы посмотреть небольшую подсказку как пользоваться программой. Подсказка возникает каждый раз при нажатии этой клавиши. Там написано самое необходимое. Подсказка показывается поверх слайда в верхней его части. Это сделано специально так как для того, чтобы убрать подсказку, нужно кликнуть левый нижний угол слайда. Данная программа является вторым вариантом презентации. Она использует несколько другие инструменты, чем первый вариант, хотя идея презентации та же самая. Главное ее отличие в том, что нет кнопок. Кнопки совмещены с картинкой. В данной версии картинка делится на 4 части по числу углов, которые обозначим как ЛВ, ПВ, ЛН, ПН, Л = левый, П = правый, В = верх, Н = низ. Каждая из частей и является кнопкой. При этом клик на ПВ показывает следующий слайд, клик на ЛВ -- предыдущий слайд, клик на ПН показывает таблицу иконок всех слайдов. Если после этого кликнуть на какой-либо из них, то программа показывает именно этот слайд в полную величину. Наконец ЛН показывает текстовый комментарий к текущему слайду, если его нет на экране, или убирает его, если он есть. Эти же действия можно выполнить нажимая клавиши-стрелки. При этом левая = ЛВ, правая = ПВ, нижняя = ЛН, верхняя = ПН.

Вот и все. Очень просто и минималистки. Правда есть еще одна тонкость. При использовании клавиш появляется рамка, указывающая какой именно угол был кликнут. Она черного цвета и портит слайд. Чтобы убрать рамку надо кликнуть в любом месте окна браузера за пределами слайда. Пока так. Потом что-нибудь придумаю. Речь идет о Яндекс браузере, с которым я работаю. Как в других -- даже не знаю. Возможно показ рамки как-то регулируется, пока я не нашел как. Несмотря на минимум средств навигации и управления, все главное есть. Навигация очень быстрая и удобная, комментарии к каждому слайду тоже есть. Зато научиться пользоваться очень легко и быстро и не надо искать место для кнопок. А кнопки нужны для тех приборов, где нет клавиатуры, то есть планшеты и смартфоны. Здесь, как и в первой версии программы, есть автоматическое масштабирование на ширину окна браузера с учетом аспектного отношения окна экрана. При этом легко выставить слайды на весь экран. И так же точно, при изменении окна браузера надо перезапускать сайт.

Как сделать самому копию программы на конкретный альбом.

Сделать программу на презентацию нового альбома можно самому простым редактированием файлов любой уже существующей программы. Программы для браузеров на языке javascript записываются текстом. При этом можно выделить части с кодом и входными данными. Код можно не смотреть, важно просто поменять входные данные показа. Я сначала опишу как это сделать для запуска презентации на компьютере без интернета. Презентация кодируется двумя файлами и еще она использует один служебный файл, который менять не нужно, но его тоже разумно скачать себе на компьютер. Для удобства я сделал образцовую презентацию из фотографий моря. Первый файл такой презентации называется (sstms.htm). Его адрес и кнопка для запуска даны в ссылке [1]. Нужно кликнуть кнопку. Браузер покажет сайт. Но нам нужен код этого сайта. Получить код можно нажимая клавиши [Ctrl] + [U]. Затем на ноутбуке необходимо выбрать папку и открыть в ней файл с названием имя.htm, где вместо слова имя набрать ваше название, желательно латинскими буквами, так как в мире не все понимают русский язык.

Как это делается? Многие знают, а для тех, кто не знает, объясняю. В системе Виндовс кликаем правую кнопку мыши. Появляется меню. Выбираем (Создать) и затем (Текстовый документ). После этого надо отредактировать имя файла и все готово. Обычно запускается дежурный редактор текстов, например, Notepad. Но могут быть варианты: Notepad2, vkNotepad [2] и так далее. Далее в окне с кодом сайта нажимаем клавиши [Ctrl] + [А] и весь текст выделяется. Затем нажимаем [Ctrl] + [С] и копируем весь текст в бужер. После этого переходим в окно пустого файла, который только что был создан и там нажимаем [Ctrl] + [V]. Текст появляется в этом окне. Остается спасти содержимое файла нажимая клавиши [Ctrl] + [S]. Это стандартная процедура копирования текстов из одного файла в другой, где бы эти файлы не находились.

Второй файл называется (sstms.js). Его адрес и кнопка для запуска даны в ссылке [3]. При клике на кнопке текст появляется сразу. Необходимо повторить ту же процедуру, что была проделана с первым файлом и скопировать текст в новый файл на вашем компьютере. Наконец, третий файл называется (superviewc.js). Его адрес и кнопка для запуска даны в ссылке [4]. С ним надо проделать то же самое, только теперь можно даже имя не менять. Это полностью стандартный файл, который используется без изменений во всех презентациях. Его достаточно скопировать из интернета один раз, а потом можно либо копировать на компьютере, либо поставить в какую-то папку и делать на него ссылку в этой папке.

Итак, у вас на ноутбуке есть полная копия презентации и вы можете запускать ее сразу на компьютере. Но без интернета она работать не будет, так как все картинки находятся в интернете. Однако при наличии интернета она будет нормально работать при запуске на компьютере. Для того, чтобы эта презентация показывала ваши фотографии, нужно кое-что изменить в коде первых двух файлов. Это делают все те же редакторы текстов без форматирования (Notepad, Notepad2, vkNotepad [2] и так далее). В коде первого файла в 1-й строке нужно изменить название сайта, то есть текст, который начинается со слова (Silde . . .), на любой другой, какой вам необходимо. Этот текст показывается браузером в ссылке на окно и в сетях интернета при ссылке на сайт. Далее, в 8-й строке есть ссылка на второй файл. В этой ссылке надо изменить имя файла на то, которое у вас будет.

После имени можно еще поставить вопросительный знак и какой-то текст за ним. Сам вопросительный знак и весь текст за ним не имеет смысла. Но это приходится писать по той причине, что браузеры один раз закачав файл в свой кэш больше его не скачивают, даже если файл изменился без изменения имени. Меняя, например, номер после вопросительного знака можно обмануть браузер в том плане, что у файла новое имя и браузер будет показывать истинное содержание файла, а не спасенное ранее. Немного про имена файлов. Если файл находится в той же папке, то достаточно просто имени. Если папка другая, то надо поставить путь к файлу. Как это делать можно почитать в другом месте. Я скажу кратко. Если папка имеет имя "abc" внутри данной папки, то перед именем надо написать "abc/". Если папка находится рядом с данной папкой на более высоком уровне, то надо писать "../abc/". И так далее. Образец как писать полный адрес в интернете уже есть, об этом далее. А на компьютере полный адрес пишется так "file:///c:/a/b/c/abc/". И все.

В 9-й строке то же самое надо проделать с именем служебного файла. Все зависит от того, куда вы его поставите. Если в ту же папку, то надо оставить только имя. У меня было не совсем так. Была папка рядом с папкой сайта. Перейдем ко второму файлу, у которого расширение (js). В этом файле изменений больше, но они тоже вполне понятные. Так во 2-й строке указаны начальные значения параметров. Некоторые из них нужно поменять. Смысл параметров следующий. Параметры arb и art задают отношение размеров горизонтальной стороны к вертикальной по формуле art/arb. В файле указано, что ширина в 4/3 раза больше высоты. Если у ваших фотографий не так, то числа надо поменять. Параметры n1 и n2 относятся к таблице иконок. При этом n1 -- число иконок в строке, n2 -- число строк. Параметр mh указывает отношение высоты окна с текстом комментария к высоте слайда. Комментарий всегда пишется в верхней части слайда.

Размер текста (tt) комментария задается для полноэкранного режима. Если ширина браузера меньше размера экрана, то этот размер пропорционально масштабируется. Параметр (cs) пришлось ввести для новых планшетов. Дело в том, что для планшетов нет перехода в полноэкранный режим, а любой сайт сразу масштабируется на ширину окна экрана. При этом автоматически высота получается равной высоте экрана и определенной операцией можно вытолкнуть строки закладок и адреса за пределы экрана. Но на современных планшетах нет никаких кнопок на корпусе и часть экрана в виде полосок сверху и снизу используется для кнопок. Соответственно окно браузера уменьшено по высоте. И как раз это и учитывает параметр (cs). Его лучше не менять, но экспериментировать не запрещено.

Пока я сделал так, что программа запрашивает высоту окна браузера, и если высота экрана больше, чем высота браузера, то ставится последняя. Но высота браузера определяется с учетом того, что на экране есть строки закладок и адреса. Их можно убрать с экрана планшета выталкиванием. Поэтому нас интересует высота без этих строк, она больше, но ее не определить автоматически. Как раз поэтому я умножаю высоту окна браузера на коэффициент, который зависит от прибора. Этот коэффициент и есть параметр (cs). На ноутбуках он не играет никакой роли, потому что высота браузера всегда выше или равна высоте экрана с учетом масштабирования. А на планшете он позволяет сделать так, чтобы картинка показывалась на весь экран по высоте, доступной браузеру. Эта высота меньше высоты экрана.

В строках с 4-й по 11-ю записаны имена файлов с картинками. Достаточно записать только переменную часть адреса картинок. Постоянная часть записывается в переменной att внутри кавычек в первой строке файла. В строках с 13 по 47 записаны комментарии к каждой картинке в кавычках и с запятой в конце. Каждый комментарий на отдельной строке. Это не обязательно, просто так удобно находить комментарий к нужной фотографии по номеру. Последний комментарий заканчивается скобкой вместо запятой. Вот и все. То есть меняете картинки и тексты к ним, а остальное программа делает автоматически. Постоянная часть может указывать как на ноутбук, так и на интернет. Исходно там указан мой сайт и моя папка на этом сайте. Может быть также и постоянная часть имен. Если вы запишете все файлы фотографий в ту же папку, что и файлы презентации, то достаточно там оставить только постоянную часть имен. Например, если ваши файлы имеют имена (my001.jpg, my002.jpg, . . .), то может быть (att="my0";) и достаточно указать двухзначный номер файлов. Можно указывать и полный путь к папке с файлами, как описано выше.

Но в этой же папке должны находиться еще два файла, у которых имеются стандартные имена (map.jpg) и (title.jpg). Это в том случае, если переменная att не содержит постоянной части в имени, как указано в примере. А если содержит, то постоянную часть надо указать перед указанными именами. Для указанного выше примера это будет my0map вместо map. Эти файлы имеют такой же размер, как и картинки, но они содержат другую информацию. Файл с именем map содержит таблицу иконок всех картинок. Таблица должна иметь n1 иконок в строке и n2 строк. Счет идет слева направо и сверху вниз. Файл c именем title содержит название презентации и правила работы с программой. Вот теперь все. Если у вас все это будет, то презентация заработает у вас на компьютере. Если хотите показать ее в интернете, то необходимо закачать все в интернет и указать правильный адрес в переменной att. То есть так, как и сделано у меня в образце. Остались вопросы -- как быстро и удобно приготовить картинку с таблицей иконок и титульную картинку. Об этом в следующем разделе.

Как сделать самое сложное.

Таблицу иконок без специальной программы не сделать. То есть нужны специальные программы. Они есть и их много. Я предлагаю то, чем пользуюсь сам. А именно, свою собственную программу vkACL.jar, которая делает очень много самых разных работ на компьютере. Эту программу можно скачать и установить на сайте с адресом по ссылке [5]. На сайте все написано как это делать. Я просто укажу как сделать то, что необходимо для презентации. Итак, переименовать все файлы, помещенные в одну папку, за один клик можно выбрав иконку в таблице готовых программ с именем (File pro), а там кнопку [A]. Приготовить иконки всех фотографий можно по программе с именем (Img pro), там по кнопке [4]. Наконец, собрать все кнопки в таблицу можно в той же программе по кнопке [5]. У этих программ есть описания к каждой операции и все можно сделать очень быстро и просто.

Файлы иконок после создания таблицы можно уничтожить. Они быстро делаются и копить их не имеет смысла. Иконки в таблице можно делать как в рамке, так и без рамки, кому как больше нравится. Титульную картинку тоже можно готовить в моей программе, но это уже более сложно. Проще просто скопировать текст из подсказки в редактор Ворд от Майкрософт, написать заголовок. Потом скопировать экран в файл по кнопке [Prt Sc] и потом вырезать нужное с помощью программы (FastStone Image Viewer). А можно сразу вырезать с экрана с помощью моей программы vkSM.jar. Но если неохота возиться, то можно любые картинки поставить, только дать им правильные названия. Можно мои скачать.

И последнее. Данную технику удобно использовать для приготовления презентаций научных докладов. Но в этом случае часто удобнее использовать формат файлов (png) вместо (jpg). Это тоже легко, просто надо исправить расширение в списке адресов картинок. Если у кого есть вопросы, то пишите мне в почту, адрес указан в подписи.

Ссылки на интернет

[1] sstms.htm -- образец презентации в интернете
[2] vkNotepad -- программа редактирования текстов
[3] sstms.js -- образец служебного файла презентации в интернете
[4] superviewc.js -- образец служебного файла презентации в интернете
[5] vkACL -- интерпретатор языка программирования ACL

Виктор Кон,   29-01-2023,   kohnvict@yandex.ru