Скачать "Делаем программу с интерфейсом на Processing"

Обложка аудиозаписи

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

Предыдущее видео: Работа Arduino с дисплеем TM74HC595 Следующее видео: Самодельный ISP программатор USBASP для AVR

0:00

Введение

1:23

Библиотека meter

2:54

Библиотека G4P

4:50

GUI Builder G4P

9:13

Интерфейс и код

21:31

Библиотека ControlP5

26:00

Начинаем кодить, кнопка

28:22

Меняем шрифт

30:25

Добавляем слайдер

33:00

Автоматическое размещение

35:10

Продолжаем кодить

35:55

Добавляем выбор цвета

36:47

Выпадающий список

40:18

Добавляем крутилку

43:41

Получаем значения разными способами

Самодельный ISP программатор USBASP для AVR

Самодельный ISP программатор USBASP для AVR

Канал: Заметки Ардуинщика

Работа Arduino с дисплеем TM74HC595

Работа Arduino с дисплеем TM74HC595

Канал: Заметки Ардуинщика

Хлопковый выключатель на ATtiny своими руками!

Хлопковый выключатель на ATtiny своими руками!

Канал: Заметки Ардуинщика

Игровая консоль на Arduino своими руками [часть 1]

Игровая консоль на Arduino своими руками [часть 1]

Канал: Заметки Ардуинщика

Работа с программатором USBAsp в Arduino IDE

Работа с программатором USBAsp в Arduino IDE

Канал: Заметки Ардуинщика

Разгон ШИМ Arduino

Разгон ШИМ Arduino

Канал: Заметки Ардуинщика

Уроки Ардуино #9 - управление нагрузкой MOSFET транзистор

Уроки Ардуино #9 - управление нагрузкой MOSFET транзистор

Канал: Заметки Ардуинщика

Уроки Ардуино. Алгоритмы релейного управления

Уроки Ардуино. Алгоритмы релейного управления

Канал: Заметки Ардуинщика

Уроки Ардуино #0.5 Начало работы с Arduino, первые шаги

Уроки Ардуино #0.5 Начало работы с Arduino, первые шаги

Канал: Заметки Ардуинщика

Переделываем DC-DC преобразователь для управления с Arduino

Переделываем DC-DC преобразователь для управления с Arduino

Канал: Заметки Ардуинщика

arduino

ардуино

уроки

processing

интерфейс

электроника

программирование

робототехника

alexgyver

00:00:01

ящика и сегодня мы займемся созданием

00:00:03

программ и с интерфейсом на языке

00:00:05

processing это второй урок по processing

00:00:07

первый вышел на канале недавно и в нем

00:00:09

мы разобрали все основы поэтому

00:00:11

настоятельно рекомендуется посмотреть

00:00:13

хотя бы первые 15 минут чтобы понимать

00:00:15

что тут вообще происходит

00:00:24

прежде чем написать в комментарии что

00:00:26

для разработки программ под компьютер

00:00:28

лучше использовать наука сорт visual

00:00:30

studio и сишарп например windows forms

00:00:33

или qt на си плюс плюс или неудобно

00:00:35

псевдокод под названием питон я напомню

00:00:38

что processing является

00:00:39

кросс-платформенным а также объективно

00:00:41

самым простым языком для того кто

00:00:43

работал с arduino также набор настолько

00:00:45

она называется заметки орду ящика где я

00:00:47

делаю уроки для новичков и даю

00:00:49

информацию с нуля поэтому если вы

00:00:51

делаете от программы на других

00:00:53

платформах я вас поздравляю делайте на

00:00:55

processing существует несколько

00:00:57

библиотек для создания интерфейса их

00:00:59

можно найти на официальном сайте в

00:01:01

разделе библиотек я пробовал их все и

00:01:03

хочу остановиться только на 3 это

00:01:05

простенькая метро мощная и control 5 и

00:01:08

конечно же джефф api остальные на их

00:01:10

фоне просто не имеют смысла не некоторые

00:01:13

из них устарели и вообще не

00:01:14

поддерживаются и не работают все

00:01:16

библиотеки устанавливаются через

00:01:18

встроенный менеджер библиотек в

00:01:19

автоматическом режиме достаточно найти

00:01:21

нужную в поиске и нажать install нет р

00:01:24

простейшая библиотека которая позволяет

00:01:26

при помощи буквально двух строчек кода 2

00:01:28

карл

00:01:29

выводить простенький аналоговые

00:01:31

индикатора это все что умеет делать

00:01:32

данная библиотека но в этом ее прелесть

00:01:35

нормально документации я к сожалению не

00:01:37

нашел но все доступные функции настройки

00:01:39

разобранный во встроенных примерах вот

00:01:41

здесь можно менять размеры подписи цвета

00:01:44

добавляет сигнализацию и цветовые метки

00:01:46

рассмотрим самую самую базовую

00:01:48

кастомизацию позиция левого верхнего

00:01:51

угла задается при создании третьем

00:01:53

параметрам true или false можно задать

00:01:55

половинчатый или полный индикатор для

00:01:57

настройки диапазонов вызываем сетап где

00:02:00

указываем диапазон входного сигнала и

00:02:02

диапазона индикации например я хочу

00:02:04

подавать позицию мыши по горизонтали от

00:02:07

от 0 до 320

00:02:08

индикацию хочу от нуля до ста как

00:02:11

процент и здесь же задается угловой

00:02:13

размер индикатор а точнее даже не размер

00:02:15

а вообще ту задается сама дуга

00:02:18

можно сделать кольцевой индикатор вот

00:02:20

таким образом или на 270 градусов как

00:02:23

автомобильном спидометре ширина окна

00:02:26

задается при помощи свет метр вид также

00:02:28

можно задать название

00:02:30

и включить например отображения

00:02:33

численного значения самый главный момент

00:02:35

актуальное значение подается в облет

00:02:37

метро и собственно все остальные

00:02:39

настройки если нужно ищите в примерах а

00:02:41

мы обязательно вернемся к этой

00:02:43

библиотеки в отдельном уроке про связь

00:02:45

arduino и processing сегодня этот момент

00:02:47

пока опустим и сейчас переходим формат

00:02:49

life урока чтобы вам был виден ход моих

00:02:52

мыслей и возможно будет все более

00:02:54

понятно значит дальше у нас по плану

00:02:55

библиотека g4 п заходим в библиотеке и

00:02:58

ставим g4 бит и пример библиотеки g4 пи

00:03:04

появятся в библиотеках сообщества g4 pi

00:03:07

здесь их не очень много они все

00:03:10

очень-очень сильно разные показывают не

00:03:13

все возможности библиотеки это немножко

00:03:15

неудобно потому что в документацию

00:03:18

приходится смотреть именно документацию

00:03:20

она кстати находится вот здесь

00:03:23

библиотеках углу и джефа и вот здесь и

00:03:27

тут и еще нужно поискать и находится она

00:03:30

вот здесь reference и здесь обычно такой java dogs

00:03:34

здесь очень много всего и пользоваться

00:03:37

этим без примеров ну не очень приятно но

00:03:39

вся информация тут есть по каждому

00:03:42

инструменту который предлагает engine 4

00:03:44

пи давайте мы пару примеров откроем так

00:03:47

чисто для примера то есть тут есть

00:03:48

например слайдеры выглядят они вот так и

00:03:52

у них есть куча настроек ну это как вы

00:03:55

понимаете это просто пример например

00:03:56

показывает возможности настроек слайдера

00:03:59

с точки зрения примера мы сможем на

00:04:02

менять количество тиков можно все вот

00:04:05

это включить у нас появится с вами

00:04:06

отображение текущего значения прилипания

00:04:09

к черточка есть цветовые схемы здесь

00:04:12

встроенные их 8 штук можно смотреть по

00:04:15

отношению к фону в общем это чистая

00:04:17

демонстрация возможностей блеать эти вот

00:04:20

чисто по слайдеру такие демонстрации тут

00:04:23

немного к сожалению то есть кнопочками я

00:04:26

вообще не помню чтобы что-то было есть

00:04:29

вот есть

00:04:31

с этим скрутил кай который knock

00:04:33

называется тоже можно покрутить

00:04:36

посмотреть что он предлагает потока

00:04:38

цветовой схемы общем все то же самое что

00:04:40

со слайдером как это все дело копится то

00:04:43

есть можно посмотреть как это написано в

00:04:45

примерах тут все не очень понятно потому

00:04:47

что комментариях здесь нет но но конечно

00:04:52

разобраться можно но суть библиотеки же

00:04:55

4 пи в том что у нее есть свой gui

00:04:57

builder можно его установить через

00:05:00

библиотеки тулс вот он жив api gui

00:05:05

builder мы его с вами устанавливаем

00:05:07

устанавливаем и он появится инструменты

00:05:10

джефф api

00:05:11

gui builder давайте мы закроем пример

00:05:13

которую был открытый

00:05:14

откроем пустой скетч и запустим gui

00:05:18

builder у нас появляется вот такое окошечко

00:05:20

прямо как во взрослых средах разработки

00:05:23

программирование и у нас с вами

00:05:26

автоматический запуск gui builder а

00:05:28

создал уже сетап создал дро создал

00:05:32

вкладочку углы я подключу библиотеки все

00:05:34

нужные и создал в кладочку gui

00:05:36

где с комментариями с некоторыми то есть

00:05:40

вот это все автоматически

00:05:41

сгенерировалась и она работает если мы

00:05:44

запустим получится окошко но в этом

00:05:47

озере мы можем с вами построить

00:05:49

интерфейс давайте для удобства сразу

00:05:52

включаем отображение сетки и

00:05:55

прилипания к сетки мы можем сразу

00:05:58

накидывать любые элементы и двигать их

00:06:01

прямо здесь это очень удобно в отличие

00:06:03

от других библиотек

00:06:04

у других библиотек для создания

00:06:06

интерфейса на processing нету такого

00:06:08

билдер а то есть это что отличает

00:06:09

живопись от всего остального мы можем

00:06:12

закидывать кнопки лейблы и текстовые

00:06:16

зоны кстати все можно прямо отсюда

00:06:18

если попасть конечно можно все это все

00:06:21

это риса и зить слайдеры в общем самые

00:06:25

базовые элементы интерфейса которые

00:06:27

обычно есть они все здесь присутствуют

00:06:30

есть даже 2 мин двухмерных слайдер такая

00:06:32

прикольная штуковина это кстати джойстик

00:06:36

stick давайте посмотрим что это такое

00:06:39

крутилочка крутилочка

00:06:42

тут есть дроп-лист обычный вот он

00:06:44

работает с ними все в порядке давайте

00:06:47

тоже его добавим так что здесь можно

00:06:49

делать мы сейчас добавили в принципе все

00:06:51

базовые элементы интерфейса давайте

00:06:53

посмотрим а кстати тут еще можно окно

00:06:55

добавить второе то есть это тоже удобная

00:06:57

фишка мы сразу можем сделать окно на

00:07:00

него допустим не кидать кнопок мы

00:07:03

запустим наш скетч он сразу откроется в

00:07:05

двух окнах где он секунды что-то не

00:07:09

пошло не так он ругается на то что мы

00:07:12

сами не создали лист для нашего

00:07:15

дроп-листа я хотел к этому вернуться

00:07:17

попозже но давайте сразу покажу нажимаем

00:07:20

вот сюда и здесь можно создать лист

00:07:23

именно из пунктов которые будут

00:07:25

дропаться при нажатии то есть по

00:07:26

классике

00:07:27

кек чебурек

00:07:32

что еще сюда можно добавить не знаю

00:07:34

hello world

00:07:36

добавили мы список все он теперь тут

00:07:38

есть теперь должна запускаться без

00:07:40

ошибки да вот открылись наше своей

00:07:42

программки открылись два окна если

00:07:44

закрыть главное окно закроется и

00:07:46

вспомогательное так и так но все-таки не

00:07:50

нужно то кому интересно торт поиграется

00:07:53

нам интересно что здесь можно сделать

00:07:54

можно поменять базовые настройки у всех

00:07:57

компонентов например назовем кнопку там

00:08:00

старт название кнопки это не изменит

00:08:05

потому что от нас туза эта настройка

00:08:06

отвечает фэйс текст но кнопка start

00:08:09

она теперь будет называться стартом в

00:08:11

коде у нас это мы еще сейчас позже

00:08:14

вернемся пусть она останется как батон

00:08:17

тут у нас фэйс текст можно менять можно

00:08:21

менять положение текста на кнопки вверх

00:08:24

вниз но то есть по оси x и y можно

00:08:26

кастомную иконку подцепить

00:08:28

оно будет отображаться на кнопки можно

00:08:32

изменять положение вручную но мы это

00:08:34

делаем прямо здесь нам так проще и можно

00:08:38

менять цветовую схему и здесь немного но

00:08:40

есть еще кастомные которые можно задать

00:08:42

как то я не знаю как потому что я этим

00:08:44

не пользуюсь но давайте так вот оставим

00:08:46

что касается лейбла тут настройка тексты

00:08:50

размер и все такое больше настроек можно

00:08:53

найти у слайдера у него можно задать

00:08:55

минимальное и максимальное значение шаг

00:08:58

можно вот тесноте настройщик которые я

00:09:01

вам показываю то прилипать к тиком

00:09:03

сколько там тиков по показывают лимиты

00:09:05

то есть надписи справа слева по центру и

00:09:08

все такое то есть кто будет работать кто

00:09:11

английский знает я думаю с этим спокойно

00:09:13

разберется нам сейчас наш с вами

00:09:14

интересует больше как этим пользоваться

00:09:17

точки зрения кода что делать дальше

00:09:20

значит что здесь происходит у нас с вами

00:09:23

во вкладочке gui уже создались

00:09:25

автоматически из генерировались функции

00:09:27

эти функции вызываются при каких-то

00:09:30

действиях а ну при любых даже при любых действиях

00:09:33

с элементами интерфейса но и смотрите я

00:09:36

нажимаю на кнопочку и у нас в консоли

00:09:38

вылетают сообщение

00:09:39

то есть если я буду менять слайдер в

00:09:42

консоль и то же сообщение будет меняться

00:09:44

если что-то выигрываешь дроп-листа если

00:09:46

что-то покручу то есть эти функции у нас

00:09:48

автоматически создались и внутренних вод

00:09:51

есть print можно принят убрать можно

00:09:53

вставлять какой-то свой код который

00:09:56

будет что-то делать при взаимодействие

00:09:57

пользователя с интерфейсом значит

00:10:00

например давайте мы с вами сделаем

00:10:02

сделаем шарик сделаем шарик как в первом

00:10:06

уроке мы делали и например пусть у нас

00:10:09

слайдер меняет размер этого шарика то

00:10:11

есть для начала пусть пусть он будет

00:10:14

расположен где-нибудь не знаю примерно в

00:10:17

середине введём переменную переменную д

00:10:23

по умолчанию пусть она будет 50 нужно

00:10:29

еще нам ввести цвет пусть он будет

00:10:31

черный вот мы запускаем видим шарик

00:10:33

немножко неудачно

00:10:35

пусть он были где-нибудь здесь давайте

00:10:40

теперь при помощи слайдера менять размер

00:10:42

нашего шарика так я вот этот подвину

00:10:45

чудом друг на дружку стала наползать за

00:10:48

не слайдеру мы заднем значение начальная

00:10:51

пусть будет 50 то есть это тот которому

00:10:54

создастся черта не дает

00:10:56

50 сделай пожалуйста видимо превышает

00:10:59

максимум поэтому давайте сделаем 200

00:11:02

минимум минимум пусть будет 10 и

00:11:05

начальный 50 все вот теперь он его

00:11:08

создал перезапустим посмотрим что он

00:11:11

покажет но почему-то у нас слезал с

00:11:15

интерфейс давайте попробуем перенести

00:11:17

сюда так видимо это же как проблем

00:11:20

библиотеки

00:11:22

что-то где-то кто-то на винду сил так

00:11:25

это я немножко но инду силу можно было

00:11:27

вручную растянуть слайдер так чтобы он

00:11:29

занимался

00:11:31

чтобы его надписи попадали как раз вот в

00:11:33

эту рамочку то есть здесь все в принципе

00:11:35

нормально и так есть у нас слайдер как

00:11:39

из него теперь получи и значение мы это

00:11:41

можем сделать мы это можем сделать чтобы

00:11:44

на менять размер шарика только по

00:11:47

событию то есть когда мы поменяли возле

00:11:49

значение мы с вами идем обработчик

00:11:51

слайдера вот он слайдер 1 и чтобы

00:11:55

обратиться к его значение мы с вами

00:11:58

берем source вот эту вот переменную и у

00:12:02

нее берем значения как get целью и

00:12:07

то есть интеджер почему именно гибелью и

00:12:09

и откуда это берется и это взял из

00:12:12

примеров но можно это поискать

00:12:13

документации и посмотреть что еще можно

00:12:15

вернуть из этого класса можно вернуть

00:12:20

значение строки

00:12:21

string можно вернуть интеджер можно

00:12:23

вернуть float мы с вами вернем in jar но

00:12:26

нам потому что храним радиус своего

00:12:29

диаметр храним в интерьер и сюда его

00:12:32

подставим то есть мы его получили в

00:12:34

переменную записали

00:12:35

тут вывели запускаем проверяем вот можно

00:12:40

с вами при помощи интерфейса

00:12:42

меняем размер кружочка далее давайте по

00:12:46

нажатию на кнопочку пусть у нас задается

00:12:49

случайный цвет для вот этого нашего

00:12:51

шарика мы создадим переменную цвет

00:12:55

назовем ее color и давайте сменим color

00:12:59

мод на еще сбит

00:13:00

вот так и его оставлю так только должно

00:13:05

сделать субботе сетапе вот здесь и будем

00:13:08

при нажатии на кнопку нашей переменной

00:13:10

si лучше сделать укол

00:13:14

нажатии на кнопку у нас происходит вот

00:13:17

здесь батон клик мы теперь просто берем

00:13:19

там равно как color рандом от нуля до

00:13:26

трех 60 360 это по умолчанию величина

00:13:31

цвета здесь 200 5 10 5 насколько я помню

00:13:35

ну есть ничего не так ничего страшного

00:13:38

не случится

00:13:40

запускаем и видим что у нас цвет

00:13:43

меняется случайно так дальше давайте

00:13:49

пусть у нас крутилка вот это регулирует

00:13:52

размер обводки это тоже сделать очень

00:13:54

супер просто мы просто введём интервью

00:13:57

переменную на землю как-нибудь вот так

00:14:00

для начала и будем устанавливать

00:14:06

толщину обводки что же такое я каждый

00:14:10

раз в условии делаю ошибку и теперь

00:14:15

просто будем брать его здесь где он у

00:14:19

нас этот крутилочка когда она называется

00:14:21

кнопку то же самое просто берем и

00:14:24

приравниваем значение как int его и то

00:14:27

есть точно так же я сделаю и это все

00:14:31

получается давайте зададим другой цвет а

00:14:38

мы сами не установили диапазон изменения

00:14:41

для крутилки зайдем в редактор

00:14:43

интерфейса раз и видим что у нас своим

00:14:48

максимум 1

00:14:49

пусть максимум будет 20 например а

00:14:51

начальная будет как раз таки один все

00:14:54

перезапускаем

00:15:00

чтобы нам такого потрогать дальше

00:15:02

давайте пусть у нас слайдер двухмерной

00:15:05

вот этот отвечает за позицию нашего

00:15:08

шарика по осям x и y

00:15:10

значит для начала давайте его

00:15:12

сконфигурируем потому что непонятно что

00:15:14

здесь да как неудобно задано пусть будет

00:15:18

по иксу так конус размер окна для начала

00:15:22

480 на 320 на 480

00:15:26

и по игреку 320 введём

00:15:30

опять же переменные и мд икс игрек

00:15:36

присваивать ничего не будем штука

00:15:39

появится у нас в нуле теперь нам нужно

00:15:41

вот эти переменные x y записать текущее

00:15:44

значение сос слайдера мы это можем

00:15:46

сделать по изменению вот он наш слайдер

00:15:48

2d как нам достать значение из

00:15:50

двухмерного слайдера я не хочу копаться

00:15:53

в документации давайте просто мы откроем

00:15:55

пример и они как раз для этого и нужны

00:15:57

откроем слайдер 2d вот но здесь и просто

00:16:01

посмотрим вот

00:16:02

get вылью x x get в или x интер и y

00:16:06

интер все вот отдел копируем и просто

00:16:10

вставляем вот так вот так это у нас y

00:16:15

это у нас x и наверное все должно

00:16:19

работать до все работает

00:16:26

кажется я сломал слайдер он теперь

00:16:29

прилипает только к двум этим краям я

00:16:31

думаю нужно отключить прилипания у него

00:16:33

где это было вот вот таким вот образом

00:16:39

мы сами управляем нашим шариком так что

00:16:42

мы можем сделать дальше чтобы он еще

00:16:43

показать у нас осталось окно для

00:16:45

текстового ввода давайте брать из него

00:16:48

тексты писать его рядом с нашим шариком

00:16:51

заведем строку string string текст пусть

00:16:57

она пока что будет пустая и будем

00:16:59

отображать текст который наш текст будем

00:17:04

отображать рядом прямо с нашим шариком

00:17:08

осталось нам теперь получить этот текст

00:17:11

из нашего окна текстового ввода

00:17:14

я думаю тоже самое здесь через гид воле

00:17:16

но работает и она к сожалению не

00:17:19

работает давайте откроем пример

00:17:20

посмотрим как нужно его

00:17:22

выводить так что это такой за пример

00:17:27

текст серия а судя потому что есть сет

00:17:31

текст скорее всего есть get текст без

00:17:33

каких то заморочках вот так вот просто

00:17:36

на знание английского можно вывести

00:17:38

управление неизвестно библиотекой так

00:17:41

ничего у нас видим не выводится давайте

00:17:44

создадим пустую строку штук программа не

00:17:46

ругалась и вот у нас уже появляется наш

00:17:51

тех с которым мы вводим здесь все очень

00:17:54

просто и удобно

00:17:55

кстати большим плюсом этой библиотеке

00:17:57

является возможность редактирования

00:17:59

текста в окне ввода текста потому что в

00:18:02

пипец которую мы рассмотрим дальше такой

00:18:04

возможности нет то есть тут мы можем

00:18:05

выделить текст

00:18:06

его ударить можем скопировать можем

00:18:08

ставить то есть это полноценный

00:18:10

текстовый редактор в нашем интерфейсе

00:18:12

давайте напоследок еще разберем

00:18:14

дроп-лист как брать из него значение это

00:18:18

сделать тоже очень просто где наш друг

00:18:22

так это пример вот он наш друг лист и мы

00:18:26

можем брать из него через source

00:18:29

обращаться как

00:18:30

посмотрим в документации как нам достать

00:18:32

порядковый номер у дроп-листа

00:18:37

дроп лист и видим

00:18:39

герцель этот индекс i gersel этот текст

00:18:42

то есть мы можем получить как индекс s 0

00:18:46

скорее всего так и текст из дроп-листа

00:18:48

из текущего выбранного нашего пункта как

00:18:53

нам это применить я не знаю давайте

00:18:55

просто проверим как она работает вы

00:18:57

видим в порт вместо вот этого вот вот

00:19:01

это вот

00:19:02

source и скопируем прямо здесь

00:19:04

документации индекс теперь при выборе

00:19:09

нового значения буду получать его

00:19:12

порядковый номер в списке можно

00:19:14

прокручивать и все такое

00:19:18

еще один момент нам с вами вот это

00:19:21

билдер создает глобальной переменной

00:19:23

которую мы можем обращаться не только

00:19:25

вот здесь где они обрабатываются

00:19:27

автоматически но и можем обращаться в

00:19:30

любом месте кода через те же самые

00:19:31

функции которая тут у нас были то есть

00:19:33

что мы можем не менять давайте например

00:19:36

диаметра мы можем не брать его отсюда по

00:19:39

изменению а можем брать его сразу как

00:19:42

глобальная переменная где он где он где

00:19:45

он слайдера можно просто взять и вместо

00:19:48

b написать сюда слайдер один гид в

00:19:52

олимпии

00:19:53

то есть таким образом нам не придется

00:19:55

создавать еще одну переменную ее

00:19:57

значение по событию изменять здесь и

00:20:00

только потом возвращать сюда мы будем

00:20:01

сразу читать значение со слайдера

00:20:03

прямо вот здесь и работает это точно

00:20:06

также как а ещё тут есть момент я думаю

00:20:11

вы заметили что при некоторых действиях

00:20:13

с некоторыми компонентами мы получаем

00:20:15

сразу несколько

00:20:17

ивентов вот он пишет трест клик ты в

00:20:19

арию стези

00:20:20

знаешь как нам это использовать если мы

00:20:23

должны следить какое-то определенное

00:20:26

действие например клик по слайдеру мы

00:20:29

можем просто i want вот эту переменную

00:20:32

сравнить с этим значениям которое нам

00:20:36

подсказал с вами консоль то есть вот

00:20:39

таким вот образом

00:20:40

и например если я кликну по слайдеру

00:20:43

выполнится вот этот блок кода и точно

00:20:46

также можно делать со всеми остальными

00:20:47

элементами интерфейса и как-то более

00:20:50

интерактивно создавать свой интерфейс я

00:20:52

думаю мне удалось вам показать что джефф

00:20:54

api это очень мощная библиотека при

00:20:56

помощи которой можно буквально за

00:20:58

считанные секунды накидает простенький

00:21:00

интерфейс для управления своей

00:21:01

программой и это очень сильно поможет в

00:21:04

проектах где arduino связывается с

00:21:05

компьютером или есть 86 потому что

00:21:08

пообщаться по сети с ней тоже можно

00:21:10

прямо из processing это же все это

00:21:12

делается в несколько строчек кода личная

00:21:14

библиотека у джеффа пи не использую

00:21:16

просто потому что мне не нравится дизайн

00:21:18

какой то он очень мультяшный

00:21:19

ее ну не знаю как как то не очень хотя

00:21:22

пользоваться этим очень удобно и удобнее

00:21:24

чем control 5 которые мы сейчас и

00:21:27

переходим давайте создадим новый с вами

00:21:30

файлик

00:21:31

давайте сразу перейдем к примерам потому

00:21:33

что у control 5

00:21:34

они очень подробные их очень много и они

00:21:37

полностью заменяют документацию потому

00:21:39

что вник расписаны все все все все

00:21:41

возможности вот например взять ту же

00:21:43

кнопку запускаем пример виден с вами

00:21:46

кнопочки когда не здесь работают кстати

00:21:49

такой вот в принципе и приятный

00:21:51

интерфейс ucontrol 5 он идет сразу из

00:21:53

коробки ничего настраивать не нужно

00:21:54

здесь все в таких синих и тёмно синих

00:21:57

цветах мне в принципе от нравится если

00:22:00

мы откроем пример то увидим здесь кот

00:22:02

кот кот и ближе к концу примера мы

00:22:05

увидим полную документацию на каждый

00:22:07

конкретный вот этот контроллер то есть

00:22:08

на кнопочку можно применять вот эти вот

00:22:11

действия они к сожалению без

00:22:14

комментариев но с сознанием и

00:22:16

простейшего базового английского понятно

00:22:18

вообще что она как она работает давайте

00:22:21

вкратце пробежимся по примера мы

00:22:22

посмотрим что предлагает библиотекой

00:22:24

control 5 она позволяет объединять

00:22:27

элементы интерфейса вот в такие вот

00:22:29

вкладочки что может быть удобно есть вот

00:22:31

такие кнопочки в виде одной линии

00:22:33

вкладок как это обычно делают на

00:22:35

смартфоне для переключения есть в общем

00:22:38

простой в использовании построитель

00:22:39

графиков к сожалению без каких-то

00:22:41

разметок то есть чисто посмотреть на

00:22:42

форму сигнала есть checkbox и

00:22:45

видела таких простеньких квадратиков

00:22:47

есть готовая выбирал к для цвета которая

00:22:50

вызывается буквально одной строчки кода

00:22:52

конечно же есть выпадают

00:22:54

и списке которые к тому же можно

00:22:55

проматывать мышкой вот таким вот образом

00:22:58

есть возможность группировать элементы

00:23:00

интерфейса вот такие вот закрывающиеся

00:23:02

вкладочки то есть они независимы и в

00:23:05

отличие от первого примера который я

00:23:06

показывал а не отдельные есть крутилки

00:23:08

куда же без них причем могут работать

00:23:11

как вертикально так и горизонтально есть

00:23:14

вот такой вот забавный типа слайдер но

00:23:16

не слайдер то есть но они показаны

00:23:17

границы но его значение можно менять

00:23:19

колесико мыши вот таким вот образом а

00:23:23

также тянуть мышкой то есть эти слайды у

00:23:26

нас вертикальный он называется намбер

00:23:28

box вот это горизонтальный то есть это

00:23:31

аналог слайдера но не указанные пределы

00:23:33

есть вот такой забавный слайдер который

00:23:36

имеет начало и конец которые тоже

00:23:38

отдельно можно настраивать

00:23:39

тоже очень полезная штука может

00:23:41

пригодиться в каких-то таких странных

00:23:44

нетипичных настройках то есть можно

00:23:45

перемещать весь диапазон и можно менять

00:23:48

его границы конечно же есть обычный слайдер здесь он

00:23:51

выглядит вот так есть горизонтальные

00:23:53

есть вертикальные

00:23:54

есть вариант вот такой корочкой на

00:23:57

указателе двухмерный слайдер здесь тоже есть

00:23:59

выглядит он точно так же как в g4

00:24:02

и выполняет такие же функции есть

00:24:05

полностью готовый инструмент для

00:24:06

создания приложения с несколькими

00:24:08

вкладками то есть возможность

00:24:10

переключаться между окнами интерфейса

00:24:12

прямо в одном окне программы то есть вот

00:24:14

вот эти вот кнопочки они все находятся в

00:24:16

разных получаются окнах переключаются по

00:24:19

вкладочкам есть текстовое поле которое просто

00:24:22

выводит весь показанный текст но здесь

00:24:24

взаимодействуя с текстом никак нельзя то

00:24:26

есть можно просто его вывести для

00:24:28

взаимодействия с текстом есть текст

00:24:29

field тут можно вводить текст можно его

00:24:32

удалять но к сожалению чего здесь нет

00:24:35

как вы даже 4 пин например там можно

00:24:38

было выделять текст и вставлять его и

00:24:39

копировать здесь это не работает это

00:24:42

очень жалко но слава богу хоть можно

00:24:45

курсор перемещать при помощи кнопок на

00:24:47

клавиатуре так конечно отсутствует такая

00:24:50

важная фичу и очень жалко есть аналог

00:24:53

флажочки вот такой вот перескакивает вправо-влево

00:24:56

либо в качестве флажка включается и

00:24:58

выключается то есть от в принципе одно и

00:25:01

то же базовый элемент интерфейса помимо

00:25:03

этого тут есть еще несколько папок с

00:25:05

примерами

00:25:06

они тоже довольно интересно если

00:25:08

поизучать например можно создавать вот

00:25:11

такие матрицы средствами библиотеки в

00:25:13

библиотеке есть экспериментальная фича

00:25:15

при помощи которые можно создать вот

00:25:18

такой лист из слайдеров и создать лист

00:25:21

из меню тоже тут есть у него пример

00:25:23

готовый валюта ну вот так то есть это

00:25:25

несколько менюшек каждый из которых

00:25:27

можно чего-нибудь наполните они будут

00:25:28

виде вот такой вот списка для тех кто

00:25:30

знает английский в папочке юз есть

00:25:33

задокументированные примеры по

00:25:34

использованию control 5 например самый

00:25:36

первый пример который называется она

00:25:38

женщин содержит себе а самый базовый

00:25:40

пример создания интерфейса с кучей

00:25:43

подробных комментариев

00:25:45

советую это изучить утопическом такие

00:25:47

основные сложные моменты с ивентами и

00:25:50

всем прочим а мы с вами давайте создадим

00:25:52

простейший пример такой же как мы делали

00:25:55

на g4 пи то есть добавим просто кнопочку

00:25:58

и все такое для начала нам нужно

00:26:00

импортировать библиотеку

00:26:02

давайте не будем делать это вручную

00:26:03

просто откроем пример с кнопкой например

00:26:07

закидываем библиотеку создаем объект все

00:26:10

пять которая отвечает за интерфейс дали

00:26:13

им понадобится

00:26:14

вводится там обязательно и вот дро

00:26:18

так создали все все работает все

00:26:20

работает далее по правилам языка

00:26:23

нам с вами нужно се-5 инициализировать

00:26:26

то есть создать новый объект типа

00:26:30

control и 5 не указать ему dice далее

00:26:38

нужно добавить кнопку мы можем добавить

00:26:40

ее глобально то есть создать глобальную

00:26:41

переменную кнопки а можно добавить и

00:26:44

локально например просто вот здесь от

00:26:49

баттона это все есть в примере если что

00:26:53

и вот здесь в скобочках мы пишем

00:26:55

название по которому у нас будет создана

00:26:57

функция то есть но не созданы мы сами

00:26:59

создадим функции обработчик клика

00:27:01

назовем я например

00:27:03

батон и теперь через точку можно

00:27:05

применять параметры это может быть

00:27:07

установка позиции кнопки относительно

00:27:10

окно сэт позиция давайте 1010 например

00:27:15

координаты поставим и далее через точку

00:27:17

тоже можно применить например установить

00:27:20

размер кнопки это самые базовые

00:27:21

настройки остальных может не быть пусть

00:27:24

в ширину будет 100

00:27:25

в высоту например 30 все оставим точку

00:27:29

запятой не пропустил цифру 5 запускаем

00:27:33

все у нас есть кнопочка и вот так мы с

00:27:35

вами за одну строку кода создали

00:27:37

кнопочку и ее инициализировали теперь

00:27:40

чтобы нам получить с вами действия по

00:27:43

нажатию на эту кнопку мы в мы создаем

00:27:45

свою функцию называемые также как мы

00:27:48

назвали кнопку батон и эта функция будет

00:27:53

автоматически вызвано при нажатии на

00:27:55

кнопку в окне программы давайте чтобы

00:27:57

этот момент поймать мы выведем через

00:27:59

printer and click выведем слова клик вот

00:28:06

она появляется как можно видеть создать

00:28:09

интерфейс на базе контакты 5 тоже очень

00:28:12

просто конечно же делается это руками но

00:28:14

это удобнее чем на питоне и в тех

00:28:16

библиотека которые например я видел и

00:28:18

мне не очень понравилась мне здесь

00:28:21

нравится больше следующий небольшая

00:28:23

проблема это мелкий шрифт он мне кажется

00:28:25

мелким он на самом деле очень мелкие на

00:28:27

большом мониторе пользоваться такой

00:28:29

программы

00:28:30

быть просто невозможно но я запускал

00:28:32

приложение из processing на маленьком

00:28:34

ноутбуке и там она выглядела более менее

00:28:36

нормально но здесь конечно вообще не

00:28:38

огонь чтобы меня шрифт глобально у всего

00:28:41

интерфейса мы вызываем эй си пи 5z фонд

00:28:47

сад фонд и точно так же как в самом

00:28:50

первом уроке я вам показывал мы создаем

00:28:53

шрифт при помощи кредит фонд и указываем

00:28:58

здесь название шрифта и его размер ну

00:29:01

давайте пусть пусть будет ubuntu

00:29:03

мне нравится шрифт ubuntu надеюсь он

00:29:06

есть у меня на компьютере в системных

00:29:07

потому что здесь можно указывать только

00:29:10

шрифты которые уже установлены в системе

00:29:12

и размер ну пусть 20 посмотрим что

00:29:16

получится

00:29:17

до 6 увеличиваться и это явно шли в ту

00:29:20

бунту если мы хотим шрифт с другими

00:29:22

параметрами например bold italic или

00:29:25

другие они дописывают через пробел прямо

00:29:27

здесь ubuntu боб например и будет у нас

00:29:31

ubuntu болт и в принципе это все что

00:29:35

касается текста также вы могли заметить

00:29:37

что у нас кнопка сама кнопка надпись на

00:29:40

кнопке а совпадает с тем как мы указали вот

00:29:43

здесь то есть это все привязывается к

00:29:45

функции и например создать

00:29:47

с пробелом мы не можем потому что

00:29:49

создать функцию с пробелом в названии

00:29:51

тоже мы не можем но мы можем вызвать

00:29:54

параметры здесь которая называется сет

00:29:56

лейбл кстати вот это все дело можно делать на

00:30:00

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

00:30:03

и скорее всего

00:30:04

и указываем название которое нам

00:30:07

нравится например с маленькой буквы

00:30:10

напишу чтобы была разница баттона 1 и

00:30:13

так оно и будет называться только

00:30:15

почему-то все равно она сделалась капсом

00:30:17

думаю если поискать можно найти как

00:30:19

отключить автоматическое пир кейс не мне

00:30:23

этого делать не охота пусть он так и

00:30:24

будет следом давайте добавим слайдер мы можем

00:30:27

сейчас прямо скопировать кнопку

00:30:31

отличаться год только название слайдер

00:30:36

запустим посмотрим что получится да у

00:30:39

нас появился слайдер

00:30:41

но у него совпадает название так быть не

00:30:45

должно и пусть слайдер у нас тоже задает

00:30:48

размер как в прошлый раз назовем его со

00:30:51

из и позиция нужно опустить на высоту

00:30:55

кнопки ну то есть получается где-то 40

00:30:58

так не очень давайте 50 тут видим что у

00:31:06

нас уже происходит наложение название

00:31:08

потому что мы не очищаем дро давайте

00:31:11

будем его очищать как я показывал в

00:31:15

базовом уроки по посветлее наоборот

00:31:17

где-нибудь 110 наверное да в принципе

00:31:20

вот так уже хорошо эту нас слайдер мы

00:31:23

можем менять его значение можем колесико

00:31:25

мыши его менять и теперь как обратиться

00:31:28

к его значению мы с вами создаем функцию

00:31:31

опять же свою

00:31:33

называемые также как у нас называется с

00:31:35

вами контроллер здесь скобочках пишем

00:31:39

либо int либо флот то есть если мы

00:31:42

напишем флот валью

00:31:44

и например выведем его в порт в или

00:31:48

будет прям принимать значение текущие

00:31:51

какое у нас с вами на слайдере

00:31:53

но если мы сделаем int обратите внимание

00:31:55

здесь отображается сейчас флот если я

00:31:59

сделаю int то мы с вами получим

00:32:01

целочисленное изменения у слайдера это

00:32:03

тоже довольно удобно у слайдеры также

00:32:06

есть такой параметр как сет range где мы

00:32:10

можем задать мы минимальное и

00:32:12

максимальное значение давайте от нуля до

00:32:14

ста поставим и посмотрим что получится

00:32:18

клешни . запятой затесалась от нуля до

00:32:22

сотни

00:32:23

еще можно поставить количество тиков

00:32:26

здесь она задается как number of thick

00:32:31

маркс эту строчку можно скопировать из

00:32:33

примера давайте пусть будет 10 вот таким

00:32:39

вот образом она работает ну как можно

00:32:41

видеть казалось бы

00:32:43

109 на 10 10 но здесь она меняется по 11

00:32:46

поэтому количество тип марков нужно

00:32:48

брать на одну меньше чем количество

00:32:51

тиков

00:32:52

вру на одну больше чтобы менялась она

00:32:58

вот таким вот образом и сейчас мы на

00:33:01

минуточку прервемся и потому что я забыл

00:33:03

рассказать об одной очень интересные и

00:33:04

полезные штуки которая позволит

00:33:06

сэкономить кучу времени значит я вам

00:33:09

показывала как располагать элементы

00:33:10

интерфейса вручную то есть выбирать для

00:33:12

каждого свою позицию на окне программы

00:33:15

но это можно делать вручную что

00:33:17

естественно сэкономит кучу наших сил

00:33:19

работает это очень просто буквально

00:33:21

ничего не надо делать

00:33:23

напишем например се-5 это батон

00:33:27

называемый батон 1 не важно как как

00:33:30

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

00:33:33

мы напишем еще раз прямо сразу и ну

00:33:37

назовём как-то по-другому то программа

00:33:39

будет автоматически располагать кнопки и

00:33:41

любые другие элементы интерфейса друг за

00:33:44

дружкой то есть если они добавлю

00:33:46

следующую кнопку она будет расположена

00:33:49

следующий то есть в три строчки кода мы

00:33:52

сами сделали три кнопки которые уже

00:33:54

работают их ничего настраивать даже не

00:33:56

нужно знать как это работает при

00:33:58

добавлении каждого новый элемент

00:34:00

интерфейса он будет добавляться справа

00:34:02

чтобы на перенести строку мы добавляем

00:34:04

параметры

00:34:05

line break давайте добавим его на 2

00:34:11

кнопки чтобы сразу был понятен эффект он

00:34:14

перенесет строку и добавить кнопку уже

00:34:16

на следующей строке

00:34:17

таким образом можно добавить например

00:34:20

еще одно помощью ко мне давайте добавим

00:34:22

с например слайдера или этот угол

00:34:25

давайте добавим трогал

00:34:26

и на нем перенесён в строку и на

00:34:30

следующей строке добавим слайдер сеппи 5

00:34:34

слайдер давайте сразу же добавим еще

00:34:38

один слой для чтобы показать более

00:34:40

наглядно все мы с вами получили мерзких

00:34:44

кнопок один флажочек

00:34:46

и 2 слайдера кстати у слайдеров можно

00:34:49

сразу задать их диапазон и примеры этот

00:34:51

от нуля до десяти и этот ну пусть от 0

00:34:57

до 1 флот пусть будет от нуля до десяти

00:35:00

от 0 до 1

00:35:02

все то есть накидать интерфейс

00:35:05

простейший в процессинге можно за

00:35:06

несколько секунд но вы сами все видите

00:35:09

давайте сделаем нашу программу более

00:35:11

интерактивный

00:35:12

а именно поменяем размер окна немножечко

00:35:15

чтобы у нас был пошире отделим интерфейс

00:35:22

прямоугольником получим примерно вот

00:35:27

такую историю то есть я буду стараться

00:35:29

группировать интерфейс здесь а тут мы с

00:35:31

вами будем рисовать мы введём

00:35:32

точно также ведем с вами шарик шарик на

00:35:37

координатах x y с диаметром d диаметра

00:35:45

будем сдавать в обработчике действия по

00:35:48

слайдеру также давайте создадим цвет

00:35:53

назад и вокал и добавим цветовое колесо

00:35:57

здесь она называется

00:36:00

corvell и самое главное кушает ту

00:36:04

переменную где у нас хранится цвет вот

00:36:07

таким вот образом это все есть в

00:36:09

примерах я просто по памяти это пишу

00:36:11

указываемые положение где-нибудь

00:36:15

все у нас 10 по игреку где-нибудь 100

00:36:19

оно большое и его размер пусть тоже 100

00:36:22

посмотрим что получится здесь попала

00:36:25

здесь попал а вот тут можно и побольше

00:36:27

можно 120 130

00:36:30

и цвет мы указываем тот который мы как

00:36:34

раз таки меняем запускаем и все работает

00:36:39

может менять цвет при помощи готова вот

00:36:41

такого инструмента который вызвался

00:36:43

одной строчки кода мне кажется это

00:36:45

прикольно давайте добавим больше

00:36:47

интерактива и добавим дроп-лист

00:36:49

так откроем с ними примерчик тут

00:36:52

написано что / листы устарели нужно

00:36:54

использовать скролла был лист не будем

00:36:57

перечить раз рекомендуют давайте так

00:37:00

сделаем так просто копировались примера

00:37:04

позже разберемся здесь написано он

00:37:07

добавляет dropdown на позицию на своей

00:37:11

позиции 10 и где-нибудь

00:37:14

200 размер ладно и размеры кнопочку нас

00:37:19

тут есть так эта штука у нас требует

00:37:21

пока ее вскроем великоват опустим пониже

00:37:26

и немножечко его благороден сделаем

00:37:29

побольше

00:37:31

теперь нам нужно наполнить наш скраба

00:37:34

лист элементами у него есть такая штука

00:37:37

как это это мтс в которой можно передать

00:37:39

массив строк то есть я делаю массив

00:37:42

строк и его сразу инициализирую например

00:37:45

то есть пусть мы будем выбирать

00:37:48

геометрические фигуры вот хорошая идея

00:37:51

будет кружок будет rect

00:37:54

и будет какие через геометрические

00:37:57

фигуры

00:37:58

ну вообще есть треугольник мы создаем

00:38:02

именно массив строк то есть несколько

00:38:04

строк отдельно но я пропустил название

00:38:07

это у нас будет в этом за него лист мы

00:38:10

будем ничего придумывать и этот лист мы

00:38:14

передаем в этой teams запускаем

00:38:19

так эта штука у нас уже открыто и можно

00:38:23

вызвать ему метод клаус чтобы он

00:38:26

закрывался чтобы он запускалась сразу

00:38:28

закрытый вот таким вот образом

00:38:30

размер по игреку здесь отвечает за разом

00:38:33

максимальный размер открытого листа

00:38:35

давайте сделаем побольше

00:38:38

чтобы он открылся новый биржевой смотать

00:38:40

хорошо теперь создаем функцию обработчик

00:38:45

которая называется также как от листа и

00:38:48

можно тут скорее всего

00:38:50

in том да можно обратиться как к винту

00:38:55

давайте выведем проверим то есть я

00:38:59

ожидаю что ну нам будет возвращать

00:39:02

текущий номер текущего выбранного пункта

00:39:06

в нашем листе 01 да все правильно

00:39:09

работает теперь мы вводим глобальную

00:39:12

переменную фигура по умолчанию будет 0

00:39:17

будем ее приравнивать его здесь запустим

00:39:22

switch так 0120 у нас эта окружность то

00:39:29

есть мы просто рисуем окружность

00:39:31

один это квадратик он тут вроде как

00:39:36

сквозь называется едва треугольник с

00:39:40

треугольником все будет сложнее потому

00:39:43

что нам нужно задать три координаты даже

00:39:49

интересно какой будет треугольник если

00:39:51

вот актива задать треугольник получилось

00:39:54

не очень и вообще не видно что это такое

00:39:57

вообще у нас там есть такой размер как d

00:40:00

можно попробовать его сюда засунуть

00:40:03

чтобы менять динамически размер нашего с

00:40:06

вами треугольничка о

00:40:09

треугольничек меняется отлично теперь

00:40:12

можем менять у него цвет можем менять

00:40:15

форму и все это дело работает давайте

00:40:19

еще добавим в код крутилку это можно

00:40:23

сделать из примера

00:40:24

какой здесь называется кнопку открываем

00:40:29

пример копируем первый попавшийся и потом

00:40:33

разберемся так что у нас тут есть это

00:40:36

они создали отдельный глобальный нам он

00:40:38

не нужен мы создадим его локаль ника

00:40:41

давайте пусть у нас крутилка меняют

00:40:44

меняет пусть она крутит весь canvas то

00:40:47

есть вот так мы сделаем от 0 до 360

00:40:50

стартовое значение 0 позиция у нас 10 и

00:40:55

по игреку ну где-нибудь климатом

00:40:58

становитесь 70 пусть будет 320 радиус и

00:41:02

направление если написать горизонталь

00:41:04

horizontal то будет горизонтальная пусть

00:41:07

по умолчанию вертикальная вот так она

00:41:09

работает ну давайте горизонталь лучше

00:41:12

сделаем х вот так и теперь будем вращать

00:41:19

вращать вращать так для начала нам нужно

00:41:23

опять переменная куда мы будем все дела

00:41:25

вращать int rotation так сразу условимся

00:41:31

мы будем делать это в градусах но

00:41:33

поворот осуществляется у нас в радианах

00:41:36

нужно про это не забыть мы делаем воет

00:41:39

ног переводим сразу в int я забыл как мы

00:41:45

назвали переменную рот равна вал и

00:41:49

вращаем по оси не помню в какой еще

00:41:52

будем пробовать rotate ну допустим y на

00:41:58

величину рот получится не получится

00:42:00

сейчас узнаем кстати кстати вот она одна

00:42:06

из проблем control 5 у него отрисовка

00:42:09

идет последовательно в каком порядке мы

00:42:11

с вами создали компоненты в таком они и

00:42:13

отрисовываются это нам сейчас knob

00:42:15

который создан позже загораживает наш

00:42:18

друг down лист это очень обидно и никак

00:42:21

это не исправить насколько я читал на

00:42:23

форумах то есть придется менять

00:42:25

положение компонентов вручную вот таким

00:42:27

вот образом

00:42:29

создали мы наших rect

00:42:31

размер не работает так на во первых

00:42:36

нужно добавить обработчик 3d

00:42:40

пить ready и во-вторых мы забыли

00:42:43

перевести

00:42:44

угол в радианы то есть газ у нас градусы

00:42:48

мы пишем радианс все как в языке arduino

00:42:51

и сейчас он должно заработать

00:42:55

у иришки и ей мы повернули в 3d

00:42:59

немножечко не туда

00:43:00

это было у и z теперь нас крутится весь

00:43:04

интерфейс значит нам нужно вернуться

00:43:07

обратно на тот же угол после отрисовки

00:43:10

нашего с вами элемента то есть делаем

00:43:13

вот так и получаем вращение но вокруг

00:43:17

вот этой вот точки почему так происходит

00:43:20

я расскажу в отдельном видео по графике

00:43:23

в процессе потому что здесь все не очень

00:43:25

не очень просто и удобно

00:43:27

тут разные системы отсчета что касается

00:43:30

3d там вообще вообще работать не очень

00:43:32

удобно потому что мы фактически ставим

00:43:35

курсором где мы рисуем фигуру и в этом

00:43:38

месте и рисуем это особенности данного

00:43:41

языка так ребят забор я вам рассказать

00:43:43

про еще один момент а именно как

00:43:45

получает значение из наших элементов

00:43:47

интерфейса

00:43:48

не используя вот эту функцию обработчик

00:43:50

то есть допустим у нас ее нет но мы

00:43:52

хотим где-нибудь в коде получить

00:43:54

значение со слайдера и тут есть в

00:43:56

принципе два варианта первый вариант это

00:43:58

создать глобальный объект слайдера пишем

00:44:02

слайдер например назовем его слайдер 1 и

00:44:05

вот здесь я приравниваю этот объект к

00:44:11

нашей функции от слайдер то есть теперь

00:44:13

у нас слайдер 1 содержит в себе вот этот

00:44:15

слайдер который находится вот здесь

00:44:17

содержит позицию 150 30 остальные

00:44:20

настройки которые мы можем принц или

00:44:22

проинициализировать вот здесь теперь мы

00:44:24

можем просто забирать значение из нашего

00:44:27

слайдера давайте просто в принтером

00:44:29

запишем можно забирать как слайдер .

00:44:34

get белье

00:44:37

вот таким вот абсолютно нехитрым образом

00:44:40

то есть вот видите меняются от 0 до 255

00:44:42

и выводится вот здесь что еще можно

00:44:46

взять при помощи глобального обращения к

00:44:49

слайдеру открываем пример по слайдеру

00:44:52

и видим а вот эти вот то что нам

00:44:56

доступна она находится вот здесь

00:44:57

контроль и 5 слайдер то есть это

00:44:59

обращение к контроллеру который у нас

00:45:01

называется себе 5 вот этот объект

00:45:03

мы обращаемся именно к объекту слайдера

00:45:06

то есть тут можно что-то можно настроить

00:45:09

можно еще раз перенастроить его размер

00:45:11

то и все что можно сделать вот здесь мы

00:45:13

можем сделать и вот здесь в том числе

00:45:15

получить значение при помощи get вэлью

00:45:18

можно также получить максимум получить

00:45:20

минимум и все такое второй способ второй

00:45:24

способ заключается в том что мы не

00:45:26

создаем отдельным глобальную переменную

00:45:28

слайдера мы запрашиваем значение

00:45:30

слайдера напрямую из объекта siri 5

00:45:34

которые мы создали то есть это объект

00:45:36

нашего интерфейса делается следующим

00:45:38

образом мы к нему обращаемся как city 5

00:45:42

потому что здесь мы так его назвали

00:45:45

функция get и здесь мы указываем к чему

00:45:50

мы обращаемся к какому из элементов

00:45:52

интерфейса например слайдер и пишем .

00:45:56

класс далее через запятую указываем его

00:46:00

название как мы его назвали вот здесь то

00:46:03

есть вот так мы здесь его назвали и это

00:46:06

у нас будет с вами аналог от того

00:46:09

что мы создали глобально и обратились к

00:46:11

нему то есть вот здесь мы уже можем

00:46:13

обращаться как get вэлью

00:46:17

и эта строчка будет возвращать значение

00:46:20

текущие слайдера значит еще раз мы

00:46:22

обращаемся к xe5 get все перипетии это

00:46:26

наш в принципе интерфейс указываем ему

00:46:28

класс которым мы обращаемся это слайдер

00:46:31

и конкретный контроллер которым мы

00:46:33

обращаемся есть у нас было несколько

00:46:35

слайдеров например слайдера слои даден и

00:46:38

слайд 2

00:46:40

любят понижен допустим у нас есть мы

00:46:42

можем обратиться к ним обоим

00:46:44

к первому слайду один ко второму слайду

00:46:46

а потому что мы их так назвали это в

00:46:49

принципе все давайте тоже выведем

00:46:51

проверим вот слайд 1 выводит свои

00:46:54

значение и то же самое с текст фил дом

00:46:59

то есть это точно также можно достать из

00:47:02

него текст давайте это мы уберем

00:47:04

то же самое но вместо слайдера мы пишем

00:47:08

текст field прям так он здесь так

00:47:10

называется и назвали мы его input но у

00:47:14

него нету то есть у него есть конечно же

00:47:17

битва илью если вот так запущу она будет

00:47:20

работать но не будет ничего возвращать

00:47:22

адекватного потому что текст филда есть

00:47:26

отдельный метод для получения текста

00:47:28

можно открыть пример по текст fille du и

00:47:32

посмотреть что доступность здесь то есть

00:47:35

вот они вот эти вот все вот эти все

00:47:37

методы мы можем просто получить текст

00:47:41

как можете видеть все корректно

00:47:43

выводится то есть можно получать таким

00:47:46

образом доступ к необходимому

00:47:48

контроллеру то есть пигмент интерфейс и

00:47:50

даже не созданном глобально а прямо

00:47:52

запрашивая его значение из нашего

00:47:54

объекта цепи пять на этом я думаю мы

00:47:57

сегодня закончим я постаралась показать

00:47:59

вам примерно одинаковые примеры раз в

00:48:01

разных библиотек в создание интерфейса

00:48:04

показал как это работает на практике и в

00:48:06

дальнейшем все вот эти моменты мы будем

00:48:08

использовать для создания программы

00:48:10

которая будет управлять ардуиной но не

00:48:12

только управляется ной например

00:48:14

принимать ни о каких то датчиков данной

00:48:16

и выводить их на дисплей а также

00:48:18

некоторые спрашивали можно ли ввести

00:48:20

текст твои ноги и сохранять их файле

00:48:22

через processing да конечно можно это

00:48:24

делается

00:48:25

буквально в одну строчку кода там есть

00:48:27

отдельная функция которая сохраняет

00:48:29

текстов сохраняет текст прямо в файл

00:48:31

можно открыть открыть файл дописать туда

00:48:34

можно прямо формате и сисви сохранить то

00:48:37

есть виде таблицы в качестве программы

00:48:39

логгера тоже может работать делается это очень

00:48:42

просто обязательно рассмотрим вот видео

00:48:44

где мы будем связывать

00:48:46

arduino и processing а на этом сегодня

00:48:48

всё спасибо всем кто досмотрел до конца

00:48:50

увидимся в новых уроках

Описание:

В этом большом уроке расскажу как можно сделать интерфейс на Processing при помощи разных библиотек ►Первый урок: https://www.youtube.com/watch?v=2fs1tuUUJRM ► Огромный стартовый набор GyverKIT: https://kit.alexgyver.ru/ ► Уроки Arduino на сайте: https://alexgyver.ru/lessons/ ► Модули и датчики с Али: https://alexgyver.ru/arduino_shop/ ► Страница "Заметок Ардуинщика": https://alexgyver.ru/arduino_lessons/ 00:00 - Введение 01:23 - Библиотека meter 02:54 - Библиотека G4P 04:50 - GUI Builder G4P 09:13 - Интерфейс и код 21:31 - Библиотека ControlP5 26:00 - Начинаем кодить, кнопка 28:22 - Меняем шрифт 30:25 - Добавляем слайдер 33:00 - Автоматическое размещение 35:10 - Продолжаем кодить 35:55 - Добавляем выбор цвета 36:47 - Выпадающий список 40:18 - Добавляем крутилку 43:41 - Получаем значения разными способами Теги: ●●●●●●●●●●●●●●●●●●●● ► Основной канал: https://www.youtube.com/c/AlexGyverShow ► Поддержать автора https://alexgyver.ru/support_alex/ ► Официальный сайт: https://alexgyver.ru/ ► Почта: [email protected]

Готовим варианты загрузки

Популярные

HD видео

Только звук

Все форматы

* — Если видео проигрывается в новой вкладке, перейдите в неё, а затем кликните по видео правой кнопкой мыши и выберите пункт "Сохранить видео как..."

** — Ссылка предназначенная для онлайн воспроизведения в специализированных плеерах

Вопросы о скачивании видео

Как можно скачать видео "Делаем программу с интерфейсом на Processing"?

Сайт http://unidownloader.com/ — лучший способ скачать видео или отдельно аудиодорожку, если хочется обойтись без установки программ и расширений. Расширение UDL Helper — удобная кнопка, которая органично встраивается на сайты YouTube, Instagram и OK.ru для быстрого скачивания контента.
Программа UDL Client (для Windows) — самое мощное решение, поддерживающее более 900 сайтов, социальных сетей и видеохостингов, а также любое качество видео, которое доступно в источнике.
UDL Lite — представляет собой удобный доступ к сайту с мобильного устройства. С его помощью вы можете легко скачивать видео прямо на смартфон.

Какой формат видео "Делаем программу с интерфейсом на Processing" выбрать?

Наилучшее качество имеют форматы FullHD (1080p), 2K (1440p), 4K (2160p) и 8K (4320p). Чем больше разрешение вашего экрана, тем выше должно быть качество видео. Однако следует учесть и другие факторы: скорость скачивания, количество свободного места, а также производительность устройства при воспроизведении.

Почему компьютер зависает при загрузке видео "Делаем программу с интерфейсом на Processing"?

Полностью зависать браузер/компьютер не должен! Если это произошло, просьба сообщить об этом, указав ссылку на видео. Иногда видео нельзя скачать напрямую в подходящем формате, поэтому мы добавили возможность конвертации файла в нужный формат. В отдельных случаях этот процесс может активно использовать ресурсы компьютера.

Как скачать видео "Делаем программу с интерфейсом на Processing" на телефон?

Вы можете скачать видео на свой смартфон с помощью сайта или pwa-приложения UDL Lite. Также есть возможность отправить ссылку на скачивание через QR-код с помощью расширения UDL Helper.

Как скачать аудиодорожку (музыку) в MP3 "Делаем программу с интерфейсом на Processing"?

Самый удобный способ — воспользоваться программой UDL Client, которая поддерживает конвертацию видео в формат MP3. В некоторых случаях MP3 можно скачать и через расширение UDL Helper.

Как сохранить кадр из видео "Делаем программу с интерфейсом на Processing"?

Эта функция доступна в расширении UDL Helper. Убедитесь, что в настройках отмечен пункт «Отображать кнопку сохранения скриншота из видео». В правом нижнем углу плеера левее иконки «Настройки» должна появиться иконка камеры, по нажатию на которую текущий кадр из видео будет сохранён на ваш компьютер в формате JPEG.

Сколько это всё стоит?

Нисколько. Наши сервисы абсолютно бесплатны для всех пользователей. Здесь нет PRO подписок, нет ограничений на количество или максимальную длину скачиваемого видео.