Pull to refresh

Comments 67

Господа, если вы минусуете, то потрудидесь хотя бы в двух словах написать, что не так, по вашему мнению. Спасибо заранее.
Минусуют, наверное, потому что считают, что уже есть куча подобных примеров.
Но т.к. сам не так давно искал подобный контрол и убедился, что толковых не так много, добавил пост в избранное.
От себя в пост бы добавил изображения контрола и некоторую техническую информацию по его разработке и использованию.
Спасибо за рекомендации. Воспользовался вашим советом :)
Лучше расскажите как делали — какой фреймворк применяли и почему, как сделали анимацию, какие оптимизации и т.д.
Никаких фреймворков не применял — это оверхед для меня. Чиcтое Canvas 2D API для JS. Анимация методом перерисовки всего канваса. Оптимизаций пока не проводил. Текущая рабочая идея — рисовать подложку первый раз, потом отрисовывать как готовое изображение, рисовать при анимации в этом случае придется только стрелку и циферблат. Пока исследую эффестивность и работоспособность — не все гладко…
Что за оверхед от фреймворков?
Что «не гладко»? Именно так и надо делать.
Сам по себе фреймворк — оверхед в виде пачки кода. Если бы я делал библиотеку из овер 9000 компонентов — бон был бы нужен. Один контрол будет без фреймворка по кол-ву кода будет компактнее самого фреймворка. Поэтому я не нашел сакрального смысла в использовании какого-то фреймворка.

«Не гладко» — значит не работает покамест так как ожидается. Как только добьюсь положительного результата — будет сделан коммит.
Как-то вы очень агрессивно отвечаете.

Кешируйте вектр в растр — будет работать отлично. Проверено на практике.
TheShock, вам показалось. Я спокоен как слон. :) Если чем задел — простите.
Да я именно так и пытаюсь делать. Но есть 2 способа. Может вы поделитесь опытом какой эффективнее:

1. getImageData/putImageData — кешируем пиксели — пишем пиксели
2. создаем скрытый img c src= canvas.toDataURL(). Потом отрисовываем подложку с помощью drawImage() из этой картинки.

Проблемы у меня локального характера. В некоторых браузерах у меня проблемы с координатами при вызове get/put из первого способа. Т.е. не везде работает одинаково. Почему пока не разобрался.

Вот и славно, что спросили. Вы не учитываете третий, самый правильный способ — создать холст и отрисовывать потом холст как картинку:

// кешируем:
var cache = document.createElement('canvas');
cache.width  = 128;
cache.height= 128;
drawTo( cache.getContext('2d') );

// отрисовываем из кеша:
targetCtx.drawImage( cache, 150, 150 );
Отличная идея. Благодарю. Сейчас попробуем.
Способ рабочий. Единственно, что требует вставку кеширующего холста в DOM, иначе получаю глюки с отрисовкой текстовых элементов (Chrome 17, Ubuntu). В других браузерах пока не тестил. Кстати, чем это эффективней способа со скрытой картинкой и попиксельной отрисовкой? Вы тестировали?
Вопрос 23 и 26: habrahabr.ru/post/119772/
Странно, у меня никогда не было глюков с отрисовкой текстовых элементов, хотя я регулярно использую бек-буффер.
Сделал оптимизацию по вашему рецепту. Тем не менее глюк с текстовыми элементами присутствует. Могу сделать скриншот, если очень хотите увидеть. Вылечил именно реальной вставкой холста в DOM.
Пожалуйста: ru.smart-ip.net/gauge2.html
Разница только в том, что кеширующий холст не вставлен в DOM (закомментировано 2 строчки)
Проблема в использовании «em» здесь:
ctx.font = (0.7 * max / 100) + "em Arial";

em — относительная величина и размер считается относительно размера родителя. Родителя нету — размер нулевой.

Вы рисуете на пиксельном холсте и потому измеряйте в пикселях)
Спасибо. Сейчас подфиксим.
UFO landed and left these words here
А где вам по ссылке необходима putImageData?
И кстати, «все эффекты сразу» почему-то не работают (
А ничего, что проц на 70-80 процентов грузится?
У меня не грузится. Что у вас за конфигурация?
На Макинтоше в Хроме эта вкладка испльзует 11% ЦПУ, а вкладка с тремя счетчиками 40% и вроде не тормозит, нормально работает.
Кстати красиво получилось
У меня 20-25% загрузка. Процессор E6500 — весьма средний по сегодняшним меркам.
Q6600, Opera 11, 7-8% загрузки. Открыто еще несколько вкладок, правда.
Выглядит замечательно!

Но лицензия GPL исключает практическое использование этого кода. :( Давайте мож MIT/BSD или хотябы LGPL?
Давайте. Изменил на MIT. Спасибо за поправку. На самом деле — нет жалания ограничиать кого-бы то ни было в использовании. Тем более в практическом.
Отлично, спасибо! Буду использовать. Проект, к сожалению, внутренний, поэтому показать нечего. :)
Неплохо! В свое время на проекте надо было прикрутить такую штуку, единственное приемлемое решение было от гугла, но там юзается SVG+VML.

Хотя всё же не очень нравится когда в канвасе шрифты отличаются сглаживанием от шрифтов на странице.
Да, понимаю вас, сам начал именно с решения от Google. Потом осознал, что оно не будет работать нормально в Android 2.x и, после поисков, осознал, что придется писать свое.
Зато оно работает в Firefox 3.6, а Ваше — нет. Конечно, кому сейчас нужен Fx3.6? Но вот нам именно он-то и нужен, таковы условия разработки.
А теперь? Попробуйте открыть пример еще раз. Все работает?
Визуально теперь всё ОК. Добавлю статью в закладки, возможно, пригодится. Спасибо за заботу.
А зачем нужен Fx 3.6? Уже вышло 7 новых версий файрфокса.
Видать у людей корпоративная система заточенная под эту версию. Кстати, вся проблема была только в том, что context.arc() метод требует обязательного наличия параметра clockwise, который в спеке определен как опциональный. Но ФФ3.6 выкидывает ексепшн Too few arguments. Just FYI.
Потому что он сертифицирован для использования в Минобороне.
Интернетометр сказал мне, что у меня на скачивание 35.73 Мбит/с при активном канале в 2Мбит. Врет однако, speedtest показывает более адекватный результат.
Спасибо за отчет. Это бета. Все еще работаем, проблемы имеют место быть. Если не сложно попробуйте перемерить несколько раз пе ред каждым измерением обновляя страницу. Скажите — как часто выдает заведомо завышенные результаты?
Раз 5 попробовал. 2 раза результат был завышен. Причем, долго показывает реальные цифры, потом резкий скачек и у меня скоростной интернет ))
Спасибо огромное. Это очень не просто протестировать все на каналах разной толщины. Беру ваш отчет в оборот.
Еще в том же «Интернетометре» смущают надписи на датчиках — «Скачивание» и «Загрузка». Не сразу понял что есть что :)

Наверно было бы логичнее использовать антонимы («Скачивание»/«Закачивание» или «Загрузка»/«Отправка»).
Speedtest показывает скорость до ближайшей точки.
В интернете нет «адекватного» результата т.к. Вам провайдер дает доступ в интранет и через нее в интернет, а вот какие провайдеры дают доступ в интернет этому провайдеру и главное как — уже большой вопрос.
В Speedtest можно выбрать сервер. До ближайшего у меня честные 100Мбит/с. Я намеренно выбрал сервер где-то в Киеве.
UFO landed and left these words here
Эх… попробуй выдержать всех вас :) Сервер у меня дохленький совсем…
Разгрузил немного — должен работать теперь (пришлось временно остановить один сервис)
Прикольный эффект — кажется, что цифры на жк дисплее имеют наклон влево.
У замечательной библиотеки jqPlot есть куча рендерреров, не говоря уже о механизме их написания. Там так же есть рендеррер, позволяющий сделать из графика спидометр.
Не нашел в примерах. Можете дать ссылку? Анимацию поддерживает?
Вот здесь можно посмотреть нативный пример, который можно допилить по собственным нуждам как угодно :)
www.jqplot.com/deploy/dist/examples/meterGauge.html

Если под анимацией подразумевается динамическая перерисовка графика по таймауту — то да, у меня на проекте такое реализовал как раз недавно.
Спасибо, интересно. Хотя и не совсем то, что мне нужно. Как я понял для приведения к нужному виду придется написать свой рендерер. Но библиотека действительно интересная. Спасибо за ссылку.
Да, придется писать свой. Но в этом и прелесть данной библиотеке, в такой возможности. Хотя для большинства задач она слишком навороченная, там одних только настроек на целый txt файл.
Если придется писать свой, то по объему это сопоставимо с проделанной работой. Я вот и написал свой. Вне контекста какой-либо библиотеки, так как мне нужен только один контрол. Но если нужно будет написать 100+ контролов, такая библиотека просто супер.
В чём-то даже проделанная Вами работа выигрывает — писать с нуля и только для себя в общем-то и проще, и быстрее, как мне кажется.
Ссылкой я поделился не из принципа «зачем писать велосипед», а из принципа «может быть кому-то пригодится» :)
Да, я просто пытаюсь выставить факт отсутсвия каких-либо библиотек, как достоинство своего решения. :D Для тех, кто читает. Я не спорю с вами, и, действительно, нахожу вашу ссылку интересной :)
Красиво. Я помню, насколько было трудно сделать похожее в 2009г. в OpenLaszlo )
Совместимость с какими браузерами?

В setInterval по умолчанию 15 миллисекунд если поставить, то по идее сильной разницы не будет, а процессор разгрузите, щас стабильно 20 съедает.
Эта опция отдана на откуп пользователю — можете конфигурировать кол-во миллисекунд по собственному усмотрению
> Совместимость с какими браузерами?

По-идее со всеми, которые поддерживают HTML5 и canvas
А зачем вы в конце каждого метода делаете?
ctx.restore();
ctx.save();
Так там еще есть много мест где подчистить код не будет лишним. Ну и в множестве случаем ctx.restore() необходим, так как при прорисовке приходится канву вертеть в разные стороны.
корректно будет «оборачивать» метод. как-то так:
method: function () {
  ctx.save();
  // change ctx
  ctx.restore();
}
Скажите, Ваш CanvGauge не навеян вот этим Aqua Gauge ? Я просто сам недавно переписывал его под две стрелки для использования как измеритель In и Out траффика. Там изначально автор использует лицензию MIT.
Нет, я до этого Aqua Gauge не встречал. Т.к. если бы встретил — вряд ли бы писал свой :) Спасибо за ссылку. Поковырял. Нравится :) Только анимации не хватает. Наверное воьзму пару идей оттуда к себе. Еще раз спасибо за ссылку.
Кстати, лицензия там не MIT, а CPOL
Only those users with full accounts are able to leave comments. Log in, please.