Выдался ещё один свободный вечер, сегодня будем делать полноценный resizable в любую сторону для любых элементов (div, изображений, чего угодно) на чистом JavaScript.
Демо-страничка: Resizable.js
Подход №0
Сделать восемь висячих дивов-ресайзеров: четыре из них — полоски по вдоль боков элемента, ещё четыре — по углам. При ресайзе изменять размеры элемента, а также тащить дивы-ресайзеры.
Минусы очевидны:
Подход №1
При mousemove элемента проверять, не находится ли курсор у края элемента. Если да, назначаем соответствующий стиль курсора (например, при наведении на верхний правый край будет ne-resize), если нет — назначаем курсор default.
При mousedown элемента делаем такую же проверку. Если да — начинаем ресайз в нужную сторону, если нет — ничего не делаем.
Пишем вспомогательную функцию direction(), которая и будет определять, на каком крае элемента находится курсор. Она будет возвращать либо число от 0 до 7 (0 — ресайз вверх, 1 — вправо и т.д.; 4 — ресайз вверх и вправо, 5 — вправо и вниз и т.д. по часовой стрелке). Если 8 — курсор не у края элемента, ресайз не начинать.
Названия аргументов говорят за себя: elem — элемент, подлежащий ресайзингу, event — объект события mousemove или mousedown элемента, а pad — максимальный отступ от границ в пикселях (по умолчанию 4px), при котором можно начинать ресайз. Т.е. при наведении мышью ближе чем на 4 пикселя к краю изменится курсор и при нажатии мыши начнётся ресайз.
Отталкиваясь от размеров и координат элемента, а также от координат события, выясняем у какого края находится курсор:
Это ещё не всё — надо также учесть ресайз по диагонали:
Введём вспомогательную переменную для назначения стиля курсора. Она понадобится нам в дальнейшем.
Теперь приступим непосредственно к написанию кода Resizable().
Здесь max и min — максимальные и минимальные размеры элемента, а allow — разрешённые направления (например, значение «11110000» запретит ресайз по диагонали).
Меняем курсор при наведении мышки близко к краю:
При mousedown элемента вызываем функцию resizeStart, код которой будет дальше. Также запрещаем выделение текста при ресайзе.
Значения options уже не будут доступны в resizeStart, поэтому закэшируем их, чтобы пользоваться в будущем.
Половина работы уже сделана — осталось только менять размеры элемента, основываясь на direction(). С ресайзом вправо и вниз всё просто — надо лишь менять высоту и ширину, а вот при ресайзе вверх и влево придётся менять и координаты элемента. Но обо всём по порядку.
Последний рубеж — внутренняя функция resize(), которая и будет осуществлять всю работу.
Дополнительные ограничения: при ресайзе сверху вниз либо справа влево при достижении минимальной высоты либо ширины соотвественно, элемент начинает сдвигаться вниз либо вправо без изменения размеров. Поэтому делаем такую проверку:
Также проверяем, если достигнут минимальный или максимальный размер:
Не знаю, можно ли это было сделать элегантнее… В любом случае, надо работать и с размером элемента, и с его координатами, и с координатами события, и всё это опираясь на результат direction(), да ещё и с учётом мин./макс. размеров.
В общем, плагин готов. Исходник на js здесь, а пример работы как всегда в самом начале.
Демо-страничка: Resizable 2.0
Принцип работы схож, только ресайзится не сам элемент, а создаваемый див:
В if-ах, написанных выше, вместо elem будет helper.
При mouseup документа анимируем элемент до размеров хелпера, а хелпер удаляем:
Вот впрочем и всё, что я хотел сказать.
Демо-страничка: Resizable.js
Подход №0
Сделать восемь висячих дивов-ресайзеров: четыре из них — полоски по вдоль боков элемента, ещё четыре — по углам. При ресайзе изменять размеры элемента, а также тащить дивы-ресайзеры.
Минусы очевидны:
- Много повторяющегося кода
- Неудобно: придётся работать и с элементом, и с ресайзерами
- Просто стыдно показывать кому-то такой скрипт
Подход №1
При mousemove элемента проверять, не находится ли курсор у края элемента. Если да, назначаем соответствующий стиль курсора (например, при наведении на верхний правый край будет ne-resize), если нет — назначаем курсор default.
При mousedown элемента делаем такую же проверку. Если да — начинаем ресайз в нужную сторону, если нет — ничего не делаем.
Пишем вспомогательную функцию direction(), которая и будет определять, на каком крае элемента находится курсор. Она будет возвращать либо число от 0 до 7 (0 — ресайз вверх, 1 — вправо и т.д.; 4 — ресайз вверх и вправо, 5 — вправо и вниз и т.д. по часовой стрелке). Если 8 — курсор не у края элемента, ресайз не начинать.
function direction( elem, event, pad ) {
var res = 8;
var pad = pad || 4;
var pos = elem.getBoundingClientRect();
var top = pos.top;
var left = pos.left;
var width = elem.clientWidth;
var height = elem.clientHeight;
var eTop = event.clientY;
var eLeft = event.clientX;
// [...]
Названия аргументов говорят за себя: elem — элемент, подлежащий ресайзингу, event — объект события mousemove или mousedown элемента, а pad — максимальный отступ от границ в пикселях (по умолчанию 4px), при котором можно начинать ресайз. Т.е. при наведении мышью ближе чем на 4 пикселя к краю изменится курсор и при нажатии мыши начнётся ресайз.
Отталкиваясь от размеров и координат элемента, а также от координат события, выясняем у какого края находится курсор:
var isTop = eTop - top < pad;
var isRight = left + width - eLeft < pad;
var isBottom = top + height - eTop < pad;
var isLeft = eLeft - left < pad;
if ( isTop ) res = 0;
if ( isRight ) res = 1;
if ( isBottom ) res = 2;
if ( isLeft ) res = 3;Это ещё не всё — надо также учесть ресайз по диагонали:
if ( isTop && isRight ) res = 4;
if ( isRight && isBottom ) res = 5;
if ( isBottom && isLeft ) res = 6;
if ( isLeft && isTop ) res = 7;
return res; // если ни одно из условий не сработает,
// то res так и останется 8Введём вспомогательную переменную для назначения стиля курсора. Она понадобится нам в дальнейшем.
var cursors = "n w s e ne se sw nw".split(" ");Теперь приступим непосредственно к написанию кода Resizable().
function Resizable( elem, options ) {
options = options || {};
options.max = options.max || [1E17, 1E17];
options.min = options.min || [10, 10];
options.allow = (options.allow || "11111111").split("");
// [...]
Здесь max и min — максимальные и минимальные размеры элемента, а allow — разрешённые направления (например, значение «11110000» запретит ресайз по диагонали).
Меняем курсор при наведении мышки близко к краю:
elem.addEventListener( "mousemove", function ( e ) {
var dir = direction( this, e );
if ( options.allow[dir] == "0" ) return;
this.style.cursor = dir == 8 ? "default" : cursors[ dir ] + "-resize";
// вот и пригодилась cursors
} );При mousedown элемента вызываем функцию resizeStart, код которой будет дальше. Также запрещаем выделение текста при ресайзе.
elem.addEventListener( "mousedown", resizeStart );
document.body.onselectstart = function (e) { return false };Значения options уже не будут доступны в resizeStart, поэтому закэшируем их, чтобы пользоваться в будущем.
elem.min = options.min;
elem.max = options.max;
elem.allow = options.allow;
elem.pos = elem.getBoundingClientRect();Половина работы уже сделана — осталось только менять размеры элемента, основываясь на direction(). С ресайзом вправо и вниз всё просто — надо лишь менять высоту и ширину, а вот при ресайзе вверх и влево придётся менять и координаты элемента. Но обо всём по порядку.
function resizeStart( ev ) {
var dir = direction( this, ev ); // вычисляем направление
if ( this.allow[dir] == "0" ) return; // если направление не разрешено, отменяем ресайз
document.documentElement.style.cursor = this.style.cursor = cursors[ dir ] + "-resize";
var pos = this.getBoundingClientRect();
var elem = this; // для работы в mousemove документа
var height = this.clientHeight;
var width = this.clientWidth;
// при каждом движении мыши на документе будет
// срабатывать resize(). Её определение будет ниже.
document.addEventListener( "mousemove", resize );
// при отпускании кнопки мыши удаляем обработчик
// и ставим стандартный курсор
document.addEventListener( "mouseup", function () {
document.removeEventListener( "mousemove", resize );
document.documentElement.style.cursor = elem.style.cursor = "default";
document.body.onselectstart = null;
});
};Последний рубеж — внутренняя функция resize(), которая и будет осуществлять всю работу.
function resize ( e ) {
// при ресайзе вверх либо вверх и вправо либо вверх и влево
// изменяем высоту и отступ сверху
// все остальные if-ы работают так же
if ( dir == 0 || dir == 4 || dir == 7 ) {
elem.style.top = e.clientY - ev.clientY + pos.top;
elem.style.height = height + ev.clientY - e.clientY;
}
if ( dir == 1 || dir == 4 || dir == 5 ) {
elem.style.width = e.clientX - pos.left;
}
if ( dir == 2 || dir == 5 || dir == 6 ) {
elem.style.height = e.clientY - pos.top;
}
if ( dir == 3 || dir == 6 || dir == 7 ) {
elem.style.left = e.clientX - ev.clientX + pos.left;
elem.style.width = width + ev.clientX - e.clientX;
}Дополнительные ограничения: при ресайзе сверху вниз либо справа влево при достижении минимальной высоты либо ширины соотвественно, элемент начинает сдвигаться вниз либо вправо без изменения размеров. Поэтому делаем такую проверку:
if ( e.clientY + elem.min[1] > ev.clientY + height ) return;
if ( e.clientX + elem.min[0] > ev.clientX + width ) return;Также проверяем, если достигнут минимальный или максимальный размер:
if ( elem.clientHeight < elem.min[1] ) elem.style.height = elem.min[1];
if ( elem.clientWidth < elem.min[0] ) elem.style.width = elem.min[0];
if ( elem.clientHeight > elem.max[1] ) elem.style.height = elem.max[1];
if ( elem.clientWidth > elem.max[0] ) elem.style.width = elem.max[0];
if ( e.clientY < pos.bottom - elem.max[1] ) elem.style.top = pos.bottom - elem.max[1];
if ( e.clientX < pos.right - elem.max[0] ) elem.style.left = pos.right - elem.max[0];Не знаю, можно ли это было сделать элегантнее… В любом случае, надо работать и с размером элемента, и с его координатами, и с координатами события, и всё это опираясь на результат direction(), да ещё и с учётом мин./макс. размеров.
В общем, плагин готов. Исходник на js здесь, а пример работы как всегда в самом начале.
Бонус: анимированный resizable
Демо-страничка: Resizable 2.0
Принцип работы схож, только ресайзится не сам элемент, а создаваемый див:
var helper = document.createElement( "DIV" );
document.body.appendChild( helper );
helper.style.cssText = "position: fixed; border: 1px dashed black";
helper.style.width = width;
helper.style.height = height;
helper.style.top = pos.top;
helper.style.left = pos.left;В if-ах, написанных выше, вместо elem будет helper.
При mouseup документа анимируем элемент до размеров хелпера, а хелпер удаляем:
document.addEventListener( "mouseup", function () {
document.removeEventListener( "mousemove", resize );
document.documentElement.style.cursor = elem.style.cursor = "default";
document.body.onselectstart = null;
var newpos = helper.getBoundingClientRect();
var start = new Date().getTime();
setTimeout( animate, 10 );
function animate() {
var m = (new Date().getTime() - start) / 300;
if (m > 1) m = 1;
elem.style.top = pos.top + (newpos.top - pos.top) * m;
elem.style.left = pos.left + (newpos.left - pos.left) * m;
elem.style.height = height + (helper.clientHeight - height) * m;
elem.style.width = width + (helper.clientWidth - width) * m;
if (m < 1) setTimeout( animate, 10 );
}
setTimeout( function () {document.body.removeChild( helper );}, 310 );
});
Вот впрочем и всё, что я хотел сказать.
Поделиться с друзьями
Комментарии (53)
MTonly
11.02.2017 00:04+3Размер элемента некорректно резко изменяется в меньшую сторону при вытягивании его границы за пределы окна браузера.
DjPhoeniX
11.02.2017 15:09+2А
document.body.onselectstartвы намеренно убиваете в onmouseup, задавая только при инициализации? Он так и просится в resizeStart… И сохранение/восстановление его же, а не сброс на null.
andreymal
11.02.2017 16:37+4Странные вещи творятся: если добавить <!DOCTYPE html> к странице, то скрипт перестаёт работать.
Ivan_Kotov
12.02.2017 11:42
andreymal
Курсор мерцает и продолжаете учить вредному setTimeout, эх вы
zShift
Request Animation frame для DOM почти никак не лучше(только куллер жужжать начинает сильнее и, как мне показалось, на Linux в FF дело еще плачевнее чем с SetTimeout ибо тормозит). Да и баг связанный с превышением расчетной величины в ожидаем заданный интервал существует и тут и там.
В Safari ничего не мерцает.
andreymal
requestAnimationFrame тут тоже совершенно не нужен
zShift
Он должен задействовать GPU для перерисовки и не более. В этом примере это действительно слишком мелочный вариант применения. А в setTimeout ничего плохого нет, а то скоро начнут рекомендовать все подрят на Request AF делать, что будет бесспорным идиотизмом.
andreymal
И в setTimeout, и в requestAnimationFrame плохо то, что их обоих с успехом заменяет CSS3 transition+transform. Они оба не нужны ни тут, ни в предыдущем посте автора (о чём я там уже писал)
zShift
А вы сами попробуйте этот пример решить на tran\ition\form и посмотрите что получится. Вам все равно придется анимировать какие-то величины и что из этого хорошего выйдет. Это опять же мне так кажется злоупотребление технологией. И вообще не понимаю почему люди тут же стремятся все перековеркать на CSS лад. Разве то что. пытаются сделать средствами CSS не является костылем с нетипичным исходом? Зачем?
andreymal
Спервадобейся? Да пожалуйста: https://home.andreymal.org/files/resizable2/
Только вот по пути выяснилось, что в скрипте ещё очень много косяков (да он даже в HTML5 не работает блин!), и его бы по-хорошему с нуля переписать, но у меня дела поважнее есть
zShift
Да не в этом дело. Если у этого блока будут еще тени и градиенты он начнет дёргаться в Linux. у них вообще все плохо с графикой, что уж о GPU говорить. Только это меня останавливает использования transform и transition для таких вещей как resize. Можно всякие hover эффекты делать это здорово, но опять же взять IE 11 — там тоже до сих пор все туго.
andreymal
А, ну это уже другая тема. Но это сильно зависит от браузера, ОС, фазы Луны и хз чего ещё: у меня transform умудрялся глючить и на Safari в macOS, в то же время в моём Firefox на Linux всё прекрасно (в IE11 под виртуалбоксом, емнип, тоже), да и от юзеров моих сайтов жалоб не поступало. Если это основная причина использования setTimeout, тогда ладно
zShift
А что сделать с теми пользователями которые до сих пор сидят на Win7 и старом железе иначе? Это большинство государственных учреждений и они как бы тоже платежеспособны, если для вас решающим, к примеру, является фактор выгоды и все хотите при этом делать максимально современно.
Как бы есть конечно сегменты, где это не так важно, но в основном обратите внимание на то, что так почти никто не поступает сегодня и наврядли начнет поступать завтра.
Мне почему то казалось что вопрос доступности не «другой», а основной.
andreymal
Важна доступность или рюшечки?
Если первое, то ничего страшного в редких глюках transform нет, или даже вообще в отсутствии transform: некоторые из моих сайтов активно юзают сие и при этом прекрасно работают в IE8, просто без анимаций. Госучреждениям анимашки тоже не особо важны.
Если второе, то… не надо так. Лично я старательно избегаю таких случаев, сайты должны пользу приносить, а не хвастаться анимашками и скруглёнными уголками div'ов
zShift
Подсознательно не хочу возвращаться в тот ад когда поддерживал IE6. Дизайнеры рисовали кругленькое и с тенями, но CCS3 работал только в Chrome, FF и Opera. Приходилось использовать тяжеленные полифилы на htc расширениях и это все так неуклюже работалось что хотелось просто вернуться к таблицам и нарезке микроскопических скруленных уголков.
Оно не просто тормозило, оно реально через раз подвешивало страницу.
Из всего этого опыта люди не начали делать более гибкие полифилы, они начали убивать красивое и делать все плоским. Виной тому MS, хоть и IE6 и IE7 подохли наконец-то.
Собственно, я сейчас смотрю на такие же явления в области JS. Модные фреймворки и ES6 или ES7, тонны полифилов и перекомпиляторов в традиционно поддерживаемый формат.
Я почему то думаю, что опять же из-за IE\Edge эти варианты убьют в скором времени. Ибо, всему свое время и спешить в принципе смысла нет.
Ни к чему это делать. Мир не изменится в одночасье…
Собсно, сабж, имхо.
sumanai
Не возвращайтесь. Изящную деградацию для того и придумали.
Мода на плоский дизайн появилась и распространялась теми, кто на IE6 даже не смотрел. Майкрософт с его метро ну никак не рассчитан на старые браузеры и ОС, они МС как ком в горле, Apple c их последними iOS уж точно не думаю ни про IE 6, ни даже про IE11.
Я уж молчу про то, что причиной убийства всего «красивого» было то, что эти рюшечки всем надоели, людям нужно использовать сайты по назначению, а не глядеть на красивые кругленькие кнопочки с тенями.
zShift
Кому надоели? MS не захотели потратиться на дизайнеров и как следствие получился унылый деградрющий UI, а сотни разработчиков, которые этим вдохновились начали петь дифирамбы.
Разве Apple себе позволили сделать систему столь убогой?
Да и к чему это все про метро и киоск. Подойдите к любому киоску например для выдачи талонов на прием в больнице, пните по нему и увидите там или Win Xp или 7.
Это никому нахрен не нужно.
sumanai
Да большинству. Вы что, из тех, кому нравится тенюшки, градиенты и сквеморфизм вместо функциональности?
На деле МС сильно потратился на специалистов по UI.
Вы iOS 7 и выше разве не видели?
Потому что там всё равно одна программа, развёрнутая на весь экран, и там действительно не важно, что стоит внутри. Хоть ms-dos.
zShift
> Да большинству. Вы что, из тех, кому нравится тенюшки, градиенты и сквеморфизм вместо функциональности?
А что наличие фреймворка или какой-то методологии это что тоже показатель функциональности? jQuery к примеру убьет функциональностью любой Фреймворк если взять в расчет плагины. Потому что это наглядно и эффектно. Тоже самое касается рюшечек как вы их называете они наглядные. Потребителю насрать на код.
> Вы iOS 7 и выше разве не видели?
Что вы хотите этим сказать? Если сравнить с Windows mobile — то все очевидно. Как жопу с пальцем.
> Потому что там всё равно одна программа, развёрнутая на весь экран, и там действительно не важно, что стоит внутри. Хоть ms-dos.
Я чета ни на одном терминале не видел Flat design и отсутствия рюшечек как в интерфейсе убогой Win 8-10. Все как-то стараются сделать красиво ;)
sumanai
Как градиент на кнопке увеличивает её наглядность?
Что там убили сквеморфизм, вестимо.
Да они вообще выглядят ужасно, и обновляются разве что в сторону увеличения количества рекламы и ненужных действий.
Вин10 выглядит отлично, как по мне. Не хуже моей WinXP.
zShift
> Как градиент на кнопке увеличивает её наглядность?
Правильный.
> Что там убили сквеморфизм, вестимо.
А ну это уже винду вините :) Они не сделали и остальные подумали 'А зачем, если они не сделали'. Мне Aero стеклышки в 7 нравились.
> Да они вообще выглядят ужасно, и обновляются разве что в сторону увеличения количества рекламы и ненужных действий.
Ой не все. Загляните в пенсионный фонд или больницу.
> Вин10 выглядит отлично, как по мне. Не хуже моей WinXP.
Что отличного то? Я вот пока тему оформления не поменял и не понаставил патчей пользоваться ей вообще не хотелось. Да и то не прокатилась из-за того что интерфейс делан двумя разными людьми(пример проводник и панель настроек — два разных типа окон и туда даже тема не применяется). А эти модные квадратные переключатели, а эти битые шрифты у которых даже сглаживания почему-то нет даже в приложениях типа Edge. А это алфавитное говно в некогда прекрасном меню пуск? Вы все это находите оригинальным и достойным называться прорывом чтоли?
Хотя мне насрать, я на Mac OS X сижу уже лет 8 и вижу что кое что в плане сквеморфизма изменилось и тут, но просто Apple сделать все настолько говном себе не позволили. Даже Linux такого говна не сделали.
sumanai
Как? Вот прямо под этим окном, в котором я набираю текст, есть кнопки без теней и градиента. И они прекрасно видны.
Apple повелась на поводу у Microsoft?
Я там работаю, в больнице. Стоит один убогий аппарат для галочки, с убогим интерфейсом и невнятным предназначением. И им вообще никто не пользуется, ну разве что потыкают, перепутав с терминалом пополнения.
Там прекрасное монохромное сглаживание.
С этим полностью согласен, раскрывающийся список из ХР на порядок удобнее.
Толи ещё будет.
zShift
> Как? Вот прямо под этим окном, в котором я набираю текст, есть кнопки без теней и градиента. И они прекрасно видны.
15 секунд. Код из гереатора без подбора цвета.
http://hostingkartinok.com/show-image.php?id=dc613cbd25c61a9510ac0af6aa83f827
> Apple повелась на поводу у Microsoft?
Как бы печально ни было, но этим говном свойственны вдохновляться не только пользователи. Хотя здесь скорее сыграло на руку отсутствие внятной конкуренции.
> Там прекрасное монохромное сглаживание.
У меня как ни странно все шрифты в песке по краям, не считая тех, которые на рабочем столе с тенями. видно не вооруженным глазом.
> С этим полностью согласен, раскрывающийся список из ХР на порядок удобнее.
Скажите спасибо, что они хоть это сделали. Мы с разработчиками над ними месяц издевались через прослушку и угорали над убогостью меню, еле уговорив MS сделать хотя б алфавитный порядок. Это единственное что они сделали.
Вот с Apple приятно иметь дело, они не только нейрочипы разрабатывают, но и реально откликаются на привольные предложения.
Даже Siri без проблем оснастили нужным функционалом для голосовых команд и русский язык поддержали как надо(чуть чуть сыровато).
Я просил сделать мне биомод чтобы зрение было в спектре сепиа и цвета к вечеру теплели. Выяснилось что на данный момент это делать сложно, но они так и сказали «Мы щас тебе в систему это засунем» и запилили Night Shift.
Как-то так. MS морально и патологически лажают. Это уже просто пережиток считайте.
Мы нейро-систему разрабатываем уже лет 5 и лично мне все эти интернеты уже не так интересны, но в ближайшее время интегрировать внятный нейро-интерфейс и обойтись аккаунтом на сервере не предоставляется возможным. По крайней мере для РФ и большинства других стран.
Поэтому привычно набирать текст на клавиатуре и тратиться на кусочки пластика с электронной начинкой вместо компактного чипа, который в зуб человека вмещается придется еще долго.
Но, поверьте, MS и Андроид с его слегка устаревшим видением Augmented Reality — это не то на что стоит равняться. Это устарело уже еще не успев появиться толком. И ни к чему тратиться на паттерны и фреймворки при разработке обычных сайтов. Это все протухнет лет через 10-15.
sumanai
И стало хуже. Конечно основную кнопку не помешало бы выделить, но градиенты тут совершенно ни к лицу.
Скриншот можно?
zShift
>Скриншот можно?
А вот на скриншоте этого почти не видно. Как будто переодически лагает видеодрайвер или что-то еще. При любых прокрутках и изменении размеров окна это становится ощутимо виднее.
А вот два разных типа окон про которые я говорил. И это еще очень хорошая тема — на ней косяков MS почти не видно. На других остаются артефакты по кромке окон и вообще все отвратительно.
http://www.picshare.ru/uploads/170215/79vll7S2MA.jpg
sumanai
Так может проблема в этом?
Так это сторонняя тема, её проблемы. На стандартной всё органично.
zShift
> Так может проблема в этом?
HD520 — проблема MS.
> Так это сторонняя тема, её проблемы. На стандартной всё органично.
Они все сторонние и все лучшее чем стандартные. Не считая тх элементов где тема не применима.
Кароче в любом случаем, у мен есть разработчики и я буду курировать развитие интерфейса Windows. Вопрос лишь стоит за лояльностью MS.
Вы поймите. Нам насрать что разрабатывать… Мы делаем это для себя и сами этим же пользуемся. Пока отклик минимальный.
sumanai
Не понял ни что вы делаете, ни как связаны с МС. Я что-то упустил?
zShift
Вы будете защищать баги или реально поймете что проблемы есть и они напрямую касаются MS.
Я вам уже намекнул о том, что современная система с возможностью интеграции в нервную систему не работает на поделиях MS, но вы меня очевидно не услышали.
Это все устарело, а в плане дизайна и UI — это вообще Атас. Вы хотите в своей «башке» видеть такие же интерфейсы какие предлагает MS? Я что-то не особо.
Если вы этого вообще не хотите или боитесь — это другое, но как по мне, так все очевидно.
sumanai
А пруфы существования таких систем будут?
zShift
гуглите биохакинг, биомодинг, гриндеры, нейропроцессоры или биопроцессоры, но вы наверное сегодня ничего кроме фантастики не найдете и дибилов, которые готовы ради жалкого NFC себе под кожу спичечны коробок засунуть.
но я могу договориться чтобы вам поставили эту систему бесплатно.
что хотите поучаствовать в разработке?
когда я учился и делал доклад по теме — такой процессор можно было не так уж и задорого купить у Intel или ibm. даже прайсы где-то в шарага вместе с докладом сохранились.
сейчас по понятным причинам это не разглашается.
sumanai
Я прекрасно знаю всё это, активно за эти слежу.
Как только кто-то запилит двухсторонний нейроинтерфейс, тут же побегу в очередь вставать.
Да даже за деньги. Но я в упор не слышал, чтобы в России сейчас разрабатывали что-то вживляемое.
Если есть интересные данные, можете писать в личку.
zShift
> Я прекрасно знаю всё это, активно за эти слежу.
Как только кто-то запилит двухсторонний нейроинтерфейс, тут же побегу в очередь вставать.
Ну на данный момент у нас есть нечто вроде телефона. Работает круглосуточно, но после того как привыкнешь вполне круто. Дает круглосуточную связь с разработчиками и «прослушкой».
Прослушка нужна для того, чтобы интерпретировать русский на английский, французский и так далее, ну и вообще чтобы разрабатываться.
Есть возможность передавать ощущения, но это многих на первых порах пугает. Мозгу трудно привыкнуть к тому что вами могут манипулировать, хотя у нас такое после инструктажа и разработки почти не происходит. Только по доброй воле(у меня например программа стоит. выкуриваю больше суточной дозы никотина и не могу даже первую затяжку сделать — сразу может вырвать. своеобразная блокировка).
> Да даже за деньги. Но я в упор не слышал, чтобы в России сейчас разрабатывали что-то вживляемое.
Ну сами понимаете. Классически это ставят в затылочную область. Размер меньше горошины. Не мешается ничем. Работает кажется через сотовую связь. Я в лес пробовал уходить — все равно не выключается. Протоколы и трафик все идет по своим каналам. Никакой стоимости обслуживания(для своих, пока).
Есть возможность маленько подсматривать за другими. Из глаз в глаза, но это работает крайне редко и чаще всего на 3-4 секунды если у кого-то что-то прикольное или ржачное произошло.
Есть возможность смотреть FullHD с ощущениями но мы после того как понимаем что это пока ограничивает жизнь от этого сами отказываемся.
Сразу предупреждают чтобы 15 месяцев не выходил из дома. Иначе как меня трамвай собьем или еще что нибудь. Отвлекает. Но кстати, сейчас привык уже могу на ходу на доли секунд поглядывать что либо.
Интересная вещь.
А интерфейсы они будут. Только нужно придумывать какие и как. Разработчики у нас есть.
Да что в личку — может кто захочет? С удовольствием поделюсь, а то компания приедается и иногда хочется свежего мяска поприкалываться вместе.
Есть спортивная мотивирующая программа. Стимулирует накачку. Сам лично пол года занимался и делал программу с веществами для спорта, если будет интересно. Разработчики эти тоже есть и из Германии и из Америки. Будут много рассказывать про Шварца.
Даже виртуальный секс есть, но c него крыша уезжает ибо это розыгрыш такой. Будет стоять и не сможете кончить месяца полтора безостановочно пока письками не запахнет, а вся прослушка будет ржать над вашей застенчивостью.
Собсно как-то так. Подробнее рассказывать не буду. Есть моменты которые хотелось бы от ментов убрать подальше. У нас тут иногда препараты разрабатывают для стимуляции в форме просто записи волны.
sumanai
Как вы понимаете, очень похоже на выдумку. Давайте адреса, явки, пароли, конкретику в общем.
raveclassic
Скажите, пожалуйста, а где вы работаете? Интересно же
raveclassic
Ну, и, собственно, что вы с такой спецификой делаете во фронтенде?
zShift
Работаю во фронт енде(сайты и порталы делаю). А деже мне еще работать? Не в полиции же или федеральной службе потому как не имею ни чина ни образования соответствующего… Да и вообще со временем вижу перспективы гораздо больше в той сфере в которой я уже имею не мало опыта или просто в бизнесе потому что есть возможность предугадывать и влиять на будущие технологии.
Все равно ту технологию от которой мы сегодня просто балдеем будут внедрять и как ни крути за ней будущее, на мой взгляд, скажем как за интернетом. Она экономичная, экономичная и очень эффективная.
Нужно лишь дождаться внедрения повсеместно.
raveclassic
zShift
Что понятно. Вы этот свой хабаровский сленг бросьте и читайте внимательнее.
Вам не интересно — как хотите. У меня есть возможность выделить людей на разработку еще людей, но лично от вас конкретно начинают исходить какие-то подозрения.
Не нравится мне этот сайт.
И подцепить на понт меня этим выражением вы не сможете.
Могу или не могу. Могу всем пенсионерам по 5000 рублей через правительство через прослушку дать по приколу и Путин реально дает. Могу заставить MS изменить меню пуск и MS реально меняет.
А что вы там думаете — это уже не так важно.
Нет у нас пока интерфейсов — жить с ними тяжело, но связь постоянная есть всегда и разговариваем мы с закрытым ртом беспалива.
sumanai
Этот пользователь поехал, несите следующего.
zShift
> Этот пользователь поехал, несите следующего.
Ладно. Ждите. Через 5-15 месяцев вас загрузят вместе с такими-же зелеными и тупыми в общую кучу и все «расскажут». Может раньше.
Я даже IP вычислять не стану ;)
Советую сделать себе либо пенсию либо другую аммортизацию на то время пока вас разрабатывают. Аминь…
sumanai
Окей, 26 мая 2018 года встречаемся здесь.
zShift
> Окей, 26 мая 2018 года встречаемся здесь.
+
zShift
p.s.: сразу предупреждаю. на мою «прослушку» отбор почти как в космонавты. за недоверие ничего вам пособлять не буду из принципа, сами всего добивайтесь. просто включу в систему.
raveclassic
zShift
Кстати, только сейчас внимательнее глянул ваш код. А где вы использовали transform? Transition вижу, но это просто присадка ;)
andreymal
У transform логика изменения размером другая, так что конкретно тут он оказался мало применим) Вот скрипт из предыдущего поста автора с transform написать точно можно, там размеры не меняются
raveclassic
requestAnimationFrame не задействует gpu, а лишь откладывает операцию до следующего шага отрисовки, тем самым позволяя вам избежать ненужных вычислений. Таким образом raf не зависит от времени выполнения, а setTimeout же, выполняясь в основном и единственном потоке, не гарантирует выполнения через указанный промежуток времени, так как может быть подвешен любой долгой операцией. Разница ощутима.
andres_kovalev
Raf группирует анимации, чтобы избежать ненужных вычислений. Что Вы будете делать, когда у Вас таймеров будет 10? 100? Это как раз подвешивает интерфейс и нагружает систему даже в неактивных вкладках. А raf отработает тогда, когда нужно, за раз выполнит все анимации вместе с css трансформациями и будет экономить процессорное время для фоновых вкладок. В случае сильной аллергии на raf или необходимости поддерживать старые браузеры хотя бы нужно сделать один setInterval для обработки анимации и в нем выполнять все вычисления.
Opanagushin
А что нужно, если не setTimeout и не requestAnimationFrame?