​​#faq #pie
Q: Как сделать, чтобы при прокрутке списка элементов, не срабатывал триггер Touch Down на эти элементы?
A: Я обычно в таких случаях создаю сейф-таймер для срабатывания тригера. И сбрасываю его при начале скролла.

​​#pie #faq
Q: Как отследить действие после лонгтапа, не отрывая палец от экрана?
A: Нужно после лонгтапа начать отслеживать координаты нажатия с помошью переменных $touchX и $touchY. Дальше уже можно проверить попадают ли координаты нажатия в нужные рамки.

​​#faq #pie
Q: Как сделать измерительную линейку? Т.е. есть 2 перетаскиваемые точки и тянущаяся линия между ними..
A: Дизайнеры не любят тригонометрию) а зря. Для начала надо сделать переменную, которая будет всегда изменятся при перетаскивании каждой точки.

Поэтому создаем 4 тригера Detect - по 2 для каждой точки, для X и для Y. В каждый тригер делаем одно и тоже действие
Asign summ Cap_L.x + Cap_L.y + Cap_R.x + Cap_R.y
Теперь делаем Detect summ в который надо сделать 3 действия с линией между точек:

1. Move. Линию нужно перемещать. лучше всего будет установить Origin-point линии в центр, и перемещать её, находя центр отрезка между точками. Поэтому в параметры действия Move To пишем:
X = (CapL`.x+`CapR.x)/2
Y = (CapL`.y+`CapR.y)/2

2. Scale. Линию надо тянуть и сужать в зависимости от положения точек. Тут пригодится теорема Пифагора, т.к. линия - это гипотенуза, в прямоугольном треугольнике, образуемом нашими точками. Квадрат гипотенузы = сумме квадратов катетов, поэтому в параметры действия Scale To пишем:
Width = sqrt((pow((CapL`.x-`CapR.x),2))+(pow((CapL`.y-`CapR.y),2)))

3. Rotate. Линию нужно повернуть. Тут нужен любимый арктангенс)
В параметры действия Rotate To пишем:
-degrees(atan((CapL`.y-`CapR.y)/(CapR`.x-`CapL.x)))

Хочу еще попробовать сделать мультитач для этой линейки, чтобы двумя пальцами одновременно шевелить эти штуки, но это не так-то просто =)

#pie #component
У меня вот есть универсальный компонент слайдера. Вытащил его отдельным файлом и решил поделиться с вами =)

Фичи:
1. Можно установить минимальное значение слайдера (переменная min_value)
2. Можно установить максимальное значение слайдера (переменная max_value)
3. Можно установить текущее значение на слайдере, отображается только при просмотре. (переменная current_value)
4. Можно менять ширину слайдера, это его никак не сломает
5. Можно установить метрику значения (переменная metrics)
6. При нажатии на слайдер - установится значение до того места, куда было сделано нажатие
7. При нажатии на верхнюю правую часть контейнера - значение прибавляется, а при нажатии на левую верхнюю часть контейнера - значение уменьшается.

можно лайкнуть на дрибле, не придумал зачем =)

#news #beta
И я снова получил новую версию до официального выпуска!
Много радости, непонимания и разочарований. Всё как всегда =)

И так краткий перечень функций Protopie 4.3:

1. Возможность создания вложенных компонентов;
2. Автозаполнение действия Send и триггера Receive;
3. Строка состояния системы;
4. Размытие фона как у iOS;
5. Привязка значений к целым пикселям;
6. Поддержка формул в значениях действия Color;
7. Дублирование взаимодействий;
8. Новые рамки устройств;
9. Возможность закрепить сцену и панель компонентов
10. Кнопки навигации в компонентах и соответствующих сценах

А подробный разбор обновления можно почитать тут.

Кстати, версия 4.3 вышла.
Мой обзор на английском можно почитать тут
А на русском - постом выше =)

#pie #fun
Недавно я наткнулся на библиотечку Cuberto с реализацией Liquid Swipe, и подумал, что было бы неплохо реализовать подобный переход в ProtoPie.
Подумал-подумал и сделал)
Можно лайк на дрибл воткнуть
А можно не втыкать

Продолжу публиковать решения на вопросы, возникающие у комьюнити)

#faq #pie #tips #hack

Q: Как изменить скорость или анимацию перелистывания у Page Container?
A: У стандартного Page Container такой возможности нет, однако никто не мешает сделать аналогичный кастомный пейджинг из обычного горизонтального Scroll Container.

1. Создаем контейнер, устанавливаем тип скролла Scroll, направление - горизонтальное, параметр Overscroll ставьте на своё усмотрение (его кстати тоже можно сделать кастомным, но об этом в другой раз)
2. Запихиваем странички, которые должны скроллится внутрь контейнера, расставляем с нужными отступами, наводим красоту (у последнего блока необходимо увеличить ширину контейнера на расстояние равное ширине между блоков, чтобы при скролле всё было ровно)
3. Теперь нам нужно определить ширину блока - т.е. на сколько будет автоматически проскралливаться контент. Считается она так - берем ширину блока контента (в моем примере 311) и прибавляем отступ, который будет между блоками (у меня это 16, итого - 327)
4. Создадим переменную, которая будет отвечать за номер страницы (в примере current)
5. Настраиваем сам скролл. Триггером для перелистывания будет служить Touch Up по скролл-контейнеру.
6. Нужно определить в какую сторону мы делаем скролл. Для этого проверяем предустановленную переменную $touchVelocityX. Эта переменная имеет положительное значение, когда тач курсор двигается вправо, и отрицательное значение при движении влево.
7. Также в условиях добавим ограничения листания, проверяя переменную current. Листаем вправо только когда current > 0, а влево, когда current < кол-ва слайдов (в примере 4, но т.к. счёт с 0, то < 3)
8. Внутрь условия листания мы добавляем изменение номера страницы делая Assign current = current+1, а затем сам скролл. Скролл делается на ширину блока умноженную на номер страницы. Для первой страницы 0*327=0, для второй страницы 1*327=327 итд
9. Аналогичные действия для листания вправо, только номер страницы уменьшается Assign current = current-1
10. Ну и настроить эффект и скорость скролла можно изменяя параметр изинг у скролла в обоих условиях.

#hardware #pie #article
Тони Ким в очередной раз показывает, как подружить Arduino и ProtoPie.
Если вдруг, так оказалось, что у вас нет под рукой Ардуино, то можно прост поиграть в игру, используя клавиатуру (стрелочки и пробел).

Кстати, если интересна тема, то можете еще почитать его статью 3-х летней давности.

Чо делать на карантине, как не собирать своих роботов?)

#pie #fun #experiment
Retro Protopie =)
Вспомнил школьные годы и свои первые интерфейсы для консольных программ. Раньше экран мерили не пикселями и дюймами, а количеством строк и столбцов, что и навело меня на мысль из текстового слоя сделать поле для рисования)
Потребовалась 1 формула, чтобы сопоставить координаты мыши с нужным символом и поменять его с пустого на полный.
Ну а с помощью компонентов, можно и цвета добавлять)
Пригодится ли это? А какая разница, если по фану)

​​#challenge #fun

Окей) Тогда попробуем расширить аудиторию для привлечения новичков.
Хееей, репостните в свои крутые каналы? =)

Я решил, в качестве эксперимента, подарить ключ на 4 месяца лицензии ProtoPie тому, кто сможет сделать транзишен между экранами как на гифке) Особых требований нет, сделайте хорошо и похоже) Присылайте результат мне в личку. Первому дам ключ)

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

Ну а если вы уже пользуетесь паем, можете ради фана поучаствовать и прислать мне свою реализацию) и заходите в наш чатик, там есть много интересного

P.S. Это не какая-то реклама от протопая, они даж, скорее всего, не в курсе... Но если эксперимент будет удачный - можно будет попробовать организовать подобные конкурсы-челленджи на постоянной основе, хз).

​​#challenge #pie #fun
Эксперимент получился вполне интересным.
Пришел к выводу, что те, кто может запилить подобный переход уже и так имеют лицензию) Ну и охват был небольшим) Однако в итоге вместо планируемого одного победителя - три человека получило ключи на 4 месяца лицензии.

Всего мне прислали около 12 реализаций. ("около", потому что пара примеров были как раз "около" того что надо было прислать), Большинство участвовало по фану и 7 человек отказались от подарка.

Топ-2 первых приславших реализацию:
@sunnyexe https://cloud.protopie.io/p/4076e8737a
@GearFX https://cloud.protopie.io/p/8f1f1b22c9
В них я, собственно, и не сомневался) Эти ребята часто помогают новичкам в нашем чате, за что им большой респект. Ключ от пая им ни к чему, они и так являются обладателями лицензии.

А теперь топ-3 приславших свой пример и получивших приз:
1. @eugenerifan https://cloud.protopie.io/p/06a5ba0a28
2. @bs_ace https://cloud.protopie.io/p/bde08102c7
3. @UXzavr https://cloud.protopie.io/p/5cee8049f5
Поздравляю ребят и надеюсь, что 120 дней лицензионного протопая им во многом помогут =)

P.S. И, мне хотелось бы отметить работу Маргариты @Ikkizento, которая тоже участвовала ради фана и имеет лицензию. Реализация получилась очень аккуратная и удобная для использования.

Ну и заодно покажу своё решение, которое можно переиспользовать на любое количество страниц с любым контентом.
+ ниже закину видео, как добавлять новую сцену в этот слайдер

#pie #meetup
В связи со всякими там карантинами, митап, планируемый в Лондоне решили провести онлайн. Поэтому к нему могут присоединиться все желающие)
Митап будет на следующей неделе, во вторник, 28го апреля, в 19:00 по Московскому времени.
Подробности тут: https://www.meetup.com/ru-RU/ProtoPie-London/events/269949552/

P.S. На митапе будет моя любимая тема "Бессмысленный прототип" примерно вот с такими прототипами: https://cloud.protopie.io/p/20893284cf

Пойдёте?

#meetup
Видео с Лондонского онлайн-митапа
https://www.youtube.com/watch?v=_DGLh1r-jKA&

#pie #fun #experiment
Градиентов пока нет, но кто меня остановит? =) https://cloud.protopie.io/p/2075794b79

#news
Новый сайт выкатили https://www.protopie.io/

#news
Ну и внезапный релиз 5.0 раньше обещанных сроков удивляет

#news #challenge
Конкурсы подъехали. Макбук я наверно себе заберу), но там ещё есть наушники и годовые подписки..
Шутка, конечно же. На самом деле критериев оценки нет, поэтому победить может каждый. Вот тут то точно сработает корейский рандом)
https://dribbble.com/shots/12485507-ProtoPie-5-0-Playoff-Interactions-Speak-Louder-Than-Words

#news #challenge #pie
Итак конкурс таки завершился. https://blog.protopie.io/14-interactive-prototypes-reimagining-everyday-interfaces-688699f94695
1 место: Khonok Lee и его календарь

2 места:
Ahmed Amr
Edmund Boey
Briandito Priambodo

3 места:
Arpit Agrawal
Vikram Singh
Junhyuk Jang
Migue Nodos
Kalpesh Prithyani
Kang Changmo
Ariunbold Ankhaa
Я тут тоже в призёрах
Max A. Acres
Jiaxin Z