In english
In english

Экран, с которого всё начинается!

Time Starter






Создание собственных циферблатов в формате Time Starter















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

Редактор представляет из себя программу, выполняющуюся в виртуальной машине Java. Поэтому для редактирования циферблатов необходимо скачать и установить Java. Адрес , откуда скачивается Java, нередко меняется, но легко находится по запросу для поисковой системы - скачать Java. После скачивания Java полученный файл запускается и далее просто выполняются шаги инсталлятора. Стандартной установки обычно достаточно для нормальной работы редактора. Если Java уже установлена на вашей машине, тогда следует убедиться, что её версия не ниже, чем 1.7. Версию можно проверить командой "java -version" (без кавычек).

Редактор скачивается с этого сайта и и представляет собой архив с файлами, в которых находятся код программы и настройки. Код находится в файле с расширением jar. После разархивирования скачанного с этого сайта архива с редактором и при наличии установленной Java, далее достаточно двойного клика на файле с расширением jar, после чего программа будет запущена. На всякий случай в каталоге так же присутствует bat-файл, который позволяет запускать программу, если не получается запуск двойным кликом. Но если и такой вариант не сработает, значит у вас не установлена Java, либо установлена некорректно. Для проверки корректности можно в командной строке выполнить команду - "java -version" (без кавычек). Результатом выполнения команды должен быть показ версии Java. Если этого не произошло - Java не установлена или установлена некорректно.

Для нормальной работы программы желательно иметь компьютер с не менее чем гигабайтом оперативной памяти и монитором, с разрешением не менее, чем 1200*800 точек.

Обзор функционала программы

Программа предназначена для создания и редактирования циферблатов в формате Time Starter. Формат готовых циферблатов немного отличается от формата, в котором сохраняются редактируемые циферблаты, поэтому готовые циферблаты не всегда будут доступны для редактирования. Это связано с необходимостью оптимизировать структуру циферблата для более плавного отображения анимации.

Ниже показан основной экран программы. Далее приведены пояснения о структуре циферблатов и функциях отображаемых элементов.


Main screen


На изображении вы видите экран из четырёх частей. Слева направо расположены:

Каждый циферблат представляет из себя набор слоёв. На каждом слое располагаются те или иные фигуры, либо изображения. Для создания циферблата необходимо задать набор слоёв и свойства расположенных на каждом фигур. На представленном выше изображении мы видим красный полупрозрачный треугольник, который является визуализацией расположенных правее него данных о слоях и фигурах. Следующая за треугольником область экрана программы показывает список циферблатов (индикаторов), в данном примере имеем один циферблат, котоорый называется "пример циферблата". Под списком циферблатов видны параметры текущего (выделен серым в списке) и такой же список слоёв, входящих в текущий циферблат. Всего мы видим один слой, который назван "слой-треугольник". Правее списков циферблатов и слоёв расположена область с параметрами слоя. Ещё правее - область, где задаются свойства фигур. В последней области мы видим, что слой содержит одну фигуру - треугольник. Перед названием фигуры мы видим название операции - добавление, что означает простое наложение треугольника на слой. Кроме операции добавления существуют и другие (вычитание, инверсия и т.д.), комбинируя эти операции можно получить сложные фигуры из набора простых. Помимо фигур так же используются шрифты и произвольные изображения. Так же в дополнение могут быть использованы маски слоёв, которые позволяют вырезать из слоя такие фрагменты, которые нельзя получить комбинацией операций с фигурами.

Для работы с программой необходимо выделить каталог под циферблаты. После запуска программа спросит о выборе такого каталога, который в дальнейшем запомнит и при запуске будет показывать циферблаты именно из него. Для смены каталога в нижнем правом углу находится кнопка "Изменить каталог индикаторов".

Для управления внешним видом циферблата достаточно создавать слои и фигуры, а для них изменять свойства, такие как ширина, высота, цвет, угол поворота и т.д. Часть таких свойств вы видите на примере экрана программы. Рядом скаждым свойством есть кнопка с латинской буквой S, которая вызывает диалог редактирования скрипта, управляющего данным свойством. Если скрипт задан, то надпись на кнопке с буквой S будет красной, а если не задан - чёрной. Скрипты не являются обязательными, но например стрелки не будут двигаться без того, что бы кто-то ими управлял. Вот таким управлением и занимаются скрипты. Скрипт - это простая программа, на выходе которой должно быть значение свойства, которым управляет скрипт. Так для стрелок часов таким свойством будет угол поворота, а для цифровых показаний циферблата - строка с соответствующими значениями (например - секунды, минуты, часы и т.д.). Ниже будут даны стандартные примеры скриптов для управления углом поворота и другими параметрами. Их можно просто скопировать в редактор для выбранного свойства и таким образом получить готовое решение. Но умение самостоятельно изменять скрипты даст вам возможность создавать любые эффекты и отображать много разной информации.

Для добавления, удаления, сохранения и ряда других действий в программе используются комбинации из нажатий кнопки "Ctrl" и одной из латинских букв. Например - для сохранения циферблатов необходимо нажать Ctrl+S, что означает одновременное нажатие кнопки "Ctrl" и кнопки с буквой "S". Регистр и текущий язык значения не имеют, поэтому можно не обращать внимание на состояние кнопки Caps Lock и выбранный язык ввода. Далее будет приведён полный список таких команд, а так же по ходу пояснений будут даны примеры использования комбинаций клавиш. Помимо общего списка команд здесь стоит ещё упомянуть о команде перерисовки циферблата, которую нужно применять после правок его свойств. То есть после редактирования различных значений циферблат сам не перерисовывается (может получиться долгая перерисовка на каждый мелкий чих), поэтому после ряда изменений для просмотра результата используется команда Ctrl+R, которая перерисовывает циферблат с учётом всех внесённых изменений.

Значения многих свойств даны в процентах от ширины, либо высоты. Это означает, что нельзя задать ширину фигуры в точках, но задавать её нужно в процентах от ширины циферблата. Такой подход делает размеры независимыми от размера экрана часов, на которых будет отображаться циферблат. Значения свойств меняются при выборе элементов из списков фигур, слоёв и циферблатов. После смены текущего элемента (фигуры, слоя, циферблата), его свойства остаются в памяти, а в полях для редактирования заменяются на новые значения, полученные от выбранного элемента. Поэтому можно свободно перемещаться между фигурами, слоями и циферблатами, не задумываясь об исчезновении только что отредактированных значений. Но при этом сохранение на диск выделено в отдельную операцию, поэтому не стоит забывать иногда нажимать сочетание кнопок Ctrl+S (для сохранения данных).

Свойства циферблата

В области со свойствами циферблата находятся два списка (циферблатов и слоёв текущего циферблата). Создать новый циферблат можно командой Ctrl+i, после чего появится диалог с вопросом о названии циферблата и названии файла, в который будет сохранён циферблат. После заполнения данных будет создан "пустой" циферблат, который не является корректным, то есть в нём отсутствуют слои, а значит он не может быть нарисован. Поэтому сразу после создания циферблата нужно создать хотя бы один слой, который создаётся командой Ctrl+L. После создания слоя необходимо заполнить его название и создать хотя бы одну фигуру, поскольку опять же, пустой слой нельзя нарисовать, ведь в нём ничего нет. Фигуры создаются командой Ctrl+F, но о них разговор пойдёт ниже.

Выше списка циферблатов представлены элементы, позволяющие выбирать режим отображения циферблата в области просмотра. Там представлены элементы:

Включение скриптов

Если циферблат содержит скрипты, то для проверки их работоспособности можно выделить данный элемент. При этом используемые в скриптах значения начнут меняться, а следовательно будут меняться и задаваемые скриптами свойства отображаемых элементов, такие как угол поворота или текст со значениями секунд или минут. В результате вы сможете наблюдать работу циферблата в режиме, приближённом к его реальному использованию на реальном устройстве. Если всё выглядит так, как вы и ожидали - ваши скрипты работают правильно. Если нет, тогда нужно разбираться с каждым скриптом в отдельности, отключая их для выделения причины неправильного отображения или редактируя, что бы изменить некорректную логику работы.

Отключаемые уровни

Данный элемент позволяет переключать отображение в режим "показывать" или "не показывать" слои, которые вы укажете как отключаемые. Такие слои могут содержать дополнительную информацию или просто дополнительные украшения, что позволяет пользователю выбрать из двух вариантов наиболее подходящий для него. Другими словами - отключаемые слои дают возможность вносить разнообразие в циферблат за счёт показа или скрытия таких слоёв. А управляет показом или скрытием слоёв в области просмотра именно элемент "Отключаемые уровни".

Запись кадров

Если при включенном режиме показа результатов работы скриптов (или по другому - когда циферблат движется, оживляется скриптами) установить галочку около "Запись кадров", то в течении указанного количества секунд и через каждый указанный интервал (в миллисекундах) будут сохраняться изображения с текущим положением циферблата. То есть произойдёт покадровая запись движения циферблата. Эта запись может быть использована для экспорта картинки в формате анимированный-gif, которую потом можно передавать и показывать без необходимости устанавливать какие-либо программы. Для анимированных циферблатов это простой способ демонстрации их возможностей для ознакомления и без установки циферблата на часы. Время записи задаётся в поле "Время", находящемся чуть ниже, а интервал сохранения кадров - в поле "Интервал".

Размер и расположение циферблата

Под полем с названием циферблата находятся поля с его размером и расположением. Размер задаётся в процентах от ширины области отображения и указывает как высоту, так и ширину. Область отображения определяется размером экрана конкретного устройства, на котором отображаются циферблаты, но какой бы размер эта область не имела, циферблат всегда будет занимать от этого размера именно указанную в процентах часть. И точно так же определяется положение - в полях после слова "Центр" вводятся значения в процентах от ширины, соответствующие месту расположения центра циферблата. Обычно центр находится на 50% ширины и высоты, но данные поля позволяют сдвинуть его при необходимости.

Соотношение сторон

Если циферблат отображается на прямоугольном экране, то программа вписывает его в экран так, что бы минимальная из сторон задавала максимальный размер циферблата. В результате квадратный циферблат на прямоугольном экране занимает не всю доступную площадь. В поле "Соотношение сторон" указано соотношение сторон циферблата в процентах. То есть 100% означают, что одна сторона равна 100% другой. Но если указать, например, значение 133%, то получим соотношение сторон, равное соотношению сторон экрана на часах со сторонами 320*240 точек. Тогда на таких часах циферблат не будет уменьшен, как было бы в случае с квадратным соотношением (равные стороны), но будет занимать весь экран таких прямоугольных часов. Если же соотношение сторон экрана равно 240*320 (вертикальное расположение экрана), то коэффициент получится обратным - 75%.

Свойства слоя

Справа от области свойств циферблата находится область со свойствами текущего слоя. Здесь вы видите поля для названия, размера и расположения слоя. Размеры и положение, как и для других элементов, задаются в процентах от ширины родительского элемента, то есть для слоя - в процентах от размера циферблата.

Угол поворота

Ниже можно задать угол поворота. Он задаётся в градусах и измеряется как на стандартном математическом представлении - от оси Х вверх и против часовой стрелки. То есть угол 0 градусов совпадает с осью Х, угол 90 градусов - с осью У. При этом вращение будет осуществляться относительно ниже задаваемого центра. Рядом с надписью "Центр вращения" находятся поля для задания центра по ширине и высоте. Стандартно они содержат значения 50%, что совмещает центр вращения с центром слоя. Но если, например, нужно вращать стрелку часов, смещённую от центра слоя, тогда здесь вы может задать такое смещение.

Не показывать слой

Этот элемент позволяет задавать слои, которые не будут показаны, если пользователь выберет настройку "Не показывать дополнительные слои". Таким образом можно скрывать часть информации для достижения большего художественного эффекта, либо просто давать возможность выбора одного из двух вариантов циферблата, более подходящего пользователю. Если галочка установлена, то такой слой можно будет отключить. Если галочка не установлена - отключать слой нельзя.

Включить цвет

Данный элемент позволяет быстро удалить цвет фона и посмотреть результат. При этом заданный цвет фона не исчезает, но просто не показывается. После установки галочки цвет фона будет показан снова. Если галочка не установлена - цвет у фона отсутствует (то есть он полностью прозрачен). А сам цвет задаётся чуть ниже и отображается в поле с шахматной рскраской.

Задание цвета

Для задания цвета нужно кликнуть на шахматное поле. После чего будет показан следующий диалог:


Color selection

Здесь вы можете выбрать прозрачные, светлые, либо тёмные цвета, а далее указать конкретный цвет из одного из сочетаний. Прозрачные, светлые, либо тёмные цвета выбираются в нижней части диалога, выбранный тип выделяется белой рамкой. Сочетание цветов выбирается в верхней части диалога и так же обозначается белой рамкой. На представленном изображении выбран прозрачный режим цвета и сочетание красного с жёлтым. Текущий цвет выбирается кликанием в том месте, где располагается подходящий цвет. После выбора цвета он отображается справа в нижней части, а в верхней части показан ранее задававшийся цвет. Так же цвет можно ввести вручную путём указания его шестнадцатеричного значения. При этом перед значением цвета стоит необязательный префикс "0х", который указывает на шестнадцатиричную интерпретацию данного числа. За префиксом идут пары шестнадцатеричных значений, соответствующие уровню прозрачности (0 - полностью прозрачный, ff - полностью непрозрачный), значению красного канала (0 - минимальный уровень, ff - максимальный уровень), значению зелёного и затем синего каналов. Например на изображении уровень прозрачности равен bc, уровень красного так же равен bc, уровень зелёного равен 13 и уровень синего равен нулю. Для сохранеиния цвета нужно нажать OK, либо установить курсор в поле со значением цвета и нажать Enter. Убрать диалог можно кнопкой "Отмена" или Esc.

Направление, сдвиг, цвет тени

Фигуры слоя могут отбрасывать тень, поэтому необходимы средства для задания свойств тени. Обычно тень представляет из себя полупрозрачный серый контур, полностью равный освещаемой фигуре, но смещённый относительно фигуры в некотором направлении. Соответственно, в программе присутствуют поля для задания направления тени (в градусах), величины сдвига в заданном направлении (в процентах) и собственно цвет, который задаётся кликом на шахматное поле под надписью "Цвет тени".

Элементы маски

В этом списке содержатся фигуры, которые вырезают из слоя ту часть, которую перекрывают. Такое вырезание распространяется в том числе на градиенты вокруг фигур, а потому недостижимо применением лишь только операций композиции (сложение, вычитание и т.д.) к фигурам. Фигуры маски, так же как и фигуры слоя, комбинируются при помощи операций - добавление, вычитание, пересечение и т.д. Фигура маски создаётся командой Ctrl+M, после чего появляется диалог с выбором типа фигуры (круг, треугольник и т.д.), а затем - операции наложения, применяемой к данной фигуре. Операция добавления создаёт фигуру, которая вырезает из слоя всё под ней, операция вычитания вычитает из имеющихся фигур маски ту фигуру, для которй выбрана операция вычитания. По операциям ниже будет приведён отдельный список с пояснениями, как они работают. Но отдельно стоит сказать, что операцию для любой фигуры можно изменить, если выделить фигуру и нажать Ctrl+O.

Отдельно от списка фигур маски расположены поля со свойствами этих фигур. Под списком фигур маски присутствуют две вкладки - "Расширения слоя" и "Часть маски". Свойства выделенной в списке фигур маски фигуры показываются на вкладке "Часть маски". Свойства разные для разных фигур, но обычно содержат ширину, высоту, сдвиг центра по осям Х и У. Вкладка "Расширения слоя" содержит дополнительные данные, которые необходимы для некоторых типов слоёв, о чём рассказано ниже.

Типы слоёв

Всего существует три типа слоя:

Слой-фигура

Это наиболее часто используемый слой, который содержит различным образом скомбинированные фигуры. Выше уже была показана большая часть его свойств.

Слой-маршрут

Такой слой располагает набор фигур вдоль заданного маршрута. Например - набор цифр по кругу циферблата. В данном примере круг - это маршрут, а цифры - это располагаемые вдоль него фигуры. Если при создании слоя выбрать тип слой-маршрут, то для такого слоя понадобятся две составляющих - сам маршрут и фигуры на нём. И первое и второе получается путём комбинирования фигур при помощи операций добавления, вычитания и т.д. Но в отличии от слоя-фигуры, для слоя-маршрута потребуется два раза задать комбинацию фигур, для чего в области редактирования фигур появятся две вкладки - "Форма маршрута" и "Шаблон фигур на маршруте". Заполняются они по одинаковым принципам, но первый набор фигур будет определять маршрут, а второй - то, что расположится вдоль маршрута.


Color selection

Выше приведён пример слоя-маршрута в виде треугольника, повёрнутого на 180 градусов, с расположенными вдоль него маленькими треугольниками. Здесь центр маршрута смещён в положение 20*20% (от ширины и высоты), поэтому маленькие треугольники смещены в сторону левого верхнего угла. Такое смещение происходит потому, что фигуры на маршруте располагаются через равные углы, то есть из центра маршрута проводятся лучи, а в точках их пересечения с формой маршрута (в данном случае - треугольник) отображаются повторяющиеся фигуры заданного шаблона. Сдвиг центра маршрута, как и набор других параметров, отображаются на вкладке "Расширения слоя".


Color selection

Выше показаны значения расширенных свойств, соответсвующих слою-маршруту. Здесь видим следующее:

Количество фигур на маршруте

В примере задано значение 6, поэтому на маршруте мы видим 6 треугольников. Значение может быть любым, но обязательно больше нуля, а далее - лишь бы у вас хватило терпения ждать отрисовки всего запрошенного количества.

Центра маршрута

Здесь задаётся точка, из которой исходят лучи, на которых, в точках пересечения с маршрутом, располагаются заданные на вкладке "Шаблон фигур на маршруте" фигуры. Лучи вращаются по часовой стрелке и располагаются друг относительно друга через угол, задаваемый делением 360 на количество фигур на маршруте. Первый луч располагается вдоль оси Х декартовой системы координат. Далее приведены дополнительные свойства, позволяющие по разному ориентировать фигуры на лучах. Для тренировки рекомендуется попереключать ниже приведённые галочки и, после нажатия Ctrl+R, наблюдать за получаемыми вариантами ориентации.

Ориентация фигур вдоль луча

Если галочка не установлена - фигуры располагаются перпендикулярно лучу против часовой стрелки. Если галочка установлена, то фигуры располагаются параллельно лучу, в направлении вовнутрь (верх фигуры ближе к центру маршрута).

Ориентация фигур не зависит от луча

Если установлена эта галочка, то фигуры на маршруте всегда будут ориентированы одинаково - вверх. То есть, например, треугольник будет смотреть своей вершиной вверх, а снизу будет его широкая сторона. Для более симметричных фигур потеряет значение направление "вверх", но тем не менее, все фигуры по прежнему будут ориентированы одинаково.

Направление фигур наружу или по часам

Если ориентация фигур зависит от направления луча, то возможны четыре варианта - фигуры вдоль луча и смотрят либо к центру маршрута, либо от него, и фигуры перпендикулярны лучу и смотрят либо по часовой стрелке, либо против неё. Ориентация вдоль луча определяется свойством "Ориентация фигур вдоль луча", а направление по часовой стрелке или против, а так же к центру или наружу, определяется свойством "Направление фигур наружу или по часам".

Обход маршрута против часовой стрелки

Если в качестве фигур на маршруте выбраны, например, цифры с номерами часов для циферблата, то в таком случае важно, в каком порядке такие цифры будут размещены вдоль маршрута. Если галочка "Обход маршрута против часовой стрелки" не установлена, тогда обход будет по часовой стрелке и цифры будут расположены в привычном порядке. Но если нужно изменить порядок на обратный - установите галочку "Обход маршрута против часовой стрелки".

Начальная и конечная позиция на маршруте

Иногда необходимо расположить фигуры не вдоль всего пути, а лишь вдоль его части, тогда нам потребуется начальная позиция, начиная с которой будут располагаться фигуры, а так же конечная позиция, до которой будут располагаться фигуры. Позиции задаются в процентах и соответствуют процентной части окружности, то есть 0% находится на 3-х часах, 25% - на 6-ти, 50% - на 9-ти и 75% на 12-ти.

Слой-изображение

Этот вид слоя позволяет быстро задавать, например, фоновое изображение, а так же даёт возможность масштабировать изображение колесом мыши и сдвигать его перетаскиванием. Дополнительно если изображение является прозрачным по краям, либо прямоугольным, когда края не заполнены, тогда свойство "Заполнять пустые края" даёт возможность заполнить пустоту цветом ближайшей к краю точки. Так же есть возможность задавая фоновый цвет сделать его полупрозрачным и разместить над изображением, как бы затенив его. Для этого используется свойство "Цвет над изображением".

Свойства фигур

Фигуры представляют видимую часть циферблата. Эта видимая часть может быть закрашена в выбранный цвет, а так же постепенно переходить в другой заданный цвет, образуя так называемый градиент. Градиент располагается на границе результирующей фигуры (то есть включающей результаты всех операций наложения, вычитания и т.д.). От границы внутрь фигуры располагается внутренний градиент. От границы наружу располагаются внешний градиент и градиент контура. Контур задаётся его шириной (в процентах от ширины фигуры), если ширина равна нулю - у фигуры нет контура. Если контур присутствует (ширина больше нуля), тогда от границы фигуры наружу располагается градиент контура. Из внешних границ контура наружу располагается внешний градиент. Ниже приведён пример, показывающий все градиенты.


Color selection

Здесь мы видим круг, диаметром 50% от ширины изображения. Внутри круга находится внутренний градиент, который начинается с красного цвета и заканчивается жёлтым. После жёлтого цвета идет цвет заполнения круга, в данном случае - коричневый. Наружу от границы круга идёт зелёно-синий градиент, который располагается внутри ширины контура (20% от ширины изображения), при этом сам градиент имеет ширину 15%, а потому он не прикасается к следующему градиенту - наружному. Наружный градиент начинается на внешней границе контура и имеет ширину так же 20%. Он начинается с сиреневого полупрозрачного цвета и закнчивается красным полупрозрачным.

Цвет фигуры и контура

Цвет фигуры задаётся в поле "Цвет заполнения фигуры". Это шахматное поле, после клика на которое открывается диалог с выбором цвета. Рядом находится второе такое же поле - "Цвет контура", оно, соответственно, задаёт цвет контура. Все эти цвета сплошные, без переходов, то есть градиенты задаются отдельно от них. Ширина контура задаётся чуть ниже в поле с соответствующим названием.

Задание градиентов

Ниже свойств цвета фигуры и контура, под надписью "Градиент", располагются три вкладки, где задаются свойства для внутреннего, контурного и наружного градиентов. Все вкладки идентичны, но задают свойства для разных градиентов. Для задания градиента нужно задать его ширину, а потом указать начальный и конечный цвета. Слева расположено шахматное поле для задания начального цвета, а справа - конечного. Между ними расположено поле, где показывается пример градиента с выбранными свойствами. Выше расположен переключатель "Сменить направление", который меняет местами начальный и конечный цвета.

Сглаживание фигур

Что бы фигуры выглядели гладкими точки на их краях необходимо сделать частично прозрачными, но такой эффект не всегда полезен. Так при использовании градиентов прозрачные точки по краям создают видимый контур и тем нарушают плавный переход цветов. Поэтому в редакторе есть переключатель "Сглаживание фигур". Если его включить - фигуры будут гладкими, но между краем и градиентом будут полупрозрачные точки. Если вы не используете градиент - сглаживание лучше включить. Точно такая же ситуация и со шрифтами, но для них всё же чаще нужно сглаживание, а потому переключатель в значении по умолчанию не влияет на сглаживание, а во включенном состоянии такое сглаживание отключает.

Список фигур

Список фигур находится под градиентами и переключателями сглаживания. Для добавления фигуры нужно нажать Ctrl+F. Затем программа спросит о типе фигуры и операции наложения. Создав таким образом набор фигур и операций, вы зададите вид слоя к которому далее будут применены контуры и градиенты. Если необходимо дополнительно скрыть какую-то часть получившейся раскрашенной фигуры, тогда нужно применять маску, о которой было рассказано в свойствах слоя.

Всего в программе можно выбрать из семи типов фигур:

Для всех фигур задаются свойства ширины, высоты и расположения центра по осям Х и У. Все эти свойства задаются в процентах от ширины слоя. Кроме общих свойств у ряда фигур есть так же специфичные только для них. Далее они будут перечислены.

У всех фигур так же есть свойство "Угол поворота". Угол отсчитывается вверх от оси Х декартовой системы координат, то есть поворот на 90 градусов приводит например треугольник в положение, когда его вершина смотрит влево, а широкая сторона вертикальна.

Свойство "Радиус закругления углов" позволяет сгладить углы треугольников и прямоугольников. Радиус так же задаётся в процентах.

Для треугольника можно задать специфичное только для этой фигуры свойство "Смещение вершины". Оно измеряется в процентах от ширины треугольника и позволяет сдвигать вершину, расположенную вверху, по оси Х, при этом не меняя её положение на оси У. Если это свойство задать равным 100%, то получим прямоугольный треугольник, если больше 100% - тупоконечный треугольник.

Для дуги и сектора специфичны свойства "Начальная позиция" и "Конечная позиция". Они задают в градусах начальный и конечный углы дуги или сектора. Углы отсчитываются от оси Х декартовой системы коодинат.

Дуга имеет специфичное только для неё свойство "Ширина", которое определяет ширину линии, которой рисуется дуга. Ширина задаётся в процентах от ширины фигуры.

Фигура типа символ-шрифт задаётся при помощи нескольких свойств. Свойство "Текст" задаёт ту надпись, которую программа будет отображать. Эта надпись в случае со слоем-маршрутом может быть разбита на разделённые запятыми элементы и такие составляющие будут использованы в качестве фигур вдоль маршрута. Но при этом количество элементов должно совпадать с со свойством слоя "Количество фигур на маршруте".

Помимо текста для отображения символов нужно задать шрифт и его характеристики. Шрифт выбирается из выпадающего списка "Название шрифта", а под ним находятся свойства - сделать ли шрифт жирным или наклонным или подчёркнутым. При этом в данной версии программы подчёркивание не выводится для предварительного просмотра, но присутствует на устройстве, на котором установлен готовый циферблат.

Размер шрифта задаётся ограничением по ширине и высоте. Наиболее удобно задавать размер шрифта по высоте, при этом значение по ширине не важно, лишь бы оно было больше, чем ширина введённой строки, поэтому его можно оставлять без изменений, то есть 100%, которые задаются по умолчанию. Текст масштабируется для вхождения в заданную высоту и ширину, но при этом важно учитывать, что каждый шрифт может содержать специфические отступы сверху и снизу, которые так же должны уложиться в заданную высоту фигуры.

Фигура типа "Изображение" имеет свойства "Название" и "Путь к изображению". Первое используется,что бы отличать одно изображение от других в списке фигур, а второе задаёт собственно изображение, которое будет отображено программой. Размер изображения ограничивается шириной и высотой фигуры, поэтому задавая эти свойства можно масштабировать изображение. Изображение так же заливается тем цветом, который выбран для заливки всего слоя, кроме того к изображению применяются все контуры и градиенты. Границы контуров определяются по прозрачности точек изображения.

Операции композиции фигур

Фигуры сочетаются при помощи следующих операций:

По операциям можно ещё добавить типичные области их применения. Так вычитание, очевидно, удобно использовать для обрезания лишнего. Пересечение позволяет создавать сложные сочетания кривых, которые невозможно получить вычитанием. Инверсия позволяет удаляя лишнее одновременно добавить нужную часть. Обратное вычитание удобно применять когда после ряда операций получилось почти то, что нужно, но "наоборот" (там где пусто должно быть густо), при этом в отличии от инверсии обратное вычитание не сохраняет всё то, что выходит за пределы добавляемой таким образом фигуры, а инверсия сохраняет.

Далее приведены изображения с результатами операций. Во всех случаях добавлялся круг, но каждый раз была применена новая операция.

Сначала был один круг и из него вычли другой такой же, но смещённый внпиз:

Color selection

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

Color selection

Затем был добавлен с инверсией ещё один круг, теперь уже смещённый вправо и вниз:

Color selection

И в конце концов всё, что получилось было вычтено из ещё одного круга:

Color selection

Команды редактирования циферблатов

Все опреации с циферблатами выполняются при помощи команд. Каждая команда представляет из себя нажатие двух клавиш на клавиатуре. Первая клавиша - Ctrl, а вторая - специфичная для команды буква. Обе клавиши нажимаются одновременно. Команда не зависит от текущего языка или переключателя регистра на клавиатуре. Далее приводится полный список команд:

Пример создания циферблата

Далее приведена последовательность действий, которая показывает большинство типовых операций, необходимых при создании циферблата. Циферблат будет показывать время при помощи стрелок и цифр.

Сначала для циферблата создаётся фон. Его можно создать в более удобном редакторе и затем добавить в циферблат в виде слоя-изображения, но поскольку нам важно показать, как работает программа, мы будет рисовать фон прямо в ней.

Выберем для фонового изображения слой-маршрут, поскольку он предоставляет простую возможность быстро рисовать различные симметричные узоры. В запущенной программе нажмём комбинацию клавиш Ctrl+i, которая создаёт новый циферблат. После ввода названий нажмём комбинацию клавиш Ctrl+L, которая создаёт новый слой. Выберем тип слоя "Маршрут". Назовём наш слой фразой "фоновый слой" и введём её в поле в самом верху области редактирования слоя, чуть ниже фразы "Слой-маршрут". Далее необходимо создать хотя бы одну фигуру для формы маршрута и хотя бы одну фигуру для шаблона, который будет копироваться вдоль маршрута. Сначала вкладки "Форма маршрута" и "Шаблон фигур на маршруте" находятся в состоянии, когда нам видны данные формы маршрута. Зададим форму в виде простого круга, а для этого нажмём комбинацию клавиш Ctrl+F, которая создаёт фигуру. В появившемся диалоге выберем операцию добавления и тип фигуры - овал. По умолчанию обе оси овала задаются равными и дают нам, таким образом, обычный круг. Далее осталась не заданной фигура на маршруте. Пока мы не заполним всё, необходимое для рисования, программа не будте нам ничего показывать, поэтому нужно переключиться на вкладку "Шаблон фигур на маршруте" и снова нажать Ctrl+F. В появившемся диалоге опять выберем добавлени и тип фигуры - овал. Далее нужно задать количество фигур на маршруте. Для этого в области данных слоя введём в поле "Количество фигур на маршруте" число 12. После этого у программы есть всё, что бы можно было что-то нарисовать.

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

Color selection

Переключимся на вкладку "Шаблон фигур на маршруте" и зададим значение, например, высоты фигуры (второе поле рядом с надписью "Размер" в области редактирования данных фигуры) равным нулю . После этого нажмём Ctrl+R, что приведёт к перечитыванию данных и перерисовке изображения с перечитанными данными. В результате мы увидим серый круг, касающийся краями сторон изображения - это наш маршрут, но пока что в неразукрашенном состоянии. Переключимся на вкладку "Форма маршрута" и начнём раскрашивание. Сначала сделаем фигуру маршрута полностью прозрачной, для этого кликнем на шахматное поле "Цвет заполнения фигуры" и вместо нулевого значения зададим, например значение 1. Далее нажмём Enter или кнопку Ok.

Здесь дополнительно стоит пояснить, почему мы выбрали для цвета значение 1. Цвет в шестнадцатеричном формате представляет из себя четыре пары символов, которые могут содержать необязательный префикс 0х (он показывает, что число в шестнадцатеричном формате). Первые два символа после префикса - это прозрачность. Если эти два символа равны нулю - фигура полностью прозрачна и при этом не имеют никакого значения все остальные символы. Следующие 2 символа - это красный цвет, если они равны нулю - красного цвета нет, если они равны макисмальному значению - красный цвет присутствует в максимальном количестве. Следующие два символа аналогичным образом дают нам зелёный цвет. А два после них - синий. Все они в шестнадцатеричной системе, а потому имеют значение от 0 до f, где f обозначает число 15. Числу 14 равно значение e, 13 - d, 12 - c, 11 - b и 10 - a. Далее идут привычные нам 9876543210. Всего каждые два знака дают нам 256 значений, что больше привычных нам 99 значений для десятичных чисел из-за того, что вместо десяти значений каждый разряд даёт 16. Поскольку во втором разраяде стоит f, значит у нас уже есть значение 15*16=240 (f=15, а 16 - максимальное количество значений в одном разряде). Но и во второй позиции стоит f, значит к 240 нам нужно прибавить 15 и мы получим 255 - так мы получили из шестнадцатиричного числа десятичное. А когда мы задали единицу для значения цвета, мы ввели такое число - 0x00 00 00 01, здесь пробелы между нулями введены для понятности, а в программе их быть не должно. Как мы видим, в этом числе первые два знака после 0х равны нулю, что означает - это полностью прозрачный цвет.

Но вернёмся к рисованию. Если мы сейчас (после изменения цвета) нажмём Ctrl+R, то мы увидим пустое шахматное поле вместо изображения. То есть мы действительно получили прозрачный цвет, а все фигуры на маршруте, имея высоту равной нулю, просто не видны. Далее введём несколько более удобный размер для фомы маршрута - 50*50, то есть в обоих полях рядом с надписью "Размер" нужно ввести эти значения. А теперь раскрасим фигуру градиентами. По умолчанию под словом "Градиент" (в области редактирования фигуры) открыта вкладка "Внутренний", кликнем в ней на шахматное поле "Начальный цвет" и введём значение 0xcd00cd12. Здесь первые два символа (после префикса 0х) не равны ff, что означает - мы задаём полупрозрачный цвет. Поле "Завершающий цвет" менять не нужно, но стоит задать ширину градиента в поле "Ширина". Введём там значение 20. Нажмём Ctrl+R и увидим такую фигуру:

Color selection

Далее переключимся на градиент контура и снова введём в поле "Начальный цвет" значение 0xcd00cd12. Затем кликнем на "Завершающий цвет" и введём значение 0xbc00bc90. В поле "Ширина" введём 10. И наконец чуть выше в поле "Ширина контура" так же введём 10. Здесь мы пытаемся создать контур вокруг фигуры, но если его ширина равна нулю, то ни его цвет, ни его градиент мы не увидим. Поэтому мы задаём ширину в двух местах - для контура (что бы его видеть) и для градиента. При этом градиент не может быть шире контура, хотя и может быть уже. Теперь нажмём Ctrl+R и увидим такую фигуру:

Color selection

Переключимся на внешний градиент и введём в поле "Начальный цвет" значение 0xbc00bc90. "Завершающий цвет" заполнять не нужно. В поле "Ширина" введём 20. Нажмём Ctrl+R и увидим такую фигуру:

Color selection

Теперь переключимся на шаблон, который будет размножен вдоль маршрута. Выбираем вкладку "Шаблон фигур на маршруте" и введём в поля рядом надписью "Размер" два значения - 50*20, то есть ширина 50% и высота 20%, что даст нам горизонтально расположенный овал. Теперь после нажатия Ctrl+R мы увидим такую фигуру:

Color selection

Как видим, овал был расположен 12 раз вдоль маршрута, начиная с 0 градусов (на оси Х) и далее с шагом 30 градусов. После каждого шага овал поворачивался на дополнительные 30 градусов. В результате наложения 12-ти овалов получилась наблюдаемая нами фигура. Зададим цвет для наших овалов - вверху справа кликнем на свойство "Цвет заполнения фигуры" и введём значение 0xffff3e52. Далее переключимся на вкладку внутреннего градиента и кликнем на "Начальный цвет", введём там 0xbbff3c4d. В поле градиента "Ширина" введём 5. Затем переключимся на вкладку градиента "Внешний". Введём такой начальный цвет - 0xacac0014, и так же ширину градиента - 5. После нажатия Ctrl+R мы увидим такую фигуру:

Color selection

Ну вот, фон для нашего циферблата готов. А заодно вы научились раскрашивать фигуры и поняли, что такое маршрут. Далее предлагается потренироваться перебирая различные варианты ширины внутреннего и внешнего градиентов, возможно меняя при этом цвета. Простым перебором вы можете найти ещё более интересный рисунок. А заодно потренируйтесь с переключателями в области редактирования слоя. Там, например, расположен переключатель "Ориентация фигур вдоль луча". Если вы его включите, то (нажав Ctrl+R) увидите такой рисунок:

Color selection

Здесь все овалы развернулись вдоль лучей. Изначально овал-шаблон был расположен горизонтально, а на луче теперь ему нужно быть низом к центру маршрута (откуда исходят лучи), а верхом - на наибольшем расстоянии от центра маршрута. Поэтому каждый овал развернулся таким образом, как показано на рисунке. Но с переключателями вы потренируйтесь самостоятельно, а мы вернем знчение "Ориентация фигур вдоль луча" в исходное состояни и продолжим рисовать следующий уровень.

Создадим слой, на котором будут расположенные по кругу цифры для нашего циферблата. Очевидно, что здесь мы опять имеем маршрут. Поэтому создадим слой-маршрут. Нажмём Ctrl+L и выберем тип слоя "Маршрут". Назовём новый слой "цифры" (в поле ниже фразы "Слой-маршрут"). Введём в свойствах слоя количество фигур равное 12. Затем на вкладке "Форма маршрута" создадим фигуру, для чего нажмёи Ctrl+F и выберем операцию "Добавление" с типом фигуры "Овал". Затем изменим ширину и высоту фигуры на 80 (80*80 в полях рядом с надписью "Размер"). Для данного маршрута нам не нужно раскрашивать его форму, а потому введём единицу в поле "Цвет заполнения фигуры". Переключимся на вкладку "Шаблон фигур на маршруте" и сразу зададим цвет в поле "Цвет заполнения фигуры". Пусть он будет равен 0xfffff350. Теперь нам нужно пустить по маршруту 12 цифр (от 1 до 12). Для этого нажмём Ctrl+F и выберем добавление фигуры "Символ-шрифт". Введём в поле свойств фигуры "Текст" такое значение - 1,2,3,4,5,6,7,8,9,10,11,12. Зтем выберем шрифт из выпадающего списка под фразой "Название шрифта". Пусть это будет шрифт Arial. И наконец зададим высоту фигуры во втором поле после слова "Размер". Пусть она будет равна 10. После нажатия Ctrl+R мы увидим такую фигуру:

Color selection

Мы видим, что на каждом из 12-ти лучей из центра маршрута расположились по одной цифре. Строка 1,2,3,4,5,6,7,8,9,10,11,12, введённая ранее в поле текст, означает, что мы хотим каждый символ между запятыми расположить на соответствующей его порядку позиции. Каждый символ при этом будет иметь высоту, которую мы задали в поле "Размер", а раз ширина оставлена без изменений (100%), то она никак не влияет на размер символа, ведь она намного больше ширины чисел, которые должны уместиться в 10% от высоты слоя. Теперь поясним расположение чисел. Поскольку позиции начинаются на оси Х и движутся по часовой стрелке - мы имеем единицу на месте тройки, двойку на месте четвёрки и т.д. Что бы вернуть всё в правильное положение нам нужно повернуть цифры против часовой стрелки на 60 градусов. Мы может это сделать в области редактирования слоя, где присутствует свойство "Угол поворота". Зададим там значение 60 градусов, а поскольку все углы считаются стандартным для математики способом - вверх от оси Х, то наш угол будет разворачивать цифры против часовой стрелки, то есть так, как нам и нужно:

Color selection

Теперь цифры на своём месте, но расположены каждая под своим углом. Что бы придать им общую ориентацию а области редактирования слоя есть свойство "Ориентация фигур не зависит от луча". Если включить его, то получим такое изображение:

Color selection

Теперь все цифры ориентированы одинаково, но при этом повёрнуты вместе со всем слоем на 60 градусов против часовой стрелки. Поэтому нам нужно их развернуть обратно, то есть по часовой стрелке на 60 градусов. Для этого в области редактирования фигуры есть поле "Угол поворота". Зададим там значение -60 градусов. Поскольку все углы считаются вверх от оси Х (против часовой стрелки), обратный угол должен быть отрицательным, поэтому перед 60 стоит минус. После нажатия Ctrl+R мы увидим такую фигуру:

Color selection

Программа же будет выглядеть так:

Color selection

Теперь создадим слой с цифровым обозначением текущего времени. Нажмём Ctrl+L для создания нового слоя. Выберем тип слоя - фигура. Введём название - "время". Затем создадим фигуру используя Ctrl+F. Операция будет "Добавление", а тип фигуры - "Символ-шрифт". Как и ранее - выберем шрифт из выпадающего списка под надписью "Название шрифта". Так же зададим высоту букв, ограничив её во втором поле после слова "Размер". Пусть высота будет 15%. Сместим центр текста вниз, изменив второе поле рядом с надписью "Смещение центра". Пусть вместо значения по умолчанию, равного 50% (посередине), смещение по высоте будет 70%. Здесь нужно заметить, что в системах компьютерной графики принято отсчитывать координаты по оси У сверху вниз, то есть чем больше координата, тем ниже расположен отображаемый объект. Таким образом мы сместим будущую надпись ниже центра рисунка, что бы она не перекрывалась стрелками часов (которые мы создадим позже). И наконец, введём в поле "Текст" некое значение времени, которое нам будет нужно лишь для оценки внешнего вида, а в дальнейшем будет заменено реальными данными. Пусть таким значением будет 12:25, то есть 12 часов 25 минут. Если теперь нажать Ctrl+R, то мы увидим наши серые цифры между центром и нижним краем изображения.

Теперь нужно как-то расскрасить полученные цифры. Сначала сделаем фигуры на слое полностью прозрачными, введя единицу в поле "Цвет заполнения фигуры". Затем переключимся на вкладку градиентов "Внешний" и введём его ширину, равную 3%, а так же заполним "Начальный цвет" значением 0xff6cffa7. Нажимаем Ctrl+R и видим вот такую картинку:

Color selection

Но нам всё ещё не хватает стрелок на нашем циферблате. Создадим по слою для каждой стрелки. Нажимаем Ctrl+L и выбираем тип слоя "Фигура". Вводим название - "часовая стрелка". Создадим на слое авангардно загнутую стрелку, для этого вычтем из одного круга другой. Нажимаем Ctrl+F и создаём овал с параметрами - размер 120*120 и смещение центра -5*50 (центр левее края изображения, поэтому -5). Затем создадим вторую фигур, но на этот раз создадим её с операцией вычитания. Это тоже овал, но немного сдвинутый с парамтерами - размер 120*120 и смещение -15*39. Нажав Ctrl+R мы увидим, что получили тонкий серый полумесяц. Обрежем полумесяц снизу, создав прямоугольник с операцией вычитания и такими параметрами - размер 100*50 и смещение 50*75. Прямоугольник обрежет второй рог полумесяца. Теперь приведём оставшуюся часть полумесяца к ещё большей похожести на часову стрелку, введя плавный переход цвета (градиент). В поле "Цвет заполнения фигуры" введём значение 0xff84b5ff. Переключимся на вкладку градиентов "Внутренний" и введём ширину 2.5 (то есть дробное число процентов). И в поле "Завершающий цвет" введём опять 0xff84b5ff. Нажимаем Ctrl+R и видим вот такую картинку:

Color selection

Далее нам нужны минутная и секундная стрелки. Мы их можем создать просто скопировав часовую и немного подправив. Выберем в списке слоёв слой "часовая стрелка" и нажмём Ctrl+C, после этого внизу появится подсказка, информирующая нас о копировании. Теперь нажмём Ctrl+V. В списке слоёв появится ещё один слой с таким же названием. Изменим название на "минутная стрелка". Если название не изменить, то программа подскажет, что нужно устранить слои с одинаковым названием (что бы в них не путаться). Введём в свойство слоя "Угол поворота" значение -90 градусов, что бы наша минутная стрелка не перекрывала часовую, пока мы их редактируем. Заменим цвета заливки и завершающий для внутреннего градиента на 0xff77ff8e. Теперь удлинним стрелку изменив параметры кругов. Изменим первый (добавленный) овал на такой - размер 200*200 и смещение -45*50, а второй (вычитание) на такой - 220*220 и смещение -65*37. Так же немного расширим градиент, введя в поле для его ширины значение 3. Нажимаем Ctrl+R и видим вот такую картинку:

Color selection

Точно так же делаем секундную стрелку - копируем минутную, меняем цвет и размер фигур. Введём название нового слоя "секундная стрелка", изменим добавляемый овал на такой - 300*300 со смещением -96*50, а вычитаемый изменим на такой - 340*340 при смещении -124*37. Так же заменим цвет заливки и внутреннего градиента на такой - 0xfffff752. И для наглядного отображения стрелки повернём весь её слой на 90 градусов против часовой стрелки, используя поле слоя "Угол поворота" (введём туда 90). Нажимаем Ctrl+R и видим вот такую картинку:

Color selection

И в завершение работы над внешним видом добавим сверху над стрелками кружок, что бы скрыть неидеальные толстые концы стрелок. Кружок добавим в виде ещё одного слоя-фигуры (назовём его "кружок"), в котором создадим овал с параметрами 10*10 и смещение 50*50. Введём цвет заполнения - 0xffde00e4. Что бы по краю кружка появился плавный переход, зададим ширину внутеннего градиента равной 3 и введём такой завершающий цвет - 0xffad00b7. Нажимаем Ctrl+R и видим вот такую картинку:

Color selection

Теперь, когда внешний вид готов, мы можем оживить циферблат, добавив обновление времени и положения стрелок. Обновление производится при помощи скриптов, которые выдают новое значение или положение для фигуры. Сначала возьмём слой "время". В этом слое добавлена одна надпись, а рядом с её свойством "Текст" есть кнопка с буквой S, нажав на неё мы увидим окно, куда можно вводить скрипт (небольшую программу). Сверху в окне для скриптов мы видим галочку "Запускать скрипт". Установив её мы говорим программе, что скрипт используется. Если же её не установить, то скрипт просто хранится и ни на что не влияет. Включим переключатель и затем дважды кликнем мышью на элементах timeMinutes и timeHours24 в списке справа. Оба элемента появятся в тексте скрипта. Таким образом иы даём программе знать, что данные параметры нами будут использованы. Первый параметр обозначает минуты, а второй - часы. Это целые числа от 0 до 59 и от 0 до 23. Далее из этих чисел нам нужно создать надпись в таком формате - ЧЧ:ММ, где ММ обозначают две позиции для количества минут и ЧЧ обозначают две позиции для количества часов. В скрипте надпись формируется простым сложением, например вот так:

timeHours24+":"+timeMinutes

Здесь мы берём часы, добавляем к ним справа двоеточие, а потом к получившейся строке добавляем минуты. Но в таком случае будет некоторая особенность - часы и минуты, которые меньше 10, будут иметь по одному знаку, что приведёт к постоянному изменению длины строки - 1:2, 11:2, 3:12 и т.д. Что бы избежать такого изменения длины в скрипт добавляют простое условие - если число меньше 10, то дописать спереди ноль. Это выглядит вот так:

(timeHours24<10?"0":"")+timeHours24+":"+(timeMinutes<10?"0":"")+timeMinutes

Здесь сначала идёт условие, проверяющее каждое значение. Если значение меньше десяти - добавляется ноль, если не меньше - добавляется пустая строка. Теперь введём такую строку под тем текстом, что уже есть в окне со скриптом и нажмём кнопку Ok. Нажимаем Ctrl+R и в области свойств циферблата в самом верху включаем переключатель "Включение скриптов". Если ранее все шаги были выполнены как было предложено, то вместо надписи 12:25 вы увидите текущее время.

Аналогичным образом при помощи скриптов задаются и все остальные свойства, которые необходимо обновлять. Так если бы мы захотели добавить секунды к нашей надписи, то тогда в окне редактирования скрипта мы бы дважды кликнули на элемент списка timeSeconds, после чего включили бы его в формулу для формирования строки. Вообще в списке справа присутствуют все параметры, которые поддерживает программа, поэтому простым выбором из них вы можете добавить на циферблат довольно много информации. Полный список параметров приведён здесь же отдельно.

Для завершения работы над циферблатом нам осталось "оживить" стрелки. Для этого мы должны заставить меняться угол поворота каждой из стрелок в соответствии с текущим временем. Перейдём сначала на слой "часовая стрелка" и нажмём кнопку S в его свойстве "Угол поворота". В появившемся окне включим переключатель "Запускать скрипт" и дважды кликнем на элементах списка параметров - timeHours24 и timeMinutes. Введём ниже уже присутствующего текста такую строку:

360*(1-(timeHours24%12+timeMinutes/60)/12)-15

Здесь формула получилась немного посложнее, чем в прошлый раз. Нам нужно получить угол из значения часов и минут. Мы могли бы получить угол только из часов (без минут), но тогда бы целый час часовая стрелка стояла на месте, а потом скачком перепрыгивала на 30 градусов (то есть на один час). Что бы сгладить движение стрелки в формулу добавляются минуты и с ними стрелка перескакивает на 0.5 градусов каждую минуту, а поскольку это малозаметный сдвиг, создаётся впечатление плавности хода.

Помимо усложнения с минутами нам нужно получить обход стрелкой полного круга за 12 часов, а значение часов меняется от 0 до 23. Поэтому мы используем операцию взятия остатка от деления на 12. Эта операция обозначается знаком % (проценты). После её применения мы всегда будем иметь значение в диапазоне 0-11. Если к этому значению добавить ещё и минуты, делённые на 60, то получим значения в диапазоне 0-11.983, то есть за счёт минут мы заполняем промежуток между часами в виде некоего дробного числа. Далее это значение нужно поделить на 12, что бы получить текущую часть полного круга, если за полный круг примем единицу. Далее умножая значение от 0 до 1 на 360 - получим значение от 0 до 360 градусов. Но только математически углы увеличиваются против часовой стрелки, а нам нужно по часовой стрелке. Для получения такого эффекта мы вычитаем значение в диапазоне 0-1 из единицы. Ну и в конце вычитаем 15 градусов, что бы загнутая стрелка своим загнутым концом показывала правильное время. Загнутый конец расположен посередине между часами, а расстояние в градусах между часами равно 30, значит посередине и будут те самые 15 дополнительных градусов, на которые стрелку нужно довернуть в направлении по часовой стрелке, ну а раз углы у нас против часовой стрелки, значит нам нужно вычесть 15 градусов, а не добавить.

Точно таким же образом мы "оживляем" и две оставшиеся стрелки, но заменяем там часы на минуты, а минуты на секунды. В результате для минутной стрелки получим:

360*(1-(timeMinutes+timeSeconds/60)/60)-5

На этот раз нам не нужно вычислять остаток от деления на 12, а так же сдвиг загнутого конца минутной стрелки составляет примерно одну треть от сдвига часовой, что даёт нам 5 градусов вместо 15.

И так же для секундной стрелки:

360*(1-timeSeconds/60)-4

Здесь всё ещё проще, потому что мы не задавались целью показывать плавное перемещение секундной стрелки. Но если бы это было нам нужно, то достаточно заменить параметр timeSeconds на timeSecondsWithFraction и мы получим плавное перемещение секундной стрелки. Правда при этом стоит помнить, что если создавать сложные циферблаты и во многих местах использовать параметр timeSecondsWithFraction, то это приведёт к замедлению работы циферблата (появятся дёргания). Но чем новее ваше устройство и чем мощнее его процессор, тем меньше задержек вы получите.

Теперь мы имеем полностью готовый циферблат. Далее нам нужно его перевести в формат, который понимают часы. Так же мы можем захотеть получить изображение циферблата или его частей. Изображение можно получить, нажав Ctrl+W. После этого в каталоге с циферблатом появится файл с таким же названием, что и циферблат, но с добавленным расширением png. Это изображение со сторонами 960 на 960.

Для получения циферблата в удобном для часов формате, нужно нажать Ctrl+E, после чего в каталоге с циферблатом появится подкаталог с названием как и у циферблата, в которм будут файлы описания циферблата и скомпоновоанные из нескольких для повышения производительности изображения. Так же, если вы использовали какой-то другой шрифт вместо стандартного Arial, это шрифт нужно вручную скопировать в получившийся каталог, и не забыть переименовать файл со шрифтом в ту же строку, что и название шрифта. Так, например, для шрифта Serif файл с ним должен называться тоже Serif (без расширения). Дополнительные шрифты могут находиться в различных каталогах, напрмиер для Windows это может быть c:\windows\Fonts, но может быть и что-то ещё. Программа не всегда может определить, где конкретно находится шрифт, поэтому его нужно доложить вручную.

После экспорта циферблата каталог с ним достаточно скопировать на часы и в ту папку, где Time Starter ожидает увидеть свои циферблаты. Но не забудьте перечитать этот каталог, указав Time Starter-у на него повторно.

Оптимизация циферблата

Если соблюдать набор простых правил, то ваш циферблат всегда будет плавным и отзывчивым. В общем можно сказать, что слои в виде изображения отрисовываются быстрее, чем слои со скриптами, которые, например, меняют значени текущего времени. Но при этом важно, как часто происходят изменения. Если изменения редкие - раз в минуту или реже, то о таких слоях можно сильно не беспокоиться. Но если вы использовали в слое параметр, который меняется часто (как например timeSecondsWithFraction), то каждый такой слой будет замедлять циферблат. С другой стороны, такие операции, как поворот или сдвиг слоя целиком (то есть без каких-либо изменений свойств фигур слоя), так же выполняются гораздо быстрее, и если все слои с парамтером timeSecondsWithFraction только поворачиваются или смещаются - тогда циферблат получится достаточно быстрым. Так же старайтесь размещать слои без скриптов последовательно, то есть не допуская между ними слоёв со скриптами. Это даст возможность при экспорте объединить все слои без скриптов в один. А чем меньше в итоге будет слоёв, тем меньше будет проблем с производительностью. Вот такой простой набор правил даст вам возможность создавать циферблаты, плавно работающие на любом устройстве.

Список параметров, доступных для скриптов при создании циферблата