Pull to refresh

JavaScript библиотека «Raphaël» — SVG расцветает, SVG и iPhone

Vector graphics *
Raphaël — это небольшая JavaScript библиотека с простым синтаксисом для работы с векторными форматами: SVG и VML (для IE). Впрочем, как я успел заметить у разработчика возникают проблемы с VML (когда многие вещи в SVG делаются очень просто в VML не всегда есть простая альтернатива)

часы
Читать дальше →
Total votes 49: ↑42 and ↓7 +35
Views 3K
Comments 50

Raphaël

JavaScript *

Привет, Хабр


В этом коротком очерке хотел бы рассказать о маленькой (по словам авторов) библиотеки на JavaScript — Raphaël. Данная библиотека использует для работы SVG и VML и служит, как не сложно догадаться для облегчения работы с векторная графикой в вебе.
Так же по утверждению создателей работает во всех актуальных на даных момент браузерах, а именно Firefox 3.0+, Safari 3.0+, Opera 9.5+ and Internet Explorer 6.0+. К сожалению обошли создатели внимание вторую лису, хотя сюда по данным лайвинтернета на ней приходится почти 2% пользователей, что вообще немало. Да, и не смотря на то, что Хром не заявлен, в нем тоже все работает как часы.
Читать дальше →
Total votes 69: ↑56.5 and ↓12.5 +44
Views 37K
Comments 33

SunCalc — солнечный калькулятор

Self Promo
Хочу поделиться с вами небольшим, но полезным проектиком, разработанным мной на досуге — солнечным калькулятором SunCalc.



SunCalc показывает на карте для выбранного места и даты траекторию движения солнца и фазы освещённости в течении суток (и еще пару приятных мелочей).
Читать дальше →
Total votes 115: ↑106 and ↓9 +97
Views 156K
Comments 81

Инструмент для рисования снежинок в браузере

Vector graphics *
Снежинка своими руками. Хабрахабр
Тема оформления «Хабрахабр».

Ещё 2 дня назад я закончил разработку инструмента для рисования снежинок, отладил его в тепличных локальных условиях и готов был отправить в дальнее плавание. Но запуск «проекта» в открытый интернет пришлось 2 раза откладывать. Сначала при интеграции со сторонним сайтом отказались работать кроссдоменные AJAX-запросы методом POST (а GET'а мне не для всех запросов было достаточно), потом на медленном канале проявила себя в виде глюков асинхронная загрузка данных и представления. Сейчас всё вроде бы пофикшено, выложено и ожидает по отношению к себе проявлений внимания.

О разработке, планах, предложения о сотрудничестве
Total votes 63: ↑55 and ↓8 +47
Views 4.6K
Comments 19

«Сделайте мне красиво!» Выпуск №27

Lumber room
Вашему вниманию очередной выпуск подкаста о веб-разработке «Сделайте мне красиво!»

Show notes:


Наши ссылки: RSS и лента на rpod.ru
Total votes 9: ↑6 and ↓3 +3
Views 403
Comments 1

Draw a Stickman: игра на canvas/js/svg

Game development *


Draw a Stickman — впечатляющий пример того, какую увлекательную игру можно сделать с помощью JavaScript-библиотеки raphael.js для генерации SVG. Игра особенно подходит для планшетов, в ней совершенно не используется Flash.
Total votes 108: ↑93 and ↓15 +78
Views 4.9K
Comments 38

Morris.js: средство рисования красивых графиков при помощи jQuery и Raphaël

jQuery *
Tutorial
В позавчерашнем выпуске «Mozilla Hacks Weekly» увидал гиперссылку «Morris.js», пошёл по ней, почитал, порадовался — а теперь и вам поведаю.

Morris — это легковесный джаваскрипт (всего-то 3052 байта после миниатюризации) с открытым исходным кодом (распространяемым по упрощённой лицензии BSD), который для работы требует jQuery и Raphaël и строит с их помощью графики на простой сетке горизонтальных линий, наподобие такого:

[график]

По оси абсцисс откладывается время, по оси ординат — какие-нибудь зависящие от времени значения. (Morris изначально разрабатывался для сайта, показывающего общее число автомашин той или иной марки в Великобритании, так что для него естественно, что ось абсцисс — это ось времени.)

Графики реагируют на мышь: вспучиваются точки, соответствующие указанному мышью моменту во времени, и подле них появляются подсказки.

Достоинство скрипта — простота API. Приведённый мною пример создаётся вот таким вызовом:

// поквартальные данные, тонкие линии, цвета их заданы в явном виде
Morris.Line({
  element: 'quarterly',
  data: [
    {q: '2009 Q3', a: 100, b: 75},
    {q: '2010 Q2', a: 75, b: 50},
    {q: '2010 Q3', a: 75, b: 50},
    {q: '2011 Q1', a: 50, b: 25},
    {q: '2011 Q3', a: 50, b: 25},
    {q: '2011 Q4', a: 75, b: 50},
    {q: '2012 Q2', a: 100, b: 75}
  ],
  xkey: 'q',
  ykeys: ['a', 'b'],
  labels: ['Series A', 'Series B'],
  lineColors: ['#167f39','#044c29'],
  lineWidth: 2
});

Читать дальше →
Total votes 52: ↑48 and ↓4 +44
Views 18K
Comments 20

«Сделайте мне красиво!» Выпуск №39

Lumber room
Вашему вниманию очередной выпуск подкаста о веб-разработке «Сделайте мне красиво!»

Show notes:



Наши ссылки: RSS и лента на rpod.ru (лента прешоу)
Total votes 8: ↑6 and ↓2 +4
Views 820
Comments 0

Kartograph — фреймворк для создания интерактивных карт

Open source *JavaScript *Maps API *
Kartograph — это новый фреймворк для создания интерактивных картографических веб приложений без использования Google Maps/Bing Maps или любого другого сервиса. Он создавался с учетом потребностей дизайнеров и журналистов.

Можно поглядеть на демки, чтобы узнать на что способен Kartograph.
или узнать как это все работает.
Total votes 67: ↑66 and ↓1 +65
Views 19K
Comments 16

Пример круговой диаграммы в SVG средствами Raphael и PHP

PHP *JavaScript *
Tutorial
В ходе разработки одного из наших проектов мы столкнулись с необходимостью отдавать в клиентском html большое количество графики. С точки зрения минимализации нагрузки на сервер, строить объёмную графику на стороне клиента — это единственное правильное решение. При поиске готовых и подходящих нам JS решений из этой области мы основательно подсели на JS библиотеку Raphael, которая позволяет легко прорисовывать векторную графику во всех актуальных на сегодня браузерах. Разобравшись в функционале и отладив несколько функций по созданию основных типов диаграмм, мы решили поделиться здесь своими наработками.

Пример круговой диаграммы в SVG средствами Raphael и PHP

Итак. Описанный ниже пример создаёт средствами Raphael и PHP круговую диаграмму в формате SVG, представленную на изображении. Мы постарались максимально подробно описать исходный код, чтобы помочь всем тем, кто самостоятельно разобраться в этом не нашёл сил или времени.
Читать дальше →
Total votes 21: ↑12 and ↓9 +3
Views 13K
Comments 12

Статистика зарплатных ожиданий от HeadHunter

HeadHunter corporate blog Website development *
Любые темы, связанные с зарплатой, вызывают живой интерес. Мой топик «Как понять, сколько ты стоишь, или зарплатные кластеры в действии!» о том, как самостоятельно собрать статистику по зарплатам, набрал почти сотню комментариев и получил позитивную оценку у читателей.
Сегодня я расскажу, как мы автоматизировали визуализацию подобной статистики, создав новый сервис «Статистика зарплатных ожиданий». Доступен он пока только работодателям, а к сервису для соискателей (со статистикой по зарплатным предложениям) приступим позднее.

Под катом подробности о фиче и о том, как мы ее разрабатывали.
Читать дальше →
Total votes 59: ↑55 and ↓4 +51
Views 48K
Comments 60

Ruby и C. Часть 4. Дружим акселерометр, гироскоп и дальномер с Raphael.js

Abnormal programming *Ruby *Programming *
В предыдущих частях от iv_s (раз два три) были описаны различные техники использования C и Ruby вместе. Я бы хотел рассказать о еще одной возможной связке – использовании уже существующих системных C-функций.

Я потихоньку улучшаю своего робота-рисовача. Он написан на Ruby, поэтому при подключении к нему акселерометра с гироскопом, мне, само собой, захотелось продолжить использовать эту технологию.

Как оказалось, достучаться до функций работы с шиной I2C в Ruby предельно просто – он позволяет использовать уже написанные и установленные библиотеки на C.



Схема работы такая:
на RaspberryPi запущен Sinatra сервер, который при обращении отдает данные о повороте платы по осям X и Y, а также расстояние до ближайшего препятствия в сантиметрах.
На клиенте для визуализации и отладки написан простой скрипт с использованием Raphael3d.js, который каждые 100мс опрашивает устройство и поворачивает схематическую плату в соответствии с положением платы физической.
Читать дальше →
Total votes 12: ↑12 and ↓0 +12
Views 8.9K
Comments 2