Слайд-шоу в виде презентации с комментариями
Во все времена существовала проблема представления картинок во время выступления с докладом перед аудиторией. Как только появились персональные компьютеры с графическим экраном эту проблему стали решать с помощью компьютеров. Первоначально использовались проекторы, которые отображали экран компьютера на стену или на специальный экран в виде потока света. При этом приходилось закрывать окна и тушить свет. Сейчас все чаще используются мониторы очень больших размеров, которые сами светят достаточно ярко, а также в большом зале устанавливают мониторы поменьше в разных частях зала. Сейчас 2018 год и только что прошел чемпионат мира по футболу в России. Огромные мониторы были на стадионах, которые показывали то же самое, что и по телевизору.
В настоящее время каждая программа показа видео способна убирать свою рамку и показывать картинку на весь экран монитора, как это делает телевизор. А в докладах используется такая же форма показа слайдов. Картинки показываются на весь экран, а необходимую информацию докладчик сообщает словами. Для приготовления слайдов и их показа стандартом считается программа Power Point из пакета программ Microsoft Office. Но в системе Linux она не работает, и там используют программы показа PDF файлов, первой из которых была программа Adobe Reader.
Набор слайдов, которые показываются на весь экран компьютера во время доклада, называют презентацией. Презентация является одним из видов слайд-шоу, то есть удобного показа картинок. Слайд-шоу получили большое распространение на сайтах интернета и программируются на разных языках, в том числе на языке javascript. Есть разные варианты программ слайд-шоу. Их пишут как профессионалы для продажи за деньги, так и любители. Я сам как раз любитель, и мне было интересно сделать что-то свое в этой области. Я написал разные варианты таких программ. Одна из них имеет возможность масштабировать картинки, в том числе на весь экран, показывает 24 разных фасонных перехода от кадра к кадру и сопровождается музыкой.
Так хорошо показывать фотографии, поэтому я такие программы называю фото-шоу. Каталог всех сделанных мной фото-шоу можно посмотреть тут [01], а самое последнее произведение такого типа тут [02]. Другой тип фото-шоу под музыку сделан в виде книги, которая сама переворачивает страницы. Такие картинки не масштабируются. Последнее мое произведение такого типа тут [03]. Такие фото-шоу делаются проще, чем видео, имеют меньший размер файла на диске, но по эмоциональному воздействию приближаются к видео. И картинки в них более высокого качества.
Программу презентации я сделал относительно давно, и даже сделал онлайн программу, которая делает такие программы для любого желающего. Вот ссылка на программу [04]. Там представлен вполне рабочий вариант. Но вдруг я понял, что такое слайд-шоу презентации можно значительно усилить, если добавить к каждой фотографии текст комментария, который будет сообщать всю необходимую информацию о слайде так, как это делает докладчик. Тогда программа может выполнять две цели, то есть работать как презентация, и использоваться как полноценный доклад, дающий всю необходимую информацию.
Кроме того, даже сам механизм показа слайдов требовал оптимизации. И я сделал новую программу. Как раз об этой программе и идет речь в этой статье. На этот раз я решил не делать онлайн программу для приготовления презентаций, а вместо этого приготовил образец программы таким образом, чтобы новую презентацию можно было получить с помощью небольшого редактирования копии образца. Образец можно посмотреть тут [05].
Сначала я расскажу как эта программа работает. Ее входными данными являются два массива. Первый массив сообщает адреса картинок в интернете или на компьютере, второй массив содержит тексты комментария к каждой картинке. Если есть возможность, то лучше задавать относительные адреса, тогда все будет работать одинаково в интернете и без интернета. Реальные размеры картинок не имеют значения и не используются. Но ясно, что чем они больше, тем качество лучше, но зато и размеры файлов увеличиваются.
При запуске программа считывает все картинки сразу и показывает их в виде таблицы иконок меньшего размера. Таблица всегда квадратная и она может показывать не все картинки сразу, а только часть. Она с самого начала имеет размер на весь экран компьютера при масштабе 100%, поэтому надо выставлять полноэкранный режим либо нажимая клавишу [F11], либо кнопку в настройках браузера. В самом начале программа выдает подсказку об этом и о том, что надо задать масштаб 100%. В браузере Хром (или Яндекс) на некоторых ноутбуках, к сожалению, не все так просто. Картинка рассчитана на реальный размер экрана. А эти браузеры делают картинку на стандартный размер 1280*720 в ноутбуках с соотношением сторон 16/9.
Поэтому при запуске программы в масштабе 80% (если ширина экрана 1600) она будет меньше размеров экрана и надо выставлять масштаб 100%. А при запуске в масштабе 100% она будет больше размеров экрана и надо выставлять масштаб 80%. Оба способа дают один и тот же результат, но второй способ как бы предпочтительнее. На таких ноутбуках программу лучше запускать в браузере Инернет Эксплорер при масштабе 100%. Тогда никаких проблем не будет. Впрочем программа будет нормально работать и в других масштабах, только с картинками размером либо больше, либо меньше экрана. В большинстве случаев все хорошо с самого начала.
Далее режим презентации работает следующим образом. Выбираем первую картинку и кликаем ее. Она получается на максимальный размер. При этом исходные параметры заданы таким образом, что комментарий к первой картинке сразу появляется. Если кликнуть на картинке, то она сменяется второй картинкой со своим комментарием и так далее. Для более свободной работы с картинками и комментариями программа выставляет 8 кнопок. Они имеют названия по буквам F, B, T, C, P, E, M, H. Клик на кнопках выполняет определенную работу. Тот же самый эффект получается при нажатии клавиш клавиатуры с теми же буквами.
Описание начнем с конца. Кнопка H выставляет текст подсказки. Это Help, быстрая помощь, если забыли как пользоваться кнопками и программой. Кнопка F (forward) копирует клик на картинке, то есть показывает следующий кадр. При выходе за пределы числа картинок, все начинается с начала. Кнопка B (back) показывает предыдущий кадр. Кнопка T (table) показывает таблицу иконок. Таблица имеет фиксированное число иконок, которое задается как число колонок в квадрате. Например, если число картинок 40, а число колонок 4, то таблица будет иметь 16 кадров. Тогда до тех пор, пока текущей является картинка с номером от 1 до 16 будет показываться таблица иконок именно этих номеров. При переходе к 17 картинке таблица будет показывать номера с 17 по 32 и так далее. Последняя таблица может быть не полной. Кнопка C (current) показывает текущий кадр, в самом начале она показывает первый кадр, с нее можно начинать показ или продолжать после выхода из таблицы иконок.
Итак, первые 4 кнопки выполняют навигацию. Следующие 4 кнопки меняют режимы работы программы. Кнопка P (parameters) в окне комментария выставляет значения параметров с подсказкой их смысла. Первый параметр -- это аспектное отношение (АО) картинок. Хотя реальные размеры картинок не имеют значения, но АО при масштабировании используется. К сожалению, программа не может определить АО. Она может определить аспектное отношение экрана монитора, но картинки не всегда ему соответствуют. И при неполном соответствии картинки не масштабируются на весь экран. Они заполняют либо всю высоту, либо всю ширину экрана и выставляются слева и сверху.
Исходное значение АО в программе задается в файле входных данных двумя значениями параметров art (числитель, top) и arb (знаменатель,bottom) самим создателем слайд шоу в виде дроби. Он знает заранее какое аспектное отношение у его картинок. И оно должно быть одинаковым для всех картинок, иначе они будут искажены. Но это значение можно изменить и потом перезапустить программу по кнопке E, если задан ключ перезапуска равным 1. Исходно он равен 0. Второй параметр -- это номер картинки, который желательно показать следующей. Это имеет смысл, так как таблица не показывает иконки всех картинок, и быстрый переход можно сделать по номеру. Третий параметр -- это размер текста. Размер текста задан заранее оптимальным образом, но если кому он не нравится, то можно изменить его, то есть сделать меньше или больше, задавая число меньшее или большее 1. Четвертый параметр -- это размер текстового окна. Он снова задан оптимально, но его можно увеличить или уменьшить таким же образом.
Пятый параметр -- это число колонок в таблице. Оно задается во входных данных, но его можно изменять в процессе работы. При этом таблица переделывается, начиная с первого кадра. Шестой параметр -- это ключ автоматического показа комментариев. Исходно он задан 1 (то есть показывать), но если его поменять на 0, то комментарии появляться не будут. Седьмой параметр -- это ключ перезапуска программы, например, если поменялось аспектное отношение. Кстати аспектное отношение надо задавать числитель и знаменатель отдельно, не меняя знака деления. При изменении числа колонок перезапуск программы происходит автоматически. Последний, восьмой параметр показывает общее число картинок. Его менять нельзя, точнее он не меняется и показывается только для информации.
После того как поменяли (или нет) параметры, нужно кликнуть кнопку E (execute). Ее назначение такое. Она всегда убирает текстовое окно (окно комментария) с экрана, а если редактировались параметры, то она их перезаписывает. И если задан ключ перезапуска программы, она ее перезапускает. Следующая кнопка M (message) как раз показывает окно комментрация, если не задан режим автоматического показа, или окно убрано кнопкой E. Она всегда показывает окно комментария так же точно, как E всегда окно закрывает, но только если показывается картинка. При показе таблицы иконок комментария нет и она не работает. Кнопка H описана выше.
Таким образом, кнопки позволяют легко управлять как показом картинок, так и комментариев. Отмечу еще приоритет показа. Окно комментария показывается над окном картинки. По этой причине окно поставлено в правую часть экрана, а картинки -- в левую, чтобы понизить область их пересечения. А кнопки показываются над всеми окнами. В самом начале работы программы они всегда показываются и их нельзя убрать в приборах, где нет клавиатуры. По этой причине они поставлены справа и над окном комментария. Если аспектное отношение картинок такое, что они заполняют весь экран, то кнопки всегда будут закрывать часть картинки. Сейчас современные программы позволяют показывать кнопки только при определенном положении курсора мыши. Но я пока так не сделал. Зато я сделал так, что если клавиатура есть, то нажимая клавишу D кнопки можно убрать. Повторное нажатие клавиши D возвращает их на место.
Быстрый переход к таблице с нужными номерами картинок можно сделать либо задавая картинку с нужным номером по кнопке P, либо выставляя последний кадр таблицы, кликая его перейти в следующую область и снова вызвать таблицу. Такую операцию можно повторять несколько раз как вперед, так и назад (используя кнопку B). Задавать число кадров в таблице слишком большим не всегда имеет смысл, так как в этом случае иконки будут иметь очень маленький размер. Но есть еще более быстрый способ, а именно, повторное нажатие кнопки T автоматически показывает следующую порцию иконок. Если число картинок превышено, то иконки показываются с самого начала. То есть нажимая только кнопку T можно быстро просмотреть все картинки.
Теперь я расскажу как самим сделать такую программу по образцу уже сделанной программы [05]. Программа состоит из трех файлов. Код главного файла браузер показывает при нажатии клавиш [Ctrl]+[U]. У себя на компьютере нужно открыть текстовый редактор, лучше всего Notepad2, но еще лучше -- мой редактор vkNotepad [06].Он также встроен в более общую универсальную программу vkUtility [07]. Достаточно ее скачать и тогда много чего можно будет делать. В моем редакторе можно открыть любой файл, выбрать в меню [File]->[Save As] и спасти файл с новым именем. Затем очистить его содержимое ([Ctrl]+[A] и затем [Ctrl]+[X]). Затем надо скопировать текст окна браузера, показывающего код главного файла (в браузере [Ctrl]+[A] и затем [Ctrl]+[C], а в редакторе [Ctrl]+[V]).
Итак стоит спасти файл и вы имеете главный файл программы. Но перед тем как спасти текст файла, его надо отредактировать. Во первых, имя файла должно быть вашим и уникальным. Во-вторых, нужно переписать текст внутри скобок
Следующий этап. В коде сайта в браузере файл sun-and-sea.js дан ссылкой. Кликаем ссылку и видим код (текст) этого файла. Его снова надо спасти в ваш уникальный файл, который будет клоном этого файла. И поменять в нем все адреса картинок и тексты комментариев. Адреса картинок в двойных кавычках, а тексты в одинарных. В текстах могут быть двойные кавычки, а конец параграфа надо записывать как \n. Кроме того, можно поменять исходное аспектное отношение в первой строке задавая другие числа, чем в файле образце. А также размер текстов (параметр bws), ширину текстового окна (параметр mws), число колонок таблицы (параметр nt) и ключ показа комментариев (параметр sm). И все. Программа будет показывать ваши картинки и ваши комментарии. Все остальное будет работать точно так же, как в примере.
Если у вас нет сайта, то картинки можно показывать на компьютере. Для этого проще всего все файлы картинок и два файла программы разместить в одной папке и вместо адресов указать просто имена файлов. Если же у вас и интернета нет, то тогда надо и третий файл скопировать себе на компьютер таким же способом, как указано выше. И разместить его в той же папке. Название ему можно не менять. А в главном файле указать только название вместо ссылки.
Вот и все. Как видим, никакого знания интернет технологий такие действия не требуют. Не беда, что вы не понимаете, что написано в других частях кода. Интернет -- это полностью открытая система и все, что в нем находится доступно каждому. Сделать информацию недоступной невозможно, максимум, что можно сделать -- это сделать ее трудной для понимания. Так работают почти все автоматические генераторы кода. Они создают код огромных размеров, в котором сложно понять что нужно, а что нет. Но я как раз сделал так, что части, которые нужно редактировать, выделены и вполне понятны.
Если у кого есть вопросы, то пишите мне в почту, адрес указан в подписи.
Ссылки на интернет
[01] 
Каталог фото-шоу под музыку
[02] Фото-шоу Нью-Йорк под музыку Оскара Бентона
[03] Фото-шоу Берлин в виде книги
[04] Программ-генератор слайд-шоу
[05] sun-and-sea -- образец программы презентации с комментариями
[06] vkNotepad -- программа редактирования текстов
[07] vkUtility -- универсальная программа, которая делает все.
Виктор Кон, 24-07-2018, kohnvict@yandex.ru