Comments 67
Господа, если вы минусуете, то потрудидесь хотя бы в двух словах написать, что не так, по вашему мнению. Спасибо заранее.
Минусуют, наверное, потому что считают, что уже есть куча подобных примеров.
Но т.к. сам не так давно искал подобный контрол и убедился, что толковых не так много, добавил пост в избранное.
От себя в пост бы добавил изображения контрола и некоторую техническую информацию по его разработке и использованию.
Но т.к. сам не так давно искал подобный контрол и убедился, что толковых не так много, добавил пост в избранное.
От себя в пост бы добавил изображения контрола и некоторую техническую информацию по его разработке и использованию.
Спасибо за рекомендации. Воспользовался вашим советом :)
Лучше расскажите как делали — какой фреймворк применяли и почему, как сделали анимацию, какие оптимизации и т.д.
Никаких фреймворков не применял — это оверхед для меня. Чиcтое Canvas 2D API для JS. Анимация методом перерисовки всего канваса. Оптимизаций пока не проводил. Текущая рабочая идея — рисовать подложку первый раз, потом отрисовывать как готовое изображение, рисовать при анимации в этом случае придется только стрелку и циферблат. Пока исследую эффестивность и работоспособность — не все гладко…
Что за оверхед от фреймворков?
Что «не гладко»? Именно так и надо делать.
Что «не гладко»? Именно так и надо делать.
Сам по себе фреймворк — оверхед в виде пачки кода. Если бы я делал библиотеку из овер 9000 компонентов — бон был бы нужен. Один контрол будет без фреймворка по кол-ву кода будет компактнее самого фреймворка. Поэтому я не нашел сакрального смысла в использовании какого-то фреймворка.
«Не гладко» — значит не работает покамест так как ожидается. Как только добьюсь положительного результата — будет сделан коммит.
«Не гладко» — значит не работает покамест так как ожидается. Как только добьюсь положительного результата — будет сделан коммит.
Как-то вы очень агрессивно отвечаете.
Кешируйте вектр в растр — будет работать отлично. Проверено на практике.
Кешируйте вектр в растр — будет работать отлично. Проверено на практике.
TheShock, вам показалось. Я спокоен как слон. :) Если чем задел — простите.
Да я именно так и пытаюсь делать. Но есть 2 способа. Может вы поделитесь опытом какой эффективнее:
1. getImageData/putImageData — кешируем пиксели — пишем пиксели
2. создаем скрытый img c src= canvas.toDataURL(). Потом отрисовываем подложку с помощью drawImage() из этой картинки.
Проблемы у меня локального характера. В некоторых браузерах у меня проблемы с координатами при вызове get/put из первого способа. Т.е. не везде работает одинаково. Почему пока не разобрался.
Да я именно так и пытаюсь делать. Но есть 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 строчки)
Разница только в том, что кеширующий холст не вставлен в DOM (закомментировано 2 строчки)
UFO just landed and posted this here
А ничего, что проц на 70-80 процентов грузится?
У меня не грузится. Что у вас за конфигурация?
А если только один экземпляр на странице: smart-ip.net/gauge1.html — эффект тот же?
У меня 20-25% загрузка. Процессор E6500 — весьма средний по сегодняшним меркам.
Q6600, Opera 11, 7-8% загрузки. Открыто еще несколько вкладок, правда.
Выглядит замечательно!
Но лицензия GPL исключает практическое использование этого кода. :( Давайте мож MIT/BSD или хотябы LGPL?
Но лицензия GPL исключает практическое использование этого кода. :( Давайте мож MIT/BSD или хотябы LGPL?
Неплохо! В свое время на проекте надо было прикрутить такую штуку, единственное приемлемое решение было от гугла, но там юзается 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 показывает скорость до ближайшей точки.
В интернете нет «адекватного» результата т.к. Вам провайдер дает доступ в интранет и через нее в интернет, а вот какие провайдеры дают доступ в интернет этому провайдеру и главное как — уже большой вопрос.
В интернете нет «адекватного» результата т.к. Вам провайдер дает доступ в интранет и через нее в интернет, а вот какие провайдеры дают доступ в интернет этому провайдеру и главное как — уже большой вопрос.
UFO just landed and posted this here
Прикольный эффект — кажется, что цифры на жк дисплее имеют наклон влево.
У замечательной библиотеки jqPlot есть куча рендерреров, не говоря уже о механизме их написания. Там так же есть рендеррер, позволяющий сделать из графика спидометр.
Не нашел в примерах. Можете дать ссылку? Анимацию поддерживает?
Вот здесь можно посмотреть нативный пример, который можно допилить по собственным нуждам как угодно :)
www.jqplot.com/deploy/dist/examples/meterGauge.html
Если под анимацией подразумевается динамическая перерисовка графика по таймауту — то да, у меня на проекте такое реализовал как раз недавно.
www.jqplot.com/deploy/dist/examples/meterGauge.html
Если под анимацией подразумевается динамическая перерисовка графика по таймауту — то да, у меня на проекте такое реализовал как раз недавно.
Спасибо, интересно. Хотя и не совсем то, что мне нужно. Как я понял для приведения к нужному виду придется написать свой рендерер. Но библиотека действительно интересная. Спасибо за ссылку.
Да, придется писать свой. Но в этом и прелесть данной библиотеке, в такой возможности. Хотя для большинства задач она слишком навороченная, там одних только настроек на целый txt файл.
Если придется писать свой, то по объему это сопоставимо с проделанной работой. Я вот и написал свой. Вне контекста какой-либо библиотеки, так как мне нужен только один контрол. Но если нужно будет написать 100+ контролов, такая библиотека просто супер.
Красиво. Я помню, насколько было трудно сделать похожее в 2009г. в OpenLaszlo )
Совместимость с какими браузерами?
В setInterval по умолчанию 15 миллисекунд если поставить, то по идее сильной разницы не будет, а процессор разгрузите, щас стабильно 20 съедает.
В setInterval по умолчанию 15 миллисекунд если поставить, то по идее сильной разницы не будет, а процессор разгрузите, щас стабильно 20 съедает.
А зачем вы в конце каждого метода делаете?
ctx.restore();
ctx.save();Скажите, Ваш CanvGauge не навеян вот этим Aqua Gauge ? Я просто сам недавно переписывал его под две стрелки для использования как измеритель In и Out траффика. Там изначально автор использует лицензию MIT.
Sign up to leave a comment.
CanvGauge — измерительный прибор с помощью canvas для HTML5