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

[MUTOgen4eg]

хм… может я один такой, но я не понял пользы данной темы для читателей…
вы не описали ни принципа реализации, ни средств и т.д. и т.п.
или это из разряда «вот как клево»?

[regeda]

Из ряда «Вот так клево»

[MUTOgen4eg]

ок

[volante]

Правая кнопка мыши -> Исходный код страницы :)

[MUTOgen4eg]

ну это как то не очень уважительно по отношению к читателю, раз уж автор решил опубликовать свои труды, неплохо было бы их прокомментировать

[and_rew]

ctrl+U товарищи, ctrl+U… хм… а лучше F12

[Grundiss]

f12, говорите? Это девелоперская примочка из ИЕ так включается если не ошибаюсь. (Может, правда, в Опере так же, не уточнял.) Вы правда считаете, что ИЕ оптимальный инструмент для изучения исходников?

[ernt]

Так включается, например, ещё и Firebug.

[Grundiss]

Вот сейчас с работы смотрю — Fx 3.0.11 — и действительно включается фаербаг. А вот предыдущий коммент написан из дома — Fx 3.5 — там ничего в мозилле не включалось :(

[ernt]

Странно, у меня и в Fx 3.5 включается.

[weiss]

А у меня еще и терминал Ubuntu ^_^

[SKYnv]

в опере f12 это быстрые настройки для страницы (отключить звук, всплывающие, java, куки и т.д.). А вот ctrl+U действительно отрывает редактор исходного кода ;)

[Melissa]

Открой код и посмотри. Больше в голове осядет, и меньше ерунды будет написано тут.

[Zoriq]

Здорово. Можно вашу реализацию использовать в своих проектах или read-only?
p.s. пара битых пикселей смотрелась бы эффектно)

[regeda]

Используйте на здоровье

[jeje]

Интересная фантазия. Было бы хорошо, если бы пояснили принцип работы.

[beat]

Приятно видеть чистый Javascript код

[Habroche]

Можно занудный вопрос? Если всё на аглицком, почему «tablo», или это просто задумка такая?

[regeda]

Вы меня раскусили ;)

[Goodkat]

чорт, ты сделал <marquee>

[ALLIGATOR]

Красиво. У меня заработало только под FF3.5b4, на Opera10build1622 & Chrome 2.0.164.0 работать отказалось… :(

Кстати, подкину идейку для оптимизации быстродействия — что если оперировать не точками, а вертикальными рядами точек — перемещение будет быстрее и процессору полегче…

[regeda]

Под FF3.5b4 не пробовал. а вот в остальных работает отлично

[regeda]

по поводу вертикальных рядов — это идея

[ALLIGATOR]

Странные дела — сегодня утром работает во всех трёх браузерах :-), хотя код не изменялся.
В файрфоксе грузит ядро процессора на 100%

[regeda]

FF у Вас еще бета…

[Kovat]

У меня в FF3.5 начальный пик в 22%, а потом держится на уровне 6-9%.

[devolonter]

у меня FF 3.5 (не бета) загрузка проца 100%, все довольно жутко тормозит. В Опере полет нормальный, в остальных не проверял

[hellohaos]

А у меня тока на 7% грузит.

[devolonter]

Сейчас запустил только с одной вкладкой, загрузка проца 50%, но все равно все жутко тормозит. Видимо сильно влияет конфигурация компьютера (правда странно что в Opera, Safari и Chrome не тормозит при прочих равных условиях). Комп: P4 3000 Mhz; DDR 1024 MB

[hellohaos]

Значит загадка кроется в движке Javascript.

P.S.
Честно говоря не люблю страницы где флеш или скрипт грузит проц %)

[nnm]

В FF(или Fx) не 100%, но неслабо. Притом пик загрузки приходится на момент упирания в левый край.

[hollow]

опера 10 билд 1622, работает прекрасно.

[3ds]

ff 3.6alpha — работает, тормозит.

[SKYnv]

Opera
Версия:
10.00 Beta
Сборка:
1601

Работает как часы.

[penexe]

а не проще/разумнее ли генерировать картинку на сервере и двигать js?

[regeda]

Мы не ищем легких путей

[DAREDEVIL]

я бы предложил по-другому:
так же генерировать лампочки, только сдвигать их за область видимости с использованием overflow: hidden;
думаю, так процессор будет грузиться меньше :)

[regeda]

При таком подходе будет грузиться ГОРАЗДО меньше

[nekt]

угу. тоже хотел написать сей совет.

можно еще поэкспериментировать и вместо рисованных кружочков написать туда несколько дивов. Я не уверен что это даст эффект, но вдруг? :)

[grokinn]

Круто оно ест у меня полностью одно ядро процессора, а у кого процессор одноядерный — полностью его займет со всеми вытекающими тормозами.

[regeda]

У меня ноут MSI U100 и браузер Opera 9.64, при начальной конфигурации процессор загружался максимум до 22%

[Nafanoid]

Firefox/3.0.11
Pentium M 1.5GHz, 238 MB
Загрузка проца 55%.

[Snipe]

Да FF в последнее время и в принципе не радует. Очень много знакомых жалуются именно на тормоза FF'а.

[pixxell]

Жалко русского языка нет

[regeda]

Добавить не сложно, только придется кропотливо вносить в программу битовую карту под каждый символ

[allmoney]

Может есть желающие внести? Скрипт интересный. :)

[misterio]

У меня на FF 3.5 виснуть стал браузер.

[dasty]

То же самое

[ALLIGATOR]

А ещё было бы замечательно, если сделать поддержку внешних «шрифтов», чтобы можно было загружать разные начертания символов с разной детализацией по горизонтали и вертикали при помощи JSON или ещё чего-нибудь :-)
Ну это просто идея такая.

[regeda]

Верное решение автоматизировать процесс создания шрифтов

[KELiON]

и потом еще продавать этот скрипт за бешеные бабки:)

[homm]

<Режим зануды>Прятать баннеры на бесплатных ресурсах не хорошо.</Режим зануды>

[SwampRunner]

круто! красиво написано, спасибо!

[ArtemLysenko]

Полезная штука!

[Darksen]

Красиво, но слишком сильно грузит проц. Причем чем меньше Delay, тем больше грузит проц.
На 50% загрузило мой Core Duo 1,87x2 Mhz

[regeda]

у меня на Core 2 Duo 2,22Ghz загрузка процессора 50% дошла при Delay = 0

[Masterme]

у меня грузит на 5% максимум :)

[SKYnv]

Opera 10, макимум на 8% грузит

[Darksen]

У мну FF 3.0.11 на Win XP SP2 ))) Еще раз посмарел до 50 процентов добегает процесс firefox.exe)

[Screatch]

Симпатичная вещь, но лагает то всё как…
Незнаю… это того мне кажется не стоит…

[beloks]

А если соединить эту разработку с Шрифтом Брайля?! И тут у нас вопрос, как реализовать и показывать все таки слабо/вообще не видящим пользователям, а вот дальше ничего пока не напишу, так как не могу просто показать как это будет выглядеть(

[tozx]

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

[Masterme]

FF 3.0.11 — жуткие тормоза,
хром и Opera 9.64 — вообще летает
IE7 и safari 4 — примерно одинаково, чуть попрожорливее оперы
IE6, flock и k-meleon — между оперой и IE7

[homm]

у меня в ие6 вообще психоделия какая-то. Отображается максимум 10 точек на каждом кадре, и те в виде серых квадратиков, процессор на 100% и постоянно грузит сеть. Зато в фф все отлично, примерно как в Опере.

[regeda]

в IE6 не тестировал, поэтому наличие психоделических наклонностей обсуждаемо

[homm]

Просто человек выше сказал, что у него в ие6 как в flock и k-meleon, вот интересно, как так вышло.

[Masterme]

А теперь внимание, как это делается по-умному.

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

[regeda]

Идея в зачет

[melervand]

Вы меня конечно простите, с точки зрения программирования все очень круто написано. Но почему нельзя было просто создать буквы в виде цельных изображений и точно также javascript'ом менять их left margin.

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

Поправьте, если где не прав.

[regeda]

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

[melervand]

Еще одна мысль пришла:
Можно ведь взять похожий шрифт, налету перевести каждую букву в img и накрыть маской, как заметил Masterme

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

пожалуй, единственный минус — нагрузка на сервер при переводе шрифта.

[homm]

… и в некоторых дырочках будут видны края букв.

[Masterme]

щрифт/шаг подобрать.
вообще любую идею можно реализовать как хорошо, так и плохо. талант воплощающего много значит

[homm]

Вообще есть идеи плохие и хорошие. Подбирать размер точек и шрифта так, чтобы края не одного из 128 символа не попадали на точки — явно плохая идея.

[Inquirer]

Практически нарисовать новый шрифт. Которого у пользователей не будет. И ничего не сработает.

[Masterme]

не очкуй, славег. глаза боятся, руки делают.

[lahmatiy]

Вы забыли про разные браузеры и операционки. Невозможно подобрать шрифт и его размер, чтобы везде было одинаково: нюансы реализации шрифтов в разных ОС, пресловутый anti-aliasing, своя интерпритация размера шрифта у каждого браузера при рендеринге и т.п.

[Masterme]

наверное про идею кросс-браузерного фреймворка так же говорили: «все браузеры разные, невозможно сделать скрипт, который везде будет работать одинаково...»

[lahmatiy]

Кстати, да — иногда не возможно. Можно сделать, чтобы работал похоже.
Но сравнение крайне некорректно — скрипты более управляемы, нежели способ рендеринга шрифта браузером.
Вы сначала сделайте свое решение, так чтобы «везде одинаково» было — может тогда и убедите, что это хорошее решение.

PS Если вы делаете под одну платформу, где все предсказуемо — решение правильное, подобрать все можно.

[Masterme]

О, это знакомое «сначала сделай, потом говори». И делал, и делаю, и буду делать. Более того, Вы сами сделаете, если Вас хорошо промотивировать, денег заплатить, например.

[lahmatiy]

Так покажите, в чем проблема? Может научите чему.

[Masterme]

Какая проблема? Почему я это не делаю? Мне это не надо.

[slider]

Весь смак в том, что слегка поправив массив, лёгким движением руки можно отображать любые символы, не опасаясь что у пользователя не такого шрифта.

Так что идея не плохая, но нужно немного оптимизировать :)

[slider]

*не = нет

[kydapodatsya]

при попытке написать i'm god ничего не происходит)))
дискриминация)))))

[regeda]

попробуйте: i am god

[SKYnv]

символ апострофа отсутствует в массиве, добавьте его самостоятельно и все получится.

[nord_ak]

Vista+FF35 тормоза
XP+FF30 тормоза

ИМХО такое табло лучше делать на Flash.

[regeda]

Я ничего против Flash не имею, скорее всего рендеринг будет быстрее на этой платформе. Но мне нравится чистый Javascript.

[Slivus]

При количестве точек более 200 FF на глухо виснет…

[SKYnv]

Станно, я чуть поправил массив ответственный за отображение символа A таким образом что бы она отображалась как квадрат и 4х8 точек итого на табло одновременно получается 264 точки. В опере загрузка процессора выше 8% не появляется.

[tolikblik]

Linux
FF 3.03 — все супер, ничего не грузит.
Opera 9.64 — работает, 35% загрузка
Konqueror 4.1.2 — слайдшоу, 51%

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

Идея хорошая, автору- респект!

[regeda]

спасибо!

[SKYnv]

Провел еще эксперимент взял модифицированую чуть версию как тут habrahabr.ru/blogs/javascript/64195/#comment_1786743
поставил в опере задержку в 20мс текст был такой AAAAAAAAAAAAAAAAAAAAAA+B и так до буквы F. В опере на 20 мс все бегала как надо — то есть быстро и проц не грузило, а вот IE8 грузил проц на 55% и никак не реагировал на изменение значения задержки ниже 200.

[Urn]

прикольное табло! такое себе ретро )

[slider]

На практике, кроме украшения сайта необычным элементом, можно использовать как настоящее табло. Включить в браузере полноэкранный режим, и выставить в витрину ;)

[regeda]

Это да ;)

[handymade]

зачет! только цифр жаль нету ((

[malyshev]

Ну ведь чертовский неоптимальный алгоритм…
Почему бы сразу не отрисовать строку и двигать ее параметром scrollLeft.
Было бы по-шустрее.

[malyshev]

Хм… хотя шустрее возможно будет только для достаточно небольших строк как в примере…

[SKYnv]

Ну что? Кто нить выскажется по оптимизации? Так как штукенция весьма неплоха.

[regeda]

Оптимизацией может служить пока лишь сохранение буфера смещения курсора перед каждой отрисовкой кадра.

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

содержит переменную off, которая обнуляется перед каждой отрисовкой кадра, хотя содержит весьма весомую информацию для последующих кадров — это определение буквы в позиции left_margin

[naething]

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

[SKYnv]

да ничего не тормозит )

[jandosul]

Видно в субботу писали от делать нефик

[aspect]

жуткие тормоза с дефолтной фразой FF3.5 + XP