Электронное табло

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

    За основу была взята идея светодиодного табло с одним цветом лампочки (белый).
    Задача стояла следующая — табло должно внутри прокручивать текст влево-вправо быстро и с возможностью минимальной конфигурацией визуального отображения (задержка анимации и изменение размеров панели).

    Самым сложным кропотливым в работе — это было занести битовую карту символов в программу.

    Сразу поясню, что параметр «E-TABLO HORIZ. POINTS» определяет количество точек по ширине электронного табло.

    Посмотреть на результат

    UPD. Принцип работы.

    Есть массив (вектор) точек.
    Есть текстовый streamer, который в соответствующей позиции включает, либо выключает лампочку. Streamer хранит битовую карту символов. Карта — это вектор нулей или единиц.
    Каждый кадр — это цикл, в котором осуществляется обход всех точек с последующей обработкой их присутсвия или отсутсвия на табло.
    AdBlock has stolen the banner, but banners are not teeth — they will be back

    More
    Ads

    Comments 109

      +12
      хм… может я один такой, но я не понял пользы данной темы для читателей…
      вы не описали ни принципа реализации, ни средств и т.д. и т.п.
      или это из разряда «вот как клево»?
        +1
        Из ряда «Вот так клево»
        +18
        Правая кнопка мыши -> Исходный код страницы :)
          +3
          ну это как то не очень уважительно по отношению к читателю, раз уж автор решил опубликовать свои труды, неплохо было бы их прокомментировать
            +3
            ctrl+U товарищи, ctrl+U… хм… а лучше F12
              0
              f12, говорите? Это девелоперская примочка из ИЕ так включается если не ошибаюсь. (Может, правда, в Опере так же, не уточнял.) Вы правда считаете, что ИЕ оптимальный инструмент для изучения исходников?
                +3
                Так включается, например, ещё и Firebug.
                  0
                  Вот сейчас с работы смотрю — Fx 3.0.11 — и действительно включается фаербаг. А вот предыдущий коммент написан из дома — Fx 3.5 — там ничего в мозилле не включалось :(
                    0
                    Странно, у меня и в Fx 3.5 включается.
                    0
                    А у меня еще и терминал Ubuntu ^_^
                    0
                    в опере f12 это быстрые настройки для страницы (отключить звук, всплывающие, java, куки и т.д.). А вот ctrl+U действительно отрывает редактор исходного кода ;)
                +5
                Открой код и посмотри. Больше в голове осядет, и меньше ерунды будет написано тут.
                +8
                Здорово. Можно вашу реализацию использовать в своих проектах или read-only?
                p.s. пара битых пикселей смотрелась бы эффектно)
                  +12
                  Используйте на здоровье
                  +1
                  Интересная фантазия. Было бы хорошо, если бы пояснили принцип работы.
                    +1
                    Приятно видеть чистый Javascript код
                      +2
                      Можно занудный вопрос? Если всё на аглицком, почему «tablo», или это просто задумка такая?
                        +5
                        Вы меня раскусили ;)
                        +28
                        чорт, ты сделал <marquee>
                          0
                          Красиво. У меня заработало только под FF3.5b4, на Opera10build1622 & Chrome 2.0.164.0 работать отказалось… :(

                          Кстати, подкину идейку для оптимизации быстродействия — что если оперировать не точками, а вертикальными рядами точек — перемещение будет быстрее и процессору полегче…
                            0
                            Под FF3.5b4 не пробовал. а вот в остальных работает отлично
                              +1
                              по поводу вертикальных рядов — это идея
                                +1
                                Странные дела — сегодня утром работает во всех трёх браузерах :-), хотя код не изменялся.
                                В файрфоксе грузит ядро процессора на 100%
                                  0
                                  FF у Вас еще бета…
                                    +1
                                    У меня в FF3.5 начальный пик в 22%, а потом держится на уровне 6-9%.
                                      0
                                      у меня FF 3.5 (не бета) загрузка проца 100%, все довольно жутко тормозит. В Опере полет нормальный, в остальных не проверял
                                        +1
                                        А у меня тока на 7% грузит.
                                          0
                                          Сейчас запустил только с одной вкладкой, загрузка проца 50%, но все равно все жутко тормозит. Видимо сильно влияет конфигурация компьютера (правда странно что в Opera, Safari и Chrome не тормозит при прочих равных условиях). Комп: P4 3000 Mhz; DDR 1024 MB
                                            +1
                                            Значит загадка кроется в движке Javascript.

                                            P.S.
                                            Честно говоря не люблю страницы где флеш или скрипт грузит проц %)
                                      • UFO just landed and posted this here
                                          0
                                          В FF(или Fx) не 100%, но неслабо. Притом пик загрузки приходится на момент упирания в левый край.
                                          0
                                          опера 10 билд 1622, работает прекрасно.
                                            +1
                                            ff 3.6alpha — работает, тормозит.
                                              0
                                              Opera
                                              Версия:
                                              10.00 Beta
                                              Сборка:
                                              1601

                                              Работает как часы.
                                              +4
                                              а не проще/разумнее ли генерировать картинку на сервере и двигать js?
                                                +2
                                                Мы не ищем легких путей
                                                  +6
                                                  я бы предложил по-другому:
                                                  так же генерировать лампочки, только сдвигать их за область видимости с использованием overflow: hidden;
                                                  думаю, так процессор будет грузиться меньше :)
                                                    +2
                                                    При таком подходе будет грузиться ГОРАЗДО меньше
                                                      0
                                                      угу. тоже хотел написать сей совет.

                                                      можно еще поэкспериментировать и вместо рисованных кружочков написать туда несколько дивов. Я не уверен что это даст эффект, но вдруг? :)
                                                    +2
                                                    Круто оно ест у меня полностью одно ядро процессора, а у кого процессор одноядерный — полностью его займет со всеми вытекающими тормозами.
                                                      0
                                                      У меня ноут MSI U100 и браузер Opera 9.64, при начальной конфигурации процессор загружался максимум до 22%
                                                        0
                                                        Firefox/3.0.11
                                                        Pentium M 1.5GHz, 238 MB
                                                        Загрузка проца 55%.
                                                          0
                                                          Да FF в последнее время и в принципе не радует. Очень много знакомых жалуются именно на тормоза FF'а.
                                                        0
                                                        Жалко русского языка нет
                                                          +1
                                                          Добавить не сложно, только придется кропотливо вносить в программу битовую карту под каждый символ
                                                            0
                                                            Может есть желающие внести? Скрипт интересный. :)
                                                          +2
                                                          У меня на FF 3.5 виснуть стал браузер.
                                                            0
                                                            То же самое
                                                            0
                                                            А ещё было бы замечательно, если сделать поддержку внешних «шрифтов», чтобы можно было загружать разные начертания символов с разной детализацией по горизонтали и вертикали при помощи JSON или ещё чего-нибудь :-)
                                                            Ну это просто идея такая.
                                                              +2
                                                              Верное решение автоматизировать процесс создания шрифтов
                                                                0
                                                                и потом еще продавать этот скрипт за бешеные бабки:)
                                                                –1
                                                                <Режим зануды>Прятать баннеры на бесплатных ресурсах не хорошо.</Режим зануды>
                                                                • UFO just landed and posted this here
                                                                    0
                                                                    круто! красиво написано, спасибо!
                                                                      0
                                                                      Полезная штука!
                                                                        0
                                                                        Красиво, но слишком сильно грузит проц. Причем чем меньше Delay, тем больше грузит проц.
                                                                        На 50% загрузило мой Core Duo 1,87x2 Mhz
                                                                          0
                                                                          у меня на Core 2 Duo 2,22Ghz загрузка процессора 50% дошла при Delay = 0
                                                                            +1
                                                                            у меня грузит на 5% максимум :)
                                                                              +1
                                                                              Opera 10, макимум на 8% грузит
                                                                                0
                                                                                У мну FF 3.0.11 на Win XP SP2 ))) Еще раз посмарел до 50 процентов добегает процесс firefox.exe)
                                                                              0
                                                                              Симпатичная вещь, но лагает то всё как…
                                                                              Незнаю… это того мне кажется не стоит…
                                                                                0
                                                                                А если соединить эту разработку с Шрифтом Брайля?! И тут у нас вопрос, как реализовать и показывать все таки слабо/вообще не видящим пользователям, а вот дальше ничего пока не напишу, так как не могу просто показать как это будет выглядеть(
                                                                                  0
                                                                                  жаль, что цифры не работают.
                                                                                  и регистр букв одинаковый.
                                                                                  начало хорошее.
                                                                                  грузит процессор. проще сделать на картинках, однако и так весело. к тому же нестандартно =)
                                                                                    +3
                                                                                    FF 3.0.11 — жуткие тормоза,
                                                                                    хром и Opera 9.64 — вообще летает
                                                                                    IE7 и safari 4 — примерно одинаково, чуть попрожорливее оперы
                                                                                    IE6, flock и k-meleon — между оперой и IE7
                                                                                      –1
                                                                                      у меня в ие6 вообще психоделия какая-то. Отображается максимум 10 точек на каждом кадре, и те в виде серых квадратиков, процессор на 100% и постоянно грузит сеть. Зато в фф все отлично, примерно как в Опере.
                                                                                        0
                                                                                        в IE6 не тестировал, поэтому наличие психоделических наклонностей обсуждаемо
                                                                                          0
                                                                                          Просто человек выше сказал, что у него в ие6 как в flock и k-meleon, вот интересно, как так вышло.
                                                                                      +6
                                                                                      А теперь внимание, как это делается по-умному.

                                                                                      Текст обычным TTF-шрифтом, белый на чёрном. А поверх него накладывается МАСКА, чёрная с прозрачными дырочками. Положение текста меняется обычным css-свойством left (относительное позиционирование).
                                                                                        0
                                                                                        Идея в зачет
                                                                                          0
                                                                                          Вы меня конечно простите, с точки зрения программирования все очень круто написано. Но почему нельзя было просто создать буквы в виде цельных изображений и точно также javascript'ом менять их left margin.

                                                                                          Кстати, вполне реален способ создания ttf-dotted шрифта, а для кроссбраузерности налету переводить ttf в img

                                                                                          Поправьте, если где не прав.
                                                                                            0
                                                                                            Сколько людей, столько и мнений. Мне хотелось проэкспериментировать в том ключе, чтобы назгрузка на сервер была минимальная и решение было не стандартное. Ведь в том виде, в котором создано электронное табло, можно отображать не только текст. Стоит только написать Streamer, какую-нибудь анимацию, и подключить его к «электронному» табло. В скорости работы приложения при таком подходе мы теряем, но получаем универсальность.
                                                                                            0
                                                                                            Еще одна мысль пришла:
                                                                                            Можно ведь взять похожий шрифт, налету перевести каждую букву в img и накрыть маской, как заметил Masterme

                                                                                            кроссбраузерность — да
                                                                                            большая нагрузка — нет

                                                                                            пожалуй, единственный минус — нагрузка на сервер при переводе шрифта.
                                                                                            +5
                                                                                            … и в некоторых дырочках будут видны края букв.
                                                                                              0
                                                                                              щрифт/шаг подобрать.
                                                                                              вообще любую идею можно реализовать как хорошо, так и плохо. талант воплощающего много значит
                                                                                                0
                                                                                                Вообще есть идеи плохие и хорошие. Подбирать размер точек и шрифта так, чтобы края не одного из 128 символа не попадали на точки — явно плохая идея.
                                                                                                  0
                                                                                                  Практически нарисовать новый шрифт. Которого у пользователей не будет. И ничего не сработает.
                                                                                                    –1
                                                                                                    не очкуй, славег. глаза боятся, руки делают.
                                                                                                    0
                                                                                                    Вы забыли про разные браузеры и операционки. Невозможно подобрать шрифт и его размер, чтобы везде было одинаково: нюансы реализации шрифтов в разных ОС, пресловутый anti-aliasing, своя интерпритация размера шрифта у каждого браузера при рендеринге и т.п.
                                                                                                      0
                                                                                                      наверное про идею кросс-браузерного фреймворка так же говорили: «все браузеры разные, невозможно сделать скрипт, который везде будет работать одинаково...»
                                                                                                        0
                                                                                                        Кстати, да — иногда не возможно. Можно сделать, чтобы работал похоже.
                                                                                                        Но сравнение крайне некорректно — скрипты более управляемы, нежели способ рендеринга шрифта браузером.
                                                                                                        Вы сначала сделайте свое решение, так чтобы «везде одинаково» было — может тогда и убедите, что это хорошее решение.

                                                                                                        PS Если вы делаете под одну платформу, где все предсказуемо — решение правильное, подобрать все можно.
                                                                                                          0
                                                                                                          О, это знакомое «сначала сделай, потом говори». И делал, и делаю, и буду делать. Более того, Вы сами сделаете, если Вас хорошо промотивировать, денег заплатить, например.
                                                                                                            0
                                                                                                            Так покажите, в чем проблема? Может научите чему.
                                                                                                              –1
                                                                                                              Какая проблема? Почему я это не делаю? Мне это не надо.
                                                                                                  0
                                                                                                  Весь смак в том, что слегка поправив массив, лёгким движением руки можно отображать любые символы, не опасаясь что у пользователя не такого шрифта.

                                                                                                  Так что идея не плохая, но нужно немного оптимизировать :)
                                                                                                    0
                                                                                                    *не = нет
                                                                                                  0
                                                                                                  при попытке написать i'm god ничего не происходит)))
                                                                                                  дискриминация)))))
                                                                                                    0
                                                                                                    попробуйте: i am god
                                                                                                      0
                                                                                                      символ апострофа отсутствует в массиве, добавьте его самостоятельно и все получится.
                                                                                                      0
                                                                                                      Vista+FF35 тормоза
                                                                                                      XP+FF30 тормоза

                                                                                                      ИМХО такое табло лучше делать на Flash.
                                                                                                        0
                                                                                                        Я ничего против Flash не имею, скорее всего рендеринг будет быстрее на этой платформе. Но мне нравится чистый Javascript.
                                                                                                        0
                                                                                                        При количестве точек более 200 FF на глухо виснет…
                                                                                                          0
                                                                                                          Станно, я чуть поправил массив ответственный за отображение символа A таким образом что бы она отображалась как квадрат и 4х8 точек итого на табло одновременно получается 264 точки. В опере загрузка процессора выше 8% не появляется.
                                                                                                          0
                                                                                                          Linux
                                                                                                          FF 3.03 — все супер, ничего не грузит.
                                                                                                          Opera 9.64 — работает, 35% загрузка
                                                                                                          Konqueror 4.1.2 — слайдшоу, 51%

                                                                                                          Под Виндой через пару часов посмотрю.

                                                                                                          Идея хорошая, автору- респект!
                                                                                                            0
                                                                                                            спасибо!
                                                                                                            0
                                                                                                            А я смотрю вы не любите легкие пути :) Автору респект и карма, потому что я считаю такие идеи нужно поддерживать.
                                                                                                              0
                                                                                                              Провел еще эксперимент взял модифицированую чуть версию как тут habrahabr.ru/blogs/javascript/64195/#comment_1786743
                                                                                                              поставил в опере задержку в 20мс текст был такой AAAAAAAAAAAAAAAAAAAAAA+B и так до буквы F. В опере на 20 мс все бегала как надо — то есть быстро и проц не грузило, а вот IE8 грузил проц на 55% и никак не реагировал на изменение значения задержки ниже 200.
                                                                                                                0
                                                                                                                прикольное табло! такое себе ретро )
                                                                                                                  0
                                                                                                                  На практике, кроме украшения сайта необычным элементом, можно использовать как настоящее табло. Включить в браузере полноэкранный режим, и выставить в витрину ;)
                                                                                                                    0
                                                                                                                    Это да ;)
                                                                                                                    0
                                                                                                                    зачет! только цифр жаль нету ((
                                                                                                                      0
                                                                                                                      Ну ведь чертовский неоптимальный алгоритм…
                                                                                                                      Почему бы сразу не отрисовать строку и двигать ее параметром scrollLeft.
                                                                                                                      Было бы по-шустрее.
                                                                                                                        0
                                                                                                                        Хм… хотя шустрее возможно будет только для достаточно небольших строк как в примере…
                                                                                                                        0
                                                                                                                        Ну что? Кто нить выскажется по оптимизации? Так как штукенция весьма неплоха.
                                                                                                                          0
                                                                                                                          Оптимизацией может служить пока лишь сохранение буфера смещения курсора перед каждой отрисовкой кадра.

                                                                                                                          функция:
                                                                                                                          function get_start(left_margin) {...}

                                                                                                                          содержит переменную off, которая обнуляется перед каждой отрисовкой кадра, хотя содержит весьма весомую информацию для последующих кадров — это определение буквы в позиции left_margin
                                                                                                                          0
                                                                                                                          Очень сильно уж тормозит браузер. Думаю, лучше бы сделать готовые картинки для каждой буквы и перемещать их влево-вправо (этот вариант должен работать по крайней мере не медленней, чем гугл мэпс при прокрутке).
                                                                                                                            +1
                                                                                                                            да ничего не тормозит )
                                                                                                                            0
                                                                                                                            Видно в субботу писали от делать нефик
                                                                                                                              0
                                                                                                                              жуткие тормоза с дефолтной фразой FF3.5 + XP

                                                                                                                              Only users with full accounts can post comments. Log in, please.