2012-02-29

VML в IE8

Заметил, что моя векторная библиотечка не хочет работать в восьмом эксплорере. При этом в Интернете вообще мало примеров работы VML которые бы оставались работоспособными в этом замечательном браузере. Даже на сайте Microsoft примеры VML которые прекрасно работали в шестой и седьмой версии напрочь отказываются работать в восьмерке.

При этом, вроде бы, иногда, что-то как-то работает в режиме совместимости, но не всегда, и только при определенных условиях типа наличия или отсутствия DOCTYPE и даже версии Service Pack.

Убив день на исследования я так ничего не выяснил. Кто то говорит что нужно переделать все размеры в заданные явно в пикселях, кто-то указывает на баг в количестве каскадных таблиц в IE. Каждый раз когда я, наконец, думал, что локализовал проблему она появлялась с другой стороны.

И вот когда я уже почти собрался переделать код на вывод VML в отдельном iframe который бы работал только в режиме совместимости, я нашел код который работает всегда и всезде во всех режимах - это оказался все тот же raphael. Дмитрий Барановский нашел способ обуздать IE8 - весьма неочевидным и почти магическим способом он заставил это всё работать как надо.

Обновлил свой пример для работы c VML.

 

Оставить комментарий

 
  2012-01-05

Фракталы на JavaScript, продолжение

После того, как фрактал в примере получился ну архи ме-е-е-е-е-дленным, решил немного исправить ситуацию. Все дело в том, что данную программку я написал как демо для объекта z.Canvas из z.Tools а z.Canvas - это на самом деле хелпер, который рисует графические примитивы при при помощи SVG и VML в зависимости от того, что доступно в текущем браезере. Идея была сделать именно холст, на котором можно было бы рисовать и в Internet Explorer и во всех остальных браузерах, ведь IE, как известно, до девятой версии не поддерживает SVG. Как следствие, каждый примитив на этом "холсте" будет занимать память, и если нарисовать фрактал из прямоугольников на холсте 300 на 300 пикселей, то компьютеру придется выделить память для девяносто тысяч маленьких объектов, само по себе это не сильно много, но всё равно, значительно тормозит весь процесс.

Переделать это дело на "настоящий" HTML5 canvas было делом нескольких минут, вот она, версия на Canvas, работает значительно быстрее и уже не жрет большого количества памяти.

Уже выложив, придумал, как ещё немного ускорить процесс рисования - сейчас, каждая точка рисуется в отдельном потоке через setTimeOut а это тоже страшно медленно - если делать без setTimeout процесс "подвиснет" пока не завершится рассчет фрактала, но можно сделать, чтобы рисовалась не точка но целая линия - это ускорит весь процесс без "зависания" процесса рисования.

 

Оставить комментарий

 
  2012-01-03

Фракталы на Javascript

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

 

Коментариев: 3

 
  2011-11-10

Обновил модальное окошко

Обновил модальное окошко. Исправил совместимость с IE6 - оказывается некоторые до сих пор им пользуются.

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

 

Оставить комментарий

 
  2010-12-14

Графики на SVG/VML

Мне никак дает покоя Google Charts...

Наиболее популярными библиотеками для построения графиков на сегодняшний день являются JPGraph и Google Charts. Решение от Google - замечательное, удобное, простое, графики очень симпатичные. Однако, все графики генерируются на чужом сервере (речь идет о графиках построенных через URL API). Пользователю разрешается создать ограниченное количество графиков а потом его могут забанить. Конечно, это количество большое, но меня немного смущает сама возможность быть забаненным из за превышения количества показов. Кроме того, сервер гугла я не контролирую и никто не может гарантировать, что этот сервис будет работать вечно, или что завтра на моих графиках не появится реклама, или внешний вид этих графиков не будет изменен на тот, который мне не нравится.

Между тем, задача сделать график на экране компьютера под силу школьнику освоившему курс информатики (мы такое, помню делали в старших классах). Так зачем же отдавать такие "сложные" вычисления серверу гугла?

JPGpaph дает возможность создавать графические изображения на своем сервере, но все равно это — графические изображения, со всеми присущими графическим изображениям ограничениями.

У растровых графиков есть один недостаток — их полная неинтерактивность. На растровый график невозможно добавить эффекты анимации при наведении мышкой, нельзя добавить гиперссылки (imagemap не в счет). Так как изначально природа графиков векторная — лучшим решением будет использовать векторный движёк вместо растрового. У вектора есть несколько неоспоримых преимуществ - не нужно передавать изображения по сравнительно узким каналам связи - передается только сама информация для построения графика, при этом рендеринг изображения происходит на машине клиента.

На сегодняшний день в вебе наиболее популярными являются несколько технологий - Adobe Flash, Microsoft Silverlight и Canvas/SVG/VML. Выбирая между Canvas и SVG я отдаю предпочтение последнему так как эта технология позволяет создавать по настоящему интерактивные эффекты и ближе к VML используемому в браузерах от Microsoft.

Используя ztools создал несколько компонентов для построения различных графиков и диаграмм:

 

Конечно, эти компоненты еще не совершенны, это даже не бета версия. Но уже лучше чем ничего. Главным отличием от аналогичных являются: открытость исходного кода, простота, и (надеюсь) удобство использования. Замечания, пожелания, багрепорты и фичреквесты приветствуются.

 

 

Коментариев: 1

 
  2010-12-06

Векторные часики

Для одного из проектов сделал вот такие вот часики. Они должны работать во всех популярных браузерах включая IE6+, FireFox, Safary, Opera. Для визуализации в Internet Explorer используется VML для других браузеров SVG.

 
 

Оставить комментарий

 
  2010-09-20

Вертикальный текст в HTML

Как я уже писал, в HTML совершенно нет возможности размещать текст по-вертикали. Правда, сильно ограниченные возможности присутствуют в Internet Explorer, правда, у этого способа я обнаружил один баг — при предварительном просмотре печати текст оказывается зеркально отраженным, видимо, второй фильтр не применяется.

Хотелось бы найти универсальный способ отображать вертикальный текст по-вертикали во всех браузерах и по возможности без глюков. Как говорится если нельзя, но очень хочется, то можно.

Создал небольшой скрипт для отображения текста по-вертикали. Код получился сравнительно небольшим. Скрипт использует VML под IE и SVG под остальными браузерами.

Внешний вид полностью настраивается при помощи CSS и Javascript. Здесь можно скачать архив, а здесь увидеть как это работает в живую.

Выложенный пример тестировался на IE6-IE7, Firefox2, Google Crome, Opera и Safary.

 

Коментариев: 6

 
  2010-02-22

Как изменить внешний вид полосы прокрутки

Ответ - никак. Штатными средствами это не возможно. Однако, можно реализовать свою версию полосы прокрутки.

В выходные создал несколько новых тем для z.html.Scrollbar. По моему, получилось не дурно...

 

Коментариев: 7