CanvGauge — измерительный прибор с помощью canvas для HTML5

[Mikhus]

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

[SergeiStartsev]

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

[Mikhus]

Спасибо за рекомендации. Воспользовался вашим советом :)

[TheShock]

Лучше расскажите как делали — какой фреймворк применяли и почему, как сделали анимацию, какие оптимизации и т.д.

[Mikhus]

Никаких фреймворков не применял — это оверхед для меня. Чиcтое Canvas 2D API для JS. Анимация методом перерисовки всего канваса. Оптимизаций пока не проводил. Текущая рабочая идея — рисовать подложку первый раз, потом отрисовывать как готовое изображение, рисовать при анимации в этом случае придется только стрелку и циферблат. Пока исследую эффестивность и работоспособность — не все гладко…

[TheShock]

Что за оверхед от фреймворков?
Что «не гладко»? Именно так и надо делать.

[Mikhus]

Сам по себе фреймворк — оверхед в виде пачки кода. Если бы я делал библиотеку из овер 9000 компонентов — бон был бы нужен. Один контрол будет без фреймворка по кол-ву кода будет компактнее самого фреймворка. Поэтому я не нашел сакрального смысла в использовании какого-то фреймворка.

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

[TheShock]

Как-то вы очень агрессивно отвечаете.

Кешируйте вектр в растр — будет работать отлично. Проверено на практике.

[Mikhus]

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

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

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

[TheShock]

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

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

// отрисовываем из кеша:
targetCtx.drawImage( cache, 150, 150 );

[Mikhus]

Отличная идея. Благодарю. Сейчас попробуем.

[Mikhus]

Способ рабочий. Единственно, что требует вставку кеширующего холста в DOM, иначе получаю глюки с отрисовкой текстовых элементов (Chrome 17, Ubuntu). В других браузерах пока не тестил. Кстати, чем это эффективней способа со скрытой картинкой и попиксельной отрисовкой? Вы тестировали?

[TheShock]

Вопрос 23 и 26: habrahabr.ru/post/119772/
Странно, у меня никогда не было глюков с отрисовкой текстовых элементов, хотя я регулярно использую бек-буффер.

[Mikhus]

Сделал оптимизацию по вашему рецепту. Тем не менее глюк с текстовыми элементами присутствует. Могу сделать скриншот, если очень хотите увидеть. Вылечил именно реальной вставкой холста в DOM.

[TheShock]

лучше пример

[Mikhus]

Пожалуйста: ru.smart-ip.net/gauge2.html
Разница только в том, что кеширующий холст не вставлен в DOM (закомментировано 2 строчки)

[TheShock]

Проблема в использовании «em» здесь:

ctx.font = (0.7 * max / 100) + "em Arial";

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

Вы рисуете на пиксельном холсте и потому измеряйте в пикселях)

[Mikhus]

Спасибо. Сейчас подфиксим.

[TheShock]

А где вам по ссылке необходима putImageData?
И кстати, «все эффекты сразу» почему-то не работают (

[deser]

А ничего, что проц на 70-80 процентов грузится?

[Mikhus]

У меня не грузится. Что у вас за конфигурация?

[Mikhus]

А если только один экземпляр на странице: smart-ip.net/gauge1.html — эффект тот же?

[peanut]

На Макинтоше в Хроме эта вкладка испльзует 11% ЦПУ, а вкладка с тремя счетчиками 40% и вроде не тормозит, нормально работает.
Кстати красиво получилось

[dom1n1k]

У меня 20-25% загрузка. Процессор E6500 — весьма средний по сегодняшним меркам.

[AlexanderG]

Q6600, Opera 11, 7-8% загрузки. Открыто еще несколько вкладок, правда.

[egorF]

Выглядит замечательно!

Но лицензия GPL исключает практическое использование этого кода. :( Давайте мож MIT/BSD или хотябы LGPL?

[Mikhus]

Давайте. Изменил на MIT. Спасибо за поправку. На самом деле — нет жалания ограничиать кого-бы то ни было в использовании. Тем более в практическом.

[egorF]

Отлично, спасибо! Буду использовать. Проект, к сожалению, внутренний, поэтому показать нечего. :)

[extensible]

Неплохо! В свое время на проекте надо было прикрутить такую штуку, единственное приемлемое решение было от гугла, но там юзается SVG+VML.

Хотя всё же не очень нравится когда в канвасе шрифты отличаются сглаживанием от шрифтов на странице.

[Mikhus]

Да, понимаю вас, сам начал именно с решения от Google. Потом осознал, что оно не будет работать нормально в Android 2.x и, после поисков, осознал, что придется писать свое.

[torbasow]

Зато оно работает в Firefox 3.6, а Ваше — нет. Конечно, кому сейчас нужен Fx3.6? Но вот нам именно он-то и нужен, таковы условия разработки.

[Mikhus]

А теперь? Попробуйте открыть пример еще раз. Все работает?

[torbasow]

Визуально теперь всё ОК. Добавлю статью в закладки, возможно, пригодится. Спасибо за заботу.

[TheShock]

А зачем нужен Fx 3.6? Уже вышло 7 новых версий файрфокса.

[Mikhus]

Видать у людей корпоративная система заточенная под эту версию. Кстати, вся проблема была только в том, что context.arc() метод требует обязательного наличия параметра clockwise, который в спеке определен как опциональный. Но ФФ3.6 выкидывает ексепшн Too few arguments. Just FYI.

[torbasow]

Потому что он сертифицирован для использования в Минобороне.

[Anonym]

Интернетометр сказал мне, что у меня на скачивание 35.73 Мбит/с при активном канале в 2Мбит. Врет однако, speedtest показывает более адекватный результат.

[Mikhus]

Спасибо за отчет. Это бета. Все еще работаем, проблемы имеют место быть. Если не сложно попробуйте перемерить несколько раз пе ред каждым измерением обновляя страницу. Скажите — как часто выдает заведомо завышенные результаты?

[Anonym]

Раз 5 попробовал. 2 раза результат был завышен. Причем, долго показывает реальные цифры, потом резкий скачек и у меня скоростной интернет ))

[Mikhus]

Спасибо огромное. Это очень не просто протестировать все на каналах разной толщины. Беру ваш отчет в оборот.

[veocode]

Еще в том же «Интернетометре» смущают надписи на датчиках — «Скачивание» и «Загрузка». Не сразу понял что есть что :)

Наверно было бы логичнее использовать антонимы («Скачивание»/«Закачивание» или «Загрузка»/«Отправка»).

[equand]

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

[Anonym]

В Speedtest можно выбрать сервер. До ближайшего у меня честные 100Мбит/с. Я намеренно выбрал сервер где-то в Киеве.

[Mikhus]

Эх… попробуй выдержать всех вас :) Сервер у меня дохленький совсем…

[Mikhus]

Разгрузил немного — должен работать теперь (пришлось временно остановить один сервис)

[sith]

Прикольный эффект — кажется, что цифры на жк дисплее имеют наклон влево.

[Aliance]

У замечательной библиотеки jqPlot есть куча рендерреров, не говоря уже о механизме их написания. Там так же есть рендеррер, позволяющий сделать из графика спидометр.

[Mikhus]

Не нашел в примерах. Можете дать ссылку? Анимацию поддерживает?

[Aliance]

Вот здесь можно посмотреть нативный пример, который можно допилить по собственным нуждам как угодно :)
www.jqplot.com/deploy/dist/examples/meterGauge.html

Если под анимацией подразумевается динамическая перерисовка графика по таймауту — то да, у меня на проекте такое реализовал как раз недавно.

[Mikhus]

Спасибо, интересно. Хотя и не совсем то, что мне нужно. Как я понял для приведения к нужному виду придется написать свой рендерер. Но библиотека действительно интересная. Спасибо за ссылку.

[Aliance]

Да, придется писать свой. Но в этом и прелесть данной библиотеке, в такой возможности. Хотя для большинства задач она слишком навороченная, там одних только настроек на целый txt файл.

[Mikhus]

Если придется писать свой, то по объему это сопоставимо с проделанной работой. Я вот и написал свой. Вне контекста какой-либо библиотеки, так как мне нужен только один контрол. Но если нужно будет написать 100+ контролов, такая библиотека просто супер.

[Aliance]

В чём-то даже проделанная Вами работа выигрывает — писать с нуля и только для себя в общем-то и проще, и быстрее, как мне кажется.
Ссылкой я поделился не из принципа «зачем писать велосипед», а из принципа «может быть кому-то пригодится» :)

[Mikhus]

Да, я просто пытаюсь выставить факт отсутсвия каких-либо библиотек, как достоинство своего решения. :D Для тех, кто читает. Я не спорю с вами, и, действительно, нахожу вашу ссылку интересной :)

[lazil]

Красиво. Я помню, насколько было трудно сделать похожее в 2009г. в OpenLaszlo )

[cybernetic]

Совместимость с какими браузерами?

В setInterval по умолчанию 15 миллисекунд если поставить, то по идее сильной разницы не будет, а процессор разгрузите, щас стабильно 20 съедает.

[Mikhus]

Эта опция отдана на откуп пользователю — можете конфигурировать кол-во миллисекунд по собственному усмотрению

[Mikhus]

> Совместимость с какими браузерами?

По-идее со всеми, которые поддерживают HTML5 и canvas

[TheShock]

А зачем вы в конце каждого метода делаете?

ctx.restore();
ctx.save();

[Mikhus]

Так там еще есть много мест где подчистить код не будет лишним. Ну и в множестве случаем ctx.restore() необходим, так как при прорисовке приходится канву вертеть в разные стороны.

[TheShock]

корректно будет «оборачивать» метод. как-то так:

method: function () {
  ctx.save();
  // change ctx
  ctx.restore();
}

[Mikhus]

Логично. сделаем

[manro]

Скажите, Ваш CanvGauge не навеян вот этим Aqua Gauge ? Я просто сам недавно переписывал его под две стрелки для использования как измеритель In и Out траффика. Там изначально автор использует лицензию MIT.

[Mikhus]

Нет, я до этого Aqua Gauge не встречал. Т.к. если бы встретил — вряд ли бы писал свой :) Спасибо за ссылку. Поковырял. Нравится :) Только анимации не хватает. Наверное воьзму пару идей оттуда к себе. Еще раз спасибо за ссылку.

[Mikhus]

Кстати, лицензия там не MIT, а CPOL