Как нарисовать схему зала в фотошопе
Дизайнер или Вы сами проектирует вам графический файл, на котором будут размещены статические элементы вашего плана зала. Стены, перегородки, окна, двери и т.п. В этом случае можно нарисовать любой сложности схему, хоть в 3D варианте прибегая к любым сторонним графическим редакторам. Изображаете, например, зал в изометрии. Правда нужно будет и нарисовать в том же оформлении динамические элементы, например, столики и заменить инсталляционную поставку. После ого как у вас картинка будет готова, нажимаете "Изменить фон"
Изменение рисунка плана зала
Подставляем картинку, выбираем файл и жмем кнопку "Сохранить"
Фон редактировать средствами Presto уже нельзя. Вы можете только подкладывать готовые картинки. Картинка может быть примерно такого вида.
Иными словами, если вас не устраивает внешний вид зала, который предлагается по умолчанию, вы можете его сменить. Но для этого нужно иметь файл изображения, в котором хранится новая картинка подложки. При этом учтите, что использование файла изображения загружается в оперативную память вашего компьютера. И, если объем оперативной памяти на компьютере невелик, это может существенно замедлить работу программы.
Загрузка подложки выполняется с помощью команды ("Нарисовать план зала"). Подложка загружается только для текущего зала. При нажатии этой кнопки вызывается промежуточный диалог, в котором можно установить фон. Файлов подложек, которые входят в стандартную поставку программы, размещаются в каталоге "СБиС++ Presto\ Модули\ Presto-фронт\ Оформление\ Тачскрин\ план_Зала\".
Команда ("Удалить фон") уберет картинку, и столики в зале окажутся на чистом фоне . Так, как это показано в примерах на рисунках.
Вариант 2.
В системе "Presto" имеется встроенный редактор статических схем или плана зала. Используя редактор Presto можно нарисовать схему, можно ее перенести на другой компьютер, но у редактора ест определенные ограничения. Схемы рисуются на уровне примитивов и картинок. В поставке Presto имеется минимальный набор картинок для репозитория. Вы можете его пополнять своими изображениями. Фон у картинок должен быть прозрачный, поэтому подойдет формат gif.
Для включения рисования схемы зала нажимаем кнопку "Рисовать план"
Рисование плана зала
Динамические элементы пропадают и на экране отобразится окно с инструментами для рисования схемы зала.
Выбор элементов для добавления на рисунок плана зала
Presto поддерживает рисование 3-х примитивов, которые позволяют рисовать простейшие схемы. Если в окне иструментов дважды кликнуть на примитив, а затем кликнуть по примитиву, то можно отредактировать свойства.
Прямоугольник – произвольной формы и цвета прямоугольник. Можно рисовать, например, схематично утварь, какие-то перегородки. Свойства прямоугольника задаются в диалоге (см. ниже). Если нужно нарисовать однотонный прямоугольник, то рисуем рамку и заливку одним цветов. Нстроив прямоугольник нужного цвета, его можно размножить. Если кликнуть правой кнопкой мыши на прямоугольнике, то можно выбрать пункт меню "Клонировать". Размножить прямоугольников нужного цвета и разместить по месту и нужного размера.
Линия – произвольная линя, произвольной толщины и цвета. Можно рисовать перегородки и стены.
Текст – произвольный текст на фоне. Выполнять подписи. Например, название зала на схеме. Свойства текста задаются в виде
Кроме примитивов, жестко заложенных в программе, Presto умеет выводить на схему картинки. Картинки можно рисовать любые и выкладывать в репозиторий программы, по пути "Presto-фронт\Оформление\Репозиторий"
Картинка- произвольная картинка.
В поставке программы заложено 3 группы картинок "Двери", "Окна", "Лестница".
Все элементы можно двигать от клавиатуры. Пробелом активизируем перемещение. Двигаем курсором, удерживая <Ctrl>. Затем нажимаем пробел, положение сохраняется.
Добавление элементов при рисовании плана зала
Наличие картинок кроме примитивов позволяют строить очень стилизованные планы, например, так
Элементы для рисования плана зала
Фрагмент угла схемы построен из картинки лестница, примитива –стены в виде прямоугольника и фрагмента окна в виде картинки. Окно можно и другим цветом прямоугольником нарисовать.
Преимущество этого варианта рисования схемы в том, что ее потом можно редактировать в самой программе, т.е. пододвинуть статические элементы.
Кнопки управления на окне инструментов
"Вверх" - перейти на уровень выше в репозитории (выйти из папки)
"Очистить" - очистить схему текущей закладки на плане.
"Импорт" -загрузить схему из файла.
"Экспорт" - выгрузить схему в файл.
"Сохранить" - сохранить схему в базе данных.
"Зыкрыть" - закончить редактирование.
Схему можно нарисовать на своем репозитории и перенести на другой компьютер . Все элементы будут один в один, но схему можно будет редактировать (двигать, менять размеры и т.п.), но не добавлять элементы, которых нет в репозитории.
Разрабатываем библиотеку для отображения больших интерактивных схем залов на canvas без фреймворков и заставляем хорошо работать в ie и мобильных устройствах. Попутно разбираемся с особенностями работы canvas.
Во-первых, мне хотелось попробовать. А во-вторых, полноценная поддержка ООП.Да и строгая типизация, на мой взгляд, может уменьшить количество багов. А вообще я на PHP программирую, так что замечания по коду приветствуются.
Постановка задачи
Первым делом сформируем требования:
- Производительность: 5-10 тысяч объектов не должны смущать нашу библиотеку даже в ie
- На каждый объект можно навести курсор/кликнуть, и объект должен иметь возможность это обработать
- Схема должна масштабироваться и двигаться
- Адаптивность под размеры контейнера
- Поддержка touch устройств
Введение
Не будем тянуть и сразу посмотрим демо, так будет понятнее о чем речь.
В статье я буду вставлять только небольшие участки кода, остальное можно посмотреть на
GitHub
Вспоминаем, что canvas по сути картинка с api, поэтому обработка ховеров и кликов на нашей совести: нужно самим считать координаты с учетом масштаба и скролла, искать объекты по их координатам. Но в тоже время мы полностью контролируем производительность и рисуем только то, что нужно.
Постоянно перебирать все объекты на схеме и сверять их координаты не оптимально. Хотя это и будет происходить достаточно быстро, мы все равно сделаем лучше: построим деревья поиска, разбив карту на сектора.
Кроме оптимизации поиска, постараемся следовать следующим правилам работы с canvas:
requestAnimationFrame
У браузера есть свой таймер отрисовки, и с помощью метода requestAnimationFrame можно попросить браузер отрисовать наш кадр вместе с остальными анимациями, — это позволит избежать двойной работы браузера. Для отмены анимации есть cancelAnimationFrame. Полифил.
Кеширование сложных объектов
Не обязательно постоянно перерисовывать сложные объекты, если они не изменяются. Можно отрисовать их заранее на скрытом canvas, а потом брать оттуда.
Отрисовывать только видимые объекты
Даже если элемент выходит за границы холста, на его отрисовку все равно тратится время.
Особенно это заметно в ie, он честно отрисовывает все, в то время в хроме это оптимизировано, и на это времени тратится намного меньше.
Перерисовывать только изменившиеся объекты
Нет смысла перерисовывать всю сцену, если изменился один элемент.
Меньше текста
Отрисовка текста для canvas тяжелая задача, поэтому нужно избегать большого количества
объектов с текстом. Даже если хочется на каждое место поставить цифру — лучше ограничить отображение этой цифры масштабом: например, показывать цифру только при определенном приближении, когда эта информация будет полезна.
Архитектура
Scheme — основной класс.
View — класс знает canvas, на котором нужно рисовать, и его параметры (у нас их будет два).
SchemeObject — класс объекта схемы знает свое местоположение, как себя отрисовать и как обрабатывать события. Может содержать дополнительные параметры, например, цену.
EventManager — класс обработки и создания событий. При получении события передает его нужному классу.
ScrollManager — класс, отвечающий за скролл схемы.
ZoomManager — класс, отвечающий за зум схемы.
StorageManager — класс, отвечающий за хранение объектов схемы, создание дерева поиска и поиск объектов по координатам.
Polyfill — класс с набором поллифилов для кроссбраузерности.
Tools — класс с различными функциями, типа определения пересечения квадратов.
ImageStorage — класс создания канвасов для хранения изображений
Конфигурация
Очень хочется, чтобы у схемы были гибкие настройки. Для этого создадим такой нехитрый метод конфигурации объекта:
Теперь можно конфигурировать объекты так:
Это удобно: нужно только создать сеттеры у объектов, которые могут не просто установить значение в свойство, но и свалидировать или изменить значение при необходимости.
Хранение и отображение объектов
Первым делом нужно научиться просто размещать объекты на схеме. Но для этого нужно понять, какие объекты сейчас находятся в зоне видимости. Мы договорились, не перебирать постоянно все объекты, а построить дерево поиска.
Для построения дерева нужно разделять схему зала на части, записывать одну часть в левый узел дерева, а другую — в правый. Ключом узла будет являться прямоугольник, ограничивающий область схемы. Т.к. объект представляет плоскость, а не точку, он может оказаться сразу в нескольких узлах дерева — не страшно. Вопрос: как разбивать схему? Для достижения максимального профита, дерево должно быть сбалансировано, т.е. количество элементов в узлах должно быть примерно одинаковое. В нашем случае можно особо не заморачиваться, т.к. обычно объекты на схеме расположены практически равномерно. Просто делим пополам поочередно по ширине и высоте. Вот такое разбиение будет для дерева глубиной 8:
TreeNode — класс узла дерева знает своего родителя, своих детей и координаты квадрата содержащихся в нем объектов:
Теперь нужно рекурсивно создать дерево, заполняя его объектами. Это выглядит так: берем очередной узел, если глубина меньше установленной в конфигах — разбиваем объекты этого узла по разделяющей линии и создаем два дочерних узла, помещаем в них объекты.
Теперь нам очень просто найти желаемые объекты как по квадрату, так и по координатам. Здесь уже есть поправки на скролл и зум, про них чуть ниже поговорим.
При попытке нарисовать линию в 1px Вы можете получить неожиданный результат: она будет толщиной в два и полупрозрачная. Чтобы этого избежать, нужно сместить координаты на 0.5px.Подробное описание проблемы.
Еще мы можем легко определить, какие объекты лежат в зоне видимости и требуют отрисовки без перебора всех объектов:
Масштабирование
Зум — это просто. У canvas есть метод scale, который трансформирует сетку координат. Но нам нужно не просто зумить, нам нужно зумить в точку, в которой находится курсор или центр.
Для зума в точку нужно всего лишь знать две точки: старый центр зума (при старом масштабе) и новый, и добавить их разницу к смещению схемы:
Но мы же хотим поддерживать тач устройства, поэтому нужно обработать движение двух пальцев и запретить нативный зум:
В айфонах 6 и старше была найдена неприятная особенность: при быстром двойном касании возникал нативный зум с фокусом на канвасе, причем в таком режиме канвас начинал жутко тормозить. На viewport никакой реакции. Лечится так:
Класс, отвечающий за масштабирование: src/managers/ZoomManager.ts
Перемещение схемы
Я решил просто прибавлять к координатам смещение слева и сверху.
Правда есть метод translate, который смещает сетку координат. На момент разработки он показался мне не очень удобным, но, возможно, я им еще воспользуюсь. Но это все мелочи, больше всего нас интересуют вопросы обработки событий.
Некоторые люди при клике могут немного смещать курсор, это мы должны учесть:
Оптимизация
Вот вроде бы уже есть рабочий вариант схемы, но нас ждет неприятный сюрприз:
наша схема сейчас быстро работает только в хроме. Проблема в том, что при перемещении схемы в полном размере и зуме из этого полного размера, перерисовываются все объекты. А когда уже в масштабе помещается только часть объектов — работает нормально.
Сначала я хотел объединить ближайшие места в кластеры, чтобы место сотни объектов рисовать один при мелком масштабе. Но не смог найти/придумать алгоритм, который бы делал это за разумное время и был бы устойчивым, т.к. объекты на карте могут быть расположены как угодно.
Потом я вспомнил правило, которое написано на каждом заборе (и в начале этой статьи) при работе с canvas: не перерисовывать неизменяющиеся части. Действительно, при перемещении и зуме сама схема не изменяется, поэтому нам нужно просто иметь «снимок» схемы в n раз больше начального масштаба и, при перемещении/зуме не рендерить объекты, а просто подставлять нашу картинку, пока разрешение карты не превысило разрешение снимка. А потом уже и оставшиеся реальные объекты будут быстро рисоваться в виду своего количества.
Но эта картинка тоже должна иногда меняться. Например, при выборе места оно меняет вид и мы не хотим, чтобы выбранные места исчезали на время перемещения схемы. Перерисовывать весь снимок (в n раз больше начального размера карты) при клике дорого,
но в тоже время мы можем позволить себе на снимке не сильно заботиться о пересечении объектов и обновлять только квадрат, в котором находиться измененный объект.
Таким вроде бы нехитрым способом мы очень сильно повысили скорость работы схемы.
Спасибо, что дочитали до конца. В процессе работы над схемой я подглядывал в исходники fabricjs и chartjs чтобы меньше велосипедить.
Иногда в приложении надо показать модель помещения – допустим, кинотеатра или даже целого стадиона, если вы продаете билеты на концерт Metallica. Если в зале 50-100 тысяч мест, то для их вывода на экран нужно продумать плавный zoom, скроллинг и другие детали. Итак, главный вопрос – как показывать тысячи элементов на экране, чтобы это было удобно для пользователей?
Недавно мы писали о скроллинге диаграмм с помощью d3.js, а сейчас хотим поделиться другим кейсом. Рассказываем, как с помощью Canvas можно разработать интерактивную схему зала, которую просто встраивать в любые веб-приложения.
В одном из проектов мы разработали интерактивную схему зрительного зала с удобным выбором билетов. В основе проекта – достаточно стандартный стек технологий: HTML, CSS, JS, библиотека React.
В приложении на схеме зрительного зала необходимо отобразить расположение сцены, мест, стоимость билетов. Так пользователь сможет быстро разобраться, какие именно билеты ему подойдут.
Нам нужно было выбрать оптимальную технологию для реализации проекта с учетом следующих потребностей:
- Плавный zoom и scrolling – необходимы для отображения залов с большим количеством мест.
- Мини-карта для навигации по залу при максимальном приближении.
- Группировка мест по стоимости билетов, с выделением ценовых групп с помощью цвета.
- Тултипы для отображения информации о месте или секторе при наведении курсора.
- Возможность изменять наименования секторов, мест и рядов при проведении различных мероприятий в одном и том же зале.
- Кроссбраузерность и поддержка мобильных устройств.
- Гибкая конфигурируемость, которая позволит задать необходимые для конкретного мероприятия параметры, например, настройки увеличения и числа уровней zoom.
- Удобный и простой способ встраивания схемы в любые веб-приложения.
Выбор технологий
Для разработки приложения мы выбрали библиотеку React, чтобы повысить удобство и скорость разработки благодаря модульности, Virtual DOM и JSX. Для сборки мы взяли Webpack, который позволяет использовать множество различных плагинов для упрощения процесса разработки и поддержки большого числа браузеров.
Для решения задачи рендеринга мы выбирали из двух технологий:
Canvas обладает высокой производительностью, но в нём взаимодействие с элементами сложной формы требует реализации достаточно трудоемких алгоритмов. Эту проблему мы сначала попробовали решить с помощью библиотеки konva.js, но на схемах большого размера производительность была низкой.
После загрузки этих данных происходит парсинг SVG-документа с разделением на два отдельных документа: первый содержит элементы, предназначенные для взаимодействия с секторами, а второй – декоративные элементы. Первый документ рендерится поверх Canvas, а второй – в Canvas.
Рендеринг списка мест тоже осуществляем на Canvas, с учётом их доступности в квоте. Доступность мест выводится в зависимости от свойств конфигурации.
После этого получаем подобную схему:
Плавный zoom и scrolling
Для плавной анимации zoom на Canvas необходимо осуществлять множество перерисовок, что недопустимо при большом количестве мест, поскольку приложение начнет «тормозить». Мы нашли следующее решение: анимация либо уменьшает, либо увеличивает Canvas. При этом качество изображения снижается, поскольку Canvas – растровое изображение, но анимация происходит быстро, и человек не успевает увидеть искажения. С точки зрения пользователя происходит плавный zoom.
1) До применения zoom.
2) После применения zoom к Canvas. Изображение немного размыто, но пользователь этого почти не замечает.
3) После перерисовки мест (изображение снова чёткое).
При реализации скроллинга Canvas двигается вместе с курсором. Рассмотрим, что происходит, когда пользователь отпускает левую кнопку мыши (курсор) либо использует свайп в смартфоне. В этот момент Canvas перерендеривается с учётом смещения и возвращается в исходное положение. Поскольку для пользователя это происходит очень быстро, ему кажется, что отсутствующие элементы просто рендерятся.
1) До начала скроллинга.
2) Пользователь совершил скроллинг вправо, но не отпустил курсор (некоторые места в левой части схемы отсутствуют).
3) Пользователь отпустил курсор (отобразились отсутствующие места).
Таким образом, мы обратились к поэтапному рендерингу и реализовали плавную анимацию.
Далее расскажем о прочих задачах, реализованных при создании приложения.
Мини-карта
Группировка мест по ценам, с выделением групп с помощью цвета
Каждую группу мы выделяем заранее выбранным цветом. Для удобства пользователя предусмотрено верхнее меню, которое помогает определить цены в группе, а также сфокусироваться на подходящих группах.
В примере ниже пользователь фокусируется на билетах, стоимость которых выше 7000 рублей.
Тултипы
Например, ниже представлен тултип места, которое находится в углу схемы:
В нашем приложении предусмотрено два вида тултипов: для секторов и для мест. С помощью файла конфигурации и HTML-макетов можно настроить их содержимое (например, названия секторов, стилизацию тултипов).
Маппинги мест
Для того, чтобы не создавать новую схему для каждого мероприятия, мы использовали маппинг мест. Это JS-метод, который принимает имена секторов, рядов и мест, а затем формирует имена, соответствующие квоте конкретного мероприятия. Мы реализовали специальные методы в конфигурационном JS-файле для секторов, рядов и мест, чтобы иметь возможность переименовать их. В результате в приложении все обозначения можно изменить.
Кроссбраузерность
Мы провели масштабное тестирование на большом количестве устройств, а также в приложении BrowserStack для эмуляции других видов устройств, и убедились в корректной работе продукта.
Гибкая конфигурируемость
Удобство встраивания
Подводя итоги
В статье мы описали способ создания интерактивной веб-схемы помещения на Canvas. С помощью такого приложения пользователь может быстро и просто ориентироваться в схеме зала и выбирать места (билеты), которые ему подходят.
Есть много разных сервисов, облегчающих жизнь веб-разработчику или дизайнеру, в том числе создающих разные графики, диаграммы, блок-схемы и т.д. Ниже представлена небольшая подборка.
(Осторожно, много изображений)
Все картинки кликабельны и ведут на соответствующий ресурс.
Сервисы
Amcharts
AnyChart
Flash based решение для визуализации. Есть не только веб, но и десктопные приложения.
Autodesk
Предлагает инструменты для рисования схем электронных плат, диаграмм, различного рода UI. Не требует никаких дополнительных плагинов — требуется только браузер, работающий с JavaScript, является кросс-браузерным. Поддерживает экспорт в PDF, JPG, PNG, и SVG.
Barchart
Используется для построения столбчатых диаграмм, иными словами гистограмм.
Best4c
Best for Charts. Используется для построения различного рода диаграмм и схем.
Bubbl
Создает разноцветные схемы.
ChartDemo
Онлайн тулза для создания различных графиков, поддерживает метки и легенду.
ChartGizmo
Позволяет создавать различные графики для сайтов, блогов, профилей и т.д. Может быть полезен для визуализации научной, финансовой или какой-либо другой информации.
CreateAGraph
Онлайн-сервис, поддерживающий 5 разных графиков и диаграмм на ваш выбор.
DrawAnywhere
Блок-схемы, различные организационные, иерархические графики. Поддерживает экспорт в PDF.
Emprise
Поддерживает различные типы графиков, масштабирование по осям, авто-зум и т.д. Отличается высокой интерактивностью.
FlowingData
Работает прямо из браузера, рекомендуется для визуализации различной статистики.
Flowchart
Поддерживает рисование множества объектов (от линий и треугольников, до кривых Безье), экспортирует в PDF или PNG.
Fooplot
Простенький сервис, поддерживающий построение графиков и диаграмм.
Gliffy
Отличный сервис для создания различных диаграмм, очень приятный на вид интерфейс и множество возможностей.
Mindomo
Позволяет создавать и редактировать диаграммы связей.
Mindmeister
Очень гибкий инструмент для создания различных диаграмм связей.
MGraph
Простенькая тулза для создания диаграмм.
Pareto-Chart
Онлайн генератор графиков, поддерживает семь начальных инструментов бесплатно.
Rich Chart Live
Бесплатный сервис, поддерживает различные диаграммы, графики и т.д. Работает на Flash.
WebSequenceDiagrams
Сервис для создания схем. Ключевая особенность — описание схем на неком подобии языка программирования.
SimpleSeating
Отличный сервис для анализа различной информации.
Smartchart
Сервис для различного рода планирования, также поддерживает диаграммы, бесплатен.
Statistics Toolbox
Мощный инструмент для статистического моделирования и анализа. Позиционируется для изучения статистики на практике.
Track-n-graph
Простенький, но приятный на вид сервис для построения графиков.
Библиотеки, плагины, инструментарии для разработчика
Plotr
Легкий фреймворк для рисования простых графиков и диаграмм. Не использует Flash, и не поддерживает интерактивных элементов.
PlotKit
Библиотека для построения графиков на JavaScript, поддерживает HTML Canvas.
jqPlot
Open Source плагин для библиотеки jQuery. Поддерживает всевозможные линии и типы графиков.
Google Charts
Разнообразный набор инструментов для создания диаграмм и графиков, включая библиотеку на JavaScript.
Highcharts
Библиотека на JavaScript, предназначенная для создания интерактивных графиков и диаграмм.
Dygraphs
Еще одна библиотека на JavaScript, Open Source.
Protovis
Использует JavaScript и SVG для нативной визуализации.
jQuery Sparklines
Плагин для jQuery, генерирующий inline-схемы и графики.
jpGraph
Мощная библиотека, которая использует для отображения PHP.
jQuery плагин для построения графиков. На лету формирует графики по наборам данных.
JavaScript Diagram Builder
Простая библиотека для JavaScript, позволяет рисовать графики на веб-страницах.
gRaphael
JavaScript библиотека для внедрения графиков и схем на веб-страницу.
pChart
Полностью бесплатный php-фреймворк.
FusionCharts
Кому интересно, большая часть подборки взята отсюда.
Если кто-то считает, что в посте чего-то не хватает — пишите, добавим.
What You'll Be Creating
Photoshop за 60 секунд: Архитектурный Чертёж
Архитекторы - высококвалифицированные специалисты, которые создают необычные технические чертежи зданий и интерьеров. И вы можете добиться этого с помощью Экшена Photoshop. Просмотрите огромный выбор Экшенов Photoshop на сайте GraphicRiver, чтобы мгновенно преобразовать свои фотографии, которые помогут мгновенно преобразить вашу фотографию.
Посмотрите видео ниже, чтобы узнать, как создать отличный технический чертёж, а также скачайте Экшен Архитектурный Чертёж, о которым идёт речь в этом видео.
Создаём Архитектурный Чертёж в Photoshop
Откройте своё исходное изображение в программе Photoshop. Здесь я использую красивое изображение дизайна интерьера, взятое на сайте Pixabay.
Изображение Дизайн Интерьера от Pixabay.
Для доступа в панель Операции (Actions), идём Окно - Операции (Window > Actions). Далее, в выпадающем меню. выберите опцию Загрузить Операции (Load Actions), чтобы загрузить экшен, который вы хотите.
Перед применением эффекта, внимательно прочтите все инструкции. Создайте новый слой и с помощью инструмента Кисть (Brush Tool (B), прокрасьте участки, где вы хотите сфокусировать чертёж. Затем нажмите кнопку Воспроизвести (Play).
В зависимости от того, насколько сложным является данный экшен, его загрузка может занять несколько минут. Когда закончите, сохраните результат таким, как он есть или продолжайте экспериментировать с эффектом, используя дополнительные действия.
Вы можете увидеть итоговый результат на скриншоте ниже.
Посмотрите видео выше, чтобы узнать, как это работает!
Немного информации
Хотите узнать больше от наших экспертов. Тогда ознакомьтесь со следующими уроками:
60 секунд?!
Данный видео-урок представляет серию коротких видео-уроков на сайте Envato Tuts+, в которых мы представляем вам различные темы за 60 секунд - ровно столько, чтобы заинтересовать вас. Оставляйте свои комментарии об этом видео, а также, что еще вы хотели бы увидеть в следующий раз за 60 секунд!
Читайте также: