Делаем вращательный регулятор.

[EverCelt]

отличный плагин, вот только в опере 9.22 не пашет:-) а в мозилке 3+ пашет… это радует

[Tails]

И в Safari тоже.

[Alert]

тоже что? работает или нет? )
Уточните плз, а то нет возможности (и желания) проверить.

[Yarc]

У меня в Safari на маке работает.

[andreymars]

IE 7 (7.0.5730.13) — не работает. Строка 2705, символ 3: Объект не поддерживает этот метод или свойство.
Firefox 3.0.3 — работает. Opera 9.6 — работает. Safari 3.1.2 — работает. Google Chrome 0.2.149.30 — не работает. Всё на PC.

[Yarc]

Исправил скрипт, теперь работает и в IE 7. Возможно, заработал и в других браузерах. Проверить не могу.

[andreymars]

Да, работает.
Хром не в счет.

[Yarc]

Странно, у меня в Хромом 0.2.149.30 работает.

[hornet]

в Сафари на Маке работает, но вид курсора как для ввода текста становится, не очень подходит…
ну и логически уменьшение-увеличение шрифта нужно поменять — по привычке увеличение идет по часовой стрелке ))

[Vas3K]

Opera 9.6. Все отлично. Спасибо!

[Vorchun]

Тут на Mootools аналогичным способом (крутя стрелки) выбирается время: www.nogray.com/time_picker.php

[alexshelkov]

Гм, совсем не в тему но: вы случайно не знаете где можно скачать это все сезоны этого шоу? Или хотябы какие то сезоны… у меня есть кое что, но там явно не все(всего лишь 29 серий и не очень понятно из каких они сезонов). Была бы идеальна прямая ссылка=)

[alexshelkov]

Чето я куда-то не туда это написал… извиняюсь. Хотя и здесь это тоже «совсем не в тему» =)

[kex]

:)))))

[nooze]

Все хорошо, но его поведение «не адекватное», он не должен кидать значение из максимального в минимальное и обратно при прохождении нулевой позиции. Вы где-то видели такой регулятор громкости? Вот и я нет…

[Ras_Dan]

Вот Вам и домашнее задание :-)

[EverCelt]

может автор использовал плагин ссылку на который указал Vorchun… там часы тоже прокручиваются
задумка с реостатом хорошая, но надо еще доработать

[nooze]

Я не говорю что они должны прокручиваться, просто не должно быть «скачков» с минимума на максимум.

[nooze]

*Я не говорю что они не должны прокручиваться

[Yarc]

Я в самом конце поста признался, что на этом работа не окончена и доработки еще будут. И этот момент также будет дорабатываться.

[EverCelt]

а вы с нуля делали или использовали какие-то чужие наработки?

[Yarc]

С нуля. Вот почему-то взбрело в голову такое сделать. Просто раньше на JavaScript такого не видел. А Vorchun, как оказывается, видел =)

[EverCelt]

ловите плюс в карму:-)

[whiteRed]

а мне кажется, что эта самая нулевая позиция должна быть внизу, в крайнем случае вверху, но никак не справа

[Yarc]

Да, я тоже уже так подумал…

[alnecha]

можно на регулятор поставить ещё «cursor:pointer»

[Alert]

А если вы еще сделаете что бы он на скролл реагировал, вообще супер будет

[Yarc]

В смысле колесико мыши? Да, я собираюсь это делать.

[EverCelt]

думаю, было бы только плюсом, если по нажатии мышки на поле этого реостата, индикатор бы автоматом туда переезжал…
сейчас если только мышкой проведешь, то он переедет

[Yarc]

Хорошее пожелание. Будет.

[Yarc]

Уже переезжает. Скорее всего еще будет анимация.

[wdk]

В музыкальных программах часто делают не так. В Guitar Rig, к примеру, после нажатия мышкой на регулятор, движение вниз уменьшает, а движение вверх — увеличивает значение. Так точнее получается имхо.

[Yarc]

В плане точности — Вы можете отвести курсор при нажатой кнопке сколь угодно далеко и регулировать точнее.

[Nashev]

Это зависит от того, как близко к краю экрана регулятор воткнут.

А мне вот у 3D Studio MAx нравилось — когда у числовых полей стрелки вверх-вниз разделялись строчкой, которую мышью можно было таскать вверх-вниз по экрану, меняя значение на больше-меньшее — так больше всего мне нравилось, что мышь в край экрана не упиралась, а сама перескакивала на другую сторону экрана и позволяла тянуть значение дальше!

Так вот и у таких крутилок — по кругу вокруг них мышь водить это конечно интуитивно, но вот вариант прямолинейного движения с максимальной точностью, но не ограниченный экраном бывает удобнее.

Хотя, для кругового движения по большому радиусу тоже можно попробовать экран замкнуть :) Не глядя на экран двигать будет удобно, а глядя после пары перескоков можно потерять направление. Хотя — это тоже вполне решается рисованием радиус-вектора от регулятора до мыши? с учётом всех перескоков… Но это уже наверно не Java-script

[sindrom]

тупой троль

[kivsiak]

Всегда интересовал вопрос. Зачем нужен такой контрол в компьютерных интерфейсах? Не считая эстетического эффекта конечно.

[Yarc]

Людям, которые работают с «железными» такими регуляторами скорее всего проще понимать таковые программные.

[zfind]

в IE 7 не работает

[Yarc]

Уже должен работать.

[EverCelt]

ЦУП подтверждает: полет в ИЕ7 нормальный

[kex]

Автор, спасибо за топик. На основе этого кода, те кому надо смогут понять как оно впринципе работает и применять там, где им нужно.

[Yarc]

Я этого и пытался добиться ))

[lordmx]

и за это вам большое спасибо!

[Yarc]

Я думал заменить абсолютное изменение угла на приращения. Ввести такую себе величину dφ и смотреть, в какую сторону мы крутим регулятор по знаку этой величины. Как только крутя в одну сторону мы заходим за заданную границу, скрипт это понимает и отказывается двигать регулятор дальше. Это пока только наброски в уме. На выходных допишу.

[omoto]

Зачет

[ArtemS]

Скрипт хорош.
Из возможных улучшений.
— еще не плохо, при вращении, отменить выделение текста.
— возможность поставить фокус и управлять стреклами

Но и без этого пригодиться

[Yarc]

На выходных займусь дописыванием.

[sindrom]

Так вот зачем нужна математика! :)

[FeoOne]

Firefox 3.1a2 — работает, Opera 9.26 — работает, Safari 3.1.2 — работает
всё на маке

[oleganza]

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

Это я все к тому, что я не люблю неудобные глючные вертелки, а люблю удобные и неглючные. Не делайте так, как описано в этой статье.

[oleganza]

А еще круглая ручка занимает меньше места.

[muradali]

я думаю что если такой регулятор крутить колесом мыши, то это удобно

с другой стороны почему тогда на микшерских пультах основная настройка, а именно громкость всегда выполняется в виде ползунка?

можно сказать конечно, что так более наглядно?
я бы сказал что если можно упереть руку то ползунок нагляден и удобен одновременно

[oleganza]

Колесом мыши крутить, конечно, можно. Только оно крутится не в той плоскости, что ручка на экране, так что вариант не катит.
А вообще, единственный способ проверить удобство — сделать несколько вариантов и поиграться с ними на реальном макете. Всё остальное — домыслы. Неудобство любых круглых ручек в компьютерных интерфейсах я уже успел проверить на себе. Потому и предостерегаю модных джаваскриптеров от дурацкого времяпрепровождения.

[Nashev]

Просто пачка таких движков на пульте микшера существенно нагляднее — оно ж столбцовая диаграмма сам по себе. И там есть куда пальцам рядом с движком опереться, оно ж обычно более горизонтальное, так что помогая в одном, в другом не мешает.

[ptiss]

Поддерживаю. Довелось мне тут недавно видеть такое решение в виде скина к аудиоплееру — неудобно! Так что не тратьте время зря.

[not_ice]

я бы крутилку вешал не на 2 дива а на инпут. ну так, на всякий пожарный )

[Yarc]

А можно поподробнее? Это для того, чтобы табом можно было переходить?

[not_ice]

в принципе и это тоже.
а вообще, если через крутилку предполагается ввод какого-то параметра, то он должен в идеале работать хоть как-то и без поддержки яваскрипта.
ну и так как-то семантичнее что-ли :)

[taliban]

за такой пост можно и по карме плюсиком схлопотать… биг сенкс

[vbif]

А ещё можно сделать валкодер, как в радиопередатчике. Позволит быстро, удобно и точно подстроить частоту. Даже слишком большой динамический диапазон получается. Причём, чем больше разрешение экрана, тем больше точность…

[zzzzzzz]

Было бы замечательно, если бы узел тени был острее.
А не сделать бы Вам выбор цвета при помощи трех таких регуляторов?

[nertz]

Думаю привычнее будет чтобы при вращение по часовой стрелке шрифт увеличивался, а не наоборот.

[Yarc]

Я еще введу параметр, который позволит развернуть шкалу в любом направлении.

[hmelyoff]

Как уже говорили:
Точку мин/макс вниз или вверх (отметить его как-то графически что-ли)
Убрать скачек в это точке (довольно легко делается на самом деле)
Курсор хорошо бы сделать «руку» при наведении и вращании
При зажатом Ctrl (Alt) сделать изменение по движению влево/вправо (вверх/вниз), для тех кому удобнее.
Изменение значения по колесику мышки (если скролла на странице нет естественно)
Про стрелки — спорно, лучше поставить рядом инпут и дать ввести число в этом случае.

А вращение по эллипсу было бы еще круче, ни к чему, но круто ;)

[roller]

в центре лучше сделать мертвую зону (круглую) иначе слишком большой диапазон приходится на слишком маленькую окружность и значение меняется резко и непредсказуемо

[serega011]

Вот это: var mouseTop = this.offset.y — e.client.y + containerPosition.y;
Следует заменить на: var mouseTop = this.offset.y — e.page.y + containerPosition.y;

А то скроллинг страницы не учитывался и крутилка вела себя неадекватно.

[Yarc]

Спасибо, учтем.

[Methos]

Не работает демка.