Как сделать бегущий экран

Зачем нужна бегущая строка на сайте и как создать ее самостоятельно?

А все бегут, бегут! И строка бежит. Стоп! Какая строка бежит? Конечно же, бегущая и, конечно же, перед глазами пользователей на чужом сайте. И себе хотите такую? Не беда, сейчас научимся, как сделать бегущую строку самостоятельно.

Кто и куда бежит?

Под бегущей строкой подразумевается текст определенной длины, совершающий поступательное или равномерное движение в любую из сторон на определенной области страницы. Также возможны вариации на тему ритмичности движения текста в бегущей строке.

Бегущая строка для сайта была популярна еще несколько лет назад. Тогда ее использовали в качестве новостной ленты или для отображения рекламных текстов. Главной проблемой такой строки было ее постоянство, которое вскоре надоедало.

Речь о том, что для замены бегущего текста нужно было часто залазить в html код сайта и менять его на новый. Понятно, что сильно часто этого не делали.

Сейчас большая часть анимации в интернете создана с помощью технологии flash , и ползающий текст в веб-дизайне считается чуть ли не « винтажностью ». Но все равно бегающие перед глазами слова не утратили своей первозданной красоты.

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

Бегущая строка, написанная на html

Бегущая строка на сайте html – это самый легкий вариант ее реализации с широким диапазоном для творчества.

За движение текста в html отвечает тег . Его синтаксис:

У этого тега много значений и атрибутов:

1) direction – устанавливает направление движения текста. Возможные значения атрибута:

• left- в правую сторону;
• right – влево;
• up – вверх;
• down – вниз;

2) behavior – отвечает за тип скроллинга. Принимаемые значения:

• scroll – движение текста в одном направлении;
• slide – одноразовое движение с последующей остановкой ( всплывающий текст );
• alternate – в заданном направлении и назад.

3) loop – определяет количество циклов повторений. Возможные значения:

• infinite – бесконечное количество циклов ( значение задано по умолчанию ).
• Целое число.

4) scrollamount – задает скорость перемещения бегущей строки. Принимает целое значение.

5) width – задается длина области перемещения.

6) height – задается высота области перемещения.

7) scrolldelay – устанавливает время задержки между циклами в миллисекундах.

Остальные атрибуты тега являются общестилевыми для всех элементов языка гипертекста.

Тег был создан специально под браузер Internet Explorer . До недавнего времени его не воспринимали некоторые другие браузеры, но сейчас его видят все.

И если немного « поиграться » с кодом, то можно заставить двигаться не только текст, но и картинку. А это уже начальный уровень анимации, господа!

Вот код этого примера:

Бегущая строка для Joomla

Владельцам сайтов на основе CMS приведенный выше пример не подойдет. Точнее, подойдет, но нужно знать, куда можно « влепить » этот пример в html код. А это непросто.

Все CMS построены на основе php , который является серверным языком программирования. Именно на нем написан код, отвечающий за генерацию страниц сайта. То есть каждый элемент страницы сайта (« подвал », « шапка ») генерируется во время выполнения кода. Так что редактировать код php своего сайта на CMS не стоит.

Бегущая строка для joomla может быть реализована с помощью установки специальных плагинов. Один из них называется Moving Text . Рассмотрим его установку по шагам:

1. Заходим в панель управления Joomla . Через пункт верхнего меню « Расширения » переходим в « Менеджер расширений ».
2. На вкладке менеджера « Установка » выбираем вариант загрузки и жмем на кнопку « Установить »:

3. Затем переходим в « Менеджер плагинов ».
4. В списке внизу находим нужный плагин. Отмечаем его и нажимаем вверху на кнопку « Изменить ». Рядом с ней находится кнопка « Включить », служащая для активации расширения:

5. В следующем окне в полях « Основные параметры » устанавливаем параметры отображения бегущей строки ( длина, скорость и интервал между циклами ). После внесения изменений не забудьте нажать на кнопку « Сохранить » ( вверху справа ).
6. Затем через пункт главного меню « Материалы » переходим в « Менеджер материалов ». В нижнем списке отмечаем галочкой нужный материал и жмем на кнопку « Изменить » ( кружок с карандашом ).
7. В редакторе жмем на кнопку « html ». На экране откроется окно редактора кода. Туда вставляем < text=Нужный текст >. Вместо « Нужный текст » пишем то, что нам нужно, и жмем на « Обновить »:

После этого в редактируемом материале появится бегущая строка:

Другие варианты реализации бегущей строки

Бегущий текст можно реализовать не только с помощью html и установкой плагинов. Неплохим считается вариант реализации на javascript . Вот пример его действия:

Вот кусок кода, который размещается в теге :

А вот кусок скрипта, который нужно поместить в месте отображения бегущей строки:

Также можно реализовать бегающий текст с помощью библиотеки jquery :

Код примера приведен полностью. При желании css , jquery и html можно разнести по отдельным файлам:

Что в итоге?

Как видно из примеров, из всех реализаций бегущей строки самым «легковесным» является вариант на html . Да и его функционал намного проще для понимания и освоения. Но такая реализация не подойдет для сайтов на CMS . Для них остаются лишь плагины.

Источник

«Бегущая строка» — динамическая индикация на примере светодиодной матрицы RL-M2388 и Arduino Mega

Данная статья не претендует на толкование как единственно возможного метода отображения и прокрутки информации на светодиодной матрице. Я с удовольствием выслушаю ваши замечания и предложения по улучшению метода/функций. Данная статья – изложение личного опыта и описание результата, которого я добился.

Немного теории

В данной светодиодной матрице находится 64 красных светодиода. Если выводить контакты каждого светодиода отдельно, то понадобится 64 контакта на корпусе матрицы и микроконтроллер с 65 цифровыми портами ввода/вывода. Это нецелесообразно и невыгодно. Поэтому на заводе-изготовителе светодиоды объединяют в матрицы различных размеров (в нашем случае 8х8), то есть в 8 групп по строкам и столбцам следующим образом:

В таком случае нам понадобится лишь 16 цифровых вводов/выводов. Например, чтобы зажечь светодиод в левом верхнем углу, нам нужно на pin13 (см. картинку) подать лог 1, а на pin9 лог 0. Такой способ отображения называется статическая индикация.

«Хорошо, а если нам, например, нужно зажечь несколько светодиодов в разных позициях матрицы, а все остальные оставить выключенными?» — спросите Вы. При статической индикации это не представляется возможным. Для этого нужно использовать динамическую индикацию.

Динамическая индикация

Быстро мелькающий объект кажется человеческому глазу постоянно светящимся. Это свойство человеческого глаза – инертность. Как вы догадались, именно на этом свойстве и основан метод вывода информации в светодиодной матрице. Например, чтобы вывести на «экран» некий символ, нужно последовательно, проходя все «пиксели» матрицы с высокой скоростью, включать светодиод в нужном месте.

Условия, которые необходимо соблюдать при программировании матриц динамической индикации:
1. Длительность отображения каждого столбца/строки («пикселя» в моем случае) постоянна, одинакова для всех столбцов/строк («пикселей» в моем случае).
2. Частота смены столбцов/строк («пикселей» в моем случае) не меняется.

Принцип действия прошивки микроконтроллера

Признаюсь, когда у меня появилась отладочная плата на МК Atmega1280 и светодиодная матрица, я и понятия не имел что такое динамическая индикация и для чего она нужна. До понимания необходимости ее использования я дошел методом проб и методом «тыка».

Принцип действия прошивки:

1. Вывод символа на экран

Давайте представим, что наша светодиодная матрица – это двухмерный массив размерностью I на J, совпадающей с размерностью нашей матрицы. В нашем случае это 8 на 8 пикселей. Итак, есть двухмерный массив типа boolean. К примеру:

В цикле мы проверяем, если элемент массива A[i][j]=1, тогда включаем светодиод на матрице, находящийся в позиции (I;J), делаем паузу на отображения светодиода и выключаем светодиод в позиции (I;J). В результате работы программы по такому алгоритму на экране матрицы выведется символ «А» (в двумерном массиве именно этот символ отображен). Назовем этот алгоритм «Вывод на экран». Итак, с выводом информации на экран с помощью динамической индикации разобрались.

2. Прокрутка информации на экране

Конечно, классно выводить на экран неподвижную информацию, но было бы интереснее «оживить» ее – заставить передвигаться. Рассмотрим алгоритм перемещения информации:

В бесконечном цикле выполняем:
1. Вызываем алгоритм «Вывод на экран».
2. Берем 1й столбец матрицы А и записываем его в буфер (двухмерный массив BUFFER[8][1]).
3. Записываем содержимое матрицы с позиции A[i][j+1] в позицию A[i][j]. То есть мы по сути «сдвинули» матрицу влево на один столбец.
4. Записываем в последний столбец матрицы А (в свободный, так как мы сдвинули матрицу влево на один столбец) содержание буфера BUFFER. Назовем этот алгоритм «Прокрутка информации».

Вот и весь алгоритм прокрутки информации на экране. Теперь, зная алгоритмы вывода и прокрутки информации с помощью динамической индикации, мы можем приступить к практике.

Подключение матрицы к отладочной плате

Каждый из 16ти выводов матрицы пронумерован. В соответствии этим номерам были подпаяны и выведены 8 контактов, отвечающих за строки, и 8 контактов, отвечающих за столбцы. У меня, например, матрица подключена так:

Выводы, отвечающие за строки 23,25,27,29,31,33,35,37 – это номера выводов ножек микроконтроллера;
Выводы, отвечающие за столбцы 39,41,43,45,47,49,51,53 — это номера выводов ножек микроконтроллера.

Программирование

Программирование и прошивка микроконтроллера производится в среде разработки Arduino IDE.

Что необходимо знать для понимания кода программы, написанного ниже:

Функция pinMode()
Устанавливает режим работы заданного вход/выхода(pin) как входа или как выхода.
pinMode(pin, mode), где pin: номер вход/выхода(pin), который Вы хотите установить; mode: режим одно из двух значение — INPUT или OUTPUT, устанавливает на вход или выход соответственно.

Функция digitalWrite()
Подает HIGH или LOW значение на цифровой вход/выход (pin).
digitalWrite(pin, value), где pin: номер вход/выхода(pin); value: значение HIGH или LOW

Функция delayMicroseconds()
Останавливает выполнение программы на заданное в параметре количество микросекунд (1 000 000 микросекунд в 1 секунде).
delayMicroseconds(us), где us: количество микросекунд, на которое приостанавливается выполнение программы. (unsigned int)

Структура любой программы (скетча, так как в среде разработки ардуино программы называются именно так) имеет следующий вид:

В функции setup() производятся настройки портов ввода/вывода МК, настройка подключенных устройств к МК, периферии МК, а так же выполняется все то, что нужно выполнить ОДИН раз.
В функции loop() пишется тело программы, которое будет выполняться циклически, пока микроконтроллер включен.

Выполним настройку выводов микроконтроллера. Состояний портов ввода/вывода существует два вида: настроен на вход либо на выход. В нашем случае нужно настроить на выход.

Давайте теперь реализуем алгоритмы, которые я описал выше. Итак, мы имеем двухмерный массив:

Напишем функцию, которая реализует алгоритм «Вывод на экран».

Напишем функцию, которая реализует алгоритм «Прокрутка информации».

Теперь приведу полный код программы:

Вот и все. Заливайте эту программу в свой микроконтроллер и наблюдайте, как буква «А» будет «бежать» влево. Добавлю, что массивом размерностью 8 на 8 элементов ограничиваться не стоит. Например, я использовал массив размером 8 на 86. Написал в нем целую фразу, как видно на этом видео.

Источник

Бегущая строка своими руками

ОБНОВЛЕНИЯ

• 31.08.19 Версия 1.0: первоначальная, вроде бы стабильная версия
• 28.09.19 Версия dotMatrix 1.3: исправлена скорость и количество матриц
• 29.09.19: исправлен масштаб 3D моделей решётки
• 04.10.19 Версия 1.1 GyverString и GyverStringOffline: оптимизация под широкие матрицы (до 80 пикселей)
• 12.10.19 Версия 1.2 GyverString и GyverStringOffline: улучшена стабильность
• 04.10.19 приложение версии 1.2: исправлен баг с кнопкой АВТО
• 29.10.19 Версия 1.3 GyverStringOffline: исправлен баг с красным цветом

ОПИСАНИЕ

Бегущая строка на матрицах MAX7219 или матрице адресных светодиодов с голосовым управлением! Приложение для Android: Google Play

ВИДЕО

КОМПОНЕНТЫ

Каталоги ссылок на Алиэкспресс на этом сайте:

Стараюсь оставлять ссылки только на проверенные крупные магазины, из которых заказываю сам. Также по первые ссылки ведут по возможности на минимальное количество магазинов, чтобы минимально платить за доставку. Если какие-то ссылки не работают, можно поискать аналогичную железку в каталоге Ардуино модулей . Также проект можно попробовать собрать из компонентов моего набора GyverKIT .

• Купить в РФ, 60 свет/метр, 30 свет/метр
• Купить на Али ссылка, ссылка
• Black PCB / White PCB – цвет подложки ленты, чёрная / белая. В видео была чёрная
• 1m/5m – длина ленты в метрах (чтобы заказать 2 метра, берите два заказа 1m, очевидно)
• 30/60/74/96/100/144 – количество светодиодов на 1 метр ленты. В видео использовалась лента 60 диодов на метр
• IP30 лента без влагозащиты (как на видео)
• IP65 лента покрыта силиконом
• IP67 лента полностью в силиконовом коробе
• Постфикс ECO – лента чуть более низкого качества, меньше меди, на длинной ленте будет сильно проседать яркость

Источник