Расширение (плагин) SketchUp для проектирования мебели программистом
При расчете стоимости новой кухни цена оказалась такой большой, что я решил сделать её сам так как это обойдется в два раза дешевле. Для тренировки решил сделать для себя рабочий стол. Достаточно быстро пришло понимание: чтобы сделать хорошую вещь нужно сделать 3D модель. Это позволит на этапе проектирования посмотреть как будет выглядеть мебель и продумать как в дальнейшем будет происходить сборка. Так как 3D моделированием я не занимаюсь, то начал искать программу попроще. И самая простая что нашел SketchUp. При создании модели постоянно приходилось править модель из-за постоянно изменявшихся размеров. И после третьего изменения появилась идея — сделать параметризированную модель, чтобы она сама генерировалась с нужными размерами. SketchUp поддерживает скрипты на языке Ruby и эта статья о том что у меня получилось.
Решение достаточно простое — создаю некоторый API, который позволяет создавать 3D объекты листов ЛДСП с нужными параметрами. Из этих объектов компонуется готовая модель а также в отдельный файл выгружаются размеры листов для передачи их в центр распила. В результате эксплуатации добавил ещё возможность указывать кромки для листов. Данный плагин был использован для проектирования более десятка различных изделий из ЛДСП. С каждым новым проектом плагин дорабатывался и модифицировался, улучшалось удобство и совершенствовалось API. В качестве примера последний проект — стол-тумба. На картинке модель + готовое изделие (птица и собака для привлечения внимания :))
Красные — это 2 мм кромки, фиолетовый — кромки 0.4 мм. Нижние полки не до конца, так как там батарея отопления у стены. Столешница отстает от стены на 4 см чтобы тепло от батарее отопления поднималось вверх и обогревало стену (вообще делать мебель самому очень удобно — можно сделать под свои размеры).
Установка
Скачиваем файл Object3D.rbz
Запускаем SketchUp
Открываем Диспечер расширений (Окно/Диспечер расширений)
Жмем кнопку «Установить расширение» и выбираем скаченный файл Object3D.rbz
После этого плагин запрашивает директорию где будут храниться проекты. Т.е. выводится окно «Укажите директорию с проектами» и требуется указать папку где вы будете хранить ваши проекты.
В результате у нас появляется наше расширение
Использование
Переходим в папку которую мы указали для хранения проектов. Эту папку можно изменить в меню плагина
Создаем в папке директорию с названием нашего проекта. В моем случае это «Шкафчик в зал». Затем заходим в созданную директорию и создаем файл main.rb в котором создаем функцию точки входа
Перезапускаем SketchUp и в меню плагина у вас появится пункт с названием созданной вами папки. Теперь вы выборе этого пункта будет происходить следующее:
В функции object3D_main нужно сделать генерацию вашей модели. Можно скопировать в файл main.rb код который я приводил выше и тогда у вас сгенерируется мой шкафчик.
Файл «core.rb»
Каждая функция возвращает объект Shasoft::Object3D::Object3D который содержит методы для перемещения объекта и его поворота
Функция name() — установка имени объекта. Не стоит им пренебрегать. При сборке может сильно помочь 🙂
Функции объекта moveX, moveY, moveZ позволяют перемещать объект по соответствующим осям.
Функция move(x,y,z) позволяет переместить объект сразу по трем осям
Функции объекта rotateX, rotateY, rotateZ позволяют вращать объект вокруг соответствующих осей.
Есть функции псевдонимы moveRed, moveGreen, moveBlue, rotateRed, rotateGreen, rotateBlue где оси X(red), Y(green), Z(blue) названы по их цвету в SketchUp. Может кому-то так будет удобнее.
Каждая функция возвращает указатель на сам обхект. Это позволяет делать цепочку вызовов
Функция объекта set(dict,key,value) позволяет установить значение атрибута. dict — имя словаря, key — имя атрибута, value — значение
Функция объекта get(dict,key,value=nil) позволяет получить значение атрибута. dict — имя словаря, key — имя атрибута, value — значение
Метод copy позволяет получить копию объекта (хотя работает не очень стабильно :))
Метод group позволяет получить стандартный объект SketchUp::Group
Определен метод для создания объекта. В качестве параметров можно передавать список объектов Shasoft::Object3D::Object3D или SketchUp::Group. Если список параметров пустой, то будет создана новая группа
Также есть функция которая позволяет получить список объектов (Skechup::Group). Можно задать имя словаря и будут возвращены только объекты, у которых такой словарь присутствует. В частности именно так я отделяю объекты лист ЛДСП от других. При создании я устанавливаю словарь LDSP по которому потом и фильтрую все объекты сцены.
Файл «2D_weght»
Файл «ldsp.rb»
Вспомогательная функция для создания выдвижных ящиков
результат работы
в результате будет сгенерирован следующий csv файл со следующими колонками
В заключении
Проектирование и сборка мебели самому — это экономия денег где-то в 2 раза. А также возможность втиснуть ваше индивидуальное мебельное изделие в любую нестандартную дырку в квартире. Я обычно собираю мебель на конфирматах 7×50 из ЛДСП 16 мм
При наличии сверла для конфирматов
(и небольшого навыка) сборка занимает не так много времени.
Единственный минус — в это можно втянуться. После рабочего стола я уже собрал: кухню, несколько клеток (для одной и той же птицы она на фото), полки (навесные и напольные), тумбы и столы. В общем «захламил» в квартире все неиспользуемые места.
Пишем плагин для Google SketchUp
Google SketchUp — программа для быстрого создания и редактирования трёхмерной графики. Удобство и простоту SketchUp оценят, как начинающие работу с трёхмерным моделированием, так и профессионалы.
Но не все знают, что SketchUp обладает мощным API, с помощью которого можно создавать модули, добавляя в программу новый функционал. В этом посте я попытаюсь объяснить общие принципы архитектуры SketchUp и процесс разработки плагина. Перед написанием нового велосипеда плагина стоит поискать на сайте Sketchucation уже готовые реализации с необходимой для Вас функциональностью. Найдя подходящий плагин с открытым исходным кодом, можно реализовать требуемый функционал, оставив основную часть кода нетронутой. Например, плагин делает какие-то расчеты и построения, а вы только изменяете их применение или визуализацию.
Плагины для SketchUp пишутся на языке Ruby.
На Google Code представлена официальная документация по разработке. Она состоит из 3 разделов: Introduction, Quick Reference и Object Reference.
1) Introduction – вводный раздел, в котором показан пример создания простого плагина.
2) Quick Reference – справочный раздел по классам, методам.
3) Object Reference – справочный раздел по объектной модели SketchUp. Объектная иерархия очень удобно разбита по группам, что позволяет быстро искать необходимые для написания кода классы.
Пример разработки плагина я возьму из собственной практики. Для удобства работы требовался дополнительный функционал, отсутствующий в SketchUp. Задача состояла в быстром и удобном определении размеров объекта (ширина, высота, толщина). Готовый плагин с данной функциональностью был найден — GetDimensions, но у него был большой минус: он показывал размеры в MessageBox’e, который необходимо было постоянно закрывать, что создавало определенное неудобство. Я решил исследовать его код и изменить вывод результата.
Код плагина GetDimensions:
UI.messagebox( «Thickness: » + dims[0].to_s + «\nWidth: » + dims[1].to_s + «\nLength: » + dims[2].to_s)
end
if ( not file_loaded?( «GetDimensions.rb» ) )
add_separator_to_menu( «Plugins» )
UI.menu( «Plugins» ).add_item( «Get Dimensions» ) < get_dimensions >
end
Для установки, плагин необходимо скопировать в директорию “C:\Program Files\Google\Google SketchUp\Plugins\”, а программа автоматически подгрузит все скрипты из этой папки при запуске.
В данном плагине берется первый выделенный объект и его размеры. Размеры сортируются в порядке возрастания и показываются в MessageBox’е, а в панели состояния отображается название плагина.
Панель состояния меня сразу заинтересовала, и я решил перенести в нее вывод полученных размеров.
После небольшой модификации плагина мне удалось этого достичь:
def get_dimensions
model = Sketchup.active_model
entities = model.entities
boundingBox = model.selection[0].bounds
dims = [ boundingBox.height,
boundingBox.width,
boundingBox.depth ]
dims.sort!
Sketchup::set_status_text(( «Thickness: » + dims[0].to_s + «. Width: » + dims[1].to_s + «. Length: » + dims[2].to_s ), SB_PROMPT)
end
После выбора элемента, с помощью инструмента Select, выбираем в меню команду Get Dimensions. В результате на панели состояния будут отображаться размеры выбранного элемента. Для более удобного вызова команды следует назначить горячую клавишу.
Следующим шагом было сделать так, чтобы размеры автоматически показывались при выделении объекта. В голову пришло два варианта: сделать свой инструмент, который бы выделял элементы как инструмент Select, но при этом показывал внизу размеры, либо модифицировать инструмент Select, что бы он при выделении показывал размеры объекта.
После модификации логика плагина была разнесена на два файла:
require ‘sketchup.rb’
require ‘Dimensions/GetDimensions.rb’
$PluginMenuName = «Tools»
$DimensionsMenuName = «Dimensions Tool»
$GetDimensionsMenuItem = «Get Dimensions»
$AutoDisplayMenuItem = «Auto Display Dimensions»
if (not file_loaded?( «dimensions_load.rb» ))
pluginMenu = UI.menu($PluginMenuName)
dimensions = Dimensions. new
pluginMenu.add_separator
getDimensionsSubMenu = pluginMenu.add_submenu($DimensionsMenuName)<>
getDimensionsSubMenu.add_item($GetDimensionsMenuItem)
autoDisplayItem = getDimensionsSubMenu.add_item($AutoDisplayMenuItem)
getDimensionsSubMenu.set_validation_proc(autoDisplayItem)
end
require ‘sketchup.rb’
class Dimensions false
end
def onSelectionBulkChange(selection)
get_dimensions(selection)
end
def get_selection_dimensions
get_dimensions(Sketchup.active_model.selection)
end
def get_dimensions(selection)
boundingBox = selection[0].bounds
dims = [ boundingBox.height,
boundingBox.width,
boundingBox.depth ]
dims.sort!
Sketchup::set_status_text(( «Thickness: » + dims[0].to_s + «. Width: » + dims[1].to_s + «. Length: » + dims[2].to_s ), SB_PROMPT)
end
def connect_observer
if (@usedObserver) then
return remove_observer
else
return add_observer
end
end
def add_observer
@usedObserver = true
Sketchup.active_model.selection.add_observer self
return MF_CHECKED
end
def remove_observer
@usedObserver = false
Sketchup.active_model.selection.remove_observer self
return MF_UNCHECKED
end
def menu_checked
if (@usedObserver) then
return MF_CHECKED
else
return MF_UNCHECKED
end
end
end
Рассмотрим код подробнее.
Как я уже говорил ранее, задача плагина сводилась к отображению параметров объекта автоматически при его выделении. Т.к. дополнительный функционал не всегда нужен, решено было сделать его отключаемым. Auto Display Dimensions — позволяет включать его в нужный момент, а Get Dimensions – вызов плагина по запросу — был оставлен для большей гибкости использования.
Как видите, модернизирование существующего плагина намного проще, чем писание его с нуля. Кстати, я впервые писал код на Ruby, но благодаря большому опыту программирования, понять синтаксис не составило труда.
Желаю всем удачи в написании собственных плагинов для SketchUp.
Руководство новичка по разработке Sketch-плагинов
Часть 1 — С чего начать?
Вы хотите начать писать Sketch-плагины и не знаете, с чего начать? Продолжайте читать, так как этот пост как раз для вас!
Освоить базу не так просто. Есть масса примеров уже существующих плагинов, но очень сложно понять, с чего нужно начать. В помощь вам я собрал всю нужную информацию, которую только удалось отыскать, в одном месте.
Конечно, это не мануал по написанию плагинов для продвинутых, так как я сам не разработчик. Я UI/UX-дизайнер, которому иногда приходится кодить на довольно неплохом уровне (по крайней мере, я так думаю). Тру-программисты откровенно плачут, видя мой код, но я думаю, что как раз такой код хорошо понятен новичкам.
Если вы – инженер, который ищет более сложные примеры, вам будет полезен этот пост http://james.ooo/sketch-plugin-development, а также официальный сайт Sketch-разработчиков: http://developer.sketchapp.com/
Зачем писать плагин?
Плагины идеальны для автоматизации повторяющихся задач, они значительно упрощают работу и продакшн. Есть все шансы, что уже существует плагин под ваши нужды, так что сначала поищите готовое решение перед написанием своего. Очень вероятно, что кто-то уже справился с задачей лучше вас. Но если у вас уникальный рабочий процесс создания UI (как у меня с дизайном игровых интерфейсов в Unity), скорее всего вам потребуется кастомное решение.
Начало
Перед тем, как вы приступите к коду, установите все нужные программы и закладки.
Скопируйте эти настройки и нажмите Ok.
Фильтр Sketch появится в колонке слева.
4. Сделайте закладку папки Sketch Plugins для быстрого доступа, добавив ее в Избранное (Favorites) в окне Finder.
К этой папке вы тоже будете часто обращаться, так что желательно иметь ее под рукой.
Вот и все, вы готовы к написанию своего первого плагина!
Создание плагина за 10 простых шагов
В этом примере мы создадим базовый скрипт для получения названия страницы. Вам не нужно знать программирование, чтобы реализовать эту задачу, но она поможет понять базовые принципы. В последующих постах я буду документировать разные скрипты для получения разных данных из Sketch и их изменения. Этот пример самый простой.
Плагины Sketch пишутся на CocoaScript, который представляет собой смесь Objective-C/Cocoa и JavaScript. Я неплохо знаком с Javascript, так что тут сложностей не возникло. Не скажу, что я в CocoaScript, как рыба в воде, но моих знаний по JavaScript было достаточно, чтобы разобраться.
1. Создайте новую папку в каталоге Sketch Plugins и назовите ее MyPlugin.sketchplugin
2. Внутри папки создайте еще одну папку и назовите ее Contents
3. Внутри Contents создайте папку Sketch
Конечная структура папки плагина будет выглядеть так:
Внутри папки Sketch вы и будете создавать сам плагин, который состоит минимум из 2 файлов – манифеста и скрипта.
Манифест описывает плагин и может содержать разные горячие клавиши и дополнительные скрипты, он всегда называется manifest.json.
В скрипте содержится сам код плагина, и на него ссылается манифест. Имя можно изменять на свое усмотрение, но оно должно совпадать в обоих файлах.
4. В текстовом редакторе создайте новый файл под названием manifest.json и сохраните его в MyPlugin.sketchplugin > Contents > Sketch
5. Скопируйте и вставьте этот код в manifest.json, и сохраните.
Теперь MyPlugin появится в вашем меню плагинов Sketch. Вы можете изменить название плагина или горячую клавишу его вызова, и это отразится в меню Plugins в Sketch. Важно выбрать такую горячую клавишу запуска, которая не назначена для других установленных приложений или плагинов, иначе она не будет работать.
Теперь создадим MyScript.js, на который ссылается manifest. Убедитесь, что название файла совпадает с названием в файле manifest!
6. Вернитесь в текстовый редактор и создайте новый файл под названием MyScript.js, и также сохраните его в папку MyPlugin.sketchplugin > Contents > Sketch folder
7. Скопируйте и вставьте этот код в MyScript.js
Я детальнее поясню этот код в последующих частях. А пока что опирайтесь на комментарии в строках.
8. Перейдите в Sketch и откройте новый файл
9. В меню Plugins выберите MyPlugin > Get Page Names
10. Перейдите в консоль и внизу лога вы должны увидеть название страницы
Попробуйте изменить название страницы в Sketch-файле и перезапустите плагин. Лог должен показывать новое название. Добавьте еще одну страницу и переименуйте ее, а затем запустите плагин, консоль теперь покажет названия обеих страниц.
Вот и все!
Я работаю в Sketch всего несколько недель, и уже впечатлен его мощью и возможностями кастомизации. Вы можете скачать текущую версию плагина здесь.
Часть 2 – Пользовательские уведомления
Я открыл для себя отличный текстовый редактор Atom, на который и переключился. Не знаю, почему до сих пор не пользовался им, но теперь я попрощался со своим старым-добрым TextMate!
В предыдущей главе мы работали над плагином, который показывал названия всех страниц вашего документа в Консоли. Теперь изучим другие способы отображения информации. Они нужны, если вы хотите уведомлять пользователей (и себя) о разных вещах, например, о том, что плагин отработал, или что пользователю необходимо ввести какие-то данные. Также вам не придется постоянно переключаться в консоль, чтобы протестировать свои скрипты.
Есть два дополнительных способа уведомления пользователей внутри Sketch:
Для каждого способа есть свои случаи применения, и обычно вам не придется перегружать плагин (и пользователей) множеством сообщений. Поэкспериментируйте с обоими, чтобы понять, какой метод лучше для вашего собственного плагина.
Вернемся к скрипту плагина из первого примера и переделаем его.
Если рассматривать этот фрагмент кода, pageName ссылается на название каждой страницы в массиве страниц документа. Это контейнер с данными, содержащий всю информацию о странице. Обычно для доступа к этим массивам используются цикл for, которые итерируют через каждый объект, чтобы извлечь или назначить определенные значения.
В этой строке переменная pageName отправляется в Консоль.
Теперь добавим сообщение вниз скрипта, который будет отображать сообщение внутри Sketch, когда скрипт отработает.
Для этого мы добавим строку кода после скобки цикла for:
Doc – это переменная вверху скрипта, которая ссылается на документ, а showMessage – это встроенная функция, в которой мы можем передавать переменную или строку (String) для отображения сообщения.
Вот как выглядит ее добавление после цикла for в контексте всего скрипта:
Запустите MyPlugin через меню Plugins, чтобы увидеть результат. Внизу окна Sketch вы должны увидеть:
Этот тип сообщений полезен, если вам не хочется постоянно переключаться в консоль, или если есть что-то, что вы бы хотели показать пользователю, но что не требует его участия.
Если вы хотите более выделяющегося сообщения, которое требует от пользователя какого-то действия, лучше использовать alert box. Чтобы добавить его, допишите строку кода в начало скрипта, и еще одну после отображения предыдущих сообщений.
Первая строка добавляется вверх, над объявлением переменной doc, чтобы обратиться к самому приложению:
Вторая строка дает доступ к новой переменной для отправки сообщений в приложение.
И вот как выглядит конечный код с новыми строками:
Запустите MyPlugin с меню Plugin, и вы должны увидеть что-то такое:
Меняйте сообщения (те, что в кавычках) на что угодно и перезапустите плагин. Полная кастомизация!
Это самое начало отладки и отображения данных внутри Sketch. Вы можете попробовать изменить скрипты сообщений/уведомлений, добавить дополнительные скрипты для показа разных данных – переменных или счетчиков массивов.
Чтобы показать количество страниц в документе, вы можете создать сообщение с отображением pages.count().
Вот таким будет результат:
Мы разобрались с пользовательскими уведомлениями! Сначала подготовили среду для разработки, затем разобрались, как дебажить и отображать сообщения внутри Sketch. Далее мы сфокусируемся больше на самом коде, поиске конкретных данных и способах их обработки.
Текущую версию плагина можно скачать здесь.
Часть 3 – Написание кода для многоразового использования
Настало время развернуть мониторы вертикально, потому что мы приступаем к программированию!
В этой части мы раскроем базовые концепты написания кода, создание функций для многократного вызова, а также линкование двух скриптов вместе. Если вы уже освоились в написании скриптов, можете просто проскроллить вниз до конца этой части, скачать исходники и переделать их на свой лад. Если же вы новичок в этом деле, или вам нужно освежить знания, продолжайте читать!
Базовые концепты написания кода
Есть код, который мы уже написали, и он включает в себя переменные, массивы, функции и циклы for. Эти элементы, а также операторы if/else, и есть фундаментальные кирпичики всего, что я делаю. Как только я освоил эти элементы (особенно, цикл loop), мне стало гораздо проще понимать скрипты. Я пишу свои скрипты на Javascript и Objective-C, но эти концепты довольно универсальны для любого языка программирования. Вам просто нужно выработать определенный способ написания кода.
Я бегло поясню эти понятия:
Переменная – это ссылка на какой-то тип информации. Это может быть как строка (кусок текста), так и число или булевское значение (true или false). Это горячая клавиша доступа к значению, и очень удобно использовать именно ее вместо того, чтобы печатать его руками снова и снова.
Если я задам для myName значение “Mike”, тогда я просто могу писать везде в скрипте myName, и эта переменная будет ссылаться на “Mike”. Но если я захочу, чтобы значением myName стал “Shawn”, мне нужно будет изменить его только один раз в объявлении переменной, и каждая ее сущность в коде также изменится.
Массив – это тоже переменная, но обычно он содержит несколько однотипных значений. Как если бы у вас был массив дней недели, вы бы увидели стринговое значение всех дней внутри такого массива.
Вы также можете написать его так, будет проще увидеть количество элементов массива, которые начинаются с 0:
Функция – это многократно используемый фрагмент кода, который выполняет определенную задачу. Обычно вы их задаете, если нужно делать что-то снова и снова. Вы можете передавать в нее переменные, заставлять их возвращать значение или держать их пустыми.
В примере выше каждый раз, когда вы хотите закрыть глаза, вы можете вызывать функцию closeEyes(), затем для их открытия вызывать openEyes().
Оператор if/else делает именно то, что говорит, т.е. проверяет какое-то условие, производит определенное действие, если условие выполняется, в противном случае выполняет что-то другое.
Цикл for используется для повтора определенного блока кода известное количество раз. Например, в массиве daysOfTheWeek, если бы вы хотели вывести значения массива в список, вы бы воспользовались для этого циклом for.
Без цикла вы бы писали так:
А с циклом вам бы пришлось написать всего лишь:
Гораздо проще, правда? Для цикла мы задали начальное значение i, равное 0 и считали, пока i не достигнет количества значений в массиве daysOfTheWeek, т.е. 7. То есть начиная с i=0, цикл логирует значение daysOfTheWeek, потом добавляет к i 1, и все повторяется. Всего это проделывается 7 раз, пока не достигается полный набор значений в массиве.
Создание функции окна оповещения (Alert Box)
Вернемся к кодуMyPlugin. В предыдущей части мы создали окно оповещения, которое отображалось после отработки скрипта.
Выглядит как что-то, что будет использоваться каждый раз, когда нам понадобится показать сообщения пользователю, и не особо хочется каждый раз прописывать всю строку кода для каждого такого сообщения. Это особенно актуально, если отображаемое сообщение – это комбинация переменных и строк, код может быть довольно длинный.
Отличный повод сделать повторно используемую функцию, и для этого нужно прописать:
Каждый раз, когда мы вызываем alert() и передаем заголовок и сообщение, будет отображаться окно оповещения.
Добавьте эту функцию в конец скрипта, после скобок функции onRun:
И теперь мы можем изменить код, написанный ранее, заменив им исходную ссылку на переменную, так как теперь она прописана в функции. Скрипт теперь выглядит так:
Запустите плагин, и вы будете видеть такой же результат, как раньше, но теперь ваш код ссылается на функцию. Ее можно вызвать в любом месте скрипта, и не нужно будет переписывать код снова и снова. Но что если бы у нас был другой скрипт, в котором нужно использовать эту функцию?
Ссылка на скрипты из других скриптов
И вот тут уместно создать библиотеку. Иногда у вас есть общая функция, которую не стоит привязывать к какому-то одному скрипту. Как в случае с функцией alert(), или с функцией округления числа до ближайшего целого. Это общие функции, которые, скорее всего, будут использоваться в разных скриптах. Поэтому вместо копипаста функции в каждый файл вы можете создать общий файл, и вставлять его по необходимости.
1. Сохраните новый JavaScript-файл в ту же папку, в которой хранится MyScript.js, и назовите его common.js. Теперь в папке будет 3 файла:
2. Вырежьте функцию alert из MyScript.js и вставьте ее в common.js и сохраните изменения.
В common.js должен быть только этот код:
3. Чтобы запустить этот скрипт из MyScript.js, добавьте эту строку кода вверху скрипта и сохраните:
Весь скрипт с новой строкой вверху и удаленной функцией alert() выглядит так:
Запустите плагин еще раз, он должен работать, как и раньше, но теперь вы запускаете функцию из общего скрипта! Оптимизация завершена!
Теперь у вас есть основы написания и понимания более сложных плагинов. Далее мы изучим доступ к данным документа Sketch через его переменные и массивы, способы прохождения по этим массивам для извлечения и назначения нужных нам значений.
Вы можете скачать текущую версию плагина здесь.
Часть 4 – Примеры из реального мира
Мы уже научились, как организовывать среду для написания и отладки кода, как отображать разные виды пользовательских уведомлений, а также освоили базовые понятия написания кода. Кажется, у нас есть все, чтобы начать писать собственные плагины.
К счастью, Bohemian Coding имеют документацию по своим классам:
http://developer.sketchapp.com/reference/class/
К сожалению, как пишется вначале этой страницы, она все еще “в стадии разработки”. Так что не все еще описано, и не так много примеров, что с этим всем делать.
Лично я лучше всего учусь на примерах. Понимание кода может вызывать большие трудности, но когда вы видите, как он используется применительно к вашим знаниям и целям, становится гораздо проще. Я приведу три примера, которые нашел, пока работал со Sketch, надеюсь, вам они окажутся полезными!
Пример 1: Переключение высоты и ширины артборда.
Странно, но в стандартном функционале Sketch нет смены ориентации артборда с портретной на альбомную и наоборот. Я поискал, и не нашел ни одного плагина, который решает эту проблему, так что самое время создать наш собственный!
Для ясности давайте определимся, что мы будем делать. Это помогает определить цель, способы ее достичь, а также выявить крайние случаи, с которыми придется столкнуться. Это почти как создание UX-сценария, правда?
Для этого плагина мы напишем скрипт, который выполняет следующее:
Добавление еще одного скрипта в MyPlugin
Вместо добавления новой порции кода в MyScript.js, давайте создадим новый скрипт под названием RotateArtboard.js, и сохраните его в папку MyPlugin.sketchplugin.
Добавьте этот код в RotateArtboard.js. Каждый основной скрипт должен быть в функции onRun, так что этот скрипт всегда является хорошей базой для старта:
Вы увидите, что мы импортируем файл common.js, чтобы использовать ту же функцию alert, которую мы уже создали.
На данный момент в папке плагина должны быть следующие файлы:
Теперь откройте manifest.json, чтобы добавить еще один скрипт в наш манифест.
Скопируйте фрагмент кода со всеми командами MyScript.js, добавьте запятую после блока MyScript, и вставьте перед закрывающейся скобкой commands, вот так:
Теперь вы видите новый скрипт в меню MyPlugin (можете менять горячие клавиши, кстати):
Чтобы узнать, что выделено, используем следующее:
Этот код создает переменную типа массив со всеми выделенными слоями. Теперь мы можем проверить этот массив, чтобы узнать, есть ли что-нибудь внутри него. Если там 0, тогда ничего не выделено, и мы скажем пользователю, что нужно что-то выделить.
Но если счетчик не 0, тогда внутри массива что-то есть, как минимум, один слой должен быть выделен. Теперь мы можем пройтись циклом по выделенным слоям, чтобы определить, есть ли среди них артборды (MSArtboardGroup):
Вы можете использовать эту же технику для проверки, является ли выделение текстовым слоем (MSTextLayer), группой (MSGroupLayer), фигурой (MSShapeGroup / не задокументированная), импортированным изображением (MSBitmapLayer) или символом (MSSymbolInstance / не задокументированная).
Чтобы получить высоту и ширину артборда, сначала нужно получить его фрейм. И уже из фрейма можно извлечь значения, и назначить новые.
Создайте переменную под названием artboard на основе элемента массива в цикле for, и так мы сможем получить текущие размеры. Использование цикла for позволяет работать с несколькими выделенными артбордами одновременно.
Теперь создайте две новые переменные со значениями, которые нам нужны, т.е. поменяйте местами ширину и высоту:
Затем воспользуемся artboardFrame, чтобы задать высоту и ширину новыми переменными:
И, наконец, мы воспользуемся нашим окном уведомлений, чтобы сообщить пользователю об отработке скрипта и отобразить новые значения:
Вот весь скрипт с комментариями:
Подытожим пример 1:
Пример 2: Выделение слоев и их переименование на имя символа
Вот еще одна проблема из реального мира, которую я обнаружил, работая с символами. Если я добавляю новый символ из своей библиотеки, имя слоя изменяется на имя символа. Если я переключаюсь на другой символ, название слоя все равно остается без изменений. Иногда я хочу задать свое название слоя, а иногда просто хочу переключить его на название нового символа. Вот еще один идеальный повод написать плагин!
Для этого примера, скачайте файл Sketch для справок.
В файле Sketch на первом артборде вы увидите символ под названием Square, он находится по центру. Также в библиотеке есть еще один символ под названием Circle.
Выделите Square, и используя опции справа измените Square на Circle
Теперь посмотрите на слои слева – слой все еще называется Square! Я думаю, что мог бы изменить название вручную, но это не прикольно, особенно если изменить нужно множество сущностей.
Сценарий для этого плагина такой:
Вы заметите, что у нового и предыдущего скрипта много общего – та же проверка на выделение, и определение типа выделенных объектов. Так что мы можем воспользоваться готовыми наработками, но все же это довольно специфический случай, так что будем создавать отдельный скрипт.
Следуя первым шагам из предыдущего примера, давайте добавим еще один скрипт в MyPlugin.sketchplugin, создав новый файл под названием SetLayerNameToSymbolName.js и добавим его в manifest.json. Чтобы сэкономить время, просто используйте RotateArtboard.js и “Save As”. Мы будем использовать этот скрипт очень часто, так что начнем отсюда и сделаем несколько изменений.
аша папка сейчас содержит такие файлы:
В этом скрипте, вместо проверки, является ли выделение MSArtboardGroup (артбордом), мы проверим, является ли оно MSSymbolInstance (символом). Если является, мы выясним название symbolMaster и сравним его с названием слоя.
И вот вам новый скрипт с парой измененных строк:
Подытожим пример 2
В этом примере мы усвоили:
Пример 3: Задание названий символов в качестве названий слоев
Предыдущий скрипт работает идеально, но иногда мне не хочется выделять каждый слой вручную. Иногда после разбрасывания кучи символов по документу я просто хочу привести все названия слоев в соответствие с названиями символов без выделения слоя. Для этого понадобится изменить следующее:
Так как мы теперь не учитываем, что сейчас выделено, нам придется изменить скрипт, чтобы он прошелся по данным страниц документа. Затем мы воспользуемся рядом вложенных петель for, которые будут итерировать по массиву артбордов, затем по массиву слоев, и наконец, дойдут до каждого слоя. Цикл for внутри цикла for, который внутри цикла for.
Наверное, для этой задачи мы создадим еще один новый скрипт. Начните с нового файла под названием SetAllLayerNamesToSymbolNames.js и также добавьте его в manifest.json, как мы делали раньше.
Теперь в папке MyPlugin.sketchplugin будет столько файлов:
И плагин в вашем списке меню, вместе с предыдущими примерами должен отображать новую опцию, как только вы добавите новый файл в манифест:
Чтобы извлечь данные страниц документа, используйте следующий код:
Чтобы получить артборды страниц, используйте цикл for:
Чтобы получить слои артборда, используйте цикл for внутри цикла for:
Далее, чтобы извлечь каждый отдельный слой, вам нужно пройтись по слоям внутри цикла for, и затем проверить, что это за слой:
Как только мы установили, что это слой символа, мы можем проверить его название и сравнить с названием слоя. Если они отличаются, меняем название слоя на название символа, и все!
Вот как выглядит весь скрипт, для простоты понимания почти каждая строка прокомментирована:
Подытожим пример 3, тут мы научились:
Вывод
Это всего три примера, как можно начать использовать базовые понятия доступных классов Sketch, изученных ранее. Тут еще многое можно сделать, но мы пока только начинаем! Далее мы рассмотрим еще больше способов доступа к дополнительным классам внутри Sketch, еще больше примеров из реального мира.
Вы можете скачать текущую версию плагина здесь.
Часть 5 — Класс MSLayer
Мы уже ознакомились с реальными, рабочими примерами того, что могут сделать классы в Sketch, так что можно углубиться в их изучение дальше. В этой части мы сфокусируемся на классе MSLayer, а затем изучим классы, наследующие этот.
Класс MSLayer – это базовый класс всех слоев в Sketch, и все другие типы слоев – это подклассы, наследующие его. Все, что вы добавляете в ваш документ, является изначально слоем – страница, артборд, группа, фигура, текст, изображение и т.д. Все это – подклассы класса MSLayer, и они могут все, что может класс MSLayer, и даже больше.
Чтобы лучше понять терминологию, есть два типа данных, доступных через класс:
Документация на сайте разработчиков уже содержит неплохую базу атрибутов и методов классов. Так что мы нет смысла воспроизводить все здесь. Вместо этого я покажу вам самые простые способы просмотра атрибутов слоя и использования его методов в реальном мире.
Получение атрибутов слоя
В предыдущей части мы рассмотрели два способа получения данных о слое: с помощью цикла по массиву выделения, а также путем гнездования петель for в массиве страниц документа.
Предположим, что вы использовали массив выделения, чтобы получить переменную под названием layer:
Зная, что все слои – это подклассы базового класса MSLayer, мы можем получить некоторые атрибуты из любого типа слоев, независимо от его специфики, а затем хранить их в виде переменных для доступа в будущем.
Некоторые атрибуты являются на самом деле сущностями других классов, и имеют свои собственные атрибуты и методы на базе этих классов. Для них я покажу пару примеров, как вы можете углубиться в данные. Но для более тщательного изучения вопроса используйте ссылку на документацию.
Вот несколько атрибутов, которые доступны в классе MSLayer:
Класс (тип слоя):
Фрейм (размер и положение, относительно его артборда, сущность MSRect):
Стиль (границы, заливки, тени, внутренние тени, сущность MSStyle):
Название слоя:
Видимость:
Статус блокировки:
Отражение (горизонтальное или вертикальное):
Поворот:
Родительская группа (страница, артборд или группа):
Статус выделения:
Absolute Rect (глобальный размер и положение в целом документе, сущность MSAbsoluteRect):
CSSAttributeString:
CSSAttributes:
В документации есть еще несколько, но это те, которые я обычно использую. Я выбрал на основе нужд скрипта. Но если вы действительно хотите сохранить все эти атрибуты сразу в переменные, вы бы могли сделать нечто такое:
Затем вы можете использовать консоль для логирования любых переменных, которых хотели бы видеть:
Использование методов
Теперь, когда мы научились получать атрибуты слоя, мы можем использовать методы для их настройки. В классе MSLayer есть несколько доступных методов, которые позволяют менять конкретные атрибуты любого слоя. Их названия выдают их действия:
setName
setIsVisible
setIsLocked
setRotation
setIsFlippedHorizontal
setIsFlippedVertical
setIsSelected
дублирование
Теперь вы можете создавать разные типы плагинов, просто извлекая атрибут слоя и перенастраивая его.
Например, если вы хотите разблокировать все слои, вы сначала можете проверить, заблокированы ли они, затем можете их разблокировать:
Или если бы вы хотели добавить префикс к названию слоя:
И еще много всего, опции действительно бесконечны!
Методы атрибутов
Атрибуты, которые являются сущностями других классов, таких как фрейм или стиль, также имеют свои методы.
Например, чтобы изменить ширину слоя до 100, вам понадобится использовать setWidth на переменной фрейма:
Если вы хотите добавить на слой заливку, вы можете использовать addStylePartOfType(0) на переменной стиля:
Определение типа подкласса слоя Finding the Layer Subclass Type
Это все вы можете делать с любым MSLayer. Но что если, например, вы хотите считать строку текста из текстового поля? Вам нужно знать сначала, является ли этот объект текстовым полем, иначе код выбросит вам ошибку о несуществовании String.
Не все подклассы описаны в документации, но так как мы можем выяснить класс слоя из атрибута класса, мы можем легко с этим справиться. И чтобы еще больше упростить себе задачу, специально для этого я написал плагин!
Скачайте и установите плагин Show Layer Type Plugin здесь
Затем скачайте и откройте этот файл Sketch для тестирования.
В файле Sketch вы увидите артборд с несколькими разными типами слоев – 2 линии, символ, 2 текстовых поля и прямоугольник.
Выделите все слои и запустите плагин Show Layer Type. В консоли вы увидите такой вывод:
Если вы перейдете на страницу Symbols и выберите символ, снова запустите плагин, то увидите следующее:
Если вы выделите артборд и запустите плагин, вывод будет таким:
Если вы сгруппируете все слои на артборде, затем запустите плагин, увидите следующее:
Вот и все типы подклассов слоев! Возможно, есть и другие, но это все, которые мне удалось найти (документированные я сопроводил ссылками).
MSShapeGroup
MSBitmapLayer
MSTextLayer
MSSymbolInstance
MSSymbolMaster
MSArtboardGroup
MSLayerGroup
Теперь мы можем дифференцировать код в зависимости от того, какой этот класс, используя операторы if/else.
Каждый из этих подклассов располагает гораздо большим количеством атрибутов и методов доступа, которые мы рассмотрим в других постах. Изучите документацию по подклассам layer, чтобы быть готовым к старту!
Выводы
В этой части мы научились, как:
Часть 6 — Экспорт данных
Sketch предоставляет удобный доступ к выходному коду svg и css через клик правой кнопкой мыши на слое. Это очень полезная опция для веб-дизайнеров, но для тех, кто занимается разработкой приложений или игр пользы в этом мало. Также приходится копировать и вставлять значения из одного приложения в другое, что представляет собой огромное поле для ошибок.
Есть много сторонних инструментов-мостиков между дизайном и разработкой (Zeplin, Avocode, Sketch Measure, Sympli и др.), но эти инструменты предоставляют лишь справочное руководство для разработчиков. Было бы куда полезнее, если приложения для дизайна и разработки работали вместе напрямую. Представьте: вы делаете дизайн чего-то в Sketch, нажимаете “экспортировать”, считываете свой проект по разработке и воссоздаете макет. Это избавит от необходимости в попиксельных спецификациях, и даже сэкономит время инженера на воссоздании дизайна в коде.
Набор инструментов, доступный для дизайнеров сейчас, создавался как решения для общих потребностей, они не заточены под каких-то специфические задачи. Но в этом и состоит прелесть разработки плагинов: вы можете создавать инструменты четко под свои нужды, нужно только знать, как это делать.
Мы уже прошлись по базе, получили фундамент для успешного программирования. Теперь же мы можем углубиться в самое сердце разработки плагинов, сделать реальное решение для реальной задачи.
Плагины Sketch – это инструменты, соединяющие дизайн с разработкой
Чтобы соединить дизайн и разработку, нужно найти общую основу двумя этими сферами. Так как нет родных способов их соединить, что мы можем использовать такое, что понятно обоим? Ответ – XML или JSON. С помощью плагинов Sketch может экспортировать данные в оба формата, и, скорее всего, среда разработки, в которой вы работаете, может их считывать. Так зачем слать разработчику пиксельные спецификации, из которых придется копировать значения вручную, если можно отослать их в файле XML и JSON и импортировать автоматически?
Это действительно одно из лучших решений, возможных для Sketch. В этой части я покажу базовый пример, как экспортировать атрибуты слоя в XML или JSON. По аналогии с предыдущими частями, давайте набросаем план. Наш плагин будет работать в таком порядке:
Экспорт XML
Для начала мы начнем с создания нашего плагина. Создайте плагин под названием Export Layer to XML с основным скриптом под названием ExportLayerToXML.js. Также нужно добавить наш файл common.js для использования кастомного окна уведомлений, который создавали в предыдущих частях.
Мы уже знаем, как определить, выделен ли слой:
В операторе else мы создадим панель, где пользователь будет выбирать, в какую папку сохранить файл:
Потом создадим переменную, которая будет проверять, нажата ли кнопка, подключим ее к кнопке ОК, затем отформатируем выбранную категорию и сохраним ее в переменную для дальнейшего использования:
Когда все будет сделано, пройдемся циклом по выделенным слоям и вызовем функцию, которая записывает данные в XML-файл. Получившийся код будет выглядеть так:
Теперь для функции exportXML передадим 2 значения: выделенный слой и file_path.
Сначала мы настроим XML:
Затем из переданного слоя извлечем нужные переменные:
Сохраним эти переменные в объект XML:
И наконец, запишем XML-файл по переданному пути файла и уведомим пользователя, когда все будет сделано:
Скрипт целиком выглядит так:
Скачайте плагин или просмотрите его на GitHub, протестируйте. Если вы создадите прямоугольник на артборде и экспортируете в XML, получится примерно так:
Экспорт JSON
Сохранение JSON-файла реализуется почти также, кроме пары моментов. Мы можем использовать первую часть скрипта и создать функцию exportJSON, которая выглядит так:
Скрипт целиком выглядит так:
Вы можете скачать плагин здесь или посмотреть его на GitHub. Если протестируете скрипт, получите JSON-файл с таким содержимым:
Заключение
По итогу этой части мы научились:
Это всего лишь подсказка, как работать с экспортом данных из Sketch. Я только добавил пару атрибутов для старта, но есть огромное количество данных, из которых можно выбрать нужные для ваших целей.
Спасибо, что читаете наш урок, делитесь своими достижениями в комментариях. Успехов в создании собственных плагинов!
Удачи вам в создании собственных плагинов, делитесь достижениями под этим постом.